/* =========================================
   SIKHOZEN FAQ SECTION
========================================= */

.sz-faq-section{
    position:relative;
    width:100%;

    background:#ffffff;

    overflow:hidden;
}


/* =========================================
   CONTAINER
========================================= */

.sz-faq-container{
    position:relative;

    width:100%;
    max-width:1430px;

    min-height:470px;

    margin:0 auto;

    padding:28px 42px 0px 0px;

    box-sizing:border-box;

    display:grid;
    grid-template-columns:minmax(0, 68%) minmax(300px, 32%);

    align-items:center;
}


/* =========================================
   LEFT
========================================= */

.sz-faq-left{
    position:relative;
    z-index:3;

    width:100%;
}


/* =========================================
   BADGE
========================================= */

.sz-faq-badge{
    display:inline-flex;
    align-items:center;

    height:25px;

    padding:0 11px;

    border:1px solid #7050f4;
    border-radius:20px;

    color:#4030b8;

    background:#ffffff;

    font-size:11px;
    line-height:25px;

    font-weight:700;

    letter-spacing:.15px;
}


.sz-faq-badge i{
    margin-right:7px;

    color:#6544ec;

    font-size:11px;
}


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

.sz-faq-heading-row{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    gap:20px;

    margin-top:7px;
}


.sz-faq-heading-row h2{
    margin:0;
margin: 0 0 7px;
    color:#10194b;

    font-size:32px;
    line-height:31px;

    font-weight:800;

    letter-spacing:-.5px;
}

.sz-faq-heading-row h2 span{
   color: #6548f4;
}


.sz-faq-heading-row p{
	margin: 6px 0 0;

    color:#697391;

    font-size:15px;
    line-height:17px;

    font-weight:400;
}


/* =========================================
   VIEW ALL
========================================= */

.sz-faq-view-all{
    flex-shrink:0;

    display:inline-flex;
    align-items:center;

    margin-bottom:4px;

    color:#5d3bf0;

    text-decoration:none;

    font-size:16px;
    font-weight:700;
}


.sz-faq-view-all span{
    margin-left:8px;

    font-size:16px;
    line-height:1;
}


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

.sz-faq-grid{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:16px;

    margin-top:12px;

    max-width:850px;
}


.sz-faq-column{
    display:flex;
    flex-direction:column;

    gap:7px;
}


/* =========================================
   FAQ ITEM
========================================= */

.sz-faq-item{
    width:100%;

    border:1px solid #e8e8f5;

    border-radius:7px;

    background:#ffffff;

    box-shadow:0 3px 12px rgba(50,40,120,.035);

    overflow:hidden;

    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}


.sz-faq-item.is-open{
    border-color:#dcd5ff;

    box-shadow:0 7px 20px rgba(82,61,190,.08);
}


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

.sz-faq-question{
    width:100%;
    min-height:38px;

    display:flex;
    align-items:center;

    padding:0 11px;

    border:0;

    outline:0;

    cursor:pointer;

    background:#ffffff;

    text-align:left;
}


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

.sz-faq-question-icon{
    width:26px;
    height:26px;

    flex:0 0 19px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-right:9px;

    border-radius:4px;

    background:#f0edff;

    color:#6241e9;

    font-size:16px;
	padding: 6px;
}


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

.sz-faq-question-text{
    flex:1;

    color:#293252;

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

    font-weight:500;
}


/* =========================================
   PLUS / MINUS
========================================= */

.sz-faq-toggle{
    width:20px;
    height:20px;

    flex:0 0 20px;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#5e3ef0;

    font-size:22px;
    line-height:20px;

    font-weight:400;

    transition:transform .25s ease;
}


.sz-faq-item.is-open .sz-faq-toggle{
    font-size:19px;
}


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

.sz-faq-answer{
    display:grid;
    grid-template-rows:0fr;

    transition:grid-template-rows .3s ease;
}


.sz-faq-answer p{
    min-height:0;
    overflow:hidden;

    margin:0;

    padding:0 40px;

    color:#697391;

    font-size:14px;
    line-height:18px;

    font-weight:400;

    opacity:0;

    transition:
        opacity .25s ease,
        padding .3s ease;
}


.sz-faq-item.is-open .sz-faq-answer{
    grid-template-rows:1fr;
}


.sz-faq-item.is-open .sz-faq-answer p{
    padding-top:0;
    padding-bottom:13px;

    opacity:1;
}


/* =========================================
   RIGHT VISUAL
========================================= */

.sz-faq-visual{
    position:relative;

    width:100%;
    height:430px;

    display:flex;
    align-items:flex-end;
    justify-content:center;
}


/* =========================================
   SOFT BACKGROUND
========================================= */

.sz-faq-visual-glow{
    position:absolute;

    width:390px;
    height:390px;

    right:-30px;
    bottom:-50px;

    border-radius:48% 52% 45% 55%;

    background:
        radial-gradient(
            circle at 50% 40%,
            #eeeaff 0%,
            #f5f2ff 52%,
            rgba(255,255,255,0) 72%
        );

    z-index:0;
}


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

.sz-faq-student-image{
    position:relative;

    z-index:2;

    width:100%;
    height:420px;

    object-fit:contain;
    object-position:center bottom;

    display:block;
}


/* =========================================
   HELP BUBBLE
========================================= */

.sz-faq-help-bubble{
    position:absolute;

    z-index:5;

    top:65px;
    right:0;

    width:128px;

    padding:9px 11px;

    box-sizing:border-box;

    border-radius:13px;

    background:#ffffff;

    box-shadow:0 8px 20px rgba(55,45,120,.11);

    transform:rotate(-7deg);

    text-align:center;
}


.sz-faq-help-bubble strong{
    display:block;

    color:#5035d8;

    font-size:10px;
    line-height:14px;

    font-weight:700;
}


.sz-faq-help-bubble span{
    display:block;

    color:#5035d8;

    font-size:9px;
    line-height:12px;

    font-weight:600;
}


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

.sz-faq-question-bubble{
    position:absolute;

    z-index:5;

    right:30px;
    top:145px;

    width:39px;
    height:39px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:11px;

    background:linear-gradient(
        135deg,
        #6741ed,
        #8057f5
    );

    color:#ffffff;

    box-shadow:0 8px 17px rgba(85,57,210,.18);

    transform:rotate(8deg);
}


.sz-faq-question-bubble span{
    font-size:20px;
    line-height:1;

    font-weight:700;
}


/* =========================================
   CURVED ARROW
========================================= */

.sz-faq-curved-arrow{
    position:absolute;

    z-index:4;

    right:52px;
    top:174px;

    color:#6440ed;

    font-size:46px;
    line-height:1;

    transform:rotate(-25deg);
}


/* =========================================
   LARGE DESKTOP
========================================= */

@media (min-width:1400px){

    .sz-faq-container{
        min-height:auto;

        padding-left:50px;
        padding-right:50px;
    }

    .sz-faq-heading-row h2{
        font-size:32px;
        line-height:33px;
		margin: 0 0 7px;
    }

    .sz-faq-grid{
        max-width:880px;
    }

    .sz-faq-question{
        min-height:40px;
    }

    .sz-faq-question-text{
        font-size:16px;
    }

    .sz-faq-student-image{
        width:100%;
        height:440px;
    }
}


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

@media (max-width:767px){

    .sz-faq-container{
        display:flex;
        flex-direction:column;

        min-height:auto;

        padding:28px 18px 40px;
    }


    .sz-faq-heading-row{
        display:block;
    }


    .sz-faq-heading-row h2{
        font-size:25px;
        line-height:29px;
    }


    .sz-faq-heading-row p{
        font-size:12px;
        line-height:17px;
    }


    .sz-faq-view-all{
        margin-top:10px;
        margin-bottom:0;
    }


    .sz-faq-grid{
        grid-template-columns:1fr;

        gap:7px;

        max-width:none;

        margin-top:15px;
    }


    .sz-faq-column{
        gap:7px;
    }


    .sz-faq-question{
        min-height:45px;

        padding:0 12px;
    }


    .sz-faq-question-text{
        font-size:12px;
        line-height:16px;
    }


    .sz-faq-question-icon{
        width:22px;
        height:22px;

        flex-basis:22px;

        font-size:9px;
    }


    .sz-faq-toggle{
        width:24px;
        height:24px;

        flex-basis:24px;

        font-size:19px;
    }


    .sz-faq-answer p{
        padding-left:43px;
        padding-right:20px;

        font-size:11px;
        line-height:17px;
    }


    .sz-faq-visual{
        width:100%;
        height:330px;

        margin-top:25px;
    }


    .sz-faq-student-image{
        width:290px;
        height:320px;
    }


    .sz-faq-help-bubble{
        right:0;
        top:25px;
    }


    .sz-faq-question-bubble{
        right:15px;
        top:105px;
    }


    .sz-faq-curved-arrow{
        right:35px;
        top:135px;
    }
}