/*start Concentric Circles*/
.container-cir-mobile {
    display: none;
    /* Hide by default */
}

.container-cir {
    position: absolute;
    top: 0;
    right: -110%;
    /* Start off-screen to the left */
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 1s ease-out, opacity 1s ease-out;
    opacity: 0;
}

.circle {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(101.2deg, #066BFC 4.66%, #29B0FE 64.8%, #45E8FF 111.81%);
    opacity: 0.1;
}

.circle.large {
    width: 701px;
    height: 701px;
    top: 0;
    left: 0;
}

.circle.medium {
    width: 655.9px;
    height: 655.9px;
    top: 22.55px;
    left: 22.55px;
}

.circle.small {
    width: 610px;
    height: 610px;
    top: 45.95px;
    left: 45.95px;
}

.circle.extra-small {
    width: 564.1px;
    height: 564.1px;
    top: 68.95px;
    left: 68.95px;
    opacity: 1;
}

.circle img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    opacity: 1 !important;
    object-fit: cover;
}

.container-cir.scroll-animation {
    transform: translateX(-50%);
    /* Move circles into view */
    opacity: 1;
}

/*end Concentric Circles*/
/*start LeaderShip Sec*/
.life-at-ag-sec {
    overflow: clip;
    position: relative;
    overflow: hidden;
    padding-bottom: 151.5px;
    padding-top: 151.5px;
}

.life-at-ag-text {
    padding-left: 0;
    padding-right: 0;
    color: #394049;
    font-family: Noto Sans;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
}

.life-at-ag-content {
    justify-content: space-between;
    padding-left: 15px;
}

.margin-for-life-at-ag {
    margin-bottom: 60px !important;
}

.title-leadership {
    gap: 8px;
    margin-bottom: 64px;
}

.leadership-title-sub {
    color: #21272D;
    font-family: Noto Sans;
    font-size: 48.83px !important;
    font-weight: 700;
    line-height: 61.04px !important;
    text-align: left;
    margin: 0px;
    padding: 0px;
}

/*end LeaderShip Sec*/

/* Breakpoints for tablets (max-width: 1024px) */
@media (max-width: 1024px) {
    /*start Concentric Circles*/

    .container-cir.scroll-animation {
        transform: translateX(-56%) !important;
    }

    .container-cir {
        top: 13% !important;
    }

    /* Largest Circle */
    .circle.large {
        width: 450px;
        /* Updated width */
        height: 452px;
        /* Updated height */
        top: 0;
        left: 0;
    }

    /* Second Largest Circle */
    .circle.medium {
        width: 421.05px;
        /* Updated width */
        height: 421.05px;
        /* Updated height */
        top: 14.475px;
        /* Recalculated to maintain even spacing */
        left: 14.475px;
    }

    /* Third Circle */
    .circle.small {
        width: 392.09px;
        /* Updated width */
        height: 392.09px;
        /* Updated height */
        top: 28.455px;
        /* Recalculated to maintain even spacing */
        left: 28.455px;
    }

    /* Smallest Circle */
    .circle.extra-small {
        width: 362.7px;
        /* Updated width */
        height: 363.34px;
        /* Updated height */
        top: 42.645px;
        /* Recalculated to maintain even spacing */
        left: 42.645px;
    }

    /*end Concentric Circles*/

    /*start LeaderShip Sec*/

    .leadership-title-sub {
        font-size: 39.06px !important;
        line-height: 48.8px !important;
    }

    .margin-for-life-at-ag {
        margin-bottom: 32px !important;
    }

    .life-at-ag-content {
        flex-direction: column !important;
        padding-left: 15px;
        gap: 40px;
    }

    /*end LeaderShip Sec*/
}

/* Breakpoints for mobile phones (max-width: 576px) */
@media (max-width: 576px) {
    .life-at-ag-content {
        gap: 32px !important;
    }

    .circle.large {
        width: 100% !important;
        height: 100% !important;
        top: 0;
        left: 0;
    }

    .circle.medium {
        width: 93.57% !important;
        /* (355.55 / 380) * 100 */
        height: 93.57% !important;
        top: 3.21% !important;
        /* (12.22 / 380) * 100 */
        left: 3.21% !important;
    }

    .circle.small {
        width: 87.13% !important;
        /* (331.1 / 380) * 100 */
        height: 87.13% !important;
        top: 6.39% !important;
        /* (24.3 / 380) * 100 */
        left: 6.39% !important;
    }

    .circle.extra-small {
        width: 80.07% !important;
        /* (306.28 / 380) * 100 */
        height: 80.07% !important;
        top: 9.54% !important;
        /* (36.25 / 380) * 100 */
        left: 9.54% !important;
        opacity: 1;
    }

    /*start Concentric Circles*/
    .life-at-ag-sec {
        flex-direction: column;
        overflow: hidden;
        padding-top: 0 !important;
        padding-bottom: 0px !important;
        margin-left: 0px !important;
    }

    .container-cir {
        display: none;
    }

    .container-cir-mobile {
        position: relative;
        top: 0;
        width: 100vw;
        height: 100vw;
        display: flex !important;
        justify-content: center;
        align-items: center;
        margin-bottom: 60px;
    }

    /*start LeaderShip Sec*/

    .title-leadership {
        margin-bottom: 48px !important;
        margin-top: 60px;
    }

    .leadership-title-sub {
        text-align: center;
        font-size: 31.25px !important;
        line-height: 39px !important;
        margin: 0 16px;
    }

    .margin-for-life-at-ag {
        margin-bottom: 24px !important;
        text-align: center !important;
    }

    .life-at-ag-text {
        font-size: 14px !important;
        line-height: 21px !important;
        text-align: center !important;
    }
}

/* Media style */
@media (min-width: 320px) and (max-width: 743px) {
    .leadership-title-sub {
        text-align: center;
        font-size: 31.25px !important;
        line-height: 39px !important;
    }

    .lag-padding-mobile {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

@media (min-width: 744px) and (max-width: 921px) {
    .lag-padding-mobile {
        margin: 0;
    }

    .life-at-ag-sec {
        padding-bottom: 80px !important;
        padding-top: 0;
        margin-left: 60px;
    }
}

@media (min-width: 992px) and (max-width: 1024px) {
    .life-at-ag-sec {
        padding-bottom: 80px !important;
        padding-top: 0;
        margin-left: 60px;
    }
}

@media only screen and (min-width: 744px) and (max-width: 768px) {
    .lag-padding-mobile {
        max-width: none;
    }
}