@media (max-width: 1200.98px) {
.product-content {
  gap: 5px;
}
}
@media (max-width: 991.98px) {
    header.hide-nav {
       transform: translateY(0) !important;
    }
    .product-content.clicked {
      opacity: 0; 
    }
   .PillowProductBack.clicked {
      opacity: 0!important; 
    }
    .navigation-container {
       flex-direction: row-reverse;
       gap: 10px;
       justify-content: flex-start;
    }
  
    .navigation {
       display: flex;
       align-items: center;
    }
  
    /* Toggle Nav */
  
    .ToggleButton {
       background: transparent;
       border: 0;
       display: flex;
       flex-direction: column;
       gap: 5px;
       align-items: center;
       transition: all 0.3s ease-in-out;
       padding: 10px;
       position: relative;
       z-index: 2;
    }
  
    .ToggleButton:focus {
       box-shadow: none;
    }
  
    .ToggleButton span {
       display: block;
       width: 24px;
       height: 2px;
       background: #fff;
       transition: all 0.3s ease-in-out;
    }
  
    .sticky-header .ToggleButton span {
       background: #fff;
    }
  
    .ToggleButton span:nth-child(2) {
       width: 16px;
    }
  
    .ToggleButton[aria-expanded="true"] span {
       background: #fff;
    }
  
    .ToggleButton[aria-expanded="true"]+#SideNav {
       transform: translateX(0);
    }
  
    .ToggleButton[aria-expanded="true"] span:nth-child(2) {
       opacity: 0;
    }
  
    .ToggleButton[aria-expanded="true"] span:first-child {
       transform: rotate(-45deg);
       top: 6px;
       position: relative;
    }
  
    .ToggleButton[aria-expanded="true"] span:last-child {
       transform: rotate(45deg);
       top: -8px;
       position: relative;
    }
  
    #sideaNav {
       position: fixed;
       top: 0;
       left: 0;
       height: 100vh;
       background: #000;
       width: 60%;
       box-shadow: 0 0 10px rgb(0 0 0 / 15%);
       display: block;
       z-index: 99;
       transform: translateX(-101%);
       transition: all 0.3s ease-in-out;
       color: #fff;
    }
  
    .ToggleButton[aria-expanded="true"]+#sideaNav {
       transform: translateX(0);
    }
  
    .nav-overlay {
       position: fixed;
       top: 0;
       right: 0;
       background: rgba(0, 0, 0, 0.8);
       z-index: 1;
       width: 100%;
       height: 100vh;
       transition: all 0.3s ease-in-out;
       opacity: 0;
       visibility: hidden;
    }
  
    .navbar-collapse.show+.nav-overlay {
       opacity: 1;
       visibility: visible;
    }
  
    .sidenav-logo {
       display: flex;
       padding: 20px;
       border-bottom: 1px solid #eee;
       margin-bottom: 15px;
    }
  
    .sidenav-logo img {
       width: 70px;
    }
  
    #sideaNav .navbar-nav {
       margin: 0 !important;
       height: 100%;
       gap: 15px;
       overflow: auto;
    }
  
    #sideaNav .navbar-nav .nav-item {
       padding: 0 20px;
    }
  
    .navbar-nav .nav-link {
       color: #fff;
    }
  
    .navbar-nav .nav-link.active,
    .navbar-nav .nav-link:hover {
       color: #fff;
    }
  }
  
  
  
  
  
  @media (max-width: 1180px) {
    .offerImgSnooze {
      left: 40px;
    }
  }
  
  @media (max-width: 991.98px) {
    .AboutText {
      padding-left: 0px;
    }
    .ProductBottom {
      max-width: 170px;
    }
    .ProductSnooze {
      max-width: 99px !important;
    }
    .LeftBannerImg {
      top: -241px;
    }
    .LeftBannerSnoozeImg {
      top: -280px;
    }
    .custom-space {
      padding: 60px 0px;
    }
    .offerImg {
      left: 40px;
    }
    .LeftBannerOozeImg {
      top: 77px;
    }
    .PillowLeftContent {
      margin-top: 40px;
    }
  }
  
  @media (max-width: 768.98px) {
    .BannerInnerImg {
      max-width: 300px;
    }
    .pillowContent {
      padding: 65px 20px;
    }
    .PillowLeftContent {
      margin-top: 0px;
    }
    .LeftBannerImg {
      max-width: 320px;
    }
    .TopBannerImg {
      position: absolute;
      right: -99px;
      top: -251px;
      max-width: 413px;
      transform: rotate(-5deg);
    }

    .copy-right {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
  
    .BannerInnerText h1 {
      font-size: 40px;
    }
    .pillowBanner {
      max-width: 350px;
    }
    .offerImg {
      left: 0;
    }
    .SnoozeAbout {
      height: 100%;
    }
    .offerImgSnooze {
      left: 14px;
    }
    .ColorFullText {
      right: 14px;
    }
  
    .OozeBanner {
      max-width: 240px;
    }
    .OozeTextImg {
      max-width: 230px;
    }
    .OOZEofferImg {
      max-width: 80px;
    }

    .OozeLeftContent .OOZEofferImg {
      left: 25px;
    }
  
    .RightBottomBannerSnoozeImg {
      display: none;
    }
  
    .TopBannerSnoozeImg {
      left: -140px;
    }
  
    .offerImg {
      max-width: 82px;
      top: -89px;
      left: 82px;
    }

    .OozeLeftContent .PillowBox{
      margin-left: 45px;
    }
    
    .footer-link {
      position: relative;
      left: -17px;
    }
  }
  @media (max-width: 568.98px) {
    .offerImg {
      left: 0;
    }
    .LeftBannerOozeImg {
      display: none;
    }
    .TopBannerImg {
      display: none;
    }
    .LeftBannerSnoozeImg {
      display: none;
    }
   
  }
  @media (max-width: 500px) {
  .PillowBackTop h6 {
    align-items: center;
    display: flex;
    justify-content: end;
}
.PillowProduct .styled-text {
  text-align: start;
  font-size: 19px;
  padding-bottom: 5px;
  padding-left: 2px;
}
.PillowBackTop {
  display: block;
}
.PillowProductBack {
  padding: 10px 10px;
  border-radius: 10px;
}
.productFrontCann {
  font-size: 14px;
}

}
  @media (max-width: 375px) {
    .TopBannerImg {
      position: absolute;
      right: -206px;
      top: -229px;
      max-width: 413px;
      transform: rotate(-63deg);
    }
    .pillowBanner {
      max-width: 300px;
    }
    .offerImgSnooze {
      left: 0px;
    }
    .ColorFullText {
      right: 0px;
    }
    .LeftBannerSnoozeImg {
      transform: rotate(26deg);
    }
    .offerImg {
      left: 0;
    }
  }
  
  @media (max-width: 320px) {
    .footer-link {
      gap: 30px;
    }
    .offerImg {
      left: 0;
    }
  }