@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Poppins:wght@300;400;500;600;700&display=swap');

/* ==========================================
GLOBAL
========================================== */

body{


margin:0;

background:#111111;

color:#ffffff;

font-family:'Poppins',sans-serif;

overflow-x:hidden;


}

*{


box-sizing:border-box;


}

h1,h2,h3{


font-family:'Outfit',sans-serif;

font-weight:600;

letter-spacing:-.5px;

margin:0;


}

section{


position:relative;


}

.section-heading{


width:min(1200px,92%);

margin:0 auto 70px;

text-align:center;


}

.section-heading span{


color:#ff8c04;

font-size:14px;

letter-spacing:4px;

text-transform:uppercase;


}

.section-heading h2{


font-size:46px;

margin:15px 0;


}

.section-heading p{


color:#c7c7c7;

max-width:700px;

margin:auto;

line-height:1.8;


}

/* ==========================================
HERO
========================================== */

.locations-hero{


min-height:85vh;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

background:
url('../images/locations bg.png')
center center/cover no-repeat;

position:relative;


}

.locations-overlay{


position:absolute;

inset:0;

background:
linear-gradient(
rgba(0,0,0,.45),
rgba(0,0,0,.85)
);


}

.locations-content{


position:relative;

z-index:2;

max-width:900px;

padding:40px;


}

.locations-content span{


color:#ff8c04;

letter-spacing:4px;

font-size:14px;


}

.locations-content h1{


font-size:clamp(22px,4vw,32px);

margin:20px 0;

line-height:1.05;


}

.locations-content p{


color:#d8d8d8;

font-size:18px;

line-height:1.8;

margin-bottom:35px;


}

/* ==========================================
BRANCHES
========================================== */

.branches-section{


padding:120px 0;


}

.branches-grid{

    width:min(1300px,92%);

    margin:auto;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(520px,1fr));

    gap:35px;

}

.branch-card{

    background:#1b1b1b;

    border-radius:28px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.05);

    transition:.35s;

}

.branch-card:hover{

    transform:translateY(-8px);

    border-color:#ff8c04;

    box-shadow:
    0 0 35px rgba(255,140,4,.15);

}

.branch-map iframe{

    width:100%;

    height:280px;

    border:none;

}

.branch-content{

    padding:30px;

}

.branch-content h3{

    font-size:30px;

    margin-bottom:15px;

}

.branch-content p{

    color:#d0d0d0;

    line-height:1.8;

    margin-bottom:25px;

}

.branch-buttons{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}

.btn-secondary{

    display:inline-block;

    padding:15px 28px;

    border-radius:12px;

    text-decoration:none;

    border:2px solid #ff8c04;

    color:#ff8c04;

    font-weight:600;

    transition:.3s;

}

.btn-secondary:hover{

    background:#ff8c04;

    color:#000;

}

.status-badge{


display:inline-block;

background:
linear-gradient(
90deg,
#fff72d,
#ff8c04,
#ff1700
);

color:#000;

padding:10px 22px;

border-radius:40px;

font-weight:700;

margin-bottom:25px;


}

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

.map-section{


padding:120px 0;

background:#181818;


}

.map-wrapper{


width:min(1200px,92%);

margin:auto;

overflow:hidden;

border-radius:30px;

border:1px solid rgba(255,255,255,.05);


}

.map-wrapper iframe{


width:100%;

height:550px;

border:0;


}

/* ==========================================
CTA
========================================== */

.expansion-section{


padding:120px 20px;

background:
linear-gradient(
rgba(0,0,0,.75),
rgba(0,0,0,.85)
),
url('../images/franchise-bg.jpg')
center/cover;


}

.expansion-content{


max-width:900px;

margin:auto;

text-align:center;


}

.expansion-content span{


color:#ff8c04;

letter-spacing:4px;

font-size:14px;


}

.expansion-content h2{


font-size:52px;

margin:20px 0;


}

.expansion-content p{


color:#d0d0d0;

font-size:18px;

line-height:1.8;

margin-bottom:40px;


}

/* ==========================================
BUTTONS
========================================== */

.btn-primary{


display:inline-block;

text-decoration:none;

background:
linear-gradient(
90deg,
#fff72d,
#ff8c04,
#ff1700
);

color:#000;

padding:15px 28px;

border-radius:12px;

font-weight:700;

transition:.3s;


}

.btn-primary:hover{


transform:translateY(-3px);

box-shadow:
0 0 25px rgba(255,140,4,.35);


}

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

@media(max-width:992px){


.branches-grid{

    grid-template-columns:1fr;
}

.locations-content h1{

    font-size:32px;
}

.section-heading h2{

    font-size:38px;
}

.expansion-content h2{

    font-size:42px;
}


}

@media(max-width:768px){


.locations-hero{

    min-height:100vh;

    background:
url('../images/locations mob bg.png')
center center/cover no-repeat;
}

.locations-content{

    padding:20px;
}

.locations-content h1{

    font-size:40px;
}

.locations-content p{

    font-size:16px;
}

.branches-section{

    padding:80px 0;
}

.branch-card{

    padding:30px;
}

.branch-card h3{

    font-size:26px;
}

.section-heading h2{

    font-size:32px;
}

.map-wrapper iframe{

    height:350px;
}

.expansion-section{

    padding:80px 20px;
}

.expansion-content h2{

    font-size:34px;
}

.expansion-content p{

    font-size:16px;
}


}