body {
     font-family: "Open Sans", sans-serif;
     color: #444444;
}
 a {
     color: #85b0be;
     text-decoration: none;
}
 a:hover {
     color: #a6c6d0;
     text-decoration: none;
}
 h1, h2, h3, h4, h5, h6 {
     font-family: "Raleway", sans-serif;
}
 
/* Top bar links */
 .top-link {
     color: #00b5b5;
     text-decoration: none;
}
 .top-link:hover {
     text-decoration: underline;
}
/* Top menu items */
 .top-menu {
     color: #fff;
     text-decoration: none;
     font-weight: 500;
     font-size: 14px;
}
 .top-menu:hover {
     color: #00b5b5;
}
/* Top search bar */
 .top-search-bar {
     flex: 1;
     max-width: 400px;
     position: relative;
}
 .top-search-bar input {
     border-radius: 5px 0 0 5px;
     border: none;
     padding: 6px 12px;
}
 .top-search-bar .search-btn {
     background: #fff;
     border: none;
     padding: 6px 12px;
     border-radius: 0 5px 5px 0;
     cursor: pointer;
}
/* ===== MAIN HEADER ===== */
 .main-header {
     background: #fff;
     padding: 10px 0;
     border-bottom: 1px solid #e5e5e5;
     position: fixed;
     top: 52px;
    /* below top bar */
     left: 0;
     width: 100%;
     z-index: 1050;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* Add space below fixed header */
 body {
     padding-top: 135px;
    /* Top bar + main header */
}
/* Logo */
 .logo {
     font-size: 28px;
     letter-spacing: 1px;
     color: #000;
     font-weight: bold;
     text-decoration: none;
}
/* Navbar links */
 .navbar-nav .nav-link {
     color: #000;
     font-weight: 600;
     font-size: 15px;
     transition: color 0.3s ease-in-out;
}
 .navbar-nav .nav-link:hover {
     color: #00b5b5;
}
/* Cart Icon */
 .cart-wrapper {
     position: relative;
}
 .cart-icon {
     color: #000;
     font-size: 20px;
     position: relative;
     text-decoration: none;
}
 .cart-count {
     position: absolute;
     top: -8px;
     right: -10px;
     background: red;
     color: white;
        font-size: 12px;
    padding: 0px 5px;
     border-radius: 50%;
}
/* ===== RESPONSIVE ===== */
 @media (max-width: 991px) {
     .top-search-bar {
         display: none;
    }
     .top-bar {
        display: none!important;
    }
     .main-header {
         top: 0px !important;
    }
     body {
         padding-top: 80px;
    }
    .offers-section {
    padding: 0px 0px !important;
}
}
/*slider*/
/* Slider Container */
 .titan-slider {
     max-width: 1450px;
     margin: 20px auto;
     border-radius: 14px;
     overflow: hidden;
     position: relative;
}
/* Slide Image */
 .titan-slider img {
     width: 100%;
     height: auto;
     display: block;
     border-radius: 14px 14px 0 0;
}
/* Mobile View */
 @media (max-width: 768px) {
     .titan-slider {
         margin: 10px;
         border-radius: 10px;
    }
     .swiper-button-next, .swiper-button-prev {
         display: none;
        /* Hide arrows on mobile */
    }
}
 .shop-category {
     padding: 40px 0;
     text-align: center;
     background-color: #fff;
}
 .shop-category h2 {
     font-size: 28px;
     font-weight: 700;
     margin-bottom: 25px;
}
/* Tabs */
 .category-tabs {
     margin-bottom: 30px;
}
 .category-tabs .nav-link {
     font-weight: 600;
     font-size: 16px;
     color: #888;
     border: none;
     background: transparent;
     padding: 5px 15px;
}
 .category-tabs .nav-link.active {
     color: #000;
     border-bottom: 3px solid #00bcd4;
}
/* Category Cards */
 .category-card {
     text-align: center;
     margin-bottom: 20px;
     transition: transform 0.3s ease;
}
 .category-card:hover {
     transform: translateY(-5px);
}
 .category-card img {
     width: 120px;
     height: 120px;
     object-fit: cover;
     border-radius: 50%;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     margin-bottom: 10px;
     transition: all 0.3s ease;
}
 .category-card img:hover {
     transform: scale(1.05);
}
 .category-card p {
     font-size: 15px;
     font-weight: 500;
     margin: 0;
}
/* Stats Bar */
/* Stats Bar Container */
 .stats-bar {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 60px;
     margin-top: 40px;
     padding-top: 35px;
     border-top: 1px solid #e6e6e6;
     max-width: 800px;
     margin-left: auto;
     margin-right: auto;
}
/* Each Stat */
 .stats-bar .stat {
     text-align: center;
     padding: 0 40px;
     position: relative;
}
/* Vertical Divider Between Stats */
 .stats-bar .stat:not(:last-child)::after {
     content: "";
     position: absolute;
     top: 8px;
     right: 0;
     width: 1px;
     height: 55px;
     background-color: #e0e0e0;
}
/* Numbers Styling */
 .stats-bar h3 {
     font-size: 28px;
     font-weight: 700;
     margin: 0;
     color: #222;
}
/* Labels Styling */
 .stats-bar p {
     font-size: 15px;
     font-weight: 400;
     color: #555;
     margin: 5px 0 0;
}
/* Responsive Design */
 @media (max-width: 768px) {
     .stats-bar {
         flex-direction: column;
         gap: 20px;
         padding-top: 20px;
    }
     .stats-bar .stat {
         padding: 0;
    }
     .stats-bar .stat:not(:last-child)::after {
         display: none;
    }
}
 .trending-offers {
     max-width: 1200px;
     margin: 40px auto;
     padding: 0 20px;
}
 .trending-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 15px;
}
 .trending-header h2 {
     font-size: 26px;
     font-weight: bold;
     color: #222;
}
 .trending-header a {
     text-decoration: none;
     color: #00bcd4;
     font-weight: 500;
     font-size: 16px;
     display: flex;
     align-items: center;
     gap: 5px;
}
 .offers-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 20px;
}
 .offer-card {
     background-color: #fff;
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     cursor: pointer;
     transition: transform 0.3s ease-in-out;
}
 .offer-card:hover {
     transform: scale(1.02);
}
 .offer-card img {
     width: 100%;
     height: 260px;
     object-fit: cover;
     display: block;
}
 @media (max-width: 768px) {
     .offer-card img {
         height: 200px;
    }
}
 .frequently-bought {
     background: linear-gradient(to right, #ffe680, #ffefad);
     padding: 30px 20px;
     border-radius: 20px;
     max-width: 1200px;
     margin: 40px auto;
}
 .section-header h2 {
     font-size: 24px;
     font-weight: bold;
     margin-bottom: 20px;
     color: #222;
}
 .swiper-wrapper {
     gap: 20px;
    /* space between slides */
}
 .product-card {
     background-color: #fff;
     border-radius: 12px;
    
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     max-width: auto;
     transition: 0.3s;
     height: 100%;
     box-sizing: border-box;
}
 .product-card:hover {
     transform: scale(1.02);
}
 .product-card img {
     width: 100%;
     height: 90px;
     object-fit: contain;
     border-radius: 8px;
     margin-bottom: 10px;
}
 .product-info h4 {
     font-size: 16px;
     font-weight: 600;
     margin: 0;
}
 .product-info p {
     font-size: 14px;
     color: #555;
     margin: 5px 0;
}
 .price {
     font-weight: 700;
     font-size: 16px;
     margin-top: 5px;
}
 .tax {
     font-size: 12px;
     color: #999;
}
 .badge {
     position: absolute;
     top: 10px;
     left: 10px;
     background-color: #00c49a;
     color: #fff;
     font-size: 12px;
     font-weight: bold;
     padding: 4px 8px;
     border-radius: 4px;
}
 .eyewear-section {
     background: #f6fcfd;
     padding: 50px 20px;
     text-align: center;
}
 .section-header .subtitle {
     font-size: 14px;
     font-weight: 500;
     color: #6c7a89;
     display: block;
     margin-bottom: 8px;
}
 .section-header .title {
     font-size: 22px;
     font-weight: 700;
     color: #2d3748;
     margin-bottom: 40px;
}
 .eyewear-categories {
     display: flex;
     justify-content: center;
     gap: 50px;
     flex-wrap: wrap;
}
 .category {
     text-align: center;
}
 .category img {
     width: 140px;
     height: 140px;
     object-fit: cover;
     border-radius: 50%;
     box-shadow: 0 4px 10px rgba(0,0,0,0.1);
     transition: transform 0.3s ease;
}
 .category img:hover {
     transform: scale(1.05);
}
 .category p {
     margin-top: 12px;
     font-size: 16px;
     font-weight: 500;
     color: #222;
}
 .find-store {
     padding: 40px 20px;
     display: flex;
     justify-content: center;
}
 .store-banner {
     background: url("../img/mini-section.jpeg") center/cover no-repeat;
     border-radius: 16px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 40px;
     color: #fff;
     position: relative;
     overflow: hidden;
     max-width: 1200px;
    /* 👈 Reduced width */
     width: 100%;
}
 .store-banner::before {
     content: "";
     position: absolute;
     inset: 0;
     background: rgba(0, 0, 0, 0.4);
    /* dark overlay */
     border-radius: 16px;
}
 .store-content {
     position: relative;
     z-index: 2;
}
 .store-content h3 {
     font-size: 22px;
     font-weight: 700;
     margin-bottom: 6px;
}
 .store-content p {
     font-size: 16px;
     font-weight: 400;
     opacity: 0.9;
}
 .store-arrow {
     position: relative;
     z-index: 2;
     font-size: 26px;
     font-weight: bold;
}
 .brands-section {
     padding: 60px 20px;
     max-width: 1280px;
     margin: auto;
}
 .brands-section h2 {
     text-align: center;
     font-size: 28px;
     font-weight: 700;
     margin-bottom: 40px;
     color: #222;
}
 .brandSwiper {
     padding: 10px 10px 50px;
}
 .swiper-slide {
     background: #fff;
     border-radius: 16px;
     overflow: hidden;
}
 .swiper-slide:hover {
     transform: translateY(-6px);
}
 .swiper-slide img {
     width: 100%;
     object-fit: cover;
     border-top-left-radius: 16px;
     border-top-right-radius: 16px;
}
 .brand-logo {
     text-align: center;
     padding: 16px 10px;
     font-size: 18px;
     font-weight: 600;
     color: #111827;
     background: #f0f7ff;
     border-bottom-left-radius: 16px;
     border-bottom-right-radius: 16px;
}
 .offers-section {
     padding: 40px 60px;
}
 .offers-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 20px;
}
 .offers-header h2 {
     font-size: 26px;
     font-weight: bold;
}
 .offers-header a {
     color: #00aaff;
     font-size: 16px;
     text-decoration: none;
}
 .swiper {
     width: 100%;
}
 .swiper-slide {
     border-radius: 12px;
     overflow: hidden;
}
 .swiper-slide img {
     width: 100%;
     display: block;
     border-radius: 12px;
}
/* Left side */
 .left-box {
     background: #f8f9fa;
     border-right: 3px solid #007bff;
     min-height: 300px;
}
 .new-arrivals-title {
     font-size: 26px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 1px;
     color: #222;
     writing-mode: vertical-rl;
     transform: rotate(180deg);
     margin: 0;
}
/* Product card */
 .product-card {
     background: #fff;
     border: 1px solid #eee;
     border-radius: 10px;
     overflow: hidden;
     text-align: center;
     transition: all 0.3s ease;
}
 .product-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}
 .product-card .img-box {
     width: 100%;
     height: 220px;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
}
 .product-card img {
     width: 100%;
     object-fit: cover;
}
 .product-card h5 {
     font-size: 16px;
     font-weight: 600;
     margin: 10px 0 5px;
}
 .product-card .price {
     font-size: 15px;
     font-weight: bold;
     color: #007bff;
     margin-bottom: 15px;
}
/* Navigation buttons */
 .swiper-button-next, .swiper-button-prev {
     color: #fff!important;
     background: #007bff!important;
     border-radius: 50%!important;
     width: 40px!important;
     height: 40px!important;
     top: 45%!important;
     display: flex!important;
     align-items: center;
     justify-content: center;
}
 .swiper-button-next::after, .swiper-button-prev::after {
     font-size: 18px!important;
     font-weight: bold;
}
 .swiper-button-next:hover, .swiper-button-prev:hover {
     background: #0056b3;
}
 .video-section {
     display: flex;
     justify-content: center;
     padding: 80px 20px;
    /* উপরে-নিচে gap */
     background-color: #f2f2f2;
    /* চাইলে ব্যাকগ্রাউন্ড রং */
}
 .video-wrapper {
     position: relative;
     width: 100%;
     max-width: 1240px;
     aspect-ratio: 16 / 9;
     border-radius: 10px;
     overflow: hidden;
     box-shadow: 0 0 20px rgba(0,0,0,0.1);
     background: #000;
}
 .thumbnail {
     position: absolute;
     width: 100%;
     height: 100%;
     cursor: pointer;
     z-index: 2;
}
 .thumbnail img {
     width: 100%;
     height: 100%;
     object-fit: cover;
}
 .play-button {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     font-size: 60px;
     color: white;
     background-color: rgba(0, 0, 0, 0.6);
     padding: 20px;
     border-radius: 50%;
}
 .video-frame {
     width: 100%;
     height: 100%;
     display: none;
     z-index: 1;
}
 .eyewear-section {
     background-color: #f0fdff;
     padding: 40px 20px;
}
 .eyewear-content {
     max-width:1240px;
     margin: 0 auto;
     color: #222;
     font-family: Arial, sans-serif;
}
 .eyewear-content h2 {
     font-size: 24px;
     font-weight: bold;
     margin-bottom: 20px;
}
 .eyewear-content p {
     font-size: 16px;
     line-height: 1.6;
     margin-bottom: 15px;
}
 .upper-footer{
     padding:5px;
     background: #15141a;
     .accordion {
         max-width:1240px;
         margin: 50px auto;
         background-color: #15141A;
    }
     .accordion-item {
         border: none;
         border-bottom: 1px solid #333;
    }
     .accordion-header {
         display: flex;
         justify-content: space-between;
         align-items: center;
         cursor: pointer;
         padding: 18px 20px;
         font-size: 18px;
         font-weight: 600;
         transition: 0.3s;
         color: #8b8fa9!important;
         background-color: #14151A;
    }
     .icon {
         width: 24px;
         height: 24px;
         border: 1px solid #00e0ff;
         border-radius: 50%;
         display: flex;
         justify-content: center;
         align-items: center;
         color: #00e0ff;
         font-size: 16px;
         transition: transform 0.3s ease;
    }
     .accordion-content {
         max-height: 0;
         overflow: hidden;
         background: #14151A;
         transition: max-height 0.4s ease;
         padding: 0 20px;
    }
     .accordion-content p {
         padding: 15px 0;
         color: #8b8fa9!important ;
         margin: 0;
         line-height: 1.6;
         font-size: 15px;
    }
     .accordion-item.active .accordion-content {
         max-height: 200px;
        /* adjust as needed */
    }
     .accordion-item.active .icon {
         transform: rotate(45deg);
        /* changes + to x */
    }
     
/* Responsive adjustments */
@media (max-width: 768px) {
  
}

@media (max-width: 480px) {

}