:root {
  /* === BACKGROUNDS & SURFACES === */
  --bg-primary:     maroon;
  --bg-page:        #ffffff;
  --bg-section:     #fff9f9;   /* overall page background */
  --bg-surface:    #ffffff;   /* cards, modals, navbar */
  --pastel-blush:  #f5e0e3;   /* section backgrounds, card fills */
  --pastel-rose:   #faedef;   /* hover fills, alternate sections */
  --pastel-soft:   #f9f0f1;   /* subtle row alternates, input bg */
  --border:        #e8c5c5;   /* all borders, dividers, outlines */
}


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

.contact-info,
.contact-form-wrapper{
    background:#fff;
    border:1px solid #ecd7d7;
    border-radius:24px;
    padding:35px;
}

.contact-item{
    display:flex;
    gap:15px;
    margin-bottom:28px;
}

.contact-item:last-child{
    margin-bottom:0;
}

.contact-item i{
    width:52px;
    height:52px;

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

    background:var(--pastel-blush);

    color:maroon;

    border-radius:14px;

    font-size:1.15rem;

    flex-shrink:0;
}

.contact-item h6{
    font-weight:700;
    margin-bottom:5px;
}

.contact-item p{
    color:#666;
    line-height:1.6;
}

/* Social */

.contact-social{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.contact-social a{
    width:46px;
    height:46px;

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

    text-decoration:none;

    border-radius:12px;

    background:var(--pastel-blush);

    color:maroon;

    transition:.3s ease;
}

.contact-social a:hover{
    background:maroon;
    color:#fff;
    transform:translateY(-4px);
}

/* Form */

.form-control,
.form-select{
    border:1px solid #ecd7d7;
    background:var(--pastel-soft);
    border-radius:14px;
    padding:14px 16px;
}

.form-control:focus,
.form-select:focus{
    border-color:maroon;
    box-shadow:none;
    background:#fff;
}

.form-label{
    font-weight:600;
    margin-bottom:8px;
}

/* Map */

.map-wrapper{
    overflow:hidden;
    border-radius:24px;
    border:1px solid #ecd7d7;
}

.map-wrapper iframe{
    width:100%;
    height:450px;
    border:0;
}

/* Mobile */

@media(max-width:768px){

    .contact-info,
    .contact-form-wrapper{
        padding:25px;
    }

    .map-wrapper iframe{
        height:320px;
    }

}