/*=========================================
            FAQ SECTION START
=========================================*/

.faq-section{
    position: relative;
    padding: 60px 7%;
    background: linear-gradient(135deg,#f7fbff,#eef6ff,#f8fbff);
    overflow: hidden;
}

.faq-container{
    max-width: 1320px;
    margin: auto;
}

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

.faq-heading{
    text-align: center;
    margin-bottom: 55px;
}

.faq-subtitle{
    display: inline-block;
    color: #2b83ff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.faq-heading h2{

    font-size: 42px;
    font-weight: 700;
    color: #0f3264;
    margin-bottom: 16px;
    line-height: 1.2;

}

.faq-line{

    width: 90px;
    height: 4px;
    background: #2b83ff;
    border-radius: 30px;
    margin: auto;

}

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

.faq-grid{

    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 30px;

}

.faq-column{

    display: flex;
    flex-direction: column;
    gap: 16px;

}

/*==========================
        FAQ BOX
===========================*/

.faq-item{

    background: #fff;

    border: 2px solid transparent;

    border-radius: 18px;

    overflow: hidden;

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

    transition: .35s;

}

/* Hover */

.faq-item:hover{

    border-color:#2b83ff;

    box-shadow:0 12px 30px rgba(43,131,255,.20);

}

/* Active */

.faq-item.active{

    border-color:#2b83ff;

    box-shadow:0 15px 35px rgba(43,131,255,.24);

}

/*==========================
        QUESTION
===========================*/

.faq-question{

    width:100%;

    background:none;

    border:none;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:18px;

    padding:18px 22px;

    text-align:left;

}

.faq-question span:first-child{

    font-size:17px;

    font-weight:600;

    color:#12396d;

    line-height:1.45;

}

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

.faq-icon{

    width:40px;

    height:40px;

    min-width:40px;

    border-radius:50%;

    border:2px solid #c7dbff;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#2b83ff;

    transition:.35s;

}

.faq-icon i{

    font-size:14px;

    transition:.35s;

}

.faq-item.active .faq-icon{

    background:#2b83ff;

    color:#fff;

    border-color:#2b83ff;

}

.faq-item.active .faq-icon i{

    transform:rotate(180deg);

}

/*==========================
        ANSWER
===========================*/

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .45s ease;

}

.faq-answer p{

    margin:0;

    padding:0 22px 18px;

    font-size:15px;

    line-height:1.8;

    color:#666;

    border-top:1px solid #edf3ff;

}

/*=========================================
        PART-1 END
=========================================*/



/*=========================================
        SCROLL ANIMATION
=========================================*/

.reveal-up{
    opacity:0;
    transform:translateY(70px);
    transition:all .9s ease;
}

.reveal-up.active{
    opacity:1;
    transform:translateY(0);
}

/* FAQ Box Animation */

.faq-item{
    opacity:0;
    transform:translateY(60px);
    transition:
    opacity .8s ease,
    transform .8s ease,
    border-color .35s,
    box-shadow .35s;
}

.faq-item.show{
    opacity:1;
    transform:translateY(0);
}

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

.faq-question{
    outline:none;
    -webkit-tap-highlight-color:transparent;
}

.faq-question:focus{
    outline:none;
}

.faq-question:hover{
    background:transparent;
}

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

@media(max-width:992px){

.faq-section{

    padding:70px 30px;

}

.faq-heading{

    margin-bottom:45px;

}

.faq-heading h2{

    font-size:36px;

}

.faq-grid{

    grid-template-columns:1fr;

    gap:20px;

}

.faq-column{

    gap:15px;

}

.faq-question{

    padding:16px 20px;

}

.faq-question span:first-child{

    font-size:16px;

}

.faq-answer p{

    font-size:14px;

    padding:0 20px 16px;

}

.faq-icon{

    width:38px;
    height:38px;
    min-width:38px;

}

.faq-icon i{

    font-size:13px;

}

}

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

@media(max-width:768px){

.faq-section{

    padding:60px 18px;

}

.faq-heading{

    margin-bottom:35px;

}

.faq-heading h2{

    font-size:30px;

}

.faq-subtitle{

    font-size:14px;

}

.faq-line{

    width:70px;

    height:3px;

}

.faq-grid{

    gap:18px;

}

.faq-column{

    gap:14px;

}

.faq-item{

    border-radius:16px;

}

.faq-question{

    padding:15px 16px;

    gap:12px;

}

.faq-question span:first-child{

    font-size:15px;

    line-height:1.45;

}

.faq-answer p{

    padding:0 16px 16px;

    font-size:14px;

    line-height:1.7;

}

.faq-icon{

    width:34px;

    height:34px;

    min-width:34px;

}

.faq-icon i{

    font-size:12px;

}

}

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

@media(max-width:480px){

.faq-section{

    padding:50px 15px;

}

.faq-heading h2{

    font-size:26px;

}

.faq-question{

    padding:14px;

}

.faq-question span:first-child{

    font-size:14px;

}

.faq-answer p{

    font-size:13px;

}

.faq-icon{

    width:32px;

    height:32px;

    min-width:32px;

}

}

/*=========================================
        EXTRA EFFECTS
=========================================*/

.faq-item,
.faq-question,
.faq-icon,
.faq-answer{
    box-sizing:border-box;
}

.faq-item:hover .faq-icon{

    border-color:#2b83ff;

}

.faq-item.active .faq-question{

    color:#12396d;

}

/*=========================================
            FAQ SECTION END
=========================================*/