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

 body {
     font-family: 'Inter', sans-serif;
     line-height: 1.6;
     color: #333;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 .title {
     font-family: 'Playfair Display', serif;
 }

 /* Header */
 header {
     position: absolute;
     top: 20px;
     left: 50%;
     transform: translateX(-50%);
     width: 90%;
     max-width: 1800px;
     padding: 10px 30px;
     background: rgba(255, 255, 255, 0.08);
     backdrop-filter: blur(15px);
     border-radius: 40px;
     z-index: 999;
     display: flex;
     justify-content: space-between;
     align-items: center;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
     border: 1px solid rgba(255, 255, 255, 0.1);
     transition: all 0.3s ease;
 }

 .logo img {
     height: 50px;
 }

 /* .logo {
     font-size: 18px;
     font-weight: bold;
     color: #ffffff;
 } */

 nav {
     display: flex;
     align-items: center;
 }

 .nav-links {
     list-style: none;
     display: flex;
     gap: 10px;
     margin: 0;
 }

 .nav-links li a {
     text-decoration: none;
     color: #ffffff;
     font-weight: 380;
     padding: 16px;
     transition: all 0.3s ease;
     position: relative;
     font-size: 0.95rem;
 }

 .nav-links li a:hover,
 .nav-links li a.active {
     color: #ffffff;
     font-weight: 520;
     border-bottom: 2px solid #ffffff;
 }

 .hamburger {
     display: none;
     flex-direction: column;
     gap: 4px;
     cursor: pointer;
     padding: 5px;
     border-radius: 5px;
     transition: all 0.3s ease;
 }

 .hamburger:hover {
     background: rgba(255, 255, 255, 0.1);
 }

 .hamburger span {
     width: 25px;
     height: 3px;
     background: white;
     border-radius: 2px;
     transition: all 0.3s ease;
 }

 .hamburger.active span:nth-child(1) {
     transform: rotate(45deg) translate(5px, 5px);
 }

 .hamburger.active span:nth-child(2) {
     opacity: 0;
 }

 .hamburger.active span:nth-child(3) {
     transform: rotate(-45deg) translate(7px, -6px);
 }

 /* Hero Section */
 .hero {
     height: 80vh;
     background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
         url('../img/about/about-hero.jpg');
     background-size: cover;
     background-position: center;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     color: white;
     position: relative;
 }

 .hero-content h1 {
    font-size: 3rem;
    /* margin-bottom: 20px; */
    font-weight: 300;
    max-width: 800px;
 }

 .hero-content p {
     font-size: 1.4rem;
     max-width: 1000px;
     margin: 0 auto;
     opacity: 0.9;
 }

 /* Welcome Section */
 .welcome-section {
     padding: 80px 20px;
     max-width: 1200px;
     margin: 0 auto;
 }

 .welcome-section h2 {
     font-size: 2.5rem;
     margin-bottom: 30px;
     color: #2d3748;
 }

 .welcome-section h2 .highlight {
     color: #f6ad55;
 }

 .welcome-text {
     font-size: 1.1rem;
     line-height: 1.7;
     color: #4a5568;
     margin-bottom: 50px;
     text-align: justify;
 }
.welcome-text p {
    margin-bottom: 10px;
}
 /* Three Images Section */
 .three-images {
     margin: 60px 0;
     height: 400px;
     display: flex;
     gap: 10px;
     border-radius: 15px;
     overflow: hidden;
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
      background:  url('../img/about/2.png');
     background-size: cover;
     background-position: center;
     display: flex;
 }



 /* Founder Section */
 .founder-section {
     background: linear-gradient(rgb(223 231 241 / 96%), rgb(204 224 249 / 85%)), url(../img/about/1.jpg);
     background-size: cover;
     background-position: 50% 50%;
     display: flex;
     padding: 80px 20px;
 }

 .founder-container {
     max-width: 1200px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: 2fr 1fr;
     gap: 60px;
     align-items: center;
 }

 .founder-content h2 {
     font-size: 2.5rem;
     color: #002366;
     margin-bottom: 30px;
 }

 .founder-text {
     font-size: 1.1rem;
     line-height: 1.8;
     color: #4a5568;
 }

 .founder-image {
     width: 100%;
     height: 400px;
     background: 
         url('../img/about/4.jpeg');
            background-size: cover;
     background-position: center;
     border-radius: 50%;
     position: relative;
     overflow: hidden;
 }

 /* Vision Mission Cards */
 .vision-mission {
     padding: 80px 20px;
     max-width: 1200px;
     margin: 0 auto;
 }

 .cards-container {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 30px;
     margin-top: 40px;
 }

 .card {
     background: white;
     padding: 40px;
     border-radius: 15px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
     border: 1px solid #002366;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .card:hover {
     transform: translateY(-5px);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
 }

 .card h3 {
     font-size: 1.8rem;
     color: #002366;
     margin-bottom: 20px;
     text-align: center;
 }

 .card p {
     font-size: 1.1rem;
     line-height: 1.7;
     color: #000000;
 }

 /* Sustainability Section */
 .sustainability-section {
   background: linear-gradient(rgb(223 231 241 / 96%), rgb(204 224 249 / 85%)), url(../img/about/1.jpg);
            background-size: cover;
     background-position: 50% 50%;
     /* color: white; */
     padding: 80px 20px;
 }

 .sustainability-container {
     max-width: 1200px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 60px;
     align-items: center;
 }

 .sustainability-content h2 {
     font-size: 2.5rem;
     margin-bottom: 30px;
     color: #002366;
 }

 .sustainability-text {
     font-size: 1.1rem;
     line-height: 1.8;
     opacity: 0.9;
 }

 .sustainability-image {
     width: 550px;
     height: 350px;
     background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
         url('../img/about/5.png');
     background-size: cover;
     background-position: center;
     border-radius: 15px;
 }

 

  /* footer section */
.footer {
    background: linear-gradient(rgba(4, 23, 65, 0.9), rgb(22 66 141 / 90%)), url(../img/Footer.png) center / cover;
    color: white;
    padding: 60px 20px 30px;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr ;
    gap: 40px;
}

.footer-section h3 {
    font-size: 1.2rem;
    margin-bottom: 20px;
    color: #ffffff;
}

.footer-section p,
.footer-section a {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #ffffff;
    text-decoration: none;
    margin-bottom: 8px;
    display: block;
    max-width: 400px;
}

.footer-section a:hover {
    color: #f8f8f8;
}

.social-links {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.social-links a {
    width: 35px;
    height: 35px;
    background: #2c5282;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
}

.social-links a:hover {
    background: #f6ad55;
}

.footer-bottom {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    font-size: 0.9rem;
    color: #ffffff;
}


@media (max-width: 768px) {
   
    .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }

.logo{
    /* padding-left: 110px; */
    width: 200px;
}


    .footer-section h3 {
    font-size: 1.2rem;
    margin-bottom: 20px;
    color: #ffffff;
    text-align: center;
}

.footer-section p,
.footer-section a {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #ffffff;
    text-decoration: none;
    margin-bottom: 8px;
    display: block;
    text-align: center;
}

.footer-section a:hover {
    color: #f8f8f8;
}

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

.social-links a {
    width: 35px;
    height: 35px;
    background: #2c5282;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
}

.social-links a:hover {
    background: #f6ad55;
}

.footer-bottom {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    font-size: 0.9rem;
    color: #ffffff;
}

}

@media (max-width: 480px) {
    .hero {
    height: 80vh;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../img/about/about-hero.jpeg);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    position: relative;
    }
    .footer-container {
        grid-template-columns: 1fr;
    }
}
 /* Mobile Menu */
 .mobile-menu-btn {
     display: none;
     flex-direction: column;
     cursor: pointer;
     padding: 5px;
 }

 .mobile-menu-btn span {
     width: 25px;
     height: 3px;
     background: white;
     margin: 3px 0;
     transition: 0.3s;
 }

 /* Responsive Design */
 @media (max-width: 1024px) {
     header {
         width: 95%;
         padding: 8px 20px;
     }

     .nav-links {
         gap: 15px;
     }

     .nav-links li a {
         font-size: 0.9rem;
         padding: 6px 12px;
     }
 }

 @media (max-width: 768px) {
     header {
         padding: 10px 20px;
         border-radius: 30px;
     }

     .hamburger {
         display: flex;
     }

     .nav-links {
         display: none;
         position: absolute;
         top: 100%;
         left: 0;
         width: 100%;
         background: rgba(255, 255, 255, 0.95);
         backdrop-filter: blur(15px);
         flex-direction: column;
         padding: 20px;
         border-radius: 20px;
         box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
         margin-top: 10px;
         border: 1px solid rgba(255, 255, 255, 0.2);
     }

     .nav-links.active {
         display: flex;
     }

     .nav-links li a {
         color: #333;
         font-weight: 500;
         padding: 12px 0;
         text-align: center;
         border-bottom: 1px solid rgba(0, 0, 0, 0.1);
     }

     .nav-links li:last-child a {
         border-bottom: none;
     }

     .nav-links li a:hover,
     .nav-links li a.active {
         color: #f6ad55;
         border-bottom-color: #f6ad55;
     }

     .hero-content h1 {
         font-size: 2rem;
     }

     .hero-content p {
         font-size: 1rem;
     }

     .welcome-section h2 {
         font-size: 2rem;
     }

     .three-images {
         height: 250px;
         flex-direction: column;
     }

     .image-item {
         min-height: 150px;
     }

     .founder-container {
         grid-template-columns: 1fr;
         gap: 40px;
     }

     .founder-image {
         height: 300px;
     }

     .cards-container {
         grid-template-columns: 1fr;
         gap: 20px;
     }

     .sustainability-container,
     .quality-container {
         grid-template-columns: 1fr;
         gap: 40px;
     }

   
@media (max-width: 768px) {
   
    .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }

.logof{
    /* padding-left: 110px; */
    width: 200px;
}


    .footer-section h3 {
    font-size: 1.2rem;
    margin-bottom: 20px;
    color: #ffffff;
    text-align: center;
}

.footer-section p,
.footer-section a {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #ffffff;
    text-decoration: none;
    margin-bottom: 8px;
    display: block;
    text-align: center;
}

.footer-section a:hover {
    color: #f8f8f8;
}

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

.social-links a {
    width: 35px;
    height: 35px;
    background: #2c5282;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
}

.social-links a:hover {
    background: #f6ad55;
}

.footer-bottom {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    font-size: 0.9rem;
    color: #ffffff;
}

}

@media (max-width: 480px) {
    
    .footer-container {
        grid-template-columns: 1fr;
    }
}
     .welcome-section,
     .vision-mission,
     .founder-section,
     .sustainability-section,
     .quality-section {
         padding: 60px 20px;
     }
 }

 @media (max-width: 480px) {
     header {
         width: 95%;
         padding: 8px 15px;
         border-radius: 25px;
     }

     .logo {
         font-size: 14px;
     }

     .hero-content h1 {
         font-size: 1.5rem;
     }

     .welcome-section h2,
     .founder-content h2,
     .sustainability-content h2,
     .quality-content h2 {
         font-size: 1.8rem;
     }

     .three-images {
         height: auto;
     }

     .footer-container {
         grid-template-columns: 1fr;
     }

     .card {
         padding: 30px 20px;
     }

     .sustainability-image {
     width: auto;}
     .quality-image {
     width: auto;}
 }