/* =================================
   TriStar Wheel & Tire
   Version 2.1 Premium Theme
   Part 1/2
================================= */


/* ================================
   RESET
================================ */

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


body {

    font-family: Arial, Helvetica, sans-serif;

    background: #111315;

    color: #ffffff;

    line-height: 1.6;

}


a {

    color: inherit;

}


/* ================================
   COLORS

   Charcoal:
   #111315

   Card:
   #1B1F24

   Tennessee Blue:
   #0054A6

   Tennessee Red:
   #C8102E

================================ */


/* ================================
   NAVIGATION
================================ */


header {

    background: #111315;

    border-bottom: 2px solid #0054A6;

}


.navbar {

    max-width: 1200px;

    margin: auto;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 25px 20px;

}


.logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo img {
    height: 70px;
    width: auto;
    display: block;
    transition: transform 0.3s ease;
}

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



.nav-links {

    display: flex;

    list-style: none;

    gap: 30px;

}


.nav-links a {

    color: #ffffff;

    text-decoration: none;

    font-size: 16px;

    font-weight: 600;

    transition: .3s;

}



.nav-links a:hover {

    color: #0054A6;

}





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


.button,
.button:visited {

    display: inline-block;

    background: #0054A6;

    color: #ffffff;

    padding: 15px 35px;

    border-radius: 6px;

    text-decoration: none;

    font-weight: bold;

    border: 2px solid #0054A6;

    transition: .3s;

}



.button:hover {

    background: #C8102E;

    border-color: #C8102E;

    color: white;

}





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


.hero {

    min-height: 85vh;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:40px 20px;

    background:

    linear-gradient(
        rgba(17,19,21,.85),
        rgba(17,19,21,.85)
    ),

    url("../images/truck.jpg");

    background-size:cover;

    background-position:center;

}



.hero-content {

    max-width:850px;

}



.hero h1 {

    font-size:60px;

    line-height:1.1;

    margin-bottom:25px;

}



.hero p {

    font-size:22px;

    color:#B8BDC5;

    margin-bottom:40px;

}





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


.hero-modern {

    max-width:1200px;

    margin:auto;

    min-height:80vh;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:50px;

    padding:80px 20px;

}



.hero-text h1 {

    font-size:55px;

    line-height:1.1;

    margin-bottom:25px;

}



.hero-text p {

    color:#B8BDC5;

    font-size:20px;

    margin-bottom:35px;

}



.hero-image {

    background:#1B1F24;

    min-height:500px;

    border-radius:12px;

    overflow:hidden;

    border:1px solid #30363D;

}



.hero-image img {

    width:100%;

    height:500px;

    object-fit:cover;

}





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


.section {

    max-width:1200px;

    margin:auto;

    padding:80px 20px;

}



.section h2 {

    text-align:center;

    font-size:40px;

    margin-bottom:50px;

}



.dark {

    background:#0D0F11;

    max-width:none;

}






/* ================================
   CARDS
================================ */


.cards {

    display:grid;

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

    gap:25px;

}



.card {

    background:#1B1F24;

    border:1px solid #30363D;

    padding:35px;

    border-radius:12px;

    transition:.3s;

}



.card:hover {

    transform:translateY(-6px);

    border-color:#0054A6;

}



.card h3 {

    font-size:24px;

    margin-bottom:15px;

}



.card p {

    color:#B8BDC5;

}






/* ================================
   PAGE HEADERS
================================ */


.page-header {

    text-align:center;

    padding:90px 20px;

    background:#0D0F11;

    border-bottom:1px solid #30363D;

}



.page-header h1 {

    font-size:55px;

    margin-bottom:20px;

}



.page-header p {

    color:#B8BDC5;

    font-size:20px;

}
/* =================================
   TriStar Wheel & Tire
   Version 2.1 Premium Theme
   Part 2/2
================================= */


/* ================================
   BRAND CARDS
================================ */


.brand-list {

display: grid;

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

gap: 25px;

max-width: 1100px;

margin: 40px auto;

}



.brand-card {

background: #111;

padding: 25px;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

border-radius: 12px;

min-height: 150px;

}



.brand-card img {

max-width: 130px;

max-height: 70px;

object-fit: contain;

margin-bottom: 15px;

}



.brand-card p {

color: white;

font-weight: 600;

text-align: center;

margin: 0;

}

/* ================================
   IMAGE CARDS
================================ */


.image-card {

    text-align:center;

    overflow:hidden;

}



.card-image {

    width:100%;

    height:220px;

    background:#1B1F24;

    border-radius:10px;

    overflow:hidden;

    margin-bottom:20px;

}



.card-image img {

    width:100%;

    height:100%;

    object-fit:cover;

}





/* ================================
   CONTENT
================================ */


.content {

    max-width:1100px;

    margin:auto;

    padding:70px 20px;

    text-align:center;

}



.center-text {

    max-width:800px;

    margin:0 auto 40px;

    text-align:center;

    font-size:20px;

    color:#B8BDC5;

}




/* ================================
   QUOTE FORM
================================ */


.quote-form {

    max-width:850px;

    margin:auto;

    background:#1B1F24;

    padding:40px;

    border-radius:12px;

    border:1px solid #30363D;

}



.quote-form h2 {

    margin-top:35px;

    margin-bottom:20px;

    font-size:28px;

}



.quote-form input,
.quote-form select,
.quote-form textarea {

    width:100%;

    padding:15px;

    margin-bottom:18px;

    background:#111315;

    border:1px solid #3A4048;

    border-radius:8px;

    color:white;

    font-size:16px;

}



.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus {

    outline:none;

    border-color:#0054A6;

}



.quote-form textarea {

    resize:vertical;

    min-height:150px;

}



.quote-form hr {

    border:none;

    border-top:1px solid #30363D;

    margin:35px 0;

}



.quote-form .button {

    width:100%;

    margin-top:20px;

}





/* ================================
   GALLERY
================================ */


.gallery-grid {

    display:grid;

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

    gap:25px;

}



.gallery-card {

    background:#1B1F24;

    border:1px solid #30363D;

    padding:20px;

    border-radius:12px;

}



.gallery-placeholder,
.image-placeholder {

    height:220px;

    background:#111315;

    border:1px solid #30363D;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#B8BDC5;

    border-radius:8px;

}





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


.cta {

    text-align:center;

    background:#0D0F11;

    padding:80px 20px;

}



.cta h2 {

    font-size:40px;

    margin-bottom:25px;

}





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


.site-footer {

    background:#0D0F11;

    border-top:2px solid #0054A6;

    padding:50px 20px 20px;

}



.footer-container {

    max-width:1200px;

    margin:auto;

    display:grid;

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

    gap:40px;

}



.footer-section h3 {

    margin-bottom:20px;

    font-size:22px;

}



.footer-section p {

    color:#B8BDC5;

}



.footer-section a {

    display:block;

    color:#B8BDC5;

    text-decoration:none;

    margin-bottom:10px;

}



.footer-section a:hover {

    color:#0054A6;

}



.footer-bottom {

    text-align:center;

    border-top:1px solid #30363D;

    margin-top:40px;

    padding-top:20px;

    color:#888;

}




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


@media(max-width:900px){


.navbar {

    flex-direction:column;

}



.nav-links {

    margin-top:20px;

    flex-direction:column;

    gap:15px;

    text-align:center;

}



.hero-modern {

    grid-template-columns:1fr;

    text-align:center;

}



.hero h1 {

    font-size:40px;

}



.hero-text h1 {

    font-size:40px;

}



.hero-image {

    min-height:350px;

}



.section h2 {

    font-size:32px;

}



.footer-container {

    grid-template-columns:1fr;

}



.quote-form {

    padding:25px;

}


}
.logo img {
    height: 70px;
    width: auto;
    display: block;
}
/* Quote Form */

.quote-form {
    max-width: 900px;
    margin: 40px auto;
    background: #111;
    padding: 40px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}


.quote-form h2 {
    color: white;
    margin-top: 25px;
    margin-bottom: 10px;
    font-size: 24px;
}


.quote-form input,
.quote-form select,
.quote-form textarea {

    width: 100%;
    padding: 15px;

    background: #1b1b1b;
    color: white;

    border: 1px solid #333;
    border-radius: 6px;

    font-size: 16px;

}


.quote-form input::placeholder,
.quote-form textarea::placeholder {

    color: #aaa;

}


.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus {

    outline: none;
    border-color: #0054A6;

}


.quote-form hr {

    width: 100%;
    border: none;
    border-top: 1px solid #333;
    margin: 25px 0;

}


.quote-form .button {

    margin-top: 20px;
    align-self: center;
    width: 250px;

}
/* Mobile Responsive */

@media (max-width: 768px) {


    .navbar {
        flex-direction: column;
        gap: 20px;
        padding: 20px;
    }


    .logo img {
        height: 60px;
    }


    .nav-links {
        flex-direction: column;
        align-items: center;
        gap: 15px;
        width: 100%;
    }


    .hero-modern {
        flex-direction: column;
        text-align: center;
        padding: 40px 20px;
    }


    .hero-text h1 {
        font-size: 36px;
    }


    .hero-text p {
        font-size: 16px;
    }


    .hero-image img {
        width: 100%;
    }


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


    .brand-list {
        grid-template-columns: 1fr;
    }


    .section {
        padding: 50px 20px;
    }


    .quote-form {
        padding: 25px 20px;
        margin: 20px;
    }


    .quote-form h2 {
        font-size: 21px;
    }


    .button {
        width: 100%;
        text-align: center;
    }


}
.brand-card img {

    max-width: 140px;
    max-height: 70px;
    object-fit: contain;
    margin-bottom: 15px;

}


.brand-card p {

    color: white;
    font-weight: 700;
    margin: 0;

}

/* ================================
   GALLERY BUILD IMAGES
================================ */


.gallery-card img {

    width:100%;

    aspect-ratio:1 / 1;

    object-fit:cover;

    background:#111315;

    border-radius:10px;

    display:block;

}
.gallery-card {

    max-width:320px;

    margin:auto;

}