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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Inter',sans-serif;
    background:#040b17;
    color:#fff;
    overflow-x:hidden;

}

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

.hero-header{

    background:#040b17;

    padding:90px 20px 50px;

}

.hero-content{

    max-width:900px;

    margin:auto;

    text-align:center;

}

/*=========================================================
                HERO VIDEO
=========================================================*/

.contact-hero{

    position:relative;

    width:90%;

    max-width:1400px;

    height:700px;

    margin:0 auto 90px;

    border-radius:30px;

    overflow:hidden;

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

}

.contact-hero video{

    width:100%;

    height:100%;

    object-fit:cover;

}

.hero-overlay{

    position:absolute;

    inset:0;

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

}



.hero-tag{

    display:inline-block;

    padding:12px 28px;

    border-radius:40px;

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

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

    backdrop-filter:blur(20px);

    color:#23d3ff;

    letter-spacing:2px;

    font-size:13px;

    margin-bottom:28px;

}

.hero-content h1{

    font-size:72px;

    line-height:1.08;

    font-weight:800;

    margin-bottom:28px;

}



.hero-content p{

    max-width:720px;

    margin:auto;

    color:#d4deeb;

    font-size:21px;

    line-height:1.8;

}

.hero-buttons{

    margin-top:50px;

    display:flex;

    justify-content:center;

}

/* ONLY ONE BUTTON */

.primary-btn{

    display:inline-flex;

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

    padding:18px 48px;

    border-radius:60px;

    text-decoration:none;

    color:#fff;

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

    background:
    linear-gradient(
    90deg,
    #2b7dff,
    #19cfff);

    transition:.35s;

}

.primary-btn:hover{

    transform:translateY(-5px);

    box-shadow:
    0 18px 45px
    rgba(22,183,255,.45);

}

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

.contact-info{

    width:90%;
    max-width:1450px;

    margin:110px auto;

    display:grid;

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

    gap:30px;

}

.contact-card{

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

    border:

    1px solid rgba(255,255,255,.08);

    border-radius:24px;

    padding:42px 30px;

    text-align:center;

    backdrop-filter:blur(22px);

    transition:.35s;

}

.contact-card:hover{

    transform:translateY(-10px);

    border-color:#20d2ff;

    box-shadow:

    0 25px 70px

    rgba(15,165,255,.18);

}

.contact-card i{

    font-size:46px;

    color:#20d2ff;

    margin-bottom:24px;

}

.contact-card h3{

    font-size:22px;

    margin-bottom:15px;

}

.contact-card p{

    color:#b8c8dc;

    line-height:1.8;

}

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

.contact-wrapper{

    width:90%;
    max-width:1450px;

    margin:20px auto 120px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.contact-left h2{

    font-size:48px;

    margin-bottom:18px;

    font-weight:800;

}

.contact-left p{

    color:#b7c8dc;

    line-height:1.9;

    margin-bottom:40px;

}

.contact-left form{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.contact-left input,
.contact-left textarea{

    width:100%;

    padding:18px 22px;

    border-radius:16px;

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

    background:#081626;

    color:#fff;

    font-size:16px;

    outline:none;

    transition:.3s;

}

.contact-left input:focus,
.contact-left textarea:focus{

    border-color:#20d2ff;

    box-shadow:
    0 0 0 3px rgba(32,210,255,.15);

}

.contact-left textarea{

    resize:none;

    min-height:180px;

}

.contact-left button{

    padding:18px;

    border:none;

    border-radius:16px;

    cursor:pointer;

    color:#fff;

    font-size:18px;

    font-weight:700;

    background:
    linear-gradient(
    90deg,
    #2d7dff,
    #18cfff);

    transition:.35s;

}

.contact-left button:hover{

    transform:translateY(-4px);

    box-shadow:
    0 18px 40px rgba(24,180,255,.35);

}

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

.contact-right{

    width:100%;
    height:100%;

}

.map-box{

    width:100%;

    height:100%;

    min-height:650px;

    overflow:hidden;

    border-radius:28px;

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

    background:#081626;

}

.map-box iframe{

    width:100%;

    height:100%;

    border:none;

}

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

.contact-cta{

    width:90%;
    max-width:1400px;

    margin:120px auto;

    padding:90px 60px;

    border-radius:32px;

    text-align:center;

    position:relative;

    overflow:hidden;

    background:
    linear-gradient(
    135deg,
    #173765 0%,
    #0b1830 100%);

    border:1px solid rgba(76,173,255,.18);

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

}

.contact-cta h2{

    font-size:48px;

    margin-bottom:22px;

}

.contact-cta p{

    max-width:760px;

    margin:auto;

    color:#c9d5e6;

    line-height:1.9;

}

.cta-buttons{

    margin-top:45px;

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.cta-buttons a{

    min-width:210px;

}

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

.faq-preview{

    padding:70px 0;

}

.faq-preview h2{

    text-align:center;

    margin-bottom:12px;

}

.faq-subtitle{

    text-align:center;

    color:#9fb3c8;

    max-width:650px;

    margin:0 auto 40px;

}

.faq-item{

    max-width:1050px;

    margin:0 auto 14px;

    background:#101a2a;

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

    border-radius:14px;

    overflow:hidden;

    transition:.25s;

}

.faq-item:hover{

    border-color:#22d3ee;

}

.faq-question{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:transparent;

    border:none;

    color:#fff;

    font-size:20px;

    font-weight:700;

    padding:22px 24px;

    cursor:pointer;

    text-align:left;

}

.faq-icon{

    font-size:28px;

    color:#22d3ee;

    transition:.25s;

    flex-shrink:0;

}

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .35s ease;

}

.faq-answer p{

    padding:0 24px 22px;

    color:#b7c6dd;

    line-height:1.8;

    font-size:15px;

    margin:0;

}

.faq-item.active .faq-answer{

    max-height:250px;

}

.faq-item.active .faq-icon{

    transform:rotate(45deg);

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

@media(max-width:1200px){

    .contact-info{

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

    }

    .contact-wrapper{

        grid-template-columns:1fr;

        gap:60px;

    }

    .map-box{

        min-height:550px;

    }

}

@media(max-width:992px){

    .contact-hero{

        min-height:780px;

    }

    .hero-content h1{

        font-size:54px;

    }

    .hero-content p{

        font-size:19px;

    }

    .contact-left h2{

        font-size:40px;

    }

    .contact-cta{

        padding:70px 40px;

    }

    .contact-cta h2{

        font-size:40px;

    }

}

@media(max-width:768px){

    .contact-hero{

        min-height:700px;

        padding:40px 20px;

    }

    .hero-tag{

        font-size:12px;

        padding:10px 20px;

    }

    .hero-content h1{

        font-size:40px;

        line-height:1.2;

    }

    .hero-content p{

        font-size:17px;

        line-height:1.8;

    }

    .hero-buttons{

        width:100%;

    }

    .primary-btn{

        width:100%;

        max-width:320px;

    }

    .contact-info{

        grid-template-columns:1fr;

        gap:25px;

        margin:80px auto;

    }

    .contact-card{

        padding:35px 25px;

    }

    .contact-wrapper{

        width:92%;

        gap:45px;

        margin-bottom:80px;

    }

    .contact-left h2{

        font-size:34px;

    }

    .contact-left p{

        font-size:16px;

    }

    .contact-left input,
    .contact-left textarea{

        font-size:15px;

    }

    .contact-left button{

        font-size:16px;

    }

    .map-box{

        min-height:420px;

    }

    .contact-cta{

        margin:90px auto;

        padding:55px 25px;

    }

    .contact-cta h2{

        font-size:32px;

    }

    .contact-cta p{

        font-size:16px;

    }

    .cta-buttons{

        flex-direction:column;

        align-items:center;

    }

    .cta-buttons a{

        width:100%;

        max-width:320px;

    }

    .faq-preview{

        margin:90px auto;

    }

    .faq-preview h2{

        font-size:34px;

    }

    .faq-item{

        padding:24px;

    }

    .faq-item h4{

        font-size:18px;

    }

}

@media(max-width:480px){

    .hero-content h1{

        font-size:32px;

    }

    .hero-content p{

        font-size:15px;

    }

    .contact-left h2{

        font-size:28px;

    }

    .contact-cta h2{

        font-size:28px;

    }

    .faq-preview h2{

        font-size:28px;

    }

}

/*=========================================================
                    PREMIUM EFFECTS
=========================================================*/

.contact-card,
.map-box,
.contact-left input,
.contact-left textarea,
.contact-left button,
.primary-btn,
.faq-item{

    transition:all .35s ease;

}

.contact-card:hover{

    transform:translateY(-10px);

}

.primary-btn:hover{

    transform:translateY(-5px);

}

.contact-left button:hover{

    transform:translateY(-5px);

}

.faq-item:hover{

    background:#0a1b2e;

}

/*=========================================================
                SECTION SPACING
=========================================================*/

section{

    position:relative;

    z-index:2;

}

.contact-hero{

    z-index:1;

}

.contact-info,
.contact-wrapper,
.contact-cta,
.faq-preview{

    position:relative;

    z-index:5;

}

/*=========================================================
                    SCROLLBAR
=========================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#071321;

}

::-webkit-scrollbar-thumb{

    background:#1fcfff;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#4ad9ff;

}

/*=========================================================
                VIDEO CONTROLS
=========================================================*/

.video-controls{

    position:absolute;

    left:50%;

    bottom:25px;

    transform:translateX(-50%);

    display:flex;

    gap:12px;

    padding:10px 14px;

    border-radius:50px;

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

    backdrop-filter:blur(20px);

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

    z-index:100;

}

.video-controls button{

    width:52px;

    height:52px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    color:#fff;

    font-size:20px;

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

    transition:.3s;

}

.video-controls button:hover{

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

    transform:scale(1.08);

}

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

.success-overlay{

    position:fixed;

    inset:0;

    background:rgba(8,12,22,.72);

    backdrop-filter:blur(10px);

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:99999;

    opacity:0;

    visibility:hidden;

    transition:.35s;

}

.success-overlay.show{

    opacity:1;

    visibility:visible;

}

.success-card{

    width:460px;

    background:#fff;

    border-radius:24px;

    padding:35px;

    text-align:center;

    box-shadow:0 30px 80px rgba(0,0,0,.35);

    animation:popup .35s ease, cardPulse 4s ease-in-out infinite;

}

.success-card img{

    width:90px;

    height:90px;

    object-fit:cover;

    border-radius:18px;

    margin-bottom:18px;

    box-shadow:0 12px 30px rgba(0,0,0,.18);

    animation:welcomeFloat 3s ease-in-out infinite,
              welcomeGlow 2.5s ease-in-out infinite;

}

.success-card h2{

    font-size:30px;

    font-weight:700;

    margin-bottom:12px;

    color:#0d1b38;

}

.success-card p{

    font-size:17px;

    color:#555;

    line-height:1.7;

    margin-bottom:18px;

}

.success-note{

    background:#eef8ff;

    border-radius:14px;

    padding:14px;

    color:#1d5fc7;

    font-weight:600;

    margin-bottom:28px;

}

.success-card button{

    border:none;

    width:220px;

    height:54px;

    border-radius:50px;

    cursor:pointer;

    font-size:17px;

    font-weight:700;

    color:#fff;

    background:linear-gradient(90deg,#16c5ff,#5b73ff);

    transition:.3s;

}

.success-card button:hover{

    transform:translateY(-2px);

    box-shadow:0 15px 30px rgba(55,125,255,.35);

}

@keyframes popup{

    from{

        transform:scale(.85);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

@keyframes welcomeFloat{

    0%{

        transform:translateY(0px) scale(1);

    }

    50%{

        transform:translateY(-8px) scale(1.03);

    }

    100%{

        transform:translateY(0px) scale(1);

    }

}

@keyframes welcomeGlow{

    0%{

        box-shadow:0 10px 25px rgba(52,152,219,.18);

    }

    50%{

        box-shadow:0 18px 40px rgba(52,152,219,.45);

    }

    100%{

        box-shadow:0 10px 25px rgba(52,152,219,.18);

    }

}

@keyframes cardPulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.01);

    }

    100%{

        transform:scale(1);

    }

}

.contact-cta::before{

    content:"";

    position:absolute;

    width:380px;

    height:380px;

    border-radius:50%;

    background:rgba(0,180,255,.18);

    filter:blur(90px);

    top:-120px;

    left:-120px;

    animation:ctaGlow 8s ease-in-out infinite;

}

.contact-cta::after{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    border-radius:50%;

    background:rgba(80,120,255,.12);

    filter:blur(80px);

    right:-80px;

    bottom:-120px;

    animation:ctaGlow 10s ease-in-out infinite reverse;

}

.contact-cta>*{

    position:relative;

    z-index:2;

}

@keyframes ctaGlow{

    0%{

        transform:translateY(0) scale(1);

    }

    50%{

        transform:translateY(20px) scale(1.12);

    }

    100%{

        transform:translateY(0) scale(1);

    }

}

.secondary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-width:210px;

    padding:18px 40px;

    border-radius:60px;

    text-decoration:none;

    font-size:17px;

    font-weight:700;

    color:#fff;

    background:linear-gradient(135deg,#25D366,#0fa958);

    transition:.35s;

    box-shadow:0 18px 45px rgba(37,211,102,.35);

}

.secondary-btn:hover{

    transform:translateY(-5px);

    box-shadow:0 22px 55px rgba(37,211,102,.50);

}

/*=========================================================
                    END
=========================================================*/