.drxe-contact-page{

background:
linear-gradient(rgba(245,241,233,.92), rgba(245,241,233,.92)),
url('../../assets/images/home/cat-health.jpg');

background-size:cover;
background-position:center;

}

.drxe-contact-page section:last-child{
margin-bottom:0;
padding-bottom:60px;
}


/* HERO */

.contact-hero{

background:
linear-gradient(rgba(245,241,233,.92), rgba(245,241,233,.92)),
url('../../assets/images/map.png');

background-size:cover;
background-position:center;
background-repeat:no-repeat;

padding:80px 0px;

text-align:center;

}

.contact-hero h1{

font-size:42px;
margin-bottom:20px;

}

.contact-hero p{

max-width:720px;
margin:auto;

line-height:1.7;
font-size:18px;

}


/* CONTACT CARDS */

.contact-cards{

max-width:1200px;        /* FIX */
margin:80px auto 120px;  /* FIX */

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

gap:40px;

}

.contact-card{

background:white;

padding:35px;

border-radius:10px;

box-shadow:0 12px 25px rgba(0,0,0,.08);

text-align:center;

}

.contact-card h3{

margin-bottom:10px;

}

.contact-card span{

display:block;
margin-top:10px;

font-weight:600;
color:#A82AAE;

}


/* MAIN CONTACT */

.contact-grid{

max-width:1200px;      /* FIX */
margin:auto;           /* FIX */

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:start;

}



.contact-form input,
.contact-form textarea{

width:100%;

padding:14px;

margin-bottom:15px;

border:1px solid #ddd;

border-radius:6px;

font-size:15px;

}

.contact-form textarea{

height:110px;

resize:none;

}



.contact-form button{

background:#A82AAE;

color:white;

padding:14px 28px;

border:none;

border-radius:6px;

font-weight:600;

cursor:pointer;

}



.contact-form button:hover{

background:#922396;

}



/* INFO */

.contact-info strong{

display:block;

margin-bottom:4px;

}

.contact-info p{

margin-bottom:22px;

line-height:1.7;

}

/* ADDRESS GRID */

.address-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:40px;

margin-top:20px;
margin-bottom:30px;

}

.address-block h4{

margin-bottom:8px;

}

.address-block p{

line-height:1.7;

}



/* EMAIL */

.contact-email{

margin-top:10px;

font-weight:500;

}


/* =========================================================
CONTACT MOBILE FINAL (STACK + NO OVERFLOW)
========================================================= */

@media (max-width:640px){

/* GLOBAL */
body{
overflow-x:hidden;
}

.drxe-contact-page *{
max-width:100%;
box-sizing:border-box;
}


/* CONTAINER FIX (IMPORTANT) */
.contact-hero,
.contact-options,
.contact-main{
padding-left:16px;
padding-right:16px;
}


/* HERO */
.contact-hero{
padding:60px 0;
}

.contact-hero h1{
font-size:28px;
line-height:1.3;
}

.contact-hero p{
font-size:14px;
line-height:1.6;
}


/* =========================
CONTACT CARDS → STACK
========================= */

.contact-cards{

display:grid !important;
grid-template-columns:1fr !important;

gap:20px;

margin:40px auto;

}

.contact-card{

width:100%;
padding:24px;

}


/* =========================
MAIN GRID → STACK
========================= */

.contact-grid{
grid-template-columns:1fr !important;
gap:40px;
}


/* =========================
FORM FIX
========================= */

.contact-form{
width:100%;
}

.contact-form h2{
font-size:22px;
}

.contact-form input,
.contact-form textarea{
width:100%;
font-size:14px;
}


/* =========================
INFO FIX
========================= */

.contact-info{
width:100%;
padding:0;
}

.contact-info h2{
font-size:22px;
}

/* ADDRESS GRID */
.address-grid{
grid-template-columns:1fr;
gap:20px;
}


/* =========================
TEXT SAFETY (CRITICAL)
========================= */

.contact-info p,
.address-block p{
font-size:14px;
line-height:1.6;

word-break:break-word;
overflow-wrap:break-word;
}

.contact-email{
word-break:break-word;
}

}

/* =========================================================
CONTACT TABLET FIX (641px–1024px)
========================================================= */

@media (min-width:641px) and (max-width:1024px){

/* CARDS → 2 per row */
.contact-cards{
grid-template-columns:1fr 1fr;
gap:30px;
}

/* MAIN GRID */
.contact-grid{
grid-template-columns:1fr;
gap:50px;
}

/* ADDRESS */
.address-grid{
grid-template-columns:1fr 1fr;
gap:30px;
}

}