body {
    font-family: "Roboto", sans-serif !important;
}
.pd-0 {
    padding: 0px !important;
}
.pd-10 {
    padding: 10px !important;
}
.pd-15 {
    padding: 15px !important;
}
.pd-20 {
    padding: 20px !important;
}
.pd-25 {
    padding: 25px !important;
}
.pd-30 {
    padding: 30px !important;
}
.pt-0 {
    padding-top: 0px !important;
}
.pt-5 {
    padding-top: 5px !important;
}
.pt-10 {
    padding-top: 10px !important;
}
.pt-15 {
    padding-top: 15px !important;
}
.pt-20 {
    padding-top: 20px !important;
}
.pt-30 {
    padding-top: 30px !important;
}
.pt-40 {
    padding-top: 40px !important;
}
.pt-50 {
    padding-top: 50px !important;
}
.pt-60 {
    padding-top: 60px !important;
}
.pb-0 {
    padding-bottom: 0px !important;
}
.pb-5 {
    padding-bottom: 5px !important;
}
.pb-10 {
    padding-bottom: 10px !important;
}
.pb-15 {
    padding-bottom: 15px !important;
}
.pb-20 {
    padding-bottom: 20px !important;
}
.pb-30 {
    padding-bottom: 30px !important;
}
.pb-40 {
    padding-bottom: 40px !important;
}
.pb-50 {
    padding-bottom: 50px !important;
}
.pb-60 {
    padding-bottom: 60px !important;
}
.pl-0 {
    padding-left: 0px !important;
}
.pl-5 {
    padding-left: 5px !important;
}
.pl-10 {
    padding-left: 10px !important;
}
.pl-15 {
    padding-left: 15px !important;
}
.pl-20 {
    padding-left: 20px !important;
}
.pl-30 {
    padding-left: 30px !important;
}
.pl-40 {
    padding-left: 40px !important;
}
.pl-50 {
    padding-left: 50px !important;
}
.pl-60 {
    padding-left: 60px !important;
}
.pr-0 {
    padding-right: 0px !important;
}
.pr-5 {
    padding-right: 5px !important;
}
.pr-10 {
    padding-right: 10px !important;
}
.pr-15 {
    padding-right: 15px !important;
}
.pr-20 {
    padding-right: 20px !important;
}
.pr-30 {
    padding-right: 30px !important;
}
.pr-40 {
    padding-right: 40px !important;
}
.pr-50 {
    padding-right: 50px !important;
}
.pr-60 {
    padding-right: 60px !important;
}
.p-l-5 {
    padding-left: 5px !important;
}
.p-r-5 {
    padding-right: 5px !important;
}
.mt-0 {
    margin-top: 0px !important;
}
.mt-5 {
    margin-top: 5px !important;
}
.mt-8 {
    margin-top: 8px !important;
}
.mt-10 {
    margin-top: 10px !important;
}
.mt-15 {
    margin-top: 15px !important;
}
.mt-20 {
    margin-top: 20px !important;
}
.mt-30 {
    margin-top: 30px !important;
}
.mt-40 {
    margin-top: 40px !important;
}
.mt-50 {
    margin-top: 50px !important;
}
.mb-0 {
    margin-bottom: 0px !important;
}
.mb-2rem {
    margin-bottom: 2rem !important;
}
.mb-5 {
    margin-bottom: 5px !important;
}
.mb-10 {
    margin-bottom: 10px !important;
}
.mb-15 {
    margin-bottom: 15px !important;
}
.mb-20 {
    margin-bottom: 20px !important;
}
.mb-25 {
    margin-bottom: 25px !important;
}
.mb-30 {
    margin-bottom: 30px !important;
}
.mb-35 {
    margin-bottom: 35px !important;
}
.mb-40 {
    margin-bottom: 40px !important;
}
.mb-45 {
    margin-bottom: 45px !important;
}
.mb-50 {
    margin-bottom: 50px !important;
}
.mr-0 {
    margin-right: 0px !important;
}
.mr-5 {
    margin-right: 5px !important;
}
.mr-10 {
    margin-right: 10px !important;
}
.mr-15 {
    margin-right: 15px !important;
}
.mr-20 {
    margin-right: 20px !important;
}
.mr-30 {
    margin-right: 30px !important;
}
.mr-40 {
    margin-right: 40px !important;
}
.mr-50 {
    margin-right: 50px !important;
}
.ml-0 {
    margin-left: 0px !important;
}
.ml-5 {
    margin-left: 5px !important;
}
.ml-10 {
    margin-left: 10px !important;
}
.ml-15 {
    margin-left: 15px !important;
}
.ml-20 {
    margin-left: 20px !important;
}
.ml-30 {
    margin-left: 30px !important;
}
.ml-40 {
    margin-left: 40px !important;
}
.ml-50 {
    margin-left: 50px !important;
}
.row>* {
    padding-left: 15px !important;
    padding-right: 15px !important;
}
.form-group {
    padding: 0 12px 0 12px;
    margin-bottom: 20px;
}
.form-group label {
    color: #495057 !important;
    font-size: 14px !important;
    font-weight: 400;
    white-space: nowrap;
    margin-bottom: .5rem;
}
.form-control {
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    padding: .375rem .75rem !important;
}
.form-control:focus {
    box-shadow: none;
    border-color: #3338a0;
}
.form-select:focus {
    box-shadow: none;
    border-color: #3338a0;
}
.auto-container {
    position: static;
    max-width: 1320px;
    padding: 0px 15px;
    margin: 0 auto;
}

/***** Navbar *****/
.mega-topbar {
    background: #fff;
}
.topbar-wrapper {
    padding: 0;
    /*background: linear-gradient(90deg, rgba(255, 245, 132, 1) 30%, rgb(235 208 0) 100%);*/
    background: linear-gradient(90deg, rgba(202, 237, 247, 1) 30%, rgba(131, 196, 219, 1) 100%);
}
.top-row {
    margin: 0;
}
.logo-column {
    padding: 0;
    display: flex;
    align-items: center;
    /*justify-content: center;*/
    min-height: 90px;
}
.right-content-column {
    padding: 0 !important;
}
.marquee-row {
    background-color: #fff;
    padding: 0 12px 0 20px;
    border-radius: 0 0 0 60px;
    min-height: 50px;
    align-items: center;
    display: flex;
}
.topbar-marquee {
    line-height: 1.5;
    font-size: 14px;
    color: #000;
    margin: 0;
}
.info-nav-row {
    /*padding: 15px 15px;*/
}
.topbar-nav-ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    width: 100%;
}
.topbar-nav-li {
    height: 50px;
    align-items: center;
    display: flex;
}
.topbar-nav-li a {
    text-decoration: none;
    color: #000;
    font-weight: 500;
    font-size: 15px;
    white-space: nowrap;
    padding: 10px 10px;
    transition: all 0.3s ease-in-out;
}
.topbar-nav-li a:hover {
    background: #ffffff82;
    border-radius: 5px;
    color: #000;
}
.topbar-area {
    background: linear-gradient(310deg, #0a4a59 0%, #1896ff 50%, #2fffff 100%);
    /*background: #273c66;*/
}
.topbar-contact-ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}
.topbar-contact-li {
    display: inline-block;
    line-height: 40px;
    height: 40px;
    margin-right: 17px;
    padding-right: 20px;
    color: #ffffff;
    border-right: 1px solid #f0f0f0;
}
.topbar-contact-li i {
    margin-right: 2px;
}
.topbar-contact-li i:before {
    font-size: 14px;
    color: #000;
}
.topbar-contact-li a {
    font-size: 14px;
    color: #000;
    text-decoration: none;
}
.topbar-contact-li a:hover {
    color: #000;
    text-decoration: none;
}
.topbar {
    background: #fff;
    border-bottom: 1px solid #ddd;
    font-size: 14px;
    /*padding: 10px 20px;*/
}
.topbar a {
    /*color: #001f4d;*/
    text-decoration: none;
    font-weight: 500;
}
.second-logo-div {
    /*padding: 12px 0;*/
}
.cat-btn-header-ul {
    list-style: none;
    padding-left: 0;
    margin: 0 0 0 135px !important;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    text-align: right;
}
.cat-btn-header-li {
    flex: 1 1 calc(50% - 10px);
}
.topbar .btn {
    font-size: 14px;
    padding: 10px 10px;
    width: 100%;
    margin-left: 0 !important;
}
.main-navbar {
    background: #fff;
    padding: 0 !important;
    position: sticky;
    top: 0;
    z-index: 999;
    transition: top 0.3s ease-in-out;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.main-navbar .nav-link {
    font-size: 15px;
    color: #000 !important;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 21px 15px !important;
    cursor: pointer;
}
.navbar-toggler {
    border: none;
    outline: none;
}
.navbar-toggler-icon {
    width: 24px;
    height: 3px;
    background: #000;
    border-radius: 9999px;
    transition: all 0.3s ease-in-out;
    transform-origin: center;
}
.navbar-toggler-icon:nth-child(1), .navbar-toggler-icon:nth-child(2) {
    margin-bottom: 5px;
}
.nav-item.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.main-navbar .nav-link:hover {
    background: rgba(255,255,255,0.2);
    border-radius: 5px;
}
.main-navbar .nav-link .arrow-down {
    transition: transform 1s ease;
}
.main-navbar .nav-link:hover .arrow-down {
    rotate: 180deg;
}
.main-navbar .dropdown-menu {
    border-radius: 0;
    border: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.navbar-brand {
    font-weight: bold;
    color: #004080 !important;
}
.dropdown-item {
    color: #1261ac;
}
.dropdown-item:hover {
    background: #1261ac;
    color: #fff;
}
.logo-sec {
    margin-left: 0px;
}
.site-logo {
    width: 100%;
    height: 100px;
    object-fit: cover;
}
.mobile-site-logo {
    display: none;
}
.logo-info {
    position: relative;
    float: right;
    margin-right: auto;
    margin-left: 260px;
}
.site-banner-logo {
    max-height: 110px;
    width: auto;
}
.logo-title-div {
    display: flex;
    align-items: center;
    gap: 15px;
}
.topbar-bank-title {
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 0;
}
.header-cta-btn {
    background-image: linear-gradient(to right, #25aae1, #40e495, #30dd8a, #2bb673);
    background-size: 300% 100%;
    /*background: linear-gradient(90deg, #62f4de 0%, #707aff 100%);*/
    border: 0;
    color: #fff;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}
.header-cta-btn:hover {
    /*background: linear-gradient(to left bottom, #6d327c, #485DA6, #00a1ba, #00BF98, #36C486);*/
    border: 0;
    color: #000;
    background-position: 100% 0;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}
.menu-quick-link-div {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 10px;
    align-items: center;
    justify-content: start;
    margin-top: 12px;
}
.navbar-nav {
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.nav-item {
    height: 65px;
    display: flex;
    align-items: center;
}
.has-mega-menu {
    position: static;
}
.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    /*background: #faf7f3;*/
    background: linear-gradient(90deg, rgb(223 245 251) 30%, rgb(219 234 239) 100%);
    border-bottom: 5px solid #007bff;
    border-radius: 0 0 6px 6px;
    padding: 40px 40px;
    display: none;
    transition: all 0.7s ease-in-out;
    z-index: 1000;
    overflow: hidden;
}
.mega-menu .container {
    max-width: 100%;
    margin: 0 auto;
}
.mega-menu-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px 40px;
    list-style: none;
    padding: 0;
    margin: 0;
    white-space: nowrap;
    width: 100%;
}
.mega-menu-links li {
    flex: 0 0 21%;
    width: 100%;
    border: none;
}
.mega-menu-links li a {
    display: block;
    padding: 15px 15px;
    color: #000;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
}
.mega-menu-links li a:hover {
    /*color: #000;*/
    border-left: 4px solid #83c4db;
    background: #fff;
    border-radius: 6px 0 0 6px;
}
.mega-menu-links i {
    /*color: #000;
    font-size: 16px;*/
    margin-right: 10px;
    color: #000;
    min-width: 18px;
    text-align: center;
}
.has-mega-menu:hover .mega-menu {
    display: block;
}


/***** Preloader *****/
.loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #caedf7 30%, #83c4db 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.loader-wrapper.hidden {
    opacity: 0;
    visibility: hidden;
}
.rupee-pulse {
    position: relative;
    width: 150px;
    height: 150px;
    background: #f3f4f6; 
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
}
.ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid #003366;
    border-radius: 50%;
    animation: pulse-ring 2s infinite;
}
@keyframes pulse-ring {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(2.5); opacity: 0; }
}
.preloaderLogo {
    height: 110px;
    width: 100%;
}



/***** Scroll to Top *****/
.progress-wrap {
  right: 25px;
  bottom: 25px;
  color: #fff;
  position: fixed;
  right: 50px;
  bottom: 50px;
  height: 46px;
  width: 46px;
  cursor: pointer;
  border-radius: 50px;
  box-shadow: inset 0 0 0 2px #fff;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: all 200ms linear;
}
.progress-wrap input {
  z-index: 10001;
}
.progress-wrap input:checked + html {
  -ms-scroll-snap-type: unset;
      scroll-snap-type: unset;
}
.progress-wrap.active-progress {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.progress-wrap::after {
  position: absolute;
  content: "↑";
  text-align: center;
  line-height: 46px;
  font-size: 24px;
  color: #000;
  left: 0;
  top: -2px;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  z-index: 1;
  transition: all 200ms linear;
}
.progress-wrap:hover::after {
  opacity: 0;
}
.progress-wrap:hover::before {
  opacity: 1;
}
.progress-wrap::before {
  position: absolute;
  content: "↑";
  text-align: center;
  line-height: 46px;
  font-size: 24px;
  opacity: 0;
  -webkit-text-fill-color: #0d6efd;
  left: 0;
  top: -2px;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  z-index: 2;
  transition: all 200ms linear;
}
.progress-wrap svg path {
  fill: none;
}
.progress-wrap svg.progress-circle path {
  stroke: #0d6efd;
  stroke-width: 4;
  box-sizing: border-box;
  transition: all 200ms linear;
}



/***** Hero Section *****/
.hero-slide {
    position: relative;
    height: 480px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}
.hero-slide .overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,0.5); /* transparent black overlay */
}
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}
.hero-content h1 {
    font-size: 3rem;
    font-weight: bold;
}
.hero-content p {
    font-size: 1.3rem;
    margin-top: 15px;
}
.slider-next-prev {
    background: #000;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    font-size: 15px;
    opacity: 1;
}



/***** Marquee Section *****/
.marquee-container {
    padding: 12px 0;
    background: #f8f9fa;
    display: flex;
    align-items: center;
}
.news-item {
    font-size: 16px;
    display: inline-block;
    margin-right: 50px;
    font-weight: 600;
}
.newsIcon {
    width: 20px;
    height: 20px;
}
.news-app-link {
    text-decoration: none;
    font-weight: 700;
}

/***** About Section *****/
.bg-light-skyblue {
    background: transparent linear-gradient(180deg, #F1F8FF 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box;
}
.home-about-title {
    font-size: 55px;
}
.home-about-subtitle {
    font-size: 15px;
}



/***** Deposit Banking *****/
.deposit-section {
    /*background-color: #f8f9fa;*/
    /*clip-path: polygon(0 5%, 100% 0%, 100% 95%, 0% 100%);*/
}
.deposit-tabs {
    display: flex;
    gap: 25px;
    margin-bottom: 30px;
}
.deposit-tab {
    font-size: 18px;
    font-weight: 600;
    padding-bottom: 5px;
    cursor: pointer;
    position: relative;
    color: #333;
}
.deposit-tab::after {
    content: "";
    width: 0;
    height: 3px;
    background: #003366;
    position: absolute;
    bottom: -5px;
    left: 0;
    transition: 0.3s ease;
}
.deposit-tab.active {
    color: #003366;
}
.deposit-tab.active::after {
    width: 100%;
}
.deposit-slider {
    overflow: hidden;
    max-width: 1200px;
    margin: 0 auto;
}
.deposit-cards-wrapper {
    display: flex;
    transition: transform 0.7s ease;
    transform: translateX(2%);
    margin-left: 20px;
}
.deposit-card {
    flex: 0 0 30%;
    margin-right: 2.5%;
    background: #fff;
    border-radius: 15px;
    padding: 15px;
    box-shadow: 0 6px 25px rgba(0,0,0,0.1);
    transition: transform 0.5s ease, opacity 0.4s ease;
    transform: scale(1);
    margin-bottom: 30px;
    margin-top: 20px;
}
.deposit-card:last-child {
    margin-right: 0;
}
.deposit-card.active {
    transform: scale(1.08);
    z-index: 2;
}
.deposit-card img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 20px;
}
.deposit-card-title {
    font-size: 20px;
}
.deposit-card-text {
    font-size: 14px;
}
.deposit-card-btn {
    position: relative;
    display: inline-block;
    padding-bottom: 3px;
    color: #0056b3;
    text-decoration: none;
    font-weight: 600;
    padding: 3px 0;
}
.deposit-card-btn::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    height: 2px;
    background: #0056b3;
    transition: width 0.35s ease;
}
.deposit-card-btn:hover::after {
    width: 100%;
}
.deposit-card-btn i {
    transition: transform 1s ease;
}
.deposit-card-btn:hover i {
    transform: translateX(5px);
}



/***** Loan Section *****/
.loan-section {
    background: #f5f7fb;
}
.loan-mega-card {
    background: #ffffff;
    border-radius: 22px;
    padding: 30px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    border: none;
}
.loan-mega-card-body {
    padding: 0 !important;
}
.sec-title h2 {
    display: block;
    font-size: 35px;
    line-height: 52px;
    font-weight: 700;
}
.sec-title-color {
    color: #0d6efd;
}
.loan-tab-list {
    padding-right: 20px;
    border-right: 1px solid #e8e8e8;
}
.loan-tab-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 20px;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.35s ease;
    color: #28334a;
    background: #f7f9fc;
    margin-bottom: 14px;
    border: 1px solid transparent;
}
.loan-tab-item:hover {
    background: #eef4ff;
    transform: translateX(4px);
}
.loan-tab-item.active {
    background: #ffffff;
    border: 1px solid #0d6efd;
    box-shadow: 0 8px 18px rgba(13, 110, 253, 0.15);
    transform: translateX(0);
    padding: 22px 22px;
}
.loan-tab-badge {
    background: #0d6efd;
    color: #fff;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
}
.loan-tabs-title {
    font-size: 18px;
    font-weight: 600;
}
.loan-tab-item.active .loan-tabs-title {
    font-size: 20px;
    font-weight: 800;
    color: #0d6efd;
}
.loan-tab-content {
    padding-left: 35px;
}
.loan-content {
    display: none;
    animation: fadeIn 0.6s ease;
}
.loan-content.active-loan {
    display: block;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.homeLoanSecImage {
    width: 100%;
    height: 270px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    margin-bottom: 18px;
}
.homeLoanTitle {
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 10px;
    color: #0a1a3c;
}
.homeLoanTxt {
    font-size: 16px;
    line-height: 26px;
    color: #4a5568;
    margin-bottom: 20px;
}
.know-more-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: #0d6efd;
    padding-bottom: 4px;
    text-decoration: none;
    transition: 0.3s ease;
}
.know-more-btn::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background: #0d6efd;
    transition: width 0.4s ease;
}
.know-more-btn:hover::after {
    width: 100%;
}
.know-more-btn i {
    transition: transform 1s ease;
}
.know-more-btn:hover i {
    transform: translateX(5px);
}
.loan-accordion {
    margin-top: 20px;
}
/* Accordion Button */
.acc-item {
    border: 1px solid #dce3ef;
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
    margin-bottom: 12px;
}
.acc-btn {
    width: 100%;
    padding: 16px 20px;
    background: #f7f9fc;
    border: none;
    outline: none;
    text-align: left;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.acc-btn.active {
    background: #eef4ff;
}
.acc-btn i {
    transition: transform 0.4s;
}
.acc-content {
    display: none;
    padding: 18px 20px;
    background: #ffffff;
    border-top: 1px solid #dce3ef;
    transition: max-height 0.45s ease, padding 0.35s ease;
}
.acc-item.active .acc-content {
    display: block;
}
.acc-item.active .acc-btn {
    background: #ffffff;
    border-color: #0d6efd;
}
.acc-btn i {
    transition: transform 0.35s ease;
}
.acc-item.active .acc-btn i {
    transform: rotate(180deg);
}
.acc-image {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 12px;
}
.acc-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
}
.acc-text {
    font-size: 15px;
    line-height: 24px;
    color: #4a5568;
    margin-bottom: 15px;
}



/***** Service Section *****/
.services-section-new {
    background: linear-gradient(135deg, #e8f3ff, #f7fbff);
}
.service-title {
    font-size: 32px;
    font-weight: 700;
    color: #05336e;
}
.service-subtitle {
    margin-top: 5px;
    color: #4f6f92;
    font-size: 15px;
}
.service-box {
    background: #fff;
    backdrop-filter: blur(10px);
    padding: 30px 22px;
    border-radius: 18px;
    text-align: center;
    display: block;
    height: 100%;
    color: #000;
    text-decoration: none;
    transition: transform 0.5s ease, box-shadow 0.4s ease;
    border: 1px solid rgba(255,255,255,0.5);
}
.service-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.icon-wrap-gradient {
    width: 75px;
    height: 75px;
    background: linear-gradient(135deg, #4f79ff, #94b8ff);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.icon-wrap-gradient i {
    color: #fff;
    font-size: 30px;
}
.service-box h5 {
    font-size: 18px;
    color: #05336e;
    font-weight: 600;
    margin-top: 10px;
}
.service-box p {
    font-size: 14px;
    color: #4f6f92;
    margin-top: 8px;
    margin-bottom: 0;
}
.service-know-btn {
    display: inline-block;
    margin-top: 15px;
    color: #05336e;
    font-weight: 600;
    font-size: 15px;
    position: relative;
    padding-bottom: 3px;
    cursor: pointer;
}
.service-know-btn::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    height: 2px;
    background: #05336e;
    transition: width 0.4s ease;
}
.service-know-btn:hover::after {
    width: 100%;
}
.service-know-btn i {
    transition: transform 1s ease;
}
.service-know-btn:hover i {
    transform: translateX(5px);
}



/***** Interest Section *****/
.roi-card-new {
    position: relative;
    z-index: 0;
    padding: 40px 25px;
    border-radius: 16px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
    color: #fff;
    overflow: hidden;
    transition: transform 1s ease, box-shadow 0.3s ease;
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.roi-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.30);
    border-radius: 16px;
    z-index: 1;
}
.roi-title,
.roi-rate-box,
.btn-roi-new {
    position: relative;
    z-index: 2;
}
.roi-card-new:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.30);
}
.roi-title {
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 20px;
    color: #ffffff;
}
.roi-rate {
    font-size: 52px;
    font-weight: 900;
    color: #fff;
}
.roi-rate small {
    font-size: 22px;
    font-weight: 600;
    opacity: 0.9;
}
.btn-roi-new {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: #fff;
    padding-bottom: 4px;
    text-decoration: none;
    transition: 0.3s ease;
}
.btn-roi-new::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background: #fff;
    transition: width 0.4s ease;
}
.btn-roi-new:hover::after {
    width: 100%;
}
.btn-roi-new:hover i {
    transform: translateX(5px);
}



/***** EMI Calculater Section *****/
.emiCalculaorCard {
    background: #e8f6ff;
    border-radius: 16px;
}
.calculator-card {
    border-radius: 15px;
    overflow: hidden;
}
.calculator-card .card-header {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background-color: #007bff !important;
}
.amountValueTxt, .rateValueTxt, .tenureValueTxt {
    font-size: 18px;
}
.amountValue, .rateValue, .tenureValue {
    font-size: 18px;
}
.form-range {
    height: 1rem;
    cursor: pointer;
}
.form-range::-webkit-slider-runnable-track {
    background: #00000038 !important;
    border-radius: 4px;
}
.form-range::-moz-range-track {
    background: #00000038 !important;
    border-radius: 4px;
}
.form-range::-ms-track {
    background: #00000038 !important;
    border-radius: 4px;
    border-color: transparent;
    color: transparent;
}
.emiResult {
    font-size: 30px !important;
}
.emiLoanAmount {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.emiInterestRate {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.emiLoanTenure {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.list-group-item {
    padding: 0.75rem 1rem;
    border-color: #e9ecef;
}
.chart-container {
    height: 260px;
    padding: 15px 15px;
    background: #fff;
    border-radius: 16px;
    display: flex;
    justify-content: center;
}
.rateInputCol {
    padding: 50px !important;
}
.rateOutputCol {
    padding: 10px 50px;
}
.summaryBg {
    background: transparent;
}
.sec-input-total {
    margin-bottom: 12px;
    border-radius: 8px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 17px;
}
.total-text {
    color: #282828;
    font-size: 20px;
    line-height: 28px;
    text-transform: capitalize;
}
.total-amount-wrap {
    color: #97144d;
    font-weight: 700;
    font-size: 1.75rem;
    line-height: 2rem;
    margin-left: 1rem;
}
.btn-get-fund {
    background-color: #97144d;
    color: #fff;
    padding: 12px 12px;
    line-height: 1;
}
.btn-get-fund:hover {
    background-color: #97144d;
    color: #fff;
}
.input-group-wrap {
    display: flex;
}
.input-group-text {
    display: flex;
    align-items: center;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    white-space: nowrap;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
}
.emiInputBox {
    width: 140px;
    border: 1px solid #e2e2e2;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    color: #282828;
    background: #fff;
    text-align: right;
}
.customCalcTabs {
    border-bottom: none;
    justify-content: center;
    margin-bottom: 20px;
}
.calc-nav-tab {
    height: 70px !important;
}
.customCalcTabs .nav-link {
    padding: 12px 30px;
    border-radius: 30px;
    margin: 0 8px 5px;
    background: #e9eef7;
    color: #003366;
    font-weight: 600;
    transition: transform 1s ease;
    border: 0;
}
.customCalcTabs .nav-link.active {
    background: #003366;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.output-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: center;
}
.output-card {
    background: #fff;
    border-radius: 8px;
    padding: 10px 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    font-weight: 600;
}
.output-label {
    font-size: 13px;
    color:#666;
}
.output-value {
    font-size: 16px;
    color:#0b6b2f;
    font-weight:700;
}
.emiResultBox {
    display:inline-block;
    margin-left:8px;
}
.chart-container {
    height:260px;
}
.emiInputBox {
    width:140px;
    font-weight:700;
    text-align:right;
}



/***** Fun Fact *****/
.fun-fact-bg {
    padding: 70px 0;
    opacity: 1;
    background: linear-gradient(to right top, #000f89, #003aa7, #005dc0, #0e7fd4, #47a1e6, #3da3ed, #2fa6f5, #19a8fc, #008afa, #0069f3, #0044e5, #0000cd);
}
.counter-wrapper {
    text-align: center;
    padding: 20px 10px;
    background: #F0F0F0;
    border-radius: 6px;
}
.counter-icon {
    margin-bottom: 20px;
}
.counter-icon img {
    width: 70px;
    height: auto;
}
.counter-number {
    font-size: 25px;
    font-weight: 700;
    margin-bottom: 5px;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ho-text {
    font-size: 25px;
    font-weight: 700;
}
.currency-symbol {
    font-size: 25px;
    font-weight: 400;
    margin-right: 5px;
}
.crore-symbol {
    font-size: 25px;
    font-weight: 500;
}
.plus-symbol {
    font-size: 25px;
    font-weight: 500;
}
.fp-counter-label {
    font-size: 21px;
    margin-top: 10px;
    font-weight: 600;
    color: #333;
}



/***** Footer *****/
.bank-footer {
    background: linear-gradient(135deg, #e3f0ff, #f4f9ff);
    color: #002b5c;
    position: relative;
}
.bank-footer::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    height: 70px;
    background: url('data:image/svg+xml;utf8,<svg width="1440" height="80" viewBox="0 0 1440 80" xmlns="http://www.w3.org/2000/svg"><path d="M0,40 C360,80 1080,0 1440,40 L1440,0 L0,0 Z" fill="%23c7ddff"/></svg>');
    background-size: cover; /* FIX */
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}
.footer-top {
    padding: 80px 0 50px;
}
.footer-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #003d7a;
    position: relative;
}
.footer-title::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 45px;
    height: 3px;
    background: #007bff;
    border-radius: 2px;
}
.footer-logo-new {
    /*width: 100%;*/
    height: 170px;
    object-fit: contain;
    margin-bottom: 15px;
}
.footer-desc {
    display: flex;
    align-items: center;
    font-size: 15px;
    margin-bottom: 10px;
    gap: 10px;
}
.footer-desc span {
    color: #002b5c;
}
.footer-contact-new {
    display: flex;
    align-items: center;
    gap: 10px;
}
.footer-contact-new i {
    color: #002b5c;
}
.footer-contact-new a {
    color: #002b5c;
    text-decoration: none;
}
.footer-list {
    list-style: none;
    padding: 0;
}
.footer-list li a {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 0;
    color: #002b5c;
    text-decoration: none;
    font-size: 15px;
    transition: 0.5s ease;
}
.footer-list li a:hover {
    color: #007bff;
    transform: translateX(5px);
}
.footer-quote {
    background: rgba(255,255,255,0.7);
    padding: 15px;
    border-left: 4px solid #007bff;
    border-radius: 6px;
    font-size: 15px;
    font-style: italic;
}
.footer-quote-owner {
    margin-top: 10px;
    text-align: right;
    font-weight: 600;
    color: #0056b3;
}
.dicgcLogoNew {
    margin-top: 20px;
    max-width: 150px;
    border-radius: 4px;
}
.footer-bottom-new {
    background: #003d7a;
    padding: 15px 0;
    color: #fff;
}
.footer-bottom-new .dev-link {
    color: #00d4ff;
    text-decoration: none;
}
.footer-bottom-new .dev-link:hover {
    text-decoration: underline;
}



/***** Mobile App Section *****/
.mobile-app-section-new {
    background: linear-gradient(135deg, #e9f3ff, #f7fbff);
    border-radius: 0;
    overflow: hidden;
}
.app-image {
    width: 100%;
    height: 640px;
    object-fit: cover;
    border-radius: 6px;
}
.mobile-app-heading {
    font-size: 36px;
    font-weight: 800;
    color: #1f3b66;
    line-height: 1.3;
    margin-bottom: 20px;
}
.mobile-app-heading span {
    color: #0d6efd;
}
.mobile-app-text {
    font-size: 16px;
    color: #5f6f85;
    margin-bottom: 25px;
}
.mobile-features {
    list-style: none;
    padding-left: 0;
    margin-bottom: 30px;
}
.mobile-features li {
    font-size: 16px;
    color: #29425c;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}
.mobile-features i {
    background: #0d6efd;
    color: #fff;
    padding: 8px;
    border-radius: 50%;
    margin-right: 10px;
    font-size: 14px;
}
.download-btns {
    float: left;
}
.store-logo {
    width: 100%;
    height: 65px;
    object-fit: contain;
}



/*About Us Page CSS Start*/
:root{
    --brand: #0d6efd;
    --muted: #6c757d;
    --card-bg: #ffffff;
    --accent: #00aaff;
    --soft: #f7fbff;
}
.bg-pattern {
    background: linear-gradient(135deg, rgba(13,110,253,0.06), rgba(0,175,240,0.05)), url('https://www.transparenttextures.com/patterns/cubes.png');
}
.wave-section {
    position: relative;
    overflow: hidden;
}
.about-hero {
    background: linear-gradient(90deg, rgba(0, 51, 102, 0.70), rgba(51, 102, 153, 0.55)), url('../newimages/breadcrumb-about.webp') center/cover no-repeat;
    padding: 120px 0;
    position: relative;
}
.about-hero .title {
    color: #fff;
    font-weight: 700;
    font-size: 2.5rem;
    text-shadow: 0 3px 6px rgba(0,0,0,0.25);
}
.section-title {
    font-size: 1.7rem;
    color: var(--brand);
    font-weight: 700;
    margin-bottom: 1rem;
    position: relative;
}
.section-title::after {
    content: '';
    width: 50px;
    height: 3px;
    background: var(--brand);
    position: absolute;
    left: 0;
    bottom: -6px;
    border-radius: 2px;
}
.glass-box {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(6px);
    border-radius: 16px;
    padding: 28px;
    border: 1px solid rgba(255,255,255,0.4);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.glass-box p {
    margin-bottom: 20px;
}
.value-box {
    background: linear-gradient(135deg, #ffffff, #f2f8ff);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: 0.3s ease;
}
.value-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.value-icon {
    width: 70px;
    height: 70px;
    border-radius: 16px;
    background: var(--soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--brand);
}
.about-image {
    width: 100%;
    height: 400px;
    border-radius: 18px;
    object-fit: cover;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.cta-bg {
    background: linear-gradient(135deg, #e9f3ff, #ffffff);
    border-radius: 14px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    padding: 25px;
}
/*About Us Page CSS End*/



/*Chairman Message Page CSS Start*/
.chairman-hero {
    background: linear-gradient(90deg, rgba(0, 51, 102, 0.70), rgba(51, 102, 153, 0.55)), url('../newimages/chairman-desk.webp') center/cover no-repeat;
    padding: 120px 0;
    position: relative;
}
.chairman-hero .title {
    color: #fff;
    font-weight: 700;
    font-size: 2.5rem;
    text-shadow: 0 3px 6px rgba(0,0,0,0.25);
}
.chairman-card {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}
.chairman-card-body {
    padding: 15px;
}
.chairman-image {
    width: 100%;
    height: 550px;
    object-fit: cover;
    border-radius: 10px;
}
.chairman-title {
    font-size: 25px;
    font-weight: 700;
    color: #111111;
    margin-bottom: 10px;
    margin-top: 15px;
}
.chairman-post {
    font-size: 16px;
    color: #626262;
    font-size: 16px;
    line-height: 30px;
    margin-bottom: 8px;
}
/*Chairman Message Page CSS End*/



/*Board Directors Page CSS Start*/
.bod-hero {
    background: linear-gradient(90deg, rgba(0, 51, 102, 0.70), rgba(51, 102, 153, 0.55)), url('../newimages/bod-banner.webp') center/cover no-repeat;
    padding: 120px 0;
    position: relative;
}
.bod-hero .title {
    color: #fff;
    font-weight: 700;
    font-size: 2.5rem;
    text-shadow: 0 3px 6px rgba(0,0,0,0.25);
}
.org-chart {
    position: relative;
}
.org-level {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
}
.person-card {
    background: #ffffff;
    display: inline-block;
    padding: 20px 20px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    text-align: center;
    min-width: 220px;
    position: relative;
}
.bodImage {
    width: 120px;
    height: 150px;
    border-radius: 20%;
    object-fit: cover;
    margin-bottom: 12px;
}
.person-card h4,
.person-card h5 {
    margin-bottom: 5px;
    color: #333;
    font-weight: 600;
}
.person-card p {
    margin: 0;
    font-size: 14px;
    color: #666;
}
.small-card {
    min-width: 180px;
    padding: 20px 15px;
}
.org-level .multiple-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}
.org-level::before {
    content: "";
    width: 2px;
    height: 40px;
    background: #c7c7c7;
    display: block;
    margin: 0 auto;
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
}
.level-1::before {
    display: none;
}
.sub-title {
    text-align: center;
    margin-bottom: 15px;
    font-size: 20px;
    color: #222;
    font-weight: 700;
}
/*Board Directors Page CSS End*/



/*Board Management Page CSS Start*/
.bom-hero {
    background: linear-gradient(90deg, rgba(0, 51, 102, 0.70), rgba(51, 102, 153, 0.55)), url('../newimages/bod-banner.webp') center/cover no-repeat;
    padding: 120px 0;
    position: relative;
}
.bom-hero .title {
    color: #fff;
    font-weight: 700;
    font-size: 2.5rem;
    text-shadow: 0 3px 6px rgba(0,0,0,0.25);
}
.ceo-strip {
    background: #ffffff;
    border-radius: 14px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 25px;
}
.ceo-photo img {
    width: 170px;
    height: 170px;
    border-radius: 12px;
    object-fit: cover;
}
.ceo-info {
    flex: 1;
}
.ceo-name {
    font-size: 26px;
    font-weight: 700;
    color: #222;
}
.ceo-title {
    font-size: 16px;
    color: #d1191c;
    font-weight: 600;
    margin-top: 5px;
}
.ceo-line {
    width: 70px;
    height: 3px;
    background: #d1191c;
    margin: 15px 0;
    border-radius: 2px;
}
.ceo-text {
    font-size: 15px;
    color: #555;
    margin-bottom: 0;
}
.management-card {
    background: #fff;
    text-align: center;
    padding: 25px 20px;
    border-radius: 14px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: 0.3s;
}
.management-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.mgImage {
    width: 130px;
    height: 130px;
    border-radius: 12px;
    object-fit: cover;
    margin-bottom: 12px;
}
.management-card h4 {
    font-size: 18px;
    color: #222;
    font-weight: 700;
    margin-bottom: 5px;
}
.management-card p {
    color: #666;
    margin-bottom: 0;
    font-size: 14px;
}
/*Board Management Page CSS End*/



/*SGM Page CSS Start*/
.sgm-hero {
    background: linear-gradient(90deg, rgba(0, 51, 102, 0.70), rgba(51, 102, 153, 0.55)), url('../newimages/sgm-banner.webp') center/cover no-repeat;
    padding: 120px 0;
    position: relative;
}
.sgm-hero .title {
    color: #fff;
    font-weight: 700;
    font-size: 2.5rem;
    text-shadow: 0 3px 6px rgba(0,0,0,0.25);
}
.sgm-gallery-card {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0,0,0,0.1);
    background: #fff;
    transition: transform .4s ease;
}
.sgm-gallery-card:hover {
    transform: translateY(-8px);
}
.sgm-img-box {
    position: relative;
    overflow: hidden;
}
.sgmImage {
    width: 100%;
    height: 560px;
    object-fit: cover;
    transition: transform .6s ease;
}
.sgm-img-box:hover img {
    transform: scale(1.08);
}
.sgm-img-popup {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
}
.sgm-img-popup .popup-img {
    max-width: 90%;
    max-height: 85vh;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(255,255,255,0.2);
    object-fit: contain;
    transition: transform 0.3s ease;
}
.sgm-img-popup .close-popup {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}
.sgm-img-popup .close-popup:hover {
    color: #00bfff;
}
.sgm-img-popup.show {
    display: flex;
    animation: fadeIn 0.3s ease-in;
}
@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}
/*SGM Page CSS End*/



/*Deposit Pages CSS Start*/
.fd-hero {
    background: linear-gradient(90deg, rgba(0, 51, 102, 0.70), rgba(51, 102, 153, 0.55)), url('../newimages/fd-banner.webp') center/cover no-repeat;
    padding: 120px 0;
    position: relative;
}
.fd-hero .title {
    color: #fff;
    font-weight: 700;
    font-size: 2.5rem;
    text-shadow: 0 3px 6px rgba(0,0,0,0.25);
}
.fd-subtag {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    margin-top: 0;
    margin-bottom: 0;
}
.sd-hero {
    background: linear-gradient(90deg, rgba(0, 51, 102, 0.70), rgba(51, 102, 153, 0.55)), url('../newimages/sd-banner.webp') center/cover no-repeat;
    padding: 120px 0;
    position: relative;
}
.sd-hero .title {
    color: #fff;
    font-weight: 700;
    font-size: 2.5rem;
    text-shadow: 0 3px 6px rgba(0,0,0,0.25);
}
.sd-subtag {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    margin-top: 0;
    margin-bottom: 0;
}
.cd-hero {
    background: linear-gradient(90deg, rgba(0, 51, 102, 0.70), rgba(51, 102, 153, 0.55)), url('../newimages/cd-banner.webp') center/cover no-repeat;
    padding: 120px 0;
    position: relative;
}
.cd-hero .title {
    color: #fff;
    font-weight: 700;
    font-size: 2.5rem;
    text-shadow: 0 3px 6px rgba(0,0,0,0.25);
}
.cd-subtag {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    margin-top: 0;
    margin-bottom: 0;
}
.pd-hero {
    background: linear-gradient(90deg, rgba(0, 51, 102, 0.70), rgba(51, 102, 153, 0.55)), url('../newimages/pd-banner.webp') center/cover no-repeat;
    padding: 120px 0;
    position: relative;
}
.pd-hero .title {
    color: #fff;
    font-weight: 700;
    font-size: 2.5rem;
    text-shadow: 0 3px 6px rgba(0,0,0,0.25);
}
.pd-subtag {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    margin-top: 0;
    margin-bottom: 0;
}
.jd-hero {
    background: linear-gradient(90deg, rgba(0, 51, 102, 0.70), rgba(51, 102, 153, 0.55)), url('../newimages/jd-banner.webp') center/cover no-repeat;
    padding: 120px 0;
    position: relative;
}
.jd-hero .title {
    color: #fff;
    font-weight: 700;
    font-size: 2.5rem;
    text-shadow: 0 3px 6px rgba(0,0,0,0.25);
}
.jd-subtag {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    margin-top: 0;
    margin-bottom: 0;
}
.jdsc-hero {
    background: linear-gradient(90deg, rgba(0, 51, 102, 0.70), rgba(51, 102, 153, 0.55)), url('../newimages/jdsc-banner.webp') center/cover no-repeat;
    padding: 120px 0;
    position: relative;
}
.jdsc-hero .title {
    color: #fff;
    font-weight: 700;
    font-size: 2.5rem;
    text-shadow: 0 3px 6px rgba(0,0,0,0.25);
}
.jdsc-subtag {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    margin-top: 0;
    margin-bottom: 0;
}
.deposit-main-card {
    padding: 40px 40px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}
.deposit-card-body {
    margin-bottom: 40px;
}
.fd-highlights .section-title {
    font-size: 25px;
    color: var(--brand);
    font-weight: 700;
    margin-bottom: 30px;
    position: relative;
}
.fd-highlights .section-title::after {
    content: '';
    width: 50px;
    height: 3px;
    background: var(--brand);
    position: absolute;
    left: 0;
    bottom: -6px;
    border-radius: 2px;
}
.fd-highlight-box {
    padding: 20px;
    background: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-radius: 10px;
    text-align: center;
}
.fd-highlight-box i {
    font-size: 30px;
    color: #0052cc;
    margin-bottom: 15px;
}
.fd-highlight-box h4 {
    font-size: 20px;
}
.fd-highlight-box p {
    margin-bottom: 0;
}
.fd-rate-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 20px;
    margin-top: 20px;
}
.fd-rate-card {
    border: 2px solid var(--accent);
    border-radius: 14px;
    padding: 22px;
    text-align: center;
    transition: 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.fd-rate-card:hover {
    background: linear-gradient(135deg, #ffffff, #f2f8ff);
    transform: translateY(-6px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.fd-tenure {
    font-size: 16px;
    font-weight: 600;
    color: var(--brand);
    display: block;
    margin-bottom: 10px;
}
.fd-percentage {
    font-size: 32px;
    font-weight: 800;
    margin: 0;
    color: var(--accent);
}
.benefit-box {
    padding: 20px;
    text-align: center;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    height: 130px;
}
.benefit-box i {
    font-size: 30px;
    color: #0052cc;
    margin-bottom: 15px;
}
.benefit-box h4 {
    font-size: 19px;
    margin-bottom: 0;
}
.new-sidebar {
    padding: 25px;
    background: #f4faff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.new-sidebar h4 {
    margin-bottom: 15px;
    font-size: 20px;
    border-left: 4px solid #0052cc;
    padding-left: 10px;
}
.new-sidebar ul {
    list-style: none;
    padding-left: 0;
}
.new-sidebar ul li {
    margin-bottom: 12px;
}
.new-sidebar ul li a {
    text-decoration: none;
    color: #002b7f;
    font-size: 16px;
    transition: 0.3s;
}
.new-sidebar ul li a:hover {
    padding-left: 5px;
    color: #0052cc;
}
.fdTable thead th {
    background: #0052cc;
    color: #fff;
    padding: 5px;
}
.fdTable td {
    padding: 5px;
}
.sd-interest-highlight {
    display: flex;
    justify-content: center;
}
.sd-interest-card {
    background: linear-gradient(135deg, #ffffff, #f2f8ff);
    padding: 35px 40px;
    border-radius: 14px;
    text-align: center;
    width: 350px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.sd-rate-label {
    text-transform: uppercase;
    font-size: 14px;
    color: var(--brand);
    letter-spacing: 1px;
}
.sd-rate {
    font-size: 52px;
    font-weight: 800;
    color: var(--accent);
    margin: 10px 0;
}
.sd-rate-desc {
    font-size: 16px;
    color: #3a2f2f;
    opacity: 0.8;
    margin-bottom: 0;
}
.sd-benefit-box {
    padding: 20px;
    text-align: center;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    height: 130px;
    display: grid;
    align-items: center;
}
.sd-benefit-box i {
    font-size: 30px;
    color: #0052cc;
    margin-bottom: 15px;
}
.sd-benefit-box h4 {
    font-size: 17px;
    margin-bottom: 0;
}
.sd-feature-grid, .sd-doc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-top: 20px;
}
.sd-feature-item, .sd-doc-item {
    border: 2px solid var(--accent);
    padding: 18px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: 0.3s;
}
.sd-feature-item:hover, .sd-doc-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.sd-feature-item i, .sd-doc-item i {
    font-size: 22px;
    color: #0052cc;
}
.sd-feature-item p, .sd-doc-item p {
    margin-bottom: 0;
}
.jd-rate {
    font-size: 50px;
    font-weight: 800;
    color: var(--accent);
    margin: 10px 0;
}
.jdsc-rate {
    font-size: 32px;
    font-weight: 800;
    color: var(--accent);
    margin: 10px 0;
}
/*Deposit Pages CSS End*/



/*Service Page CSS Start*/
.service-hero {
    background: linear-gradient(90deg, rgba(0, 51, 102, 0.70), rgba(51, 102, 153, 0.55)), url('../newimages/service-banner.webp') center/cover no-repeat;
    padding: 120px 0;
    position: relative;
}
.service-hero .title {
    color: #fff;
    font-weight: 700;
    font-size: 2.5rem;
    text-shadow: 0 3px 6px rgba(0,0,0,0.25);
}
.service-subtag {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    margin-top: 0;
    margin-bottom: 0;
}
/*.hero-shape {
    position: absolute;
    top: -50px;
    right: -80px;
    width: 250px;
    height: 250px;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
    z-index: 1;
}*/
.service-card {
    border-radius: 25px;
    overflow: hidden;
    position: relative;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(15px);
    padding: 35px;
    transition: 0.4s;
    border: 1px solid rgba(255,255,255,0.25);
    min-height: 360px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.service-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}
.icon-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #004aad, #007bff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #fff;
    margin-bottom: 20px;
    box-shadow: 0 10px 25px rgba(0,102,255,0.4);
}
.card-image {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 130px;
    opacity: 0.2;
}
.service-card-title {
    font-size: 22px;
    font-weight: 700;
    color: #002650;
}
.service-card p {
    color: #333;
    font-size: 15px;
    margin-top: 10px;
}
.service-card:hover .icon-circle {
    transform: scale(1.15);
    transition: 0.3s;
}
.background-shape {
    position: absolute;
    left: -30px;
    top: -30px;
    width: 140px;
    height: 140px;
    background: rgba(0,123,255,0.08);
    border-radius: 50%;
    z-index: -1;
}
/*Service Page CSS End*/



/*Department Page CSS Start*/
.dept-hero {
    background: linear-gradient(90deg, rgba(0, 51, 102, 0.70), rgba(51, 102, 153, 0.55)), url('../newimages/dept-banner.webp') center/cover no-repeat;
    padding: 120px 0;
    position: relative;
}
.dept-hero .title {
    color: #fff;
    font-weight: 700;
    font-size: 2.5rem;
    text-shadow: 0 3px 6px rgba(0,0,0,0.25);
}
.dept-subtag {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    margin-top: 0;
    margin-bottom: 0;
}
.dept-card {
    position: relative;
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(10px);
    padding: 40px 30px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
    overflow: hidden;
    transition: 0.4s;
}
.dept-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 18px 35px rgba(0,0,0,0.18);
}
.dept-icon {
    font-size: 48px;
    color: #0d6efd;
    margin-bottom: 20px;
}
.shape-bg {
    position:absolute;
    top:-40px;
    right:-40px;
    width:150px;
    height:150px;
    background: linear-gradient(135deg, #0d6efd, #00d4ff);
    border-radius: 50%;
    opacity:0.15;
    z-index:-1;
    transition: 0.4s;
}
.shape-bg-2 {
    position: absolute;
    /*top: -50px;
    right: -45px;*/
    bottom: -50px;
    left: -45px;
    width: 190px;
    height: 190px;
    background: linear-gradient(135deg, #00d4ff, #0dbaff);
    border-radius: 50%;
    opacity: 0;
    z-index: -2;
    transition: 0.4s;
}
.dept-card:hover .shape-bg {
    opacity: 0.22;
    transform: scale(1.1);
}
.dept-card:hover .shape-bg-2 {
    opacity: 0.18;
    transform: scale(1.5);
}
.dept-card p {
    height: 100px;
    margin-bottom: 0;
    display: flex;
}
.dept-img {
    width: 90px;
    opacity: 0.9;
}
.dept-title {
    font-size: 20px;
    font-weight: 600;
}
/*Department Page CSS End*/



/*Ahawal Page CSS Start*/
.ahawal-hero {
    background: linear-gradient(90deg, rgba(0, 51, 102, 0.70), rgba(51, 102, 153, 0.55)), url(../newimages/ahawal-banner.webp) center / cover no-repeat;
    padding: 120px 0;
    position: relative;
}
.ahawal-hero .title {
    color: #fff;
    font-weight: 700;
    font-size: 40px;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
}
.ahawal-card {
    position: relative;
    padding: 40px 30px;
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(12px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    overflow: hidden;
    transition: 0.4s ease;
}
.ahawal-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 18px 45px rgba(0,0,0,0.20);
}
.shape-bubble {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d6efd, #00d4ff);
    opacity: 0.15;
    transition: 0.5s;
}
.ahawal-card:hover .shape-bubble {
    transform: scale(1.25);
    opacity: 0.28;
}
.ahawal-card:hover .shape-bubble::after {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    bottom: -30px;
    left: -30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d6efd, #00d4ff);
    opacity: 0.20;
}
.year-icon {
    font-size: 52px;
    color: #0d6efd;
    margin-bottom: 15px;
}
.ahawal-img {
    width: 90px;
    opacity: 0.9;
    margin-top: 15px;
}
.download-btn {
    display: inline-block;
    margin-top: 12px;
    padding: 8px 20px;
    background: #0d6efd;
    color: #fff;
    font-weight: 600;
    border-radius: 25px;
    text-decoration: none;
    transition: 0.3s;
}
.download-btn:hover {
    background: #0b54cc;
    color: #fff;
}
/*Ahawal Page CSS End*/



/*Recruitment Page CSS Start*/
.recru-hero {
    background: linear-gradient(90deg, rgba(0, 51, 102, 0.70), rgba(51, 102, 153, 0.55)), url(../newimages/recru-banner.webp) center / cover no-repeat;
    padding: 120px 0;
    position: relative;
    background-position-y: 90%;
}
.recru-hero .title {
    color: #fff;
    font-weight: 700;
    font-size: 40px;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
}
/*Recruitment Page CSS End*/



/*Sale Notice Page CSS Start*/
.sn-hero {
    background: linear-gradient(90deg, rgba(0, 51, 102, 0.70), rgba(51, 102, 153, 0.55)), url(../newimages/sale-banner.webp) center / cover no-repeat;
    padding: 120px 0;
    position: relative;
}
.sn-hero .title {
    color: #fff;
    font-weight: 700;
    font-size: 40px;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
}
.sn-gallery-card {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
    background: #fff;
    transition: transform .4s ease;
}
.sn-img-box {
    position: relative; 
    overflow: hidden; 
}
.noticeImage {
    width: 100%;
    height: 400px;
    object-fit: cover;
    transition: transform .6s ease;
    border: 1px solid #222;
    border-radius: 10px;
}
.sn-title {
    text-align: center;
    margin-top: 15px;
    margin-bottom: 0;
    font-size: 18px;
    color: #222;
}
/*Sale Notice Page CSS End*/



/*Tender Notice Page CSS Start*/
.tender-hero {
    background: linear-gradient(90deg, rgba(0, 51, 102, 0.70), rgba(51, 102, 153, 0.55)), url(../newimages/tender-banner.webp) center / cover no-repeat;
    padding: 120px 0;
    position: relative;
}
.tender-hero .title {
    color: #fff;
    font-weight: 700;
    font-size: 40px;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
}
.tender-gallery-card {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
    background: #fff;
    transition: transform .4s ease;
}
.tender-img-box {
    position: relative; 
    overflow: hidden; 
}
.tenderImage {
    width: 100%;
    height: 400px;
    object-fit: cover;
    transition: transform .6s ease;
    border: 1px solid #222;
    border-radius: 10px;
}
.tender-title {
    text-align: center;
    margin-top: 15px;
    margin-bottom: 0;
    font-size: 18px;
    color: #222;
}
/*Tender Notice Page CSS End*/



/*Dormant Account Notice Page CSS Start*/
.dor-acc-hero {
    background: linear-gradient(90deg, rgba(0, 51, 102, 0.70), rgba(51, 102, 153, 0.55)), url(../newimages/dor-banner.webp) center / cover no-repeat;
    padding: 120px 0;
    position: relative;
}
.dor-acc-hero .title {
    color: #fff;
    font-weight: 700;
    font-size: 40px;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
}
.dor-acc-card {
    position: relative;
    padding: 40px 30px;
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(12px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    overflow: hidden;
    transition: 0.4s ease;
}
.dor-acc-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 18px 45px rgba(0,0,0,0.20);
}
.dor-acc-shape-bubble {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d6efd, #00d4ff);
    opacity: 0.15;
    transition: 0.5s;
}
.dor-acc-card:hover .dor-acc-shape-bubble {
    transform: scale(1.25);
    opacity: 0.28;
}
.dor-acc-card:hover .dor-acc-shape-bubble::after {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    bottom: -30px;
    left: -30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d6efd, #00d4ff);
    opacity: 0.20;
}
.dor-acc-title {
    font-size: 23px;
    font-weight: 600;
}
.year-icon {
    font-size: 52px;
    color: #0d6efd;
    margin-bottom: 15px;
}
.dor-acc-download-btn {
    display: inline-block;
    margin-top: 12px;
    padding: 8px 20px;
    background: #0d6efd;
    color: #fff;
    font-weight: 600;
    border-radius: 25px;
    text-decoration: none;
    transition: 0.3s;
}
.dor-acc-download-btn:hover {
    background: #0b54cc;
    color: #fff;
}
/*Dormant Account Notice Page CSS End*/



/*Awards Page CSS Start*/
.award-hero {
    background: linear-gradient(90deg, rgba(0, 51, 102, 0.70), rgba(51, 102, 153, 0.55)), url(../newimages/award-banner.webp) center / cover no-repeat;
    padding: 120px 0;
    position: relative;
    background-position-y: 15%;
}
.award-hero .title {
    color: #fff;
    font-weight: 700;
    font-size: 40px;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
}
.award-section-title {
    font-size: 35px;
    color: #0d6efd;
    font-weight: 700;
    margin-bottom: 30px;
    text-align: center;
}
.award-nav-tabs {
    border-bottom: 1px solid #ddd;
}
.award-nav-tabs .award-nav-link {
    font-size: 18px;
    font-weight: 600;
    padding: 12px 25px;
    border-radius: 8px;
    text-decoration: none;
}
.award-nav-item {
    height: 65px;
    display: flex;
    align-items: center;
}
.award-nav-tabs .award-nav-link.active {
    background: #1b3a61;
    color: #fff;
    text-decoration: none;
}
.award-card {
    border-radius: 12px;
    overflow: hidden;
    transition: 0.3s;
    cursor: pointer;
    border: 1px solid #eaeaea;
    background: #fff;
}
.award-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.awardImage {
    width: 100%;
    height: 400px;
    object-fit: cover;
}
.award-img-popup {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
}
.award-img-popup .popup-img {
    max-width: 90%;
    max-height: 85vh;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(255,255,255,0.2);
    object-fit: contain;
    transition: transform 0.3s ease;
}
.award-img-popup .close-popup {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}
.award-img-popup .close-popup:hover {
    color: #00bfff;
}
.award-img-popup.show {
    display: flex;
    animation: fadeIn 0.3s ease-in;
}
@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}
.award-text {
    padding: 15px;
}
.award-text h5 {
    font-size: 18px;
    font-weight: 600;
}
/*Awards Page CSS End*/



/*Service Charge Page CSS Start*/
.sc-hero {
    background: linear-gradient(90deg, rgba(0, 51, 102, 0.70), rgba(51, 102, 153, 0.55)), url(../newimages/sc-banner.webp) center / cover no-repeat;
    padding: 120px 0;
    position: relative;
}
.sc-hero .title {
    color: #fff;
    font-weight: 700;
    font-size: 40px;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
}
.charges-nav-tabs {
    border-bottom: none;
    gap: 10px;
}
.charges-nav-tabs .charges-nav-link {
    background: #f3f6ff;
    color: #004aad;
    font-weight: 600;
    border: 2px solid transparent;
    border-radius: 30px;
    padding: 10px 25px;
    font-size: 15px;
    transition: all 0.3s ease;
}
.charges-nav-tabs .charges-nav-link:hover {
    background: #e9f1ff;
    border-color: #004aad;
    color: #002b6e;
}
.charges-nav-tabs .charges-nav-link.active {
    background: #004aad;
    color: #fff;
    border-color: #004aad;
    box-shadow: 0 4px 10px rgba(0, 74, 173, 0.3);
}
.charges-nav-tabs .charges-nav-link i {
    margin-right: 8px;
    font-size: 16px;
}
.tblCharges th {
    padding: 15px;
    background: #fff0ed;
    font-weight: 700;
    color: #333;
    border: none;
    font-size: 16px;
}
.tblCharges th:first-child {
    border-top-left-radius: 6px;
}
.tblCharges td {
    padding: 14px;
    font-size: 15px;
    color: #333;
    border-bottom: 1px solid #eef0f6;
    vertical-align: middle;
    white-space: nowrap;
}
.tblCharges tr:hover td {
    background-color: rgba(0, 185, 242, 0.05);
    transform: translateY(-1px);
}
.all-charges-wrap {
    margin-bottom: 20px;
    text-align: right;
}
.all-charges-btn {
    text-decoration: none;
    background: #004aad;
    color: #fff;
    border-color: #004aad;
    box-shadow: 0 4px 10px rgba(0, 74, 173, 0.3);
    font-weight: 600;
    border: 2px solid transparent;
    border-radius: 30px;
    padding: 10px 25px;
    font-size: 15px;
}
/*Service Charge Page CSS End*/



/*Financial Highlight Page CSS Start*/
.financial-highlight-wrapper {
    padding: 20px 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}
.financial-note {
    font-size: 14px;
    color: #555;
    margin-bottom: 5px;
    font-style: italic;
}
.tblFinancialHighlight {
    margin-bottom: 0;
}
.tblFinancialHighlight tr th {
    background: #eee;
    padding: 5px;
    text-align: center;
}
.tblFinancialHighlight tr td {
    padding: 5px;
    text-align: right;
}
.siteSidebarCard {
    border: 0;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 90px;
    z-index: 5;
    transition: all 0.3s ease;
}
.siteSidebarCardHead {
    padding: 15px;
    font-size: 18px;
    line-height: 1;
    background: #e0ffff;
    border-bottom: 1px solid #2d68c4;
}
.siteSidebarCardBody {
    padding: 0;
}
.siteSidebarUl {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    padding: 15px 20px;
}
.siteSidebarLi {
    transition: border-left 0.3s ease, border-radius 0.3s ease, background 0.3s ease;
}
.siteSidebarLi:hover {
    border-left: 3px solid #000;
    border-radius: 6px 0 0 6px;
    background: #f8fafc;
}
.siteSidebarLi:hover a {
    padding: 7px 10px;
}
.siteSidebarLi a {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    text-decoration: none;
    color: #000;
    transition: padding 0.3s ease, color 0.3s ease;
}
.siteSidebarLi a:hover {
    color: #082567;
}
/*Financial Highlight Page CSS End*/

/*Annual Report Page CSS Start*/
.report-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 1s ease, box-shadow 0.3s ease;
    overflow: hidden;
    padding: 15px 25px;
}
.report-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}
.report-image-wrap {
    display: flex;
    justify-content: center;
}
.annualReportImage {
    width: auto;
    height: 200px;
    border-radius: 10px;
}
.report-content {
    padding: 20px 0;
}
.report-content h5 {
    font-size: 19px;
    color: #002b5b;
    font-weight: 600;
    margin-bottom: 20px;
}
.report-content p {
    color: #666;
    font-size: 0.95rem;
}
.btn-report {
    border: 1px solid #3338A0;
    font-size: 16px;
    font-weight: 700;
    color: #1261ac;
    transition: all 0.7s;
    padding: 5px 15px;
    border-radius: 6px;
    text-decoration: none;
}
.btn-report:hover {
    box-shadow: inset 6em 0 0 0 #03045e, inset -6em 0 0 0 #03045e;
    border-color: #03045e;
    color: #fff;
}
/*Annual Report Page CSS End*/



/*Complaints Info Page CSS Start*/
.complaint-box {
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 6px 25px rgba(0,0,0,0.08);
    text-align: center;
    padding: 60px 30px;
    transition: all 0.3s ease;
}
.complaint-box:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.complaint-box i {
    font-size: 50px;
}
.complaint-box h4 {
    font-weight: 700;
    color: #002b5b;
}
.complaint-box p {
    font-size: 1.05rem;
    color: #555;
    margin-bottom: 25px;
}
.email-box {
    background: #fff;
    border: 1px solid #3338a0;
    color: #1261ac;
    font-weight: 600;
    font-size: 18px;
    border-radius: 6px;
    padding: 15px 35px;
    transition: all 0.7s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 20px;
}
.email-box:hover {
    box-shadow: inset 12em 0 0 0 #03045e, inset -12em 0 0 0 #03045e;
    border-color: #03045e;
    color: #fff;
}
/*Complaints Info Page CSS End*/



/*Financial Position Page CSS Start*/
.fp-hero {
    background: linear-gradient(90deg, rgba(0, 51, 102, 0.70), rgba(51, 102, 153, 0.55)), url(../newimages/fp-banner.webp) center / cover no-repeat;
    padding: 120px 0;
    position: relative;
}
.fp-hero .title {
    color: #fff;
    font-weight: 700;
    font-size: 40px;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
}
.financial-position-card {
    box-shadow: 2px 6px 15px 0 rgba(69, 65, 78, .1);
    border-radius: 10px;
    border: 0;
    background-color: #fff;
}
.financial-position-card-header {
    padding: 15px 20px !important;
    background: linear-gradient(270deg, #1CB5E0 0%, #000851 100%);
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
    font-size: 20px;
    font-weight: 500;
    color: #fff;
}
.tblLocker th {
    padding: 15px;
    background:#F0F8FF;
    font-weight: 700;
    color: #333;
    border: none;
    font-size: 16px;
}
.tblLocker th:first-child {
    border-top-left-radius: 6px;
}
.tblLocker th:last-child {
    border-top-right-radius: 6px;
}
.tblLocker td {
    padding: 15px;
    vertical-align: middle;
    border: none;
    border-bottom: 1px solid #f0f0f0;
    font-size: 15px;
    transition: all 0.2s ease
}
.tblLocker tr:hover td {
    background-color: rgba(0, 185, 242, 0.05);
    transform: translateY(-1px);
}
.financial-position-th, .financial-position-td {
    text-align: right;
}
/*Financial Position Page CSS End*/



/*Gallery Page CSS Start*/
.gallery-card-wrap {
    padding: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 1s ease, box-shadow 0.3s ease;
    border-radius: 20px;
    border-bottom: 6px solid #1261ac;
}
.galleryImage {
    width: 100%;
    height: 330px;
    object-fit: cover;
    border-radius: 20px;
}
.img-popup {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
}
.img-popup .popup-img {
    max-width: 90%;
    max-height: 85vh;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(255,255,255,0.2);
    object-fit: contain;
    transition: transform 0.3s ease;
}
.img-popup .close-popup {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}
.img-popup .close-popup:hover {
    color: #00bfff;
}
.img-popup.show {
    display: flex;
    animation: fadeIn 0.3s ease-in;
}
@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}
/*Gallery Page CSS End*/

/*Enquiry Modal CSS Start*/
.enquiry-modal {
    border-radius: 15px;
    border: none;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
.enquiry-modal .modal-header {
    background: linear-gradient(135deg, #002b8f, #0056b3);
    color: #fff;
    border-bottom: none;
    border-radius: 15px 15px 0 0;
}
.enquiry-modal .form-label {
    font-weight: 600;
    color: #333;
}
@media (max-width: 576px) {
    .modal-dialog {
        margin: 1rem;
    }
}
.enquiry-modal .btn-close {
    filter: invert(1) brightness(200%);
    opacity: 1;
}
/*Enquiry Modal CSS End*/



/*Contact Page CSS Start*/
.contact-hero {
    background: linear-gradient(90deg, rgba(0, 51, 102, 0.70), rgba(51, 102, 153, 0.55)), url('../newimages/contact-banner.webp') center/cover no-repeat;
    padding: 120px 0;
    position: relative;
}
.contact-hero .title {
    color: #fff;
    font-weight: 700;
    font-size: 2.5rem;
    text-shadow: 0 3px 6px rgba(0,0,0,0.25);
}
.cgh-hero {
    background: linear-gradient(90deg, rgba(0, 51, 102, 0.70), rgba(51, 102, 153, 0.55)), url('../newimages/cgh-banner.webp') center/cover no-repeat;
    padding: 120px 0;
    position: relative;
}
.cgh-hero .title {
    color: #fff;
    font-weight: 700;
    font-size: 2.5rem;
    text-shadow: 0 3px 6px rgba(0,0,0,0.25);
}
.omc-hero {
    background: linear-gradient(90deg, rgba(0, 51, 102, 0.70), rgba(51, 102, 153, 0.55)), url('../newimages/omc-banner.webp') center/cover no-repeat;
    padding: 120px 0;
    position: relative;
}
.omc-hero .title {
    color: #fff;
    font-weight: 700;
    font-size: 2.5rem;
    text-shadow: 0 3px 6px rgba(0,0,0,0.25);
}
.ojb-contact-card, .ojb-form-card, .ojb-map-card {
    padding: 25px;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: 0.4s ease-in-out;
    border-left: 6px solid #0056b3;
}
.ojb-contact-card:hover,
.ojb-form-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.15);
}
.ojb-card-icon img {
    width: 60px;
}
.ojb-card-icon,
.ojb-card-icon-small {
    margin-bottom: 15px;
}
.ojb-card-icon-small img {
    width: 50px;
}
.ojb-card-title {
    font-size: 24px;
    font-weight: 700;
    color: #002b5c;
    margin-bottom: 15px;
}
.ojb-details-ul {
    padding-left: 0;
    list-style: none;
}
.ojb-details-li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    font-size: 18px;
}
.ojb-details-li i {
    color: #002b5c;
    background: #ebe9eb;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
.ojb-details-li a {
    text-decoration: none;
    color: #000;
}
.phoneRotate {
    rotate: 90deg;
}
.ojb-input {
    border-radius: 8px;
    border: 1px solid #b9c7dd;
}
.ojb-input:focus {
    border-color: #0047b3;
    box-shadow: 0 0 4px rgba(0, 71, 179, 0.4);
}
.ojb-btn {
    background: linear-gradient(135deg, #0047b3, #007bff);
    border: none;
    padding: 12px 20px;
    color: white;
    font-size: 17px;
    border-radius: 10px;
    font-weight: 600;
    transition: 0.3s;
}
.ojb-btn:hover {
    background: linear-gradient(135deg, #003b91, #0069d4);
    transform: scale(1.02);
}
/*Contact Page CSS End*/



/*Loan Pages CSS Start*/
.gl-hero {
    background: linear-gradient(90deg, rgba(13,110,253,0.80), rgba(0,175,240,0.60)), url('../newimages/gold-loan.webp') center/cover no-repeat;
    padding: 120px 0;
    position: relative;
}
.women-special-banner {
    background: linear-gradient(135deg, #ff6b9d, #c44569);
    padding: 20px 30px;
    border-radius: 15px;
    text-align: center;
    margin-bottom: 40px;
    box-shadow: 0 8px 25px rgba(196, 69, 105, 0.3);
    position: relative;
    overflow: hidden;
}
.women-special-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
    animation: shine 3s infinite;
}
@keyframes shine {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}
.women-special-banner h3 {
    color: #fff;
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 8px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}
.women-special-banner p {
    color: #fff;
    font-size: 16px;
    margin-bottom: 0;
    opacity: 0.95;
}
.women-special-banner .sparkle {
    display: inline-block;
    margin: 0 5px;
    animation: sparkle 1.5s infinite;
}
@keyframes sparkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}
.cc-hero {
    background: linear-gradient(90deg, rgba(13,110,253,0.80), rgba(0,175,240,0.60)), url('../newimages/cash-credit-loan.webp') center/cover no-repeat;
    padding: 120px 0;
    position: relative;
}
.pog-hero {
    background: linear-gradient(90deg, rgba(13,110,253,0.80), rgba(0,175,240,0.60)), url('../newimages/pledged-goods-loan.webp') center/cover no-repeat;
    padding: 120px 0;
    position: relative;
}
.wrh-hero {
    background: linear-gradient(90deg, rgba(13,110,253,0.80), rgba(0,175,240,0.60)), url('../newimages/warehouse-receipt-loan.webp') center/cover no-repeat;
    padding: 120px 0;
    position: relative;
}
.tl-hero {
    background: linear-gradient(90deg, rgba(13,110,253,0.80), rgba(0,175,240,0.60)), url('../newimages/term-loan.webp') center/cover no-repeat;
    padding: 120px 0;
    position: relative;
}
.cl-hero {
    background: linear-gradient(90deg, rgba(13,110,253,0.80), rgba(0,175,240,0.60)), url('../newimages/term-loan.webp') center/cover no-repeat;
    padding: 120px 0;
    position: relative;
}
.bdl-hero {
    background: linear-gradient(90deg, rgba(13,110,253,0.80), rgba(0,175,240,0.60)), url('../newimages/term-loan.webp') center/cover no-repeat;
    padding: 120px 0;
    position: relative;
}
.bd-hero {
    background: linear-gradient(90deg, rgba(13,110,253,0.80), rgba(0,175,240,0.60)), url('../newimages/term-loan.webp') center/cover no-repeat;
    padding: 120px 0;
    position: relative;
}
.jl-hero {
    background: linear-gradient(90deg, rgba(13,110,253,0.80), rgba(0,175,240,0.60)), url('../newimages/term-loan.webp') center/cover no-repeat;
    padding: 120px 0;
    position: relative;
}
.ml-hero {
    background: linear-gradient(90deg, rgba(13,110,253,0.80), rgba(0,175,240,0.60)), url('../newimages/mortgage-loan.webp') center/cover no-repeat;
    padding: 120px 0;
    position: relative;
}
.el-hero {
    background: linear-gradient(90deg, rgba(13,110,253,0.80), rgba(0,175,240,0.60)), url('../newimages/education-loan.webp') center/cover no-repeat;
    padding: 120px 0;
    position: relative;
}
.mbl-hero {
    background: linear-gradient(90deg, rgba(13,110,253,0.80), rgba(0,175,240,0.60)), url('../newimages/medical-loan.webp') center/cover no-repeat;
    padding: 120px 0;
    position: relative;
}
.gl-hero .title, .cc-hero .title, .pog-hero .title, .wrh-hero .title, .tl-hero .title, .cl-hero .title, .bdl-hero .title, .bd-hero .title, .jl-hero .title, .ml-hero .title, .el-hero .title, .mbl-hero .title {
    color: #fff;
    font-weight: 700;
    font-size: 40px;
    text-shadow: 0 3px 6px rgba(0,0,0,0.25);
}
.gold-title {
    font-size: 30px;
    font-weight: 600;
    color: #0d6efd;
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
}
.gold-title::after {
    content: '';
    width: 70px;
    height: 4px;
    background: #0d6efd;
    position: absolute;
    left: 0;
    bottom: 0;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(13, 110, 253, 0.4);
}
.gold-sub {
    font-size: 18px;
    color: #333;
}
.btn-apply-hero {
    background: #0d6efd;
    color: #fff;
    padding: 10px 25px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
}
.btn-apply-hero:hover {
    background: #0d6efd;
}
.gold-hero-img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 10px;
}
.gl-rate-title {
    font-weight: 800;
    font-size: 32px;
    color: #0d6efd;
    position: relative;
}
.gl-rate-title::after {
    content: '';
    width: 80px;
    height: 4px;
    background: #0d6efd;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -8px;
    border-radius: 4px;
}
.gl-rate-card {
    background: #ffffff;
    border-radius: 15px;
    text-align: center;
    padding: 35px 25px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.10);
    transition: transform 1s ease;
    position: relative;
    overflow: hidden;
}
.gl-rate-card:hover {
    transform: translateY(-8px);
}
.special-offer-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    color: #000;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 800;
    border-radius: 0 15px 0 15px;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
    animation: badgePulse 2s infinite;
    z-index: 10;
}
@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
.best-rate-ribbon {
    position: absolute;
    top: 25px;
    left: -53px;
    background: linear-gradient(135deg, #ff6b9d, #c44569);
    color: #fff;
    padding: 8px 45px;
    font-size: 12px;
    font-weight: 700;
    transform: rotate(-45deg);
    box-shadow: 0 4px 10px rgba(196, 69, 105, 0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 10;
}
.gl-rate-icon {
    width: 70px;
    height: 70px;
    background: #e9f3ff;
    color: #0d6efd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
    font-size: 30px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}
.gl-rate-card h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #333;
}
.rate-value {
    font-size: 36px;
    font-weight: 800;
    color: #0d6efd;
    margin: 10px 0;
}
.rate-value span {
    font-size: 14px;
    color: #555;
}
.rate-date {
    font-size: 15px;
    color: #666;
    margin-bottom: 0;
}
.women-rate {
    background: linear-gradient(135deg, #fff5f8, #ffffff);
    border: 3px solid #ff6b9d;
    box-shadow: 0 8px 30px rgba(255, 107, 157, 0.25);
    transition: transform 1s ease;
}
.women-rate:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(255, 107, 157, 0.35);
}
.women-rate::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 15px;
    padding: 3px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.6;
}
@keyframes borderGlow {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}
.women-rate .gl-rate-icon {
    background: linear-gradient(135deg, #ff6b9d, #ff8fab);
    color: #fff;
    box-shadow: 0 5px 20px rgba(255, 107, 157, 0.4);
    animation: iconPulse 2s infinite;
}
@keyframes iconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}
.women-rate .rate-value {
    color: #ff6b9d;
    text-shadow: 2px 2px 4px rgba(255, 107, 157, 0.2);
    animation: rateGlow 2s infinite;
}
@keyframes rateGlow {
    0%, 100% { text-shadow: 2px 2px 4px rgba(255, 107, 157, 0.2); }
    50% { text-shadow: 0 0 20px rgba(255, 107, 157, 0.6); }
}
.women-rate h3 {
    color: #c44569;
    font-weight: 800;
}
.savings-highlight {
    background: linear-gradient(135deg, #fff9e6, #ffffff);
    border: 2px dashed #ffd700;
    border-radius: 10px;
    padding: 15px;
    margin-top: 15px;
    position: relative;
}
.savings-text {
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
}
.savings-amount {
    font-size: 20px;
    font-weight: 800;
    color: #28a745;
    margin-bottom: 0;
}
.regular-rate {
    background: linear-gradient(135deg, #f8fbff, #ffffff);
    border: 2px solid #0d6efd;
    box-shadow: 0 5px 20px rgba(13, 110, 253, 0.15);
    transition: transform 1s ease;
    height: 368px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.regular-rate:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 30px rgba(13, 110, 253, 0.25);
    border-color: #0056b3;
}
.regular-rate .gl-rate-icon {
    background: linear-gradient(135deg, #0d6efd, #4d8fff);
    color: #fff;
    box-shadow: 0 4px 15px rgba(13, 110, 253, 0.3);
    transition: all 0.3s ease;
}
.regular-rate:hover .gl-rate-icon {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(13, 110, 253, 0.4);
}
.regular-rate .rate-value {
    color: #0d6efd;
    transition: all 0.3s ease;
}
.regular-rate:hover .rate-value {
    transform: scale(1.05);
}
.regular-rate h3 {
    color: #0056b3;
    font-weight: 700;
}
.regular-rate::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.05), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.regular-rate:hover::after {
    opacity: 1;
}
.gold-features {
    padding: 60px 0;
    background: #fff;
}
.gold-feature-box {
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: 0.3s;
}
.gold-feature-box:hover {
    transform: translateY(-8px);
}
.gold-feature-box i {
    font-size: 36px;
    color: #0d6efd;
    margin-bottom: 15px;
}
.gold-feature-box h4 {
    font-size: 21px;
}
.gold-cta {
    background: linear-gradient(135deg, #e9f3ff, #ffffff);
    border-radius: 14px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    padding: 25px;
}
.gold-cta h2 {
    font-size: 25px;
}
.btn-apply-final {
    background: #0d6efd;
    color: #fff;
    padding: 10px 25px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}
.btn-apply-final:hover {
    background: #0d6efd;
}
.btn-women-apply {
    background: linear-gradient(135deg, #ff6b9d, #c44569);
    color: #fff;
    padding: 12px 30px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 5px 20px rgba(255, 107, 157, 0.4);
    transition: all 0.3s ease;
    margin-top: 15px;
}
.btn-women-apply:hover {
    background: linear-gradient(135deg, #c44569, #ff6b9d);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 107, 157, 0.5);
    color: #fff;
}
.btn-women-apply i {
    animation: arrowBounce 1s infinite;
}
@keyframes arrowBounce {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px); }
}
.dot-pattern {
    background-color: #f7fbff;
    background-image: radial-gradient(#d0e7ff 1px, transparent 1px);
    background-size: 18px 18px;
}
/*Loan Pages CSS End*/



/*Branch Page CSS Start*/
.branch-hero {
    background: linear-gradient(90deg, rgba(0, 51, 102, 0.70), rgba(51, 102, 153, 0.55)), url('../newimages/branch-banner.webp') center/cover no-repeat;
    padding: 120px 0;
    position: relative;
}
.branch-hero .title {
    color: #fff;
    font-weight: 700;
    font-size: 2.5rem;
    text-shadow: 0 3px 6px rgba(0,0,0,0.25);
}
.branch-card-modern {
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: 0.4s ease;
    border-bottom: 5px solid #1261ac;
    height: 525px;
}
.branch-card-modern:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}
.branch-header {
    background: linear-gradient(135deg, #0072ff, #004aad);
    padding: 16px 20px;
    color: #fff;
}
.branch-header h5 {
    margin: 0;
    font-weight: 700;
}
.branch-sub {
    font-size: 13px;
    opacity: 0.9;
    margin-top: 3px;
}
.branch-info {
    padding: 20px;
}
.info-item {
    display: flex;
    align-items: flex-start;
}
.info-item:not(:last-child) {
    margin-bottom: 15px;
}
.info-item i {
    font-size: 18px;
    color: #004aad;
    flex: 0 0 20px;
    margin-right: 12px;
    margin-top: 4px;
    font-style: normal;
}
.info-item h6 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}
.info-item p {
    margin: 2px 0 0;
    font-size: 15px;
}
.code-badge {
    background: #fcdb32;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 13px;
    font-weight: 600;
    display: inline-block;
    margin-top: 4px;
}
.iconRotate90 {
    rotate: 90deg;
}
/*Branch Page CSS End*/



/*Cyber Awareness CSS Start*/
.ca-hero {
    background: linear-gradient(90deg, rgba(0, 51, 102, 0.70), rgba(51, 102, 153, 0.55)), url('../newimages/cyber-awareness.webp') center/cover no-repeat;
    padding: 120px 0;
    position: relative;
}
.ca-hero .title {
    color: #fff;
    font-weight: 700;
    font-size: 2.5rem;
    text-shadow: 0 3px 6px rgba(0,0,0,0.25);
}
.cyber-bg-pattern {
    background: linear-gradient(135deg, #eef3ff73, #f7fbff);
    position: relative;
    overflow: hidden;
}
.cyber-intro-box {
}
.section-title {
    font-size: 32px;
    font-weight: 700;
    color: #1a2b5f;
    margin-bottom: 20px;
}
.cyber-intro-box p {
    font-size: 16px;
    line-height: 1.7;
    color: #3c4661;
}
.cyber-stats-row {
    display: flex;
    gap: 20px;
    margin-top: 25px;
    flex-wrap: wrap;
}
.cyber-stat-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #ffffff;
    padding: 15px 18px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border: 1px solid #f0f0f0;
    transition: transform .3s ease, box-shadow .3s ease;
}
.cyber-stat-item i {
    font-size: 30px;
    color: #2a5cff;
}
.cyber-stat-item h4 {
    font-size: 22px;
    font-weight: 700;
    color: #0b1f52;
    margin: 0;
}
.cyber-stat-item p {
    margin: 0;
    color: #5f6e9b;
}
.cyber-stat-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
.cyber-main-image {
    width: 100%;
    height: 395px;
    object-fit: cover;
    border-radius: 16px;
}
.section-title-center {
    font-size: 32px;
    font-weight: 700;
    color: #1a2b5f;
}
.section-subtitle {
    color: #546185;
    font-size: 17px;
    margin-top: 5px;
}
.threat-card {
    background: #ffffff;
    padding: 28px;
    border-radius: 16px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border: 1px solid #eef1f8;
    transition: transform 1s ease;
    height: 100%;
    position: relative;
    border-top: 4px solid #3498db;
}
.threat-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}
.threat-icon {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 18px;
    font-size: 28px;
    color: #fff;
}
.threat-danger .threat-icon {
    background: linear-gradient(145deg, #ff4646, #cc2d2d);
}
.threat-warning .threat-icon {
    background: linear-gradient(145deg, #ffae00, #d98c00);
}
.threat-card h4 {
    font-size: 20px;
    font-weight: 700;
    color: #122044;
    margin-bottom: 10px;
}
.threat-card p {
    font-size: 15px;
    line-height: 1.7;
    color: #333;
    margin-bottom: 15px;
}
.threat-example {
    background: #f6f8ff;
    padding: 12px 14px;
    border-radius: 10px;
    border-left: 2px solid #2a5cff;
    font-size: 14px;
    color: #1e2a4b;
    font-weight: 600;
    transition: background .3s, transform 1s;
}
.threat-card:hover .threat-example {
    background: #ebf0ff;
    transform: translateX(4px);
}
.safe-bank-card {
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 1s ease;
}
.safe-bank-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.practice-do-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #28a745;
    color: #fff;
    border-radius: 18px 18px 0 0;
}
.practice-dont-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #dc3545;
    color: #fff;
    border-radius: 18px 18px 0 0;
}
.safe-bank-card-header i {
    font-size: 20px;
}
.practice-card {
    padding: 5px 25px 25px 25px;
}
.practice-do .safe-bank-card-header i {
    color: #2ecc71;
}
.practice-dont .safe-bank-card-header i {
    color: #e63946;
}
.safe-bank-card-header h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}
.practice-list {
    padding-left: 0;
    list-style: none;
    margin-bottom: 0;
}
.practice-list li {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px dashed #d1d7e0;
    font-size: 15px;
    color: #333;
}
.practice-list li:last-child {
    border-bottom: none;
}
.practice-do li i {
    color: #2ecc71;
}
.practice-dont li i {
    color: #e63946;
}
.practice-list li i {
    font-size: 16px;
}
.payment-safety-card {
    padding: 25px 20px;
    text-align: center;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #e3e9f3;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 1s ease;
    height: 430px;
    position: relative;
    overflow: hidden;
}
.payment-safety-card::before {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #6bffcf, #99e3ff);
    transition: 0.7s ease;
    z-index: 0;
    opacity: 0;
}
.payment-safety-card:hover::before {
    top: 0;
    opacity: 0.15;
}
.payment-safety-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}
.payment-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 15px;
    border-radius: 50%;
    background: linear-gradient(145deg, #eef3ff, #ffffff);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: inset 4px 4px 10px #d3d9e8, inset -4px -4px 10px #ffffff;
}
.payment-icon i,
.payment-icon img {
    font-size: 34px;
    color: #1659e6;
    max-width: 50px;
}
.payment-safety-card h4 {
    font-size: 20px;
    color: #1d3557;
    font-weight: 700;
    margin-bottom: 15px;
}
.payment-safety-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.payment-safety-card ul li {
    margin: 8px 0;
    color: #333;
    font-size: 15px;
    padding: 6px 0;
    border-bottom: 1px dotted #d3d7e0;
}
.payment-safety-card ul li:last-child {
    border-bottom: none;
}
.atm-card {
    position: relative;
    background: #fff;
    padding: 25px 25px 25px 25px;
    border-radius: 14px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-left: 4px solid #2a5cff;
    transition: transform 1s ease;
    height: 270px;
}
.atm-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}
.atm-number {
    width: 36px;
    height: 36px;
    background: #1E90FF;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 12px;
}
.atm-card h5 {
    color: #1a2b4c;
    font-size: 17px;
    margin-bottom: 12px;
    font-weight: 600;
}
.atm-card ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.atm-card ul li {
    font-size: 15px;
    color: #4c566b;
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
}
.atm-card ul li::before {
    content: "";
    width: 6px;
    height: 6px;
    background: #1a73e8;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 7px;
}
.rbi-card {
    background: #fff;
    padding: 30px 22px;
    border-radius: 18px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 1s ease;
    height: 100%;
}
.rbi-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}
.rbi-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(145deg, #e7efff, #ffffff);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: inset 5px 5px 10px #d1d8ea, inset -5px -5px 10px #ffffff;
    margin: 0 auto 18px;
}
.rbi-icon i {
    font-size: 30px;
    color: #1659e6;
}
.rbi-card h4 {
    font-size: 20px;
    font-weight: 700;
    color: #1d3557;
    margin-bottom: 10px;
    text-align: center;
}
.rbi-card p {
    color: #445566;
    font-size: 15px;
    text-align: center;
    margin-bottom: 20px;
}
.rbi-highlight {
    background: #f0f6ff;
    border-left: 4px solid #1b4ad7;
    padding: 14px 15px;
    border-radius: 10px;
    font-size: 14px;
    color: #34495e;
}
.rbi-highlight ul {
    list-style: none;
    padding: 0;
    margin-top: 6px;
}
.rbi-highlight ul li {
    padding: 4px 0;
    font-size: 14px;
}
.rbi-highlight strong {
    color: #1b4ad7;
    font-weight: 700;
}
.report-card {
    background: #fff;
    padding: 30px;
    border-radius: 18px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 1s ease;
    position: relative;
    overflow: hidden;
    height: 350px;
}
.report-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}
.report-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 5px;
    width: 100%;
    background: linear-gradient(90deg, #0056ff, #00e0ff);
}
.report-step {
    background: #0056ff;
    color: #fff;
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}
.report-icon {
    width: 60px;
    height: 60px;
    background: #0056ff15;
    color: #0056ff;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15px 0;
    font-size: 24px;
    transition: .3s ease;
}
.report-card:hover .report-icon {
    background: #0056ff25;
    transform: scale(1.08);
}
.report-checklist {
    padding-left: 0;
    margin-bottom: 0;
}
.report-numbers {
    margin-top: 15px;
}
.report-number-item {
    margin-bottom: 12px;
}
.report-number {
    font-size: 20px;
    font-weight: 700;
    color: #0056ff;
}
.report-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #eef5ff;
    padding: 10px 14px;
    border-radius: 10px;
    margin-top: 10px;
    color: #0056ff;
    font-weight: 600;
    transition: .3s ease;
}
.report-link:hover {
    background: #0056ff;
    color: #fff;
    text-decoration: none;
}
.report-checklist li {
    list-style: none;
    margin-bottom: 10px;
    font-size: 15px;
}
.report-checklist i {
    color: #00b36b;
    margin-right: 8px;
}
.emergency-contact-box {
    background: #fff;
    padding: 30px;
    border-radius: 18px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-left: 6px solid #ff4d4d;
    transition: transform 1s ease;
}
.emergency-contact-box:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}
.emergency-contact-box h3 {
    font-size: 22px;
    color: #ff4d4d;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.emergency-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}
.emergency-item {
    background: #f9f9ff;
    padding: 15px;
    border-radius: 12px;
    text-align: center;
    transition: .3s ease;
}
.emergency-item:hover {
    background: #eef3ff;
    transform: translateY(-3px);
}
.scam-alert-card {
    background: #fff;
    padding: 25px;
    border-radius: 16px;
    border-left: 5px solid #ff4d4d;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 1s ease;
    position: relative;
    height: 215px;
}
.scam-alert-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}
.scam-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
}
.scam-high {
    background: #ff2e2e;
}
.scam-medium {
    background: #ff9d00;
}
.scam-medium-wrap {
    border-left: 5px solid #ff9d00 !important;
}
.scam-high-wrap h4 {
    color: #ff2e2e;
}
.scam-medium-wrap h4 {
    color: #ff9d00;
}
.scam-tip {
    margin-top: 12px;
    background: #f3f4f6;
    padding: 10px;
    border-radius: 10px;
    font-size: 14px;
}
.resource-card {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-bottom: 4px solid #0056ff;
    transition: transform 1s ease;
    height: 290px;
}
.resource-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}
.resource-card h4 {
    font-size: 20px;
}
.resource-card i {
    font-size: 32px;
    color: #0056ff;
    margin-bottom: 12px;
}
.resource-link {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 16px;
    background: #eef5ff;
    border-radius: 10px;
    font-weight: 600;
    color: #0056ff;
    text-decoration: none;
    transition: transform 1s ease;
}
.resource-link:hover {
    background: #0056ff;
    color: #fff;
    text-decoration: none;
}
.rotet90 {
    rotate: 90deg;
}
.counter-section {
    
}
.counter-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 40px 20px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border: 2px solid #0056ff;
    transition: transform 1s ease;
}
.counter-card:hover {
    transform: translateY(-8px);
    box-shadow:0 10px 25px rgba(0,0,0,0.15);
}
.counter-value {
    font-size: 32px;
    font-weight: 700;
    color: #003366;
    margin-bottom: 8px;
}
.counter-label {
    font-size: 18px;
    font-weight: 600;
    color: #333;
}
/*Cyber Awareness CSS End*/



/*Grievance Page CSS Start*/
.grievanceCard {
    box-shadow: 2px 6px 15px 0 rgba(69,65,78,.1);
    border-radius: 10px;
    border: 0;
    background-color: #fff;
}
.grievanceCardHeader {
    padding: 15px 20px !important;
    background: linear-gradient(270deg, #1cb5e0 0%, #000851 100%);
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
}
.grievanceCardBody {
    padding: 25px;
}
.grievanceCardHeader h4 {
    color: #fff;
    line-height: 25px;
    font-size: 17px;
}
.grievance-form {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    padding: 30px;
    margin: 40px auto;
    max-width: 700px;
}
.form-title {
    text-align: center;
    margin-bottom: 25px;
}
.form-title h3 {
    font-weight: 600;
    color: #0d6efd;
}
.form-label {
    font-weight: 500;
}
.captcha-box {
    display: flex;
    align-items: center;
    gap: 10px;
}
.captcha-text {
    background: #e9ecef;
    border-radius: 5px;
    padding: 8px 15px;
    font-weight: 600;
    font-size: 16px;
}
.btn-primary {
    border-radius: 6px;
    padding: 10px 25px;
}
.grievanceBtn {
    border: 1px solid #3338A0;
    font-size: 15px;
    font-weight: 700;
    color: #1261ac;
    transition: all 0.7s;
    padding: 10px 20px;
}
.grievanceBtn:hover {
    box-shadow: inset 6em 0 0 0 #03045e, inset -6em 0 0 0 #03045e;
    border-color: #03045e;
    color: #fff;
}
.declarationCheck {
    display: flex;
    align-items: baseline;
}
/*Grievance Page CSS End*/



@media (min-width: 1200px) {
    .mobile-offcanvas {
        display: none !important;
    }
    .main-navbar {
        display: block !important;
    }
    .cat-btn-header-ul {
        margin: 0 0 0 10px;
    }
}

@media (max-width: 1199px) {
    .main-navbar {
        display: none !important;
    }
    .md-toggle-bg {
        display: block !important;
        margin-right: 0px;
    }
    .navbar-toggler {
        display: block !important;
        background: linear-gradient(90deg, #00aff0 22%, #1261ac 70%);
        font-size: 30px;
        padding: 17px;
        border: none;
    }
    .navbar-toggler {
        display: flex !important;
        flex-direction: column;
        padding: 10px;
        background: transparent;
        border: 1px solid;
        border-radius: 5px;
    }
    .mobile-offcanvas {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 1);
        color: #fff;
        z-index: 1050;
        transition: right 0.3s ease-in-out;
        overflow-y: auto;
    }
    .mobile-offcanvas.show {
        right: 0;
    }
    .btn-close {
        filter: invert(1);
    }
    .mobile-offcanvas .navbar-nav {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
    .mobile-offcanvas .nav-item {
        width: 100%;
        position: relative;
        overflow: hidden;
        transition: max-height 0.3s ease-in-out;
        max-height: 60px;
    }
    .mobile-offcanvas .nav-item.open {
        max-height: 600px;
    }
    .mobile-offcanvas .nav-item.open > .dropdown-menu {
        opacity: 1;
        max-height: 500px;
        padding: 10px 0;
        position: static !important;
        transform: none !important;
    }
    .mobile-offcanvas .dropdown-menu {
        display: block;
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        transition: all 0.3s ease;
        background: rgba(255, 255, 255, 0.95);
        border: none;
        margin: 0;
        padding: 0;
    }
    .mobile-offcanvas .dropdown-menu.show {
        display: block;
        animation: dropdownSlide 0.3s ease forwards;
    }
    @keyframes dropdownSlide {
        from {
            opacity: 0;
            transform: translateY(-5px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    .mobile-offcanvas .dropdown-menu .dropdown-item {
        color: #000;
        padding: 10px 20px;
        display: block;
    }
    .mobile-offcanvas .nav-link {
        color: #fff;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 12px 16px;
    }
    .mobile-offcanvas .nav-item.open > .nav-link {
        background: rgba(255, 255, 255, 0.1);
    }
    .right-content-column {
        display: none;
    }
    .topbar-wrapper {
        display: flex;
        align-items: center;
        padding: 8px 5px;
        background: #f5f5f5;
    }
    .top-row {
        width: 100%;
    }
    .custWidth {
        width: 100%;
        justify-content: flex-start;
    }
    .logo-sec {
        margin-left: 0;
    }
    .navbar-toggler-icon {
        width: 24px;
        height: 3px;
        background: #000;
        border-radius: 9999px;
        transition: all 0.3s ease-in-out;
        transform-origin: center;
    }
    .navbar-toggler-icon:nth-child(1), .navbar-toggler-icon:nth-child(2) {
        margin-bottom: 5px;
    }
}
@media (max-width: 767px) {
    .second-logo-div {
        display: none;
    }
    .right-content-column {
        display: none;
    }
    .mega-topbar {
        background: linear-gradient(90deg, rgba(202, 237, 247, 1) 30%, rgba(131, 196, 219, 1) 100%);
        position: relative;
        overflow: hidden;
        padding: 6px 10px;
    }
    .logo-column {
        display: block;
        min-height: 0;
        width: 100%;
        padding-left: 0px !important;
        position: relative;
        z-index: 1;
    }
    .logo-column::before {
        background: url(../newimages/logo-ppb-bg-2-1.png) no-repeat right;
        content: "";
        position: absolute;
        top: -19px;
        right: -10px;
        width: 1000px;
        height: 105px;
        z-index: 0;
    }
    .topbar-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0;
        background: none;
    }
    .md-mb-0 {
        margin-bottom: 0px !important;
    }
    .md-mb-15 {
        margin-bottom: 15px !important;
    }
    .md-mb-30 {
        margin-bottom: 30px !important;
    }
    .md-pl-pr-30 {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
    .md-pb-30 {
        padding-bottom: 30px !important;
    }
    .mobile-top-nav {
        padding: 10px 5px;
        background: #62109f40;
    }
    .mobile-top-nav .topbar-nav-ul {
        /*display: flex;
        justify-content: flex-start;
        gap: 5px;*/
        display: none;
    }
    /*.mobile-top-nav .topbar-nav-ul::-webkit-scrollbar {
        display: none;
    }*/
    .topbar-nav-li {
        display: inline-block;
        height: auto;
        background: #11224e;
        padding: 5px 3px;
        border-radius: 5px;
    }
    .topbar-nav-ul a {
        font-size: 12px;
        color: #fff;
    }
    .topbar-contact-li {
        margin-right: 5px;
        padding-right: 5px;
    }
    .topbar-contact-li:last-child {
        border-right: none;
    }
    .topbar-bank-title {
        font-size: 15px;
        margin-bottom: 0;
        font-weight: 600;
        color: #fff;
    }
    .logo-sec {
        margin-left: 0;
    }
    .logo-title-div {
        position: relative;
        z-index: 2;
        gap: 5px;
    }
    .topbar {
        padding: 5px 0;
        display: flex;
        justify-content: space-between;
    }
    .navbar-nav {
        flex-direction: column;
        padding: 15px 0 !important;
    }
    .logo-div {
        /*width: 80%;*/
        background: #fff;
    }
    .site-logo {
        display: none;
    }
    .mobile-site-logo {
        display: block;
        width: 70px;
        height: 80px;
        object-fit: contain;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
    }
    .navbar-toggler {
        /*display: flex !important;
        flex-direction: column;
        padding: 10px;
        background: transparent;
        border: 1px solid;
        border-radius: 5px;*/
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        padding: 10px 10px;
        border: 1px solid;
        border-radius: 5px;
        background: #ffffffcc;
        box-shadow: 0 3px 6px rgba(0,0,0,0.08);
        transition: all 0.3s ease;
    }
    .navbar-toggler-icon {
        width: 22px;
        height: 2px;
        background: #333;
        border-radius: 2px;
        transition: all 0.3s ease;
    }
    .mobile-hotline-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        background: linear-gradient(135deg, #007bff, #0056d6);
        color: #fff !important;
        font-size: 13px;
        font-weight: 600;
        border-radius: 20px;
        box-shadow: 0 3px 10px rgba(0, 123, 255, 0.3);
        text-decoration: none;
        animation: glowPulse 2s infinite;
    }

    @keyframes glowPulse {
        0% { box-shadow: 0 0 0 rgba(0,123,255,0.2); }
        50% { box-shadow: 0 0 12px rgba(0,123,255,0.45); }
        100% { box-shadow: 0 0 0 rgba(0,123,255,0.2); }
    }
    .mobile-cat-btn {
        padding: 10px 15px;
        width: 100%;
        margin-left: 0 !important;
        background-image: linear-gradient(to right, #25aae1, #40e495, #30dd8a, #2bb673);
        background-size: 300% 100%;
        border: 0;
        color: #fff;
        moz-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -webkit-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
    }
    .mobile-cat-btn:hover {
        border: 0;
        color: #000;
        background-position: 100% 0;
        moz-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -webkit-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
    }
    .mobile-offcanvas::-webkit-scrollbar {
        width: 5px;
    }
    .mobile-offcanvas::-webkit-scrollbar-track {
        background: #fff; 
        border-radius: 10px;
    }
    .mobile-offcanvas::-webkit-scrollbar-thumb {
        background: #53629e;
        border-radius: 10px;
    }
    .mobile-offcanvas {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background: #f0fff0;
        color: #fff;
        z-index: 9999999;
        transform: translateY(-100%);
        transition: transform 0.9s ease-in-out;
        overflow-y: scroll;
    }
    .mobile-offcanvas.show {
        right: 0;
        transform: translateY(0);
    }
    .mobileMenuLogo {
        background: #fff;
        padding: 12px 16px;
    }
    .mobileMenuClose {
        width: 40px;
        height: 40px;
        background: #1e3a8a;
        border: none;
        border-radius: 9999px;
    }
    .mobile-offcanvas .navbar-nav {
        display: flex;
        flex-direction: column;
        gap: 0px;
    }
    .mobile-offcanvas .nav-item {
        width: 100%;
        position: relative;
        overflow: hidden;
        transition: max-height 0.3s ease-in-out;
        max-height: none;
    }
    .mobile-offcanvas .nav-item:not(:last-child) {
        border-bottom: 1px solid #ccc;
    }
    .mobile-offcanvas .nav-item.open {
        max-height: 600px;
        padding: 0 10px 10px 10px;
    }
    .mobile-offcanvas .nav-item.open > .dropdown-menu {
        opacity: 1;
        max-height: 500px;
        padding: 10px 0;
        position: static !important;
        transform: none !important;
        border-radius: 0 0 10px 10px !important;
        overflow-y: visible;
    }
    .mobile-offcanvas .nav-item.dropdown {
        position: relative;
    }
    .mobile-offcanvas .dropdown-menu {
        display: block;
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        transition: all 0.3s ease;
        background: rgba(255, 255, 255, 0.95);
        border: none;
        margin: 0;
        padding: 0;
    }
    .mobile-offcanvas .dropdown-menu .dropdown-item {
        color: #000;
        padding: 15px 30px;
        display: block;
        white-space: normal;
    }
    .mobile-offcanvas .nav-link {
        color: #000;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 20px 20px;
    }
    .mobile-offcanvas .nav-item.open > .nav-link {
        background: rgba(255, 255, 255, 1);
        color: #000;
        /*padding: 10px;*/
    }
    .nav-item.dropdown:hover .dropdown-menu {
        background: #fff;
    }
    .mobile-offcanvas:hover .dropdown-menu {
        border: none;
        margin-left: 0px;
        /*display: none;*/
    }
    .mobile-offcanvas .dropdown-menu.show {
        display: block;
        animation: dropdownSlide 0.3s ease forwards;
    }
    @keyframes dropdownSlide {
        from {
            opacity: 0;
            transform: translateY(-5px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    .nav-item .nav-link {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #000 !important;
    }
    .custom-toggle::after {
        display: none;
    }
    .custom-caret {
        margin-left: auto; 
        transition: transform 0.5s ease; /* Add animation for rotation */
    }
    .nav-item.open .custom-caret {
        transform: rotate(180deg);
    }
    .hero-slide {
        height: 200px;
    }
    .hero-content {
        max-width: 330px;
    }
    .hero-content h1 {
        font-size: 25px;
    }
    .hero-content p {
        font-size: 15px;
    }
    .footer-widget {
        padding: 50px 0px 50px 0px;
    }
    .link-widget {
        margin: 0px 0px 30px 0px !important;
    }
    .footer-widget-title {
        margin-bottom: 10px;
    }
    .mobile-offcanvas .nav-item.open.nav-item.dropdown:hover .dropdown-menu {
        padding: 0;
        border-radius: 0 0 10px 10px;
        position: static !important;
    }
    .md-menu-span {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .nav-item.dropdown:hover .dropdown-menu li {
        /*padding: 12px 32px;*/
    }
    .nav-item.dropdown:hover .dropdown-menu li:not(:last-child) {
        border-bottom: 1px solid #ccc !important;
    }
    .navbar-nav li:not(:last-child) {
        /*border-bottom: 1px solid #fff;*/
    }
    .nav-item {
        padding: 0px 0;
        height: auto;
        display: block;
    }
    .dropdown-item {
        padding: 12px;
        font-size: 15px;
        font-weight: 600;
        color: #000;
    }
    .dropdown-item:hover {
        border-radius: 6px;
        background: #fff;
        color: #000;
    }
    .home-abt-image {
        height: auto;
    }
    .sec-title h2 {
        font-size: 30px;
        line-height: 35px;
    }
    .deposit-tabs {
        display: none;
    }
    .deposit-slider {
        overflow: hidden;
        padding-left: 0;
    }
    .deposit-cards-wrapper {
        /*transform: translateX(0) !important;*/
    }
    .deposit-card {
        flex: 0 0 92%;
        margin-right: 3%;
        transform: scale(1) !important;
    }
    .deposit-card img {
        height: auto;
    }
    .deposit-section {
        clip-path: none;
    }
    .loan-mega-card {
        display: none;
    }
    .loan-tab-list {
        border-right: none;
        padding-right: 0;
    }
    .loan-tab-content {
        padding-left: 0;
        margin-top: 25px;
    }
    .loan-tab-item.active {
        padding: 10px 10px;
    }
    .loan-tab-item {
        padding: 10px 10px;
    }
    .loan-tab-badge {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }
    .loan-tab-item.active .loan-tabs-title {
        font-size: 17px;
    }
    .loan-tabs-title {
        font-size: 17px;
    }
    .homeLoanSecImage {
        height: auto;
    }
    .homeLoanTitle {
        font-size: 21px;
    }
    .homeLoanTxt {
        font-size: 14px;
        line-height: 20px;
    }
    .total-text {
        font-size: 15px;
        line-height: 20px;
    }
    .emiResult {
        font-size: 20px !important;
    }
    .rateInputCol {
        padding: 30px 30px 0px 30px !important;
    }
    .rateOutputCol {
        padding: 0px 30px 30px 30px !important;
    }
    .btn-get-fund {
        font-size: 13px;
        padding: 8px 10px;
    }
    .mobile-app-title {
        font-size: 28px;
    }
    .app-image {
        height: auto;
    }
    /*Loan Services Section*/
    .loan-tab-list,
    .loan-tab-content {
        display: none !important;
    }
    /*Loan Services Section*/
    .ceo-strip {
        padding: 15px;
    }
    .ceo-photo img {
        width: 120px;
        height: 120px;
    }
    .ceo-name {
        font-size: 20px;
    }
    .about-hero, .chairman-hero, .bod-hero, .bom-hero, .branch-hero, .sgm-hero, .fd-hero, .sd-hero, .cd-hero, .pd-hero, .jd-hero, .jdsc-hero, .service-hero, .dept-hero, .ahawal-hero, .recru-hero, .sn-hero, .tender-hero, .award-hero, .dor-acc-hero, .sc-hero, .contact-hero, .gl-hero, .cc-hero, .pog-hero, .wrh-hero, .tl-hero, .cl-hero, .bdl-hero, .bd-hero, .jl-hero, .ml-hero, .el-hero, .mbl-hero, .ca-hero, .fp-hero {
        padding: 60px 0;
    }
    .about-hero .title, .chairman-hero .title, .bod-hero .title, .bom-hero .title, .branch-hero .title, .sgm-hero .title, .fd-hero .title, .sd-hero .title, .cd-hero .title, .pd-hero .title, .jd-hero .title, .jdsc-hero .title, .service-hero .title, .dept-hero .title, .ahawal-hero .title, .recru-hero .title, .sn-hero .title, .tender-hero .title, .award-hero .title, .dor-acc-hero .title, .sc-hero .title, .contact-hero .title, .gl-hero .title, .cc-hero .title, .pog-hero .title, .wrh-hero .title, .tl-hero .title, .cl-hero .title, .bdl-hero .title, .bd-hero .title, .jl-hero .title, .ml-hero .title, .el-hero .title, .mbl-hero .title, .ca-hero .title, .fp-hero .title {
        font-size: 24px;
    }
    .fd-subtag {
        padding: 6px 10px;
        font-size: 14px;
    }
    .lead {
        font-size: 13px;
        margin-bottom: 0;
    }
    .about-image {
        height: 230px;
    }
    .chairman-image {
        height: 380px;
    }
    .deposit-main-card {
        padding: 25px 25px;
    }
    .fd-highlights .section-title {
        font-size: 20px;
    }
    .fd-rate-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }
    .fd-rate-card {
        padding: 15px;
        border: 1px solid var(--accent);
    }
    .fd-tenure {
        font-size: 15px;
    }
    .fd-percentage {
        font-size: 26px;
    }
    .fdTable thead th, .fdTable td {
        white-space: nowrap;
    }
    .md-why-fd, .md-sd-benefit {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    .benefit-box, .sd-benefit-box {
        padding: 15px;
        height: 110px;
    }
    .benefit-box i, .sd-benefit-box i {
        font-size: 25px;
    }
    .benefit-box h4, .sd-benefit-box h4 {
        font-size: 16px;
    }
    .jd-rate {
        font-size: 39px;
    }
    .jdsc-rate {
        font-size: 25px;
    }
    .noticeImage {
        height: 300px;
    }
    .award-section-title {
        font-size: 25px;
    }
    .award-nav-tabs {
        display: flex;
        flex-wrap: nowrap;
    }
    .award-nav-tabs .award-nav-link {
        padding: 10px 15px;
    }
    .awardImage {
        height: auto;
    }
    .award-text h5 {
        font-size: 18px;
    }
    .year-icon {
        font-size: 35px;
    }
    .dor-acc-title {
        font-size: 20px;
    }
    .dor-acc-download-btn {
        font-size: 14px;
    }
    .gold-title, .gl-rate-title {
        font-size: 25px;
    }
    .gold-hero-img {
        height: auto;
    }
    .gold-feature-box p {
        margin-bottom: 0;
    }
    .gold-cta h2 {
        font-size: 20px;
    }
    .women-special-banner {
        padding: 15px 20px;
    }
    .women-special-banner h3 {
        font-size: 20px;
    }
    .women-special-banner p {
        font-size: 14px;
    }
    .emergency-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .payment-safety-card, .atm-card, .report-card, .scam-alert-card, .resource-card {
        height: auto;
    }
    .scam-alert-card {
        padding: 35px 25px;
    }
    .scam-high-wrap h4, .scam-medium-wrap h4 {
        font-size: 20px;
    }
    .scam-badge {
        font-size: 11px;
        padding: 5px 8px;
        top: 15px;
        right: 15px;
        font-weight: 500;
        line-height: 1;
    }
    .cyber-main-image {
        height: auto;
    }
    .customCalcTabs {
        overflow-x: auto;
        white-space: nowrap;
        display: block;
    }
    .calc-nav-tab {
        display: inline-block;
    }
    .financial-position-card-header {
        font-size: 16px;
    }
    .ho-text, .currency-symbol, .counter-number, .crore-symbol, .plus-symbol {
        font-size: 20px;
    }
    .fp-counter-label {
        font-size: 20px;
    }
    .branch-card-modern {
        height: auto;
    }
}