.contact-page{
padding:100px 8%;
background:#f8fafc;
}

.hero{
    padding: 50px 0 20px;
}


.contact-header{
text-align:center;
margin-bottom:60px;
}

.contact-header h1{
font-size:40px;
margin-bottom:10px;
}

.contact-header p{
color:#6b7280;
max-width:650px;
margin:auto;
line-height:1.7;
}


/* CONTAINER */

.contact-container{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
max-width:1200px;
margin:auto;
align-items:center;
}



/* FORM */

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

.contact-container{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:flex-start;
}


/* LEFT SIDE */

.contact-left h2{
font-size:32px;
margin-bottom:10px;
}

.contact-desc{
color:#6b7280;
margin-bottom:30px;
line-height:1.6;
}

.contact-item{
display:flex;
gap:14px;
margin-bottom:22px;
}

.contact-item i{
font-size:18px;
color:#2f80ed;
margin-top:4px;
}

.contact-item h4{
font-size:16px;
margin-bottom:3px;
}

.contact-item p{
color:#555;
font-size:14px;
}

.schedule-btn{
margin-top:10px;
padding:10px 18px;
background:#2f80ed;
border:none;
border-radius:6px;
color:white;
cursor:pointer;
}


/* OFFICE HOURS */

.office-hours{
margin-top:30px;
}

.office-hours h3{
margin-bottom:15px;
}

.hours-row{
display:flex;
justify-content:space-between;
margin-bottom:8px;
color:#555;
font-size:14px;
}


/* RIGHT SIDE */

.contact-right{
background:white;
padding:35px;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.contact-right h2{
margin-bottom:25px;
}


/* FORM GRID */

.form-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:15px;
margin-bottom:15px;
}

.contact-right input,
.contact-right textarea{
width:100%;
padding:13px;
border-radius:6px;
border:1px solid #e5e7eb;
font-size:14px;
}

.contact-right textarea{
margin-bottom:20px;
}

.contact-right button{
width:100%;
padding:14px;
background:linear-gradient(135deg,#2f80ed,#1e60d6);
border:none;
border-radius:8px;
color:white;
font-size:16px;
font-weight:600;
cursor:pointer;
}


/* MOBILE */

@media(max-width:900px){

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

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

}


.contact-map{
position:relative;
max-width:1200px;
margin:auto;
}

.world-map{
width:100%;
display:block;
}

/* pins */

.map-pin{
position:absolute;
width:16px;
height:16px;
background:#2563eb;
border-radius:50%;
transform:translate(-50%, -50%);
box-shadow:0 0 0 6px rgba(42,99,235,0.15);
cursor:pointer;
}

/* hover animation */

.map-pin:hover{
transform:translate(-50%, -50%) scale(1.2);
z-index: 10;
}

/* tooltip */



.tooltip{
position:absolute;
bottom:28px;
left:50%;
transform:translateX(-50%);
background:#fff;
padding:6px 10px;
border-radius:6px;
box-shadow:0 6px 20px rgba(0,0,0,.15);
font-size:12px;
white-space:nowrap;
transition:.25s;
z-index: 20;
color:#1f2d3d;
}

.tooltip strong{
font-size:14px;
display:block;
margin-bottom:2px;
}

/* show tooltip */
/* Baltimore */
.baltimore .tooltip{
bottom:-27px;
left:22px;
transform:none;
}

/* Columbia */
.columbia .tooltip{
bottom:-60px;
left:9px;
transform:none;
}

/* Baton Rouge */
.baton .tooltip{
bottom:-44px;
left:-113px;
transform:none;
}

/* Toronto */
.toronto .tooltip{
bottom:3px;
left:-107px;
transform:none;
}

/* Quebec */
.quebec .tooltip{
bottom:17px;
left:10px;
transform:none;
}


.global-title{
text-align:center;
font-size:36px;
font-weight:700;
color:#1f2d3d;
margin:60px 0 40px;
position:relative;
letter-spacing:0.5px;
}

.global-title::after{
content:"";
width:70px;
height:3px;
background:#2a63ff;
display:block;
margin:12px auto 0;
border-radius:3px;
}

/* correct locations */

.toronto{
top:49%;
left:31%;
}

.quebec{
top:46%;
left:31%;
}

.baltimore{
top:54%;
left:30%;
}

.columbia{
top:57%;
left:28%;
}

.baton{
top:58.5%;
left:25.5%;
}




/* Dark Mode */



/* Office Cards */

.office-card{
position:absolute;
background:white;
padding:10px 14px;
border-radius:10px;
box-shadow:0 8px 20px rgba(0,0,0,.15);
font-size:13px;
}

body.dark-mode .contact-right,
body.dark-mode .office-card{
    background:#12163a ;
border:1px solid #1f2937;
color:#e5e7eb;

box-shadow:
0 10px 30px rgba(0,0,0,0.4);
}


body.dark-mode .contact-section{
    background:#0b132b;
}

body.dark-mode .hours-row{
        color: #cbd5f5;
}