/*=========================================
        DOLPHIN RES — CONTACT PAGE
==========================================*/

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

.contact-hero{

    position:relative;

    height:55vh;
    min-height:400px;

    background:url("../images/hero.jpeg") center 40%/cover;

    display:flex;

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

    text-align:center;

    overflow:hidden;

}

.contact-hero .overlay{

    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;

    background:rgba(15,23,42,.65);

    z-index:1;

}

.contact-hero .hero-content{

    position:relative;
    z-index:2;

    max-width:640px;

    padding:0 24px;

    color:#F1F5F9;

}

.contact-hero h1{

    font-size:50px;

    margin-bottom:18px;

    opacity:0;

    animation:fadeInUp .8s var(--ease) .15s forwards;

}

.contact-hero h1 span{

    color:var(--accent);

}

.contact-hero p{

    font-size:18px;

    line-height:1.8;

    margin-bottom:30px;

    color:#E2E8F0;

    opacity:0;

    animation:fadeInUp .8s var(--ease) .35s forwards;

}

.contact-hero .btn{

    opacity:0;

    animation:fadeInUp .8s var(--ease) .55s forwards;

}

.contact-hero::after{

    content:"";
    position:absolute;
    left:0;
    bottom:-1px;
    width:100%;
    height:70px;
    z-index:2;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,50 C300,120 900,-10 1200,50 L1200,120 L0,120 Z' fill='%23F8FAFC'/%3E%3C/svg%3E");
    background-size:100% 100%;
    background-repeat:no-repeat;

}

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

.contact-info{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:30px;

    padding:90px 8% 40px;

    background:var(--background);

}

.info-card{

    background:var(--surface);

    border-radius:15px;

    padding:35px 25px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:transform .4s var(--ease), box-shadow .4s var(--ease);

}

.info-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-hover);

}

.info-card .icon{

    font-size:40px;

    margin-bottom:16px;

}

.info-card h3{

    color:var(--primary);

    margin-bottom:10px;

}

.info-card p{

    color:var(--text-muted);

    line-height:1.6;

}

.info-card a{

    color:var(--text-muted);

    text-decoration:none;

    transition:color .3s var(--ease);

}

.info-card a:hover{

    color:var(--accent);

}

/*================ FORM + MAP ================*/

.contact-main{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

    align-items:stretch;

    padding:70px 8% 120px;

    background:var(--background);

}

.contact-form-wrap h2{

    color:var(--primary);

    font-size:34px;

    margin-bottom:10px;

}

.contact-form-wrap > p{

    color:var(--text-muted);

    margin-bottom:30px;

}

.form-banner{

    padding:16px 20px;

    border-radius:10px;

    margin-bottom:24px;

    font-size:14.5px;

    line-height:1.6;

    animation:fadeInUp .4s var(--ease);

}

.form-banner-success{

    background:#DCFCE7;

    color:#166534;

    border:1px solid #86EFAC;

}

.form-banner-error{

    background:#FEE2E2;

    color:#991B1B;

    border:1px solid #FCA5A5;

}

.form-banner-error a{

    color:#991B1B;

    font-weight:600;

    text-decoration:underline;

}

.form-row{

    margin-bottom:20px;

}

.honeypot-field{

    position:absolute;

    left:-9999px;

    width:1px;

    height:1px;

    overflow:hidden;

}

.form-row label{

    display:block;

    font-weight:600;

    color:var(--primary);

    margin-bottom:8px;

    font-size:14px;

}

.form-row input,
.form-row textarea{

    width:100%;

    padding:13px 16px;

    border:1px solid var(--border);

    border-radius:8px;

    font-family:'Poppins',sans-serif;

    font-size:15px;

    color:var(--text);

    background:var(--surface);

    transition:border-color .3s var(--ease), box-shadow .3s var(--ease);

    resize:vertical;

}

.form-row input:focus,
.form-row textarea:focus{

    outline:none;

    border-color:var(--accent);

    box-shadow:0 0 0 3px var(--accent-soft);

}

.contact-form-wrap .btn{

    border:none;

    cursor:pointer;

    font-size:15px;

}

.contact-form-wrap .btn:disabled{

    opacity:.65;

    cursor:not-allowed;

    transform:none;

}

.form-note{

    margin-top:14px;

    font-size:13px;

    color:var(--text-muted);

}

.contact-map-wrap{

    border-radius:15px;

    overflow:hidden;

    box-shadow:var(--shadow);

    min-height:400px;

}

.contact-map{

    width:100%;

    height:100%;

    min-height:400px;

    border:0;

    display:block;

}

/*================ FLOATING WHATSAPP BUTTON ================*/
/* shared across every page via style.css, included here for reference */

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

.faq{

    padding:90px 8% 110px;

    background:var(--background);

}

.faq-list{

    max-width:760px;

    margin:0 auto;

}

.faq-item{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:12px;

    margin-bottom:14px;

    overflow:hidden;

    transition:box-shadow .3s var(--ease);

}

.faq-item:hover{

    box-shadow:var(--shadow);

}

.faq-question{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    padding:20px 24px;

    background:none;

    border:none;

    cursor:pointer;

    text-align:left;

    font-family:'Poppins',sans-serif;

    font-size:16px;

    font-weight:600;

    color:var(--primary);

}

.faq-icon{

    flex-shrink:0;

    width:26px;

    height:26px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--accent-soft);

    color:var(--accent);

    font-size:16px;

    font-weight:700;

    transition:transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease);

}

.faq-item.open .faq-icon{

    transform:rotate(45deg);

    background:var(--accent);

    color:white;

}

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .35s var(--ease);

}

.faq-answer p{

    padding:0 24px 20px;

    color:var(--text-muted);

    line-height:1.7;

    font-size:14.5px;

}

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

@media(max-width:900px){

    .contact-hero h1{

        font-size:34px;

    }

    .contact-main{

        grid-template-columns:1fr;

    }

    .contact-map-wrap{

        min-height:320px;

    }

}