:root {
    /* font family  */
    --font-family-one: "Poppins", sans-serif;
    --font-family-two: "Outfit", sans-serif;
    --font-family-three: "Raleway", sans-serif;
    --font-family-four: "Hind", sans-serif;

    /* font color  */
    --color-one: #111f5d;
    --color-two: #1268b3;
    --color-three: #222831;
    --color-four: #F7F7F7;
    --color-five: #FF8B00;
}
@media (max-width:997px) {
  .blog-card{
  height: auto !important;
  margin: 25px;
}
.blogs-head{
  text-align: left !important;
  font-size: 25px !important;
}
.card-img-overlay h5{
  font-size: 15px;
}
.card-img-overlay p{
  font-size: 10px;
}
/* Make nav scrollable on mobile */
.nav-pills {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important; /* Firefox */
}

.nav-pills::-webkit-scrollbar {
    display: none !important; /* Chrome / Safari */
}

.nav-pills .nav-item {
    flex: 0 0 auto !important; /* Prevent items from shrinking */
    margin-right: 10px !important;
}
.blog-main-section {
    padding-left: 10px !important;
    padding-right: 10px !important;
}
}

.pages-header-section {
  position: relative;
  background-image: url(/assets/images/car-bg-2.png);
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 40px 0;
  z-index: 1;
  overflow: hidden;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pages-header-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at center,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.4) 40%,
    rgba(26, 25, 25, 0.797) 100%
  );
  z-index: 0;
}


.pages-heading {
  position: relative;
  z-index: 2; /* keeps text above overlay */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 10px;
}
.blogs-head{
  text-align: center;
}
.pages-heading h1 {
  font-family: var(--font-family-one);
  color: var(--color-four);
  font-size: 40px;
  font-weight: 700;
  
}.pages-heading p{
    font-family: var(--font-family-one);
  color: var(--color-four);
  font-weight: 700;
}

.blogs-main-head{
  padding-top: 40px;
  padding-bottom: 50px;
}
.blog-main-section{
  padding-left:100px ;
   padding-right:100px ;
}
.blogs-card-layout{
  padding-bottom:70px ;
}
.blog-card{
  height: 500px;
  margin: 25px;
}
.blog-card .card{
  border: none;
  border-radius: 0px;
}
.card-img-overlay{
      display: flex;
    flex-direction: column;
    justify-content: end;
}
.card-img-overlay h5{
  font-family: var(--font-family-one);

}
.card-img-overlay p{
  font-family: var(--font-family-two);
  
} 
.blog-card-bottom-explore{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.blog-explore-btn{
  border: none;
   background: #020024;
    background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(5, 5, 97, 1) 35%);
  backdrop-filter: blur(10px);
  border-left: 1px solid white;
  font-family: var(--font-family-one);
  color: var(--color-four);
  font-size: 13px;
  padding: 5px 15px;
}
.nav-pills .nav-item{
  margin: 0px 5px !important;
}
.nav-pills .nav-link{
  border: none !important;
  border-radius: 0px !important;
  font-family: var(--font-family-one);
  font-size: 16px !important;
  background-color: var(--color-four);
 
}
.nav-pills .nav-link.active{
  background-color: var(--color-one) !important;
}

/* Make sure tab panes are hidden by default (keep layout clean) */
.tab-content .tab-pane {
  display: none;                /* hide by default */
  opacity: 0;
  transform: translateY(30px);
  will-change: opacity, transform;
}

/* When Bootstrap adds .show (or .active) we allow display block so animation can run */
.tab-content .tab-pane.show {
  display: block !important;
}

/* Play slide-up animation when tab becomes visible (Bootstrap toggles .show/.active) */
.tab-content .tab-pane.show.active {
  animation: bd-slide-up 1.45s cubic-bezier(.22,.9,.35,1) both;
}

/* Keyframes: from below + transparent → final position + opaque */
@keyframes bd-slide-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Optional: if you use Bootstrap's .fade class, override its transitions so it doesn't conflict */
.tab-content .tab-pane.fade {
  transition: none !important;
}

/* Accessibility: respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .tab-content .tab-pane.show.active {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Base styling */
.nav-pills .nav-link {
    color: #444;
    background: #f1f1f1;
    border-radius: 30px;
    padding: 8px 18px;
    font-weight: 500;
    position: relative;
    transition: all 0.3s ease;
}

/* Hover effect */
.nav-pills .nav-link:hover {
    background: #e2e2e2;
    color: #000;
}

/* Active tab */
.nav-pills .nav-link.active {
    background: var(--color-one); /* Your premium red */
    color: white !important;
    box-shadow: 0 4px 12px rgba(49, 94, 255, 0.4);
    transform: translateY(-2px);
}

/* Underline Animation */
.nav-pills .nav-link::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 50%;
    width: 0%;
    height: 3px;
    background: #1268b3;
    border-radius: 10px;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.nav-pills .nav-link.active::after {
    width: 60%;
}
.blog-content-page{
  padding: 50px 0px;
}
.blog-page-content{
  padding: 30px 0px;
}
.head-2-blog{
  font-family: var(--font-family-one);
  color: var(--color-one);
  font-size: 25px;
  font-weight: 700;
}
.head-6-blog{
  font-family: var(--font-family-two);
  color: var(--color-four);
  background-color: var(--color-two);
  width: fit-content;
  padding: 0px 10px;
}
.blog-para{
  font-family: var(--font-family-three);
  line-height: 30px;
}
.how-choose-section{
  
  padding: 20px 0px;
}
.blogs-card{
  background-color: white;
  padding: 30px 10px;
  
}
.heading-five-blog{
  color: var(--color-two);
  font-family: var(--font-family-one);
}
.heading-five-blog span{
  color: var(--color-five);
}
.heading-six{
  font-family: var(--font-family-two);

}
.list-blogs{
  padding-left: 15px;
}
.list-blogs li{
  font-family: var(--font-family-one);
  line-height: 30px;
  font-size: 15px;
}

/* Sticky Behaviour */
.blog-sidebar {
    position: sticky;
    top: 100px;
}

/* Sidebar Card */
.sidebar-card {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 22px;
    border-radius: 16px;
    margin-bottom: 25px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.1);
}

/* Titles */
.sidebar-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
}

/* Recent list */
.recent-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.recent-list li {
    margin-bottom: 12px;
    background-color: var(--color-one);
    font-family: var(--font-family-two);
    padding: 10px 10px;
 

}

.recent-list li a {
    text-decoration: none;
   color: var(--color-four);
    font-weight: 500;
    transition: 0.3s;
}

.recent-list li a:hover {
    color: #1268b3;
    padding-left: 5px;
}

/* Category Badges */
.cat-badges span {
    display: inline-block;
    background: #f3f3f3;
    color: #333;
    padding: 7px 13px;
    border-radius: 25px;
    margin: 5px;
    font-size: 14px;
    transition: 0.3s ease;
     font-family: var(--font-family-two);
}

.cat-badges span:hover {
    background: #111f5d;
    color: #fff;
}

/* CTA BOX */
.sidebar-cta {
    background: linear-gradient(135deg, #020024, #111f5d);
    color: #fff;
    padding: 25px;
    border-radius: 18px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    text-align: center;
}

.sidebar-cta h5 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
   
}

.sidebar-cta p {
    font-size: 14px;
    opacity: 0.9;
    margin-bottom: 15px;
     font-family: var(--font-family-two);
}

.cta-btn {
    text-decoration: none;
    background: #fff;
    color:var(--color-one);
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 600;
    transition: 0.3s;
}

.cta-btn:hover {
    background: #ffe3e3;
}

/* Fade Animation */
.fade-in {
    opacity: 0;
    transform: translateY(12px);
    animation: fadeIn 0.6s forwards ease-out;
}

@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media(max-width: 991px) {
    .blog-sidebar {
        position: relative;
        top: 0;
    }
    .sidebar-card, .sidebar-cta {
        margin-top: 20px;
    }
}