/*=========================================
        OUR PROGRAMMES START
=========================================*/

.programmes-section{

    position:relative;

    overflow:hidden;

    padding:40px 6%;

    background:
    linear-gradient(
    rgba(0,119,255,.18),
    rgba(0,198,255,.12)),
    url("../img/program-bg.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}

.programmes-section .container{

    max-width:1300px;

    margin:auto;

}

/*=========================================
        MAIN TITLE
=========================================*/

.section-title{

    text-align:center;

    font-size:35px;

    font-weight:900;

    color:#fff;

    text-transform:uppercase;

    letter-spacing:3px;

    margin-bottom:8px;

}

/*=========================================
        SUB TITLES
=========================================*/
/* 
.programme-subtitle{

    text-align:center;

    font-size:46px;

    font-weight:800;

    color:#fff;

    margin:28px 0 35px;

    line-height:1.2;

} */


.programme-subtitle{

    position:relative;

    display:table;

    /* margin:35px auto; */
    margin:18px auto 22px;

    padding:12px 35px;

    font-size:25px;

    font-weight:800;

    color:#fff;

    line-height:1.2;

    background:#1187c9;

    border-radius:12px;

    backdrop-filter:blur(6px);

    box-shadow:0 8px 25px rgba(0,0,0,.35);

}


.programme-subtitle span{

    color:#fff;

    margin-right:8px;

}

/*=========================================
        GRID
=========================================*/

.programmes-grid{

    display:grid;

    justify-content:center;

    align-items:stretch;

    gap:30px;

    margin:auto;

}

/* Focus Area */

.focus-grid{

    grid-template-columns:repeat(4,230px);

    margin-bottom:30px;

}

/* Target Group */

.target-grid{

    grid-template-columns:repeat(3,230px);

    margin-bottom:28px;

}

/*=========================================
        CARD
=========================================*/

.programme-card{

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

    backdrop-filter:blur(10px);

    border-radius:16px;

    padding:18px;

    min-height:125px;

    box-shadow:0 8px 20px rgba(0,0,0,.10);

    transition:.45s ease;

    opacity:0;

    cursor:pointer;

}

/*=========================================
        CARD TOP
=========================================*/

.card-top{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:16px;

}

/*=========================================
        ICON
=========================================*/

.card-top i{

    width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
    135deg,
    #0077ff,
    #1187c9
    );

    color:#fff;

    font-size:19px;

    transition:.8s ease;

}

/*=========================================
        CARD HEADING
=========================================*/

.card-top h4{

    margin:0;

    font-size:20px;

    font-weight:700;

    color:#111;

}

/*=========================================
        CARD DESCRIPTION
=========================================*/

.programme-card p{

    margin:0;

    font-size:14px;

    line-height:1.6;

    color:#555;

}

/*=========================================
        CARD HOVER
=========================================*/

.programme-card:hover{

    transform:translateY(-10px);

    box-shadow:0 18px 40px rgba(0,119,255,.28);

}

.programme-card:hover .card-top i{

    transform:rotateY(360deg);

}

/*=========================================
        INTERNSHIP TITLE
=========================================*/

.internship-title{

    margin-top:25px;

    margin-bottom:0;

}

/*=========================================
        ANIMATIONS
=========================================*/

/* Focus Area / Target Group / Internship */

.zoom-title{

    opacity:0;

    transform:scale(.65);

    transition:1s ease;

}

.zoom-title.show{

    opacity:1;

    transform:scale(1);

}

/* Cards */

.animate-card{

    opacity:0;

    transform:translateY(70px);

    transition:all .8s ease;

}

.animate-card.show{

    opacity:1;

    transform:translateY(0);

}

/* Animation Delay */

.animate-card:nth-child(1){

    transition-delay:.1s;

}

.animate-card:nth-child(2){

    transition-delay:.25s;

}

.animate-card:nth-child(3){

    transition-delay:.4s;

}

.animate-card:nth-child(4){

    transition-delay:.55s;

}

/*=========================================
        RESPONSIVE
=========================================*/

/* Laptop */

@media(max-width:1200px){

    .focus-grid{

        grid-template-columns:repeat(2,250px);

    }

    .target-grid{

        grid-template-columns:repeat(2,250px);

    }

    .target-grid .programme-card:last-child{

        grid-column:1/3;

        justify-self:center;

    }

}

/* Tablet */

@media(max-width:992px){

    .programmes-section{

        padding:60px 25px;

    }

    .section-title{

        font-size:17px;

    }

    .programme-subtitle{

        font-size:38px;

    }

    .focus-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .target-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .target-grid .programme-card:last-child{

        grid-column:1/3;

        width:250px;

        justify-self:center;

    }

}

/* Mobile */

@media(max-width:768px){

    .programmes-section{

        padding:55px 18px;

    }

    .section-title{

        font-size:16px;
        align-items: center;
        letter-spacing:2px;

    }


    .programme-subtitle{

    font-size:30px;

    display:table;

    margin:20px auto;

    text-align:center;

}

    .focus-grid{

        grid-template-columns:1fr;

    }

    .target-grid{

        grid-template-columns:1fr;

    }

    .programme-card{

        width:100%;

        min-height:auto;

    }

    .target-grid .programme-card:last-child{

        width:100%;

        grid-column:auto;

    }

    .card-top{

        gap:10px;

    }

    .card-top i{

        width:45px;

        height:45px;

        font-size:18px;

    }

    .card-top h4{

        font-size:17px;

    }

    .programme-card p{

        font-size:13px;

    }

}

/* Small Mobile */

@media(max-width:480px){

    .section-title{

        font-size:15px;

    }

    .programme-subtitle{

        font-size:24px;

    }

    .programme-card{

        padding:16px;

    }

    .card-top i{

        width:42px;

        height:42px;

        font-size:17px;

    }

    .card-top h4{

        font-size:16px;

    }

    .programme-card p{

        font-size:12px;

        line-height:1.5;

    }

}

/*=========================================
        OUR PROGRAMMES END
=========================================*/