/* css/styles.css - COMMON STYLES ONLY */
:root {
    --red-gradient: linear-gradient(135deg, #E13833, #C62D28, #FF6B35);
    --red: #dc3545;
    --dark-red: #C62D28;
    --navy: #0E313A;
    --gold: #fbbf24;
    --gray: #666666;
    --shadow: 0 15px 40px rgba(220,53,69,.15);
    --transition: all .4s ease;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { 
    font-family:'Inter',sans-serif; 
    color:var(--navy); 
    line-height:1.8; 
    background:#f8f9fa;
}

.container { max-width:1320px; margin:auto; padding:0 15px; }

/* Navbar */
.navbar {
	line-height: normal;
    position:fixed; top:15px; left:50%; transform:translateX(-50%);
    width:94%; max-width:1350px; background:rgba(255,255,255,.98);
    backdrop-filter:blur(20px); border-radius:60px; padding:18px 40px;
    box-shadow:0 10px 40px rgba(220,53,69,.12); z-index:1000; transition:var(--transition);
    border:2px solid rgba(220,53,69,.15);
}
.navbar.scrolled { top:10px; padding:14px 32px; }
.nav-container { display:flex; justify-content:space-between; align-items:center; }
.logo { display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--navy); }
.logo img { height:68px; }
.logo-text .logo-shiva { font-size:2.5rem; font-weight:900; background:var(--red-gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.logo-text .logo-driving { font-size:0.95rem; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--navy); }
.nav-links { display:flex; gap:2.2rem; list-style:none; }
.nav-links a { color:var(--navy); text-decoration:none; font-weight:600; position:relative; }
.nav-links a::after { content:''; position:absolute; bottom:-10px; left:50%; width:0; height:4px; background:var(--red-gradient); border-radius:2px; transition:var(--transition); transform:translateX(-50%); }
.nav-links a:hover, .nav-links a.active { color:var(--red); }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }
.mobile-toggle { display:none; font-size:1.9rem; color:var(--red); cursor:pointer; }

/* Buttons */
.btn {
    padding:1.2rem 3rem; border-radius:60px; font-weight:700; font-size:1.15rem;
    text-decoration:none; display:inline-flex; align-items:center; gap:12px;
    transition:var(--transition); box-shadow:0 10px 30px rgba(220,53,69,.4);
}
.btn-primary { background:#fff; color:var(--red); }
.btn-primary:hover { background:var(--gold); color:#fff; transform:translateY(-6px); }
.btn-secondary { background:transparent; color:#fff; border:3px solid #fff; }
.btn-secondary:hover { background:#fff; color:var(--red); transform:translateY(-6px); }

/* Site Heading */
.site-heading { text-align:left; margin-bottom:60px; }
.site-heading.text-center { text-align:center; }
.site-heading h4 { color:var(--red); text-transform:uppercase; font-weight:700; font-size:18px; letter-spacing:2px; margin-bottom:15px; }
.site-heading h2 { font-size:48px; line-height:1.2; font-family:'Playfair Display',serif; }

/* Reusable About Layout */
.about-content { display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:center; max-width:1200px; margin:auto; }
.about-thumb img { border-radius:20px; box-shadow:var(--shadow); width:100%; }
.about-info p { font-size:17px; margin-bottom:25px; color:var(--gray); }
.about-info ul { list-style:none; margin-top:30px; }
.about-info ul li { display:flex; align-items:flex-start; gap:18px; margin-bottom:22px; font-size:17px; font-weight:600; }
.about-info ul li i { color:var(--gold); background:var(--red); width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:20px; }

/* Stats & CTA & Footer - keep your existing common code here */
.stats { padding:100px 5%; background:var(--red-gradient); color:#fff; text-align:center; }
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:2.5rem; max-width:1200px; margin:auto; }
.stat-item h3 { font-family:'Playfair Display',serif; font-size:4.5rem; margin-bottom:.5rem; }

.cta-section { padding:120px 5%; text-align:center; }
.cta-section h2 { font-size:3.8rem; color:var(--navy); margin-bottom:1rem; }
.cta-section .btn { background:var(--red-gradient); color:#fff; font-size:1.4rem; padding:1.5rem 4rem; }

.footer { background:var(--navy); color:#cbd5e1; padding:90px 5% 40px; }
.footer-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:3rem; margin-bottom:3rem; }
.footer-col h3::after { content:''; position:absolute; bottom:0; left:0; width:70px; height:4px; 
/* background:var(--red);  */
}
.nav-links .mobile-close { 
     display: none; 
 }

/* Responsive */
@media (max-width:992px) {
    .about-content { grid-template-columns:1fr; text-align:center; }
}
@media (max-width:768px) {

    .mobile-toggle {
        display: block;
//        z-index: 1100; /* above menu */
    }

    .nav-links {
        position: fixed; /* stays over content */
        top: 0;          /* start from very top */
        left: -100%;     /* hidden off-screen initially */
        width: 100%;
        height: 100vh;   /* full viewport height */
        background: #fff;
        flex-direction: column;
        padding-top: calc(68px + 18px*2 + 40px*2); /* navbar height + padding, adjust if needed */
        transition: left 0.4s ease;
        overflow-y: auto; /* scroll if menu is tall */
        z-index: 1050;
    }

    .nav-links.active {
        left: 0; /* slide in */
    }

    .nav-links a {
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--navy);
        text-align: center;
        display: block;
        width: 100%;
        padding: 1rem 0;
    }
	
	/* Mobile menu close button */
.nav-links .mobile-close {
	display: block;    
    position: absolute;
    top: 4%;
    right: 90%;
    font-size: 2.2rem;
    cursor: pointer;
    color: var(--red);
    z-index: 1001; /* Make sure it's above the menu */
}
}

 

/* Footer - Review us on Google Button - FIXED & BEAUTIFUL */
.review-box {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #444;
    text-align: left;
}
.review-box p {
    color: #cbd5e1;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}
.google-review-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    color: #333;
    padding: 12px 28px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.05rem;
    box-shadow: 0 8px 25px rgba(0,0,0,.25);
    transition: all .3s ease;
}
.google-review-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(0,0,0,.3);
}
.google-review-btn img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}