/* RESET */

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

body{

    background:#000;

    font-family:'Barlow Condensed',sans-serif;

    color:white;

}

/* ==========================
   TOP BAR
========================== */

.top-bar{

    height:48px;

    background:#050505;

    border-bottom:2px solid #b40000;

    display:grid;

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

    align-items:center;

    padding:0 45px;

}

.contact-left{

    font-size:20px;

    font-weight:700;

    justify-self:start;

}

.contact-center{

    font-size:20px;

    font-weight:700;

    justify-self:center;

}

.contact-right{

    display:flex;

    align-items:center;

    gap:10px;

    justify-self:end;

    font-size:20px;

    font-weight:700;

}

.contact-right img{

    width:26px;

    display:block;

}

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

.hero{
    position:relative;
    width:100%;
    height:670px;
    background:url("../images/hero-background.jpg") center center/cover no-repeat;
    overflow:hidden;
}

.hero-overlay{
    position:relative;
    width:100%;
    height:100%;
}

.hero-logo{
    position:absolute;
    left:110px;
    top:-190px;      /* moved up 50px */
    width:560px;
}

.hero-logo img{
    width:728px;      /* 30% larger than 560px */
    display:block;
}

.hero-text{
    position:absolute;
    left:185px;      /* moved right 20px */
    top:282px;
    width:560px;
    text-align:center;
    z-index:20;
}

.hero-text h2{

    color:#fff;

    font-size:28px;

    font-style:italic;

    font-weight:700;

    text-shadow:0 3px 8px #000;

    margin-bottom:20px;

}

.since-line{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;

    position:relative;
    top:-28px;      /* moved up 3 more pixels */
}

.since-line span{

    width:140px;

    height:4px;

    background:#cf0000;

}

.since-line h1{
    font-size:54px;
}/*======================================
  SHOP BY MANUFACTURER
======================================*/

.manufacturer-section{
    background:#000;
    padding:1px 0 35px;
    border-top:2px solid #b30000;
}

.manufacturer-title{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:22px;
}

.manufacturer-title h2{

    color:#fff;

    font-size:58px;

    font-weight:900;

    font-style:italic;

    letter-spacing:2px;

    text-transform:uppercase;

    margin:0;

    line-height:1;
}

.title-line{

    width:170px;

    height:5px;

    background:#d40000;

    display:block;
}/* Manufacturer Grid */

.manufacturer-grid{

    width:96%;

    margin:20px auto 0;

    display:grid;

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

    gap:6px;

}

.manufacturer-card{
    border:1px solid #555;
    background:#111;
    overflow:hidden;
    display:block;
    text-decoration:none;
    transition:all .25s ease;
}

.manufacturer-card img{
    width:100%;
    display:block;
    transition:transform .25s ease;
}

.manufacturer-card:hover{
    border-color:#d40000;
    transform:translateY(-3px);
    box-shadow:0 0 18px rgba(255,0,0,.45);
}

.manufacturer-card:hover img{
    transform:scale(1.03);
}/* ABOUT SECTION */

.about-section{
    display:grid;
    grid-template-columns:500px 1fr;
    gap:5px;

    width:100%;
    margin:-20px 0 1px;
}

    
}

.about-image{
    position:relative;
    overflow:hidden;
    max-width:500px;
    height:300px;

    justify-self:start;

    margin-left:5px;
    margin-top:-28px;

    
}

.about-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;

    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 12%,
        black 55%,
        rgba(0,0,0,.4) 80%,
        transparent 100%
    );

    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 12%,
        black 55%,
        rgba(0,0,0,.4) 80%,
        transparent 100%
    );
}

.about-image::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;

   background: linear-gradient(
    to right,
    #000 0%,
    rgba(0,0,0,0) 22%,
    rgba(0,0,0,0) 70%,
    #000 100%
);
}


.since-title{
    font-family: 'Knewave', cursive;
    font-size:72px;
    color:#d40000;
    font-weight:400;
    letter-spacing:1px;
    line-height:.85;
    margin:-19px 0 2px;
    text-shadow:0 0 12px rgba(255,0,0,.35);

    
}

.about-content{
    height:280px;
    width:100%;

    border:1px solid #444;
    padding:25px 40px;
    overflow:hidden;
    box-sizing:border-box;

    background:linear-gradient(
        180deg,
        #191919 0%,
        #111111 100%
    );

    
}

.about-content h3{

    color:#ffffff;

    font-size:30px;

    font-weight:800;

    font-style:italic;

    text-transform:uppercase;

    letter-spacing:2px;

    margin-bottom:1px;

}

.about-content p{
    color:#d3d3d3;
    font-size:20px;
    line-height:1.8;
    margin-bottom:-13px;
    letter-spacing:.3px;

    
}

.about-image{
    max-width:500px;
    height:280px;
    overflow:hidden;
    border:1px solid #333;

    
}

.about-icons{
    display:flex;
    justify-content:flex-start;
    align-items:flex-start;
    width:100%;
    margin-top:30px;
    gap:80px;
}


.about-icon{
    text-align:center;
    color:#ffffff;
    font-size:34px;
    flex:0 0 120px;

    
}

.about-icon span{

    display:block;

    margin-top:10px;

    color:#ffffff;

    font-size:13px;

    font-weight:700;

    text-transform:uppercase;

    line-height:1.4;

    letter-spacing:1px;

}
.site-footer{
    width:100%;
    height:50px;
    background:#050505;
    border-top:1px solid #e00000;

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

    gap:65px;

    box-sizing:border-box;

    color:#ffffff;
    font-size:30px;
    font-weight:400;
    letter-spacing:3px;
    text-transform:uppercase;
}

.site-footer span{
    color:#e00000;
    font-size:18px;
}

.site-footer .race-heritage a{
    color:#0074c8;
    text-decoration:none;
}

.product-layout {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 45px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
}

/* Product gallery */

.product-gallery {
    width: 100%;
}

.main-product-image {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    border: 1px solid #333;
    padding: 12px;
    box-sizing: border-box;
    background: #000;
}

.main-product-image img {
    display: block;
    width: 100%;
    height: auto;
}

/* Thumbnail row */

.thumbnail-row {
    display: flex;
    justify-content: center;
    gap: 22px;
    margin-top: 22px;
}

.thumbnail {
    width: 175px;
    height: 135px;
    object-fit: cover;
    padding: 3px;
    border: 2px solid #333;
    box-sizing: border-box;
    cursor: pointer;
}

.thumbnail:hover {
    border-color: #ff0000;
}

.thumbnail.active {
    border-color: #ff0000;
}

/* Product information */

.product-info {
    width: 100%;
}

/* =========================================
   RESPONSIVE PRODUCT PAGE
   ========================================= */

@media (max-width: 900px) {

    .product-layout {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 0 20px;
    }

    .product-main-image {
        max-width: 100%;
        margin: 0 auto;
    }

    .thumbnail {
        width: 150px;
        height: 115px;
    }
}

@media (max-width: 600px) {

    .product-layout {
        padding: 0 10px;
    }

    .thumbnail-row {
        gap: 10px;
    }

    .thumbnail {
        width: 100px;
        height: 80px;
    }
}