/* ===========================
   GLOBAL / BACKGROUND
   Mobile-first
=========================== */
.bg-full {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

body {
    margin: 0;
    padding-top: 170px;
    /* space for fixed headers */
    font-family: Arial, sans-serif;
}

/* ===========================
   HEADER 1 — BLACK BAR
=========================== */
.top-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #111;
    color: #fff;
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 9999;
    font-size: 13px;
}

/* ===========================
   HAMBURGER BUTTON
=========================== */
.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
    position: fixed !important;
    right: 15px;
    top: 10px;
    z-index: 10000 !important;
}

.menu-toggle span {
    display: block;
    width: 28px;
    height: 3px;
    background: white;
    border-radius: 3px;
}

/* ===========================
   DESKTOP NAVIGATION
=========================== */
.main-menu {
    position: fixed;
    top: 40px;
    width: 100%;
    background: #d60000;
    padding: 10px 0;
    text-align: center;
    z-index: 9998;
    display: block;
}

.main-menu ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-menu a {
    font-family: Arial Black;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
}

.main-menu a:hover {
    text-decoration: underline;
}

/* ===========================
   MOBILE BEHAVIOR
=========================== */
@media (max-width: 768px) {

    /* Hide icons + phone number */
    .left-icons,
    .center-info,
    .right-cart {
        display: none !important;
    }

    /* Show hamburger */
    .menu-toggle {
        display: flex !important;
    }

    /* Hide full menu by default on mobile */
    .main-menu {
        display: none;
        position: absolute;
        top: 45px;
    }

    /* When toggled open */
    .main-menu.open {
        display: block;
        background: #d60000;
        width: 100%;
        padding: 15px 0;
    }

    /* Mobile menu layout */
    .main-menu ul {
        flex-direction: column;
        gap: 20px;
        padding: 0;
    }

    .main-menu ul li a {
        font-size: 18px;
        padding: 12px 0;
        display: block;
    }
}


/* ===========================
   ALERT BAR
=========================== */
.site-alert {
    position: fixed;
    top: 80px;
    width: 100%;
    background: #d60000;
    color: white;
    text-align: center;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: bold;
    z-index: 9997;
}

/* ===========================
   CONTENT WRAPPER
=========================== */
.content-wrapper {
    width: 100%;
    padding-top: 40px;
}

/* LOGO + QUOTE (MOBILE CENTERED) */
.logo-wrapper {
    text-align: center;
    margin-top: 30px;
}

.logo-img {
    height: 150px;
}

.quote-wrapper {
    text-align: center;
    margin-top: 15px;
}

.quote-img {
    height: 140px;
}

/* ===========================
   SUB BOXES (TIRES / WHEELS / etc.)
   Mobile-first: 1 per row
=========================== */
.sub-images-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
    padding: 20px 16px;
    margin-top: 280px;
    /* after car/slider section */
}

.sub-box {
    width: 100%;
    height: 200px;
    background: red;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: .3s;
    cursor: pointer;
}

.sub-box img {
    width: 55%;
}

.sub-box:hover {
    background: blue;
    transform: scale(1.05);
}

.sub-label {
    margin-top: 12px;
    color: white;
    font-size: 18px;
    font-family: Arial Black;
}

/* ===========================
   DISC IMAGE
=========================== */
.disc-wrapper {
    text-align: center;
    margin-top: 30px;
}

.disc-img {
    width: 94%;
    max-width: 1200px;
    transition: .3s;
}

.disc-img:hover {
    transform: scale(1.05);
}

/* ===========================
   FORM + GALLERY
   Mobile-first: stacked column
=========================== */
.tire-form-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 60px 16px 80px 16px;
    margin-top: 20px;
}

.gallery-title {
    color: white;
    font-size: 32px;
    font-weight: bold;
    text-align: center;
}

.tire-form-box {
    width: 100%;
    max-width: 420px;
    background: #0033cc;
    padding: 30px 20px;
    border-radius: 10px;
    text-align: center;
}

.shop-title {
    font-size: 42px;
    font-family: Impact;
    color: white;
}

.exact-select {
    width: 100%;
    padding: 10px 14px;
    background: #d9d9d9;
    border-radius: 40px;
    border: none;
    margin: 10px auto;
    text-align: center;
    font-size: 16px;
}

.exact-btn {
    width: 70%;
    padding: 10px;
    background: white;
    color: #0033cc;
    border: none;
    margin-top: 18px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 18px;
}

/* ===========================
   BASIC ANIMATION HELPERS
=========================== */
.hidden {
    opacity: 0;
    transition: .9s ease-out;
}

.slide-left {
    transform: translateX(-300px);
}

.slide-right {
    transform: translateX(300px);
}

.show {
    opacity: 1;
    transform: translateX(0);
}

/* ===========================
   DIAGONAL SECTION + SLIDER
   Mobile-first: simpler, still left side
=========================== */
.diagonal-box-wrapper {
    width: 100%;
    margin-top: 60px;
    position: relative;
}

.diagonal-box {
    width: 100%;
    height: 1400px !important;
    /* smaller height for mobile */
    background: white;
    position: relative;
    overflow: hidden;
    /* border: 8px solid green; */
    filter: drop-shadow(0 9px 12px rgba(37, 12, 222, 0.45));
    filter: drop-shadow(0 35px 20px #1e04e9aa);




}

/* LEFT-SIDE BLACK TRIANGLE (MOBILE) */
.diagonal-box::after {
    content: "";
    position: absolute;
    top: 0;
    left: -1px;
    width: 0;
    height: 0;
    border-top: 0 solid transparent;
    border-left: 100vw solid black;
    border-bottom: 260px solid transparent;
}

/* SLIDER (MOBILE: FULL WIDTH TOP-LEFT) */
.slider-wrapper {
    position: absolute;
    top: 20px;
    left: 4%;
    width: 92%;
    height: 220px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
}

.slider-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.slider-btn {
    background: rgba(0, 0, 0, 0.6) !important;
    color: white !important;
    border: none !important;
    width: 60px !important;
    height: 40px !important;
    font-size: 18px !important;
    border-radius: 0 !important;
    cursor: pointer;
    transition: 0.2s;
}

.left-btn {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
}

.right-btn {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}

/* ===========================
   CAR IMAGE WITH CONTENT
   Mobile-first: stacked (car above, text below)
=========================== */
.car-image-wrapper {
    position: relative;
    width: 90%;
    max-width: 600px;
    margin: 260px auto 0 auto;
    /* under slider */
    z-index: 5;
}

.car-img {
    width: 100%;
    height: auto;
    filter: brightness(0.9);
}

/* TEXT BELOW CAR ON MOBILE */
.car-content {
    position: static;
    margin-top: 20px;
    text-align: center;
    justify-content: center;
    width: 90%;
    transform: none;
    font-family: "Arial Black", Arial, sans-serif;
}

.car-content h1 {
    color: #d60000;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
}

.car-content p {
    color: #666;
    font-size: 14px;
    text-align: justify;
    margin-bottom: 12px;
}

.car-content h3 {
    color: #d60000;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 18px;
}

.car-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    gap: 12px;
}

.car-btn {
    background: #d60000;
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 0;
    font-size: 14px;
    font-weight: bold;
    align-items: center;
    cursor: pointer;
    transition: background 0.3s;
}

.car-btn:hover {
    background: #b30000;
}

.car-content {
    position: absolute;
    text-align: justify !important;
    top: 20%;
    left: 143%;
}

/* FIX disappearing car text after animation */
@media (min-width: 992px) {
    .car-content.slide-right {
        transform: translateX(200px) translateY(-50%);
    }

    .car-content.show {
        transform: translateX(0) translateY(-50%);
    }
}


/* ===========================
   SOCIAL SECTION
   Mobile-first: full width rows
=========================== */
.social-section {
    position: relative;
    width: 92%;
    margin: 80px auto 60px auto;
    background: white;
    padding: 25px 16px 30px 16px;
    border-radius: 0;
    z-index: 10;
}

/* GRID LAYOUT MOBILE: 1 COLUMN (FULL-WIDTH ROWS) */
.social-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.social {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    color: white;
    font-family: Arial Black, sans-serif;
    padding: 16px;
    border-radius: 5px;
    height: auto;
    transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}

/* ICON STYLE */
.social i {
    font-size: 32px;
}

/* TEXT STYLE */
.social span {
    font-size: 16px;
    font-weight: bold;
}

/* COLORS */
.purple {
    background: linear-gradient(to right, #d6009c, #4b0082);
}

.blue {
    background: #3b5998;
}

/* Facebook */
.red {
    background: #c41200;
}

/* Yelp */
.sky {
    background: #1da1f2;
}

/* Twitter */
.green {
    background: #2e7d32;
}

/* Google */

/* GRID POSITIONS (MOBILE – simple, ignore columns) */
.insta {
    height: auto;
}

.facebook {}

.yelp {}

.twitter {}

.google {}

/* HOVER EFFECTS */
.social:hover {
    transform: scale(1.03) translateY(-2px);
    box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.25);
    opacity: 0.96;
}

.social:hover i,
.social:hover span {
    filter: brightness(1.2);
}

/* ===============================
   WELCOME – HEADING SECTION
   (White bar on top of text)
=============================== */
.welcome-top {
    width: 100%;
    background: white;
    text-align: center;
    padding: 60px 16px 40px 16px;
    margin-top: 40px;
    top: 40%;
    position: relative;
    /* Add this */
    z-index: 10;
    /* Add this to ensure it's above other elements */
}

.welcome-title-top {
    font-size: 34px;
    /* slightly smaller for phones, but still big */
    font-weight: 900;
    color: #0037ff;
    margin-top: -65px !important;
    /* font-family: Impact, Arial Black, sans-serif; */
    font-family: inherit !important;
}

.welcome-title-bottom {
    font-size: 90px;
    font-weight: 900;
    margin-top: -30px;
    color: white;
    background: transparent !important;
    /* font-family: Impact, Arial Black, sans-serif; */
    font-family: "Coda", sans-serif !important;
}

/* ===============================
   WELCOME – PARAGRAPH SECTION
=============================== */
.welcome-content {
    width: 100%;
    text-align: center;
    padding: 30px 16px 60px 16px;
    background: transparent !important;
}

.welcome-text {
    font-size: 18px;
    line-height: 1.6;
    margin: 18px auto;
    max-width: 1000px;
    background: transparent !important;
    color: white;
    /* readable on background image */
}

/* ===============================
   SLIDE-UP ANIMATION (for welcome text)
=============================== */
.slide-up {
    opacity: 0;
    transform: translateY(80px);
    transition: all 1.1s ease-out;
}

.slide-up.show {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   DESKTOP / TABLET ENHANCEMENTS
   We add layout complexity only for bigger screens
============================================================ */

/* Tablet ≥ 768px */
@media (min-width: 768px) {

    .top-header {
        padding: 10px 40px;
        font-size: 15px;
    }

    .main-menu {
        top: 37px !important;
        padding: 12px 0;
    }

    .main-menu ul {
        gap: 20px;
    }

    .main-menu a {
        font-size: 14px;
    }

    .site-alert {
        top: 81px !important;
        font-size: 13px;
    }

    .logo-img {
        height: 180px;
    }

    .quote-img {
        height: 160px;
    }

    /* SUB BOXES: 2 per row */
    .sub-images-wrapper {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 380px;
    }

    .sub-box {
        width: 45%;
        height: 230px;
    }

    /* FORM SECTION: still stacked but centered */
    .tire-form-section {
        padding: 90px 40px 110px 40px;
    }

    /* SOCIAL GRID: 2 columns on tablet */
    .social-section {
        width: 80%;
    }

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

    .welcome-title-top {
        font-size: 72px;
    }

    .welcome-title-bottom {
        font-size: 110px;
    }

    .welcome-text {
        font-size: 20px;
    }
}

/* Desktop ≥ 992px */
@media (min-width: 992px) {

    /* SUB BOXES: 4 per row like original */
    .sub-images-wrapper {
        flex-wrap: nowrap;
    }

    .sub-box {
        width: 22%;
        height: 250px;
    }

    /* FORM + GALLERY SIDE-BY-SIDE */
    .tire-form-section {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 50px;
    }

    /* DIAGONAL SECTION: restore larger shape */
    .diagonal-box {
        height: 2000px;
    }

    .diagonal-box::after {
        border-left: 1500px solid black;
        border-bottom: 500px solid transparent;
    }

    /* SLIDER: keep left (like your original) */
    .slider-wrapper {
        top: 0;
        left: 5%;
        width: 700px;
        height: 280px;
    }

    .slider-img {
        width: 67%;
        height: 67%;
    }

    .slider-btn {
        width: 90px !important;
        height: 50px !important;
        font-size: 22px !important;
    }

    .left-btn {
        left: 110px;
    }

    .right-btn {
        right: 110px;
    }

    /* CAR SECTION: return to original: car with text to the right */
    .car-image-wrapper {
        position: absolute;
        width: 600px;
        top: 320px;
        margin: 0 auto;
    }

    .car-content {
        position: absolute;
        top: 20%;
        left: 143%;
        width: 300px;
        text-align: left;
        transform: translateY(-50%);
    }

    .car-content h1 {
        font-size: 30px;
    }

    .car-content p {
        font-size: 15px;
    }

    .car-content h3 {
        font-size: 20px;
    }

    .car-buttons {
        align-items: flex-start;
    }

    .car-btn {
        font-size: 16px;
        padding: 12px 20px;
    }

    /* SOCIAL GRID: original Instagram full-width + grid */
    .social-section {
        width: 60%;
        margin: 800px auto 60px auto;
    }

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

    .insta {
        grid-column: 1 / 4;
        height: 110px;
    }

    .facebook {
        grid-column: 1 / 2;
    }

    .yelp {
        grid-column: 2 / 3;
    }

    .twitter {
        grid-column: 3 / 4;
        grid-row: 2 / 4;
        height: 190px;
        flex-direction: column;
    }

    .google {
        grid-column: 1 / 3;
        grid-row: 3;
    }

    /* WELCOME TITLES: original huge sizes on desktop */
    .welcome-top {
        padding: 80px 20px 10px 20px;
        margin-top: 100px;
    }

    .welcome-title-top {
        font-size: 80px;
    }

    .welcome-title-bottom {
        font-size: 120px;
    }

    .welcome-text {
        font-size: 22px;
    }
}


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

.site-footer {
    width: 100%;
    background: #000;
    color: white;
    padding: 60px 20px 20px 20px;
    margin-top: 80px;
}

.footer-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
    max-width: 1400px;
    margin: auto;
}

.footer-col h3 {
    font-family: Arial Black;
    font-size: 22px;
    margin-bottom: 16px;
    color: white;
}

.footer-col a {
    display: block;
    color: #ddd;
    text-decoration: none;
    margin: 6px 0;
    font-size: 15px;
}

.footer-col a:hover {
    color: white;
    text-decoration: underline;
}

.footer-col p {
    margin: 8px 0;
    font-size: 15px;
}

.footer-social i {
    font-size: 22px;
    margin-right: 15px;
    cursor: pointer;
    transition: 0.3s;
}

.footer-social i:hover {
    color: #d60000;
}

.net-logo {
    width: 90px;
    margin-top: 15px;
}

.login-link {
    display: block;
    color: #ccc;
    margin-top: 10px;
    font-size: 14px;
    text-decoration: none;
}

.login-link:hover {
    text-decoration: underline;
    color: white;
}

/* Bottom strip */
.footer-bottom {
    border-top: 1px solid #ef2727;
    margin-top: 30px;
    padding-top: 15px;
    text-align: center;
    color: #aaa;
    font-size: 14px;
}

.footer-bottom a {
    color: #ccc;
    margin: 0 8px;
    text-decoration: none;
}

.footer-bottom a:hover {
    color: white;
    text-decoration: underline;
}

/* ============================
   FIX SITE ALERT ON MOBILE
============================ */
@media (max-width: 768px) {

    .site-alert {
        width: 100vw !important;
        top: 55px !important;
        /* below hamburger/header */
        font-size: 11px !important;
        /* readable text */
        padding: 8px 6px !important;
        /* better spacing */
        line-height: 1.3;
        white-space: normal !important;
        /* allow wrapping */
        text-align: center;
    }
}

/* ===========================
   MOBILE VIEW FIXES ONLY
   =========================== */
@media (max-width: 768px) {

    /* Slider Images */
    .slider-wrapper {
        position: relative;
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
    }

    .slider-img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .slider-btn {
        width: 90px !important;
        height: 50px !important;
        font-size: 22px !important;
    }

    .left-btn {
        left: 0px;
    }

    .right-btn {
        right: 0px;
    }

    /* Car Image and Content */
    .car-image-wrapper {
        width: 100%;
        margin: 20px 0 0 0;
        /* Remove side margins */
        padding: 0;
    }

    .car-img {
        width: 100%;
        height: auto;
        margin: 0;
    }

    .car-content {
        position: static;
        margin: 20px auto 0 auto;
        text-align: center;
        width: 90%;
    }

    /* Welcome Text Alignment */
    .welcome-top {
        padding-bottom: 0;
        /* Ensure text touches bottom edge */
    }

    .welcome-title-top {
        margin-top: 140px !important;
    }
}

@media screen and (max-width: 991px) {
    .welcome-title-top {
        margin-top: 98px;
    }
}