* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }

   html,
   body {
     width: 100%;
     height: 100%;
     overflow-x: hidden;
   }

   .myNav {
     background: #5c0e0e;
     display: flex;
     justify-content: space-between;
     padding: 10px 70px;
   }

   .myNavToggler {
     color: #ccc;

   }

   .myNavItem a {
     display: flex;
     color: #ccc;
     font-family: "poppins";
     gap: 50px;
   }

   .myNavItem a:hover {
     color: #f8c471;
   }

   .myNavItem :active {
     color: #f8c471;
   }

   .navbar-brand img {
    width: 80px; 
    background-color: #ece3f7; 
    border-radius: 50%;
   }

   /* banner css */
   .hero-banner {
  background-image: 
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0.85) 0%,
      rgba(0, 0, 0, 0.55) 40%,
      rgba(255, 255, 255, 0) 100%
    ),
    url("assets/sagarnihalni7.avif");

  background-size: cover;
  background-position: center;
  height: 600px;
  position: relative;
  color: white;
}

   .banner-text {
     /* padding-top: 100px; */
   }

   .banner-text img {
     width: 190px;
     margin-top: -100px;
   }

   .subheading {
     font-family: "Poppins", sans-serif;
     font-size: 1.5rem;
     font-weight: 400;
     margin-bottom: 0.5rem;
   }

   .main-heading {
     font-family: var(--secondary-font);
     font-size: 48px;
     font-weight: 400;
     color: #ffc471;
     /* margin-bottom: 10rem; */
   }

   .desc {
     font-family: "Poppins", sans-serif;
     font-size: 16px;
     /* margin-top: -9rem; */
     /* margin-bottom: 13rem; */
     max-width: 450px;
     font-style: italic;
     font-weight: 500;
   }

   .banner-btn {
     padding: 0;
     width: 203px;
     height: 55px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 500;
     font-size: 24px;
     font-family: "Abhaya Libre", serif;
     border: 2px solid #fff;
     border-radius: 0;
     color: #fff;
     background: transparent;
     transition: background 0.3s ease, color 0.3s ease;
     text-decoration: none;
     /* margin-top: -10rem;
  margin-bottom: 6rem; */
   }

   .banner-btn:hover {
     background-color: #fff;
     color: #5c0e0e;
   }

   /* about us  */
   #aboutus {
     position: relative;
     font-family: "Poppins", sans-serif;
   }

   #aboutus img {
     z-index: 0;
   }

   .skipper-box {
     position: absolute;
     left: 50%;
     bottom: -25%;
     max-width: 820px;
     transform: translate(-50%);
     z-index: 1;
     background-color: rgba(168, 137, 109, 0.6);
     font-family: "Poppins", sans-serif;
     backdrop-filter: blur(4px);
     /* Optional: subtle blur behind */
     border-radius: 12px;
   }

   .skipperInnerLogo {
     width: 350px;
     margin: 0 auto;
   }

   .sagar-logo {
     height: 100px;
     /* width: 100%; */ 
     background-color: #ece3f7; 
    border-radius: 50%;

   }

   .skipper-box p {
     font-size: 16px;
     font-weight: 400;
     color: #000;
   }

   .skipper-box .stats {
     margin-top: 1.5rem;
   }

   .skipper-box .stats h1 {
     font-family: "Adamina", serif;
     font-size: 32px;
     font-weight: 600;
     margin-bottom: 0.25rem;
   }

   .skipper-box .stats p {
     font-size: 16px;
     font-weight: 400;
     margin: 0;
     color: #000;
   }

   .text-content {
     font-family: "Poppins", sans-serif;
     font-size: 16px;
     color: #333;
     /* margin-left: -220px; */
   }

   .arvindImage {
     height: 100%;
     display: flex;
     align-items: center;
   } 

   .arvindImage img {
     width: 60%;
     height: auto;
     object-fit: cover; 
     margin: 0 auto;
   }

   .text-content h1.our-promise {
     font-family: "Adamina", serif;
     /* Use different font for heading */
     font-size: 2rem;
     color: #5c0e0e;
   }

   .mt-overlap-fix {
     margin-top: 250px;
     padding: 48px 0;
   }

   .mens-wear-hero {
     position: relative;
     background-image: url("/images/Group\ 70.png");
     /* Update with your actual image path */
     background-size: cover;
     background-position: center center;
     min-height: 540px;
     width: 100%;
   }

   .skipper-intro {
     position: absolute;
     bottom: -40%;
     left: 50%;
     transform: translate(-50%);
     min-width: 820px;
     background-color: rgba(255, 255, 255, 0.6);
     font-family: "Poppins", sans-serif;
     border-radius: 12px;
     z-index: 10;
     padding: 60px 50px;
     backdrop-filter: blur(4px);
   }

   .mensWearContent {
     position: absolute;
     top: 57px;
     left: 81px;
   }

   .mens-wear-section {
     padding: 48px 0;
     font-family: "Poppins", sans-serif;
   }

   .skipper-intro p {
     font-size: 16px;
     color: #333;
   }

   .mens-wear-section h3,
   .mens-wear-section h4 {
     font-family: "Adamina", serif;
     color: #5c0e0e;
   }

   .contact-us-section {
     position: relative;
     background-image: url("images/13657751_5317679.jpg");
     background-size: cover;
     background-position: center;
     z-index: 1;
   }

   .contact-us-section::before {
     content: "";
     position: absolute;
     inset: 0;
     background: rgba(247, 242, 242, 0.8);
     z-index: 2;
   }

   .contact-us-section .container {
     position: relative;
     z-index: 3;
   }

   .contact-btn {
     padding: 0;
     width: 203px;
     height: 55px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 500;
     font-size: 24px;
     font-family: "Abhaya Libre", serif;
     border: none;
     border-radius: 0;
     color: #fff;
     background: #a11300;
     transition: background 0.3s ease, color 0.3s ease;
     margin-top: 1.5rem;
     margin-left: 23px;
   }

   .hero-heading {
     font-family: "Adamina", serif;
     font-size: 2.5rem;
     font-weight: 400;
     padding: 23px;
     /* margin-left: -60px;
  margin-top: 40px; */
   }

   .mens-wear-logo {
     /* margin-left: -70px;  */
     height: 100px; 
     background-color: #5c0e0e; 
     border-radius: 50%;
   } 

   .skipperIntroLogo img {
        width: 100px; 
        margin: 0 auto; 
        background-color: #5c0e0e; 
     border-radius: 50%;
   }

   .seperate-color {
     color: #a11300;
   }

   #menswear-section {
     padding-bottom: 160px;
     /* Space for the overlapping box */
     position: relative;
   }

   .aboutUsContainer {
     padding-top: 180px;
   }

   .about-heading {
     font-family: "Adamina", serif;
     font-size: 32px;
     font-weight: 400;
     color: #df8200;
     /* Yellow tone */
     text-transform: none;
     letter-spacing: 0.5px;
   }

   .ourPromise {
     font-family: "Adamina", serif;
     font-weight: 400;
     margin-bottom: 20px;
     font-size: 32px;
   }

   .categories-section {
     padding: 48px 0;
   }

   .products-section {
     padding: 48px 0;
   }

   .gallery-section {
     padding-left: 48px 0;
   }

   .section-title {
     font-family: "Adamina", serif;
     color: #df8200;
     /* or use #FF9900 / golden */
     font-size: 40px;
     font-weight: 400;
   }

   .section-subtitle {
     font-family: "Poppins", sans-serif;
     font-size: 16px;
     color: #000;
   }

   .innerCategoryCard {
     display: flex;
     justify-content: center;
   }

   .category-card {
     overflow: hidden;
     border-radius: 10px;
     position: relative;
   }

   .category-card img {
     width: 100%;
     height: auto;
     object-fit: cover;
   }

   .raised-card {
     margin-top: -60px;
   }

   .discover-btn {
     font-family: "Abhaya Libre", serif;
     font-size: 24px;
     font-weight: 500;
     border-radius: 0;
     background: #000;
     color: #fff;
   }

   .product-card {
     overflow: hidden;
     border-radius: 10px;
     position: relative;
     width: 230px;
   }

   .product-card img {
     width: 100%;
     height: auto;
     object-fit: cover;
     transition: transform 0.3s ease;
   }

   .category-card img {
     width: 100%;
     height: auto;
     object-fit: cover;
     transition: transform 0.3s ease;
   }

   .product-card:hover img {
     transform: scale(1.05);
   }

   .category-card:hover img {
     transform: scale(1.05);
   }

   .overlay-text {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     padding: 0.75rem 1rem;
     background: rgba(0, 0, 0, 0.5);
     backdrop-filter: blur(2px);
     border-radius: 0 0 10px 10px;
   }

   .overlay-text h6 {
     margin: 0;
     font-size: 14px;
     font-weight: 500;
     font-family: "Poppins", sans-serif;
   }

   .section-title {
     font-family: "Adamina", serif;
     font-size: 2.2rem;
     color: #da6a00;
     /* Orange */
   }

   .section-subtitle {
     font-size: 1rem;
     color: #444;
     font-family: "Poppins", sans-serif;
   }

   .gallery-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 20px;
     padding: 40px 0;
   }

   /* Common Item Styling */
   .gallery-grid .item {
     overflow: hidden;
     border-radius: 10px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   }

   .gallery-grid img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     border-radius: 10px;
   }

   /* Short Images */
   .item.short {
     height: 348px;
   }

   .item.short img {
     object-position: top;
   }

   /* Tall Images */
   .item.tall {
     height: 535px;
   }

   .item.tall img {
     object-position: center;
   }

   /* Join Box Styling */
   .item.join-box {
     background-color: #600d0d;
     color: white;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     font-family: "Adamina", serif;
     height: 162px;
     /* Changed from 380px to match short */
     border-radius: 10px;
     text-align: center;
     grid-column: 2 / span 2;
     /* Span two columns: 2 and 3 */
     grid-row: 2;
     /* Row 2 only */
   }

   /* Join Box Typography */
   .join-box p {
     font-family: "Adamina", serif;
     font-weight: 400;
     font-size: 24px;
     margin-bottom: 6px;
     letter-spacing: 0.8px;
   }

   .join-box h5 {
     font-family: "Adamina", serif;
     font-weight: 400;
     font-size: 40px;
     margin: 0;
   }

   /* Positioning via grid area */
   .img1 {
     grid-column: 1;
     grid-row: 1;
   }

   .img2 {
     grid-column: 2;
     grid-row: 1;
   }

   .img3 {
     grid-column: 3;
     grid-row: 1;
   }

   .img4 {
     grid-column: 4;
     grid-row: 1 / span 2;
   }

   .img5 {
     grid-column: 1;
     grid-row: 2 / span 2;
   }

   .img6 {
     grid-column: 2;
     grid-row: 3;
   }

   .img7 {
     grid-column: 3;
     grid-row: 3;
   }

   .img8 {
     grid-column: 4;
     grid-row: 3;
   }

   .social-media-section {
     padding: 60px 0;
     background-color: #fff;
   }

   .section-title {
     font-family: "Adamina", serif;
     color: #dd8412;
     font-weight: 400;
     font-size: 40px;
   }

   .social-grid {
     display: grid;
     grid-template-columns: 2fr 1fr 1fr;
     grid-template-rows: 1fr 1fr;
     gap: 20px;
   }

   .social-grid .item {
     border-radius: 10px;
     overflow: hidden;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   }

   .social-grid video {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     border-radius: 10px;
   }

   /* Layout Positions */
   .large {
     grid-row: span 2;
   }

   .tall {
     grid-row: span 2;
   }

   .small-top {
     grid-column: 3;
     grid-row: 1;
   }

   .small-bottom {
     grid-column: 3;
     grid-row: 2;
   }

   .site-footer {
     background-color: #600d0d;
     font-family: "Adamina", serif;
   }

   .site-footer h6 {
     font-weight: bold;
     margin-bottom: 0.75rem;
     font-size: 16px;
   }

   .site-footer a {
     text-decoration: none;
   }

   .site-footer a:hover {
     color: #f8c471;
   }

   .site-footer i {
     color: #fff;
   }

   .site-footer .list-unstyled li {
     margin-bottom: 6px;
     font-size: 14px;
   }

   .footer-link {
     color: #ccc;
     font-size: 16px;
   }

   .site-footer .text-white-50 {
     color: rgba(255, 255, 255, 0.75) !important;
   }

   .contact-us-section {
     background-color: #fdf5f5;
     font-family: "Poppins", sans-serif;
   }

   .contact-us-form input[type="text"],
   .contact-us-form input[type="email"],
   .contact-us-form textarea {
     padding: 0.75rem 1rem;
     border: 1px solid #ccc;
     font-size: 16px;
     transition: border-color 0.3s ease;
   }

   .contact-us-form input:focus,
   .contact-us-form textarea:focus {
     border-color: #5c0e0e;
     outline: none;
   }

   .submit-btn {
     background-color: #5c0e0e;
     color: #fff;
     border: none;
     padding: 0.6rem 2rem;
     font-size: 18px;
     font-weight: 500;
     border-radius: 25px;
     cursor: pointer;
     transition: background-color 0.3s ease;
   }

   .submit-btn:hover {
     background-color: #8d1919;
   }

   .form-label {
     font-size: large;
   }

   .form-check-input {
     border: 2px solid #000;
   }

   .form-check-label b {
     color: #5c0e0e;
   }

   .followUsContainer img {
     width: 130px;
   }

   /* Responsive CSS for your design */

   /* Extra Large and Large screens */
   @media (max-width: 1440px) {
     .hero-banner {
       height: 550px;
     }

     .main-heading {
       font-size: 42px;
       /* margin-bottom: 8rem; */
     }

     .desc {
       max-width: 420px;
       /* margin-top: -7rem;
    margin-bottom: 10rem; */
     }

     .banner-btn {
       width: 180px;
       height: 50px;
       font-size: 20px;
       /* margin-top: -8rem;
    margin-bottom: 5rem; */
     }

     .skipper-box {
       max-width: 700px;
     }

     .text-content {
       /* margin-left: -180px; */
     }

     .mt-overlap-fix {
       margin-top: 250px;
     }

     .mens-wear-hero {
       min-height: 480px;
     }

     .contact-btn {
       width: 180px;
       height: 50px;
       font-size: 20px;
       /* margin-left: -50px; */
       margin-top: 1rem;
       margin-bottom: 5rem;
     }

     .hero-heading {
       font-size: 2.2rem;
       /* margin-left: -50px;
    margin-top: 30px; */
     }

     .mens-wear-logo {
       /* margin-left: -60px; */
       /* height: 36px; */
     }

     #menswear-section {
       padding-bottom: 140px;
     }

     /* .skipper-intro {
    max-width: 700px;
    top: -35%;
  } */
     .product-card {
       width: 210px;
     }

     .category-card {
       width: 100%;
     }

     .raised-card {
       margin-top: -40px;
       transition: margin-top 0.3s ease;
     }

     .category-container,
     .product-container {
       display: flex;
       flex-wrap: wrap;
       gap: 20px;
       justify-content: center;
     }
   }

   /* Medium Screens 993px to 1199px */
   @media (max-width: 1199px) {
     .category-card {
       width: 190px;
     }

     .product-card {
       width: 150px;
     }

     .raised-card {
       margin-top: -30px;
       transition: margin-top 0.3s ease;
     }

     .bottomMap {
       /* width: 302px; */
       height: 80px;
     }

     .bottomMap iframe {
       width: 100%;
       height: 100%;
     }

     .list-unstyled li a,
     .contactUsPara p,
     .footerAddress p {
       font-size: 14px;
     }

     .skipper-box .stats h1 {
       font-size: 26px;
     }

     .item.join-box {
       /* height: 100%; */
     }

     .item.tall {
       height: 100%;
     }

     .gallery-grid {
       gap: 15px;
     }

     .skipper-box {
       bottom: -30%;
       width: 800px;
     }

     .mt-overlap-fix {
       margin-top: 220px;
     }

     .skipper-intro {
       bottom: -37%;
     }
   }

   /* Tablets and small desktops 992px and below */
   @media (max-width: 991px) {
     .hero-banner {
       height: 460px;
     }

     .main-heading {
       font-size: 34px;
       /* margin-bottom: 6rem; */
     }

     .desc {
       max-width: 350px;
       /* margin-top: -5rem;
    margin-bottom: 7rem; */
     }

     .banner-btn {
       width: 160px;
       height: 45px;
       font-size: 18px;
       /* margin-top: -6rem;
    margin-bottom: 4rem; */
     }

     .skipper-box {
       width: 600px;
       /* top: 90%; */
       bottom: -40%; 
     }

       .text-content {
         /* margin-left: -120px; */
         font-size: 15px;
       }

       .mt-overlap-fix {
         margin-top: 210px;
       }

       .mens-wear-hero {
         min-height: 380px;
       }

       .contact-btn {
         width: 160px;
         height: 45px;
         font-size: 18px;
         margin-left: -40px;
         margin-top: 1rem;
         margin-bottom: 4rem;
       }

       .hero-heading {
         font-size: 1.8rem;
         margin-left: -40px;
         margin-top: 25px;
       }

       .mens-wear-logo {
         margin-left: -50px;
         height: 32px;
       }

       #menswear-section {
         padding-bottom: 110px;
       }

       .skipper-intro {
         padding: 50px 40px;
         bottom: -56%;
         min-width: 700px;
       }

       .category-card {
         width: 170px;
       }

       .product-card {
         width: 160px;
       }

       .raised-card {
         margin-top: -20px;
       }

       .category-container,
       .product-container {
         display: flex;
         flex-wrap: wrap;
         gap: 18px;
         justify-content: center;
       }

       .gallery-grid {
         grid-template-columns: repeat(3, 1fr);
         gap: 15px;
         padding: 30px 0;
       }

       .skipperInnerLogo {
         width: 250px;
       }

       .aboutUsContent {
         width: 100%;
       }

     .aboutUsContent img {
       width: 100%;
     }

     .about-heading {
       text-align: center;
       margin-top: 15px;
     }

     .skipper-box {
       width: 650px;
     }

     .skipper-intro {
       min-width: 620px;
     }

     .arvindImage {
       justify-content: center;
       padding-bottom: 30px;
     }
   }

   /* Small devices (phones landscape) 767px and below */
   @media (max-width: 767px) {
     .navbar-custom {
       height: 60px;
     }

     .banner-text img {
       margin-top: -100px;
     }

     .navbar-nav .nav-link {
       font-size: 0.9rem;
       padding: 0.3rem 0.8rem;
     }

     .hero-banner {
       height: 400px;
       padding: 0 1rem;
     }

     .main-heading {
       font-size: 28px;
       /* margin-bottom: 4rem; */
     }

     .desc {
       max-width: 320px;
       /* margin-top: -4rem; */
       /* margin-bottom: 6rem; */
       font-size: 14px;
     }

     .navbar-brand img {
       width: 70%;
     }

     .skipper-logo {
       width: 70%;
     }

     .banner-btn {
       width: 140px;
       height: 42px;
       font-size: 16px;
       /* margin-top: -5rem; */
       /* margin-bottom: 3rem; */
     }

     .skipper-box p {
       font-size: 12px;
     }

     .skipper-box .stats h1 {
       font-size: 18px;
     }

     .skipper-box .stats {
       margin-top: 1rem;
     }

     .skipper-box {
       /* max-width: 90%;
    top: 88%;
    padding: 1rem 1.2rem; */
       font-size: 14px;
     }

     .text-content {
       /* margin-left: -80px; */
       font-size: 14px;
     }

     .mt-overlap-fix {
       margin-top: 160px;
     }

     .mens-wear-hero {
       min-height: 320px;
     }

     .contact-btn {
       width: 140px;
       height: 42px;
       font-size: 17px;
       /* margin-left: -30px; */
       margin-left: 25px;
       /* margin-left: 0; */
       margin-top: 1rem;
       margin-bottom: 4rem;
     }

     .hero-heading {
       font-size: 1.6rem;
       /* margin-left: -30px; */
       /* margin-top: 20px; */
     }

     .mens-wear-logo {
       /* margin-left: -40px; */
       height: 28px;
       margin-bottom: 0 !important;
     }

     #menswear-section {
       padding-bottom: 90px;
     }

     .skipper-intro {
       /* max-width: 90%; */
       /* top: -25%; */
     }

     /* Increase category card size and keep them together horizontally */
     .category-card {
       width: 220px;
       margin: 0 8px 20px;
       flex-shrink: 0;
     }

     .product-card {
       width: 220px;
       margin: 0 8px 20px;
       flex-shrink: 0;
     }

     .category-container,
     .product-container {
       display: flex;
       flex-wrap: nowrap;
       overflow-x: auto;
       gap: 16px;
       justify-content: flex-start;
       padding-bottom: 10px;
       -webkit-overflow-scrolling: touch;
     }

     .category-container::-webkit-scrollbar,
     .product-container::-webkit-scrollbar {
       display: none;
     }

     .raised-card {
       margin-top: 0;
       margin-bottom: 0;
     }

     .skipper-box {
       width: 450px;
     }

     .skipper-intro {
       min-width: 500px;
     }

     .mens-wear-section {
       padding: 30px 0;
     }

     .skipper-intro {
       padding: 15px 25px;
     }

     .mensWearContent {
       left: 30px;
     }

     .skipper-intro {
       bottom: -69%;
     }

     .aboutUsContainer {
       padding-top: 200px;
     }

     .arvindImage img {
       width: 40%;
     }

     .discover-btn {
       font-size: 18px;
     }

     .categories-section,
     .products-section,
     .gallery-section {
       padding: 30px 0;
     }

     .join-box p {
       font-size: 16px;
     }

     .join-box h5 {
       font-size: 22px;
     }
   }

   /* Extra small devices (phones portrait) 576px and below */
   @media (max-width: 575px) {
     .navbar-custom {
       height: 55px;
     }

     .navbar-nav .nav-link {
       font-size: 0.85rem;
       padding: 0.25rem 0.6rem;
     }

     .hero-banner {
       height: 350px;
       padding: 0 0.5rem;
     }

     .banner-text {
       padding-top: 60px;
     }

     .main-heading {
       font-size: 24px;
       margin-bottom: 3rem;
     }

     .desc {
       max-width: 90%;
       margin-top: -3rem;
       margin-bottom: 5rem;
       font-size: 13px;
     }

     .banner-text img {
       width: 150px;
       margin-top: -80px;
     }

     .banner-btn {
       width: 130px;
       height: 40px;
       font-size: 15px;
       margin-top: -4rem;
       margin-bottom: 2rem;
     }

     .text-content {
       /* margin-left: -40px; */
       font-size: 13px;
     }

     .mt-overlap-fix {
       margin-top: 200px;
     }

     .mens-wear-hero {
       min-height: 280px;
     }

     .contact-btn {
       width: 130px;
       height: 40px;
       font-size: 16px;
       /* margin-left: -25px; */
       margin-top: 3.2rem;
       margin-bottom: 3rem;
     }

     .hero-heading {
       font-size: 1.4rem;
       /* margin-left: -25px; */
       /* margin-top: 18px; */
     }

     .mens-wear-logo {
       margin-left: -30px;
       height: 26px;
     }

     #menswear-section {
       padding-bottom: 80px;
     }

     .skipper-intro {
       /* max-width: 95%;
    top: -22%; */
       bottom: -57%;
     }

     .product-card {
       width: 170px;
     }

     .category-card {
       width: 160px;
     }

     .category-card:not(:last-child),
     .product-card:not(:last-child) {
       margin-bottom: 16px;
     }

     .category-container,
     .product-container {
       display: flex;
       flex-wrap: wrap;
       gap: 14px;
       justify-content: center;
     }

     .gallery-grid {
       grid-template-columns: 1fr;
       gap: 12px;
       padding: 15px 0;
     }

     .join-box {
       height: 120px;
       grid-column: 1;
       grid-row: 2;
     }

     .social-grid {
       grid-template-columns: 1fr;
       grid-template-rows: auto auto auto;
     }

     h1.our-promise {
       font-size: 24px !important;
     }

     .skipperIntroLogo img {
       width: 32%;
     }

     .skipper-intro p {
       font-size: 14px;
     }

     .about-heading,
     .section-title {
       font-size: 28px;
     }

     .ourPromise {
       font-size: 24px;
     }

     .category-card {
       min-width: 350px
     }
   }

   /* Phones 480px and below */
   @media (max-width: 479px) {
     .navbar-custom {
       height: 50px;
     }

     .navbar-nav .nav-link {
       font-size: 0.8rem;
       padding: 0.25rem 0.5rem;
     }

     .hero-banner {
       height: 320px;
       padding: 0 0.5rem;
     }

     .banner-text {
       padding-top: 50px;
     }

     .main-heading {
       font-size: 20px;
       margin-bottom: 2rem;
     }

     .desc {
       max-width: 90%;
       margin-top: -2rem;
       margin-bottom: 4rem;
       font-size: 12px;
     }

     .banner-text img {
       width: 130px;
       margin-top: -70px;
     }

     .banner-btn {
       width: 120px;
       height: 38px;
       font-size: 14px;
       margin-top: -3rem;
       margin-bottom: 1.5rem;
     }

     .text-content {
       /* margin-left: -30px; */
       font-size: 12px;
     }

     .mt-overlap-fix {
       margin-top: 150px;
     }

     .mens-wear-hero {
       min-height: 260px;
     }

     .contact-btn {
       width: 120px;
       height: 38px;
       font-size: 15px;
       margin-left: 0;
     }

     .hero-heading {
       font-size: 1.2rem;
       margin-top: 14px;
       padding: 0; 
       background-color: rgba(6, 2, 56, 0.3);
     }

     .mens-wear-logo {
       margin-left: -10px;
       height: 24px;
     }

     #menswear-section {
       padding-bottom: 70px;
     }

     .skipper-intro {
       min-width: 350px;
     }

     .product-card {
       width: 150px;
     }

     .category-card {
       width: 160px;
     }

     .category-card:not(:last-child),
     .product-card:not(:last-child) {
       margin-bottom: 14px;
     }

     .category-container,
     .product-container {
       display: flex;
       flex-wrap: wrap;
       gap: 12px;
       justify-content: center;
     }

     .gallery-grid {
       grid-template-columns: 1fr;
       gap: 10px;
       padding: 10px 0;
     }

     .join-box {
       height: 100px;
       grid-column: 1;
       grid-row: 2;
     }

     .social-grid {
       grid-template-columns: 1fr;
     }

     .skipper-logo {
       width: 50%;
     }

     .skipper-intro {
       bottom: -72%;
     }

     .highlight-text,
     .aboutUsPara {
       font-size: 12px;
     }

     .ourPromise {
       font-weight: 400 !important;
     }
     .text-content{
      text-align: center;
     }
     .highlight-text, .aboutUsPara, .ourPromise{
       text-align: center;
     }
   }

   /* Very small phones 320px and below */
   @media (max-width: 320px) {
     .navbar-custom {
       height: 45px;
     }

     .navbar-nav .nav-link {
       font-size: 0.75rem;
       padding: 0.2rem 0.4rem;
     }

     .hero-banner {
       height: 280px;
       padding: 0 0.4rem;
     }

     .banner-text {
       padding-top: 40px;
     }

     .main-heading {
       font-size: 18px;
       margin-bottom: 1.5rem;
     }

     .desc {
       max-width: 95%;
       margin-top: -1.5rem;
       margin-bottom: 3rem;
       font-size: 11px;
     }

     .banner-text img {
       width: 110px;
       margin-top: -60px;
     }

     .banner-btn {
       width: 110px;
       height: 36px;
       font-size: 13px;
       margin-top: -2.5rem;
       margin-bottom: 1rem;
     }

     .skipper-box {
       max-width: 95%;
       padding: 0.5rem 0.6rem;
       font-size: 11px;
     }

     .text-content {
       font-size: 11px;
     }

     .mt-overlap-fix {
       margin-top: 90px;
     }

     .mens-wear-hero {
       min-height: 220px;
     }

     .contact-btn {
       width: 110px;
       height: 36px;
       font-size: 14px;
       margin-left: -15px;
       margin-top: 0.3rem;
       margin-bottom: 1.5rem;
     }

     .hero-heading {
       font-size: 1rem;
       margin-top: 12px;
     }

     .mens-wear-logo {
       margin-left: -20px;
       height: 22px;
     }

     #menswear-section {
       padding-bottom: 60px;
     }

     .skipper-intro {
       max-width: 95%;
     }

     .product-card,
     .category-card {
       width: 95px;
     }

     .category-card:not(:last-child),
     .product-card:not(:last-child) {
       margin-bottom: 12px;
     }

     .category-container,
     .product-container {
       display: flex;
       flex-wrap: wrap;
       gap: 10px;
       justify-content: center;
     }

     .gallery-grid {
       grid-template-columns: 1fr;
       gap: 8px;
       padding: 8px 0;
     }

     .join-box {
       height: 90px;
       grid-column: 1;
       grid-row: 2;
     }

     .social-grid {
       grid-template-columns: 1fr;
       gap: 10px;
     }
   }

   /* =========================================================
      Basic styling for the Privacy Policy / Terms & Conditions
      pages (privacyPolicy.html, termsCondition.html). These pages
      use a plain Bootstrap navbar (class "navbar-custom") rather
      than the homepage's ".myNav", so give it the same brand look.
      ========================================================= */
   .navbar-custom {
     background-color: #5c0e0e;
     padding: 10px 70px;
   }

   .navbar-custom .navbar-brand img {
     width: 80px;
     background-color: #ece3f7;
     border-radius: 50%;
   }

   .navbar-custom .nav-link {
     color: #ccc;
     font-family: "Poppins", sans-serif;
   }

   .navbar-custom .nav-link:hover,
   .navbar-custom .nav-link:focus {
     color: #f8c471;
   }

   .navbar-custom .navbar-toggler-icon {
     filter: invert(1) grayscale(1) brightness(2);
   }

   .navbar-custom .navbar-toggler:focus {
     box-shadow: none;
   }

   /* Page heading ("Privacy Policy" / "Terms And Conditions") */
   .privacy-policy,
   .termsConditions {
     display: flex;
     justify-content: center;
     align-items: center;
     font-family: "Adamina", serif;
     color: #dd8412;
     font-size: 40px;
     font-weight: 400;
     padding-top: 48px;
     padding-bottom: 8px;
     text-align: center;
   }

   /* Body copy container */
   .allPolicies,
   .allConditions {
     font-family: "Poppins", sans-serif;
     display: flex;
     flex-direction: column;
     padding: 10px 24px 56px;
     max-width: 900px;
     margin: 0 auto;
   }

   .allPolicies > p,
   .allConditions > p {
     font-family: "Poppins", sans-serif;
     font-weight: 400;
     font-size: 16px;
     line-height: 1.7;
     color: #333;
     margin-bottom: 1rem;
   }

   .allPolicies h5,
   .allConditions h5 {
     font-family: "Adamina", serif;
     color: #5c0e0e;
     font-size: 22px;
     font-weight: 600;
     border-bottom: 2px solid #f3d9b1;
     padding-bottom: 6px;
     margin-bottom: 0.75rem;
   }

   .allPolicies ul,
   .allConditions ul {
     font-family: "Poppins", sans-serif;
     font-size: 16px;
     line-height: 1.7;
     color: #333;
     padding-left: 1.4rem;
     margin-bottom: 1rem;
   }

   .allPolicies li,
   .allConditions li {
     margin-bottom: 0.4rem;
   }

   .allPolicies a,
   .allConditions a {
     color: #a11300;
     font-weight: 500;
     text-decoration: none;
   }

   .allPolicies a:hover,
   .allConditions a:hover {
     text-decoration: underline;
   }

   @media (max-width: 767px) {
     .navbar-custom {
       padding: 10px 20px;
     }

     .privacy-policy,
     .termsConditions {
       font-size: 28px;
       padding-top: 30px;
     }

     .allPolicies,
     .allConditions {
       padding: 10px 16px 36px;
     }

     .allPolicies h5,
     .allConditions h5 {
       font-size: 18px;
     }
   }

   /* =========================================================
      ADDED FIXES: bug fixes + true mobile responsiveness.
      Everything below is scoped to <=991px, so desktop layout,
      spacing and styling above are completely untouched.
      ========================================================= */

   /* Nav had 70px side padding + fixed brand width that broke on
      small screens, and the collapsed menu had no background. */
   @media (max-width: 991px) {
     .myNav {
       padding: 10px 20px;
     }

     .navbar-brand img {
       width: 60px;
     }

     .navbar-collapse {
       background: #5c0e0e;
       padding: 10px 0;
     }

     .myNavItem a {
       gap: 0;
     }

     .navbar-toggler:focus {
       box-shadow: none;
     }
   }

   /* These two absolutely-positioned overlap boxes can't be made to
      behave on mobile without a full content/layout redesign (their
      height varies with wrapped text, so any overlap amount tuned
      for one phone width breaks on another). Simplest reliable fix:
      hide them below tablet width, and remove the extra spacing
      that existed only to make room for their overlap. */
   @media (max-width: 767px) {
     .skipper-box,
     .skipper-intro {
       display: none;
     }

     .mensWearContent {
       left: 5%;
       right: 5%;
       max-width: 90%;
     }

     .hero-heading {
       margin-left: 0;
       padding: 12px;
       overflow-wrap: break-word;
     }

     /* No skipper-box below the fabrics image anymore, so the next
        section doesn't need the big top margin that used to clear
        it — collapse it back to the section's own normal padding. */
     .mt-overlap-fix {
       margin-top: 0;
     }

     /* No skipper-intro overlapping the mens-wear banner anymore,
        so the banner doesn't need the extra bottom padding, and the
        content below it doesn't need the large top padding. */
     #menswear-section {
       padding-bottom: 0;
     }

     .aboutUsContainer {
       padding-top: 40px;
     }
   }

   /* Trim vertical spacing between sections on mobile — the original
      paddings (48–60px, plus Bootstrap's py-5 = 48px) were tuned for
      desktop and read as oversized gaps on small screens. */
   @media (max-width: 767px) {
     #aboutus.py-5,
     .contact-us-section.py-5 {
       padding-top: 2rem !important;
       padding-bottom: 2rem !important;
     }

     .mt-overlap-fix {
       padding: 24px 0;
     }

     .mens-wear-section {
       padding: 24px 0;
     }

     .categories-section,
     .products-section,
     .gallery-section {
       padding: 20px 0;
     }

     .social-media-section {
       padding: 24px 0;
     }

     .site-footer .py-5 {
       padding-top: 2rem !important;
       padding-bottom: 2rem !important;
     }
   }

   @media (max-width: 479px) {
     #aboutus.py-5,
     .contact-us-section.py-5 {
       padding-top: 1.5rem !important;
       padding-bottom: 1.5rem !important;
     }

     .mt-overlap-fix,
     .mens-wear-section {
       padding: 16px 0;
     }

     .categories-section,
     .products-section,
     .gallery-section,
     .social-media-section {
       padding: 14px 0;
     }
   }
   @media (max-width: 991px) {
     img,
     video,
     iframe {
       max-width: 100%;
     }

     .container,
     .container-fluid {
       max-width: 100%;
     }
   }