:root {
   --bg: #f7faf7;
   --card: #ffffff;
   --accent: #4b8c3b;
   --muted: #697077;
   --glass: rgba(255, 255, 255, 0.6);
   --maxw: 1320px;
 }


 body {
   font-family: 'poppins', sans-serif !important;

 }

 .container {
   max-width: var(--maxw);
   /* margin: 40px auto; */
   padding: 0px;
 }

 .custom-blends-hero {
   display: flex;
   flex-direction: row;
   padding: 60px 0;
 }

 .cb-container {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 40px;
   max-width: 1300px;
   margin: auto;
 }

 .cb-left {
   flex: 1;
 }

 .cb-left .kicker {
   font-size: 16px;
   color: #4b8c3b;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 1px;
 }

 .cb-left h1 {
   font-size: 32px;
   font-weight: 700;
   margin: 10px 0 15px;
   color: #333;
 }

 .cb-left .lead {
   font-size: 17px;
   line-height: 1.6;
   color: #444;
 }

 /* RIGHT IMAGE */
 .cb-right {
   flex: 1;
   text-align: right;
 }

 .cb-right img {
   width: 100%;
   max-width: 500px;
   border-radius: 10px;
 }

 /* RESPONSIVE */
 @media (max-width: 768px) {
   .cb-container {
     flex-direction: column;
     text-align: center;
   }

   .cb-right {
     text-align: center;
   }

   .cb-right img {
     max-width: 80%;
   }
 }

 /* Hero */
 /* .hero {
      display: grid;
      grid-template-columns: 1fr 420px;
      gap: 30px;
      align-items: center
    } */

 .hero-card {
   background: transparent;
   border-radius: 14px;
   padding: 34px;
   /* box-shadow: 0 6px 30px rgba(18, 36, 24, 0.06); */
 }

 .kicker {
   display: inline-block;
   background: linear-gradient(90deg, rgba(75, 140, 59, 0.12), rgba(242, 168, 59, 0.08));
   color: var(--accent);
   padding: 6px 12px;
   border-radius: 999px;
   font-weight: 600;
   font-size: 13px
 }

 h1 {
   font-family: 'Playfair Display', serif;
   font-size: 34px;
   margin: 14px 0 6px
 }

 .lead {
   color: var(--muted);
   font-size: 15px;
   line-height: 1.6
 }

 /* Right card */
 .right-card {
   background: linear-gradient(180deg, rgba(75, 140, 59, 0.06), rgba(242, 168, 59, 0.03));
   padding: 26px;
   border-radius: 14px
 }

 .spec {
   display: flex;
   gap: 12px;
   align-items: center
 }

 .spec .dot {
   width: 48px;
   height: 48px;
   border-radius: 8px;
   background: rgba(75, 140, 59, 0.12);
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 700;
   color: var(--accent)
 }

 .ctas {
   margin-top: 18px;
   display: flex;
   gap: 12px
 }

 .btn {
   background: var(--accent);
   color: white;
   padding: 12px 16px;
   border-radius: 10px;
   border: 0;
   cursor: pointer;
   font-weight: 600
 }

 .btn.ghost {
   background: transparent;
   color: var(--accent);
   border: 1px solid rgba(75, 140, 59, 0.14)
 }

 /* Content sections */
 section.card {
   margin-top: 28px;
   background: var(--card);
   padding: 28px;
   border-radius: 12px;
   box-shadow: 0 6px 20px rgba(20, 35, 20, 0.04)
 }

 .grid-2 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 18px
 }

 .section-head {
   display: flex;
   align-items: end;
   gap: 16px
 }

 .section-head h3 {
   font-family: 'Playfair Display', serif;
   margin: 0;
   font-size: 20px;
   color: var(--accent)
 }

 p {
   color: var(--muted);
   line-height: 1.7
 }

 /* Steps */
 .steps {
   display: flex;
   gap: 12px;
   flex-direction: column;
   margin-top: 10px
 }

 .step {
   display: flex;
   gap: 12px;
   align-items: flex-start
 }

 .step .num {
   width: 40px;
   height: 40px;
   border-radius: 10px;
   background: linear-gradient(180deg, #fff, #f6fbf6);
   border: 1px solid rgba(75, 140, 59, 0.08);
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 700;
   color: var(--accent)
 }

 .step p {
   margin: 0
 }

 /* CTA bar */
 .cta-bar {
   display: flex;
   gap: 18px;
   align-items: center;
   justify-content: space-between;
   padding: 18px;
   margin-top: 20px;
   border-radius: 12px;
   background: linear-gradient(90deg, rgba(75, 140, 59, 0.06), rgba(242, 168, 59, 0.03))
 }

 /* Footer note */
 .small {
   font-size: 13px;
   color: #475059
 }

 /* Modal form */
 .modal {
   position: fixed;
   inset: 0;
   display: none;
   align-items: center;
   justify-content: center;
   background: rgba(8, 15, 10, 0.4);
   padding: 20px
 }

 .modal.open {
   display: flex
 }

 .modal-card {
   background: var(--card);
   width: 100%;
   max-width: 680px;
   border-radius: 12px;
   padding: 22px
 }

 .form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px
 }

 input,
 textarea,
 select {
   padding: 10px;
   border-radius: 8px;
   border: 1px solid #e6eee6;
   font-size: 14px
 }

 textarea {
   min-height: 120px;
   resize: vertical
 }

 .form-actions {
   display: flex;
   gap: 10px;
   justify-content: flex-end;
   margin-top: 12px
 }

 /* Responsive */
 @media(max-width:980px) {
   .hero {
     grid-template-columns: 1fr;
   }

   .right-card {
     order: 2
   }

   .grid-2 {
     grid-template-columns: 1fr
   }
 }



 /* Achievements & Milestones Styles */
 .achievements-section {
   background: linear-gradient(135deg, #e0f7fa, #ffffff);
   padding: 40px 80px;
   font-family: 'Arial', sans-serif;
 }

 .achievements-header {
   text-align: center;
   padding: 20px;
   margin-bottom: 60px;
 }

 .achievements-header h2 {
   font-size: 2.8rem;
   color: #4b8c3b;
   margin-bottom: 15px;
 }

 .achievements-header p {
   font-size: 1.2rem;
   color: #444;
   max-width: 700px;
   margin: auto;
   line-height: 1.6;
 }

 /* Grid */
 .achievements-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 40px;
   justify-items: center;
 }

 /* Achievement Card */
 .achievement-card {
   background: #7bb203;
   border-radius: 20px;
   padding: 30px;
   text-align: center;
   box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .achievement-card:hover {
   transform: translateY(-10px);
   box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
 }

 .achievement-card span.material-icons {
   font-size: 50px;
   color: #ffffff;
   margin-bottom: 15px;
   display: inline-block;
 }

 .achievement-card h4 {
   font-size: 1.4rem;
   color: #ffffff;
   margin-bottom: 10px;
 }

 .achievement-card p {
   font-size: 1rem;
   color: #ffffff;
   line-height: 1.5;
 }

 /* Responsive */
 @media (max-width: 768px) {
   .achievements-grid {
     grid-template-columns: 1fr;
     gap: 30px;
   }
 }

 @media (max-width: 1200px) {

   .innovation-section,
   .team-section,
   .achievements-section {
     padding: 20px 60px;
   }
 }

 @media (max-width: 992px) {

   .innovation-section,
   .team-section,
   .achievements-section {
     padding: 20px 40px;
   }
 }

 @media (max-width: 768px) {

   .innovation-section,
   .team-section,
   .achievements-section {
     padding: 20px 20px;
   }
 }

 /* Innovation Section */
 @media (max-width: 1000px) {
   .innovation-container {
     flex-direction: column-reverse;
     align-items: center;
     gap: 40px;
   }

   .innovation-left,
   .innovation-right {
     flex: 1 1 100%;
     text-align: center;
   }

   .card {
     flex-direction: column;
     align-items: center;
     gap: 10px;
   }

   .card-text h4,
   .card-text p {
     text-align: center;
   }
 }

 /* Team Section */
 @media (max-width: 768px) {
   .team-card img {
     height: 250px;
   }
 }

 /* Achievements Section */
 @media (max-width: 768px) {
   .achievements-grid {
     grid-template-columns: 1fr;
     gap: 30px;
   }
 }

 /* General images in grid (like .containers .images) */
 @media (max-width: 768px) {
   .containers {
     grid-template-columns: 1fr;
   }

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

 @media (max-width: 500px) {
   .images {
     grid-template-columns: 1fr;
   }
 }

 /* Image Icon Styling */
 .achievement-card .achievement-icon {
   width: 90px;
   /* Adjust size as needed */
   height: 90px;
   border-radius: 50%;
   /* Makes circular appearance */
   object-fit: cover;
   /* Ensures proper image scaling */
   background: #ffffff;
   /* White circle behind image */
   padding: 1px;
   margin-bottom: 20px;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .achievement-card:hover .achievement-icon {
   transform: scale(1.1);
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
 }

 .full-banner {
   width: 100%;
   height: 400px;

   background: url('../img/Aboutsbanner.jpg') center/cover no-repeat;
 }

 /* Responsive for smaller devices */
 @media (max-width: 768px) {
   .full-banner {
     height: 300px;
   }
 }

 @media (max-width: 480px) {
   .full-banner {
     height: 200px;
   }
 }

 .social-proof {
   background: #f9fdf9;
   padding: 80px 20px;
   text-align: center;
 }

 .section-title {
   font-size: 2rem;
   font-weight: 700;
   color: #7bb203;
 }

 .section-subtitle {
   color: #444;
   margin-bottom: 40px;
 }

 .testimonial-card {
   background: #fff;
   border-radius: 16px;
   padding: 30px;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
   max-width: 400px;
   margin: auto;
   text-align: center;
 }

 .testimonial-profile img {
   width: 70px;
   height: 70px;
   border-radius: 50%;
   object-fit: cover;
   margin-bottom: 12px;
 }

 .testimonial-profile h4 {
   font-size: 1.1rem;
   margin: 0;
   color: #4b8c3b;
 }

 .testimonial-profile span {
   font-size: 0.9rem;
   color: #777;
 }

 .testimonial-text {
   margin: 18px 0;
   font-size: 1rem;
   line-height: 1.5;
   color: #444;
 }

 .stars {
   font-size: 1.2rem;
   color: #f5b400;
 }

 /* Responsive */
 @media (max-width: 768px) {
   .testimonial-card {
     padding: 20px;
   }
 }