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

.contact-info-section{
    padding:80px 8% 0;
    background:#fff;
}

.contact-info-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:26px;
    max-width:1300px;
    margin:0 auto;
}

.contact-info-card{
    text-align:center;
    padding:36px 22px;
    border-radius:18px;
    background:#f8f9fc;
    border-top:4px solid #d4af37;
    transition:all 0.3s ease;
}

.contact-info-card:hover{
    transform:translateY(-6px);
    box-shadow:0 15px 35px rgba(0,0,0,0.08);
}

.contact-info-card .icon{
    width:64px;
    height:64px;
    margin:0 auto 18px;

    border-radius:50%;

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

    background:linear-gradient(135deg,#f8e7b7,#d4af37);
    color:#001b4d;
    font-size:24px;
}

.contact-info-card h4{
    color:#001b4d;
    font-size:16px;
    margin-bottom:10px;
}

.contact-info-card p,
.contact-info-card a{
    color:#666;
    font-size:14px;
    line-height:1.7;
    text-decoration:none;
}

.contact-info-card a:hover{
    color:#052b6d;
}

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

.contact-main-section{
    padding:90px 8%;
    background:#fff;
}

.contact-main-grid{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:60px;
    max-width:1300px;
    margin:0 auto;
    align-items:start;
}

.contact-form-wrap h2{
    color:#001b4d;
    font-size:2rem;
    margin-bottom:14px;
}

.contact-form-wrap > p{
    color:#666;
    line-height:1.8;
    margin-bottom:34px;
    max-width:520px;
}

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

.form-group{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.form-group.full{
    grid-column:1 / -1;
}

.form-group label{
    font-size:13px;
    font-weight:600;
    color:#052b6d;
    letter-spacing:0.3px;
}

.form-group input,
.form-group select,
.form-group textarea{
    padding:15px 18px;
    border-radius:10px;
    border:1.5px solid #e2e2e2;

    font-family:Georgia, serif;
    font-size:15px;
    color:#333;

    background:#f8f9fc;
    transition:0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    outline:none;
    border-color:#d4a017;
    background:#fff;
}

.form-group textarea{
    resize:vertical;
    min-height:130px;
}

.contact-form button{
    grid-column:1 / -1;

    padding:17px 30px;
    border:none;
    border-radius:12px;

    background:#052b6d;
    color:#fff;
    font-weight:700;
    font-size:16px;

    cursor:pointer;
    transition:0.3s ease;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}

.contact-form button:hover{
    background:#d4a017;
    color:#000;
    transform:translateY(-2px);
}

.form-note{
    grid-column:1 / -1;

    display:none;
    padding:16px 20px;
    border-radius:10px;

    background:#e9f7ee;
    color:#1e7a42;
    font-size:14px;
    line-height:1.6;
}

.form-note.show{
    display:block;
}

/* ===================================
   SIDE PANEL
=================================== */

.contact-side{
    background:linear-gradient(135deg,#052b6d,#001b4d);
    color:#fff;
    border-radius:22px;
    padding:44px 36px;
    position:relative;
    overflow:hidden;
}

.contact-side::after{
    content:"";
    position:absolute;
    width:300px;
    height:300px;
    bottom:-150px;
    right:-100px;
    background:radial-gradient(circle,rgba(212,175,55,0.18),transparent 70%);
    pointer-events:none;
}

.contact-side h3{
    font-size:1.4rem;
    margin-bottom:16px;
    position:relative;
    z-index:1;
}

.contact-side p{
    color:rgba(255,255,255,0.75);
    line-height:1.8;
    margin-bottom:30px;
    font-size:14.5px;
    position:relative;
    z-index:1;
}

.side-detail{
    display:flex;
    align-items:flex-start;
    gap:16px;
    margin-bottom:26px;
    position:relative;
    z-index:1;
}

.side-detail .icon{
    width:44px;
    height:44px;
    flex-shrink:0;

    border-radius:12px;
    border:1px solid rgba(212,175,55,0.4);

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

    color:#d4af37;
    font-size:16px;
}

.side-detail h5{
    font-size:14px;
    margin-bottom:4px;
    color:#fff;
}

.side-detail a,
.side-detail span{
    color:rgba(255,255,255,0.75);
    font-size:14px;
    text-decoration:none;
    line-height:1.6;
}

.side-detail a:hover{
    color:#d4af37;
}

.side-whatsapp{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    margin-top:10px;
    padding:15px;
    border-radius:12px;

    background:#25D366;
    color:#fff;

    text-decoration:none;
    font-weight:700;
    font-size:15px;

    position:relative;
    z-index:1;

    transition:0.3s ease;
}

.side-whatsapp:hover{
    background:#1ebe57;
    transform:translateY(-2px);
}

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

.map-section{
    padding:0 8% 100px;
    background:#fff;
}

.map-placeholder{
    max-width:1300px;
    margin:0 auto;

    height:340px;
    border-radius:22px;

    background:linear-gradient(135deg,#f8f9fc,#eef1f8);
    border:1.5px dashed #d0d5e0;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px;

    color:#052b6d;
    text-align:center;
    padding:20px;
}

.map-placeholder i{
    font-size:38px;
    color:#d4af37;
}

.map-placeholder h4{
    font-size:18px;
}

.map-placeholder p{
    color:#888;
    font-size:14px;
    max-width:420px;
}

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

@media(max-width:992px){

    .contact-info-grid{
        grid-template-columns:repeat(2,1fr);
    }

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

@media(max-width:768px){

    .contact-info-section{
        padding:60px 6% 0;
    }

    .contact-main-section{
        padding:60px 6%;
    }

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

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

    .contact-side{
        padding:34px 26px;
    }

    .map-section{
        padding:0 6% 70px;
    }
}