/* =====================================================
   CONTACT SECTION BASE
===================================================== */

.contact-section{
    width:100%;
    min-height:100vh;

    display:grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    background:#fff;
}


/* =====================================================
   LEFT FORM AREA
===================================================== */

.contact-form-box{
    background:#fff;

    padding:70px 90px;

    display:flex;
    flex-direction:column;
    justify-content:center;
}

.small-title{
    display:block;

    color:#a87635;

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

    letter-spacing:1px;

    margin-bottom:22px;
}

.contact-form-box h1{
    color:#111;

    font-size:42px;
    line-height:1.25;

    margin:0 0 22px;
}

.intro{
    max-width:520px;

    color:#555;

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

    margin:0 0 28px;
}


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

#contactForm{
    width:100%;
}

.form-row{
    display:grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap:16px;
}

.input-box,
.textarea-box{
    position:relative;

    margin-bottom:16px;
}

.input-box > i,
.textarea-box > i{
    position:absolute;

    left:18px;
    top:50%;

    transform:translateY(-50%);

    color:#777;

    font-size:17px;

    pointer-events:none;

    z-index:2;
}

.textarea-box > i{
    top:25px;

    transform:none;
}

.input-box input,
.input-box select,
.textarea-box textarea{
    width:100%;

    box-sizing:border-box;

    border:1px solid #e5e5e5;
    outline:none;

    background:#fff;

    padding:18px 18px 18px 55px;

    border-radius:6px;

    color:#333;

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

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

.input-box select{
    appearance:none;
    -webkit-appearance:none;

    cursor:pointer;
}

.textarea-box textarea{
    height:130px;

    resize:none;
}

.input-box input:focus,
.input-box select:focus,
.textarea-box textarea:focus{
    border-color:#a87635;

    box-shadow:
        0 0 0 3px rgba(168,118,53,.08);
}


/* =====================================================
   MESSAGE BOX
===================================================== */

.contact-msg{
    display:none;

    width:100%;

    box-sizing:border-box;

    padding:14px 16px;

    border-radius:8px;

    margin-bottom:18px;

    font-size:14px;
    font-weight:700;
    line-height:1.5;
}

.contact-msg.success{
    display:block;

    background:#e8f8ee;

    color:#12843b;

    border:1px solid #b8ebc9;
}

.contact-msg.error{
    display:block;

    background:#fdecec;

    color:#c62828;

    border:1px solid #f5b5b5;
}


/* =====================================================
   CHARACTER COUNT
===================================================== */

.char-count{
    margin-top:-14px;
    margin-bottom:15px;

    text-align:right;

    color:#777;

    font-size:13px;
}


/* =====================================================
   UPLOAD BOX
===================================================== */

.upload-box{
    width:100%;

    box-sizing:border-box;

    display:flex;
    align-items:center;

    gap:17px;

    padding:18px;

    background:#fff;

    border:1px dashed #d6d6d6;
    border-radius:8px;

    cursor:pointer;

    margin-bottom:12px;

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

.upload-box:hover{
    border-color:#a87635;

    background:#fcfaf7;
}

.upload-main-icon{
    width:48px;
    height:48px;

    min-width:48px;

    border-radius:8px;

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

    background:#f5eee5;

    color:#a87635;

    font-size:22px;
}

.upload-text{
    min-width:0;

    flex:1;
}

.upload-text strong{
    display:block;

    color:#333;

    font-size:15px;
    line-height:1.4;
}

.upload-text p{
    color:#777;

    font-size:12.5px;
    line-height:1.5;

    margin:4px 0 0;
}

.upload-text small{
    display:block;

    color:#777;

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

    margin-top:5px;
}

.upload-box input{
    display:none;
}


/* =====================================================
   SELECTED FILES CONTAINER
===================================================== */

.selected-files-list{
    width:100%;

    display:flex;
    flex-direction:column;

    gap:9px;

    margin-bottom:18px;
}

.selected-files-list:empty{
    display:none;

    margin:0;
}


/* =====================================================
   ONE SELECTED FILE
===================================================== */

.selected-file-item{
    width:100%;

    box-sizing:border-box;

    display:flex;
    align-items:center;

    gap:12px;

    padding:9px 10px;

    background:#fafafa;

    border:1px solid #e5e5e5;
    border-radius:7px;

    transition:
        border-color .2s ease,
        background .2s ease;
}

.selected-file-item:hover{
    background:#fffdf9;

    border-color:#d8b98f;
}


/* FILE PREVIEW */

.selected-file-preview{
    width:46px;
    height:46px;

    min-width:46px;

    overflow:hidden;

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

    background:#eee;

    border:1px solid #e0e0e0;
    border-radius:6px;
}

.selected-file-preview img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
}

.selected-file-preview i{
    color:#a87635;

    font-size:21px;
}


/* FILE NAME AND SIZE */

.selected-file-details{
    min-width:0;

    flex:1;
}

.selected-file-name{
    display:block;

    width:100%;

    overflow:hidden;

    text-overflow:ellipsis;
    white-space:nowrap;

    color:#333;

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

.selected-file-size{
    display:block;

    color:#888;

    font-size:11.5px;

    margin-top:4px;
}


/* =====================================================
   SMALL DELETE ICON
===================================================== */

.remove-file-button{
    width:29px;
    height:29px;

    min-width:29px;

    padding:0;

    border:none;
    border-radius:50%;

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

    background:#f6e5e5;

    color:#c62828;

    cursor:pointer;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.remove-file-button i{
    margin:0;

    font-size:12px;
}

.remove-file-button:hover{
    background:#c62828;

    color:#fff;

    transform:scale(1.06);
}


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

#contactSubmitBtn{
    width:100%;

    border:none;

    background:#a87635;

    color:#fff;

    padding:18px;

    border-radius:5px;

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

    cursor:pointer;

    transition:
        background .3s ease,
        opacity .3s ease;
}

#contactSubmitBtn i{
    margin-right:10px;
}

#contactSubmitBtn:hover{
    background:#8f612b;
}

#contactSubmitBtn:disabled{
    opacity:.7;

    cursor:not-allowed;
}

.privacy{
    color:#777;

    text-align:center;

    font-size:13px;

    margin-top:22px;
}

.privacy i{
    margin-right:6px;
}


/* =====================================================
   RIGHT IMAGE AREA
===================================================== */

.contact-image-box{
    position:relative;

    min-height:100vh;

    background:
        url("/Images/section6.png")
        center / cover
        no-repeat;
}

.contact-overlay{
    position:absolute;

    inset:0;

    background:rgba(8,20,35,.55);
}

.right-content{
    position:relative;

    z-index:2;

    height:100%;

    box-sizing:border-box;

    padding:90px;

    color:#fff;

    display:flex;
    flex-direction:column;
    justify-content:center;
}

.right-content h2{
    font-size:36px;
    line-height:1.35;

    margin:0 0 55px;
}

.info-item{
    display:flex;
    align-items:center;

    gap:22px;

    margin-bottom:34px;
}

.contact-info-icon{
    width:68px;
    height:68px;

    min-width:68px;

    border-radius:50%;

    background:rgba(0,0,0,.65);

    border:
        1px solid rgba(255,255,255,.25);

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

    font-size:24px;
}

.info-item h4{
    font-size:20px;

    margin:0 0 8px;
}

.info-item p{
    color:#e8e8e8;

    font-size:16px;

    margin:0;
}


/* =====================================================
   RESPONSIVE: 1600
===================================================== */

@media(max-width:1600px){

    .contact-form-box{
        padding:60px 70px;
    }

    .right-content{
        padding:70px;
    }

    .contact-form-box h1{
        font-size:40px;
    }

    .right-content h2{
        font-size:34px;
    }
}


/* =====================================================
   RESPONSIVE: 1200
===================================================== */

@media(max-width:1200px){

    .contact-section{
        min-height:auto;
    }

    .contact-form-box{
        padding:55px 45px;
    }

    .right-content{
        padding:55px 45px;
    }

    .contact-form-box h1{
        font-size:36px;
    }

    .intro{
        font-size:15px;
        line-height:1.6;
    }

    .input-box input,
    .input-box select,
    .textarea-box textarea{
        padding:
            16px
            16px
            16px
            50px;

        font-size:14px;
    }

    .textarea-box textarea{
        height:120px;
    }

    .right-content h2{
        font-size:31px;

        margin-bottom:42px;
    }

    .info-item{
        gap:18px;

        margin-bottom:28px;
    }

    .contact-info-icon{
        width:58px;
        height:58px;

        min-width:58px;

        font-size:21px;
    }

    .info-item h4{
        font-size:18px;
    }

    .info-item p{
        font-size:15px;
    }
}


/* =====================================================
   RESPONSIVE: 992
===================================================== */

@media(max-width:992px){

    .contact-section{
        grid-template-columns:1fr;

        min-height:auto;
    }

    .contact-form-box{
        padding:60px 45px;
    }

    .contact-image-box{
        min-height:520px;
    }

    .right-content{
        padding:60px 45px;
    }

    .contact-form-box h1{
        font-size:36px;
    }

    .intro{
        max-width:100%;
    }

    .right-content h2{
        font-size:32px;

        margin-bottom:38px;
    }
}


/* =====================================================
   RESPONSIVE: 768
===================================================== */

@media(max-width:768px){

    .contact-form-box{
        padding:50px 30px;
    }

    .form-row{
        grid-template-columns:1fr;

        gap:0;
    }

    .contact-form-box h1{
        font-size:34px;
    }

    .small-title{
        font-size:13px;

        margin-bottom:16px;
    }

    .intro{
        font-size:14.5px;

        margin-bottom:24px;
    }

    .input-box input,
    .input-box select,
    .textarea-box textarea{
        padding:
            15px
            15px
            15px
            48px;
    }

    .textarea-box textarea{
        height:120px;
    }

    .contact-image-box{
        min-height:460px;
    }

    .right-content{
        padding:50px 30px;
    }

    .right-content h2{
        font-size:29px;

        margin-bottom:34px;
    }

    .info-item{
        gap:16px;

        margin-bottom:26px;
    }

    .contact-info-icon{
        width:54px;
        height:54px;

        min-width:54px;

        font-size:20px;
    }

    .info-item h4{
        font-size:17px;
    }

    .info-item p{
        font-size:14px;
    }
}


/* =====================================================
   RESPONSIVE: 576
===================================================== */

@media(max-width:576px){

    .contact-form-box{
        padding:42px 20px;
    }

    .contact-form-box h1{
        font-size:30px;
        line-height:1.25;
    }

    .small-title{
        font-size:12px;

        margin-bottom:14px;
    }

    .intro{
        font-size:14px;
        line-height:1.6;

        margin-bottom:22px;
    }

    .input-box,
    .textarea-box{
        margin-bottom:14px;
    }

    .input-box > i,
    .textarea-box > i{
        left:15px;

        font-size:15px;
    }

    .input-box input,
    .input-box select,
    .textarea-box textarea{
        padding:
            14px
            14px
            14px
            44px;

        border-radius:5px;

        font-size:13.5px;
    }

    .textarea-box textarea{
        height:110px;
    }

    .upload-box{
        padding:13px;

        gap:12px;

        align-items:flex-start;
    }

    .upload-main-icon{
        width:42px;
        height:42px;

        min-width:42px;

        font-size:19px;
    }

    .upload-text strong{
        font-size:13px;
    }

    .upload-text p{
        font-size:11px;
    }

    .upload-text small{
        font-size:11px;
    }

    .selected-file-item{
        padding:8px 9px;

        gap:9px;
    }

    .selected-file-preview{
        width:42px;
        height:42px;

        min-width:42px;
    }

    .selected-file-preview i{
        font-size:18px;
    }

    .selected-file-name{
        font-size:12px;
    }

    .selected-file-size{
        font-size:10.5px;
    }

    .remove-file-button{
        width:27px;
        height:27px;

        min-width:27px;
    }

    .remove-file-button i{
        font-size:11px;
    }

    #contactSubmitBtn{
        padding:15px;

        font-size:13.5px;
    }

    .privacy{
        font-size:12px;
        line-height:1.5;
    }

    .contact-image-box{
        min-height:420px;
    }

    .right-content{
        padding:42px 20px;
    }

    .right-content h2{
        font-size:26px;

        margin-bottom:30px;
    }

    .info-item{
        gap:14px;

        margin-bottom:24px;
    }

    .contact-info-icon{
        width:48px;
        height:48px;

        min-width:48px;

        font-size:18px;
    }

    .info-item h4{
        font-size:16px;

        margin-bottom:5px;
    }

    .info-item p{
        font-size:13.5px;
    }
}


/* =====================================================
   RESPONSIVE: 360
===================================================== */

@media(max-width:360px){

    .contact-form-box{
        padding:36px 16px;
    }

    .contact-form-box h1{
        font-size:27px;
    }

    .intro{
        font-size:13px;
    }

    .input-box input,
    .input-box select,
    .textarea-box textarea{
        padding:
            13px
            13px
            13px
            42px;

        font-size:13px;
    }

    .upload-box{
        padding:11px;
    }

    .upload-main-icon{
        width:38px;
        height:38px;

        min-width:38px;

        font-size:17px;
    }

    .upload-text strong{
        font-size:12px;
    }

    .upload-text p{
        font-size:10.5px;
    }

    #contactSubmitBtn{
        padding:14px;

        font-size:13px;
    }

    .contact-image-box{
        min-height:380px;
    }

    .right-content{
        padding:36px 16px;
    }

    .right-content h2{
        font-size:23px;
    }

    .contact-info-icon{
        width:44px;
        height:44px;

        min-width:44px;

        font-size:16px;
    }

    .info-item h4{
        font-size:15px;
    }

    .info-item p{
        font-size:12.5px;
    }
}




/* =====================================================
   SELECTED FILES LIST
===================================================== */

.selected-files-list{
    width:100%;
    margin-top:15px;
    margin-bottom:18px;

    display:flex;
    flex-direction:column;
    gap:12px;
}

.selected-file-item{

    width:100%;
    box-sizing:border-box;

    display:flex;
    align-items:center;
    gap:14px;

    padding:12px;

    background:#ffffff;

    border:1px solid #e7e7e7;
    border-radius:10px;

    overflow:hidden;
}

.selected-file-preview{

    width:58px;
    height:58px;
    min-width:58px;

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

    overflow:hidden;

    border-radius:8px;

    background:#f5f5f5;
    border:1px solid #e5e5e5;
}

.selected-file-preview img{

    display:block;

    width:100%;
    height:100%;

    max-width:100%;
    max-height:100%;

    object-fit:cover;
    object-position:center;
}

.selected-file-preview i{

    font-size:26px;
    color:#a87635;
}

.selected-file-details{

    flex:1;
    min-width:0;

    display:flex;
    flex-direction:column;
    gap:5px;
}

.selected-file-name{

    color:#222;

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

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.selected-file-size{

    color:#888;

    font-size:12px;
}

.remove-file-button{

    width:34px;
    height:34px;
    min-width:34px;

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

    border:none;
    border-radius:50%;

    background:#fff2f1;
    color:#d92d20;

    cursor:pointer;

    transition:.25s;
}

.remove-file-button:hover{

    background:#d92d20;
    color:#fff;

    transform:scale(1.05);
}


/* =====================================================
   IMPORTANT IMAGE FIX
===================================================== */

.selected-file-preview img,
.selected-file-item img{

    display:block;

    width:100% !important;
    height:100% !important;

    max-width:100% !important;
    max-height:100% !important;

    object-fit:cover !important;
}


/* Prevent uploaded images from stretching */

.contact-section img{

    max-width:100%;
    height:auto;
}

/* But thumbnails stay square */

.selected-file-preview img{

    height:100% !important;
}


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

@media(max-width:576px){

    .selected-file-item{

        gap:10px;
        padding:10px;
    }

    .selected-file-preview{

        width:48px;
        height:48px;
        min-width:48px;
    }

    .selected-file-name{

        font-size:12px;
    }

    .selected-file-size{

        font-size:10px;
    }

    .remove-file-button{

        width:30px;
        height:30px;
        min-width:30px;
    }

}