@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&family=Teko:wght@300..700&display=swap');

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
   background: transparent; border: 0; margin: 0; padding: 0; 
  }

table { 
  border-collapse: collapse; width: 100%; 
}
td { 
  vertical-align: top; 
}
header,nav,article,footer,address { 
  display: block; 
}

/***** END RESET *****/
::-moz-selection { 
  background: #000; color: #fff; text-shadow: none; 
}
::selection { 
  background: #000; color: #fff; text-shadow: none; 
}

/* Clearfix */
.cf:before,.cf:after { 
  content: " "; display: table; 
}
.cf:after { clear: both; }
.cf { zoom: 1; }

ul{margin:0; padding:0; list-style:none;}
/*---Variables converted to native CSS custom properties----*/
:root { 
  --primary: #c40b27; 
  --secondary: #121212; 
  --gray: #f5f5f5;
  --heading: 'Teko', sans-serif; 
  --body: 'Roboto', sans-serif; 
}

.btn { 
  display: inline-flex; width:auto!important; font-size:18px; font-family:var(--heading); align-items:center; gap:8px; margin: 4px; padding: 16px 32px; align-items: center; text-transform: uppercase; border-radius: 8px; transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; 
}
.btn:hover{transform:translateY(-2px) scale(1.01); box-shadow:0 10px 20px rgba(0,0,0,.15);}
.link{color:var(--primary); font-family:var(--heading); border:none; padding:0!important; font-size:20px; text-transform:uppercase; transition:.3s ease;
  position:relative;
  &::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--primary); transform:scaleX(0); transform-origin:left center; transition:transform .3s ease;}
  &:hover{color:var(--secondary); box-shadow:none!important;}
  &:hover::after{transform:scaleX(1);}
  }
.red { 
  background: var(--primary); color: #fff;
 }
 .white { 
  background: #fff; color: #000;
 }
.white-trans {
   color: #fff; background: rgba(255, 255, 255, 0.1); border:solid 1px #fff;
  }
  .trans {
   color: #000; background: rgba(255, 255, 255, 0.1); border:solid 1px #000;
  }
  .gray-back { 
    background: var(--gray); 
  }
  .red-back{background:var(--primary); color:#fff;}

.heading1{font-size:clamp(35px, 6vw, 75px); line-height:1; font-family:var(--heading); font-weight:600; letter-spacing:2px; text-transform:uppercase; text-shadow:1px 3px 8px rgba(0,0,0,0.8);}
.heading2{font-size:clamp(28px, 4vw, 50px); line-height:1; font-family:var(--heading); font-weight:600; letter-spacing:2px; text-transform:uppercase; }
.eyebrow{font-size:14px; line-height:1; font-family:var(--body); font-weight:400; letter-spacing:2.5px;}
.heading3{font-size:clamp(22px, 3vw, 30px); line-height:1; font-family:var(--heading); font-weight:600; letter-spacing:2px; text-transform:uppercase; }
.heading4{font-size:clamp(18px, 2vw, 19px); line-height:1; font-family:var(--heading); font-weight:400; letter-spacing:1px; text-transform:uppercase; }
.paragraph{font-size:15px; font-weight:400; line-height:1.5; font-family:var(--body); letter-spacing:0.2px; }

/*-------- BODY STYLES --------*/
* { box-sizing: border-box; }
body { font-family: var(--body); position:relative; }
h1,h2,h3,h4,h5 { font-family: var(--heading); }
a { text-decoration: none !important; }

.width {
   max-width: 1350px; margin: 0 auto; width: 96%; box-sizing: border-box;
   }
.pad {
   padding: clamp(20px, 3vw, 50px) 10px; 
  }
  .smpad { padding: clamp(10px, 2vw, 30px) 10px; }
.flex{display:flex; flex-direction:row; flex-wrap:wrap;}
/*--- HEADER STYLES ---------------------*/
.black-back{background:var(--secondary);}
.top-header{color:#fff; justify-content:space-between; align-items:center;}
.top-left{display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px; padding:10px;
  a{color:#fff; font-size:15px; font-family:var(--body); font-weight:400; transition:color .3s ease, background-size .3s ease; background-image:linear-gradient(var(--primary), var(--primary)); background-repeat:no-repeat; background-size:0 1px; background-position:0 100%;
    &:hover{color:var(--primary); background-size:100% 1px;}
    }
  }
.top-right{display:flex; flex-direction:row; gap:10px; align-items:center; padding:10px;
  a{color:#fff; transition:transform .25s ease;
    &:hover{transform:translateY(-2px) scale(1.08);}
    i{color:#fff; font-size:18px; transition:.3s ease;
      &:hover{color:var(--primary);}
      }
    }
  }
header{position:sticky; top:0; z-index:150; background:#fff; box-shadow:0 4px 20px rgba(0,0,0,.1);}
.header{justify-content:space-between; align-items:center; padding:10px 0px; }
.logo{max-width:250px; width:100%;
  img{width:100%; height:auto; display:block;}
  }


/*--------Hero---------*/
.swiper { width: 100%;height: 700px; position: relative; overflow: hidden; background:#000; }

.swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover;}
.grad{position:absolute; top:0; left:0; width:100%; height:100%; z-index:10; background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.1) 100%);}
.hero-text{position:absolute; top:15%; left:14%; max-width:800px; z-index:20; color:#fff;
  h1{color:#fff; line-height:1;}
  p{width:80%; padding:20px 0;color:#eee;}
}
.socials{color:#fff; z-index:20; background:rgba(0,0,0,.5); position:absolute; bottom:0; right:0; padding:20px; 
  a{color:#eee; font-weight:400; font-size:18px; padding:0 5px; transition:color .3s ease, letter-spacing .3s ease, transform .3s ease; font-family:var(--heading); letter-spacing:2px; display:inline-block;
    &:hover{color:var(--primary); letter-spacing:2.8px; transform:translateY(-2px);}
    }
    
  }

/***************************************************
 * Generated by SVG Artista on 7/10/2026, 3:44:29 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

@keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 3793.705810546875px;
    stroke-dasharray: 3793.705810546875px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 3793.705810546875px;
  }
}

.svg-elem-1 {
  animation: animate-svg-stroke-1 4s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both;
}

  /*----QLS-----*/
  .top-text-row{display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content: space-between; gap:20px; padding:30px 0;
    svg{width:calc(40% - 20px); height:auto; padding-top:30px;}
    .top-text{width:calc(50% - 20px);
      h2{color:#000; max-width:600px;}
      a{margin-top:20px;}
      }
    }

.qlSwiper{position: relative;	width: 100%;	padding: 20px 0px; overflow:hidden; box-sizing:border-box;
  .swiper-slide{transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; display:block; background-color:#fff; padding: 20px;	text-align: center;box-sizing: border-box;
  h3{font-family:var(--heading); color:#000; text-align:left; text-transform: uppercase; margin-top:10px;}
  img{width: 100%;height: 250px;object-fit: contain; padding-top:15px; transition:.3s ease-in-out;}
  i{height:45px; width:45px; transition:.3s ease; background:var(--primary); color:#fff; font-size:20px; display:flex; align-items:center; justify-content:center; position:absolute; top:10px; right:10px; cursor:pointer; transition:.3s ease;
    &:hover{background:var(--secondary);}
    }
  }
  .swiper-slide:hover{transform:translateY(-6px); border-color:#ddd; box-shadow:0 14px 26px rgba(0,0,0,.16);
    i{background:var(--secondary); transform:rotate(-12deg);}
  }
}



.black-back{color:#fff;
  .heading-text{color:#fff;}
  .brands{width:100%; margin-top:20px; display:flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-start; align-items:center; gap:5px;
    a{width:calc(25% - 5px); padding:20px; height:160px; display:flex; border-radius:8px; align-items:center; justify-content:flex-start; border:solid 1px rgba(255,255,255,.4); transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease; background:rgba(255,255,255,.1);
      &:hover{transform:translateY(-4px); border-color:rgba(255,255,255,.85); box-shadow:0 12px 24px rgba(0,0,0,.28); background:rgba(255,255,255,.16);}
      img{width:90%; height:95px; margin:0 auto; object-fit:contain; display:block;}
      }
    }
    .all{border:none!important; background:var(--primary) !important; color:#fff !important; display:flex; align-items:center; justify-content:center;
      h3{color:#fff !important; max-width:120px; text-align:center; margin:0 auto;}
      }
}

/*-----About-----*/
.about{display:flex; flex-direction:row; flex-wrap:wrap; gap:20px; padding:50px 0;
  .about-left{width:calc(50% - 20px); display:grid; grid-template-columns:repeat(2, 1fr); grid-template-rows:repeat(2, 1fr); gap:8px;
    .grid-1{grid-row:span 2 / span 2; height:100%; width:100%;}
    .grid-2{height:100%; width:100%;}
    .grid-3{grid-column-start:2; padding:15px; text-align:center; background:var(--primary); color:#fff; display:flex; flex-direction:column; justify-content:center; align-items:center;
      h3{color:#fff; line-height:20px!important;}
      p{padding-top:10px;}
      }
    img{width:100%; height:auto; object-fit:cover; display:block;}
    }
  .about-right{width:calc(50% - 20px);
    h2{color:#000;}
    p{padding-top:20px;}
    a{margin-top:20px;}
    }
  }

  .flex-row-why{display:flex; margin-top:30px; flex-direction:row; flex-wrap:wrap; gap:20px;}
  .flex-item{width:calc(50% - 20px); display:flex; flex-direction:row; gap:10px;
    i{height:45px; width:45px; background:#f7e7ea; color:transparent; -webkit-text-stroke: 2px var(--primary); font-size:20px; display:flex; align-items:center; justify-content:center; transition:.3s ease;
      }
      .flex-text{width:calc(100% - 50px);}
      h3{color:#000; font-size:clamp(18px, 2vw, 22px); font-weight:500; font-family:var(--heading); text-transform:uppercase;}
      p{font-family:var(--body); font-size:15px; line-height:1.5; color:#444; padding:0!important;}
  }
/*-----Testimonials-----*/
.testiSwiper{position: relative;	width: 100%;	padding: 20px 0px; overflow:hidden; box-sizing:border-box;
  .swiper-slide{display:block; background-color:#fff; padding: 20px;	text-align: center;box-sizing: border-box; border-bottom:solid 4px var(--primary);
 .name{font-family:var(--heading); text-align:left; color:#000; font-weight:500; font-size:20px;}
 .text{text-align:left; min-height:200px; font-family:var(--body); font-size:15px; line-height:1.5; color:#444; padding:20px 0!important;}
    .stars{display:flex; flex-direction:row; gap:5px; justify-content:flex-start;
      i{color:var(--primary); font-size:14px;}
      }
  }
}
.testimonials .heading-text .eyebrow{color:var(--primary);}

/*----Financing-----*/
.finance-row{display:flex; flex-direction:row; flex-wrap:wrap; gap:20px; align-content:center; align-items:center;}
.finance-left{width:calc(60% - 20px); 
  p{color:#ffdede; padding-top:10px;}
}
.finance-right{width:calc(40% - 20px); display:flex; flex-direction:row; justify-content:flex-end; 
  a{height:60px;}
}

/*-------RV & UTV------*/
.rv-row{display:flex; flex-direction:row; flex-wrap:wrap; }

.rv-link{position:relative; width:33.33%; border:solid 1px #000; height:430px;
  img{width:100%; z-index:5; height:100%; object-fit:cover; overflow:hidden; }
  .grad{width:100%; height:100%; object-fit:cover; position:absolute; top:0; left:0; background:linear-gradient(30deg, rgba(0,0,0,.7), rgba(0,0,0,.4)); }
  .rv-text{position:absolute; z-index:20; bottom:50px; left:50px; color:#fff; width:calc(100% - 100px); color:#fff;
    h2{line-height:50px;
    .eyebrow{padding:8px; background:var(--primary); border-radius:4px; }
    }
    p{margin:20px 0;}
  }
}
.rv-top{width:50%;}




/*----Blogs----*/
.heading-row{display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; align-items:last baseline; gap:20px; 
  .heading-text{width:calc(60% - 20px);}
  }
.blogs{display:flex; flex-direction:row; flex-wrap:wrap; gap:20px; margin-top:30px;
  .blog{width:calc(33.33% - 15px); border:solid 1px rgba(0,0,0,.1); border-radius:8px; overflow:hidden; transition:.3s ease;
    &:hover{box-shadow:0 4px 20px rgba(0,0,0,.2);}
    img{width:100%; height:200px; object-fit:cover; display:block;}
    .blog-text{padding:15px;
      .date{color:#656565; font-size:13px; font-family:var(--body); letter-spacing:1px; padding-bottom:10px; }
      h3{color:#000; font-size:clamp(18px, 2vw, 24px); text-transform:uppercase;}
      p{font-family:var(--body); font-size:15px; line-height:1.5; color:#555; padding:15px 0;}
      }
    }
  }
  .blog-article {
        max-width: 980px;
        margin: 0 auto;
    }
    .article-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 18px;
        align-items: center;
        margin-top: 10px;
    }
    .article-meta p,
    .article-meta a {
        color: #555;
        font-size: 14px;
        font-family: var(--body);
    }
    .article-meta a {
        color: var(--primary);
        text-decoration: none;
    }
    .article-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 14px 0 20px;
    }
    .article-tags p {
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        padding: 6px 10px;
        border-radius: 100px;
        border: 1px solid #ddd;
        color: #333;
        text-decoration: none;
        font-family: var(--body);
    }
    .article-featured {
        width: 100%;
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid #e8e8e8;
        margin-bottom: 20px;
     img {
        width: 100%;
        height: auto;
        display: block;
    }
  }
    .article-body p {
        color: #444;
        font-size: 16px;
        line-height: 1.7;
        margin: 14px 0;
        font-family: var(--body);
    }
    .article-body h2 {
        margin-top: 28px;
        color: #111;
    }
    .article-body table td{border:solid 1px #ddd; padding:10px;}
    .article-body table th{border:solid 1px #ddd; padding:10px; background:#f5f5f5;}
    .share-block {
        margin-top: 6px;
        margin-bottom: 20px;
    }
    .share-block h3 {
        margin-bottom: 10px;
    }
    .share-links {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .share-links a {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 14px;
        border-radius: 6px;
        border: 1px solid #ddd;
        color: #222;
        text-decoration: none;
        font-family: var(--body);
        font-size: 14px;
        transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    }
    .share-links a:hover {
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
        transform: translateY(-2px);
    }
    .article-back {
        margin-top: 30px;
        border-top: 1px solid #eee;
        padding-top: 18px;
    }
    .article-back a {
        color: var(--primary);
        text-decoration: none;
        font-family: var(--heading);
        letter-spacing: 1px;
        text-transform: uppercase;
        font-size: 18px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: color .25s ease, gap .25s ease;
    }
    .article-back a:hover {
      color: var(--secondary);
      gap: 12px;
    }
    .article-back a:hover::after {
      transform: translateX(4px);
    }

/*----Parts & Service----*/
.service-row{display:flex; flex-direction:row; flex-wrap:wrap; gap:20px; align-content:center; align-items:center;}
.service-box{background:#222; padding:30px; color:#fff; border:solid 1px rgba(255,255,255,.1); border-radius:6px; 
  width:calc(50% - 15px);
  p{color:#eee;}
  ul{margin:15px 0; padding:0; 
    li{color:#eee; font-family:var(--body); font-size:15px; line-height:1.5; padding:5px 0; list-style:none;
      i{color:var(--primary); padding-right:10px;}
      }
    }
  }

.icon-row{display:flex; align-items:center; flex-direction:row; flex-wrap:wrap; gap:15px; margin-bottom:15px; align-content:center;
  i{height:45px; width:45px; -webkit-text-stroke: 1px var(--primary); color:transparent; border:solid 1px var(--primary); background:transparent; font-size:20px; display:flex; align-items:center; justify-content:center; transition:.3s ease;}
}

/*----Socials-----*/
.socials-row{display:flex; flex-direction:row; flex-wrap:wrap; gap:20px; align-content:center; align-items:center;
  .heading-text { width:100%; max-width:300px;
  .eyebrow{color:var(--primary);}
  }
}
.socials-home{width:calc(100% - 330px); display:flex; flex-direction:row; flex-wrap:wrap; gap:10px; justify-content:flex-end;
  a{display:flex; align-content:center; align-items:center; flex-direction:row; justify-content:flex-start; padding:12px; border:solid 1px #ccc; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; font-family:var(--body);
    &:hover{transform:translateY(-3px); border-color:var(--primary); box-shadow:0 10px 18px rgba(196,11,39,.12);
      .fa-up-right-from-square{transform:translate(3px, -3px); color:var(--primary);}
    }
    .fab.fa-facebook-f{color:#fff; -webkit-text-stroke: 1px #1877F2;  font-size:20px; margin-right:12px;}
    .fab.fa-instagram{color: #E1306C;  font-size:20px; margin-right:12px;}
    .fab.fa-youtube{color:#fff; -webkit-text-stroke: 1px #FF0000;  font-size:20px; margin-right:12px;}
    .fab.fa-x-twitter{ color:#000;  font-size:20px; margin-right:12px;}
    .fab.fa-tiktok{color: #FE2C55;  font-size:20px; margin-right:12px;}
    p{color:#000; font-size:16px; font-weight:500; line-height:10px;
      span{color:#666; font-size:14px; font-weight:400; display:block;}
      }
    }
    .fa-up-right-from-square{color:#999; font-size:12px; margin-left:12px; transition:transform .25s ease, color .25s ease;}
    }

.contact-row{display:flex; flex-direction:row; flex-wrap:wrap; gap:20px; align-content:center; align-items:center;
  a, .hours{display:flex; color:transparent; width:calc(33.33% - 20px); justify-content:flex-start; flex-direction:row; align-items:center; gap:10px; padding:15px; 
    &:hover{
      i{transform:rotate(-8deg) scale(1.07); box-shadow:0 8px 14px rgba(196,11,39,.35);}
      p{color:#fff;}
    }
    i{height:45px; width:45px; background:var(--primary); -webkit-text-stroke: 1px #fff; border:solid 1px #fff; font-size:20px; display:flex; align-items:center; justify-content:center; transition:.3s ease;
      }
      p{font-size:22px; letter-spacing:1.5px; text-transform:uppercase; font-family:var(--heading); color:#fff; font-weight:500;
        span{font-size:16px; letter-spacing:.5px; color:rgba(255,255,255,.9); display:block; font-family:var(--body); font-weight:400; text-transform:none;}
      }
  }
}

/*---------Pages----------*/

.page-hero{width:100%; height:450px; position:relative; background:#000;
  .page-hero-img{width:100%; height:100%; object-fit:cover; background:#000;}
  .grad{position:absolute; top:0; left:0; width:100%; height:100%; z-index:10; background: linear-gradient(to right, rgba(0,0,00,.6) 0%, rgba(0, 0, 0, 0.6) 100%);}
}

.page-hero-text{position:absolute; text-align:center; top:0; bottom:0; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; flex-direction:column; align-content:center; left:0; right:0; margin:0 auto; max-width:950px; z-index:20; color:#fff;
  h1{color:#fff;}
  h2{color:#fff; font-size:clamp(20px, 3vw, 30px); font-family:var(--heading); font-weight:200; letter-spacing:1.5px; text-transform:uppercase; padding-top:10px;}
  p{ padding:10px 0;color:#eee;}
  .bread{font-family:var(--body); font-size:14px; color:#eee; padding-bottom:10px;
    a{color:#eee; transition:color .3s ease, opacity .3s ease;
      &:hover{text-decoration:underline!important; color:#fff; opacity:.85;}
      }
    }
  }

  .cards{display:flex; flex-direction:row; flex-wrap:wrap; gap:20px; margin-top:30px;}
  .card{padding:30px; color:#000; border:solid 1px #eee; border-radius:8px; background:#fff; width:calc(25% - 15px);
    i{height:45px; width:45px; background:#f7e7ea; color:transparent; -webkit-text-stroke:1px var(--primary); font-size:20px; display:flex; align-items:center; justify-content:center; transition:.3s ease;
      }
      h3{padding:25px 0;}
     
  }

.prev{display:flex; flex-direction:row; align-items:center; flex-wrap:wrap; justify-content:flex-start; gap:50px; 
  .left{width:calc(50% - 30px); 
    h2{margin-bottom:30px;}
    p{color:#eee;}
  }
  .right{color:#eee; width:calc(50% - 30px); background:#222; padding:30px; border-radius:8px; border:solid 1px rgba(255,255,255,.1);
    ul li {color:#eee; font-size:16px; font-family:var(--body); line-height:1.5; padding:5px 0; list-style:none;
      i{color:var(--primary);}
      }
    }
  }

  .about-row{display:flex; flex-direction:row; flex-wrap:wrap; gap:50px; align-content:center; align-items:center;
    .left{width:calc(50% - 30px); 
    h2{margin-bottom:30px;}
    p{color:#666;}
  }
    img{width:calc(50% - 30px); height:350px; object-fit:cover; display:block; border-radius:8px;}
}

.deps{display:flex; flex-direction:row; flex-wrap:wrap; gap:20px;
  .dep{width:calc(33.33% - 15px); 
    h2{color:#fff; padding-bottom:15px;}
    p{color:#eee;
      i{padding-right:10px;}
    }
  }
}

.contact-page{width:calc(40% - 20px);}

.icon-info-row{display:flex; padding:10px 0; flex-direction:row; flex-wrap:wrap; gap:15px; align-content:center; align-items:center;
  i{height:45px; width:45px; background:var(--primary); -webkit-text-stroke: 1px #fff; color:transparent; font-size:20px; display:flex; align-items:center; justify-content:center; transition:.3s ease;
    }
    p, a{font-size:16px; letter-spacing:.5px; color:#555; display:block; font-family:var(--body); font-weight:400; text-transform:none;
      b{font-family:var(--heading); font-size:24px; color:#000; text-transform:uppercase;}
      }
      a:hover{color:var(--primary); text-decoration:underline!important; text-underline-offset:4px;}
    }
    

.mahindra-bar{display:flex; flex-direction:row; justify-content:flex-start; gap:20px; flex-wrap:wrap; align-content:center; align-items:center;
   div{width:calc(25% - 15px); border-right:solid 3px var(--primary);text-align:center; color:#fff;
 h2.paragraph{color:#eee;}
 h2{line-height:20px;}
  
}
}
.large{font-size:18px; color:#000; font-family:var(--body); font-weight:500; 
  i{color:var(--primary); padding-right:10px;}
}

.brand-qls{width:100%; transition:.3s ease; display:flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-start; gap:20px; align-content:center; align-items:center;
   .brand-ql{display:block;transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; width:calc(25% - 15px); border:solid 1px #eee; position:relative; background-color:#fff; padding: 20px;	text-align: center;box-sizing: border-box;
  h3{font-family:var(--heading); color:#000; text-align:left; text-transform: uppercase; margin-top:10px;}
  img{width: 100%;height: 250px;object-fit: contain; padding-top:15px;}
  i{height:45px; width:45px; background:var(--primary); color:#fff; font-size:20px; display:flex; align-items:center; justify-content:center; position:absolute; top:10px; right:10px; cursor:pointer; transition:.3s ease;
    &:hover{background:var(--secondary);}
    }
  }
  .brand-ql:hover{transform:translateY(-6px); border-color:#ddd; box-shadow:0 14px 26px rgba(0,0,0,.16);
    i{background:var(--secondary); transform:rotate(-12deg);}
  }
}

.rv-qls{width:100%; display:flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-start; gap:20px; align-content:center; align-items:center;
   a{display:block; width:calc(33.33% - 15px); border:solid 1px #eee; position:relative; background-color:#fff;	text-align: center;box-sizing: border-box; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  &:hover{transform:translateY(-6px); border-color:#ddd; box-shadow:0 14px 26px rgba(0,0,0,.16);
    i{background:var(--secondary); transform:rotate(-12deg);}
  }
  h3{font-family:var(--heading); padding:20px; color:#000; text-align:left; text-transform: uppercase;}
  img{width: 100%;height: 260px;object-fit: cover;}
  i{height:45px; width:45px; background:var(--primary); color:#fff; font-size:20px; display:flex; align-items:center; justify-content:center; position:absolute; top:10px; right:10px; cursor:pointer; transition:.3s ease;
    &:hover{background:var(--secondary);}
    }
  }
  }
 
/*----Showroom-----*/

.brand-bands { display: flex; flex-direction: column; gap: 16px; margin-top: 24px;
    }
.brand-band {display: flex;flex-direction: row;  flex-wrap: wrap; gap: 24px;  border: 1px solid #e6e6e6; border-radius: 8px; padding: 24px; background: #fff;
    }

.brand-band-logo { width: 230px; display: flex;align-items: center;justify-content: center;
   img {width: 100%; height: 88px; object-fit: contain;}
    }

.brand-band-text {width: calc(100% - 254px);
   p {  color: #555;  font-size: 15px; line-height: 1.6;margin-top: 10px;}
  }
.brand-actions { margin-top: 14px;  display: flex;  flex-wrap: wrap;  gap: 8px;}



/*--------GENERIC FORM TEMPLATE--------------------*/

.form-row{display:flex; flex-direction:row; justify-content:flex-start; align-items:start; flex-wrap:wrap; gap:30px; position:relative;}
.form-contact{background:#222; padding:30px; color:#fff; border-radius:10px; position:sticky; top:100px; width:calc(40% - 20px);
  h2{color:#fff;}
  p{padding:10px 0; color:#eee;}
  hr{height:4px ; background:var(--primary); border:none; margin:20px 0;}
  a{display:block; padding:5px 0; color:#eee; font-family:var(--body); font-size:15px; transition:color .3s ease, transform .3s ease;
    &:hover{color:var(--primary); transform:translateX(4px);}
    }
    i{color:var(--primary); padding-right:10px;}
  }
.flex-form { 
  width: calc(60% - 20px); margin: 0 auto 2rem auto; padding: 30px; background: #fff; border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); font-size: 15px;
  label { 
    display: block; margin-bottom: 0.5rem; font-weight: 600; color: #222; letter-spacing: 0.02em; }
  input,select,textarea {
     width: 100%; padding: 12px 14px; margin-bottom: 1.2rem; border: 1px solid #ccc; border-radius: 5px; font-family: var(--body); background: #ffffff; font-size: 15px; color: #333; transition: border-color 0.2s; box-sizing: border-box;
    &:focus {
       border-color: var(--primary); outline: none; 
      }
  }
  textarea { 
    min-height: 100px; resize: vertical; }
  .form-row {
     display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; gap: 1rem;

  }
  .form-actions { 
    text-align: right; 
  }
  button,input[type="submit"],.submit-button,.fake-submit button { 
    display: inline-block !important; padding: 14px 28px !important; width: auto !important; background: var(--primary) !important; color: #fff !important; border: none !important; border-radius: 5px !important; font-size: 16px !important; font-family: var(--heading) !important; text-transform: uppercase; cursor: pointer; transition: background 0.2s;
    &:hover { background: var(--secondary) !important; 
    }
  }
  .form-note { 
    font-size: 13px; color: #888; margin-bottom: 1rem;
   }

.flex-row { 
  display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; gap: 1rem;
}

.form-whole { 
  width: 100%; 
}
.form-half { 
  width: calc(50% - 0.5rem);
 }
.form-third {
   width: calc(33.333% - 0.67rem);
   }
  }

@media (max-width: 900px) {
  .form-half,.form-third {
     width: 100%; 
    }
}

.submit-button,.flex-form .submit-button,.fake-submit button { 
  display: inline-block !important; padding: 14px 28px !important; background: #000 !important; color: #fff !important; border: none !important; border-radius: 5px !important; font-size: 16px !important; font-family: var(--heading) !important; text-transform: uppercase; cursor: pointer; transition: background 0.2s ease, transform 0.25s ease, box-shadow 0.25s ease;
 }

.submit-button:hover,.fake-submit button:hover { 
  background: #000; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
 }

/* CAPTCHA AREA (hidden state) */
.include-captcha { 
  opacity: 0; max-height: 0; overflow: hidden; transform: translateY(10px); transition: all 0.4s ease;
 }

/* SHOW STATE */
.include-captcha.show {
   opacity: 1; max-height: 350px; transform: translateY(0); 
  }

/* FAKE BUTTON FADE OUT */
.fake-submit { 
  opacity: 1; transition: opacity 0.3s ease; 
}
.fake-submit.hide {
   opacity: 0; pointer-events: none; display: none;
   }

.CaptchaPanel {
   text-align: left !important;
   }

/*-------- FOOTER STYLES ----------------*/
.footer{display:flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-start; gap:30px;}
.footer-left{width:33%; padding:35px; border-radius:6px; background:#222; color:#fff;
  h2{font-family:var(--heading); padding-top:10px; font-weight:400; text-transform:uppercase; font-size:clamp(30px, 3.5vw, 44px); color:#fff; line-height:20px; display:inline-block;  margin-bottom:15px; border-left:solid 5px var(--primary); padding-left:10px;
    span{color:#f14e67;}
  }
  P{padding:25px 0; color:rgba(255,255,255,.8);
    a{color:rgba(255,255,255,.8); font-family:var(--body); font-size:15px; line-height:2; transition:color .3s ease, letter-spacing .3s ease;
      &:hover{color:#eb213f; letter-spacing:.2px;}
      }
  }
  .footer-socials{display:flex; flex-direction:row; gap:10px; margin:20px 0 60px 0;
    i{color: var(--primary);  font-size:18px; transition:.3s ease; width:40px; height:40px; display:flex; align-items:center; justify-content:center; background:transparent; border:solid 1px var(--primary); 
      }
    }
}
.footer-right{width:calc(67% - 30px); padding:35px; border-radius:6px; background:#222; color:#fff; display:flex; flex-direction:row; justify-content:space-between; flex-wrap:wrap; gap:20px;
  .bold{font-family:var(--heading); font-size:clamp(25px, 3vw, 30px); color:#fff; line-height:30px; display:inline-block; padding:5px 0; border-bottom:solid 6px var(--primary); margin-bottom:15px;}
  ul li a{color:rgba(255,255,255,.8); font-family:var(--body); font-size:15px; line-height:2; transition:color .3s ease, transform .3s ease;
    display:inline-block;
    &:hover{color:var(--primary); transform:translateX(5px);}
    }
}






/* ---- INVENTORY STYLES - KEEP AT BOTTOM OF CSS ---- */
.listing-top-right,.buy-now-link,.check-availability-link,.view-listing-details-link,.email-seller-link { 
  background: var(--primary) !important; color: #fff !important;
 }

.list-error-container .info button,.mobile-done-button,a.buy-btn.des-buy-now,a.buy-btn.gtm-buynow.des-buy-now,button.selected-facet.ts-button,.detail-contact-bar .contact-bar-btn,button.page-nav {
   background: var(--primary) !important; color: #fff !important;
   }

/* --------------------------------
   Hover states
-------------------------------- */
.view-listing-details-link:hover,.contact-options a:hover,.fin-calc-mobile > a:hover,button.g-recaptcha.button:hover,.email-seller-link:hover,.mc-nav-controls .mc-icon-navarrow span,a.buy-btn.des-buy-now:hover,a.buy-btn.gtm-buynow.des-buy-now:hover,.detail-contact-bar .contact-bar-btn:hover { 
  background: var(--secondary) !important; color: #fff !important;
 }

/*---------- RESPONSIVE STYLES ----------*/
@media only screen and (max-width: 1250px) {
  .header .btn{display:none!important;}
  .hero-text{left:2%;}
  .brand-qls .brand-ql{width:calc(33.33% - 15px);}
  .rv-link{width:50%;}
}
@media only screen and (max-width: 1200px) {
    .top-text-row svg{width:60%;}
    .top-text-row .top-text{width:calc(40% - 20px);}
    .card{width:calc(33.33% - 15px);}
}
@media only screen and (max-width: 1100px) {
  .blogs .blog{width:calc(50% - 15px);}
  .card{width:calc(50% - 15px);}
}
@media only screen and (max-width: 1000px) {
   .top-text-row svg{display:none;}
  .top-text-row .top-text{width:100%;}
  .top-text-row{padding:15px;}
  .black-back .brands a{height:120px; padding:10px;}
  .about{flex-direction:column;
  .about-left{width:100%; height:350px;}
  .about-right{width:100%;}
  }
  .service-row{flex-direction:column;
    .service-box{width:100%;}
  }
  .socials-row{flex-direction:column;
    .socials-home{width:100%; justify-content:flex-start;}
    .heading-text{max-width:none;}
  }
  .contact-row{flex-direction:row; flex-wrap:wrap;
    a{width:calc(50% - 20px)!important;}
    .hours{width:calc(50% - 20px)!important;}
  }
  .footer{flex-direction:column;
    .footer-left{width:100%;}
    .footer-right{width:100%;}
  }
  .rv-qls a{width:calc(50% - 15px);}
  .about-row{flex-direction:column;
    .left{width:100%;}
    img{width:100%; height:350px;}
  }
  .form-row{flex-direction:column;
    .form-contact{width:100%; position:relative; top:0;}
    .flex-form{width:100%;}
  }
  .flex-form{width:100%;}
  .contact-page{width:100%;}
   .brand-qls .brand-ql{width:calc(50% - 15px);}
}
@media only screen and (max-width: 900px) {
  .swiper{height:550px;}
  .hero-text{top:5%;}
  .finance-row{flex-direction:column;}
  .finance-left{width:100%;}
  .finance-right{width:100%; justify-content:flex-start;}
  .prev .left, .prev .right{width:100%;}
  .deps .dep{width:calc(50% - 15px);}
  .rv-link{height:400px; width:100%;}
}
@media only screen and (max-width: 800px) {
   @media only screen and (max-width: 800px) {
        .brand-band-logo,
        .brand-band-text {
            width: 100%;
        }
        .brand-band {
            padding: 18px;
        }
        .brand-band-logo img {
            height: 72px;
        }
    }
    .top-header .top-right{display:none;}
    .black-back .brands{justify-content:flex-start;}
    .black-back .brands a{width:calc(33.33% - 10px);}
    .blogs .blog{width:calc(100% - 15px);}
    .mahindra-bar{flex-wrap:wrap;}
    .mahindra-bar div{width:calc(50% - 20px);}
    .flex-row{flex-direction:column;
    .form-half{width:100%;}
    }
    .flex-form input, .flex-form select, .flex-form textarea{margin-bottom:15px;}
    .flex-form .flex-row{gap:0;}
    .rv-link{width:100%;}
    .rv-row{flex-direction:column;}
}
@media only screen and (max-width: 700px) {
  .black-back .brands a{width:calc(50% - 10px);}
  .footer-col{width:calc(50% - 10px);}
   .rv-qls a{width:calc(100% - 15px);}
   .card{width:calc(100% - 15px);}
    .brand-qls .brand-ql{width:calc(100% - 15px);
      img{height:auto;}
    }
}
@media only screen and (max-width: 600px) {
  .grad{background:rgba(0,0,0,.5);}
  .about{flex-direction:column;
  .about-left{ height:260px;}
  }
  .flex-item{width:calc(100% - 20px);}
  .contact-row{flex-direction:column;
    a{width:100% !important;}
    .hours{width:100%!important;}
  }
   .deps .dep{width:calc(100% - 15px);}
   .rv-link .rv-text{left:25px; bottom:25px; width:calc(100% - 50px);}
}
@media only screen and (max-width: 500px) {
  .socials{display:none;}
  .btn{font-size:14px; padding:14px 22px;}
  #menu-button a{width:90px!important;}
  .logo{max-width:230px; padding-right:10px;}
  .header{flex-wrap:nowrap;}
  .footer-col{width:100%;}
  .footer-socials{margin:15px 0;}
  .prev .right{padding:15px;}
  .about-row img{height:220px;}
}
@media only screen and (max-width: 430px) {
  .black-back .brands a{height:100px;}
  .blogs .blog img{height:150px;}
  .service-row .service-box{padding:15px;}
  .mahindra-bar div{width:calc(100% - 20px); border-right:none; border-bottom:solid 3px var(--primary); text-align:center;}
  .rv-qls a img{height:150px;}
  .rv-qls a h2{padding:15px;}
  .card{padding:15px;}
  .icon-info-row i{font-size:16px; height:35px; width:35px;}
  
}
@media only screen and (max-width: 380px) {
  .footer-left, .footer-right{padding:15px;}
}