/* 
Brand Colors 
Seiler Orange: #e6581c
Seiler Yellow: #e9bd2e
Seiler Black: #040405
Seiler White: #fdfefd
*/

@import url('https://fonts.cdnfonts.com/css/garet');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


* {

}
/*outline: 1px solid limegreen !important;*/

a {
    color:#e6581c;
}

body,
html {
  width: 100%;
  height: 100%;
  margin: 0px;
}

body {
    background-color: #040405;
    color: #fff!important;
}

nav {
    background-color: #fdfefd;
}

header {
    border-bottom: 4px solid #e6581c;
    background-color: #fdfefd;
}

footer {
    background-color: #fdfefd;
}

p {
    color: #ccc;
    font-family: 'Garet', sans-serif;
                                                
}

li {
    color: #ccc;
    font-family: 'Garet', sans-serif;
                                                
}

a {
    font-family: 'Garet', sans-serif;                                      
}

h1 {
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
}

h2 {
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
}

h3 {
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
}

.mobile-show {
    display: none!important;
}

.mobile-hide {
    display: block!important;
}

.main {
    padding-top:120px;
}

.pt-4 {
    padding-top: 4px;
}

@media (min-width: 320px) and (max-width: 480px) {
    .mobile-show {
        display: block!important;
    }

    .mobile-hide {
        display: none!important;
    }
    .m-column {
        flex-direction: column;
    }
    .payment-info-img {
        height: 100%;
        max-width: 100%;
    }
    .tabs-three .nav .nav-item a.active {
        color: #fff;
        background: #1a1a21;
        border-bottom-left-radius: 8px; 
        border-top-left-radius: 8px; 
        border-bottom-right-radius: 8px; 
        border-top-right-radius: 8px; 
        text-decoration-line: none;
        font-weight: 600;
        font-family: "Poppins", sans-serif;
        min-height: 100%;
    }
    .tabs-three .nav .nav-item a {
        font-size: 16px;
        line-height: 24px;
        color: #ccc;
        font-weight: 700;
        padding: 13px;
        -webkit-transition: all 0.3s ease-out 0s;
        -moz-transition: all 0.3s ease-out 0s;
        -ms-transition: all 0.3s ease-out 0s;
        -o-transition: all 0.3s ease-out 0s;
        transition: all 0.3s ease-out 0s;
        display: block;
        position: relative;
        border-top-right-radius: 8px;
        border-top-left-radius: 8px;
        border-bottom-right-radius: 8px;
        background-color: #2e2e3a;
        text-decoration-line: none;
        font-weight: 500;
        min-height: 100%;
        border-bottom-left-radius: 8px;
    }
    .tabs-three .nav .nav-item a {
        margin-bottom: 8px;
    }
    .tabs-three .tab-content .tab-text {
        border-top-right-radius: 8px; 
        border-top-left-radius: 8px;
    }
}

.mr-12 {
    margin-right: 12px;
}

.no-margin {
    margin-left: 0px; 
    margin-right: 0px;
}

.bg-s-black {
    background-color: #040405;
}

.bg-s-black-2 {
    background-color: #040405;
}

.bg-s-black {
    background-color: #fdfefd;
}

.s-contact-info-container {
    background-color: #e6581c;
    color: #fdfefd;
    font-size: 14px;
    padding: 12px;
    font-weight: 500;
    font-family: 'Garet', sans-serif;
    margin-top: 48px;
}

.s-contact-info-container p{
    color: #fdfefd;
    font-family: 'Garet', sans-serif;    
}

.left-contact-p {
    color: #fdfefd;
    text-align: left;
    font-family: 'Garet', sans-serif;    
}

.center-contact-p {
    color: #fdfefd;
    text-align: center;
    font-family: 'Garet', sans-serif;    
}

.right-contact-p {
    color: #fdfefd;
    text-align: right;
    font-family: 'Garet', sans-serif;    
}

.s-navbar-bg {
    background-color: #fffde3;
}

.s-navbar-fix-pos {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
  background-color: #fdfefd;
  border-bottom: 4px solid #e6581c;
}


.s-navbar-image {
    max-height: 64px;
    max-width: 64px;
    padding-right: 4px;
}

.s-navbar-button-container {
    list-style: none;
}

@media (min-width: 320px) and (max-width: 480px) {
    .s-navbar-button-container {
        list-style: none;
        padding-top: 8px;
    }
}

.s-navbar-button {
   color: #fff;
   background-color: #e6581c;
   font-weight: 500;
   margin-right: 12px;
   font-family: 'Poppins', sans-serif;  
}

.s-navbar-button:hover {
    color: #e6581c; 
    background-color: #fff;
    border: 2px solid #e6581c;
    font-family: 'Poppins', sans-serif;  
}

.s-navbar-button:active {
    color: #e6581c!important; 
    background-color: #fff!important;
    border: 2px solid #e6581c!important;
    font-family: 'Poppins', sans-serif;  
}

.s-navbar-button-secondary {
    color: #040405;
    background-color: #fff;
    border: solid 2px #040405; 
    font-weight: 600;
    font-family: 'Poppins', sans-serif;  
 }
 
 .s-navbar-button-secondary:hover {
    color: #fff;
    background-color: #040405;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;  
 }
 
 .s-navbar-button-secondary:active {
     color: #040405!important; 
     background-color: #fff!important;
     border: 2px solid #040405!important;
     font-family: 'Poppins', sans-serif;  
 }

 .s-hero-wrapper {
    margin: auto;
    padding-top: 172px;
    padding-bottom: 4%;
    padding-left: 4%;
    padding-right: 4%;
}

@media screen and (max-width: 640px) {
    .s-hero-wrapper {
        margin: auto;
        padding-top: 96px;
        padding-left: 0;
        padding-right: 0;
    }
}

.hero-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: contain;
}

.aos-animate img {
  max-width: 100%;
  height: auto !important;
  max-height: 320px;
  object-fit: contain !important;
}

/* Prevent Safari from stretching image inside flex containers */
@supports (-webkit-touch-callout: none) {
  .hero-image {
    height: auto !important;
    max-height: 400px !important;
    aspect-ratio: 4 / 3;
  }
}

.hero-image-wrapper {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 4 / 3; /* Enforces correct proportions */
  background-image: url('/images/brand/seiler-tire-hero-image-2025.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 16px;
  display: block;
}


/* Optional: mobile tweak */
@media (max-width: 480px) {
  .hero-image {
    max-height: 300px;
    aspect-ratio: 4 / 3; /* keep the same ratio */
  }
}


 .s-hero {
    width: 100%;
    position: relative;
    align-items: center;
    background-color: #e6581c;
 }
 .s-hero-tag{
    background-color: #e9bd2e;
    font-family: "Poppins", sans-serif;
    padding: 4px;
    color: #040405;
    font-weight: 500;
    text-align: center;
    font-weight: 500;
    border-radius: 8px;
    width: fit-content;
    padding-inline: 12px;
 }
 .s-hero-text{
    max-width: 80%;
 }
 .s-main-bg {
    background-color: #1a1a21;
}

@media (min-width: 320px) and (max-width: 480px) {
    .mobile-hero-container-1 {
        width: 100%;
        padding-right: 32px;
    }
    .mobile-about-container-1 {
        width: 96%;
    }
}

@media (min-width: 320px) and (max-width: 480px) {
    .mobile-hero-container-2 {
        width: 90%;
        margin-bottom: 12px;
        margin-top: 12px;
        border-radius: 8px;
    }
}

.mobile-hero-container-2 img{
    border-radius: 16px;
}

@media (min-width: 320px) and (max-width: 480px) {
    .hero-items {
        flex-direction: column;
    }
}

 @media (min-width: 320px) and (max-width: 480px) {
    .s-main-bg {
        padding-bottom: 24px;
        padding-top: 48px;
    }
}

 .s-hero-button {
    color: #fff;
    background-color: #e6581c;
    font-weight: 500;
    width: fit-content;
    margin-right: 12px;
    font-family: 'Poppins', sans-serif;     
 }
 
 .s-hero-button:hover {
     color: #e6581c; 
     background-color: #fff;
     border: 2px solid #e6581c;
 }
 
 .s-hero-button:active {
     color: #e6581c!important; 
     background-color: #fff!important;
     border: 2px solid #e6581c!important;
 }
 
 .s-hero-button-secondary {
     color: #fff;
     background-color: #040405;
     border: solid 2px #fff; 
     font-weight: 600;
     width: 24%;
  }
  
  .s-hero-button-secondary:hover {
     color: #040405;
     background-color: #fff;
     font-weight: 600;
     border: 2px solid #040405!important;
  }
  
  .s-hero-button-secondary:active {
      color: #040405!important; 
      background-color: #fff!important;
      border: 2px solid #040405!important;
  }

    .s-blog-title-padding {
    padding-top: 4%;
    padding-bottom: 4%;
    display: absolute;
    }

  @media (min-width: 320px) and (max-width: 480px) {
    .s-hero-tag {
        margin-top: 16px;
        width: fit-content;
        padding-inline: 12px;
    }

    .s-hero-text {
        max-width: 100%;
    }
    .s-hero-button {
        width: 100%; 
        margin-right: 0;
    }
    .s-blog-title-padding {
        padding-top: 8%%;
        padding-bottom: 8%;
    }
}

  .s-hero-divider{
    fill: #1a1a21;
  }

  .s-services {
    background-color: #e6581c; 
    padding-top: 96px;
    padding-bottom: 96px;
  }

  .s-services h2{
    font-weight: 600;
    padding-bottom: 12px;
  }

  .s-services-card {
    background-color: #1a1a21; 
    border-radius: 8px;
  }

  .s-about {
    background-color: #e6581c;
    border: 2px solid #e6581c;
  }

  .s-about-text-container {
    background-color: #1a1a21;
    padding: 16px;
    border-radius: 8px;
  }

  .s-about-header {
    color: rgb(255, 255, 255);
    font-family: Poppins, sans-serif;
    font-weight: 600;
    font-style: normal;
  }

  .breadcrumb-container { 
    background-color: #1a1a21;
    margin-left: 8%;
    margin-right: 8%;
    padding-left: 8px; 
    padding-right: 8px;
    border-radius: 8px;
    font-style: italic; 
  }

  .below-element-text {
    color: #fdfefd;
    font-weight: 400;
    font-style: italic;
  }

  .breadcrumb-icon {
    color: #ccc;
  }



  /* tabs-three */
@media (max-width: 767px) {
    .tabs-three .nav {
      display: block;
    }
  }
  @media only screen and (min-width: 576px) and (max-width: 767px) {
    .tabs-three .nav {
      display: flex;
    }
  }
  .tabs-three .nav .nav-item a {
    font-size: 16px;
    line-height: 24px;
    color: #ccc;
    font-weight: 700;
    padding: 13px;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    display: block;
    position: relative;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    background-color: #2e2e3a;
    text-decoration-line: none;
    font-weight: 500;
    min-height: 100%;
  }
  .tabs-three .nav .nav-item a:hover {
    background-color: #1a1a21;
    color: #fff;
  }

  .tabs-three .nav .nav-item a i {
    margin-right: 5px;
    font-size: 18px;
  }
  .tabs-three .nav .nav-item a::before {
    position: absolute;
    content: "";
    background-color: #1a1a21;
    width: 100%;
    left: 0;
    bottom: 0;
  }
  .tabs-three .nav .nav-item a.active {
    color: #fff;
    background: #1a1a21;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    text-decoration-line: none;
    font-weight: 600;
    font-family: "Poppins", sans-serif;
    min-height: 100%;
  }
  .tabs-three .nav .nav-item a.active::before {
    
  }
  .tabs-three .tab-content .tab-text {
    padding: 15px;
    background-color: #1a1a21;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }
  .tabs-three .tab-content .tab-text .text {
    color: #ccc;
  }

  .tab-header {
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 24px;
    margin-bottom: 4px;
  }

  /* ===== Buttons Css ===== */
.call-action-one .call-action-content .call-action-btn .primary-btn {
    background: var(--primary);
    color: #ccc;
    box-shadow: var(--shadow-2);
  }
  .call-action-one .call-action-content .call-action-btn .active.primary-btn, .call-action-one .call-action-content .call-action-btn .primary-btn:hover, .call-action-one .call-action-content .call-action-btn .primary-btn:focus {
    background: var(--primary-dark);
    color: #ccc;
    box-shadow: var(--shadow-4);
  }
  .call-action-one .call-action-content .call-action-btn .deactive.primary-btn {
    background: var(--gray-4);
    color: #ccc;
    pointer-events: none;
  }

  .call-action-one {
    background-color: #212529;
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .call-action-one .call-action-content .call-action-text {
    margin-top: 0;
  }
  .call-action-one .call-action-content .call-action-text .action-title {
    font-weight: 600;
    color: #fdfefd;
  }
  .call-action-one .call-action-content .call-action-text .text-lg {
    color: #ccc;
    margin-top: 8px;
    margin-bottom: 0;

  }
  .call-action-one .call-action-content .call-action-btn {
    margin-top: 0;
  }

.footer-faq-cta {
    line-height: 0;
}

.footer-bg {
    background-color:#fdfefd;
    border-top: 4px solid #e6581c;
}

.s-footer-info p{
    color: #040405;
    font-size: 16px;
    font-weight: 400;
    font-family: "Poppins", sans-serif;
    padding-left: 8px;
}

.s-footer-info-img-divider {
    border: 2px solid #e6581c;
    border-radius: 8px;
}

.s-footer-icon {
    background-color: #1a1a21;
    color: #e6581c;
    font-size: 24px;
    padding: 8px;
    border-radius: 999px;
}

.footer-map {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    margin-left: 8px;
    border: 2px solid #e6581c !important;
}

@media (min-width: 320px) and (max-width: 567px) {
    .footer-map {
        margin-top: 16px;
    }
    .call-action-content {
        margin-left: auto;
        margin-right: auto;
    }
    .napa-autocare-center-img {
        padding-top: 16px;
    }
}

.mb-digital-cta p{ 
    color: #040405;
    font-style: italic;
    text-align: right;
}

.tab-image {
    width: 100%; 
    max-height: 256px;
    margin-bottom: 12px;
    border-radius: 8px;
}

.text-center {
    text-align:center;
}

.single-partner {
    padding-bottom: 48px;
}

.single-partner img{
    width: 200px; 
    height: 100px;
    border-radius: 12px;
    overflow: hidden;
    background:#fff;
    border: 2px solid #e6581c;
    box-shadow: 0px 0px 32px 1px #e6581c;
}

@media (min-width: 320px) and (max-width: 480px) {
    .single-partner {
        margin-top: 30px;
        padding-bottom: 24px;
    }
    .single-partner img {
        width: 172px; 
        border: 1px solid #e6581c;
        box-shadow: 0px 0px 50px 0.5px #e6581c;
    }
}
.payment-info-img {
    height: 48px;
    max-width: 100%;
}

.napa-autocare-center-img {
    height: 64px;
    text-align: right;
}


.shapedividers_com-8505{
    overflow:hidden;
    position:relative;
    }
    .shapedividers_com-8505::before{
    content:'';
    font-family:'shape divider from ShapeDividers.com';
    position: absolute;
    bottom: -1px;
    left: -1px;
    right: -1px;
    top: -1px;
    z-index: 3;
    pointer-events: none;
    background-repeat: no-repeat; 
    background-size: 100% 90px;
    background-position: 50% 0%;    
    background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"><path d="M0 .5c3.07.55 9.27-.42 16.14 0 6.88.4 13.75.57 19.14-.11V0H0z" fill="%23fbd8c2"/><path d="M0 1c3.17.8 7.29-.38 10.04-.55 2.75-.17 9.25 1.47 12.67 1.3 3.43-.17 4.65-.84 7.05-.87 2.4-.02 5.52.88 5.52.88V0H0z" opacity=".5" fill="%23fbd8c2"/><path d="M0 1.85c2.56-.83 7.68-.3 11.79-.42 4.1-.12 6.86-.61 9.58-.28 2.73.33 5.61 1.17 8.61 1 3-.19 4.73-.82 5.3-.84V.1H0z" opacity=".5" fill="%23fbd8c2"/></svg>'); 
    }
    
    @media (min-width:768px){
    .shapedividers_com-8505::before{
    background-size: 100% 90px;
    background-position: 50% 0%;   
    }  
    }
     
    @media (min-width:1025px){
    .shapedividers_com-8505::before{ 
    bottom: -0.1vw;
    left: -0.1vw;
    right: -0.1vw;
    top: -0.1vw; 
    background-size: 148% 215px;
    background-position: 50% 0%;  
    background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"><path d="M0 .5c3.07.55 9.27-.42 16.14 0 6.88.4 13.75.57 19.14-.11V0H0z" fill="%231a1a1a"/><path d="M0 1c3.17.8 7.29-.38 10.04-.55 2.75-.17 9.25 1.47 12.67 1.3 3.43-.17 4.65-.84 7.05-.87 2.4-.02 5.52.88 5.52.88V0H0z" opacity=".5" fill="%231a1a1a"/><path d="M0 1.85c2.56-.83 7.68-.3 11.79-.42 4.1-.12 6.86-.61 9.58-.28 2.73.33 5.61 1.17 8.61 1 3-.19 4.73-.82 5.3-.84V.1H0z" opacity=".5" fill="%231a1a1a"/></svg>'); 
    }
    }
    @media (min-width:2100px){
    .shapedividers_com-8505::before{
    background-size: 148% calc(2vw + 215px);
    }
    }
   
.blog-image {
    border-radius: 12px;
    max-width: 80%;
}




.hp-blog-cta {
    background-color: #212529;
    border-top: 2px solid #e6581c
}

.seasonal-car-image-wrapper {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 4 / 3; /* Enforces correct proportions */
  background-image: url('/images/blog/Seasonal-Car-Care-Checklists-image.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 16px;
  display: block;
}