/* CONTACT HERO - CENTERED CONTENT */

.contact-hero .about-hero-inner {
    width: min(1240px, calc(100% - 48px));
    margin: 0 auto;
}

.contact-hero .about-hero-copy {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.contact-hero .jizai-eyebrow {
    justify-content: center;
}

.contact-hero .about-hero-copy > p {
    margin-left: auto;
    margin-right: auto;
}


.contact-field p
{
    margin-bottom: 0px !important;
    margin-top: 0px !important;
}
.contact-field {
    margin-bottom: 0px !important;
}

.wpcf7 form .wpcf7-response-output {
    margin: 0em !important;
}

.wpcf7-spinner {
    display: none !important;
}



.contact-hero .about-hero-actions {
    justify-content: center;
}
/* =========================================================
   CONTACT HERO
   Uses the exact same design as About Us
========================================================= */

.contact-hero{
    position:relative;
    min-height:550px;

    display:flex;
    align-items:center;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 78% 25%,
            rgba(108,77,255,.24),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 75%,
            rgba(42,177,255,.16),
            transparent 30%
        ),
        linear-gradient(
            115deg,
            #04122f 0%,
            #071c45 48%,
            #0b1640 100%
        );
}


/* Grid background */

.contact-hero::before{
    content:"";

    position:absolute;
    inset:0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size:72px 72px;

    mask-image:
        linear-gradient(
            to right,
            black,
            transparent 90%
        );

    opacity:.45;

    pointer-events:none;
}


/* Circular background element */

.contact-hero::after{
    content:"";

    position:absolute;

    width:520px;
    height:520px;

    right:-160px;
    top:50%;

    transform:translateY(-50%);

    border:
        1px solid
        rgba(120,148,255,.16);

    border-radius:50%;

    box-shadow:
        0 0 0 70px rgba(94,115,255,.035),
        0 0 0 140px rgba(94,115,255,.02);

    pointer-events:none;
}


/* Content */

.contact-hero .about-hero-inner{
    position:relative;
    z-index:2;

    width:min(
        1240px,
        calc(100% - 48px)
    );

    margin:0 auto;
}


/* Text width */

.contact-hero .about-hero-copy{
    max-width:600px;
}


/* Eyebrow */

.contact-hero .jizai-eyebrow{
    color:#8ce9ec;
}


/* Heading */

.contact-hero h1{
    margin:18px 0 0;

    max-width:760px;

    color:#fff;

    font-size:
        clamp(
            48px,
            3vw,
            78px
        );

    line-height:1.08;

    font-weight:600;

    letter-spacing:-1.5px;
}


/* Highlight */

.contact-hero h1 span{
    color:#7e9cff;
}


/* Paragraph */

.contact-hero .about-hero-copy > p{
    max-width:580px;

    margin:28px 0 0;

    color:#b7c7d9;

    font-size:17px;

    line-height:1.75;
}


/* Buttons */

.contact-hero .about-hero-actions{
    display:flex;

    gap:14px;

    flex-wrap:wrap;

    margin-top:34px;
}


/* Secondary button */

.contact-hero .about-hero-secondary{
    display:inline-flex;

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

    min-height:52px;

    padding:0 26px;

    border-radius:12px;

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

    background:
        rgba(255,255,255,.07);

    color:#fff;

    font-weight:600;

    text-decoration:none;

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


.contact-hero .about-hero-secondary:hover{
    color:#fff;

    background:
        rgba(255,255,255,.13);

    border-color:
        rgba(255,255,255,.34);
}


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

@media(max-width:700px){

    .contact-hero{
        min-height:500px !important;
    }

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

    .contact-hero h1{
        letter-spacing:-1.8px;
    }

    .contact-hero .about-hero-copy > p{
        font-size:15px;
        line-height:1.7;
    }

}

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

.contact-page{
    background:#fff;
    color:#071d63;
}


/* =========================================================
   CONTACT OPTIONS
========================================================= */

.contact-options{
    padding:90px 0;

    background:#fff;
}

.contact-section-head{
    max-width:760px;

    margin:0 auto 42px;

    text-align:center;
}

.contact-section-head h2{
    margin:0 0 15px;

    color:#01195b;

    font-size:clamp(30px,3vw,42px);

    line-height:1.12;

    font-weight:600;

    letter-spacing:-1.2px;
}

.contact-section-head p{
    max-width:650px;

    margin:0 auto;

    color:#68788e;

    font-size:14px;

    line-height:1.75;
}

.contact-options-grid{
    display:grid;

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

    gap:18px;
}

.contact-option-card{
    position:relative;

    padding:32px;

    min-height:260px;

    border:1px solid #e2e8f1;

    border-radius:22px;

    background:#fff;

    overflow:hidden;

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

.contact-option-card::after{
    content:"";

    position:absolute;

    width:160px;
    height:160px;

    right:-85px;
    top:-85px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(167,0,245,.08),
            transparent 68%
        );
}

.contact-option-card:hover{
    transform:translateY(-6px);

    border-color:rgba(76,120,255,.25);

    box-shadow:
        0 25px 55px rgba(1,25,91,.08);
}

.contact-option-icon{
    position:relative;
    z-index:2;

    width:48px;
    height:48px;

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

    margin-bottom:25px;

    border-radius:14px;

    color:#4c78ff;

    background:
        linear-gradient(
            135deg,
            rgba(76,120,255,.11),
            rgba(167,0,245,.08)
        );
}

.contact-option-icon svg{
    width:23px;
    height:23px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.7;

    stroke-linecap:round;

    stroke-linejoin:round;
}

.contact-option-card h3{
    margin:0 0 10px;

    color:#071d63;

    font-size:20px;

    font-weight:600;
}

.contact-option-card p{
    margin:0;

    color:#718096;

    font-size:13px;

    line-height:1.7;
}

.contact-option-link{
    display:inline-flex;

    align-items:center;

    gap:7px;

    margin-top:20px;

    color:#4c78ff;

    font-size:12px;

    font-weight:600;

    text-decoration:none;
}

.contact-option-link span{
    transition:transform .25s ease;
}

.contact-option-link:hover span{
    transform:translateX(4px);
}


/* =========================================================
   MAIN CONTACT AREA
========================================================= */

.contact-main{
    padding:100px 0;

    background:#f6f8fc;
}

.contact-main-grid{
    display:grid;

    grid-template-columns:
        .82fr 1.18fr;

    gap:70px;

    align-items:start;
}


/* LEFT */

.contact-info{
    padding-top:12px;
}

.contact-info h2{
    max-width:550px;

    margin:0 0 20px;

    color:#01195b;

    font-size:clamp(32px,2.5vw,48px);

    line-height:1.08;

    /*letter-spacing:-1.5px;*/

    font-weight:600;
}

.contact-info > p{
    max-width:520px;

    margin:0;

    color:#68788e;

    font-size:14px;

    line-height:1.8;
}

.contact-details{
    margin-top:38px;

    display:flex;

    flex-direction:column;

    gap:18px;
}

.contact-detail{
    display:flex;

    align-items:flex-start;

    gap:14px;
}

.contact-detail-icon{
    flex:0 0 42px;

    width:42px;
    height:42px;

    display:flex;

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

    border-radius:12px;

    background:#fff;

    border:1px solid #e2e8f1;

    color:#4c78ff;
}

.contact-detail-icon svg{
    width:19px;
    height:19px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.7;

    stroke-linecap:round;

    stroke-linejoin:round;
}

.contact-detail-content strong{
    display:block;

    margin-bottom:3px;

    color:#071d63;

    font-size:13px;

    font-weight:600;
}

.contact-detail-content span,
.contact-detail-content a{
    color:#718096;

    font-size:12px;

    line-height:1.6;

    text-decoration:none;
}


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

.contact-form-box{
    position:relative;

    padding:42px;

    border-radius:26px;

    background:#fff;

    border:1px solid #e1e7f0;

    box-shadow:
        0 25px 65px rgba(1,25,91,.07);
}

.contact-form-box::before{
    content:"";

    position:absolute;

    width:230px;
    height:230px;

    right:-120px;
    top:-120px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(76,120,255,.09),
            transparent 68%
        );

    pointer-events:none;
}

.contact-form-head{
    position:relative;
    z-index:2;

    margin-bottom:10px;
}

.contact-form-head h3{
    margin:0 0 8px;

    color:#071d63;

    font-size:25px;

    font-weight:600;
}

.contact-form-head p{
    margin:0;

    color:#718096;

    font-size:12px;

    line-height:1.7;
}

.contact-form{
    position:relative;
    z-index:2;
}

.contact-form-row{
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:18px;
}

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

.contact-field label{
    display:block;

    margin-bottom:8px;

    color:#071d63;

    font-size:11px;

    font-weight:600;
}

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

    padding:13px 15px;

    border:1px solid #dfe5ee;

    border-radius:10px;

    background:#fbfcfe;

    color:#071d63;

    font-family:inherit;

    font-size:12px;

    outline:none;

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

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus{
    border-color:#6c89e8;

    background:#fff;

    box-shadow:
        0 0 0 3px rgba(76,120,255,.08);
}

.contact-field textarea{
    min-height:130px;

    resize:vertical;
}

.contact-form-submit{
    margin-top:5px;
}

.contact-form-submit button{
    border:0;

    cursor:pointer;

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:13px 22px;

    border-radius:9px;

    background:#01195b;

    color:#fff;

    font-family:inherit;

    font-size:12px;

    font-weight:600;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}

.contact-form-submit button:hover{
    transform:translateY(-2px);

    background:#071f69;

    box-shadow:
        0 12px 28px rgba(1,25,91,.18);
}


/* =========================================================
   WHY JIZAI
========================================================= */

.contact-why{
    padding:100px 0;

    background:#fff;
}

.contact-why-grid{
    display:grid;

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

    gap:70px;

    align-items:center;
}

.contact-why-copy h2{
    max-width:520px;

    margin:0 0 18px;

    color:#01195b;

    font-size:clamp(32px,3.5vw,48px);

    line-height:1.08;

    letter-spacing:-1.5px;

    font-weight:600;
}

.contact-why-copy p{
    max-width:500px;

    margin:0;

    color:#68788e;

    font-size:14px;

    line-height:1.8;
}

.contact-benefits{
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:16px;
}

.contact-benefit{
    padding:25px;

    border-radius:18px;

    background:#f7f9fd;

    border:1px solid #e5eaf2;
}

.contact-benefit-number{
    color:#4c78ff;

    font-size:11px;

    font-weight:700;

    letter-spacing:.1em;

    margin-bottom:18px;
}

.contact-benefit h3{
    margin:0 0 8px;

    color:#071d63;

    font-size:16px;

    font-weight:600;
}

.contact-benefit p{
    margin:0;

    color:#718096;

    font-size:12px;

    line-height:1.65;
}


/* =========================================================
   GLOBAL PRESENCE
========================================================= */

.contact-presence{
    padding:90px 0;

    background:#f6f8fc;
}

.contact-presence-grid{
    display:grid;

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

    gap:18px;
}

.contact-location{
    padding:28px;

    border-radius:20px;

    background:#fff;

    border:1px solid #e1e7f0;
}

.contact-location-label{
    margin-bottom:12px;

    color:#4c78ff;

    font-size:10px;

    font-weight:800;

    letter-spacing:.12em;
}

.contact-location h3{
    margin:0 0 8px;

    color:#071d63;

    font-size:20px;

    font-weight:600;
}

.contact-location p{
    margin:0;

    color:#718096;

    font-size:12px;

    line-height:1.7;
}


/* =========================================================
   FAQ
========================================================= */

.contact-faq{
    padding:100px 0;

    background:#fff;
}

.contact-faq-wrap{
    max-width:850px;

    margin:0 auto;
}

.contact-faq-item{
    border-top:1px solid #e2e7ef;
}

.contact-faq-item:last-child{
    border-bottom:1px solid #e2e7ef;
}

.contact-faq-item summary{
    position:relative;

    padding:22px 42px 22px 0;

    cursor:pointer;

    list-style:none;

    color:#071d63;

    font-size:15px;

    font-weight:600;
}

.contact-faq-item summary::-webkit-details-marker{
    display:none;
}

.contact-faq-item summary::after{
    content:"+";

    position:absolute;

    right:5px;
    top:18px;

    color:#4c78ff;

    font-size:22px;

    font-weight:400;

    transition:transform .2s ease;
}

.contact-faq-item[open] summary::after{
    transform:rotate(45deg);
}

.contact-faq-content{
    max-width:720px;

    padding:0 0 22px;

    color:#718096;

    font-size:13px;

    line-height:1.75;
}


/* =========================================================
   FINAL CTA
========================================================= */

.contact-cta{
    padding:90px 0;
}

.contact-cta-box{
    position:relative;

    overflow:hidden;

    padding:70px 60px;

    border-radius:28px;

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(167,0,245,.20),
            transparent 30%
        ),
        radial-gradient(
            circle at 10% 90%,
            rgba(76,120,255,.16),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #01195b,
            #081f69
        );

    text-align:center;

    color:#fff;
}

.contact-cta-box h2{
    max-width:700px;

    margin:0 auto 15px;

    color:#fff;

    font-size:clamp(32px,4vw,50px);

    line-height:1.08;

    letter-spacing:-1.5px;

    font-weight:600;
}

.contact-cta-box p{
    max-width:600px;

    margin:0 auto;

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

    font-size:14px;

    line-height:1.75;
}

.contact-cta-box .services-index-actions{
    justify-content:center;

    margin-top:28px;
}


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

@media(max-width:1000px){

    .contact-main-grid,
    .contact-why-grid{
        grid-template-columns:1fr;

        gap:50px;
    }

    .contact-options-grid,
    .contact-presence-grid{
        grid-template-columns:1fr 1fr;
    }

}


@media(max-width:700px){
    
    .contact-section-head{
        text-align:left !important;
    }

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

    .contact-hero-inner{
        padding:85px 0;
    }

    .contact-hero h1{
        font-size:40px;

        letter-spacing:-1.8px;
    }

    .contact-hero-copy{
        font-size:14px;
    }

    .contact-options,
    .contact-main,
    .contact-why,
    .contact-presence,
    .contact-faq{
        padding:70px 0;
    }

    .contact-options-grid,
    .contact-presence-grid,
    .contact-benefits{
        grid-template-columns:1fr;
    }

    .contact-form-box{
        padding:28px 22px;
    }

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

        gap:0;
    }

    .contact-cta{
        padding:70px 0;
    }

    .contact-cta-box{
        padding:50px 25px;
    }

}


/* =========================================================
   REVEAL ANIMATION
========================================================= */

.contact-page .reveal{
    opacity:0;

    transform:translateY(22px);

    transition:
        opacity .7s ease,
        transform .7s ease;
}

.contact-page .reveal.is-visible{
    opacity:1;

    transform:translateY(0);
}