:root {
       --sky-blue: #4a90e2;
       --deep-blue: #1a3c6c;
       --light-blue: #e8f4ff;
       --cotton-white: #f9f9f9;
       --earth-brown: #8b7355;
       --soft-gray: #f0f0f0;
   }

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

   body {
       font-family: 'Open Sans', sans-serif;
       background-color: var(--cotton-white);
       color: #333;
       line-height: 1.6;
   }

   h1,
   h2,
   h3,
   h4,
   h5 {
       font-family: 'Montserrat', sans-serif;
       font-weight: 700;
   }

   /* Header Styles */
   .navbar {
       background-color: white;
       box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
       padding: 15px 0;
       transition: all 0.4s ease;
   }

   .navbar.scrolled {
       padding: 10px 0;
       box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
   }

   .navbar-brand {
       font-weight: 700;
       color: var(--deep-blue);
       font-size: 1.8rem;
       letter-spacing: 1px;
   }

   .navbar-brand span {
       color: var(--sky-blue);
   }

   .nav-link {
       font-weight: 500;
       margin: 0 12px;
       color: var(--deep-blue) !important;
       transition: all 0.3s ease;
       position: relative;
   }

   .nav-link::after {
       content: '';
       position: absolute;
       width: 0;
       height: 2px;
       background: var(--sky-blue);
       bottom: 0;
       left: 0;
       transition: width 0.3s ease;
   }

   .nav-link:hover::after,
   .nav-link.active::after {
       width: 100%;
   }

   .btn-custom {
       background-color: var(--sky-blue);
       color: white;
       border: none;
       padding: 10px 25px;
       border-radius: 30px;
       font-weight: 600;
       transition: all 0.3s ease;
       box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3);
   }

   .btn-custom:hover {
       background-color: var(--deep-blue);
       color: #fff;
       transform: translateY(-3px);
       box-shadow: 0 6px 20px rgba(26, 60, 108, 0.4);
   }

   /* Banner Styles */
   .banner {
       background: linear-gradient(rgba(26, 60, 108, 0.85), rgba(74, 144, 226, 0.8)), url('images/17.jpg') center/cover no-repeat;
       height: 90vh;
       display: flex;
       align-items: center;
       color: white;
       position: relative;
       overflow: hidden;
   }

   /* .banner::before {
       content: '';
       position: absolute;
       width: 200%;
       height: 100px;
       background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M1200 120L0 16.48 0 0 1200 0 1200 120z" fill="white"/></svg>');
       background-size: cover;
       bottom: -1px;
       left: 0;
   } */

   .banner-content {
       max-width: 700px;
       position: relative;
       z-index: 2;
   }

   .banner h1 {
       font-size: 3.5rem;
       font-weight: 800;
       margin-bottom: 25px;
       text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
       line-height: 1.2;
   }

   .banner p {
       font-size: 1.25rem;
       margin-bottom: 35px;
       max-width: 600px;
   }

   /* Section Headers */
   .section-header {
       text-align: center;
       margin: 0px 0 50px;
   }

   .section-header h2 {
       font-weight: 700;
       color: var(--deep-blue);
       position: relative;
       display: inline-block;
       padding-bottom: 15px;
   }

   .section-header h2::after {
       content: '';
       position: absolute;
       width: 80px;
       height: 4px;
       background: var(--sky-blue);
       bottom: 0;
       left: 50%;
       transform: translateX(-50%);
       border-radius: 4px;
   }

   /* About Section */
   .about-section {
       padding: 80px 0;
       background-color: white;
       position: relative;
   }

   /* .about-section::before {
       content: '';
       position: absolute;
       width: 100%;
       height: 100px;
       background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M1200 120L0 16.48 0 0 1200 0 1200 120z" fill="%23f9f9f9"/></svg>');
       background-size: cover;
       top: -1px;
       left: 0;
       transform: rotate(180deg);
   } */

   .about-content {
       display: flex;
       align-items: center;
       gap: 50px;
   }

   .about-img {
       flex: 1;
       border-radius: 15px;
       overflow: hidden;
       box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
   }

   .about-img img {
       width: 100%;
       height: 700px;
       object-fit: cover;
       object-position: top;
       transition: transform 0.8s ease;
   }

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

   .about-text {
       flex: 1;
   }

   .about-text h3 {
       color: var(--deep-blue);
       margin-bottom: 25px;
       font-weight: 700;
   }

   .about-text p {
       margin-bottom: 20px;
       line-height: 1.8;
   }

   .features {
       display: flex;
       flex-wrap: wrap;
       gap: 25px;
       margin-top: 30px;
   }

   .feature-item {
       display: flex;
       align-items: center;
       gap: 15px;
       width: 45%;
   }

   .feature-icon {
       width: 55px;
       height: 55px;
       background: var(--light-blue);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       color: var(--sky-blue);
       font-size: 1.4rem;
       flex-shrink: 0;
   }

   /* Products Section */
   .products-section {
       padding: 80px 0;
       background-color: var(--soft-gray);
       position: relative;
   }

   /* 
   .products-section::before {
       content: '';
       position: absolute;
       width: 100%;
       height: 100px;
       background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M1200 120L0 16.48 0 0 1200 0 1200 120z" fill="white"/></svg>');
       background-size: cover;
       top: -1px;
       left: 0;
   } */

   .product-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
       gap: 35px;
   }

   .product-card {
       background: white;
       border-radius: 12px;
       overflow: hidden;
       box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
       transition: all 0.4s ease;
       position: relative;
   }

   .product-card:hover {
       transform: translateY(-12px);
       box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
   }

   .product-img {
       height: 320px;
       overflow: hidden;
       position: relative;
   }

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

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

   .product-overlay {
       position: absolute;
       bottom: 0;
       left: 0;
       width: 100%;
       background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
       padding: 20px;
       color: white;
   }

   .product-title {
       font-weight: 700;
       color: white;
       font-size: 1.4rem;
       margin-bottom: 5px;
   }

   .product-category {
       color: rgba(255, 255, 255, 0.9);
       font-size: 0.9rem;
   }

   /* Contact Section */
   .contact-section {
       padding: 100px 0;
       background-color: white;
       position: relative;
   }

   /* .contact-section::before {
       content: '';
       position: absolute;
       width: 100%;
       height: 100px;
       background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M1200 120L0 16.48 0 0 1200 0 1200 120z" fill="%23f0f0f0"/></svg>');
       background-size: cover;
       top: -1px;
       left: 0;
       transform: rotate(180deg);
   } */

   .contact-container {
       display: flex;
       gap: 60px;
   }

   .contact-info {
       flex: 1;
   }

   .contact-info h3 {
       color: var(--deep-blue);
       margin-bottom: 25px;
   }

   .contact-info p {
       margin-bottom: 35px;
       line-height: 1.8;
   }

   .contact-details {
       margin-bottom: 40px;
   }

   .contact-item {
       display: flex;
       /* align-items: center; */
       gap: 18px;
       margin-bottom: 20px;
   }

   .contact-icon {
       width: 50px;
       height: 50px;
       background: var(--light-blue);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       color: var(--sky-blue);
       font-size: 1.2rem;
       flex-shrink: 0;
   }

   .contact-form {
       flex: 1;
       background: var(--light-blue);
       padding: 40px;
       border-radius: 15px;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
   }

   .form-control {
       border: none;
       border-bottom: 2px solid #ddd;
       border-radius: 0;
       padding: 12px 0;
       margin-bottom: 30px;
       background: transparent;
       font-size: 1rem;
   }

   .form-control:focus {
       box-shadow: none;
       border-bottom-color: var(--sky-blue);
       background: transparent;
   }

   textarea.form-control {
       min-height: 120px;
   }

   /* Footer */
   ul {
       padding-left: 0;
   }

   .footer {
       background: linear-gradient(to right, var(--deep-blue), #152f56);
       color: white;
       padding: 80px 0 25px;
       position: relative;
   }

   /* .footer::before {
       content: '';
       position: absolute;
       width: 100%;
       height: 100px;
       background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M1200 120L0 16.48 0 0 1200 0 1200 120z" fill="white"/></svg>');
       background-size: cover;
       top: -1px;
       left: 0;
   } */

   .footer-content {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
       gap: 50px;
       margin-bottom: 50px;
       position: relative;
       z-index: 2;
   }

   .footer-logo {
       font-size: 2.2rem;
       font-weight: 700;
       margin-bottom: 25px;
   }

   .footer-logo span {
       color: var(--sky-blue);
   }

   .footer p {
       line-height: 1.8;
       opacity: 0.85;
       margin-bottom: 25px;
   }

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

   .social-icon {
       width: 45px;
       height: 45px;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.12);
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.3s ease;
   }

   .social-icon:hover {
       background: var(--sky-blue);
       transform: translateY(-5px);
   }

   .footer-title {
       font-size: 1.3rem;
       font-weight: 600;
       margin-bottom: 25px;
       position: relative;
       padding-bottom: 12px;
   }

   .footer-title::after {
       content: '';
       position: absolute;
       width: 50px;
       height: 3px;
       background: var(--sky-blue);
       bottom: 0;
       left: 0;
       border-radius: 3px;
   }

   .footer-links li {
       list-style: none;
       margin-bottom: 15px;
   }

   .footer-links a {
       color: rgba(255, 255, 255, 0.85);
       text-decoration: none;
       transition: all 0.3s ease;
       display: block;
   }

   .footer-links a:hover {
       color: var(--sky-blue);
       padding-left: 7px;
   }

   .copyright {
       text-align: center;
       padding-top: 30px;
       border-top: 1px solid rgba(255, 255, 255, 0.15);
       opacity: 0.7;
       font-size: 0.9rem;
   }

   /* Responsive */
   @media (max-width: 992px) {
       .about-content {
           flex-direction: column;
       }

       .contact-container {
           flex-direction: column;
       }

       .banner h1 {
           font-size: 2.8rem;
       }
   }

   @media (max-width: 768px) {
       .navbar {
           padding: 10px 0;
       }

       .banner {
           height: 95vh;
       }

       .banner h1 {
           font-size: 2rem;
       }

       .banner p {
           font-size: 1rem;
       }

       .feature-item {
           width: 100%;
       }

       .product-grid {
           grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
       }
   }