body {
            font-family: "Montserrat", sans-serif;
            background: #f0f3fb url(../images/cc-bg.png) no-repeat top center;  
          
            /* background-image: radial-gradient(circle at 30% 10%, #e0ebff 0%, transparent 40%),
                              radial-gradient(circle at 85% 95%, #e0ebff 0%, transparent 40%); */
            overflow-x: hidden;
            min-height: 100vh;
        }

        .clgr{
            color: #013939;
        }
       

        .navbar-nav .nav-link {
            color: #4a5568;
            font-size: 0.9rem;
            font-weight: 500;
            padding: 0.5rem 1rem !important;
        }

        .brand-logo img {
            width: 90px;
        }

        .badge-custom {
            background-color: #0066ff;
            color: white;
            font-weight: 600;
            padding: 8px 16px;
            border-radius: 50px;
            font-size: 0.85rem;
            display: inline-block;
        }

        .hero-title {
            color: #2a3384;
            font-weight: 600;
            font-size: 3.5rem;
            line-height: 1.15;
        }

        .hero-title span {
            color: #0560dc;
        }

        .feature-card {            
            border: 1px solid #bfcee1;
            border-radius: 12px;
            padding: 15px;
            text-align: center;
            transition: all 0.3s ease;
            height: 100%;
        }

        .feature-card i {
            font-size: 1.5rem;
            color: #0066ff;
            display: block;
            margin-bottom: 8px;
        }

        .feature-card p {
            font-size: 0.8rem;
            font-weight: 600;
            color: #334155;
            margin: 5px auto;
            line-height: 1.3;
        }

        .input-group-custom {           
            border: 1px solid #000;
            border-radius: 12px;
            padding: 0px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        }

        .input-group-custom .form-control{
            background-color: #f0f3fb;
            border-radius: 12px;
        }

        .input-group-custom input {
            border: none;
            padding-left: 15px;
            font-size: 0.95rem;
        }

        .input-group-custom input:focus {
            box-shadow: none;
            outline: none;
        }

        .input-group-custom .btn {
            background-color: #0560dc;
            color: white;
            font-weight: 600;
            border-radius: 8px !important;
            padding: 12px 28px;
        }

        .input-group-custom .btn:hover {
            background-color: #0052cc;
        }

        .trust-text {
            font-size: 0.85rem;
            color: #000;
        }

        .bottom-bar {
            background-color: #0052cc;
            border-radius: 12px;
            color: white;
            padding: 15px;
        }

        .bottom-bar-item {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.85rem;
            font-weight: 500;
        }

        .bottom-bar-item i {
            font-size: 1.2rem;
        }

        /* Credit Cards Stack CSS */
        .card-container {
            text-align: right;
            position: relative;           
            width: 100%;
        }

        .category-section{
            background:#fff;
    padding:60px 0;
}

.category-card{
    background:#fff;   
    border-radius:12px;
    height:120px;
    padding:15px;
    transition:.3s;
    cursor:pointer;
    box-shadow:0px 0px 25px rgba(0, 0, 0, .12);
}


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

.category-card i{
    font-size:34px;
    color:#1f4fa8;
    margin-bottom:15px;
}

.category-card h6{
    font-size:14px;
    height:35px;
    font-weight:500;
    color:#222;
    margin:10px 0 0 0;
    line-height:1.3;
}

.bottom-line{
    width:32px;
    height:1px;
    background:#1f6bff;
    border-radius:5px;
    margin-top:15px;
}

.ccbox{
    padding: 50px 0;
}

.ccbox h2{
    letter-spacing: 0.5px;
    color: #000;
}

/* Top Filters Styling */
    .filter-btn {
      background: #fff;
      color: #333;
      border: 1px solid #ced4da;
      border-radius: 4px;
      padding: 6px 14px;
      font-size: 0.85rem;
      font-weight: 500;
      white-space: nowrap;
      transition: all 0.2s ease;
    }
    .filter-btn:hover, .filter-btn.active {
      background-color: #0d6efd;
      color: #fff;
      border-color: #0d6efd;
    }

    /* Credit Card Mockup Backgrounds */
    .cc-display {
      border-radius: 10px;     
      position: relative;
      color: white;
      padding: 0px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
      margin-bottom: 15px;
    }
    

    /* Card Details & Features */
    .card-container {
      /* background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.05); */
      border: none;
      height: 100%;
    }
    .feature-list {
      list-style: none;
      padding: 0;
      margin: 0px 0 15px 0;
      font-size: 0.85rem;
      color: #444;
    }
    .feature-list li {
      padding: 6px 0;
      border-bottom: 1px dashed #dee2e6;
    }
    .feature-list li:last-child {
      border-bottom: none;
    }
    
    /* Pagination Dots */
    .dot {
      height: 10px;
      width: 10px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
      margin: 0 4px;
      cursor: pointer;
    }
    .dot.active {
      background-color: #0d6efd;
    }

    .carousel-indicators {
    bottom: -50px;
}

.carousel-indicators button {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50%;
    background-color: #b5c7ea !important;
    opacity: 1;
}

.carousel-indicators .active {
    background-color: #0d6efd !important;
}


.bank-sec{
    background-color: #fff;
}

.bank-wrapper{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
}

.bank-card{
    flex:0 0 calc((100% - 140px) / 8); /* 8 columns with 20px gap */
    height:100px;
   
    display:flex;
    justify-content:center;
    align-items:center;
    
    transition:.3s;
    padding: 0;
}

.bank-card:hover{
    transform:translateY(-4px);
   
}

.bank-card img{
    max-width:100%;
   
    object-fit:contain;
}


.support-icon{
    width:70px;
    height:70px;
    background:#fff;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
    color:#0d6efd;
    box-shadow:0 3px 10px rgba(0,0,0,.08);
}

.email-box{
    font-weight: 600;
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:15px 25px;
    background:#fff;
    border-radius:10px;
    color:#0d6efd;
    text-decoration:none;
    box-shadow:0 3px 10px rgba(0,0,0,.08);
}

.footer{
    background:#0d5bd7;
    color:#fff;
    padding:60px 0;
}

.footer .logo{
    font-size:36px;
    font-weight:700;
    line-height: 1;
    margin-bottom: 26px;
   
}

.footer p{
    color:#fff;
    opacity:.9;
     font-size: 14px;
}

.footer h5{
    font-size: 16px;
    margin-bottom:20px;
    font-weight:600;
}

.footer ul{
    list-style:none;
    padding:0;
}

.footer ul li{
    margin-bottom:10px;
}

.footer ul li a{
    font-size: 14px;
    color:#fff;
    text-decoration:none;
}

.footer ul li a:hover{
    color:#d9e7ff;
}

.social a{
    color:#fff;
    font-size:22px;
    margin-right:15px;
}

.input-group .form-control{
    border:none;
    height:48px;
}

.footer .input-group .btn{
    background:#0d5bd7;
    color:#fff;
    width:55px;
}

.footer-bottom{
    background:#181818;
    color:#fff;
    padding:20px 0;
}
        

        /* Responsive Breakpoints */
        /* Large Desktop - 8 columns */
.bank-card{
    flex:0 0 calc((100% - 140px) / 8);
}

/* Laptop - 6 columns */
@media (max-width:1200px){
    .bank-card{
        flex:0 0 calc((100% - 100px) / 6);
    }
}

/* Tablet - 4 columns */
@media (max-width:992px){
    .bank-card{
        flex:0 0 calc((100% - 60px) / 4);
    }
}

/* Mobile - 2 columns */
@media (max-width:576px){
    .bank-card{
        flex:0 0 calc((100% - 20px) / 2);
    }
}
        @media (max-width: 991px) {
            .hero-title { font-size: 2.8rem; }
            /* .card-container { height: 350px; margin-top: 50px; } */
            
            .card-red { top: 20px; right: 50px; }
            .card-blue { bottom: 20px; right: 20px; }
        }

@media (max-width: 500px) {
        .credit-card{display: none;}
        .category-section {   
    padding: 30px 0;
}

.feature-card{
    padding: 5px;
}

.feature-card p {
    font-size: 11px;
}

.input-group-custom .btn {    
    padding: 12px;
    font-size: 12px;
}

}