:root {
      --red: #ff3b1f;
      --red-hover: #e62f14;
      --dark: #041224;
      --dark2: #071325;
      --gray-bg: #f7f8fb;
      --border: #eceff3;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    /* ── PREVENT HORIZONTAL SCROLL ── */
    html,
    body {
      overflow-x: hidden;
      max-width: 100%;
      margin: 0;
      padding: 0;
      font-family: 'Segoe UI', Arial, sans-serif;
      background: #fff;
    }

    /* ── TOP BAR ── */
    .topbar {
      background: #041224;
      border-bottom: 1px solid rgba(255, 255, 255, .08);
      padding: 12px 0;
      position: sticky;
      top: 0;
      z-index: 1000;

      display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    min-width: max-content;
    }

    .brand-logo {
      display: flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
      flex-shrink: 0;
      min-width: max-content;
    }

    .logo-circle {
      background: var(--red);
      color: #fff;
      border-radius: 50%;
      width: 34px;
      height: 34px;
      min-width: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
    }

    .brand-name {
      font-weight: 800;
      font-size: 20px;
      color: #fff;
      line-height: 1;
      white-space: nowrap;
    }

    .brand-name span {
      color: var(--red);
    }

    .brand-tagline {
      font-size: 10px;
      color: #8ea2be;
      display: block;
    }

    .search-wrap {
      flex: 1;
      min-width: 0;
      max-width: 480px;
      display: flex;
min-width: 300px;
   
    margin-left: 20px;
   
    max-width: 700px;
    }

    .search-wrap input::placeholder {
      color: #9fb0c7;
    }

    .search-wrap input {
      flex: 1;
      min-width: 0;
      background: #0a1b35;
      border: 1px solid rgba(255, 255, 255, .12);
      border-right: none;
      border-radius: 4px 0 0 4px;
      padding: 8px 14px;
      color: #fff;
      
    }

    .btn-quote:hover,
    .btn-hero-primary:hover,
    .btn-post-ad:hover,
    .btn-view:hover,
    .search-wrap button:hover {
      background: var(--red-hover);
    }

    .search-wrap button {
      background: var(--red);
      border: none;
      color: #fff;
      padding: 8px 14px;
      border-radius: 0 4px 4px 0;
      cursor: pointer;
      flex-shrink: 0;
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-shrink: 0;
    }

    .nav-actions a:hover {
      color: var(--red);
    }

    .nav-actions a {
      color: #fff;
      font-size: 11px;
      text-decoration: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1px;
    }

    .nav-actions a i {
      font-size: 17px;
    }

    .btn-quote {
      background: var(--red);
      color: #fff;
      border: none;
      border-radius: 4px;
      padding: 9px 16px;
      font-weight: 600;
      font-size: 13px;
      cursor: pointer;
      white-space: nowrap;
      flex-shrink: 0;
    }

    /* ── CATEGORY NAV ── */
    .cat-nav {
      background: #071325;
      border-bottom: 1px solid rgba(255, 255, 255, .05);
    }

    .cat-nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      overflow-x: auto;
      flex-wrap: nowrap;
      -webkit-overflow-scrolling: touch;
    }

    .cat-nav ul::-webkit-scrollbar {
      display: none;
    }

    .cat-nav ul li a {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 10px 14px;
      font-size: 12px;
      font-weight: 600;
      color: #fff;
      text-decoration: none;
      white-space: nowrap;
      border-bottom: 2px solid transparent;
      transition: .2s;
    }

    .cat-nav ul li a small {
      color: #8fa1bc;
    }

    .cat-nav ul li a:hover {
      color: var(--red);
      border-bottom-color: var(--red);
    }

    .cat-nav ul li a {
      transition: all .3s ease;
    }

    .cat-nav ul li a i {
      font-size: 15px;
    }

    .cat-all {
      background: var(--red);
      color: #fff !important;
      border-radius: 4px;
      margin: 6px 8px 6px 0 !important;
      padding: 6px 12px !important;
      border-bottom: none !important;
    }

    /* ── HERO ── */
    .hero {
      background: linear-gradient(135deg,
          #031126 0%,
          #081a35 50%,
          #031126 100%);
      position: relative;
      overflow: hidden;
      min-height: 520px;
    }

    .hero-badge {
      background: var(--red);
      color: #fff;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 1px;
      padding: 3px 10px;
      border-radius: 2px;
      display: inline-block;
      margin-bottom: 12px;
    }

    .hero h1 {
      color: #fff;
      font-weight: 900;
      font-size: clamp(26px, 4.5vw, 52px);
      line-height: 1.05;
      margin-bottom: 6px;
    }

    .hero h1 span {
      color: var(--red);
    }

    .hero .hero-sub {
      color: #aaa;
      font-size: 13px;
      margin-bottom: 20px;
    }

    .hero-btns {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 24px;
    }

    .btn-hero-primary {
      background: var(--red);
      color: #fff;
      border: none;
      border-radius: 4px;
      padding: 11px 20px;
      font-weight: 700;
      font-size: 13px;
      cursor: pointer;
      white-space: nowrap;
    }

    .btn-hero-outline {
      background: transparent;
      color: #fff;
      border: 2px solid #fff;
      border-radius: 4px;
      padding: 9px 20px;
      font-weight: 700;
      font-size: 13px;
      cursor: pointer;
      white-space: nowrap;
    }

    .hero-features {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }

    .hero-feat {
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .feat-icon {
      background: rgba(232, 32, 26, .15);
      border: 1px solid rgba(232, 32, 26, .4);
      border-radius: 50%;
      width: 32px;
      height: 32px;
      min-width: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--red);
      font-size: 13px;
    }

    .hero-feat .feat-text {
      line-height: 1.3;
    }

    .hero-feat .feat-text strong {
      color: #fff;
      display: block;
      font-size: 12px;
    }

    .hero-feat .feat-text span {
      color: #bbb;
      font-size: 10px;
    }

    /* Insurance cards */
    .ins-card {
      background: #fff;
      margin-bottom: 10px;
      border-radius: 12px;
      padding: 18px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, .08);
    }

    .ins-card:last-child {
      margin-bottom: 0;
    }

    .ins-brand-tag {
      font-size: 9px;
      color: #888;
      font-weight: 700;
      letter-spacing: 1px;
      margin-bottom: 4px;
    }

    .ins-card h6 {
      font-weight: 700;
      font-size: 13px;
      margin: 0 0 2px;
      color: #111;
    }

    .ins-card p {
      color: #fff;
      font-size: 11px;
      margin: 0 0 10px;
    }

    .btn-ins {
      background: #fff;
      color: var(--red);
      border: 1.5px solid var(--red);
      border-radius: 4px;
      padding: 5px 16px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
    }

    .ins-badge {
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: .5px;
    }

    /* ── QUICK TOOLS ── */
    .quick-tools {
      background: #fff;
      border-bottom: 1px solid var(--border);
    }

    .tools-row {
      display: flex;
      flex-wrap: wrap;
    }

    .tool-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 14px 8px;
      font-size: 11px;
      color: #333;
      text-decoration: none;
      text-align: center;
      border-right: 1px solid var(--border);
      flex: 1;
      min-width: 80px;
    }

    .tool-item:last-child {
      border-right: none;
    }

    .tool-item i {
      font-size: 22px;
      color: var(--red);
    }

    .tool-item strong {
      font-size: 12px;
      color: #111;
      line-height: 1.2;
    }

    .tool-item span {
      font-size: 10px;
      color: #888;
    }

    /* ── SECTION TITLES ── */
    .sec-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
      flex-wrap: wrap;
      gap: 6px;
    }

    .sec-title h5 {
      font-weight: 800;
      font-size: 15px;
      margin: 0;
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .sec-title a {
      color: var(--red);
      font-size: 12px;
      font-weight: 600;
      text-decoration: none;
      white-space: nowrap;
    }

    /* ── VEHICLE CARDS ── */
    .vehicle-card {
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
      background: #fff;
      transition: box-shadow .2s;
      height: 100%;
      display: flex;
      flex-direction: column;
      transition: .3s;
    }

    .vehicle-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 25px rgba(0, 0, 0, .12);
    }

    /* .v-img {
      width: 100%;
      height: 100px;
      background: #f5f5f5;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ccc;
      font-size: 36px;
    } */

    .v-img {
    width: 100%;
    height: 100px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 8px;
}

.v-img img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

    .vc-body {
      padding: 8px 10px 12px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .vc-name {
      font-weight: 700;
      font-size: 12px;
      color: #111;
      margin-bottom: 3px;
      line-height: 1.3;
    }

    .vc-price {
      color: var(--red);
      font-weight: 700;
      font-size: 12px;
      margin-bottom: 6px;
    }

    .vc-price small {
      color: #888;
      font-weight: 400;
      font-size: 10px;
    }

    .btn-view {
      background: var(--red);
      color: #fff;
      border: none;
      border-radius: 4px;
      padding: 6px 0;
      font-size: 11px;
      font-weight: 600;
      width: 100%;
      cursor: pointer;
      margin-top: auto;
      text-decoration: none;
      text-align: center;
    }

    /* ── TRUST BANNER ── */
    .trust-banner {
      background: linear-gradient(135deg,
          #041224,
          #081c3c);
      color: #fff;
      padding: 28px 0;
    }

    .trust-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }

    .trust-item i {
      font-size: 26px;
      color: var(--red);
      flex-shrink: 0;
      margin-top: 2px;
    }

    .trust-item strong {
      display: block;
      font-size: 13px;
      margin-bottom: 2px;
    }

    .trust-item span {
      font-size: 11px;
      color: #aaa;
    }

    .sub-form {
      display: flex;
    }

    .sub-form input {
      flex: 1;
      min-width: 0;
      border: none;
      border-radius: 4px 0 0 4px;
      padding: 9px 12px;
      font-size: 12px;
      outline: none;
    }

    .sub-form button {
      background: var(--red);
      color: #fff;
      border: none;
      border-radius: 0 4px 4px 0;
      padding: 9px 16px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
    }

    /* ── BRANDS ── */
    .brand-item {
      border: 1px solid var(--border);
      border-radius: 8px;
      height: 58px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      transition: box-shadow .2s;
      cursor: pointer;
    }

    .brand-item:hover {
      box-shadow: 0 2px 12px rgba(0, 0, 0, .1);
    }

    .brand-item span {
      font-weight: 900;
      font-size: 13px;
      letter-spacing: -.3px;
    }

    /* ── WHY CHOOSE ── */
    .why-section {
      background: #f7f8fb;
      padding: 48px 0;
    }

    .why-section h4 {
      font-weight: 900;
      font-size: 22px;
      margin-bottom: 6px;
    }

    .why-section .sub-desc {
      color: #666;
      font-size: 13px;
      margin-bottom: 24px;
    }

    .stats-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-bottom: 24px;
    }

    .stat-box {
      background: #fff;
      border-radius: 10px;
      padding: 16px 12px;
      text-align: center;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    }

    .stat-box .s-icon {
      font-size: 22px;
      color: var(--red);
      margin-bottom: 6px;
    }

    .stat-box .s-num {
      font-size: 26px;
      font-weight: 900;
      color: var(--red);
      line-height: 1;
    }

    .stat-box .s-label {
      font-size: 11px;
      color: #666;
      margin-top: 4px;
    }

    .why-list {
      list-style: none;
      padding: 0;
      margin: 0 0 20px;
    }

    .why-list li {
      font-size: 13px;
      color: #333;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 9px;
    }

    .why-list li i {
      color: var(--red);
      font-size: 15px;
      flex-shrink: 0;
    }

    .btn-learn {
      background: #111;
      color: #fff;
      border: none;
      border-radius: 4px;
      padding: 11px 22px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      text-decoration: none;
    }

    /* Sell Card */
    .sell-card {
      background: linear-gradient(135deg, #0a0a0a 0%, #1e1e3a 100%);
      border-radius: 12px;
      padding: 28px 24px;
      color: #fff;
      position: relative;
      overflow: hidden;
      height: 100%;
    }

    .sell-card::before {
      content: '';
      position: absolute;
      right: -40px;
      bottom: -40px;
      width: 180px;
      height: 180px;
      background: rgba(232, 32, 26, .08);
      border-radius: 50%;
    }

    .sell-card h5 {
      font-weight: 800;
      font-size: 17px;
      margin-bottom: 22px;
      color: #fff;
    }

    .sell-step {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 16px;
    }

    .step-circle {
      background: var(--red);
      color: #fff;
      border-radius: 50%;
      width: 28px;
      height: 28px;
      min-width: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 13px;
    }

    .step-info strong {
      font-size: 13px;
      display: block;
      color: #fff;
      margin-bottom: 2px;
    }

    .step-info span {
      font-size: 11px;
      color: #aaa;
    }

    .sell-car-svg {
      width: 100%;
      max-width: 260px;
      display: block;
      margin: 16px auto 0;
    }

    .btn-post-ad {
      background: var(--red);
      color: #fff;
      border: none;
      border-radius: 4px;
      padding: 11px 24px;
      font-weight: 700;
      font-size: 13px;
      cursor: pointer;
      margin-top: 16px;
      text-decoration: none;
    }

    .why-card {
      background: #fff;
      padding: 25px;
      border-radius: 12px;
      border: 1px solid #eee;
      height: 100%;
    }

    .why-card span {
      color: #e8201a;
    }

    .stats-row {
      display: flex;
      justify-content: space-between;
      gap: 15px;
      margin-bottom: 20px;
    }

    .stat-item {
      flex: 1;
      background: #fff;
      border: 1px solid #eee;
      border-radius: 12px;
      padding: 25px;
      text-align: center;
    }

    .stat-item h2 {
      color: #e8201a;
      font-weight: 700;
      margin-bottom: 8px;
    }

    .sell-banner-new {
      background: linear-gradient(135deg,
          #021028,
          #0a2248);
      border-radius: 14px;
      padding: 30px;
      color: #fff;

      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .steps {
      display: flex;
      gap: 30px;
      margin: 20px 0;
    }

    .steps strong {
      display: block;
      width: 35px;
      height: 35px;
      line-height: 35px;
      text-align: center;
      border-radius: 50%;
      background: #e8201a;
      margin-bottom: 8px;
    }

    .sell-car {
      font-size: 90px;
    }

    @media(max-width:768px) {

      .stats-row {
        flex-wrap: wrap;
      }

      .stat-item {
        width: 48%;
      }

      .sell-banner-new {
        flex-direction: column;
        text-align: center;
      }

      .steps {
        justify-content: center;
        flex-wrap: wrap;
      }

      .sell-car {
        margin-top: 20px;
      }
    }

    /* ── FOOTER ── */
    footer {
      background: #020b1f;
      color: #bfc5d1;
      padding-top: 40px;
    }

    footer h6 {
      color: #fff;
      font-weight: 700;
      font-size: 13px;
      margin-bottom: 14px;
    }

    .footer-link {
      color: #b8c2d3;
      text-decoration: none;
      display: block;
      margin-bottom: 7px;
      font-size: 12px;
      transition: color .2s;
    }

    .footer-link:hover {
      color: var(--red);
    }

    .f-social a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      background: #1a1a1a;
      border-radius: 50%;
      color: #aaa;
      font-size: 14px;
      margin-right: 6px;
      text-decoration: none;
      transition: background .2s;
      background: rgba(255, 255, 255, .08);
    }

    .f-social a:hover {
      background: var(--red);
      color: #fff;
    }

    .f-contact div {
      font-size: 12px;
      color: #888;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .city-btn {
      border: 1px solid #333;
      color: #aaa;
      background: transparent;
      border-radius: 4px;
      padding: 4px 10px;
      margin: 3px 2px;
      font-size: 11px;
      cursor: pointer;
      transition: .2s;
    }

    .city-btn:hover {
      background: var(--red);
      color: #fff;
      border-color: var(--red);
    }

    .footer-divider {
      border-color: #1e1e1e;
      margin: 28px 0 0;
    }

    .footer-bottom {
      background: #010816;
      color: #8ea2be;
      font-size: 11px;
      padding: 12px 16px;
      text-align: center;
    }

    .hero .container,
    .hero .row {
      min-height: 520px;
      align-items: center;
    }

    /* ── RESPONSIVE FIXES ── */
    @media (max-width: 991px) {
      .hero-moto-col {
        display: none !important;
      }
    }

    @media (max-width:767px) {

      .topbar {
        padding: 10px 0;
      }

      .search-wrap {
        max-width: 100%;
        margin-top: 10px;
      }

      .hero {
        min-height: auto;
        padding: 40px 0;
      }

      .hero-btns {
        flex-direction: column;
      }

      .btn-hero-primary,
      .btn-hero-outline {
        width: 100%;
      }

      .hero-features {
        gap: 12px;
      }

      .sell-banner-new {
        padding: 20px;
      }

      .steps {
        flex-direction: column;
        gap: 15px;
      }

      .stat-item {
        width: 100%;
      }
    }

    @media (max-width: 767px) {
      .topbar .nav-actions {
        display: none !important;
      }

      .tool-item {
        min-width: calc(33.33% - 2px);
        border-bottom: 1px solid var(--border);
      }

      .tool-item:nth-child(3) {
        border-right: none;
      }

      .stats-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 575px) {
      .hero h1 {
        font-size: 26px;
      }

      .sell-card {
        padding: 20px 16px;
      }

      .stats-grid {
        gap: 10px;
      }

      .stat-box .s-num {
        font-size: 22px;
      }
    }

    @media (max-width:575px) {

      .brand-name {
        font-size: 16px;
      }

      .logo-circle {
        width: 30px;
        height: 30px;
        min-width: 30px;
      }
    }
 
 /* ===================================
   HERO SECTION
=================================== */

.hero{
    background: linear-gradient(
        180deg,
        #02113b 0%,
        #03174d 100%
    );
}

.hero-section-row{
    align-items:stretch;
}

.insurance-slider-col,
.insurance-card-col{
    display:flex;
}

/* ===================================
   SLIDER
=================================== */

.insuranceBannerSwiper{
    height:100%;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 20px 50px rgba(0,0,0,.25);
}

.insuranceBannerSwiper .swiper-wrapper,
.insuranceBannerSwiper .swiper-slide{
    height:100%;
}

.insuranceBannerSwiper img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform 8s ease;
}

.insuranceBannerSwiper .swiper-slide-active img{
    transform:scale(1.02);
}

/* Pagination */

.swiper-pagination{
    bottom:15px !important;
}

.swiper-pagination-bullet{
    width:10px;
    height:10px;
    background:#fff;
    opacity:.4;
    transition:.3s;
}

.swiper-pagination-bullet-active{
    width:30px;
    border-radius:20px;
    opacity:1;
}

/* ===================================
   RIGHT SIDEBAR
=================================== */

.ins-sidebar{
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    gap:16px;
}

/* ===================================
   CARD BASE
=================================== */
.insurance-slider-col,
.insurance-card-col{
    display:flex;
}

.insuranceBannerSwiper,
.ins-sidebar{
    width:100%;
    height:100%;
}

.ins-card{
    flex:1;

    display:flex;
    flex-direction:column;

    width:100%;
    padding:18px;
    border-radius:24px;
    text-decoration:none;
    color:#fff;
    position:relative;
    overflow:hidden;

    border:1px solid rgba(255,255,255,.08);

    box-shadow:
        0 12px 35px rgba(0,0,0,.22),
        inset 0 1px 1px rgba(255,255,255,.12);

    transition:all .35s ease;
}

.ins-card:hover{
    transform:translateY(-6px);

    box-shadow:
        0 20px 50px rgba(0,0,0,.30),
        inset 0 1px 1px rgba(255,255,255,.15);
}

/* ===================================
   TATA CARD
=================================== */

.ins-card--tata{
    background:
        linear-gradient(135deg, #0a2c6e 0%, #1a4ea6 60%, #1e5fc4 100%);
}


/* ===================================
   ICICI CARD
=================================== */

.ins-card--icici{
    background:
        linear-gradient(135deg, #c0390b 0%, #e05520 50%, #f47c1f 100%);
}


/* ===================================
   HEADER
=================================== */

.ins-card__header{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:16px;
}

.ins-card__pill{
    background:#fff;
    padding:6px 12px;
    border-radius:8px;

    font-size:11px;
    font-weight:700;
}

.ins-card--tata .ins-card__pill{
    color:#3100a7;
}

.ins-card--icici .ins-card__pill{
    color:#ff2600;
}

.ins-card__category{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.5px;
    opacity:.95;
}

/* ===================================
   TITLE
=================================== */

.ins-card__title{
    font-size:22px;
    font-weight:700;
    line-height:1.3;
    margin:0 0 8px;
    color:#fff;
}

.ins-card__subtitle{
    font-size:14px;
    color:rgba(255,255,255,.9);
    margin-bottom:18px;
}

/* ===================================
   LOGO AREA
=================================== */

.ins-card__logo-wrap{
    position:relative;

    min-height:90px;

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

    margin-bottom:18px;
    padding:16px;

    border-radius:16px;

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(10px);

    border:1px solid rgba(255,255,255,.18);
}

.ins-card__logo-wrap img{
    max-width:95px;
    max-height:55px;
    object-fit:contain;
}

/* ===================================
   AD BADGE
=================================== */

.ad-badge{
    position:absolute;
    top:10px;
    right:10px;

    background:#0d1b4d;
    color:#fff;

    font-size:10px;
    font-weight:700;

    padding:4px 8px;

    border-radius:6px;
}

/* ===================================
   BUTTON
=================================== */

.ins-card__btn{
    display:block;
    width:100%;

    background:#fff;

    text-align:center;

    padding:16px;

    border-radius:16px;

    font-size:18px;
    font-weight:700;

    transition:.3s;
}

.ins-card__btn:hover{
    transform:translateY(-2px);
}

.ins-card--tata .ins-card__btn{
    color:#3100a7;
}

.ins-card--icici .ins-card__btn{
    color:#ff2600;
}

/* ===================================
   COLUMN HEIGHTS
=================================== */

.insurance-slider-col .insuranceBannerSwiper{
     width:100%;
    height:100%;
}

.insurance-card-col{
    display:flex;
}

.insurance-card-col .ins-sidebar{
    width:100%;
}

/* ===================================
   TABLET
=================================== */

@media (max-width:991px){

    .insurance-slider-col .insuranceBannerSwiper{
        height:420px;
    }

    .ins-sidebar{
        margin-top:20px;
    }
}

.insuranceBannerSwiper{
    position:relative;
}

.insuranceBannerSwiper::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.25),
        transparent 40%
    );
    pointer-events:none;
}

/* ===================================
   MOBILE
=================================== */

@media (max-width:576px){

    .hero{
        padding-top:20px;
        padding-bottom:20px;
    }

    .insurance-slider-col .insuranceBannerSwiper{
        height:250px;
    }

    .ins-card{
        padding:16px;
        border-radius:18px;
       border:1px solid rgba(255,255,255,.08); 
    }

    .ins-card__title{
        font-size:18px;
    }

    .ins-card__subtitle{
        font-size:13px;
    }

    .ins-card__logo-wrap{
        min-height:75px;
    }

    .ins-card__btn{
        padding:13px;
        font-size:15px;
    }
}

/* ===================================
   BRAND SWIPER
=================================== */
.brandSwiper{
    padding:0;
    margin:0;
}

.brandSwiper .swiper-slide{
    display:flex;
    align-items:center;
    justify-content:center;
    height:auto;
}

.brand-logo{
    width:100px;
    height:60px;
    object-fit:contain;
    transition:.3s ease;
    filter:grayscale(20%);
}

.brand-logo:hover{
    transform:scale(1.08);
    filter:none;
}

/* slider */
.insuranceBannerSwiper .swiper-slide img,
.banner-img{
    width:100%;
    height:auto;
    display:block;
    border-radius:16px;
}

/* Desktop */
@media (min-width:992px){
    .banner-img{
        min-height:420px;
        object-fit:cover;
    }
}

/* Mobile */
@media (max-width:768px){
    .banner-img{
        min-height:auto;
        border-radius:12px;
    }

    .insurance-slider-col{
        margin-top:15px;
    }
}