/* =========================================
   SIKHOZEN CONTACT / COURSE ENQUIRY
========================================= */

.sz-contact-enquiry{
    width:100%;
    min-height:760px;

    padding:70px 30px 85px !important;

    background:
        radial-gradient(
            circle at 12% 45%,
            rgba(111,78,255,.055),
            transparent 28%
        ),
        #fffdfc;
}

.sz-contact-container{
    width:100%;
    max-width:1220px;
    min-height:680px;

    margin:0 auto;

    display:grid;
    grid-template-columns:48% 52%;

    gap:65px;

    align-items:stretch;
}


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

.sz-contact-left{
    position:relative;

    padding:25px 10px 0 5px;
}

.sz-contact-small-title{
    display:inline-block;

    margin-bottom:18px;

    color:#ff6d59;

    font-size:13px;
    font-weight:800;

    letter-spacing:1.4px;
}

.sz-contact-left h1{
    max-width:540px;

    margin:0 0 20px;

    color:#162238;

    font-size:48px;
    line-height:1.12;

    font-weight:800;

    letter-spacing:-1.5px;
}

.sz-contact-left h1 span{
    display:block;

    color:#6044e8;
}

.sz-contact-description{
    max-width:520px;

    margin:0 0 30px;

    color:#697386;

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


/* CONTACT INFO */

.sz-contact-info{
    display:flex;
    align-items:center;

    gap:14px;

    margin-bottom:18px;
}

.sz-contact-info-icon{
    width:42px;
    height:42px;

    flex-shrink:0;

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

    border-radius:12px;

    background:#f1edff;

    color:#6949e8;

    font-size:16px;
}

.sz-contact-info small{
    display:block;

    margin-bottom:3px;

    color:#9aa1ad;

    font-size:11px;
    font-weight:600;
}

.sz-contact-info a,
.sz-contact-info strong{
    display:block;

    color:#303746;

    font-size:14px;
    font-weight:700;

    text-decoration:none;
}


/* ILLUSTRATION */

.sz-contact-illustration{
    position:relative;

    width:100%;
    height:245px;

    margin-top:20px;

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

    overflow:hidden;
}

.sz-contact-blob{
    position:absolute;

    width:340px;
    height:210px;

    bottom:8px;

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

    background:
        linear-gradient(
            135deg,
            #fff0ed,
            #f3efff
        );
}

.sz-contact-illustration img{
    position:relative;
    z-index:2;

    width:100%;
    height:auto;

    object-fit:contain;
}


/* =========================================
   RIGHT FORM
========================================= */

.sz-contact-form-card{
    align-self:stretch;

    padding:48px 55px 42px;

    background:#fff;

    border-radius:18px;

    box-shadow:
        0 15px 45px rgba(31,41,55,.08);

    border:1px solid rgba(229,231,235,.65);
}


/* TABS */

.sz-contact-tabs{
    display:flex;
    align-items:center;
    gap:32px;

    margin-bottom:28px;

    border-bottom:1px solid #eceef2;
}

.sz-contact-tabs button{
    position:relative;

    padding:0 4px 13px;

    border:0;
    background:none;

    color:#ff6b57;

    font-family:inherit;

    font-size:15px;
    font-weight:700;

    cursor:pointer;
}

.sz-contact-tabs button::after{
    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:-1px;

    height:2px;

    background:#ff6b57;
}

.sz-contact-tabs span{
    padding-bottom:13px;

    color:#667085;

    font-size:15px;
    font-weight:500;
}


/* FORM HEADING */

.sz-contact-form-heading{
    margin-bottom:25px;
}

.sz-contact-form-heading h2{
    margin:0 0 8px;

    color:#182235;

    font-size:29px;
    line-height:1.2;

    font-weight:800;

    letter-spacing:-.6px;
}

.sz-contact-form-heading h2 span{
    color:#6547e9;
}

.sz-contact-form-heading p{
    margin:0;

    color:#7c8492;

    font-size:13px;
    line-height:1.6;
}


/* FIELD */

.sz-contact-field{
    margin-bottom:17px;
}

.sz-contact-field label{
    display:block;

    margin-bottom:7px;

    color:#596273;

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

.sz-contact-field label span{
    color:#ff6b57;
}


/* INPUT */

.sz-contact-input{
    position:relative;

    display:flex;
    align-items:center;
}

.sz-contact-input > i:first-child{
    position:absolute;

    left:14px;

    color:#8c95a5;

    font-size:13px;

    pointer-events:none;
}

.sz-contact-input input,
.sz-contact-input select{
    width:100%;
    height:46px;

    padding:0 15px 0 40px;

    border:0;
    border-bottom:1px solid #cfd3da;

    border-radius:0;

    outline:none;

    background:#fff;

    color:#303746;

    font-family:inherit;

    font-size:14px;

    transition:.25s ease;
}

.sz-contact-input input::placeholder{
    color:#a0a6b1;
}

.sz-contact-input input:focus,
.sz-contact-input select:focus{
    border-bottom-color:#6547e9;
}


/* COUNTRY */

.sz-contact-country{
    position:absolute;

    left:0;

    height:30px;

    display:flex;
    align-items:center;

    padding-right:12px;

    color:#303746;

    font-size:13px;
    font-weight:600;

    border-right:1px solid #d5d8de;
}

.sz-contact-country + input{
    padding-left:55px;
}


/* SELECT */

.sz-contact-input select{
    padding-left:40px;

    appearance:none;
    -webkit-appearance:none;

    cursor:pointer;
}

.sz-contact-select-arrow{
    position:absolute;

    right:7px;

    color:#9aa1ad !important;

    left:auto !important;

    font-size:10px !important;
}


/* MESSAGE */

.sz-contact-message textarea{
    width:100%;
    height:125px;

    padding:13px 14px;

    resize:none;

    border:1px solid #d8dbe1;
    border-radius:8px;

    outline:none;

    background:#fff;

    color:#303746;

    font-family:inherit;

    font-size:14px;

    transition:.25s ease;
}

.sz-contact-message textarea::placeholder{
    color:#9299a5;
}

.sz-contact-message textarea:focus{
    border-color:#6547e9;

    box-shadow:
        0 0 0 3px rgba(101,71,233,.07);
}


/* BUTTON */

.sz-contact-submit{
    height:50px;

    padding:0 25px;

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

    gap:12px;

    border:0;
    border-radius:9px;

  background: linear-gradient(135deg, var(--primary), var(--secondary));

    color:#fff;

    font-family:inherit;

    font-size:14px;
    font-weight:800;

    cursor:pointer;

    box-shadow:
        0 8px 20px rgba(255,103,83,.20);

    transition:.25s ease;
}

.sz-contact-submit:hover{
    transform:translateY(-2px);

    box-shadow:
        0 12px 25px rgba(255,103,83,.28);
}

.sz-contact-submit i{
    transition:.25s ease;
}

.sz-contact-submit:hover i{
    transform:translateX(4px);
}


/* SECURITY */

.sz-contact-security{
    display:flex;
    align-items:center;

    gap:6px;

    margin-top:12px;

    color:#a0a6b0;

    font-size:10px;
}

.sz-contact-security i{
    color:#6c53df;
}


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

@media(max-width:767px){

    .sz-contact-enquiry{
        padding:35px 15px 50px;
    }

    .sz-contact-container{
        grid-template-columns:1fr;

        gap:25px;
    }

    .sz-contact-left{
        padding:5px 5px 0;
    }

    .sz-contact-left h1{
        font-size:34px;
    }

    .sz-contact-description{
        font-size:14px;
    }

    .sz-contact-illustration{
        height:190px;
    }

    .sz-contact-illustration img{
        width:300px;
    }

    .sz-contact-form-card{
        padding:30px 22px;
        border-radius:16px;
    }

    .sz-contact-tabs{
        gap:20px;
    }

    .sz-contact-tabs button,
    .sz-contact-tabs span{
        font-size:13px;
    }

    .sz-contact-form-heading h2{
        font-size:25px;
    }

    .sz-contact-submit{
        width:100%;
    }
}



/* =========================================
   ENQUIRY TABS
========================================= */

.sz-contact-tabs{
    display:flex;
    align-items:center;
    gap:28px;

    margin-bottom:28px;

    border-bottom:1px solid #eceef2;
}

.sz-enquiry-tab{
    position:relative;

    padding:0 4px 13px;

    border:0;
    background:transparent;

    color:#667085;

    font-family:inherit;
    font-size:15px;
    font-weight:600;

    cursor:pointer;

    white-space:nowrap;
}

.sz-enquiry-tab.active{
    color:#ff6b57;
}



.sz-enquiry-tab.active::after{
    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:-1px;

    height:2px;

    background:#ff6b57;
}
.sz-enquiry-panel{
    width:100%;
    animation:szEnquiryPanel .25s ease;
}

@keyframes szEnquiryPanel{

    from{
        opacity:0;
        transform:translateY(5px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

/* CORPORATE FORM */

.sz-corporate-form{
    animation:szCorporateFade .25s ease;
}

@keyframes szCorporateFade{

    from{
        opacity:0;
        transform:translateY(8px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}


/* CORPORATE FORM HEADING */

.sz-corporate-form
.sz-contact-form-heading{
    margin-bottom:24px;
}

.sz-corporate-form
.sz-contact-form-heading h2{
    font-size:28px;
}


/* CORPORATE SUBMIT */

.sz-corporate-form
.sz-contact-submit{
    background:
        linear-gradient(
            135deg,
            #6547e9,
            #8062f5
        );

    box-shadow:
        0 8px 20px rgba(101,71,233,.20);
}

.sz-corporate-form
.sz-contact-submit:hover{
    box-shadow:
        0 12px 25px rgba(101,71,233,.28);
}




/* =========================================
   ENQUIRY TABS - FINAL ACTIVE LINE
========================================= */

/* Main grey bottom line remove */
.sz-contact-tabs{
    border-bottom:0 !important;
}

/* Inactive tab */
.sz-enquiry-tab{
    color:#1f2937 !important;
    font-weight:600;
    border-bottom:2px solid transparent !important;
}

/* Active tab */
.sz-enquiry-tab.active{
    color:#ff6652 !important;
    font-weight:700;

    border-bottom:2px solid #ff6652 !important;
}

/* Old ::after line completely remove */
.sz-enquiry-tab::after{
    display:none !important;
}

/* Inactive hover */
.sz-enquiry-tab:not(.active):hover{
    color:#ff6652 !important;
}

/* MOBILE */

@media(max-width:767px){

    .sz-contact-tabs{
        gap:20px;
        overflow-x:auto;
        scrollbar-width:none;
    }

    .sz-contact-tabs::-webkit-scrollbar{
        display:none;
    }

    .sz-enquiry-tab{
        font-size:13px;
    }

}