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

.contact-hero{
    background:#fff;
    padding:64px 0 96px;
}

.contact-hero-container{
    max-width:1140px;
    width:calc(100% - 48px);
    margin:0 auto;

    display:grid;
    grid-template-columns:430px 520px;
    column-gap:60px;
    align-items:start;
}

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

.contact-intro{
    grid-column:1 / -1;
    max-width:700px;
    margin-bottom:40px;
}

.contact-intro .contact-label{
    margin-bottom:8px;
}

.contact-intro .contact-title{
    margin-bottom:18px;
}

.contact-intro .contact-description{
    margin-bottom:0;
}

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

.contact-hero-left{
    width:430px;
    grid-column:1;
}

.contact-label{
    margin:0 0 8px;

    color:#F58220;

    font-family:Poppins,sans-serif;
    font-size:12px;
    font-weight:700;

    letter-spacing:.08em;
    text-transform:uppercase;
}

.contact-title{
    margin:0 0 18px;

    color:#202F78;

    font-family:Poppins,sans-serif;
    font-size:56px;
    font-weight:700;

    line-height:1.05;
    letter-spacing:-2px;
}

.contact-description{
    margin:0 0 34px;

    color:#55597A;

    font-size:12px;
    line-height:1.75;

    max-width:410px;
}

/* ==========================================================
   CONTACT CARDS
========================================================== */

.contact-details{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.contact-card{
    display:flex;
    align-items:center;
    gap:18px;

    padding:18px 20px;

    background:#fff;

    border:1px solid #E6E6E0;
    border-radius:22px;

    box-shadow:
        0 2px 8px rgba(15,23,42,.04),
        0 8px 24px rgba(15,23,42,.05);
}

.contact-icon{
    width:46px;
    height:46px;

    flex:0 0 46px;

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

    border-radius:50%;

    background:#FFF3E5;

    font-size:20px;
}

.contact-info{
    display:flex;
    flex-direction:column;
}

.contact-card-label{
    margin-bottom:3px;

    color:#7B8095;

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

    letter-spacing:.08em;
    text-transform:uppercase;
}

.contact-info strong{
    color:#202F78;

    font-size:16px;
    font-weight:700;
    line-height:1.4;
}

/* Clickable links */
.contact-info a,
.contact-info a:link,
.contact-info a:visited{
    color:#202F78;
    text-decoration:none !important;
    font-weight:700;
}

.contact-info a:hover{
    color:#F58220;
    text-decoration:none !important;
}

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

.contact-form-wrap{
    width:620px;
    grid-column:2;
    display:flex;
    justify-content:flex-start;
    align-items:flex-start;
}

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

.contact-form-card{
    width:520px;
    box-sizing:border-box;
    background:#fff;
    border-radius:22px;
    padding:28px;
    box-shadow:
        0 15px 40px rgba(15,23,42,.12);
    display:block;
    visibility:visible;
    opacity:1;
}

.contact-form-header h3{
    margin:0 0 6px;
    color:#202F78;
    font-size:18px;
    font-weight:700;
}

.contact-form-header p{
    margin:0 0 24px;
    color:#7B8095;
    font-size:13px;
}

.contact-form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.contact-field{
    margin-bottom:16px;
}

.contact-field label,
.contact-radio legend{
    display:block;
    margin-bottom:8px;
    color:#202F78;
    font-size:13px;
    font-weight:700;
}

.contact-field input,
.contact-field select,
.contact-field textarea{
    width:100%;
    border:1px solid #D9DDEA;
    border-radius:12px;
    padding:14px;
    font-size:14px;
    color:#202F78;
    background:#fff;
}

.contact-field textarea{
    height:120px;
    resize:none;
}

.contact-radio{
    border:0;
    padding:0;
    margin:8px 0 20px;
}

.contact-radio label{
    margin-right:18px;
    font-size:14px;
    color:#202F78;
}

.contact-submit{
    width:100%;
    border:0;
    border-radius:30px;
    padding:16px;
    background:#FF9228;
    color:#202F78;
    font-weight:700;
    cursor:pointer;
}

.contact-form-note{
    text-align:center;
    margin:14px 0 0;
    color:#7B8095;
    font-size:11px;
}

/* FluentForm overrides */
.ff-default{
    margin:0 !important;
}

.fluentform{
    margin:0 !important;
}

.ff-el-group{
    margin-bottom:16px !important;
}

.ff-el-input--label label{
    color:#202F78 !important;
    font-size:13px !important;
    font-weight:700 !important;
}

/* ==========================================================
   ICON SVG
========================================================== */

.contact-icon svg{
    width:46px;
    height:46px;
    display:block;
}

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

.contact-map{
    margin-top:16px;
    width:100%;
}

.contact-map iframe{
    display:block;
    width:100%;
    height:260px;

    border:1px solid #E6E6E0;
    border-radius:22px;

    box-shadow:
        0 2px 8px rgba(15,23,42,.04),
        0 8px 24px rgba(15,23,42,.05);
}

/* ==========================================================
   BADGES
========================================================== */

.contact-badges{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:12px;
    margin-top:20px;
}

.contact-badge{
    min-width:0;
    padding:14px;
    background:#fff;
    border:1px solid #E6E6E0;
    border-radius:14px;
    display:flex;
    align-items:center;
    gap:8px;
    width:220px;
}

.contact-badge span{
    color:#F58220;
    font-size:14px;
}

.contact-badge strong{
    display:block;
    color:#202F78;
    font-size:10px;
    line-height:1.2;
}

.contact-badge small{
    color:#7B8095;
    font-size:14px;
}

.stars{
    letter-spacing:1px;
}

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

@media (max-width:1024px){

    .contact-hero-container{
        grid-template-columns:1fr;
        gap:40px;
        max-width:560px;
    }

    .contact-hero-left{
        width:100%;
        grid-column:1;
    }

    .contact-form-wrap{
        width:100%;
        grid-column:1;
        justify-content:flex-start;
    }

    .contact-form-card{
        width:100%;
    }

    .contact-title{
        font-size:46px;
    }

    .contact-description{
        max-width:100%;
    }

    .contact-badges{
        grid-template-columns:repeat(5,1fr);
        gap:12px;
    }

    .contact-intro{
        max-width:100%;
        margin-bottom:32px;
    }

}

@media (max-width:768px){

    .contact-hero{
        padding:48px 0 64px;
    }

    .contact-hero-container{
        width:calc(100% - 32px);
        max-width:100%;
    }

    .contact-title{
        font-size:34px;
        letter-spacing:-1px;
    }

    .contact-description{
        font-size:15px;
        margin-bottom:24px;
    }

    .contact-card{
        padding:16px;
        gap:14px;
    }

    .contact-icon{
        width:40px;
        height:40px;
        flex:0 0 40px;
        font-size:18px;
    }

    .contact-info strong{
        font-size:15px;
    }

    .contact-badges{
        grid-template-columns:repeat(3,1fr);
        gap:10px;
    }

    .contact-badge{
        width:100%;
        padding:12px;
    }

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

    .contact-form-card{
        padding:20px;
    }

    .contact-intro{
        margin-bottom:24px;
    }

    .contact-map iframe{
        height:220px;
    }

    .contact-form-wrap{
        padding:0;
    }

}

@media (max-width:480px){

    .contact-hero{
        padding:40px 0 48px;
    }

    .contact-hero-container{
        width:calc(100% - 24px);
        gap:32px;
    }

    .contact-title{
        font-size:28px;
        letter-spacing:-0.5px;
    }

    .contact-description{
        font-size:14px;
        margin-bottom:20px;
    }

    .contact-badges{
        grid-template-columns:repeat(2,1fr);
        gap:8px;
    }

    .contact-badge{
        padding:10px;
        gap:6px;
        flex-direction:column;
        align-items:flex-start;
        width:100%;
    }

    .contact-badge span{
        font-size:12px;
    }

    .contact-badge strong{
        font-size:9px;
    }

    .contact-badge small{
        font-size:12px;
    }

    .contact-card{
        padding:14px;
        gap:12px;
        border-radius:18px;
    }

    .contact-icon{
        width:36px;
        height:36px;
        flex:0 0 36px;
    }

    .contact-icon svg{
        width:36px;
        height:36px;
    }

    .contact-info strong{
        font-size:14px;
    }

    .contact-form-card{
        padding:16px;
        border-radius:18px;
    }

    .contact-form-header h3{
        font-size:16px;
    }

    .contact-form-header p{
        font-size:12px;
        margin:4px 0 16px;
    }

    .contact-field label{
        font-size:12px;
    }

    .contact-field input,
    .contact-field select,
    .contact-field textarea{
        padding:10px 12px;
        font-size:13px;
        border-radius:10px;
    }

    .contact-field textarea{
        height:90px;
    }

    .contact-submit{
        padding:14px;
        font-size:14px;
    }

    .contact-map iframe{
        height:180px;
        border-radius:18px;
    }

    .contact-form-note{
        font-size:10px;
    }

    .contact-form-wrap{
        padding:0;
    }

}

/* ==========================================================
   CONTACT FAQ SECTION
========================================================== */

.contact-faq-section{
    background:#fff;
    padding:64px 0 80px;
}


/* Header */

.contact-faq-section .contact-faq-label{
    margin:0 0 10px;

    color:#F58220;

    font-family:Poppins,sans-serif;
    font-size:12px;
    font-weight:700;

    letter-spacing:.08em;
    text-transform:uppercase;
}


.contact-faq-section .contact-faq-title{
    margin:0;

    color:#202F78;

    font-family:Poppins,sans-serif;
    font-size:42px;
    font-weight:700;

    line-height:1.15;
    letter-spacing:-1px;
}



/* FAQ spacing */

.contact-faq-section .contact-faq-item{
    background:#fff;

    border:1px solid #E6E6E0;
    border-radius:22px;

    padding:24px;

    box-shadow:
        0 2px 8px rgba(15,23,42,.04),
        0 8px 24px rgba(15,23,42,.05);

    margin-bottom:16px;
}



/* Question */

.contact-faq-section .contact-faq-question{
    margin:0 0 10px;

    color:#202F78;

    font-family:Poppins,sans-serif;

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

    line-height:1.4;
}



/* Answer */

.contact-faq-section .contact-faq-answer{

    margin:0;

    color:#55597A;

    font-size:15px;

    line-height:1.75;
}


/* Mobile */

@media(max-width:768px){

    .contact-faq-section{
        padding:48px 0 60px;
    }


    .contact-faq-section .contact-faq-title{
        font-size:34px;
    }


    .contact-faq-section .contact-faq-item{
        padding:20px;
        border-radius:18px;
    }


    .contact-faq-section .contact-faq-question{
        font-size:16px;
    }

}

@media(max-width:480px){

    .contact-faq-section{
        padding:40px 0 48px;
    }

    .contact-faq-section .contact-faq-title{
        font-size:28px;
    }

    .contact-faq-section .contact-faq-item{
        padding:16px;
        border-radius:16px;
    }

    .contact-faq-section .contact-faq-question{
        font-size:15px;
    }

    .contact-faq-section .contact-faq-answer{
        font-size:13px;
        line-height:1.6;
    }

}

.contact-faq-section{
    padding:50px 0 90px;
}

/* ==========================================================
   FAQ TIGHTER SPACING - OVERRIDES
========================================================== */

/* FAQ tighter heading/content spacing */

.contact-faq-section .contact-faq-item{
    padding:20px 24px;
}


.contact-faq-section .contact-faq-question{
    margin-bottom:6px;
}


.contact-faq-section .contact-faq-answer{
    line-height:1.6;
}

/* Fix Spectra FAQ flex spacing */

.contact-faq-section .contact-faq-item{
    gap:0 !important;
}


.contact-faq-section .contact-faq-question{
    margin:0 0 6px !important;
}


.contact-faq-section .contact-faq-answer{
    margin:0 !important;
}

/* Mobile FAQ Fix */

@media (max-width:768px){

    .contact-faq-section .wp-block-group.is-nowrap{
        flex-wrap:wrap !important;
        width:100% !important;
        max-width:100% !important;
    }

    .contact-faq-section .contact-faq-list{
        width:100% !important;
        max-width:100% !important;
        padding:0 !important;
        margin:0 !important;
    }

    .contact-faq-section .spectra-list-item{
        width:100% !important;
        margin:0 0 16px !important;
    }

    .contact-faq-section .contact-faq-item{
        width:100% !important;
        display:block !important;
        box-sizing:border-box;
    }

}