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

.contact-hero{

    position:relative;

    min-height:720px;

    display:flex;

    align-items:center;

    overflow:hidden;

    color:#ffffff;

}



/* ======================================================
   BACKGROUND
====================================================== */

.contact-hero-background{

    position:absolute;

    inset:0;

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

    z-index:0;

}



.contact-hero .hero-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(7,18,35,.96),
        rgba(11,31,58,.88),
        rgba(11,31,58,.58)
    );

    z-index:1;

}



.contact-hero .container{

    position:relative;

    z-index:2;

}



/* ======================================================
   LAYOUT
====================================================== */

.contact-hero-wrapper{

    display:grid;

    grid-template-columns:1fr 470px;

    gap:70px;

    align-items:center;

    padding:90px 0;

}



/* ======================================================
   HERO CONTENT
====================================================== */

.contact-hero-content{

    max-width:720px;

}



.contact-hero .section-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    margin-bottom:25px;

    border-radius:50px;

    background:#e60000;

    color:#ffffff;

    font-size:14px;

    font-weight:700;

}



.contact-hero h1{

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

    line-height:1.15;

    font-weight:800;

    margin-bottom:25px;

    color:#ffffff;

}



.contact-hero h1 span{

    display:block;

    color:#e60000;

}



.contact-hero p{

    max-width:650px;

    color:#e2e8f0;

    font-size:18px;

    line-height:1.9;

    margin-bottom:40px;

}



/* ======================================================
   BUTTONS
====================================================== */

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}



.hero-buttons .btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:15px 32px;

    border-radius:8px;

    text-decoration:none;

    font-weight:700;

    transition:.35s ease;

}



.hero-buttons .btn-primary{

    background:#e60000;

    color:#ffffff;

}



.hero-buttons .btn-primary:hover{

    background:#c90000;

    transform:translateY(-4px);

}



.hero-buttons .btn-secondary{

    border:2px solid rgba(255,255,255,.9);

    color:#ffffff;

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

}



.hero-buttons .btn-secondary:hover{

    background:#ffffff;

    color:#0b1f3a;

}



/* ======================================================
   TRUST ITEMS
====================================================== */

.hero-trust{

    display:flex;

    gap:45px;

    flex-wrap:wrap;

    margin-top:55px;

}



.trust-item{

    display:flex;

    flex-direction:column;

}



.trust-item strong{

    font-size:34px;

    font-weight:800;

    color:#ffffff;

}



.trust-item span{

    color:#dbe4ef;

    font-size:14px;

}



/* ======================================================
   HERO IMAGE
====================================================== */

.contact-hero-image{

    position:relative;

}



.hero-image-card{

    background:#ffffff;

    padding:10px;

    border-radius:24px;

    overflow:hidden;

    box-shadow:
    0 25px 60px rgba(0,0,0,.35);

}



.hero-image-card img{

    width:100%;

    height:560px;

    object-fit:cover;

    border-radius:18px;

    transition:.5s ease;

}



.hero-image-card:hover img{

    transform:scale(1.05);

}



/* ======================================================
   FLOATING CARD
====================================================== */

.floating-card{

    position:absolute;

    left:-45px;

    bottom:35px;

    display:flex;

    align-items:center;

    gap:15px;

    background:#ffffff;

    padding:18px 22px;

    border-radius:16px;

    box-shadow:
    0 18px 45px rgba(11,31,58,.22);

}



.floating-icon{

    width:55px;

    height:55px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    background:#e60000;

    color:#ffffff;

    font-size:24px;

}



.floating-card strong{

    display:block;

    color:#0b1f3a;

    font-size:16px;

    font-weight:800;

}



.floating-card span{

    display:block;

    margin-top:4px;

    color:#64748b;

    font-size:13px;

}



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

@media(max-width:1200px){

    .contact-hero-wrapper{

        grid-template-columns:1fr;

        text-align:center;

    }

    .contact-hero-content{

        margin:auto;

    }

    .contact-hero-image{

        max-width:520px;

        margin:30px auto 0;

    }

    .hero-buttons,

    .hero-trust{

        justify-content:center;

    }

}



@media(max-width:768px){

    .contact-hero{

        min-height:auto;

    }

    .contact-hero-wrapper{

        padding:120px 20px 70px;

    }

    .contact-hero h1{

        font-size:36px;

    }

    .contact-hero p{

        font-size:16px;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .hero-buttons .btn{

        width:100%;

    }

    .hero-image-card img{

        height:360px;

    }

    .floating-card{

        position:relative;

        left:0;

        bottom:0;

        margin-top:20px;

        text-align:left;

    }

}



@media(max-width:480px){

    .contact-hero-wrapper{

        padding:110px 15px 60px;

    }

    .contact-hero h1{

        font-size:30px;

    }

    .contact-hero .section-tag{

        font-size:12px;

    }

    .hero-trust{

        flex-direction:column;

        align-items:center;

        gap:20px;

    }

    .hero-image-card img{

        height:280px;

    }

}

/* ======================================================
   CONTACT OVERVIEW
====================================================== */

.contact-overview{

    padding:110px 0;

    background:#f8fafc;

}



/* ======================================================
   LAYOUT
====================================================== */

.contact-overview-wrapper{

    display:grid;

    grid-template-columns:520px 1fr;

    gap:80px;

    align-items:center;

}


/* ======================================================
   CONTACT OVERVIEW IMAGE PREMIUM STYLE
====================================================== */

.overview-image{

    position:relative;

    width:100%;

    height:620px;

    overflow:hidden;

    border-radius:28px;

    box-shadow:
    0 25px 70px rgba(11,31,58,.15);

}



/* IMAGE */

.overview-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    display:block;

    border-radius:28px;

    transition:transform .6s ease;

}



/* HOVER EFFECT */

.overview-image:hover img{

    transform:scale(1.05);

}



/* PREMIUM OVERLAY */

.overview-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    180deg,
    transparent 60%,
    rgba(11,31,58,.35)
    );

    pointer-events:none;

}




/* ======================================================
   CONTENT
====================================================== */

.overview-content{

    max-width:700px;

}



.overview-content .section-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    margin-bottom:25px;

    border-radius:50px;

    background:#0b1f3a;

    color:#ffffff;

    font-size:14px;

    font-weight:700;

}



.overview-content .section-badge i{

    color:#e60000;

}



.overview-content .section-title{

    font-size:44px;

    line-height:1.25;

    font-weight:800;

    color:#0b1f3a;

    margin-bottom:25px;

}



.overview-content .section-title span{

    display:block;

    color:#e60000;

}



.section-description{

    color:#64748b;

    font-size:17px;

    line-height:1.9;

    margin-bottom:35px;

}



/* ======================================================
   FEATURES
====================================================== */

.overview-features{

    display:grid;

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

    gap:18px 25px;

    margin-bottom:40px;

}



.feature-item{

    display:flex;

    align-items:center;

    gap:12px;

    font-weight:600;

    color:#334155;

}



.feature-item i{

    color:#e60000;

    font-size:18px;

}



/* ======================================================
   BUTTONS
====================================================== */

.overview-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}



.overview-buttons .btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 32px;

    border-radius:8px;

    text-decoration:none;

    font-weight:700;

    transition:.35s ease;

}



.overview-buttons .btn-primary{

    background:#e60000;

    color:#ffffff;

}



.overview-buttons .btn-primary:hover{

    background:#c90000;

    transform:translateY(-4px);

}



.overview-buttons .btn-secondary{

    background:#ffffff;

    color:#0b1f3a;

    border:2px solid #0b1f3a;

}



.overview-buttons .btn-secondary:hover{

    background:#0b1f3a;

    color:#ffffff;

}



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

@media(max-width:1100px){

    .contact-overview-wrapper{

        grid-template-columns:1fr;

        text-align:center;

    }

     .overview-image{

        height:520px;

        max-width:600px;

        margin:auto;

    }

    .overview-content{

        margin:auto;

    }

    .overview-features{

        justify-items:center;

    }

    .overview-buttons{

        justify-content:center;

    }

}



@media(max-width:768px){

    .contact-overview{

        padding:80px 0;

    }

    .overview-content .section-title{

        font-size:34px;

    }

    .overview-image img{

        height:420px;

    }

    .overview-features{

        grid-template-columns:1fr;

    }

}



@media(max-width:480px){

    .overview-content .section-title{

        font-size:30px;

    }

    .section-description{

        font-size:16px;

    }

    .overview-buttons{

        flex-direction:column;

    }

    .overview-buttons .btn{

        width:100%;

    }

    .overview-image img{

        height:320px;

    }

}

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

.contact-information{

    padding:110px 0;

    background:#ffffff;

}



/* ======================================================
   HEADER
====================================================== */

.contact-information .section-header{

    text-align:center;

    max-width:750px;

    margin:0 auto 60px;

}



.contact-information .section-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:#0b1f3a;

    color:#ffffff;

    padding:10px 22px;

    border-radius:50px;

    font-size:14px;

    font-weight:700;

    margin-bottom:25px;

}



.contact-information .section-badge i{

    color:#e60000;

}



.contact-information .section-title{

    font-size:44px;

    font-weight:800;

    color:#0b1f3a;

    line-height:1.25;

    margin-bottom:20px;

}



.contact-information .section-title span{

    color:#e60000;

}



.contact-information .section-description{

    color:#64748b;

    font-size:17px;

    line-height:1.8;

}



/* ======================================================
   CONTACT CARDS PREMIUM DESIGN
====================================================== */


.contact-cards{

    display:grid;

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

    gap:30px;

}



/* CARD */

.contact-card{

    background:#ffffff;

    border-radius:22px;

    padding:32px;

    min-height:240px;

    border:1px solid #e5e7eb;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    transition:.35s ease;

    box-shadow:
    0 15px 40px rgba(11,31,58,.07);

}



.contact-card:hover{

    transform:translateY(-8px);

    border-color:#e60000;

    box-shadow:
    0 25px 55px rgba(11,31,58,.12);

}



/* HEADER */

.contact-card-header{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:25px;

}



.contact-card-header h3{

    margin:0;

    font-size:20px;

    font-weight:700;

    color:#0b1f3a;

}





/* ICON */

.contact-icon{

    width:65px;

    height:65px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:#0b1f3a;

    color:#ffffff;

    font-size:24px;

}



.contact-icon i{

    color:#ffffff;

}





/* BODY */

.contact-card-body{

    display:flex;

    flex-direction:column;

    gap:12px;

}



.contact-card-body p{

    margin:0;

    color:#64748b;

    line-height:1.8;

    font-size:16px;

}



.contact-card-body a{

    color:#334155;

    text-decoration:none;

    font-weight:600;

    transition:.3s ease;

}



.contact-card-body a:hover{

    color:#e60000;

}






/* ACTION BUTTON */

.contact-action{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:10px;

    color:#e60000 !important;

}





/* WHATSAPP FEATURE */

.featured-contact{

    background:
    linear-gradient(
    135deg,
    #0b1f3a,
    #162f55);

}



.featured-contact h3,

.featured-contact p{

    color:#ffffff;

}



.featured-contact .contact-icon{

    background:#e60000;

}



.whatsapp-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    width:max-content;

    margin-top:10px;

    padding:12px 22px;

    border-radius:8px;

    background:#e60000;

    color:#ffffff !important;

}





/* RESPONSIVE */


@media(max-width:1000px){

    .contact-cards{

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

    }

}



@media(max-width:650px){

    .contact-cards{

        grid-template-columns:1fr;

    }


    .contact-card{

        padding:25px;

    }

}

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

.contact-form-section{

    padding:110px 0;

    background:#f8fafc;

}



.contact-form-wrapper{

    display:grid;

    grid-template-columns:0.9fr 1.1fr;

    gap:70px;

    align-items:center;

}



/* LEFT CONTENT */

.contact-form-content .section-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    background:#0b1f3a;

    color:#ffffff;

    border-radius:50px;

    font-size:14px;

    font-weight:700;

    margin-bottom:25px;

}


.contact-form-content .section-badge i{

    color:#e60000;

}



.contact-form-content .section-title{

    font-size:44px;

    font-weight:800;

    color:#0b1f3a;

    line-height:1.25;

}



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

    display:block;

    color:#e60000;

}



.contact-form-content .section-description{

    margin:25px 0;

    color:#64748b;

    font-size:17px;

    line-height:1.8;

}



/* HIGHLIGHTS */

.form-highlights{

    display:flex;

    flex-direction:column;

    gap:18px;

}



.highlight-item{

    display:flex;

    align-items:center;

    gap:12px;

    color:#334155;

    font-weight:600;

}



.highlight-item i{

    color:#e60000;

}







/* FORM BOX */

.contact-form-box{

    background:#ffffff;

    padding:45px;

    border-radius:25px;

    box-shadow:

    0 25px 70px rgba(11,31,58,.12);

}



.form-row{

    display:grid;

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

    gap:20px;

}



.form-group{

    margin-bottom:22px;

}



.form-group label{

    display:block;

    margin-bottom:8px;

    font-size:14px;

    font-weight:700;

    color:#0b1f3a;

}



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

    width:100%;

    padding:15px 18px;

    border-radius:10px;

    border:1px solid #dbe3ef;

    outline:none;

    font-size:15px;

    font-family:Poppins,sans-serif;

    transition:.3s ease;

}



.form-group textarea{

    resize:none;

}



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

    border-color:#e60000;

    box-shadow:0 0 0 3px rgba(230,0,0,.08);

}





/* BUTTON */

.submit-button{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:16px;

    border:none;

    border-radius:10px;

    background:#e60000;

    color:#ffffff;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.35s ease;

}



.submit-button:hover{

    background:#0b1f3a;

    transform:translateY(-3px);

}







/* RESPONSIVE */

@media(max-width:1000px){

    .contact-form-wrapper{

        grid-template-columns:1fr;

    }


    .contact-form-content{

        text-align:center;

    }


    .form-highlights{

        align-items:center;

    }

}



@media(max-width:700px){

    .contact-form-section{

        padding:80px 0;

    }


    .contact-form-box{

        padding:25px;

    }


    .form-row{

        grid-template-columns:1fr;

    }


    .contact-form-content .section-title{

        font-size:32px;

    }

}

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


.contact-map-section{

    padding:110px 0;

    background:#ffffff;

}



.contact-map-wrapper{

    display:grid;

    grid-template-columns:1.2fr .8fr;

    gap:50px;

    align-items:center;

}



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


.map-container{

    overflow:hidden;

    border-radius:25px;

    height:450px;

    box-shadow:

    0 25px 60px rgba(11,31,58,.12);

}



.map-container iframe{

    width:100%;

    height:100%;

    display:block;

}







/* ======================================================
   LOCATION CARD
====================================================== */


.location-card{

    background:#0b1f3a;

    padding:45px;

    border-radius:25px;

    color:#ffffff;

    box-shadow:

    0 25px 70px rgba(11,31,58,.18);

}





.location-card .section-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 20px;

    border-radius:50px;

    background:#ffffff;

    color:#0b1f3a;

    font-size:14px;

    font-weight:700;

    margin-bottom:25px;

}



.location-card .section-badge i{

    color:#e60000;

}




.location-card h2{

    font-size:36px;

    line-height:1.3;

    margin-bottom:20px;

    font-weight:800;

}




.location-card p{

    color:#cbd5e1;

    line-height:1.8;

    font-size:16px;

    margin-bottom:30px;

}





/* DETAILS */

.location-details{

    display:flex;

    flex-direction:column;

    gap:22px;

}





.location-item{

    display:flex;

    align-items:flex-start;

    gap:18px;

}





.location-item i{

    width:45px;

    height:45px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    background:#e60000;

    color:#ffffff;

}





.location-item strong{

    display:block;

    color:#ffffff;

    margin-bottom:5px;

}



.location-item span{

    color:#cbd5e1;

    line-height:1.6;

}







/* BUTTON */


.map-button{

    margin-top:35px;

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:15px 30px;

    border-radius:10px;

    background:#e60000;

    color:#ffffff;

    text-decoration:none;

    font-weight:700;

    transition:.35s ease;

}



.map-button:hover{

    background:#ffffff;

    color:#0b1f3a;

    transform:translateY(-4px);

}







/* RESPONSIVE */


@media(max-width:1000px){


    .contact-map-wrapper{

        grid-template-columns:1fr;

    }


    .location-card{

        padding:35px;

    }


}




@media(max-width:600px){


    .contact-map-section{

        padding:80px 0;

    }


    .map-container{

        height:350px;

    }


    .location-card h2{

        font-size:30px;

    }


    .location-card{

        padding:25px;

    }


}

/* ======================================================
   CONTACT HOURS SECTION
====================================================== */


.contact-hours{

    padding:110px 0;

    background:#f8fafc;

}



.hours-wrapper{

    display:grid;

    grid-template-columns:1fr 450px;

    gap:80px;

    align-items:center;

}



/* LEFT CONTENT */

.hours-content .section-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    background:#0b1f3a;

    color:#ffffff;

    border-radius:50px;

    font-size:14px;

    font-weight:700;

    margin-bottom:25px;

}



.hours-content .section-badge i{

    color:#e60000;

}



.hours-content .section-title{

    font-size:44px;

    font-weight:800;

    color:#0b1f3a;

    line-height:1.25;

}



.hours-content .section-title span{

    display:block;

    color:#e60000;

}



.hours-content .section-description{

    margin:25px 0 35px;

    color:#64748b;

    font-size:17px;

    line-height:1.8;

}





/* FEATURES */

.support-features{

    display:flex;

    flex-direction:column;

    gap:18px;

}



.support-item{

    display:flex;

    align-items:center;

    gap:12px;

    font-weight:600;

    color:#334155;

}



.support-item i{

    color:#e60000;

}







/* HOURS CARD */

.hours-card{

    background:#0b1f3a;

    padding:40px;

    border-radius:25px;

    color:#ffffff;

    box-shadow:

    0 25px 70px rgba(11,31,58,.18);

}





.hours-card-header{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:35px;

}



.hours-icon{

    width:65px;

    height:65px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:18px;

    background:#e60000;

    font-size:25px;

}



.hours-card-header h3{

    margin:0;

    font-size:25px;

}







/* HOURS LIST */

.hours-list{

    display:flex;

    flex-direction:column;

    gap:0;

}



.hours-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

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

}



.hours-row span{

    color:#cbd5e1;

}



.hours-row strong{

    color:#ffffff;

    font-size:15px;

}








/* EMERGENCY */

.emergency-support{

    margin-top:30px;

    display:flex;

    gap:15px;

    align-items:center;

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

    padding:18px;

    border-radius:12px;

}



.emergency-support i{

    color:#e60000;

    font-size:25px;

}



.emergency-support strong{

    display:block;

    margin-bottom:5px;

}



.emergency-support a{

    color:#ffffff;

    text-decoration:none;

    font-weight:700;

}



.emergency-support a:hover{

    color:#e60000;

}







/* RESPONSIVE */

@media(max-width:1000px){

    .hours-wrapper{

        grid-template-columns:1fr;

        gap:50px;

    }


    .hours-content{

        text-align:center;

    }


    .support-features{

        align-items:center;

    }


}



@media(max-width:600px){

    .contact-hours{

        padding:80px 0;

    }


    .hours-content .section-title{

        font-size:32px;

    }


    .hours-card{

        padding:25px;

    }


    .hours-row{

        flex-direction:column;

        align-items:flex-start;

        gap:8px;

    }

}

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


.contact-faq{

    padding:110px 0;

    background:#ffffff;

}



/* HEADER */

.contact-faq .section-header{

    max-width:750px;

    text-align:center;

    margin:0 auto 60px;

}



.contact-faq .section-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:#0b1f3a;

    color:#ffffff;

    padding:10px 22px;

    border-radius:50px;

    font-size:14px;

    font-weight:700;

    margin-bottom:25px;

}



.contact-faq .section-badge i{

    color:#e60000;

}



.contact-faq .section-title{

    font-size:44px;

    font-weight:800;

    color:#0b1f3a;

}



.contact-faq .section-title span{

    display:block;

    color:#e60000;

}



.contact-faq .section-description{

    margin-top:20px;

    color:#64748b;

    line-height:1.8;

    font-size:17px;

}





/* FAQ CONTAINER */

.faq-wrapper{

    max-width:900px;

    margin:auto;

    display:flex;

    flex-direction:column;

    gap:18px;

}





/* FAQ ITEM */

.faq-item{

    background:#f8fafc;

    border-radius:16px;

    border:1px solid #e2e8f0;

    overflow:hidden;

    transition:.3s ease;

}







/* QUESTION */

.faq-question{

    width:100%;

    border:none;

    background:none;

    padding:25px 30px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    cursor:pointer;

    color:#0b1f3a;

    font-size:17px;

    font-weight:700;

    text-align:left;

}



.faq-question i{

    color:#e60000;

    transition:.3s ease;

}





/* ======================================================
   FAQ ANSWER ANIMATION
====================================================== */

.faq-answer{

    max-height:0;

    overflow:hidden;

    padding:0 30px;

    opacity:0;

    transition:
    max-height .4s ease,
    opacity .3s ease,
    padding .3s ease;

}



.faq-answer p{

    margin:0;

    color:#64748b;

    line-height:1.8;

}



/* OPEN ANSWER */

.faq-item.active .faq-answer{

    max-height:300px;

    padding:0 30px 25px;

    opacity:1;

}



.faq-item.active .faq-question i{

    transform:rotate(45deg);

}

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


.contact-cta{

    padding:100px 0;

    background:#f8fafc;

}





.cta-wrapper{

    position:relative;

    display:grid;

    grid-template-columns:1fr 420px;

    gap:60px;

    align-items:center;

    background:#0b1f3a;

    padding:60px;

    border-radius:30px;

    overflow:hidden;

}





/* DECORATION */

.cta-wrapper::before{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    right:-100px;

    top:-100px;

    background:rgba(230,0,0,.18);

    border-radius:50%;

}






/* CONTENT */

.cta-content{

    position:relative;

    z-index:2;

}



.cta-content .section-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    border-radius:50px;

    background:#ffffff;

    color:#0b1f3a;

    font-size:14px;

    font-weight:700;

    margin-bottom:25px;

}



.cta-content .section-badge i{

    color:#e60000;

}




.cta-content h2{

    color:#ffffff;

    font-size:42px;

    line-height:1.25;

    font-weight:800;

    margin-bottom:20px;

}



.cta-content h2 span{

    display:block;

    color:#e60000;

}



.cta-content p{

    color:#cbd5e1;

    font-size:17px;

    line-height:1.8;

    max-width:650px;

    margin-bottom:35px;

}







/* BUTTONS */

.cta-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}



.cta-primary,
.cta-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:15px 30px;

    border-radius:10px;

    text-decoration:none;

    font-weight:700;

    transition:.35s ease;

}



.cta-primary{

    background:#e60000;

    color:#ffffff;

}



.cta-primary:hover{

    background:#ffffff;

    color:#0b1f3a;

    transform:translateY(-4px);

}





.cta-secondary{

    background:#ffffff;

    color:#0b1f3a;

}



.cta-secondary:hover{

    background:#e60000;

    color:#ffffff;

    transform:translateY(-4px);

}







/* IMAGE */

.cta-image{

    position:relative;

    z-index:2;

}



.cta-image img{

    width:100%;

    height:360px;

    object-fit:cover;

    border-radius:22px;

    display:block;

    box-shadow:

    0 25px 60px rgba(0,0,0,.25);

}







/* RESPONSIVE */


@media(max-width:1000px){


    .cta-wrapper{

        grid-template-columns:1fr;

        padding:45px;

        text-align:center;

    }


    .cta-content p{

        margin-left:auto;

        margin-right:auto;

    }


    .cta-buttons{

        justify-content:center;

    }


    .cta-image{

        max-width:500px;

        margin:auto;

    }


}





@media(max-width:600px){


    .contact-cta{

        padding:70px 0;

    }


    .cta-wrapper{

        padding:30px 20px;

    }


    .cta-content h2{

        font-size:32px;

    }


    .cta-buttons{

        flex-direction:column;

    }


    .cta-primary,
    .cta-secondary{

        width:100%;

    }


    .cta-image img{

        height:280px;

    }


}

/* ======================================================
   PROFESSIONAL CONTACT SECTION TYPOGRAPHY
   Sean B Solutions
====================================================== */


.contact-section{

    background:#f8fafc;

    padding:110px 0;

}





/* MAIN HEADINGS */

.contact-info h2,
.contact-form h2{


    font-size:44px;

    line-height:1.25;

    font-weight:900;

    color:#0b1f3a;

    margin:20px 0 25px;


}





.contact-info h2 span,
.contact-form h2 span{


    display:block;

    color:#e60000;


}







/* DESCRIPTION TEXT */


.contact-info > p,
.contact-form > p{


    color:#334155;

    font-size:17px;

    line-height:1.8;

    font-weight:500;

    max-width:600px;

    margin-bottom:35px;


}







/* SECTION TAG */


.contact-section .section-tag{


    display:inline-flex;

    align-items:center;

    padding:10px 22px;

    border-radius:50px;

    background:#0b1f3a;

    color:#ffffff;

    font-size:13px;

    font-weight:800;

    letter-spacing:.5px;


}








/* CONTACT CARDS */


.contact-card{


    display:flex;

    align-items:center;

    gap:18px;

    padding:18px 20px;

    margin-bottom:15px;

    background:#ffffff;

    border-radius:14px;

    border:1px solid #e2e8f0;

    box-shadow:

    0 8px 25px rgba(15,23,42,.06);


    transition:.3s ease;


}





.contact-card:hover{


    transform:translateY(-4px);

    border-color:#e60000;


}






.contact-icon{


    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#0b1f3a;

    border-radius:50%;


}




.contact-icon i{


    color:#ffffff;

    font-size:20px;


}






.contact-card h4{


    color:#0b1f3a;

    font-size:17px;

    font-weight:800;

    margin-bottom:5px;


}





.contact-card p{


    color:#111827;

    font-size:15px;

    font-weight:600;

    margin:0;


}








/* RESPONSE BOX */


.response-box{


    display:flex;

    align-items:center;

    gap:18px;

    margin-top:30px;

    padding:22px;

    background:#0b1f3a;

    border-radius:16px;


}





.response-icon{


    width:55px;

    height:55px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#e60000;

    border-radius:50%;


}



.response-icon i{


    color:white;

    font-size:22px;


}




.response-box h4{


    color:#ffffff;

    font-size:18px;

    font-weight:800;

    margin-bottom:8px;


}




.response-box p{


    color:#e2e8f0;

    margin:0;

    font-size:15px;


}








/* SOCIAL ICONS */


.contact-socials a{


    width:45px;

    height:45px;

    display:inline-flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#0b1f3a;

    color:#ffffff;

    margin-right:8px;

    transition:.3s ease;


}




.contact-socials a:hover{


    background:#e60000;

    transform:translateY(-4px);


}








/* FORM AREA */


.contact-form{


    background:#ffffff;

    padding:45px;

    border-radius:24px;

    box-shadow:

    0 20px 60px rgba(15,23,42,.10);


}






.contact-form input,
.contact-form textarea{


    color:#111827;

    background:#ffffff;

    border:1px solid #cbd5e1;

    font-size:15px;

    font-weight:500;


}





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


    color:#64748b;


}







.contact-form textarea{


    min-height:150px;


}








/* SUBMIT BUTTON */


.contact-form button{


    background:#e60000;

    color:#ffffff;

    font-size:16px;

    font-weight:800;

    border:none;

    padding:16px 35px;

    border-radius:10px;

    cursor:pointer;

    transition:.3s ease;


}



.contact-form button:hover{


    background:#c90000;

    transform:translateY(-3px);


}








/* FORM SECURITY NOTE */


.form-note{


    margin-top:18px;

    color:#475569;

    font-size:14px;

    font-weight:600;


}







/* TRUST ITEMS */


.trust-item strong{


    color:#0b1f3a;

    font-size:17px;

    font-weight:800;


}




.trust-item span{


    color:#475569;

    font-size:14px;

    line-height:1.6;


}








/* MOBILE */


@media(max-width:768px){


.contact-info h2,
.contact-form h2{


    font-size:32px;


}



.contact-form{


    padding:25px;


}



}