/*==================================================
    CONTACT HERO
==================================================*/

.contact-hero{

    position:relative;

    min-height:520px;

    display:flex;

    align-items:center;

    background:
        url("../images/hero/contact-hero.jpg")
        center center / cover
        no-repeat;

    overflow:hidden;

}

.contact-hero-overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(10,15,25,.88) 0%,
            rgba(10,15,25,.68) 45%,
            rgba(10,15,25,.30) 100%
        );

}

.contact-hero .container{

    position:relative;

    z-index:2;

}

.contact-hero-content{

    max-width:720px;

    padding:100px 0 80px;

}

.contact-hero .section-subtitle{

    display:inline-block;

    margin-bottom:16px;

    color:var(--primary);

    font-size:14px;

    font-weight:700;

    letter-spacing:1.5px;

    text-transform:uppercase;

}

.contact-hero h1{

    margin:0 0 20px;

    color:var(--white);

    font-size:clamp(42px, 5vw, 68px);

    line-height:1.08;

    font-weight:800;

}

.contact-hero h1 span{

    display:block;

    color:var(--primary);

}

.contact-hero p{

    max-width:650px;

    margin:0 0 30px;

    color:rgba(255,255,255,.85);

    font-size:17px;

    line-height:1.8;

}

.contact-breadcrumb{

    display:flex;

    align-items:center;

    gap:12px;

    color:rgba(255,255,255,.65);

    font-size:14px;

}

.contact-breadcrumb a{

    color:var(--white);

    text-decoration:none;

    transition:var(--transition);

}

.contact-breadcrumb a:hover{

    color:var(--primary);

}

.contact-breadcrumb i{

    color:var(--primary);

    font-size:11px;

}

.contact-breadcrumb span{

    color:rgba(255,255,255,.65);

}

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

@media(max-width:768px){

    .contact-hero{

        min-height:480px;

    }

    .contact-hero-content{

        padding:110px 0 70px;

    }

    .contact-hero h1{

        font-size:42px;

    }

    .contact-hero p{

        font-size:15px;

        line-height:1.7;

    }

}

@media(max-width:480px){

    .contact-hero{

        min-height:450px;

    }

    .contact-hero-content{

        padding:100px 0 60px;

    }

    .contact-hero h1{

        font-size:36px;

    }

    .contact-hero p{

        font-size:14px;

    }

}

/*==================================================
    CONTACT INFO
==================================================*/

.contact-info{

    background:var(--white);

}

.contact-info .section-heading{

    max-width:700px;

    margin-bottom:50px;

}

.contact-info-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}

.contact-info-card{

    display:flex;

    align-items:flex-start;

    gap:18px;

    padding:28px 24px;

    background:var(--surface);

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

    border-radius:var(--radius-lg);

    transition:var(--transition);

}

.contact-info-card:hover{

    transform:translateY(-6px);

    background:var(--white);

    box-shadow:var(--shadow-lg);

}

.contact-info-icon{

    flex-shrink:0;

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:15px;

    background:rgba(244,180,0,.10);

}

.contact-info-icon i{

    color:var(--primary);

    font-size:21px;

}

.contact-info-card h3{

    margin:0 0 8px;

    color:var(--title);

    font-size:17px;

    font-weight:700;

}

.contact-info-card a,

.contact-info-card span{

    display:block;

    margin-bottom:5px;

    color:var(--text);

    font-size:13px;

    line-height:1.6;

    text-decoration:none;

}

.contact-info-card a:hover{

    color:var(--primary);

}

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

@media(max-width:1100px){

    .contact-info-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:576px){

    .contact-info-grid{

        grid-template-columns:1fr;

    }

    .contact-info-card{

        padding:24px 20px;

    }

}

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

.contact-form{

    background:var(--surface);

}

.contact-form-grid{

    display:grid;

    grid-template-columns:.85fr 1.15fr;

    align-items:center;

    gap:70px;

}

.contact-form-content{

    max-width:560px;

}

.contact-form-content .section-subtitle{

    display:block;

    margin-bottom:12px;

}

.contact-form-content .section-title{

    margin-bottom:22px;

}

.contact-form-content .section-title span{

    color:var(--primary);

}

.contact-form-content > p{

    margin:0;

    color:var(--text);

    font-size:15px;

    line-height:1.8;

}

.contact-form-note{

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:28px;

    color:var(--title);

    font-size:14px;

    font-weight:600;

}

.contact-form-note i{

    color:var(--primary);

    font-size:18px;

}

.contact-form-wrapper{

    padding:35px;

    background:var(--white);

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-sm);

}

.contact-form{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.form-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}

.form-group{

    display:flex;

    flex-direction:column;

}

.form-group label{

    margin-bottom:8px;

    color:var(--title);

    font-size:14px;

    font-weight:600;

}

.form-group input,

.form-group select,

.form-group textarea{

    width:100%;

    border:1px solid #E5E7EB;

    border-radius:var(--radius-md);

    background:var(--white);

    color:var(--title);

    font-family:inherit;

    font-size:14px;

    transition:var(--transition);

}

.form-group input,

.form-group select{

    height:50px;

    padding:0 16px;

}

.form-group textarea{

    min-height:130px;

    padding:14px 16px;

    resize:vertical;

}

.form-group input::placeholder,

.form-group textarea::placeholder{

    color:#9CA3AF;

}

.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(244,180,0,.10);

}

.contact-submit{

    width:100%;

    min-height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin-top:5px;

}

.contact-submit i{

    font-size:14px;

    transition:var(--transition);

}

.contact-submit:hover i{

    transform:translateX(4px);

}

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

@media(max-width:992px){

    .contact-form-grid{

        grid-template-columns:1fr;

        gap:45px;

    }

    .contact-form-content{

        max-width:700px;

    }

}

@media(max-width:768px){

    .contact-form-wrapper{

        padding:25px 20px;

    }

    .form-row{

        grid-template-columns:1fr;

        gap:20px;

    }

}

@media(max-width:480px){

    .contact-form-wrapper{

        padding:22px 16px;

    }

}

/*==================================================
    CONTACT MAP
==================================================*/

.contact-map{

    background:var(--white);

}

.contact-map .section-heading{

    max-width:700px;

    margin-bottom:40px;

}

.contact-map-wrapper{

    position:relative;

    overflow:hidden;

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-sm);

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

}

.contact-map-wrapper iframe{

    display:block;

    width:100%;

    min-height:450px;

    border:0;

    filter:saturate(.85);

}

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

@media(max-width:768px){

    .contact-map-wrapper iframe{

        min-height:380px;

    }

}

@media(max-width:480px){

    .contact-map-wrapper iframe{

        min-height:320px;

    }

}

/*==================================================
    CONTACT ALERT
==================================================*/

.contact-alert{

    position:relative;

    display:flex;

    align-items:flex-start;

    gap:16px;

    margin:0 auto 40px;

    padding:20px 55px 20px 20px;

    border-radius:var(--radius-md);

    border:1px solid;

}

.contact-alert-icon{

    flex:0 0 42px;

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    font-size:18px;

}

.contact-alert strong{

    display:block;

    margin-bottom:5px;

    color:var(--title);

    font-size:15px;

}

.contact-alert p{

    margin:0;

    color:var(--text);

    font-size:14px;

    line-height:1.6;

}


/*==================================================
    SUCCESS
==================================================*/

.contact-alert-success{

    background:rgba(34,197,94,.07);

    border-color:rgba(34,197,94,.20);

}

.contact-alert-success .contact-alert-icon{

    background:rgba(34,197,94,.12);

    color:#16a34a;

}


/*==================================================
    ERROR
==================================================*/

.contact-alert-error{

    background:rgba(239,68,68,.07);

    border-color:rgba(239,68,68,.20);

}

.contact-alert-error .contact-alert-icon{

    background:rgba(239,68,68,.12);

    color:#dc2626;

}


/*==================================================
    CLOSE
==================================================*/

.contact-alert-close{

    position:absolute;

    top:15px;

    right:15px;

    width:32px;

    height:32px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:0;

    background:transparent;

    color:#98a2b3;

    cursor:pointer;

    border-radius:50%;

    transition:var(--transition);

}

.contact-alert-close:hover{

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

    color:var(--title);

}


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

@media(max-width:576px){

    .contact-alert{

        gap:12px;

        padding:16px 45px 16px 16px;

    }

    .contact-alert-icon{

        flex-basis:38px;

        width:38px;

        height:38px;

        font-size:16px;

    }

    .contact-alert strong{

        font-size:14px;

    }

    .contact-alert p{

        font-size:13px;

    }

}