/* ==========================================
CHAR&CO FRANCHISE PAGE
Requires: indexstyle.css
Uses navbar, footer and buttons
from homepage styling
========================================== */

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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 🔥 ROOT COLORS */
:root {
  --black: #0B0B0B;
  --orange: #FF4D00;
  --red: #FF1A1A;
  --yellow: #FFC300;
  --white: #FFFFFF;
  --grey: #1A1A1A;
}

/* GLOBAL */
body {
  font-family:'Poppins', sans-serif;
  /*background: linear-gradient(135deg, #ffffff, #7c3806, #1a1212);*/
  background: #0B0B0B;
  color: var(--black);
}

/* ==========================================
PAGE WRAPPER
========================================== */

.franchise-page{


background:#111111;

color:#ffffff;

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

overflow-x:hidden;


}

.franchise-page *{


box-sizing:border-box;


}

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

.franchise-page section{


position:relative;

padding:120px 0;


}

.franchise-container{


width:min(1300px,92%);

margin:auto;


}

/* ==========================================
HEADINGS
========================================== */

.section-heading{


text-align:center;

margin-bottom:70px;


}

.section-heading span{


display:block;

color:#ff8c04;

letter-spacing:4px;

font-size:14px;

margin-bottom:12px;


}

.section-heading h2{


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

font-size:clamp(42px,6vw,72px);

line-height:1;

color:white;


}

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

.franchise-hero{


min-height:85vh;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

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

overflow:hidden;


}

.hero-overlay{


position:absolute;

inset:0;

background:rgba(0,0,0,.65);


}

.hero-content{


position:relative;

z-index:2;

max-width:1000px;

padding:40px;


}

.hero-tag{


display:block;

color:#ff8c04;

letter-spacing:4px;

font-size:14px;

margin-bottom:20px;


}

.franchise-hero h1{


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

font-size:clamp(60px,9vw,130px);

line-height:.9;

text-transform:uppercase;

margin-bottom:25px;


}

.franchise-hero p{


max-width:750px;

margin:auto;

color:#d6d6d6;

line-height:1.8;

font-size:20px;


}

.hero-buttons{


display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

margin-top:40px;


}

.btn-secondary{


display:inline-flex;

align-items:center;

justify-content:center;

padding:14px 28px;

border-radius:12px;

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

text-decoration:none;

color:white;

transition:.3s;


}

.btn-secondary:hover{


border-color:#ff8c04;

color:#ff8c04;


}

/* ==========================================
WHY CHAR&CO
========================================== */

.why-grid{


width:min(1300px,92%);

margin:auto;

display:grid;

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

gap:30px;


}

.why-card{


background:#1b1b1b;

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

border-radius:30px;

padding:40px;

text-align:center;

transition:.3s;


}

.why-card:hover{


transform:translateY(-5px);


}

.icon{


font-size:55px;

margin-bottom:20px;


}

.why-card h3{


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

font-size:32px;

margin-bottom:15px;


}

.why-card p{


color:#b5b5b5;

line-height:1.8;


}

/* ==========================================
INVESTMENT
========================================== */

.stats-grid{


width:min(1200px,92%);

margin:auto;

display:grid;

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

gap:25px;


}

.stat-card{


background:#1b1b1b;

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

border-radius:30px;

padding:50px;

text-align:center;

transition:.3s;


}

.stat-card:hover{


transform:translateY(-5px);


}

.stat-card h3{


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

font-size:72px;

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

-webkit-background-clip:text;

color:transparent;


}

.stat-card p{


margin-top:10px;

color:#bbbbbb;


}

/* ==========================================
SUPPORT
========================================== */

.support-grid{


width:min(1300px,92%);

margin:auto;

display:grid;

grid-template-columns:1fr 1fr;

gap:40px;


}

.support-box{


background:#1b1b1b;

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

border-radius:30px;

padding:50px;

transition:.3s;


}

.support-box:hover{


transform:translateY(-5px);


}

.support-box h2{


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

font-size:42px;

margin-bottom:25px;


}

.support-box ul{


list-style:none;


}

.support-box li{


padding:14px 0;

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

color:#dddddd;


}

.support-box li::before{


content:"✓ ";

color:#ff8c04;

font-weight:bold;


}

/* ==========================================
JOURNEY
========================================== */

.journey-line{


width:min(1400px,92%);

margin:auto;

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:20px;


}

.step{


width:200px;

background:#1b1b1b;

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

border-radius:25px;

text-align:center;

padding:30px 20px;

transition:.3s;


}

.step:hover{


transform:translateY(-5px);


}

.step span{


width:60px;
height:60px;

display:flex;

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

margin:auto auto 20px;

border-radius:50%;

background:#ff8c04;

color:black;

font-weight:bold;

font-size:24px;


}

/* ==========================================
FRANCHISE FORM
========================================== */

.form-wrapper{


max-width:1000px;

margin:auto;


}

.form-top-stats{


display:flex;

justify-content:center;

gap:50px;

flex-wrap:wrap;

margin-bottom:40px;


}

.form-top-stats strong{


display:block;

text-align:center;

color:#ff8c04;

font-size:34px;


}

.form-top-stats span{


color:#999999;


}

.form-card{


background:#1b1b1b;

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

border-radius:35px;

padding:60px;


}

.form-heading{


text-align:center;

margin-bottom:40px;


}

.form-heading span{


color:#ff8c04;

letter-spacing:4px;


}

.form-heading h2{


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

font-size:60px;

margin:15px 0;


}

.form-heading p{


color:#aaaaaa;


}

.franchise-form{


display:grid;

grid-template-columns:1fr 1fr;

gap:20px;


}

.franchise-form textarea{


grid-column:1 / -1;

min-height:180px;

resize:none;


}

.franchise-form button{


grid-column:1 / -1;


}

.franchise-form input,
.franchise-form textarea{


width:100%;

background:#121212;

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

border-radius:16px;

padding:18px 20px;

color:white;

font-size:15px;

outline:none;

transition:.3s;


}

.franchise-form input:focus,
.franchise-form textarea:focus{


border-color:#ff8c04;


}

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

.franchise-cta{


height:500px;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

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


}

.cta-overlay{


position:absolute;

inset:0;

background:rgba(0,0,0,.75);


}

.cta-content{


position:relative;

z-index:2;

max-width:900px;

padding:40px;


}

.cta-content span{


color:#ff8c04;

letter-spacing:4px;


}

.cta-content h2{


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

font-size:clamp(42px,6vw,80px);

margin:20px 0 30px;


}

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

@media(max-width:992px){


.why-grid,
.stats-grid,
.support-grid{

    grid-template-columns:1fr;
}


}

@media(max-width:768px){


.franchise-hero h1{

    font-size:52px;
}

.franchise-hero p{

    font-size:16px;
}

.franchise-form{

    grid-template-columns:1fr;
}

.franchise-form textarea,
.franchise-form button{

    grid-column:auto;
}

.step{

    width:100%;
}

.form-card{

    padding:30px;
}

.form-heading h2{

    font-size:40px;
}


}


/* ==========================
   FOOTER
========================== */

.site-footer{

    position:relative;

    margin-top:100px;

    background:
        linear-gradient(
            to top,
            #050505,
            #0f0f0f
        );

    border-top:1px solid rgba(255,120,0,.15);

    overflow:hidden;
}

/* FIRE GLOW */

.site-footer::before{

    content:"";

    position:absolute;

    top:-150px;
    left:50%;

    transform:translateX(-50%);

    width:500px;
    height:300px;

    background:

    radial-gradient(
        circle,
        rgba(255,100,0,.25),
        transparent 70%
    );

    pointer-events:none;
}

.footer-container{

    max-width:1300px;

    margin:auto;

    padding:70px 40px;

    display:grid;

    grid-template-columns:
        2fr
        1fr
        1fr
        1fr;

    gap:50px;
}

.footer-brand p{

    margin-top:20px;

    color:#aaa;

    font-family:'Poppins';

    max-width:300px;

    line-height:1.7;
}

.footer-logo{

    width:220px;

    max-width:100%;
}

.footer-column h3{

    color:#ff8c04;

    margin-bottom:18px;

    font-size:18px;

    font-family:'Poppins';
}

.footer-column a,
.footer-column p{

    display:block;

    margin-bottom:12px;

    text-decoration:none;

    color:#bdbdbd;

    font-family:'Poppins';

    transition:.3s;
}

.footer-column a:hover{

    color:#ff8c04;

    transform:translateX(4px);
}

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.08);

    padding:25px;

    text-align:center;

    color:#888;

    font-family:'Poppins';

    font-size:14px;
}

.footer-bottom span{

    display:block;

    margin-top:8px;

    color:#ff8c04;
}

@media(max-width:900px){

    .footer-container{

        grid-template-columns:1fr;

        text-align:center;
    }

    .footer-brand p{

        margin:auto;
        margin-top:20px;
    }

    .footer-logo{

        margin:auto;
        display:block;
    }
}


/* =====================================
NAVBAR
===================================== */

.navbar{


position:sticky;
top:0;
z-index:9999;

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

padding:20px 50px;

background:rgba(0,0,0,.55);

backdrop-filter:blur(12px);

transition:all .3s ease;


}

.navbar.shrink{


padding:12px 50px;

background:rgba(0,0,0,.92);

box-shadow:
0 10px 30px rgba(0,0,0,.35);


}

/* NAV LINKS */

#nav-menu{


display:flex;
align-items:center;
gap:25px;


}

#nav-menu a{


position:relative;

color:#ffffff;

text-decoration:none;

font-size:15px;

transition:.3s;


}

#nav-menu a:hover{


color:#ff8c04;


}

#nav-menu a::after{


content:"";

position:absolute;

left:0;
bottom:-6px;

width:0;
height:2px;

background:#ff8c04;

transition:.3s;


}

#nav-menu a:hover::after{


width:100%;


}

/* LOGO */

.navbar img{


transition:.3s;


}

.navbar.shrink img{


transform:scale(.9);


}

/* ORDER BUTTON */

.btn-primary{


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

color:#000;

text-decoration:none;

border:none;

padding:12px 24px;

border-radius:8px;

font-weight:700;

transition:.3s;

cursor:pointer;


}

.btn-primary:hover{


transform:translateY(-2px);

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


}

/* SETTINGS BUTTON */

.settings-btn{


width:42px;
height:42px;

border:none;

border-radius:50%;

background:#1b1b1b;

color:white;

cursor:pointer;

transition:.3s;


}

.settings-btn:hover{


background:#ff8c04;

color:black;


}

/* SETTINGS DROPDOWN */

.settings-menu-wrap{


position:relative;


}

.settings-dropdown{


position:absolute;

top:55px;
right:0;

min-width:180px;

background:#1b1b1b;

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

border-radius:12px;

overflow:hidden;

display:none;

z-index:99999;


}

.settings-dropdown.show{


display:block;


}

.settings-dropdown a{


display:block;

padding:12px 15px;

color:white;

text-decoration:none;


}

.settings-dropdown a:hover{


background:#262626;


}

.settings-user{


padding:12px 15px;

color:#ff8c04;

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


}

/* ==========================================
MOBILE NAVBAR
========================================== */

@media screen and (max-width:768px){


/* NAVBAR */

.navbar{

    padding:15px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    z-index:99999999;
}

.navbar img{

    width:75px !important;

    height:auto !important;
}

.desktop-btn{

    display:none;
}

.settings-menu-wrap{

    margin-left:0;
}

.settings-btn{

    width:40px;

    height:40px;
}

/* OVERLAY */

.overlay{

    position:fixed;

    inset:0;

    background:
    rgba(0,0,0,.6);

    opacity:0;

    visibility:hidden;

    transition:.3s ease;

    z-index:99989;
}

.overlay.active{

    opacity:1;

    visibility:visible;
}

/* MOBILE MENU */

#nav-menu{

    position:fixed;

    top:0;
    right:-100%;

    width:80%;
    height:100vh;

    background:#111;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:25px;

    transition:.4s ease;

    z-index:99999;
}

#nav-menu.active{

    right:0;
}

#nav-menu a{

    font-size:22px;
}


}


/* ==========================================
HAMBURGER MENU
========================================== */

.hamburger{


display:none;

flex-direction:column;

justify-content:center;

align-items:center;

cursor:pointer;

gap:5px;

width:40px;

height:40px;

z-index:100001;


}

.hamburger span{


width:28px;

height:3px;

background:#ffffff;

border-radius:10px;

transition:.3s ease;


}

/* ANIMATION */

.hamburger.active span:nth-child(1){


transform:
translateY(8px)
rotate(45deg);


}

.hamburger.active span:nth-child(2){


opacity:0;


}

.hamburger.active span:nth-child(3){


transform:
translateY(-8px)
rotate(-45deg);


}

/* ==========================================
MOBILE NAVBAR
========================================== */

@media screen and (max-width:768px){


.hamburger{

    display:flex;
}

.desktop-btn{

    display:none;
}

.navbar{

    padding:15px;

    justify-content:space-between;

    align-items:center;

    position:sticky;

    top:0;

    z-index:99999;
}

.navbar img{

    width:75px !important;

    height:auto !important;
}

/* MOBILE MENU */

#nav-menu{

    position:fixed;

    top:0;
    right:-100%;

    width:80%;
    height:100vh;

    background:#111111;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:25px;

    transition:.4s ease;

    z-index:99999;
}

#nav-menu.active{

    right:0;
}

#nav-menu a{

    font-size:22px;

    color:white;

    text-decoration:none;
}

/* OVERLAY */

.overlay{

    position:fixed;

    inset:0;

    background:
    rgba(0,0,0,.6);

    opacity:0;

    visibility:hidden;

    transition:.3s ease;

    z-index:99998;
}

.overlay.active{

    opacity:1;

    visibility:visible;
}

/* SETTINGS */

.settings-btn{

    width:40px;
    height:40px;
}


}