/* =====================================
   CONTACT PAGE
===================================== */


/* =====================================
   CONTACT BANNER
===================================== */

.contact-banner{

    position:relative;

    min-height:420px;

    display:flex;

    align-items:center;

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

}

.contact-banner-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(6,58,89,.94),
        rgba(6,58,89,.60)
    );

}

.contact-banner .container{

    position:relative;

    z-index:2;

}

.contact-banner-content{

    max-width:760px;

    color:#fff;

}

.contact-banner-content .section-subtitle{

    color:#afc945;

}

.contact-banner-content h1{

    font-size:3.8rem;

    line-height:1.15;

    color:#fff;

    margin:15px 0 20px;

}

.contact-banner-content p{

    max-width:650px;

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

    font-size:1.1rem;

    line-height:1.8;

}


/* =====================================
   CONTACT INTRO
===================================== */

.contact-intro{

    padding:110px 0;

    background:#fff;

}

.contact-intro-content{

    max-width:820px;

    margin:auto;

    text-align:center;

}

.contact-intro-content h2{

    color:#063a59;

    font-size:2.8rem;

    margin:15px 0 25px;

}

.contact-intro-content p{

    color:#666;

    line-height:1.9;

    margin-bottom:15px;

}


/* =====================================
   CONTACT MAIN SECTION
===================================== */

.contact-section{

    padding:110px 0;

    background:#f5f8f9;

}

.contact-layout{

    display:grid;

    grid-template-columns:
    .9fr 1.1fr;

    box-shadow:
    0 15px 50px rgba(0,0,0,.08);

}


/* =====================================
   CONTACT INFORMATION
===================================== */

.contact-information{

    position:relative;

    padding:70px 60px;

    background:
    linear-gradient(
        135deg,
        #063a59,
        #0e7d9f
    );

    color:#fff;

    overflow:hidden;

}

.contact-information::before{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    border:60px solid rgba(255,255,255,.03);

    border-radius:50%;

    top:-180px;

    right:-150px;

}

.contact-information::after{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    border:50px solid rgba(255,255,255,.03);

    border-radius:50%;

    bottom:-180px;

    left:-130px;

}

.contact-information > *{

    position:relative;

    z-index:2;

}

.contact-label{

    display:block;

    color:#afc945;

    font-size:.8rem;

    font-weight:700;

    letter-spacing:1.5px;

    margin-bottom:15px;

}

.contact-information h2{

    color:#fff;

    font-size:2.5rem;

    line-height:1.25;

    margin-bottom:20px;

}

.contact-information > p{

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

    line-height:1.8;

    margin-bottom:40px;

}


/* =====================================
   CONTACT DETAILS
===================================== */

.contact-detail{

    display:flex;

    align-items:flex-start;

    gap:18px;

    margin-bottom:28px;

}

.contact-icon{

    width:50px;

    height:50px;

    min-width:50px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(175,201,69,.12);

    border:1px solid rgba(175,201,69,.25);

    color:#afc945;

    font-size:1.1rem;

    border-radius:6px;

}

.contact-detail span{

    display:block;

    color:#afc945;

    font-size:.75rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.8px;

    margin-bottom:6px;

}

.contact-detail a{

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:.3s ease;

}

.contact-detail a:hover{

    color:#afc945;

}

.contact-detail p{

    margin:0;

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

    line-height:1.7;

}


/* =====================================
   OFFICE HOURS
===================================== */

.office-hours{

    margin-top:45px;

    padding-top:30px;

    border-top:
    1px solid rgba(255,255,255,.15);

}

.office-hours h4{

    color:#fff;

    font-size:1.1rem;

    margin-bottom:18px;

}

.office-hours div{

    display:flex;

    justify-content:space-between;

    gap:20px;

    padding:10px 0;

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

    font-size:.9rem;

}

.office-hours strong{

    color:#afc945;

}


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

.contact-form-wrapper{

    padding:70px 60px;

    background:#fff;

}

.form-heading{

    margin-bottom:35px;

}

.form-heading h2{

    color:#063a59;

    font-size:2.3rem;

    margin:12px 0 15px;

}

.form-heading p{

    color:#666;

    line-height:1.8;

}


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

.form-row{

    display:grid;

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

    gap:20px;

}


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

.form-group{

    margin-bottom:22px;

}

.form-group label{

    display:block;

    color:#063a59;

    font-size:.85rem;

    font-weight:700;

    margin-bottom:8px;

}

.form-group input,
.form-group select,
.form-group textarea{

    width:100%;

    padding:14px 16px;

    border:
    1px solid #dfe5e7;

    background:#fff;

    color:#063a59;

    font-family:inherit;

    font-size:.9rem;

    outline:none;

    border-radius:4px;

    transition:.3s ease;

}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{

    border-color:#afc945;

    box-shadow:
    0 0 0 3px rgba(175,201,69,.12);

}

.form-group textarea{

    resize:vertical;

    min-height:150px;

}

.form-group input::placeholder,
.form-group textarea::placeholder{

    color:#a5afb4;

}


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

.form-submit{

    display:inline-flex;

    align-items:center;

    gap:12px;

    border:none;

    cursor:pointer;

    padding:15px 28px;

}

.form-submit i{

    transition:.3s ease;

}

.form-submit:hover i{

    transform:translateX(5px);

}


/* =====================================
   MAP SECTION
===================================== */

.map-section{

    padding:110px 0 0;

    background:#fff;

}

.map-heading{

    text-align:center;

    max-width:700px;

    margin:
    0 auto 50px;

}

.map-heading h2{

    color:#063a59;

    font-size:2.7rem;

    margin-top:15px;

}

.contact-map{

    width:100%;

    height:500px;

    overflow:hidden;

}

.contact-map iframe{

    width:100%;

    height:100%;

    border:0;

    display:block;

}


/* =====================================
   CONTACT CTA
===================================== */

.contact-cta{

    padding:55px 0;

    background:#063a59;

}

.contact-cta-content{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

}

.contact-cta-content > div > span{

    display:block;

    color:#afc945;

    font-size:.8rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:8px;

}

.contact-cta-content h2{

    color:#fff;

    font-size:2rem;

    margin:0;

}

.contact-cta .btn-primary{

    display:inline-flex;

    align-items:center;

    gap:10px;

    white-space:nowrap;

}

.contact-cta .btn-primary i{

    transition:.3s ease;

}

.contact-cta .btn-primary:hover i{

    transform:translateX(5px);

}

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

.form-message{

    margin-bottom:20px;

}

.form-success,
.form-error{

    display:flex;

    align-items:flex-start;

    gap:15px;

    padding:18px 20px;

    border-radius:5px;

    animation:formMessageFade .4s ease;

}

.form-success{

    background:
    rgba(119,164,56,.10);

    border-left:
    4px solid #77a438;

    color:#245b2f;

}

.form-error{

    background:
    rgba(220,53,69,.08);

    border-left:
    4px solid #dc3545;

    color:#842029;

}

.form-success i{

    color:#77a438;

    font-size:1.4rem;

    margin-top:2px;

}

.form-error i{

    color:#dc3545;

    font-size:1.4rem;

    margin-top:2px;

}

.form-success strong,
.form-error strong{

    display:block;

    margin-bottom:5px;

}

.form-success p,
.form-error p{

    margin:0;

    font-size:.9rem;

    line-height:1.6;

}


/* SUBMIT BUTTON LOADING STATE */

.form-submit:disabled{

    opacity:.7;

    cursor:not-allowed;

}


/* MESSAGE ANIMATION */

@keyframes formMessageFade{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}