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

 body {
     font-family: 'Merriweather Sans', sans-serif;
     transition: opacity ease-in 0.2s;
     color: #fff;
     background-color: #000;
 }

 body[unresolved] {
     opacity: 0;
     display: block;
     overflow: hidden;
     position: relative;
 }

 /* Utility Classes */
 .font-myfont {
     font-family: 'Merriweather Sans', sans-serif;
 }

 .bg-fume {
     background-color: #1a1a1a;
 }

 .bg-footer {
     background-color: #0d0d0d;
 }

 
/* .ico-1{
     color: #fff !important;
}
.ico-1:hover{
     color: #fff !important;
} */

 /* Hero Section */
 .hero-section {
     position: relative;
     width: 100%;
     height: 100vh;
     overflow: hidden;
     background-color: black;
 }

 .hero-video {
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     width: 100%;
     height: 100%;
     object-fit: cover;
 }


 .hero-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1), transparent);
     pointer-events: none;
 }

 .hero-content {
     position: absolute;
     top: 50%;
     left: 2rem;
     z-index: 20;
     max-width: 70vw;
     transform: translateY(-50%);
 }

 .hero-title {
     font-size: 1.5rem;
     font-weight: 600;
     line-height: 1.25;
     margin-bottom: 0.5rem;
 }

 .hero-subtitle {
     font-size: 1rem;
     color: rgba(255, 255, 255, 0.85);
     margin-bottom: 1rem;
 }

 .hero-button {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     padding: 0.625rem 1.25rem;
     border-radius: 9999px;
     background-color: white;
     color: black;
     font-weight: 600;
     text-decoration: none;
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
     transition: all 0.2s;
     margin-top: 1rem;
 }

 .hero-button:hover {
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
     background-color: #000 !important;
     color: #fff !important;
 }

 .hero-button svg {
     opacity: 0.7;
     transition: transform 0.2s;
 }

 .hero-button:hover svg {
     transform: translateX(0.125rem);
 }

 /* Product Categories */
 .product-categories {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     z-index: 20;
 }

 .categories-container {
     backdrop-filter: blur(4px);
     background-color: rgba(0, 0, 0, 0.3);
 }

 .categories-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 0;
 }

 .category-button {
     height: 3.5rem;
     width: 100%;
     padding: 0.5rem;
     font-size: 0.875rem;
     color: white;
     text-align: left;
     background-color: rgba(255, 255, 255, 0.05);
     border: none;
     cursor: pointer;
     transition: background-color 0.2s;
 }

 .category-button:hover {
     background-color: rgba(255, 255, 255, 0.15);
 }

 .category-name {
     font-weight: 600;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }

 .category-description {
     font-size: 0.6875rem;
     color: rgba(255, 255, 255, 0.8);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }

 /* Main Content */
 .main-content {
     min-height: 100vh;
     padding-top: 7.5rem;
 }

 .content-container {
     width: 100%;
     color: rgba(255, 255, 255, 0.9);
 }

 /* Featured Product */
 .featured-product {
     margin: 0 1rem 0 1rem;
     max-width: 72rem;
     margin-left: auto;
     margin-right: auto;
     margin-top: -5rem;
 }

 .featured-product-container {
     position: relative;
     overflow: hidden;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
 }

 .featured-product-image {
     width: 100%;
     aspect-ratio: 16/9;
     object-fit: cover;
     transition: transform 0.5s;
 }

 .featured-product-container:hover .featured-product-image {
     transform: scale(1.05);
 }

 .featured-product-overlay {
     position: absolute;
     inset: 0;
     z-index: 10;
     background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.45));
 }

 .featured-product-content {
     position: absolute;
     inset: 0;
     z-index: 20;
     display: flex;
     align-items: center;
     justify-content: flex-end;
 }

 .featured-product-info {
     position: relative;
     z-index: 20;
     margin-left: 0;
     display: flex;
     flex-direction: column;
     gap: 0.75rem;
     align-items: flex-end;
     text-align: right;
     max-width: 18rem;
     margin-left: auto;
 }

 .featured-product-title {
     font-size: 1.125rem;
     font-weight: 300;
     letter-spacing: -0.02em;
     line-height: 1.25;
     margin-top: 0.5rem;
 }

 .featured-product-description {
     font-size: 0.875rem;
     line-height: 1.625;
     font-weight: 300;
     letter-spacing: -0.01em;
     color: rgba(255, 255, 255, 0.85);
     width: 60%;
 }

 .featured-product-link {
     display: inline-flex;
     align-items: flex-end;
     gap: 0.5rem;
     margin-top: 0.5rem;
     padding: 0.625rem 1.25rem;
     font-weight: 500;
     letter-spacing: -0.01em;
     align-self: flex-end;
     text-align: right;
     font-size: 0.875rem;
     color: white;
     text-decoration: none;
     transition: transform 0.2s;
 }

 .featured-product-link:hover {
     transform: translateX(0.25rem);
 }

 .featured-product-link svg {
     opacity: 0.8;
 }

 /* Collections Section */
 .collections-section {
     width: 100%;
     padding: 0.5rem 0;
     color: rgba(255, 255, 255, 0.9);
 }

 .section-header {
     padding: 0 0.75rem;
     margin-top: 0.5rem;
 }

 .section-title-container {
     display: flex;
     align-items: center;
     gap: 1rem;
 }

 .section-title {
     font-size: 1.5rem;
     font-weight: 600;
     letter-spacing: 0.05em;
 }

 .section-divider {
     height: 1px;
     width: 2.5rem;
     background-color: rgba(255, 255, 255, 0.2);
 }

 .section-description {
     margin-top: 0.5rem;
     font-size: 0.875rem;
     line-height: 1.625;
     max-width: 100%;
 }

 .collections-grid {
     display: grid;
     grid-template-columns: repeat(1, 1fr);
     gap: 1rem;
     margin-top: 1rem;
 }

 .collection-card {
     position: relative;
     width: 100%;
     height: 15.625rem;
     overflow: hidden;
 }

 .collection-image {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .collection-logo {
     position: absolute;
     bottom: 0;
     left: 0.5rem;
     width: 100px;
     height: auto;
     object-fit: contain;
     pointer-events: none;
 }

 .collection-overlay {
     position: absolute;
     inset: 0;
     background-color: rgba(0, 0, 0, 0.5);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     color: white;
     opacity: 0;
     transition: opacity 0.3s;
     text-decoration: none;
 }

 .collection-card:hover .collection-overlay {
     opacity: 1;
 }

 .collection-overlay svg {
     height: 1.25rem;
     width: 1.25rem;
     margin-bottom: 0.5rem;
 }

 .collection-overlay-text {
     font-size: 1.125rem;
     font-weight: 600;
     text-align: center;
 }

 /* Areas of Use Section */
 .areas-section {
     width: 100%;
     padding: 0.5rem 0;
     color: rgba(255, 255, 255, 0.9);
 }

 .areas-container {
     position: relative;
     width: 100%;
     margin: 0 auto;
     max-width: 2000px;
 }

 .areas-showcase {
     position: relative;
     width: 100%;
     overflow: hidden;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
     height: 90vh;
 }

 .areas-image {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
 }

 .areas-info {
     position: absolute;
     top: 0;
     bottom: 4.0625rem;
     left: 0;
     width: 26.33rem;
     max-width: 85%;
     z-index: 20;
     display: grid;
     place-items: center;
 }

 .areas-info-content {
     padding: 1rem;
     color: white;
     font-size: 0.875rem;
     line-height: 1.625;
     text-align: center;
     background-color: rgba(0, 0, 0, 0.5);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
 }

 .areas-tabs {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     display: flex;
     margin: 0;
     padding: 0;
     border-bottom: 1px solid white;
 }

 .area-tab {
     flex: 1;
     border-top: 1px solid white;
     border-left: 1px solid white;
     text-align: center;
     font-size: 0.875rem;
     color: white;
     cursor: pointer;
     transition: all 0.2s;
     padding: 0.5rem;
 }

 .area-tab:hover {
     color: black;
 }

 .area-tab.active {
     background-color: rgba(0, 0, 0, 0.8);
 }

 /* Design Highlights Section */
 .highlights-section {
     width: 100%;
     padding: 0.5rem 0;
     color: rgba(255, 255, 255, 0.9);
 }

 .highlights-container {
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
 }

 .highlights-content {
     width: 100%;
     background-color: transparent;
     border-radius: 0.375rem;
 }

 .highlights-inner {
     max-width: 72rem;
     margin: 0 auto;
     padding: 1rem 0.5rem;
 }

 .highlights-grid {
     display: flex;
     justify-content: center;
     gap: 3.5rem;
     margin-top: 1rem;
     flex-wrap: wrap;
 }

 .highlight-card {
     position: relative;
     width: 25rem;
     height: 15.625rem;
     overflow: hidden;
 }

 .highlight-image {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .highlight-badge {
     position: absolute;
     top: 0.75rem;
     left: 0.75rem;
     z-index: 20;
     pointer-events: none;
     padding: 0.25rem 0.75rem;
     border-radius: 0.375rem;
     background-color: rgba(0, 0, 0, 0.6);
     color: white;
     font-size: 0.875rem;
     font-weight: 500;
     letter-spacing: 0.05em;
 }

 .highlight-overlay {
     position: absolute;
     inset: 0;
     z-index: 10;
     background-color: rgba(0, 0, 0, 0.5);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     color: white;
     opacity: 0;
     transition: opacity 0.3s;
     text-decoration: none;
 }

 .highlight-card:hover .highlight-overlay {
     opacity: 1;
 }

 .highlight-overlay svg {
     height: 1.25rem;
     width: 1.25rem;
     margin-bottom: 0.5rem;
 }

 .highlight-overlay-text {
     font-size: 1.125rem;
     font-weight: 600;
 }

 .catalog-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     grid-template-rows: repeat(2, 1fr);
     gap: 1rem;
     height: 100%;
 }

 .catalog-item {
     position: relative;
     border-radius: 0.375rem;
     overflow: hidden;
     text-decoration: none;
 }

 .catalog-image {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.3s;
 }

 .catalog-item:hover .catalog-image {
     transform: scale(1.05);
 }

 .catalog-badge {
     position: absolute;
     top: 0.5rem;
     left: 0.5rem;
     z-index: 20;
     pointer-events: none;
     padding: 0.125rem 0.5rem;
     border-radius: 0.25rem;
     background-color: rgba(0, 0, 0, 0.6);
     color: white;
     font-size: 0.6875rem;
     text-transform: uppercase;
     letter-spacing: 0.05em;
 }

 .catalog-overlay {
     position: absolute;
     inset: 0;
     background-color: rgba(0, 0, 0, 0.4);
     opacity: 0;
     transition: opacity 0.3s;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-size: 0.875rem;
     font-weight: 600;
 }

 .catalog-item:hover .catalog-overlay {
     opacity: 1;
 }

 /* Sustainability Section */
 .sustainability-section {
     width: 100%;
     padding: 0.5rem 0;
     color: rgba(255, 255, 255, 0.9);
 }

 .sustainability-container {
     width: 100%;
 }

 .sustainability-card {
     position: relative;
     overflow: hidden;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
 }

 .sustainability-image {
     width: 100%;
     aspect-ratio: 16/9;
     object-fit: cover;
     transition: transform 0.5s;
 }

 .sustainability-card:hover .sustainability-image {
     transform: scale(1.05);
 }

 .sustainability-overlay {
     position: absolute;
     inset: 0;
     z-index: 10;
     background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.2), transparent);
 }

 .sustainability-content {
     position: absolute;
     inset: 0;
     z-index: 20;
     display: flex;
     align-items: center;
     justify-content: flex-end;
 }

 .sustainability-info {
     margin-right: 3rem;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 0.25rem;
     max-width: 38rem;
 }

 .sustainability-title {
     font-size: 0.625rem;
     font-weight: 600;
     line-height: 1.25;
     letter-spacing: -0.01em;
     word-break: break-word;
     hyphens: auto;
 }

 .sustainability-subtitle {
     font-size: 0.875rem;
     line-height: 1.4;
     letter-spacing: -0.005em;
     word-break: break-word;
     color: rgba(255, 255, 255, 0.95);
 }

 .sustainability-description {
     font-size: 0.875rem;
     line-height: 1.4;
     letter-spacing: -0.005em;
     word-break: break-word;
     color: rgba(255, 255, 255, 0.85);
 }

 .sustainability-badges {
     display: flex;
     flex-wrap: wrap;
     gap: 0.25rem;
     padding-top: 0;
 }

 .sustainability-badge {
     padding: 0.125rem 0.375rem;
     border-radius: 9999px;
     background-color: rgba(255, 255, 255, 0.15);
     color: white;
     font-size: 0.53125rem;
     line-height: 1;
     white-space: nowrap;
     backdrop-filter: blur(4px);
 }

 /* Brand Logos */
 .brand-logos {
     /* background-color: #1a1a1a; */
     width: 100%;
     padding: 0.5rem 1rem;
     margin-top: 1.5rem;
     margin-bottom: 3rem;
 }

 .brand-logos-container {
     width: 100%;
     max-width: 80rem;
     margin: 0 auto;
 }

 .brand-logos-grid {
     display: flex;
     gap: 0.75rem;
     overflow-x: auto;
     scroll-snap-type: x mandatory;
     margin: 0 -1rem;
     padding: 0 1rem;
 }

 .brand-logo-item {
     flex: none;
     width: 50%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     padding: 0.5rem;
     scroll-snap-align: start;
 }

 .brand-logo {
     width: 6.25rem;
     height: auto;
 }

 .footer {
     background: #1e1e1e;
     color: #ccc;
     padding: 60px 20px 30px;
     font-family: "Poppins", sans-serif;
 }

 .footer-container {
     max-width: 1200px;
     margin: 0 auto;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     gap: 40px;
 }

 .footer-section {
     flex: 1 1 220px;
 }

 .footer-section h3 {
     color: #fff;
     font-size: 1.1rem;
     margin-bottom: 20px;
     letter-spacing: 1px;
     text-transform: uppercase;
     border-bottom: 1px solid #333;
     padding-bottom: 8px;
 }

 .footer-section ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .footer-section ul li {
     margin-bottom: 10px;
     color: #ccc;
     cursor: pointer;
     transition: color 0.3s ease;
 }

 .footer-section ul li:hover {
     color: #fff;
 }

 .footer-section p {
     line-height: 1.6;
 }

 .footer-section i {
     color: #888;
     margin-right: 10px;
 }

 .logo {
     width: 150px;
     margin-bottom: 15px;
 }

 /* Social section */
 .footer-social {
     border-top: 1px solid #333;
     margin-top: 40px;
     padding-top: 25px;
     text-align: center;
 }

 .social-links {
     display: flex;
     justify-content: center;
     gap: 15px;
     margin-bottom: 10px;
 }

 .social-links a {
     color: #ccc;
     font-size: 1.1rem;
     transition: color 0.3s ease, transform 0.2s ease;
 }

 .social-links a:hover {
     color: #fff;
     transform: translateY(-2px);
 }

 .copyright {
     font-size: 0.9rem;
     color: #777;
 }

 /* Responsive */
 @media (max-width: 768px) {
     .footer-container {
         flex-direction: column;
         gap: 25px;
     }

     .footer-section {
         flex: none;
         width: 100%;
     }
 }

 /* Responsive Design */
 @media (min-width: 640px) {
     nav {
         height: 6rem;
     }

     .nav-container {
         padding: 0 1rem;
     }

     .menu-items {
         font-size: 1rem;
         gap: 1.25rem;
     }

     .hero-title {
         font-size: 1.875rem;
     }

     .hero-subtitle {
         font-size: 1.125rem;
     }

     .categories-grid {
         grid-template-columns: repeat(4, 1fr);
     }

     .category-button {
         height: 6rem;
         font-size: 0.875rem;
     }

     .container-11 {
         display: flex;
         width: 100%;
         max-width: 1920px;
         /* Assuming a max width for the overall design */
         background-color: #3f3f3f;
         min-height: 600px;
         /* A minimum height to ensure content is visible */
     }

     .image-section {
         flex: 1;
         background-image: url('../img/home-approach/our-approach.webp');
         /* Replace with your actual image URL */
         background-size: cover;
         background-position: center;
         position: relative;
         overflow: hidden;
         display: flex;
         justify-content: center;
         align-items: center;
         min-height: 400px;
         /* Minimum height for image section on smaller screens */
     }

     .image-content {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background-image: url('../img/homes-about/8d4507b4-d3c0-4b1b-897e-142c4f04ca49.jpeg');
         /* The provided image */
         background-size: cover;
         background-position: center;
     }

     .text-section {
         flex: 1;
         position: relative;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: flex-start;
         padding: 40px;
         color: #fff;
         min-height: 400px;
         overflow: hidden;
         z-index: 1;
     }

     /* background image layer */
     .text-section::before {
         content: "";
         position: absolute;
         inset: 0;
         background-image: url("../img/home-approach/our-approach.webp");
         /* 🔹 your background image */
         background-size: cover;
         background-position: center;
         filter: blur(8px);
         /* 🔹 adjust blur intensity */
         transform: scale(1.1);
         /* prevent visible edges after blur */
         z-index: 0;
     }

     /* dark overlay for better text contrast */
     .text-section::after {
         content: "";
         position: absolute;
         inset: 0;
         background-color: rgba(0, 0, 0, 0.5);
         /* 🔹 optional: adds dark layer */
         z-index: 0;
     }

     /* make sure your actual text stays on top */
     .text-section>* {
         position: relative;
         z-index: 1;
     }


     .text-section::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background-image: url('https://i.imgur.com/your-blurred-background-image.jpg');
         /* A blurred version of an interior background */
         background-size: cover;
         background-position: center;
         filter: blur(8px);
         /* Apply blur to the background */
         -webkit-filter: blur(8px);
         z-index: -1;
     }

     .text-content {
         max-width: 400px;
         /* Limit text width for readability */
         position: relative;
         /* To be above the blurred background */
         z-index: 1;
     }

     .text-section h1 {
         font-size: 3.5em;
         /* Adjust font size for responsiveness */
         margin-bottom: 15px;
         font-weight: normal;
     }

     .text-section p {
         font-size: 1.2em;
         /* Adjust font size for responsiveness */
         line-height: 1.5;
         margin-bottom: 30px;
     }

     .text-section .button {
         display: inline-flex;
         align-items: center;
         color: #fff !important;
         text-decoration: none;
         font-size: 1.1em;
         padding: 10px 0;
         border-bottom: 2px solid #fff;
         transition: border-bottom 0.3s ease;
     }

     .text-section .button:hover {
         border-bottom: 2px solid transparent;
     }

     .text-section .button svg {
         margin-left: 10px;
         width: 20px;
         height: 20px;
         fill: #fff !important;
     }

     /* expolre button created by Abdul Saboor */

               .button-group {
    display: inline-flex;
}


     /* Responsive adjustments */
     @media (max-width: 768px) {
       
         .container-11 {
             flex-direction: column;
         }
         .text-section .button svg {
        
         fill: #fff !important;
     }

         .image-section,
         .text-section {
             flex: none;
             width: 100%;
             min-height: 300px;
             /* Adjust min-height for smaller screens */
         }

         .text-section {
             padding: 30px;
             text-align: center;
             align-items: center;
         }

         .text-section h1 {
             font-size: 2.8em;
         }

         .text-section p {
             font-size: 1em;
         }

         .text-content {
             max-width: 100%;
         }

         .text-section .button {
             font-size: 1em;
         }
     }

     @media (max-width: 480px) {
         .text-section h1 {
             font-size: 2.2em;
         }

         .text-section p {
             font-size: 0.9em;
         }
     }

     .section-header {
         padding: 0 1rem;
     }

     .section-title {
         font-size: 1.5rem;
     }

     .collections-grid {
         grid-template-columns: repeat(2, 1fr);
         gap: 1rem;
         margin-top: 1.5rem;
     }

     .collection-card {
         height: 28.125rem;
     }

     .areas-showcase {
         height: 90vh;
     }

     .areas-info {
         bottom: 5.125rem;
     }

     .area-tab {
         padding: 1rem;
         font-size: 0.875rem;
     }

     .highlights-inner {
         padding: 1rem 0.5rem;
     }

     .highlight-card {
         height: 28.125rem;
     }

     .sustainability-title {
         font-size: 1rem;
     }

     .sustainability-subtitle {
         font-size: 1rem;
     }

     .sustainability-description {
         font-size: 1rem;
     }

     .sustainability-badges {
         gap: 0.5rem;
     }

     .sustainability-badge {
         padding: 0.25rem 0.75rem;
         font-size: 0.75rem;
     }

     .brand-logos {
         padding: 0.5rem 1.5rem;
     }

     .brand-logos-grid {
         overflow: visible;
         scroll-snap-type: none;
         margin: 0;
         padding: 0;
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 1rem;
     }

     .brand-logo-item {
         width: auto;
         flex: initial;
     }

     .brand-logo {
         width: 7.5rem;
     }

     .footer-container {
         padding: 0 1.5rem;
     }

     .footer-contact {
         width: 15.625rem;
     }

     .footer-links-container {
         flex-wrap: nowrap;
         justify-content: space-between;
     }

     .footer-column {
         width: auto;
     }

     .footer-social {
         width: auto;
         justify-content: flex-end;
     }
 }

 @media (min-width: 768px) {
     .menu-container {
         display: flex;
     }

     .social-container {
         display: flex;
     }

     .mobile-menu-button {
         display: none;
     }

     .hero-title {
         font-size: 2.25rem;
     }

     .hero-subtitle {
         font-size: 1.5rem;
     }

     .featured-product {
         margin: 0 auto;
     }

     .featured-product-image {
         aspect-ratio: 21/9;
     }

     .featured-product-info {
         max-width: 28rem;
     }

     .featured-product-title {
         font-size: 3rem;
     }

     .featured-product-description {
         font-size: 1.25rem;
     }

     .section-header {
         padding: 0 3.5rem;
     }

     .section-title {
         font-size: 1.25rem;
     }

     .collections-grid {
         grid-template-columns: repeat(4, 1fr);
     }

     .areas-showcase {
         height: 90vh;
     }

     .areas-info {
         bottom: 5.125rem;
     }

     .area-tab {
         padding: 2rem 1rem;
     }

     .highlight-card {
         height: 28.125rem;
     }

     .sustainability-info {
         margin-right: 8rem;
     }

     .sustainability-title {
         font-size: 1.125rem;
     }

     .sustainability-subtitle {
         font-size: 1.125rem;
     }

     .sustainability-description {
         font-size: 1.125rem;
     }

     .brand-logo {
         width: 10rem;
     }

     .footer-links {
         flex-direction: row;
         flex-wrap: nowrap;
         justify-content: space-between;
     }

     .footer-column {
         width: auto;
     }
 }

 @media (min-width: 1024px) {
     .menu-items {
         font-size: 0.9375rem;
         gap: 1.25rem;
     }

     .hero-title {
         font-size: 2.5rem;
     }

     .section-header {
         padding: 0 3.5rem;
     }

     .section-title {
         font-size: 2.25rem;
     }

     .areas-showcase {
         height: 100vh;
     }

     .areas-info {
         bottom: 5.125rem;
     }

     .area-tab {
         padding: 2rem 1rem;
     }

     .highlight-card {
         height: 28.125rem;
     }

     .sustainability-info {
         margin-right: 8rem;
     }

     .sustainability-title {
         font-size: 1.125rem;
     }

     .sustainability-subtitle {
         font-size: 1.125rem;
     }

     .sustainability-description {
         font-size: 1.125rem;
     }

     .brand-logo {
         width: 10rem;
     }
 }

 @media (min-width: 1280px) {
     .menu-items {
         font-size: 1rem;
         gap: 1.75rem;
     }

     .section-header {
         padding: 0 3.5rem;
     }

     .section-title {
         font-size: 2.25rem;
     }

     .areas-showcase {
         height: 100vh;
     }

     .areas-info {
         bottom: 5.125rem;
     }

     .area-tab {
         padding: 2rem 1rem;
     }

     .highlight-card {
         height: 28.125rem;
     }

     .sustainability-info {
         margin-right: 8rem;
     }

     .sustainability-title {
         font-size: 1.125rem;
     }

     .sustainability-subtitle {
         font-size: 1.125rem;
     }

     .sustainability-description {
         font-size: 1.125rem;
     }

     .brand-logo {
         width: 10rem;
     }
 }

 @media (max-width: 800px) {
     .menu-items {
         font-size: 0.75rem;
         gap: 0.5rem;
     }

     .menu-link {
         padding: 0 0.125rem;
     }
 }

 @media (max-width: 767px) {
     .menu-container {
         display: none;
     }

     .social-container {
         display: none;
     }

     .mobile-menu-button {
         display: block;
     }
      .sustainability-info {
            margin-left: 3rem;
        }
        .sustainability-image{
            height: 348px;
        }
        .areas-showcase{
            height: 60vh;
        }
        .text-content{
            padding-left: 34px;
    /* background-color: wheat; */
    padding-right: 11px;
    padding-top: 21px;
    padding-bottom: 21px;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.7);
    /* width: 124%; */
    margin-left: -62px;
        }
 }