:root {
    --web-history-title-color: #B39A4C;
    --bok-maroon: #8E0806;
    --bok-bg-maroon: #8E0806;
    --background-color: #ffffff;
}
[data-theme="dark"] {
    --background-color: #121212;
    --default-color: #ffffff;
    --heading-color: #ffffff;
    --bok-maroon: #B39A4C;
    --bok-bg-maroon: #B39A4C;
}


/* Responsive adjustments */
@media (max-width: 767px) {
    .contact-section {
        padding: 30px 0;
    }

    .contact-box {
        margin-bottom: 20px;
    }
}

/* Mobile Styles */
@media (max-width: 768px) {
    #innerBanner {
        margin-top: 110px;
        width: 100%;
        height: 600px;
        max-height: 300px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
    .footer .copyright {
        text-align: center;
    }
    .footer .copyright p {
        margin-bottom: 10px;
        text-align: center !important;
    }
    .container12 {
        padding-inline-end: 0; /* Reset padding on mobile */
        --swiper-offset-size: 0px; /* Disable offset */
        margin-top: 50px; /* Reset margin */
    }
    /* Inner Page */
    /* Inner Pages */
    .account-section-card .img-container {
        width: 80%; /* Adjust width as needed */
        height: 55%; /* Adjust width as needed */
        padding: 5px; /* Adjust padding as needed */
    }

    .account-section .side-1 {
        margin-bottom: 100px;
    }

    .account-section .side-2 {
        margin-bottom: 100px;
    }

    /* Account Section */
    .account-section .side-2 h3 {
        /* font-size: 24px !important; */
    }

    .book-cards-section li {
        font-size: 20px;
    }

    .Bokak-section .app-store {
        margin-top: 50px !important;
    }

    .loan-tabs li.active {
        font-weight: 500px !important;
    }

    #book-cards-section .nav-tabs {
        margin-left: 20px;
    }

    .loan-tabs li {
        margin: 2px !important;
        padding: 0px 0px !important;
    }
    .testimonials .test1 p {
        margin-top: 50px;
    }

    .calculate-btn {
        margin-top: 50px;
    }

    .calculator-row {
        margin: 1px;
    }

    /* End */

    .calculator-section h3 {
        font-size: 30px !important;
    }

    .mob-lang1 {
        display: inline-block !important;
    }

    .top-dropdown-menu-content {
        position: static !important;
        display: none !important;
        /* Initially hidden */
        width: 100% !important;
        box-shadow: none !important;
    }

    .dropdown.open .sub-dropdown-menu {
        display: block !important;
        /* Show on click */
    }

    /* SLIDER */

    .carousel-inner .carousel-item {
        flex-direction: column;
    }

    .testimonial-item {
        margin-bottom: 30px;
    }

    .testimonials {
        margin-top: 50px;
        margin-bottom: 100px;
    }

    .testimonials h3 {
        font-size: 40px !important;
        font-weight: 400;
    }

    .Bokak-section .tab-section .nav-tabs {
        font-size: 18px;
    }

    .app-store .store-img {
        width: 120px;
    }

    .Bokak-section ul {
        margin-left: 10px;
    }

    /* Team Section */
    .team-section ul li img {
        width: 40px;
    }

    .team-section .nav-pills .nav-link {
        padding: 10px;
    }
    .dynmicSec-p80 {
        padding: 0px !important;
    }
    .team-section .nav-item {
        font-weight: 500;
        padding: 0px;
    }

    .contact .con-content {
        margin-left: 20px;
        line-height: 10px;
        font-size: 18px;
    }
}

@media (max-width: 576px) {
    .testimonial-item h5 {
        font-size: 1rem;
    }

    .testimonial-item p {
        font-size: 0.9rem;
    }

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 20px;
        height: 20px;
    }
}

@media only screen and (max-width: 768px) {
    .slider-container {
        width: 100%;
        height: 500px;
    }

    .up-arrow,
    .down-arrow {
        font-size: 28px;
    }
}

@media (min-width: 1200px) {
    .hero .icon-box {
        left: 5px !important;
    }

    .hero .icon-boxes:before {
        content: "";
        position: absolute;
        width: 100%;
        bottom: -20px;
        left: 0;
        right: 0px;
        height: 100%;
        background: var(--bok-bg-maroon);
        border-radius: 10px;
        /* border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%); */
    }
}

@media (max-width: 767px) {
    .testimonials .testimonial-wrap {
        padding-left: 0;
    }

    .testimonials .testimonial-item {
        /* padding: 30px; */
        margin: 15px;
    }

    .testimonials .testimonial-item .testimonial-img {
        position: static;
        left: auto;
    }

    .down-arrow {
        bottom: 0px;
    }

    .up-arrow {
        top: 0px;
    }

    .calculator-section {
        margin-top: 100px;
    }

    .Bokak-section .tab-section {
        padding: 5px;
        margin-bottom: 100px;
    }

    .Bokak-section .custom-action-btn {
        /* width: 50%; */
    }

    .Bokak-section .custom-action-btn span {
        margin-top: 10px;
    }

    .Bokak-section p {
        margin-top: 30px;
        font-size: 20px;
    }
}

@media (max-width: 575px) {
    .header .topbar .contact-info i a,
    .header .topbar .contact-info i span {
        font-size: 13px;
    }
}

@media screen and (min-width: 1800px) {
    .hero .icon-box {
        left: 0px !important;
    }
    .container {
        max-width: 1595px;
    }
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
@media (min-width: 1200px) {
    .navmenu {
        padding: 0;
    }

    .navmenu ul {
        margin: 0;
        padding: 0;
        display: flex;
        list-style: none;
        align-items: center;
    }

    .navmenu li {
        position: relative;
    }

    .navmenu > ul > li {
        white-space: nowrap;
        padding: 15px 14px;
    }

    .navmenu > ul > li:last-child {
        padding-right: 0;
    }

    .navmenu a,
    .navmenu a:focus {
        color: var(--nav-color);
        font-size: 15px;
        padding: 0 2px;
        font-family: var(--nav-font);
        font-weight: 300;
        display: flex;
        align-items: center;
        justify-content: space-between;
        white-space: nowrap;
        transition: 0.3s;
        position: relative;
    }

    .navmenu a i,
    .navmenu a:focus i {
        font-size: 12px;
        line-height: 0;
        margin-left: 5px;
        transition: 0.3s;
    }

    .navmenu > ul > li > a:before {
        content: "";
        position: absolute;
        height: 2px;
        bottom: -6px;
        left: 0;
        background-color: var(--nav-hover-color);
        visibility: hidden;
        width: 0px;
        transition: all 0.3s ease-in-out 0s;
    }

    .navmenu a:hover:before,
    .navmenu li:hover > a:before,
    .navmenu .active:before {
        visibility: visible;
        width: 100%;
    }

    .navmenu li:hover > a,
    .navmenu .active,
    .navmenu .active:focus {
        color: var(--nav-color);
    }

    .navmenu .dropdown ul {
        margin: 0;
        padding: 10px 0;
        background: var(--nav-dropdown-background-color);
        display: block;
        position: absolute;
        visibility: hidden;
        left: 14px;
        top: 130%;
        opacity: 0;
        transition: 0.3s;
        border-radius: 4px;
        z-index: 99;
        box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
    }

    .navmenu .dropdown ul li {
        min-width: 200px;
    }

    .navmenu .dropdown ul a {
        padding: 10px 20px;
        font-size: 15px;
        text-transform: none;
        color: var(--nav-dropdown-color);
    }

    .navmenu .dropdown ul a i {
        font-size: 12px;
    }

    .navmenu .dropdown ul a:hover,
    .navmenu .dropdown ul .active:hover,
    .navmenu .dropdown ul li:hover > a {
        color: var(--nav-dropdown-hover-color);
    }

    .navmenu .dropdown:hover > ul {
        opacity: 1;
        top: 100%;
        visibility: visible;
    }

    .navmenu .dropdown .dropdown ul {
        top: 0;
        left: -90%;
        visibility: hidden;
    }

    .navmenu .dropdown .dropdown:hover > ul {
        opacity: 1;
        top: 0;
        left: -100%;
        visibility: visible;
    }
}

/* Mobile Navigation */
@media (max-width: 1199px) {
    .opn-srch {
        display: block !important;
    }

    /* Section Header */
    #innerBanner {
        padding: 10px 0 20px !important;
        position: relative;
    }

    .sec-header h3 {
        font-weight: 250;
        font-size: 35px !important;
    }

    .sec-header h5 {
        font-weight: 250;
        font-size: 25px !important;
    }

    .account-section .side-1 p {
        width: 100%;
        margin-top: 30px;
    }

    .account-section .btn {
        margin-top: 30px;
    }

    /* Account Section mobile */
    #account-section {
        padding: 60px 0;
        font-size: 16px;
        margin-top: 30px;
    }

    .account-section .side-1 h3 {
        font-size: 40px !important;
    }

    .account-section p {
        /* font-size: 20px !important; */
    }

    .account-card p {
        /* font-size: 20px; */
    }

    #account-section {
        padding: 0px 0 !important;
        font-size: 16px;
    }

    .account-card {
        text-align: center !important;
        margin-top: 10px;
    }

    /* END */

    /* Book Card Section */
    .book-cards-section h3 {
        font-size: 40px !important;
    }

    .book-cards-section p {
        font-size: 20px;
    }

    .book-cards-section {
        margin-top: 30px !important;
    }

    /* END */
    /* Account Section */

    .tab-section h2 {
        font-size: 30px !important;
        font-weight: 250px !important;
    }

    /* End */

    /* Bookak Section */
    .Bokak-section {
        background: none !important;
    }

    /* END */

    /* Calculator Section */

    .calculator {
        padding: 10px !important;
    }

    /* MENU */

    .top-menu-3 {
        display: block;
    }

    .top-menu-3 a {
        background-color: #b39a4c;
        color: white !important;
        height: 40px !important;
        font-size: 12px !important;
        font-weight: lighter !important;
    }

    .mobile-nav-toggle {
        color: var(--nav-color);
        font-size: 28px;
        line-height: 0;
        margin-right: 10px;
        cursor: pointer;
        transition: color 0.3s;
    }

    .navmenu {
        padding: 0;
        z-index: 9997;
    }

    .navmenu ul {
        display: none;
        list-style: none;
        position: absolute;
        inset: 60px 20px 20px 20px;
        padding: 10px 0;
        margin: 0;
        border-radius: 6px;
        background-color: var(--nav-mobile-background-color);
        border: 1px solid
            color-mix(in srgb, var(--default-color), transparent 90%);
        box-shadow: none;
        overflow-y: auto;
        transition: 0.3s;
        z-index: 9998;
    }

    .navmenu a,
    .navmenu a:focus {
        color: var(--nav-dropdown-color);
        padding: 10px 20px;
        font-family: var(--nav-font);
        font-size: 17px;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: space-between;
        white-space: nowrap;
        transition: 0.3s;
    }

    .navmenu a i,
    .navmenu a:focus i {
        font-size: 12px;
        line-height: 0;
        margin-left: 5px;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: 0.3s;
        background-color: color-mix(
            in srgb,
            var(--accent-color),
            transparent 90%
        );
    }

    .navmenu a i:hover,
    .navmenu a:focus i:hover {
        background-color: var(--accent-color);
        color: var(--contrast-color);
    }

    .navmenu a:hover,
    .navmenu .active,
    .navmenu .active:focus {
        color: var(--nav-dropdown-hover-color);
    }

    .navmenu .active i,
    .navmenu .active:focus i {
        background-color: var(--accent-color);
        color: var(--contrast-color);
        transform: rotate(180deg);
    }

    .navmenu .dropdown ul {
        position: static;
        display: none;
        z-index: 99;
        padding: 10px 0;
        margin: 10px 20px;
        background-color: var(--nav-dropdown-background-color);
        transition: all 0.5s ease-in-out;
    }

    .navmenu .dropdown ul ul {
        background-color: rgba(33, 37, 41, 0.1);
    }

    .navmenu .dropdown > .dropdown-active {
        display: block;
        background-color: rgba(33, 37, 41, 0.03);
    }

    .mobile-nav-active {
        overflow: hidden;
    }

    .mobile-nav-active .mobile-nav-toggle {
        color: #fff;
        position: absolute;
        font-size: 32px;
        top: 15px;
        right: 15px;
        margin-right: 0;
        z-index: 9999;
    }

    .mobile-nav-active .navmenu {
        position: fixed;
        overflow: hidden;
        inset: 0;
        background: rgba(33, 37, 41, 0.8);
        transition: 0.3s;
    }

    .mobile-nav-active .navmenu > ul {
        display: block;
    }

    .top-menu-item {
        display: none !important;
    }

    .mobile-nav2 {
        display: block;
    }

    /* Hero Section Mobile */
    .hero-top {
        display: none !important;
    }

    .slider-icon {
        display: block !important;
    }

    #meherban {
        background: var(--bok-bg-maroon);
        padding: 5px 0px 5px 0px;
        margin-top: -50px;
        font-weight: 400px;
    }

    .slider-icon .icon img {
        width: 40px !important;
        height: 40px !important;
    }

    .slider-icon .icon .title {
        font-weight: 400;
        font-size: 12px;
        color: #fff !important;
        text-align: center;
    }

    .stretched-link {
        font-size: 12px;
        color: #fff !important;
        text-align: center;
        font-weight: 400;
    }

    /* END */
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
    #banking-service-section {
        background-position: top center !important;
        min-height: 70vh !important; /* Adjust height for mobile view */
        padding: 50px 0px 50px 0px;
    }

    .banking-service-title {
        font-size: 1.8em;
        line-height: 1.3;
    }

    .banking-service-feature {
        margin-bottom: 25px;
    }

    .banking-service-feature-icon {
        width: 30px;
        margin-right: 10px;
    }

    .banking-service-feature-text h4 {
        font-size: 1.2em;
    }

    [data-aos-delay] {
        transition-delay: 0 !important;
    }

    /* New Letter Sub */

    .call-to-action .custom-search {
        margin-bottom: 25px;
    }

    .call-to-action .rate-us {
        padding-top: 25px;
    }

    .footer-bottom p {
        text-align: center !important;
    }

    .header .logo img {
        max-height: 55px;
    }
}

@media (max-width: 1199px) {
    section,
    .section {
        scroll-margin-top: 100px;
    }
}

@media (max-width: 640px) {
    .hero h2 {
        font-size: 36px;
    }

    .hero .btn-get-started,
    .hero .btn-watch-video {
        font-size: 14px;
    }
}

@media (max-width: 575px) {
    .portfolio .portfolio-filters li {
        font-size: 14px;
        margin: 0 5px;
    }
}

@media (min-width: 992px) {
    .pricing .featured {
        transform: scale(1.15);
    }
}

@media (max-width: 575px) {
    .portfolio-details .swiper-button-prev,
    .portfolio-details .swiper-button-next {
        display: none;
    }
}


/* 26 11 2024 */
@media (max-width: 1600px) {
    #innerBanner {
        margin-top: 118px;
        height: 300px;
    }
    .sec-header h3 {
        font-size: 40px;
        line-height: 40px;
    }
    section#account-section .side-1 {
        margin-bottom: 150px;
    }
    .calculator-section h3 {
        font-size: 40px;
    }
    .calculator-section h4 {
        font-size: 40px !important;
    }
    .up-arrow {
        top: 25px;
    }
    .tab-content>.tab-pane ul li {
        padding-bottom: 0px;
    }
    #book-cards-section .nav-tabs {
        margin-bottom: 40px;
    }
    .down-arrow {
        bottom: 30px !important;
    }
    .carousel-control-next {
        right: 75%;
    }
    .slider-content h1 {
        line-height: 60px;
    }
    .account-section .card-body {
        padding: 0;
    }
    .slider-container {
        margin-top: 0px;
    }
    .image-stack {
        width: 70%;
    }
    .up-arrow {
        left: 200px !important;
    }
    .down-arrow {
        left: 200px !important;
    }
    .account-section h3, .book-cards-section h3 {
        font-size: 40px;
    }
    h3.card-title {
        font-size: 20px;
    }
    .Bokak-section .tab-section h2 {
        font-size: 20px !important;
    }
    .testimonials h3 {
        font-size: 30px !important;
    }
    footer#footer .row {
        margin: 0px 50px;
    }
}
@media(max-width: 1200px) {
    .Bokak-section .col-12.text-center.mb-5 {
        margin-bottom: 0 !important;
        max-width: 30%;
    }
    .Bokak-section .tab-section {
        padding: 30px 0px;
        height: auto;
    }
    .testimonials .card-img-top {
        height: 200px;
    }
    #history {
        min-height: auto !important;
    }
    .Bokak-section {
        min-height: auto !important;
    }
    .team-list .card .card-img-top {
        height: 200px;
    }
    .read-more-link {
        font-size: 15px;
    }
}


@media(max-width: 1100px) {
    .carousel-item {
        background-position: center !important;
    }
    .slider-content h1 {
        font-size: 2rem !important;
        line-height: 30px !important;
    }
    .carousel-control-next {
        right: 75% !important;
    }
    #meherban {
        padding: 15px 0px 15px 0px;
    }
    .account-card {
        text-align: left !important;
        padding: 5px 10px !important;
    }
    .book-cards-section h3 {
        font-size: 30px !important;
    }
    .account-section .side-1 h3 {
        font-size: 30px !important;
    }
    .image-stack {
        width: 60%;
    }
    .down-arrow {
        left: 160px !important;
    }
    .up-arrow {
        left: 160px !important;
    }
    .testimonials h3 {
        font-size: 20px !important;
        line-height: 30px;
    }
    .call-to-action .col-md-3.mb-2.text-right.rate-us img {
        width: 100px !important;
    }
    .call-to-action .col-md-5.mb-2.text-center.rate-us img.emoji {
        width: 40px !important;
    }
    .footer h4 {
        font-size: 16px;
    }
    .footer .footer-links ul a {
        font-size: 12px;
    }
    .social-links p {
        font-size: 14px;
    }
    header .opn-srch {
        display: unset !important;
        padding-left: 10px !important;
    }
}

@media(max-width: 1000px) {
    .content-box {
        padding-left: 50px;
    }
    .custom-inline-list {
        align-items: center;
    }
    .carousel-item {
        height: 60vh !important;
    }
    .custom-control {
        top: 80% !important;
    }
    .carousel-control-next {
        right: 70% !important;
    }
    .slider-icon .icon .title {
        margin-top: 10px;
    }
    .footer {
        margin-top: 50px;
    }
    footer#footer .row {
        margin: 10px 40px 0px 40px !important;
    }
    .footer .copyright {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .custom-search-input {
        font-size: 13px;
    }
    .testimonials {
        margin-top: 60px;
        margin-bottom: 50px;
    }
    .hero {
        padding: 95px 0 0 0;
    }
    .slider-content h2 {
        font-size: 1.2rem !important;
    }
    .slider-content h1 {
        font-size: 1.8rem !important;
    }
    .account-card p {
        font-size: 14px;
    }
    .account-section .side-1 p {
        font-size: 14px;
    }
    .book-cards-section li {
        font-size: 14px;
    }
    #history p {
        font-size: 14px;
    }
    .testimonials .content {
        font-size: 14px !important;
    }
    .testimonials .swiper-wrapper p {
        font-size: 14px;
    }
}

@media(max-width: 900px) {
    .team-list .card .card-img-top {
        height: 400px;
        object-position: 30% 30%;
    }
    .custom-inline-list {
        justify-content: left;
    }
    .custom-inline-list li {
        margin: 0px 20px 0px 0px;
    }
    .account-section .side-1 p {
        width: 100%;
        margin-top: 0px;
    }
    .account-section .btn {
        margin-top: 20px;
    }
    .image-stack {
        width: 100%;
    }
    .down-arrow {
        left: 270px !important;
    }
    .up-arrow {
        left: 270px !important;
    }
    #history {
        background-size: cover;
        background-position: 100%;
    }
    .calculate-btn {
        margin-top: 0px;
    }
    .testimonials .swiper-wrapper {
        margin-top: 50px;
    }
    .testimonials .card-img-top {
        height: 250px;
    }
    .call-to-action .col-md-3.mb-2.text-right.rate-us img {
        width: 75px !important;
    }
    .call-to-action p {
        font-size: 12px;
        line-height: 16px !important;
    }
    .call-to-action .col-md-3 {
        max-width: min-content;
    }
    .custom-search-input {
        font-size: 12px;
        height: 40px;
    }
    .custom-search-botton {
        font-size: 12px;
    }
    footer#footer .row {
        margin: 0px 0px 0px 0px !important;
    }
    .footer .social-links a {
        width: 30px;
        height: 25px;
        font-size: 12px;
    }
    .content-box {
        padding: 0px 50px 0px 50px;
    }
    .sec-header h3 {
        font-size: 25px !important;
        line-height: 30px;
    }
}

@media(max-width: 840px) {
    .Bokak-section .col-12.text-center.mb-5 {
        max-width: 50%;
    }
    #innerBanner {
        margin-top: 108px;
        height: 40vh;
    }
    .Page-part {
        margin-bottom: 0px;
    }
    .Page-part h2  span{
        font-size: 30px !important;
    }
    .Page-part h3 {
        font-size: 30px !important;
    }

    .contact-section h3 {
        font-size: 30px !important;
    }
    .Page-part2 li {
        display: inline;
    }
    .card-inner-section .nav-pills .nav-link {
        width: auto;
    }
    .card-inner-section .nav-pills {
        margin-top: 20px;
    }
    div#ca-tabs-content {
        margin-top: 40px !important;
    }
    .Page-part h2 {
        font-size: 25px !important;
        /* text-align: left; */
    }
    .Page-part p {
        /* text-align: left; */
        padding: 0px 0px 0px 0px;
    }
    .subsidiaries {
        padding: 0px 15px 0px 15px !important;
    }
    #contact .info {
        padding: 25px;
    }
    .dynmicSec-p80 {
        margin-top: 40px;
    }
    .Page-part h3 {
        text-align: left;
    }
}

@media(max-width: 700px){
    #book-cards-section {
        margin-bottom: 0px;
    }
    .slider-container {
        margin-top: 50px;
    }
    .account-section .side-1 h3 span {
        font-size: 30px !important;
    }
    section#account-section .side-1 {
        margin-bottom: 40px;
    }
    .account-card {
        padding: 10px 15px !important;
    }
    #community-enrichment {
        padding: 0px 18px;
    }
    #community-enrichment img {
        margin-top: 30px;
    }
    .Page-part h2 span {
        font-size: 30px !important;
    }
    .team-section .nav-item {
        width: 50% !important;
    }
    #innerBanner {
        margin-top: 60px !important;
        background-position: 80% 100%;
    }
    .team-section .nav-pills .nav-link {
        margin: auto;
    }
    #history p {
        width: 100% !important;
    }
    .slider-content {
        left: 15% !important;
    }
    #history h2 span {
        font-size: 30px !important;
    }
    .carousel-item:before {
        position: absolute;
        content: "";
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        background-image: linear-gradient(to right, #000000, #ffff0000);
    }
    .account-section .side-1 {
        margin-bottom: 0px;
    }
    .account-section .top-space {
        margin-top: 0px;
    }
    .account-section .side-2 {
        margin-bottom: 0px;
    }
    .slider-container {
        width: 100%;
        height: 400px !important;
    }
    .slider-container {
        margin-top: 100px;
        height: 440px !important;
    }
    .up-arrow {
        top: -100px !important;
    }
    .carousel-control-next {
        right: 60% !important;
    }
    .carousel-control-prev {
        left: 15% !important;
    }
    #history {
        background-position: 20% 100%;
        position: relative;
        padding: 40px 20px !important;
    }
    section#history:before {
        position: absolute;
        content: "";
        height: 100%;
        width: 100%;
        background: linear-gradient(90deg, #626262, transparent);
    }
    .tab-content .tab-pane span {
        color: var(--background-color);
        margin-bottom: 30px;
    }
    .Bokak-section .custom-action-btn {
        margin-top: 20px;
    }
    .Bokak-section .app-store {
        margin-top: 0px !important;
    }
    .calculator-section h3 {
        padding: 0 20px;
    }
    .calculator-section h4 {
        padding: 0 20px;
        font-size: 30px !important;
    }
    .loan-tabs {
        margin: 0 20px;
    }
    .loan-tabs li {
        padding: 10px !important;
    }
    #history p {
        width: 50%;
        color: white;
    }
    .hero {
        padding: 89px 0 0 0;
    }
    .tab-section .nav-link.active {
        color: #ffffff;
    }
    .tab-section .nav-link {
        color: #c4a654;
    }
    .testimonials .swiper-wrapper {
        margin-top: 50px;
        margin: 0 40px;
    }
    .custom-swiper-navigation {
        left: 90px;
    }
    .call-to-action .rate-us {
        text-align: left !important;
    }
    .d-flex.justify-content-center.webreview {
        justify-content: left !important;
    }
    .for-mob-center {
        display: table;
        margin-right: auto;
    }
    .footer .footer-links {
        margin-bottom: 0px;
    }
    .testimonials .card-body {
        padding:  20px 20px !important;
    }
}

@media(max-width: 640px) {
    .Page-part2 {
        display: unset;
    }
    .Page-part2 li:after{
        content: unset !important;
    }
    #innerBanner {
        margin-top: 60px;
    }
    .team-list .card .card-img-top {
        height: 300px;
        object-position: 30% 40%;
    }
    .team-list .card-body {
        padding: 20px 20px;
    }
    .slider-content {
        left: 10% !important;
    }
    .carousel-control-prev {
        left: 10% !important;
    }
    .carousel-control-next {
        right: 70% !important;
    }
    .down-arrow {
        left: 250px !important;
    }
    .up-arrow {
        left: 250px !important;
    }
    .Bokak-section .tab-section {
        padding: 5px;
        margin-bottom: 0px;
    }
    #history p {
        width: 100%;
        color: white;
        margin-top: 0;
        margin-bottom: 20px;
    }
    .social-links {
        justify-content: start !important;
    }
    .icon-box {
        justify-content: start;
    }
    .icon-box p {
        text-align: left;
    }
    .footer .social-links a {
        height: 30px;
    }
    .Page-part h2 span {
        font-size: 24px !important;
    }
    .Page-part h3 {
        font-size: 24px !important;
    }
    .footer-contact-icon {
        width: 50px;
        height: 50px;
    }
    .contact-section {
        margin-top: 0;
    }
    .call-to-action {
        margin-top: 0;
    }
    .custom-dropdown-menu li {
        border-bottom: 0px !important;
        padding: 0 !important;
        border-right: 1px solid var(--bok-bg-maroon);
        margin: 0 !important;
        padding: 0px 10px !important;
    }
    .show-box-v2.visible {
        width: 100%;
        right: 0%;
        left: 0;
        margin: auto;
        transform: unset;
        top: 18px;
    }
    .show-box-v2 li {
        padding: 5px 4px !important;
        border-bottom: 1px solid #C4A654;
        border-right: 0px;
    }

}

@media(max-width: 540px) {
    .carousel-item {
        height: 50vh !important;
        background-position: 100% 100% !important;
    }
    .up-arrow {
        left: 220px !important;
    }
    .down-arrow {
        left: 220px !important;
    }
    #history {
        background-position: 40% 100%;
    }
    .card-body {
        padding: 20px 0px;
    }
    #mission p {
        font-size: 16px !important;
    }
}

@media(max-width: 440px) {
    .slider-content {
        left: 2% !important;
    }
    .custom-action-btn {
        margin-top: 0px;
    }
    .carousel-control-prev {
        left: 2% !important;
    }
    .up-arrow {
        left: 175px !important;
        top: -70px !important;
    }
    .down-arrow {
        left: 175px !important;
    }
    #history {
        background-position: 40% 100%;
    }
}


@media(max-width: 375px) {
    .up-arrow {
        left: 150px !important;
    }
    .down-arrow {
        left: 150px !important;
    }
    .slider-container {
        margin-top: 40px;
    }
    .up-arrow {
        top: -60px !important;
    }
    .down-arrow {
        bottom: 35px !important;
    }
    #book-cards-section {
        margin-top: 80px;
        margin-bottom: 20px;
    }
}