/*==========================================================
JK CONTACT SECTION
Unique CSS
Font : Poppins
==========================================================*/

#jk-contact-main{
    width:100%;
    position:relative;
    overflow:hidden;
    font-family:"Poppins",sans-serif;
    background:#f2f4f2;
    color:#0f1513;
}

/*=========================
Container
=========================*/

.jk-contact-container{
    width:100%;
    max-width:1240px;
    margin:0 auto;
    padding:0 25px;
}

/*=========================
Hero Section
=========================*/

.jk-contact-hero{
    width:100%;
    padding:90px 0 55px;
    background:#f2f4f2;
}

.jk-contact-breadcrumb{
    font-size:13px;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:2px;
    color:#7d8782;
    margin-bottom:25px;
}

.jk-contact-title{
    font-size: 4rem;
    line-height:1.05;
    font-weight:700;
    letter-spacing:-2px;
    max-width:760px;
    color:#0f1513;
    margin:0;
}

.jk-contact-description{
    margin-top:25px;
    max-width:700px;
    font-size:20px;
    line-height:1.8;
    color:#5d6762;
}

/*=========================
Main Contact Section
=========================*/

.jk-contact-section{
    width:100%;
    padding:0 0 100px;
    background:#f2f4f2;
}

.jk-contact-wrapper{

    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:60px;
    align-items:flex-start;

}

/*=========================
Left Side
=========================*/

.jk-contact-info{
    width:100%;
}

.jk-contact-item{

    display:flex;
    align-items:flex-start;
    gap:20px;

    padding:28px 0;

    border-bottom:1px solid rgba(0,0,0,.10);

}

.jk-contact-item:first-child{
    padding-top:0;
}

/*=========================
Icon
=========================*/

.jk-contact-icon{

    width:52px;
    height:52px;

    flex-shrink:0;

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

    border-radius:12px;

    background:#e4efe8;

    color:#266bd7;

}

.jk-contact-icon svg{

    width:23px;
    height:23px;

}

/*=========================
Content
=========================*/

.jk-contact-content{

    flex:1;

}

.jk-contact-content h3{

    margin:0 0 10px;
    font-size:21px;
    font-weight:600;
    color:#0f1513;

}

.jk-contact-content a{

    display:inline-block;

    color:#5d6762;

    text-decoration:none;

    font-size:16px;

    transition:.3s;

}

.jk-contact-content a:hover{

    color:#266bd7;

}

.jk-contact-content p{

    margin:8px 0 0;

    font-size:16px;

    line-height:1.7;

    color:#6f7974;

}

/*=========================
Right Form Card Layout Only
(Form Styling Next Part)
=========================*/

.jk-contact-form-card{

    background:#ffffff;

    border-radius:18px;

    border:1px solid rgba(0,0,0,.08);

    padding:40px;

    box-shadow:
    0 20px 50px rgba(0,0,0,.06);

    width:100%;

}

.jk-contact-form-card form{

    width:100%;

}

/*=========================
Rows
=========================*/

.jk-contact-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}

/*=========================
Field Layout Only
=========================*/

.jk-contact-field{

    width:100%;

    display:flex;

    flex-direction:column;

    margin-bottom:22px;

}

.jk-contact-field label{

    margin-bottom:8px;

    font-size:14px;

    font-weight:600;

    color:#222;

}

/*==========================================================
Responsive
==========================================================*/

@media(max-width:1100px){

    .jk-contact-wrapper{

        gap:40px;

    }

    .jk-contact-title{

        max-width:100%;

    }

}

@media(max-width:991px){

    .jk-contact-wrapper{

        grid-template-columns:1fr;

    }

    .jk-contact-info{

        order:2;

    }

    .jk-contact-form-card{

        order:1;

    }

}

@media(max-width:768px){

    .jk-contact-hero{

        padding:70px 0 40px;

    }

    .jk-contact-title{

        font-size:42px;

        letter-spacing:-1px;

    }

    .jk-contact-description{

        font-size:17px;

    }

    .jk-contact-row{

        grid-template-columns:1fr;

        gap:0;

    }

    .jk-contact-form-card{

        padding:30px 25px;

    }

}

@media(max-width:576px){

    .jk-contact-container{

        padding:0 18px;

    }

    .jk-contact-title{

        font-size:34px;

    }

    .jk-contact-description{

        font-size:16px;

        line-height:1.7;

    }

    .jk-contact-item{

        gap:16px;

        padding:24px 0;

    }

    .jk-contact-icon{

        width:46px;
        height:46px;

    }

    .jk-contact-icon svg{

        width:20px;
        height:20px;

    }

    .jk-contact-content h3{

        font-size:18px;

    }

    .jk-contact-form-card{

        padding:22px;

    }

}


/*==========================================================
FORM ELEMENTS
==========================================================*/

.jk-contact-field input,
.jk-contact-field select,
.jk-contact-field textarea{

    width:100%;

    font-family:"Poppins",sans-serif;
    font-size:15px;
    font-weight:400;

    color:#222;

    background:#f7f8f8;

    border:1px solid rgba(0,0,0,.10);

    border-radius:10px;

    padding:15px 18px;

    transition:.35s ease;

    outline:none;

    appearance:none;
    -webkit-appearance:none;

}

/* Select Arrow */

.jk-contact-field select{

    cursor:pointer;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

    background-repeat:no-repeat;

    background-size:cover;

    /* background-position:right 18px center; */

    background-position:center center;

    padding-right:55px;

}

/* Textarea */

.jk-contact-field textarea{

    resize:vertical;

    min-height:160px;

}

/* Placeholder */

.jk-contact-field input::placeholder,
.jk-contact-field textarea::placeholder{

    color:#8c8c8c;

}

/* Hover */

.jk-contact-field input:hover,
.jk-contact-field textarea:hover,
.jk-contact-field select:hover{

    border-color:#266bd7;

}

/* Focus */

.jk-contact-field input:focus,
.jk-contact-field textarea:focus,
.jk-contact-field select:focus{

    background:#ffffff;

    border-color:#266bd7;

    box-shadow:0 0 0 4px rgba(11,110,79,.12);

}

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

.jk-contact-btn{

    width:100%;

    margin-top:10px;

    border:none;

    outline:none;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    padding:18px 20px;

    background:#266bd7;

    color:#ffffff;

    font-family:"Poppins",sans-serif;

    font-size:16px;

    font-weight:600;

    border-radius:10px;

    transition:.35s ease;

}

.hero-image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.jk-contact-btn svg{

    width:18px;
    height:18px;

    transition:.35s;

}

.jk-contact-btn:hover{

    background:#f36a0e;

    transform:translateY(-2px);

}

.jk-contact-btn:hover svg{

    transform:translate(3px,-3px);

}

/*==========================================================
FORM NOTE
==========================================================*/

.jk-contact-note{

    margin-top:18px;

    text-align:center;

    font-size:13px;

    line-height:1.7;

    color:#6b6b6b;

}

/*==========================================================
INPUT AUTOFILL
==========================================================*/

.jk-contact-field input:-webkit-autofill,
.jk-contact-field input:-webkit-autofill:hover,
.jk-contact-field input:-webkit-autofill:focus{

    -webkit-box-shadow:0 0 0px 1000px #ffffff inset;

    -webkit-text-fill-color:#222;

}

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

@media(max-width:991px){

    .jk-contact-form-card{

        padding:35px;

    }

}

@media(max-width:768px){

    .jk-contact-field{

        margin-bottom:18px;

    }

    .jk-contact-field input,
    .jk-contact-field textarea,
    .jk-contact-field select{

        padding:14px 16px;

        font-size:15px;

    }

    .jk-contact-btn{

        padding:16px;

        font-size:15px;

    }

    .jk-contact-note{

        font-size:12px;

    }

}

@media(max-width:576px){

    .jk-contact-form-card{

        padding:22px;

        border-radius:14px;

    }

    .jk-contact-field label{

        font-size:13px;

    }

    .jk-contact-field input,
    .jk-contact-field textarea,
    .jk-contact-field select{

        font-size:14px;

        padding:13px 15px;

        border-radius:8px;

    }

    .jk-contact-field textarea{

        min-height:130px;

    }

    .jk-contact-btn{

        padding:15px;

        font-size:14px;

        border-radius:8px;

    }

    .jk-contact-btn svg{

        width:16px;
        height:16px;

    }

}