body {
     font-family: 'Inter', sans-serif;
 }

 .about-hero-section {
     background: linear-gradient(135deg, #0066FF1A, #7C3AED1A);
     padding: 90px 0;
     height: 750px;
 }

 .about-hero-section .about-badge {
     background: rgba(0, 102, 255, 0.1);
     color: #0066FF;
     padding: 11px 18px;
     border-radius: 20px;
     border: 1px solid rgba(0, 102, 255, 0.2);
     font-size: 14px;
 }

 .about-hero-section .about-hero-heading {
     font-family: 'Manrope';
     font-size: 54px;
     font-weight: 700;
     margin: 20px 0;
     margin-top: 30px;
     line-height: 60px;
     color: rgba(16, 24, 40, 1);
 }

 .about-hero-section .about-hero-text {
     color: rgba(74, 85, 101, 1);
     font-size: 20px;
     max-width: 577px;
 }

 .about-hero-section .about-hero-actions a {
     text-decoration: none;
     border-radius: 8px;
     padding: 8px 15px;
     margin-right: 14px;
 }

 .about-hero-section .about-hero-actions .work {
     background: rgba(0, 102, 255, 1);
     color: rgba(255, 255, 255, 1);
     font-weight: 600;
 }

 .about-hero-section .about-hero-actions .join {
     background: rgba(255, 255, 255, 1);
     border: 1px solid rgba(0, 102, 255, 1);
     color: rgba(0, 102, 255, 1);
     transition: transform 0.5s ease;
     font-weight: 600;
 }

 /* .about-hero-section .join:hover {
     background: rgba(0, 102, 255, 1);
     border: none;
     color: rgba(255, 255, 255, 1);
 } */

 .about-hero-section .about-hero-image img {
     width: 560px;
     height: 400px;
     border-radius: 16px;
     position: relative;
     top: 20px;
 }

 /* WHAT WE DO */
 .about-section {
     padding: 80px 0;
 }

 /* IMAGE */
 .about-image {
     height: 100%;
 }

 .about-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 14px;
 }


 /* HEADINGS */
 .about-content {
     height: 100%;
 }

 .about-content h2 {
     font-family: 'Manrope';
     font-size: 36px;
     font-weight: 700;
     margin-bottom: 16px;
 }

 .about-content p {
     color: rgba(74, 85, 101, 1);
     font-size: 15px;
     line-height: 28px;
     margin-bottom: 28px;
 }

 /* SERVICE BOXES */
 .service-box {
     background: #ffffff;
     border-radius: 12px;
     padding: 14px 18px;
     box-shadow: 0 0 8.2px 0px rgba(112, 112, 112, 0.25);
     display: flex;
     align-items: center;
     font-weight: 500;
     font-size: 16px;
     transition: 0.3s;
 }

 .service-box:hover {
     background: linear-gradient(to right, rgba(237, 227, 255, 1), rgba(170, 240, 253, 1));
 }

 .service-box img {
     width: 38px;
     height: 38px;
 }

 /* APPROACH */
 .approach-title {
     font-family: 'Manrope';
     font-size: 29px;
     font-weight: 700;
     margin-top: 40px;
     margin-bottom: 10px;
 }

 .approach-text {
     color: rgba(74, 85, 101, 1);
     font-size: 18px;
 }

 /* BUTTONS */
 .about-section .button-wrapper {
     width: 100%;
     display: flex;
     justify-content: center;
     margin-top: 60px;
 }

 .about-buttons {
     display: flex;
     gap: 16px
 }

 .about-buttons a {
     text-decoration: none;
     padding: 6px 28px;
     border-radius: 8px;
     font-weight: 600;
 }

 .about-buttons .meet {
     background: rgba(0, 102, 255, 1);
     color: rgba(255, 255, 255, 1);
 }

 .about-buttons .learn {
     background: rgba(255, 255, 255, 1);
     border: 1px solid rgba(0, 102, 255, 1);
     color: rgba(0, 102, 255, 1);
     transition: transform 0.5s ease;
 }



 /* .what-we-do-section .what-buttons-wrapper .what-buttons .learn:hover {
    background: rgba(0, 102, 255, 1);
     border: none;
     color: rgba(255, 255, 255, 1);
  } */

 /* RESPONSIVE */
 @media (max-width: 991px) {
     .about-section {
         padding: 60px 0;
     }

     .about-content h2 {
         font-size: 30px;
     }
 }

 @media (max-width: 767px) {
     .about-section {
         padding: 40px 0;
     }

     .about-content h2 {
         font-size: 26px;
     }

     .about-buttons {
         flex-direction: column;
     }

     .about-buttons .btn {
         width: 100%;
     }
 }



 /* ===== Meet Our Leadership ===== */
 .o2b-leaders {
     background: #ffffff;
     padding: 56px 0 64px;
     font-family: "Manrope", sans-serif;
 }

 .o2b-leaders-head {
     margin-bottom: 26px;
 }

 .o2b-leaders-title {
     font-size: 36px;
     font-weight: 700;
     color: #101828;
     margin: 0 0 6px 0;
 }

 .o2b-leaders-subtitle {
     font-size: 20px;
     line-height: 28px;
     color: rgba(74, 85, 101, 1);
     margin: 0;
 }

 /* Card */
 .o2b-leader-card {
     background: #ffffff;
     border-radius: 14px;
     overflow: hidden;
     height: 100%;
     box-shadow: 0 6px 18px rgba(2, 6, 23, 0.04);
     border: 1px solid rgba(229, 231, 235, 1);
 }

 /* .o2b-leader-card--active {
     background: #CBEFFF;
     border-color: rgba(0, 0, 0, 0);
 } */

 /* Image */

 .o2b-leader-img img {
     width: 100%;
     height: 300px;
     object-fit: cover;
     border-radius: 12px;
     border-bottom-left-radius: 0px !important;
     border-bottom-right-radius: 0px !important;
     display: block;
 }

 /* Body */
 .o2b-leader-body {
     padding: 14px 16px 16px;
 }

 .o2b-leader-card:hover {
     background: linear-gradient(to bottom, rgba(237, 227, 255, 1), rgba(170, 240, 253, 1));
 }

 .o2b-leader-name {
     font-size: 20px;
     line-height: 28px;
     font-weight: 700;
     color: #101828;
     margin: 0 0 4px 0;
 }

 .o2b-leader-role-title {
     font-size: 16px;
     font-weight: 600;
     line-height: 24px;
     color: rgba(0, 102, 255, 1);
 }

 .o2b-leader-text {
     font-size: 14px;
     line-height: 20px;
     color: rgba(74, 85, 101, 1);
     margin: 10px 0 0 0;
     max-width: 220px;
 }

 /* On active card, keep text readable */
 .o2b-leader-card--active .o2b-leader-text {
     color: rgba(16, 24, 40, 0.7);
 }

 /* Responsive */
 @media (max-width: 991.98px) {
     .o2b-leader-img img {
         height: 170px;
     }
 }

 @media (max-width: 575.98px) {
     .o2b-leaders-title {
         font-size: 26px;
     }

     .o2b-leader-img img {
         height: 180px;
     }
 }



 .mission-vision-section {
     padding: 80px 0;
 }

 .mission-vision-section .info-card {
     background: linear-gradient(rgba(6, 182, 212, 0.1), rgba(14, 165, 233, 0.1));
     border: 1px solid rgba(6, 182, 212, 0.2);
     padding: 41px;
     border-radius: 16px;
     transition: 0.3s;
 }

 .mission-vision-section .info-card:hover {
     border: 1px solid rgba(0, 102, 255, 0.2);
     background: linear-gradient(rgba(0, 102, 255, 0.1), rgba(79, 70, 229, 0.1));
 }

 .mission-vision-section .topinfo {
     display: flex;
 }

 .mission-vision-section .info1 {
     display: flex;
 }

 .mission-vision-section .info-card {
     flex: 1;
 }


 .mission-vision-section .card-title {
     font-family: 'Manrope';
     font-size: 30px;
     line-height: 36px;
     font-weight: 700;
 }

 .mission-vision-section .card-text {
     color: rgba(54, 65, 83, 1);
     font-size: 18px;
     line-height: 29.5px;
 }

 .cta-section {
     background: linear-gradient(to bottom, rgba(0, 102, 255, 1), rgba(124, 58, 237, 1));
     padding: 80px 0;
     color: #fff;
 }

 .cta-heading {
     font-family: 'Manrope';
     font-size: 36px;
     line-height: 40px;
 }

 .cta-text {
     color: rgba(255, 255, 255, 0.9);
     font-size: 20px;
     line-height: 28px;
     margin: 24px 0;
 }

 .cta-section .cta-actions {
     margin-top: 30px;
 }

 .cta-section .cta-actions a {
     text-decoration: none;
     border-radius: 8px;
     padding: 10px 23px;
     margin-right: 14px;
 }

 .cta-section .cta-actions .last1 {
     background: rgba(0, 102, 255, 1);
     color: rgba(255, 255, 255, 1);
     font-weight: 600;
 }

 .cta-section .cta-actions .last2 {
     background: rgba(255, 255, 255, 1);
     border: none;
     color: rgba(0, 102, 255, 1);
     font-weight: 600;
 }

 .cta-section .cta-actions .big {
     padding: 10px 40px;
 }

 @media (max-width: 575.98px) {

     /* ---------- HERO ---------- */
     .about-hero-section {
         height: auto;
         padding: 60px 0;
         text-align: center;
     }

     .about-hero-section .about-hero-heading {
         font-size: 34px;
         line-height: 42px;
     }

     .about-hero-section .about-hero-text {
         font-size: 16px;
         max-width: 100%;
     }

     .about-hero-section .about-hero-actions {
         display: flex;
         justify-content: center;
         flex-wrap: wrap;
         gap: 12px;
     }

     .about-hero-section .about-hero-image img {
         width: 100%;
         height: auto;
         top: 0;
         margin-top: 30px;
     }

     /* ---------- LEADERS ---------- */
     .o2b-leaders-title {
         font-size: 28px;
     }

     .o2b-leader-text {
         max-width: 100%;
     }

     /* ---------- MISSION / VISION ---------- */
     .mission-vision-section {
         padding: 60px 0;
     }

     .mission-vision-section .topinfo {
         flex-direction: column;
         gap: 20px;
     }

     /* ---------- CTA ---------- */
     .cta-heading {
         font-size: 28px;
         line-height: 34px;
     }

     .cta-section .cta-actions {
         display: flex;
         flex-direction: column;
         gap: 14px;
     }

     .cta-section .cta-actions a {
         margin-right: 0;
         width: 100%;
     }
 }


 @media (max-width: 991.98px) {

     /* HERO */
     .about-hero-section {
         height: auto;
         padding: 70px 0;
     }

     .about-hero-section .about-hero-heading {
         font-size: 42px;
         line-height: 50px;
     }

     .about-hero-section .about-hero-image img {
         width: 100%;
         height: auto;
         top: 0;
         margin-top: 40px;
     }

     /* LEADERS */
     .o2b-leader-img img {
         height: 220px;
     }

     /* CTA */
     .cta-heading {
         font-size: 32px;
     }
 }

 .cta-section .cta-actions .last2 {
    background: #ffffff;
    border: none;
    color: #0066ff;
    font-weight: 600;
    padding: 14px 28px;
    border-radius: 40px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

/* Icon size */
.cta-section .cta-actions .last2 i {
    font-size: 16px;
}

/* Hover effect */
.cta-section .cta-actions .last2:hover {
    background: #0066ff;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,102,255,0.25);
}