/* ==================================================
   YAGI RESPONSIVE STYLES
================================================== */





/* --------------------------------
   Tablet
-------------------------------- */

@media(max-width:991px){


    /*
    Hero
    */

    .hero-feat-title {

        font-size:48px;

    }


    .hero-description {

        font-size:18px;

    }


    .hero-big-title {

        font-size:90px;

    }

    .border-start {

        border-left:0 !important;

        border-top:1px solid rgba(0,0,0,.1);

    }

    /*
    Padding correction
    */

    .page-section {

        padding-left:24px !important;
        padding-right:24px !important;

    }



    /*
    Hero right content
    */

    .hero-description {

        max-width:100%;

    }



    /*
    Program cards
    */

    .white-blur-transparent {

        min-width:unset !important;

        padding:40px !important;

    }


}



/* --------------------------------
   Mobile
-------------------------------- */

@media(max-width:767px){


    /*
    GLOBAL
    */


    .page-section {

        padding-top:60px !important;
        padding-bottom:60px !important;

    }


    p,
    li {

        font-size:16px;
        line-height:1.7;

    }



    /*
    HERO
    */


    .comprehensive-section {

        min-height:100vh;

        background-position:center;

        background-size:cover;

    }

    .h-100 {

        height:auto !important;

    }

    .hero-feat-title {

        font-size:36px;

        line-height:1.15;

        text-align:center;

    }
        .hero-mobile-bg::before {

        content:"";

        position:absolute;

        inset:0;

        background: rgba(255,255,255,.75);

        z-index:0;

    }


    .hero-mobile-bg > * {

        position:relative;

        z-index:1;

    }


    .hero-description {

        font-size:16px;

        text-align:center !important;

    }

    .hero-big-quote {display: none;}

    .hero-big-title {

        font-size:60px;

        text-align:center;
        color: var(--acm-black);

    }



    .hero-big-sub-title {

        font-size:26px;
        margin-block-end: 0.5rem !important;
        color: var(--acm-black);
    }



    /*
    Hero buttons
    */

    .hero-description + div {

        width:100%;

        justify-content:center;

    }


    .hero-description + div a {

        width:100%;

        text-align:center;

    }

    .border-start {

        border-left:0 !important;

        border-top:1px solid rgba(0,0,0,.1);

    }

    .p-12{padding: 1rem!important;}
    /*
    Intro section
    */


    .capabilities-left,
    .capabilities-right {

        padding:20px !important;

    }


    .capabilities-title,
    .section-title,
    .industries-title {

        font-size:32px;

    }



    /*
    Facts
    */


    .caps-item {

        width:100%;

    }


    .fact-number h3 {

        font-size:2rem!important;

    }

    .gap-12{
        gap:1rem!important;
    }

     .p-24 {
        padding: 2rem !important;
    }

    .program-cards {
        display: flex;
        gap: 24px;
        flex-wrap: wrap;
    }

    .program-cards > .white-blur-transparent {
        flex: 1;
    }

    /*
    Approach Section
    */


    .section-content {

        gap:30px !important;

    }


    .capability-text {
        font-size: 12px;
        font-weight: 400;
        line-height: 14px;
        color: #262836;
        text-align: center;
    }


    /*
    Program Section
    */


    .white-blur-transparent {

        padding:30px !important;

        border-radius:24px !important;

    }



    .industries-description {

        font-size:16px;

    }




    /*
    Lists
    */

    ul {

        padding-left:20px;

    }



}



/* --------------------------------
   Small Mobile
-------------------------------- */


@media(max-width:480px){


    .hero-feat-title {

        font-size:32px;

    }


    .hero-big-title {

        font-size:48px;

    }


    .capabilities-title,
    .section-title,
    .industries-title {

        font-size:28px;

    }


    .fact-number h3 {

        font-size:40px;

    }


}