:root {
           --primary-color: #CC0000;
           --secondary-color: #000;
           --accent-color: #FFD700;
           --text-color: #333;
           --light-bg: #f9f9f9;
           --max-width: 1200px;
           --master-margin: 0 auto;
           --card-radius: 20px;
       }

       body {
           font-family: 'Poppins', sans-serif;
           margin: 0;
           padding: 0;
           background-color: #FFFFFF;
           /* A subtle, professional background */
           color: var(--text-color);
           line-height: 1.6;
       }

       a {
           text-decoration: none;
           color: inherit;
       }

       img {
           max-width: 100%;
           height: auto;
           display: block;
       }

       .container {
           max-width: var(--max-width);
           margin: var(--master-margin);
           padding: 0 20px;
       }

       /* =============================
    RESPONSIVENESS
    =============================
    */
       @media (max-width: 1200px) {
           .container {
               padding: 0 40px;
           }
       }

       @media (max-width: 992px) {
           .hero-section {
               flex-direction: column;
               text-align: center;
               padding: 40px 20px !important;
           }

           .hero-section>div {
               max-width: 100% !important;
           }

           .hero-section img {
               margin-top: 30px;
           }

           .promo-icons-row {
               flex-direction: column;
               gap: 30px !important;
              justify-items: center;
           }

           .promo-category-cards {
               justify-content: center;
           }

        

           .top-performers-title {
               font-size: 24px !important;
           }

           .sale-banner {
               flex-direction: column;
               text-align: center;
               padding: 30px !important;
           }

           .sale-banner img {
               margin-top: 20px;
           }

           .pillow-card-section .pillow-card {
               flex: 1 1 45% !important;
           }

           .video-carousel .gif-item {
               flex: 0 0 50% !important;
           }

           .review-carousel-section .review-card {
               flex: 0 0 50% !important;
           }

           .gallery-grid {
               gap: 15px !important;
               grid-template-columns: 1fr !important;
           }

           .insta-img-wrapper {
               width: 180px !important;
               height: 180px !important;
           }

           .footer-grid {
               grid-template-columns: repeat(2, 1fr) !important;
           }
       }

       @media (max-width:448px){
        .insta-img-wrapper{
            width: 100% !important;
            height: 200px !important;
        }
       }

       @media (max-width: 768px) {


           .top-performers-carousel-wrapper .card {
               width: 100% !important;
           }

          

       

           .sleep-feature-section h2 {
               font-size: 28px !important;
               left: 20px !important;
           }

           .sleep-feature-section>div {
               left: 20px !important;
               right: 20px !important;
               max-width: 90% !important;
               top: auto !important;
               bottom: 20px !important;
           }

           .sleep-feature-section .line {
               display: none !important;
           }

           .pillow-table table {
               display: block;
               overflow-x: auto;
               white-space: nowrap;
           }

           .video-carousel .gif-item {
               flex: 0 0 100% !important;
           }

           .review-carousel-section .review-card {
               flex: 0 0 100% !important;
           }

           .footer-grid {
               grid-template-columns: 1fr !important;
               text-align: center;
           }

           .footer-grid div {
               margin-bottom: 20px;
           }

           .footer-social-icons {
               justify-content: center;
           }
       }

       /* =============================
    MICRO-INTERACTIONS & ANIMATIONS
    =============================
    */
       .card-hover-scale {
           transition: transform 0.3s ease, box-shadow 0.3s ease;
       }

       .card-hover-scale:hover {
           transform: translateY(-8px);
           box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
       }

       .image-hover-zoom {
           transition: transform 0.5s ease-in-out;
       }

       .image-hover-zoom:hover {
           transform: scale(1.08);
       }

       .button-hover-effect {
           transition: background-color 0.3s ease, transform 0.1s ease;
       }

       .button-hover-effect:active {
           transform: scale(0.98);
       }



       @keyframes fadeIn {
           from {
               opacity: 0;
               transform: translateY(20px);
           }

           to {
               opacity: 1;
               transform: translateY(0);
           }
       }

       .fade-in {
           animation: fadeIn 0.6s ease forwards;
       }

       .promo-button-reveal {
           transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
       }

       /* nav  ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,*/


       /* Container for the whole header */
       .header-container {
           width: 100%;
       }

       /* Styling for the navigation bar */
       .nav-bar {
           display: flex;
           justify-content: space-between;
           align-items: center;
           padding: 15px 30px;
           position: relative;
       }

       /* Logo */
       .logo {
           display: block;
       }

       /* For Links in Navbar */
       .nav-links {
           display: flex;
           align-items: center;
           gap: 25px;
       }

       .nav-links a {
           font-size: 16px;
           color: black;
           text-decoration: none;
           font-weight: normal;
           /* Make nav options unbold */
       }

       /* Dropdown menu styling */
       .dropdown {
           position: relative;
       }

       .dropdown:hover .dropdown-content {
           display: block;
       }

       .dropdown-content {
           display: none;
           position: absolute;
           top: 100%;
           left: 50%;
           transform: translateX(-50%);
           background-color: white;
           box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
           min-width: 160px;
           z-index: 20;
           /* Ensure dropdown is on top */
           text-align: center;
           max-height: 300px;
           /* Max height for dropdown */
           overflow-y: auto;
           /* Enable scrolling if the content exceeds max height */
       }

       /* Styling for the dropdown items */
       .dropdown-content a {
           padding: 10px 20px;
           text-decoration: none;
           display: block;
           color: black;
       }

       .dropdown-content a:hover {
           background-color: #f1f1f1;
       }

       /* Styling for the search bar and icons */
       .nav-icons {
           display: flex;
           align-items: center;
           gap: 15px;
       }

       .nav-icons input {
           padding: 8px 15px;
           border: 1px solid #ccc;
           border-radius: 25px;
           transition: all 0.3s;
       }

       .nav-icons img {
           cursor: pointer;
       }

       /* Hamburger menu (hidden by default) */
       .hamburger {
           display: none;
           cursor: pointer;
       }

       /* Cross icon to close the hamburger menu (hidden by default) */
       .close-hamburger {
           display: none;
           cursor: pointer;
       }

       /* Responsive Design for Mobile */
       @media screen and (max-width: 768px) {

           /* Hide the nav-links and nav-icons on smaller screens by default */
           .nav-links {
               display: none;
               flex-direction: column;
               gap: 10px;
               width: 100%;
               background-color: white;
               padding: 20px 0;
               position: absolute;
               top: 70px;
               left: 0;
               z-index: 10;
           }

           /* Center align navigation links when hamburger is clicked */
           .nav-links.open {
               display: flex;
               flex-direction: column;
               justify-content: center;
               align-items: center;
           }

           .nav-links.open a {
               padding: 10px 20px;
               color: black;
               font-size: 18px;
               text-align: center;
           }

           .nav-links.open a:hover {
               background-color: #f1f1f1;
           }

           /* Hide the nav-icons (search, profile, and cart) when hamburger is clicked */
           .nav-icons.hide {
               display: none;
           }

           /* Hamburger menu visible only on mobile */
           .hamburger {
               display: block;
           }

           /* Show the hamburger icon */
           .hamburger.open+.nav-links {
               display: flex;
           }

           /* Prevent scrolling when menu is open */
           body.no-scroll {
               overflow: hidden;
           }

           /* Cross icon for closing the menu */
           .close-hamburger {
               display: block;
               position: absolute;
               top: 85px;
               right: 15px;
               z-index: 30;
           }

           /* Hide nav-icons on mobile */
           .nav-icons {
               display: none;
           }

           /* Initially hide the cross icon */
           .close-hamburger {
               display: none;
           }

           /* Ensure dropdown is scrollable on mobile */
           .dropdown-content {
               max-height: 300px;
               overflow-y: auto;
           }
       }

       /* Desktop View: No Scrollbars for Dropdown */
       @media screen and (min-width: 769px) {
           .dropdown-content {
               max-height: none;
               /* Remove max-height to prevent scrollbar */
               overflow: visible;
               /* Ensure dropdown fits the content */
           }
       }