/* contact.css (MINIMAL) */
*{margin:0;padding:0;box-sizing:border-box;}

:root{
    --bg:#000000; /* Change background color here if needed */
    --text:#ffffff;
    --muted:rgba(255,255,255,0.68);
    --line:rgba(255,255,255,0.10);

    --accent:#2596be; /* Change accent color here if needed */
    --radius:24px;
    --shadow:0 22px 70px rgba(0,0,0,0.55);
}

html,body{
    background:var(--bg);
    color:var(--text);
    font-family:"Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    overflow-x:hidden;
}

.top{padding:18px 18px 0;}
.backBtn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    color:rgba(255,255,255,0.88);
    padding:10px 12px;
    border-radius:14px;
    background:rgba(255,255,255,0.04);
    border:1px solid var(--line);
    transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.backBtn:hover{
    transform:translateY(-1px);
    background:rgba(255,255,255,0.06);
    border-color:rgba(255,255,255,0.16);
}

.wrap{
    max-width:980px;
    margin:0 auto;
    padding:18px 18px 40px;
}

.pageHead{
    margin-top:10px;
    text-align:center;
}
.pageHead h1{
    font-family:"Montserrat", sans-serif;
    font-weight:800;
    letter-spacing:0.2px;
    font-size:2.1rem;
}
.pageHead .sub{
    margin-top:10px;
    color:rgba(255,255,255,0.72);
    line-height:1.6;
}

.center{
    margin-top:22px;
    display:grid;
    place-items:center;
}

.contactCard{
    width:min(720px, 100%);
    border-radius:var(--radius);
    background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    padding:20px;
    position:relative;
    overflow:hidden;
    text-align:center;
}
.contactCard::before{
    content:"";
    position:absolute;
    inset:-40% -20%;
    background:radial-gradient(closest-side, rgba(37,150,190,0.95), transparent 55%);
    transform:translate(25%, 10%);
    filter:blur(10px);
    pointer-events:none;
    opacity:.55;
}

.pill{
    display:inline-flex;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(37,150,190,0.16);
    border:1px solid rgba(37,150,190,0.55);
    color:rgba(255,255,255,0.92);
    font-weight:800;
    font-size:0.60rem;
    position:relative;
}

.contactCard h2{
    margin-top:12px;
    font-family:"Montserrat", sans-serif;
    font-weight:800;
    font-size:1.45rem;
    line-height:1.25;
    position:relative;
}

.phone{
    display:inline-block;
    margin-top:14px;
    font-family:"Montserrat", sans-serif;
    font-weight:900;
    font-size:2rem;
    letter-spacing:0.2px;
    color:rgba(255,255,255,0.95);
    text-decoration:none;
    position:relative;
}
.phone:hover{
    text-decoration:underline;
    text-underline-offset:6px;
}

.muted{
    margin-top:10px;
    color:var(--muted);
    line-height:1.6;
    position:relative;
}

.actions{
    margin-top:16px;
    display:flex;
    gap:10px;
    justify-content:center;
    flex-wrap:wrap;
    position:relative;
}

.btnPrimary, .btnGhost{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    padding:12px 14px;
    font-weight:900;
    cursor:pointer;
    text-decoration:none;
    border:1px solid var(--line);
    transition:transform .15s ease, filter .15s ease, background .15s ease, border-color .15s ease;
}

.btnPrimary{
    background:linear-gradient(90deg, rgba(37,150,190,1), rgba(37,150,190,0.75));
    color:#fff;
    box-shadow:0 18px 40px rgba(37,150,190,0.25);
    border-color:rgba(37,150,190,0.75);
}
.btnPrimary:hover{transform:translateY(-1px);filter:brightness(1.03);}

.btnGhost{
    background:rgba(255,255,255,0.04);
    color:rgba(255,255,255,0.90);
}
.btnGhost:hover{
    transform:translateY(-1px);
    background:rgba(255,255,255,0.06);
    border-color:rgba(255,255,255,0.16);
}

.mini{
    margin-top:22px;
    text-align:center;
    color:rgba(255,255,255,0.55);
}

@media (max-width: 520px){
    .pageHead h1{font-size:1.8rem;}
    .phone{font-size:1.6rem;}
    .wrap{padding-left:14px;padding-right:14px;}
}
/* ✅ Email line styling */
.emailLine{
    margin-top:10px;
    color:rgba(255,255,255,0.82);
    position:relative;
    line-height:1.5;
}
.emailLink{
    color:rgba(255,255,255,0.95);
    font-weight:800;
    text-decoration:none;
}
.emailLink:hover{
    text-decoration:underline;
    text-underline-offset:6px;
}

/* ✅ FORCE 1-row buttons (desktop + mobile) */
.actions{
    margin-top:16px;
    display:flex;
    gap:10px;
    justify-content:center;
    flex-wrap:nowrap;          /* ✅ changed (no wrap) */
    position:relative;
}

/* ✅ Make buttons fit in one row on phone */
.actions a{
    flex:1 1 0;                /* ✅ each button shares space */
    min-width:0;               /* ✅ prevents overflow */
    padding:12px 10px;         /* ✅ tighter for mobile */
    font-size:.92rem;          /* ✅ smaller text */
    white-space:nowrap;        /* ✅ keep in one line */
}