/*==========================================
        DROPDOWN SECTION
==========================================*/

.dropdown-section{
    width:100%;
    padding:70px 0 90px;
    background:#faf6f6;
}

.dropdown-container{
    width:90%;
    max-width:1320px;
    margin:auto;
}

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

.dropdown-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px;
}

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

.dropdown-card{

    background:#fff;

    border:1px solid #dfe6ef;

    border-radius:18px;

    overflow:hidden;

    transition:.4s ease;

    box-shadow:0 8px 24px rgba(0,0,0,.06);

    display:flex;

    flex-direction:column;

    opacity:0;

    transform:translateY(60px);

}

/* Scroll Animation */

.dropdown-card.show{

    opacity:1;

    transform:translateY(0);

}

/* Hover */

.dropdown-card:hover{

    transform:translateY(-12px);

    box-shadow:0 20px 45px rgba(0,0,0,.15);

    border-color:#0b7dda;

}

/*==========================================
        IMAGE
==========================================*/

.dropdown-image{

    width:100%;

    height:210px;

    overflow:hidden;

    background:#f5f7fb;

}

.dropdown-image img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transition:.6s;

}

.dropdown-card:hover .dropdown-image img{

    transform:scale(1.08);

}

/*==========================================
        CONTENT
==========================================*/

.dropdown-content{

    padding:28px 22px 24px;

    display:flex;

    flex-direction:column;

    flex:1;

}

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

.dropdown-content h3{

    font-size:25px;

    line-height:1.25;

    color:#082b63;

    font-weight:700;

    margin-bottom:18px;

    min-height:72px;

}

/*==========================================
        PARAGRAPH
==========================================*/

.dropdown-content p{

    font-size:15px;

    color:#555;

    line-height:1.75;

    margin-bottom:28px;

    flex:1;

}

/*==========================================
        BUTTON
==========================================*/

.dropdown-btn{

    width:170px;

    height:48px;

    border-radius:10px;

    background:linear-gradient(90deg,#1565d8,#20a5ea);

    color:#fff;

    text-decoration:none;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:17px;

    font-weight:600;

    transition:.35s;

}

.dropdown-btn:hover{

    transform:translateY(-3px);

    background:linear-gradient(90deg,#0f56bd,#1695dc);

}

/*==========================================
        BUTTON ARROW
==========================================*/

.dropdown-btn::after{

    content:"›";

    margin-left:10px;

    font-size:22px;

    transition:.3s;

}

.dropdown-btn:hover::after{

    transform:translateX(5px);

}

/*==========================================
        CARD ANIMATION DELAY
==========================================*/

.dropdown-card:nth-child(1){transition-delay:.05s;}
.dropdown-card:nth-child(2){transition-delay:.10s;}
.dropdown-card:nth-child(3){transition-delay:.15s;}
.dropdown-card:nth-child(4){transition-delay:.20s;}
.dropdown-card:nth-child(5){transition-delay:.25s;}
.dropdown-card:nth-child(6){transition-delay:.30s;}
.dropdown-card:nth-child(7){transition-delay:.35s;}
.dropdown-card:nth-child(8){transition-delay:.40s;}
.dropdown-card:nth-child(9){transition-delay:.45s;}
.dropdown-card:nth-child(10){transition-delay:.50s;}



/*==========================================
        LARGE LAPTOP
==========================================*/

@media (max-width:1200px){

    .dropdown-container{
        width:92%;
    }

    .dropdown-grid{
        gap:24px;
    }

    .dropdown-content{
        padding:24px 20px;
    }

    .dropdown-content h3{
        font-size:21px;
        min-height:68px;
    }

    .dropdown-content p{
        font-size:16px;
    }

}


/*==========================================
        TABLET
==========================================*/

@media (max-width:991px){

    .dropdown-section{
        padding:60px 0 80px;
    }

    .dropdown-container{
        width:92%;
    }

    .dropdown-grid{

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

        gap:24px;

    }

    .dropdown-image{

        height:220px;

    }

    .dropdown-content{

        padding:24px 20px;

    }

    .dropdown-content h3{

        font-size:22px;

        min-height:auto;

        margin-bottom:15px;

    }

    .dropdown-content p{

        font-size:16px;

        line-height:1.7;

        margin-bottom:24px;

    }

    .dropdown-btn{

        width:165px;

        height:46px;

        font-size:16px;

    }

}


/*==========================================
        MOBILE
==========================================*/

@media (max-width:767px){

    .dropdown-section{

        padding:50px 0 70px;

    }

    .dropdown-container{

        width:92%;

    }

    .dropdown-grid{

        grid-template-columns:1fr;

        gap:22px;

    }

    .dropdown-card{

        border-radius:16px;

    }

    .dropdown-image{

        height:220px;

    }

    .dropdown-content{

        padding:22px 18px;

    }

    .dropdown-content h3{

        font-size:24px;

        line-height:1.3;

        margin-bottom:15px;

        min-height:auto;

    }

    .dropdown-content p{

        font-size:16px;

        line-height:1.7;

        margin-bottom:22px;

    }

    .dropdown-btn{

        width:160px;

        height:45px;

        font-size:16px;

    }

}


/*==========================================
        SMALL MOBILE
==========================================*/

@media (max-width:480px){

    .dropdown-section{

        padding:45px 0 60px;

    }

    .dropdown-container{

        width:94%;

    }

    .dropdown-grid{

        gap:18px;

    }

    .dropdown-card{

        border-radius:14px;

    }

    .dropdown-image{

        height:190px;

    }

    .dropdown-content{

        padding:18px 16px;

    }

    .dropdown-content h3{

        font-size:22px;

    }

    .dropdown-content p{

        font-size:15px;

        margin-bottom:20px;

    }

    .dropdown-btn{

        width:155px;

        height:44px;

        font-size:15px;

    }

}