* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;



  text-decoration: none;



}



body {

  background-color: #f5f5f5;



  font-family: "Sarabun", sans-serif;

}

h1,
h2,
h3,
h4,
h5,
h6 {

  font-family: "Oxanium", sans-serif;



}

.blog-banner {



  background: url('./images/blog-banner-bg-1.webp') center center no-repeat;

  background-size: cover;

  min-height: 500px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #fff;

  height: 100%;



}
.blog-inner-image{
  background: url('./images/blog-premium-car-tyres/premium car tyres in dubai.jpg') center center no-repeat;
  background-size: cover;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  height: 100%;
}



.blog-banner.premium-cars {

  background-image:

    linear-gradient(rgba(0, 0, 0, 0.5),
      /* Black gradient with 50% opacity */

      rgba(0, 0, 0, 0.5)),

    url(./images/blogs-home-page-banner-2.webp);

  background-position: bottom;

}

.blog-banner.brakepad-replacement {

  background-image:

    linear-gradient(rgba(0, 0, 0, 0.5),
      /* Black gradient with 50% opacity */

      rgba(0, 0, 0, 0.5)),

    url(./images/brake-pad-banner.webp);

  background-position: bottom;

}



.blog-banner.flat-tyres {

  background-image:

    linear-gradient(rgba(0, 0, 0, 0.5),
      /* Black gradient with 50% opacity */

      rgba(0, 0, 0, 0.5)),

    url("./images/blogs-home-page-banner-3.webp");

  background-position: bottom;

}

.brick_baner {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(./images/Blogsbrake-pad-replacement-inner.webp);
  background-position: bottom;
}

.brick_baner-tyre-shop-near-me {
  background-image:

    linear-gradient(rgba(0, 0, 0, 0.5),
      /* Black gradient with 50% opacity */

      rgba(0, 0, 0, 0.5)),

    url("/Blogs/images/tyre-shop-near-me.webp");

  background-position: bottom;
}


.brick_baner-ferrari-car-tyre-repair {
  background-image:

    linear-gradient(rgba(0, 0, 0, 0.5),
      /* Black gradient with 50% opacity */

      rgba(0, 0, 0, 0.5)),

    url("/Blogs/images/ferrari-car-tyre-repair.webp");

  background-position: bottom;
}

.brick_baner-lamborghini-tyre-service-dubai {
  background-image:

    linear-gradient(rgba(0, 0, 0, 0.5),
      /* Black gradient with 50% opacity */

      rgba(0, 0, 0, 0.5)),

    url("/Blogs/images/lamborghi-car-tyre-service-dubai.webp");

  background-position: bottom;
}



*/ .blog-title {

  font-size: 40px;

  font-weight: 700;

  font-family: "Oxanium", sans-serif;

  color: #fff;

}



.blog-banner .blog-sub-title {

  font-size: 20px;

  font-weight: 400;

  font-family: "Oxanium", sans-serif;

}



.blog-inner-page {

  display: flex;

  background-color: #fff;

  flex-direction: column;

  gap: 50px;

}



.blog-inner-page .blog-inner-content {

  display: flex;

  flex-direction: column;

  gap: 30px;

}







.toc-section {

  background: #fff;

  border-radius: 8px;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);

  padding: 24px 18px;

  margin-bottom: 24px;

}



@media (max-width: 768px) {

  .blog-banner {

    min-height: 400px;

  }

  .blog-title {

    font-size: 28px;

  }

  .toc-section {

    padding: 6px;

    margin-bottom: 10px;

  }

}

.blog-content-section {

  background: #fff;

  border-radius: 8px;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);

  padding: 32px 32px 24px 32px;

  margin-bottom: 24px;

}

.recent-blogs-section {

  background: #fff;

  border-radius: 8px;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);

  padding: 24px 18px;

  margin-bottom: 24px;

}

.recent-blog-item {

  display: flex;

  align-items: center;

  margin-bottom: 18px;

}

.recent-blog-img {

  width: 68px;

  height: 80px;

  object-fit: cover;

  border-radius: 8px;

  margin-right: 12px;

}

.recent-blog-title {

  font-size: 14px;

  font-weight: 500;

  margin-bottom: 2px;

}

.recent-blog-date {

  font-size: 11px;

  color: #888;

}

@media (max-width: 991.98px) {

  .blog-content-section {

    padding: 20px 10px;

  }

}



.blog-text {

  font-size: 16px;

  font-weight: 400;

  line-height: 1.5;

  color: #666666;

}



.blog-text.main-header {

  font-size: 24px;

  font-weight: 700;

  color: #000000;

}



.blog-text.sub-header {

  font-size: 20px;

  font-weight: 600;

  color: #000000;

}



.blog-text.sub-sub-header {

  font-size: 18px;

  font-weight: 500;

  color: #000000;

}

.toc-section .nav-link.active {

  font-weight: 900;

  color: #000;



  padding-left: 8px;

}



.toc-section .nav-link {

  font-weight: 500;

  color: #000;

}

.blog-content-img {

  width: 100%;

  object-fit: cover;

  max-height: 400px;

  margin-bottom: 24px;

  height: auto;

}

.call-to-action-section {

  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('./images/fix-and-go-blog-cta-bg.webp');

  background-repeat: no-repeat;

  max-height: 200px;

  background-position: center;

  background-size: cover;

  padding: 20px;

  margin-bottom: 20px;

}



.cta-btn {

  background-color: #e9231c;

  color: #fff;

  padding: 12px 28px;

  text-transform: uppercase;

  border-radius: 10px;

  text-decoration: none;

  transition: all 0.3s ease;

}



.cta-btn:hover {

  background-color: #e14b00;

  transform: translateY(-5px);

}



.cta-text {

  color: #fff;

}



.cta-text h3 {

  font-size: 22px;

}



.cta-text p {

  font-size: 16px;

  line-height: 19px;

}

.service-section ul li {

  color: #fff;

  padding-left: 20px;

  padding-bottom: 10px;

  position: relative;

}



.service-section ul li:before {

  content: "";

  position: absolute;

  width: 8px;

  height: 8px;

  left: 0;

  top: 8px;

  background: #e9231c;

  border-radius: 50%;

}





.hx-site-footer-bottom {

  background: #111;

  padding: 30px 0;

}



.hx-site-footer-bottom-content {

  text-align: center;

}



.hx-site-footer-bottom-content span {

  color: #fff;

  font-size: 16px;

  text-align: center;

}



.hx-site-footer-bottom-content span a {

  color: #ffffff;

}