:root {
    --container-max: 1400px;
    --pad-x: clamp(15px, 3.2vw, 30px);
    --section-space: 60px;
    --card-gap: 30px;
    --inner-gap: 40px;
}

@media screen and (max-width: 1024px) {
    :root { --section-space: 45px; --card-gap: 24px; --inner-gap: 28px; }
}

@media screen and (max-width: 767px) {
    :root { --section-space: 40px; --card-gap: 16px; --inner-gap: 18px; }
}




.ab-about-us {
    background-image: url("../photos/about-background.webp");
    position: relative;
    width: 100%;
    height: clamp(180px, 22vw, 320px);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ab-banner-overlay {
    position: absolute;
    inset: 0;
    background: rgba(2, 21, 43, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 var(--pad-x);
}
.ab-banner-overlay h1 {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(24px, 4vw + 8px, 56px);
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    text-align: center;
    letter-spacing: -1px;
    padding: 0 20px;
    line-height: 1.15;
}
.ab-travel {
    width: 100%;
    padding: var(--section-space) var(--pad-x);
    background: #fff;
    background-image: url("world.png");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: clamp(120px, 18vw, 320px);
}

.ab-container {
    display: flex;
    max-width: var(--container-max);
    margin: 0 auto;
    gap: var(--inner-gap);
    align-items: center;
}

.ab-left {
    flex: 1 1 420px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ab-sub-title {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(14px, 0.5vw + 11px, 17px);
    color: #082A4D;
    font-weight: 700;
    margin: 0;
    padding: 0;
}

.ab-left h1 {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(24px, 1.6vw + 16px, 36px);
    margin: 0;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.15;
}

.ab-left p {
    margin: 0;
    margin-top: 10px;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.6;
}

.ab-right {
    /* flex: 1 1 320px; */
    min-width: 0;
    display: flex;
    justify-content: center;
}

.ab-right-inner {
    width: 100%;
    max-width: 600px;
}

.ab-right-inner img {
    width: 100%;
    max-width: 100%;
    /* height: auto; */
    aspect-ratio: 4 / 2.7;
    object-fit: cover;
}

.ab-big {
    width: 100%;
    border-radius: 20px;
}

.ab-stats {
    background-color: #0B2A4A;
    padding: var(--section-space) var(--pad-x);
}

.ab-stats-container {
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--inner-gap);
}

.ab-stat {
    flex: 1 1 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    padding: 0 clamp(10px, 2vw, 30px);
    min-width: 0;
}

.ab-stat:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 10px;
    bottom: 10px;
    width: 1px;
    background: rgba(255, 255, 255, 0.2);
}

.ab-stat-icon {
    width: clamp(56px, 5vw, 70px);
    height: clamp(56px, 5vw, 70px);
    border-radius: 18px;
    background: #FEB53C;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #fff;
    margin-bottom: clamp(14px, 2vw, 20px);
}

.ab-stat-icon img {
    width: 40px;
    height: 40px;
    filter: brightness(0) invert(1);
}

.ab-stat-number {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(26px, 2vw + 16px, 36px);
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 10px 0;
}

.ab-stat p {
    margin: 0;
    font-size: 18px;
    color: #cfd8e3;
    padding: 0;
    max-width: none;
    background: none;
    cursor: default;
}




.ab-ourpurpose {
    background-color: #f7f6f2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: var(--section-space) var(--pad-x);
}

.ab-ourpurpose h1 {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    color: #09274f;
    margin: 0;
    width: 100%;
    max-width: 900px;
    padding: 0 20px;
    box-sizing: border-box;
    text-align: center;
}

.ab-vm-container {
    max-width: var(--container-max);
    width: 100%;
    margin: 0 auto;
    display: flex;
    gap: var(--card-gap);
    flex-wrap: wrap;
    justify-content: center;
}

.ab-vm-card {
    flex: 1 1 340px;
    max-width: 600px;
    position: relative;
    background: #ffffff;
    border-radius: 20px;
    padding: clamp(26px, 3vw, 45px) clamp(24px, 3vw, 45px) clamp(30px, 3.4vw, 50px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
}

.ab-vm-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06);
}

.ab-vm-card.ab-visible {
    opacity: 1;
    transform: translateY(0);
    text-align: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.ab-vm-card-deco {
    position: absolute;
    top: -70px;
    right: -100px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    opacity: 0.04;
    background: #F2994A;
}

.ab-vm-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    /* margin-bottom: 26px; */
    position: relative;
    z-index: 1;
}

.ab-vm-icon i { font-size: 25px; color: #fff; }
.ab-vm-icon.ab-orange-bg { background: #FEB53C; }

.ab-vm-label {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 20px;
    font-weight: 700;
    /* letter-spacing: 0.12em; */
    /* margin-bottom: 12px; */
        margin: 15px 0 10px;
}

.ab-vm-label.ab-orange-text { color: #EB7B36; }
.ab-vm-label.ab-navy-text { color: #1a1a1a; }

.ab-vm-card h3 {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 26px;
    font-weight: 600;
    color: #082A4D;
    margin: 0 0 18px 0;
    line-height: 1.3;
    position: relative;
    z-index: 1;
}

.ab-vm-card p {
    font-size: 18px;
    line-height: 1.7;
    color: #4a4a4a;
    margin: 0;
    padding: 0;
    max-width: none;
    background: none;
    cursor: default;
    position: relative;
    z-index: 1;
}




.ab-with-us {
    padding: var(--section-space) var(--pad-x);
}

.ab-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: var(--card-gap);
    max-width: var(--container-max);
    margin: var(--inner-gap) auto 0;
    width: 100%;
}

.ab-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: clamp(16px, 2vw, 20px) clamp(12px, 1.5vw, 15px);
    background: #ffffffb1;
    border-top: 4px solid #EAA400;
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.10),
                0 12px 24px rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    min-width: 0;
}

.ab-iconn { margin-top: clamp(12px, 1.6vw, 20px); }

.ab-iconn i {
    font-size: clamp(30px, 2vw + 20px, 40px);
    color: #8F4E00;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ab-c-h { min-height: auto; }

.ab-c-h h3 {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 15px 0 10px;
}

.ab-c-p {
    text-align: center;
    margin-bottom: 20px;
    font-size: 18px;
    line-height: 1.5;
}

.ab-w-h h1 {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(24px, 2.4vw + 14px, 44px);
    font-weight: 800;
    margin-bottom: 15px;
    text-align: center;
    color: #1A1C1C;
    line-height: 1.3;
    letter-spacing: -1px;
    padding: 0 var(--pad-x);
}


.ab-cta {
    text-align: center;
    background: #ff6600;
    color: white;
    padding: var(--section-space) var(--pad-x);
}

.ab-cta h2 {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(24px, 2vw + 18px, 42px);
    margin-bottom: 20px;
    margin-top: 10px;
    line-height: 1.25;
}

.ab-cta p {
    max-width: 700px;
    margin: auto;
    margin-bottom: 35px;
    font-size: 18px;
    line-height: 1.6;
}

.ab-btn {
    display: inline-block;
    padding: clamp(12px, 1.2vw, 15px) clamp(24px, 2.6vw, 35px);
    background: white;
    color: #ff6600;
    text-decoration: none;
    font-weight: 600;
    border-radius: 50px;
    transition: .3s;
    margin-bottom: 15px;
    font-size: 18px;
}

.ab-btn:hover {
    background: #0f172a;
    color: white;
}


@media screen and (max-width: 1024px) {
    .ab-container {
        flex-direction: column;
    }

    .ab-left,.ab-right-inner {
        max-width: 900px;
        width: 100%;
        /* text-align: center; */
        /* align-items: center; */
    }

    /* .ab-right-inner {
        max-width: 700px;
        margin: 0 auto;
    } */

    .ab-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 991px) {
    .ab-vm-card {
        flex: 1 1 100%;
        max-width: 600px;
    }
}

@media screen and (max-width: 767px) {
     .ab-left,.ab-right-inner {
        max-width: 700px;
        width: 100%;
        /* text-align: center;
        align-items: center; */
    }

    .ab-stats-container {
        flex-direction: row;
        gap: var(--inner-gap);
        align-items: flex-start;
    }

    .ab-stat:not(:last-child)::after {
        display: none;
    }

    .ab-cards {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 480px) {
     .ab-left,.ab-right-inner {
        max-width: 400px;
        width: 100%;
        /* text-align: center;
        align-items: center; */
    }
}

@media screen and (max-width: 320px) {
    .ab-container {
        gap: 20px;
    }

   .ab-left,.ab-right-inner {
        max-width: 400px;
        width: 100%;
        /* text-align: center;
        align-items: center; */
    }

    .ab-left h1 {
        font-size: 23px;
    }
}