/**
* Template Name: iLanding
* Template URL: https://bootstrapmade.com/ilanding-bootstrap-landing-page-template/
* Updated: Oct 28 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
    --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
        "Noto Color Emoji";
    --heading-font: "Nunito", sans-serif;
    --nav-font: "Inter", sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
    --background-color: #ffffff; /* Background color for the entire website, including individual sections */
    --default-color: #212529; /* Default color used for the majority of the text content across the entire website */
    --heading-color: #2d465e; /* Color for headings, subheadings and title throughout the website */
    --accent-color: #0d83fd; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
    --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
    --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
    --nav-color: #212529; /* The default color of the main navmenu links */
    --nav-hover-color: #0d83fd; /* Applied to main navmenu links when they are hovered over or active */
    --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
    --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
    --nav-dropdown-color: #212529; /* Used for navigation links of the dropdown items in the navigation menu. */
    --nav-dropdown-hover-color: #0d83fd; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}
  	
/* second last section  */

:root {
  --kreditcar-blue: #0A66C2; /* Deep modern blue */
  --kreditcar-accent: #0077B5;
  --kreditcar-green: #34A853; /* Modern success green */
  --glass-bg: rgba(255, 255, 255, 0.5);
  --primary-dark: #2c3e50;
  --accent-blue: #00d2ff;
  --glass-bg: rgba(255, 255, 255, 0.1);
}


/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
    --background-color: #f3f9ff;
    --surface-color: #ffffff;
}

.dark-background {
    --background-color: #0d83fd;
    --default-color: #ffffff;
    --heading-color: #ffffff;
    --surface-color: #409dfd;
    --contrast-color: #ffffff;
}

/* Smooth scroll */
:root {
    scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
    color: var(--default-color);
    background:radial-gradient(circle at top left, rgba(47,128,255,.12), transparent 28%),linear-gradient(180deg,#f8fbff 0%,#eef5ff 44%,#f7fbff 100%);
    /* font-family: var(--default-font);*/
    font-family:'Inter', sans-serif;
}

a {
    color: var(--accent-color);
    text-decoration: none;
    transition: 0.3s;
}

a:hover {
    color: color-mix(in srgb, var(--accent-color), transparent 25%);
    text-decoration: none;
}


.highlight {
    color: #d35400;
    font-weight: bold;
}	

/* h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--heading-color);
    font-family: var(--heading-font);
}*/

/* PHP Email Form Messages
------------------------------*/
.php-email-form .error-message {
    display: none;
    background: #df1529;
    color: #ffffff;
    text-align: left;
    padding: 15px;
    margin-bottom: 24px;
    font-weight: 600;
}

.php-email-form .sent-message {
    display: none;
    color: #ffffff;
    background: #059652;
    text-align: center;
    padding: 15px;
    margin-bottom: 24px;
    font-weight: 600;
}

.php-email-form .loading {
    display: none;
    background: var(--surface-color);
    text-align: center;
    padding: 15px;
    margin-bottom: 24px;
}

.php-email-form .loading:before {
    content: "";
    display: inline-block;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    margin: 0 10px -6px 0;
    border: 3px solid var(--accent-color);
    border-top-color: var(--surface-color);
    animation: php-email-form-loading 1s linear infinite;
}

@keyframes php-email-form-loading {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
         header#header.shared-premium-header, header.shared-premium-header, .shared-premium-header {
                position: sticky !important;
                top: 0 !important;
                z-index: 99999 !important;
                display: block !important;
                background: rgba(255,255,255,.72) !important;
                backdrop-filter: blur(18px) !important;
                -webkit-backdrop-filter: blur(18px) !important;
                border-bottom: 1px solid rgba(47,128,255,.08) !important;
                box-shadow: 0 16px 40px rgba(43,85,163,.08) !important
            }

            header#header.shared-premium-header .nav, header.shared-premium-header .nav, .shared-premium-header .nav, .shared-premium-header .container.nav {
                max-width: 1240px !important;
                margin: 0 auto !important;
                padding: 12px 24px !important;
                display: flex !important;
                align-items: center !important;
                justify-content: space-between !important;
                gap: 18px !important
            }

            header#header.shared-premium-header .logo, header.shared-premium-header .logo, .shared-premium-header .logo {
                display: flex !important;
                align-items: center !important;
                flex: 0 0 auto !important;
                opacity: 1 !important;
                visibility: visible !important
            }

            header#header.shared-premium-header .logo img, header.shared-premium-header .logo img, .shared-premium-header .logo img {
                display: block !important;
                width: auto !important;
                height: 40px !important;
                max-height: 40px !important;
                min-height: 40px !important;
                opacity: 1 !important;
                visibility: visible !important;
                object-fit: contain !important
            }
            .shared-premium-header .navmenu a:hover,.shared-premium-header .navmenu a.active {
                background: rgba(47,128,255,.08);
                transform: translateY(-1px)
            }
	   .nav-register:hover{
		background: rgb(71 110 173 / 84%) !important;
	   }
	  .shared-premium-header .navmenu a.nav-login {
                background: rgba(255,255,255,.82);
                border-color: rgba(47,128,255,.14);
                box-shadow: 0 10px 22px rgba(43,85,163,.05)
            }
	  
.shared-premium-header {
                position: sticky;
                top: 0;
                z-index: 5000;
                background: rgba(255,255,255,.64);
                backdrop-filter: blur(18px);
                -webkit-backdrop-filter: blur(18px);
                border-bottom: 1px solid var(--line);
                box-shadow: 0 16px 40px rgba(43,85,163,.08)
            }

            .shared-premium-header .nav {
                max-width: var(--max);
                margin: 0 auto;
                padding: 12px 24px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 18px
            }

            .logo img {
                height: 40px;
                width: auto
            }

            .navmenu {
                display: flex;
                justify-content: flex-end;
                flex: 1
            }

            .navmenu ul {
                list-style: none;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                gap: 8px;
                margin: 0;
                padding: 0;
                width: 100%
            }

            .navmenu a {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                padding: 11px 15px;
                border-radius: 16px;
                font-weight: 700;
                border: 1px solid transparent;
                transition: .22s ease;
                white-space: nowrap
            }

            .navmenu a:hover,.navmenu a.active {
                background: rgba(47,128,255,.08);
                transform: translateY(-1px)
            }

            .nav-login {
                background: rgba(255,255,255,.82);
                border-color: rgba(47,128,255,.14);
                box-shadow: 0 10px 22px rgba(43,85,163,.05)
            }

            .nav-register {
                background: linear-gradient(135deg,#2f80ff,#66b3ff);
                color: #fff !important;
                box-shadow: 0 16px 32px rgba(47,128,255,.18)
            }

            .nav-live-slot {
                position: relative;
                margin-right: 8px
            }

            .nav-live-button {
                appearance: none;
                border: 1px solid rgba(47,128,255,.12);
                cursor: pointer;
                display: inline-flex;
                align-items: center;
                gap: 9px;
                height: 44px;
                padding: 0 16px;
                border-radius: 999px;
                background: linear-gradient(180deg,rgba(255,255,255,.96),rgba(244,248,255,.9));
                color: var(--brand);
                box-shadow: 0 12px 28px rgba(43,85,163,.08);
                font: inherit;
                font-weight: 800;
                position: relative;
                overflow: hidden
            }

            .nav-live-button:before {
                content: "";
                position: absolute;
                left: -35%;
                top: 0;
                width: 28%;
                height: 100%;
                background: linear-gradient(90deg,transparent,rgba(255,255,255,.26),transparent);
                animation: navLiveShine 4.6s linear infinite
            }

            .nav-live-button:hover,.nav-live-button.is-active {
                transform: translateY(-1px);
                box-shadow: 0 16px 30px rgba(43,85,163,.12)
            }

            .nav-live-dot {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: #19c56a;
                box-shadow: 0 0 0 0 rgba(25,197,106,.45);
                animation: livePulse 2s infinite
            }

            .nav-live-label {
                font-size: .78rem;
                font-weight: 900;
                color: #1b9460;
                text-transform: uppercase;
                letter-spacing: .08em
            }

            .mail-badge {
                display: inline-grid;
                place-items: center;
                min-width: 19px;
                height: 19px;
                padding: 0 5px;
                border-radius: 999px;
                background: linear-gradient(135deg,#ff5d7a,#ff7b6b);
                color: #fff;
                font-size: .64rem;
                font-weight: 900;
                line-height: 19px;
                box-shadow: 0 0 0 3px rgba(255,255,255,.92),0 8px 16px rgba(255,93,122,.28)
            }
	    header#header.shared-premium-header, header.shared-premium-header, .shared-premium-header{
		position: relative !important;
    		backdrop-filter: none !important;
	    }
            @media (max-width: 767px) {
                header#header.shared-premium-header .nav, header.shared-premium-header .nav, .shared-premium-header .nav, .shared-premium-header .container.nav {
                    padding:12px 16px !important;
                    flex-wrap: wrap !important
                }
            }

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@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 a,
    .navmenu a:focus {
        color: var(--nav-color);
       /* padding: 18px 15px; */
        font-size: 16px;
        font-family: var(--nav-font);
        font-weight: 400;
        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;
        transition: 0.3s;
    }

    /*.navmenu li:last-child a {
        padding-right: 0;
    }*/

    .navmenu li:hover > a,
    .navmenu .active,
    .navmenu .active:focus {
        color: var(--nav-hover-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;
    }
}

/* Navmenu - Mobile */
@media (max-width: 1199px) {
    .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);
        overflow-y: auto;
        transition: 0.3s;
        z-index: 9998;
        box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
    }

    .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);
        border: 1px solid
            color-mix(in srgb, var(--default-color), transparent 90%);
        box-shadow: none;
        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;
    }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
        :root {
            --primary-blue: #0056b3;
            --text-muted: #6c757d;
            --dark-bg: #f8f9fa;
        }

        .main-footer {
            background-color: #ffffff;
            padding: 80px 0 0px;
            font-family: 'Inter', sans-serif;
            border-top: 1px solid #eee;
        }

        .footer-logo {
            font-weight: 800;
            font-size: 1.5rem;
            letter-spacing: -0.5px;
            color: #212529;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
        }

        .footer-logo span {
            background: var(--primary-blue);
            color: white;
            padding: 2px 8px;
            border-radius: 6px;
            margin-right: 8px;
        }

        .footer-desc {
            color: var(--text-muted);
            line-height: 1.7;
            font-size: 0.95rem;
            max-width: 400px;
        }

        .footer-heading {
            font-size: 1.1rem;
            font-weight: 700;
            margin-bottom: 1.8rem;
            color: #435076;
        }

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

        .footer-links li {
            margin-bottom: 12px;
        }

        .footer-links a {
            text-decoration: none;
            color: var(--text-muted);
            transition: all 0.3s ease;
            font-size: 0.95rem;
        }

        .footer-links a:hover {
            color: var(--primary-blue);
            padding-left: 5px;
        }

        .contact-info p {
            margin-bottom: 10px;
            font-size: 0.95rem;
            color: var(--text-muted);
        }

        .contact-info i {
            width: 25px;
            color: var(--primary-blue);
        }

        .social-icons {
            display: flex;
            gap: 12px;
            margin-top: 20px;
        }

        .social-link {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #ddd;
            color: #555;
            transition: all 0.3s ease;
            text-decoration: none;
        }

        .social-link:hover {
            background: var(--primary-blue);
            color: white;
            border-color: var(--primary-blue);
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0,86,179,0.3);
        }

        .footer-bottom {
            background: var(--dark-bg);
            padding: 25px 0;
            margin-top: 60px;
            border-top: 1px solid #eee;
        }

        .legal-links {
            display: flex;
            gap: 20px;
            justify-content: flex-end;
        }

        .legal-links a {
            text-decoration: none;
            color: var(--text-muted);
            font-size: 0.85rem;
        }

        @media (max-width: 768px) {
            .main-footer { padding: 50px 0 20px; text-align: center; }
            .footer-desc { margin: 0 auto 2rem; }
            .social-icons { justify-content: center; margin-bottom: 3rem; }
            .legal-links { justify-content: center; margin-top: 15px; }
            .footer-logo { justify-content: center; }
        }

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: -15px;
    z-index: 99999;
    background-color: #2d465e;
    width: 44px;
    height: 44px;
    border-radius: 50px;
    transition: all 0.4s;
}

.scroll-top i {
    font-size: 24px;
    color: var(--contrast-color);
    line-height: 0;
}

.scroll-top:hover {
    background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
    color: var(--contrast-color);
}

.scroll-top.active {
    visibility: visible;
    opacity: 1;
    bottom: 120px;
}

.scroll-top [class*=" bi-"]::before {
    margin-right: 2px;
    color: white;
}
/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
    [data-aos-delay] {
        transition-delay: 0 !important;
    }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
    color: var(--default-color);
    background-color: var(--background-color);
    padding: 170px 0 80px 0;
    text-align: center;
    position: relative;
}

.page-title h1 {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 10px;
}

.page-title .breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    justify-content: center;
    padding: 0;
    margin: 0;
    font-size: 16px;
    font-weight: 400;
}

.page-title .breadcrumbs ol li + li {
    padding-left: 10px;
}

.page-title .breadcrumbs ol li + li::before {
    content: "/";
    display: inline-block;
    padding-right: 10px;
    color: color-mix(in srgb, var(--default-color), transparent 70%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
    color: var(--default-color);
    /*background-color: var(--background-color);*/
    padding: 33px 0;
    scroll-margin-top: 90px;
    /* overflow: clip; */
}

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

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
    text-align: center;
    padding-bottom: 60px;
    position: relative;
}

.section-title h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 20px;
    position: relative;
}

.section-title h2:after {
    content: "";
    position: absolute;
    display: block;
    width: 50px;
    height: 3px;
    background: var(--accent-color);
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.section-title p {
    margin-bottom: 0;
}


/*--------------------------------------------------------------
all style 
--------------------------------------------------------------*/
h1{
    color: #223a65;
    /*font-size: clamp(2.2rem, 4vw, 3.9rem) !important;*/
    font-weight: bold;
}
h2{
	color: #223a65;
	margin: 0 0 14px;
	font-size: 1.5em;
        font-weight: bold;
}
h3{
	font-size: 1.26rem;
	margin: 0 0 14px;
	color: #223a65;
	font-weight: bold;
}

p{

    font-size: 1rem !important;
    line-height: 1.75 !important;
    color: #6a7c99;
}
.eyebrow{
    display: inline-block;
    font-size: .8rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #2f80ff;
    margin-bottom: 14px;
}
.panel{
    background: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(244, 248, 255, .92));
    border: 1px solid rgba(255, 255, 255, .96);
    box-shadow: 0 22px 55px rgba(43,85,163,.10);
    border-radius: 32px;
    padding: 0px;
}
.panel,.card,.reward-card,.feature-pill,.shop-benefit,.status-pill,.hero-checks span,.hero-bank-chip,.hero-metric,.hero-panel-row,.rate-item,.faq-card,.btn {
                transition: transform .26s ease, box-shadow .26s ease, background .26s ease, border-color .26s ease
            }

            .card:hover,.reward-card:hover,.feature-pill:hover,.shop-benefit:hover,.status-pill:hover,.hero-bank-chip:hover,.hero-metric:hover,.hero-panel-row:hover,.rate-item:hover,.faq-card:hover {
                transform: translateY(-5px) scale(1.01);
                box-shadow: 0 26px 48px rgba(43,85,163,.14)
            }

            .btn:hover {
                transform: translateY(-3px) scale(1.01)
            }
.hero-bank-chip, .reward-card, .shop-benefit, .feature-pill, .card, .hero-metric, .status-pill, .faq-card, .hero-panel-row, .rate-item {
    cursor: pointer;
}
/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
    padding:28px 0 10px;
    position:relative;
}

/*.hero::before, .partner_benefits::before{
    content:'';
    position:absolute;
    width:500px;
    height:500px;
    background:radial-gradient(circle,#c7d2fe 0%,transparent 70%);
    top:-150px;
     right:-100px;
    z-index:0; 
}*/

.hero-checks{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 12px;
}
.hero-checks span{
    border-radius: 999px;
    background: rgba(255, 255, 255, .82);
    border: 1px solid rgba(255, 255, 255, .94);
    box-shadow: 0 10px 24px rgba(43, 85, 163, .06);
    padding: 9px 12px !important;
    font-size: .84rem !important;
    color: #33527f;
    font-weight: 800;
    width: fit-content;
}

.hero-main{
    padding: 52px 56px 42px !important;
    background: radial-gradient(circle at 82% 15%, rgba(122,196,255,.22), transparent 20%),linear-gradient(180deg,rgba(255,255,255,.90),rgba(255,255,255,.78))!important;
    border-radius: 40px;
    box-shadow: 0 30px 76px rgba(43, 85, 163, .14);
}

.hero-v4-board{
    padding: 26px !important;
    border-radius: 36px !important;
    min-height: 0 !important;
    background: linear-gradient(180deg, #1d2d46, #22344f);
    box-shadow: 0 30px 76px rgba(27, 45, 76, .22);
    color: #eef5ff;
}

.hero-v4-top{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.hero-v4-top-pills{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;

}
.hero-v4-top-pills span{
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    font-size: .68rem !important;
    padding: 7px 10px !important;
}
.hero-v4-rates{
    display: grid;
    gap: 10px;
}
.hero-v4-head, .hero-v4-row{
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
}
.hero-v4-row{
    background: rgba(255, 255, 255, .08);
    padding: 12px 14px !important;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}
.hero-v4-row:before, .hero-rates-row:before, .rate-item:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(103, 215, 255, .9);
    box-shadow: 0 0 0 0 rgba(103, 215, 255, .35);
    transform: translate(-50%, -50%);
    animation: signalPulse 2.6s infinite;
}
.hero-v4-bottom{
    display: grid;
    gap: 10px !important;
    margin-top: 12px !important;
}
.hero-v4-pill{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px !important;
    border-radius: 18px;
    background: rgba(255, 255, 255, .92);
    color: #244a87;
    box-shadow: 0 18px 42px rgba(43, 85, 163, .12);
    font-weight: 800;
    font-size: 0.86rem !important;
}
	
.hero-v4-row em {
    font-style: normal;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(118, 217, 171, .12);
    color: #a3f2c8;
    font-size: .72rem;
    font-weight: 900;
}

.btn-primary{
    background:#2563eb;
    color:white;
    padding:15px 30px;
    border-radius:10px;
    text-decoration:none;
    font-weight:600;
    box-shadow:0 10px 25px rgba(37,99,235,0.4);
    transition:0.3s;
}

.btn-primary:hover{
    transform:translateY(-3px);
    color:white;
}

.btn-outline{
    border:2px solid #2563eb;
    color:#2563eb;
    padding:13px 28px;
    border-radius:10px;
    text-decoration:none;
    font-weight:600;
    margin-left:15px;
    transition:0.3s;
}

.btn-outline:hover{
    background:#2563eb;
    color:white;
}

@media (max-width: 992px) {
    .hero .container {
      	padding: 21px;
     }
    .hero-main{
	padding: 32px 10px 32px !important;
     }
    .hero-v4-board{
	margin-top: 65px; 
     }
     .hero_btn a{
        width:100%;
	text-align:center;
     }

}


/*--------------------------------------------------------------
# portal_section_banks
--------------------------------------------------------------*/

.section-padding {
    padding: 80px 0;
    background: #f4f6fb;
}

.main-title {
    font-weight: 700;
    margin-bottom: 20px;
    font-size: 2.3rem;
    font-weight: 700;
    line-height: 1.2;
    color: #435076;
}

.sub-header {
    max-width: 800px;
    margin: 0 auto 60px auto;
    color: #475569;
    /* line-height: 1.6; */
    font-size: 15px;
}

/* Unique Card Design */
.feature-card-portal {
    background: #ffffff;
    border: none;
    border-radius: 20px;
    padding: 40px 30px;
    height: 100%;
    transition: all 0.3s ease;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.feature-card-portal:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(13, 59, 102, 0.1);
}

/* The Number Badge */
.card-number {
    position: absolute;
    top: 20px;
    right: 25px;
    font-size: 3rem;
    font-weight: 800;
    color: rgba(13, 59, 102, 0.05);
    line-height: 1;
}

.icon-box {
    width: 70px;
    height: 70px;
    background: #eef4ff;
    color: #0d6efd;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    font-size: 28px;
    margin-bottom: 25px;
    transition: 0.3s;
}

.feature-card-portal:hover .icon-box {
    background: #0d3b66;
    color: #fff !important;
}

.card-title {
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 15px;
    color: #0d3b66;
}

.card-text {
    font-size: 15px;
    color: #475569;
}

.highlight-bar {
    width: 50px;
    height: 4px;
    background: #0d6efd;
    margin-bottom: 20px;
    border-radius: 2px;
}
/*--------------------------------------------------------------
# seconf_section_banks
--------------------------------------------------------------*/
  .seconf_section_banks{
        text-align:center;
        padding:30px 0;
        background:white;
 	display: flex;
    	flex-wrap: wrap;
    	justify-content: space-between;
    	border-radius: 40px;
    	margin: 10px auto;
    }

    .seconf_section_banks img{
        height: 48px!important;
        margin:0 25px;
	animation: bankLogoFloat 6s ease-in-out infinite;
    	transition: transform .24s ease, filter .24s ease;
    }

{
0%, 100% {
    transform: translateY(0);
}
50% {
    transform: translateY(-7px);
}
}
@media (max-width: 992px) {
    .seconf_section_banks img{
        margin:13px 25px;
    }
}
/*--------------------------------------------------------------
# Ein Portal & Vorteile Section
--------------------------------------------------------------*/

.portal-grid , .dealer-grid, .benefits-grid{
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, 1fr);
}
.card{
    padding: 26px;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(244, 248, 255, .9));
    border: 1px solid rgba(255, 255, 255, .95);
    box-shadow: 0 18px 42px rgba(43, 85, 163, .08);
    transition: .24s ease;
    position: relative;
    overflow: hidden;
}

.card-icon{
    width: 68px;
    height: 68px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #eef6ff, #dbe9ff);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), 0 14px 28px rgba(43, 85, 163, .08);
    margin-bottom: 18px;
}
.card-icon i {
    color: #2f80ff;
    font-size: 1.68rem !important;
}
/*--------------------------------------------------------------
# Ein Portal & Vorteile after Section
--------------------------------------------------------------*/
.flow-track{
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto 1fr auto 1fr auto;
    gap: 10px;
    align-items: center;
}
.flow-stop {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(255, 255, 255, .96);
    box-shadow: 0 14px 34px rgba(43, 85, 163, .08);
    font-weight: 800;
    color: #29467b;
}
.flow-line {
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(47, 128, 255, .12), rgba(47, 128, 255, .42), rgba(47, 128, 255, .12));
    position: relative;
    overflow: hidden;
}

.dealer-head{
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}
.dealer-grid{
    grid-template-columns: repeat(3, 1fr);
}

/*--------------------------------------------------------------
# shop Section
--------------------------------------------------------------*/
.shop-shell{
    display: grid;
    grid-template-columns: .86fr 1.14fr;
    gap: 34px;
    padding: 40px !important;
}
.shop-benefits{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.shop-benefit {
    padding: 17px 18px !important;
    border-radius: 22px !important;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .86);
    border: 1px solid rgba(255, 255, 255, .96);
    box-shadow: 0 14px 34px rgba(43, 85, 163, .08);
    font-weight: 800;
    color: #29467b;
}
.shop-ui-v4 {
    display: grid;
    gap: 16px;
}
.shop-highlight-card{
    padding: 22px;
    border-radius: 30px;
    background: linear-gradient(180deg, #1d2d46, #22344f);
    box-shadow: 0 32px 80px rgba(27, 45, 76, .22);
    color: #eef5ff;
    overflow: hidden;
    position: relative;
}
.shop-highlight-top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;

}
.shop-highlight-top small {
    color: #9eb4d2;
    font-size: .76rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.shop-highlight-main {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    align-items: center;
    position: relative;
    z-index: 1;
}
.phone-card {
    width: 96px !important;
    height: 182px !important;
    transform: rotate(-5deg);
    transition: transform .28s ease, box-shadow .28s ease;
    position: relative;
    width: 86px;
    height: 164px;
    border-radius: 26px;
    background: linear-gradient(180deg, #111827, #27354c);
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .08), 0 20px 36px rgba(17, 24, 39, .26);
}
.phone-notch {
    position: absolute;
    left: 50%;
    top: 10px;
    transform: translateX(-50%);
    width: 34px;
    height: 10px;
    border-radius: 0 0 10px 10px;
    background: #0a1020;
}
.phone-screen {
    position: absolute;
    inset: 14px;
    border-radius: 18px;
    background: linear-gradient(180deg, #84d9ff, #5eb7ff 45%, #2f80ff);
}
.product-copy {
    position: relative;
}
.product-copy strong {
    display: block;
    color: #fff !important;
    font-size: 1.42rem !important;
    margin-bottom: 8px;
}
.product-copy span {
    display: block;
    color: #c9dbf2 !important;
    font-size: 1rem !important;
    line-height: 1.55 !important;
}
.product-copy:after {
    content: "freigeschaltet";
    display: inline-flex;
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(118, 217, 171, .12);
    color: #a3f2c8;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    animation: unlockPulse 2.8s ease-in-out infinite;
}
.balance-card {
    padding: 24px;
    border-radius: 28px;
    background: linear-gradient(135deg,#2f80ff,#66b3ff);
    color: #fff;
    box-shadow: 0 22px 46px rgba(47,128,255,.22);
    position: relative;
    overflow: hidden;
}
.balance-card:after {
    content: "";
    position: absolute;
    left: -30%;
    top: 0;
    width: 28%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .24), transparent);
    animation: balanceShine 5s linear infinite;
}
.balance-card small {
    display: block;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 8px;
    opacity: .9
}

.balance-card strong {
    display: block;
    font-size: 2rem;
    line-height: 1.02;
    margin-bottom: 6px
}

.balance-card span {
    display: block;
    color: rgba(255,255,255,.88);
    font-size: .92rem
}
.shop-progress-line {
    height: 8px;
    border-radius: 999px;
    background: rgba(47, 128, 255, .10);
    overflow: hidden;
}
.shop-progress-line span {
    display: block;
    height: 100%;
    width: 76%;
    border-radius: 999px;
    background: linear-gradient(90deg, #67d7ff, #2f80ff);
    box-shadow: 0 0 24px rgba(103, 215, 255, .28);
    animation: progressShift 3.6s ease-in-out infinite;
}

.rewards-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
    display: grid;
}
.reward-card {
    border-radius: 26px !important;
    min-height: 170px;
    display: grid;
    align-content: start;
    position: relative;
    overflow: hidden;
    min-height: 160px !important;
    padding: 18px;
    border-radius: 24px;
    background: rgba(255, 255, 255, .9);
    border: 1px solid rgba(255, 255, 255, .96);
    box-shadow: 0 16px 34px rgba(43, 85, 163, .08);
    animation: rewardFloat 6s ease-in-out infinite;
}
.shop-item-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 16px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), 0 12px 22px rgba(43, 85, 163, .06);
}
.shop-benefit i, .shop-item-icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: rgba(47, 128, 255, .08);
    display: grid;
    place-items: center;
    color: #2f80ff;
}

.shop-status-v4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.shop-status-v4 .status-pill {
    justify-content: center;
}
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(255, 255, 255, .96);
    box-shadow: 0 16px 34px rgba(43, 85, 163, .08);
    font-weight: 800;
    color: #29467b;
}

.hero-checks span, .shop-benefit, .feature-pill, .status-pill, .faq-badge {
    animation: softFloat 7s ease-in-out infinite;
}
/*--------------------------------------------------------------
# benefits-shell Section
--------------------------------------------------------------*/
.benefits-grid {
    grid-template-columns: repeat(2, 1fr);
}
.benefits-grid .card {
    min-height: 100%;
}

/*--------------------------------------------------------------
# autotraum-shell Section
--------------------------------------------------------------*/
.autotraum-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 34px;
    align-items: center;
}
.autotraum-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 24px;
}
.feature-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(255, 255, 255, .96);
    box-shadow: 0 14px 34px rgba(43, 85, 163, .08);
    font-weight: 800;
    color: #29467b;
}
.autotraum-visual {
    position: relative;
    min-height: 430px;
}
.visual-main {
    padding: 22px;
    border-radius: 32px;
    background: linear-gradient(180deg, #1d2d46, #22344f);
    box-shadow: 0 30px 76px rgba(27, 45, 76, .22);
    overflow: hidden;
    color: #eef5ff;
}
.visual-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.visual-top strong {
    color: #fff;
}
.visual-dots {
    display: flex;
    gap: 8px;
}
.visual-grid {
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    gap: 16px;
}
.car-stage {
    position: relative;
    min-height: 310px;
    overflow: hidden;
}

.car-stage, .rate-stage {
    border-radius: 26px;
    padding: 18px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .06);
}
.road-line {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 54px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
}
.dealer-terminal {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 132px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .12);
}
.terminal-top {
    height: 14px;
    width: 58%;
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    margin-bottom: 10px;
}
.terminal-row {
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .28);
    margin-bottom: 8px;
}
.terminal-row.short {
    width: 70%;
}
.terminal-row {
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .28);
    margin-bottom: 8px;
}
.kc-car-shape {
    position: absolute;
    left: 50%;
    bottom: 62px;
    transform: translateX(-50%);
    width: 220px;
    height: 74px;
    border-radius: 28px 34px 18px 18px;
    background: linear-gradient(135deg, #5ab2ff, #2f80ff);
    box-shadow: 0 18px 34px rgba(47, 128, 255, .24);
    animation: carHover 4.2s ease-in-out infinite;
}
.kc-car-shape:before {
    content: "";
    position: absolute;
    left: 46px;
    top: -28px;
    width: 108px;
    height: 38px;
    border-radius: 24px 24px 12px 12px;
    background: rgba(223, 239, 255, .95);
}
.car-window {
    position: absolute;
    left: 58px;
    top: -19px;
    width: 84px;
    height: 22px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .55);
}
.car-wheel.left {
    left: 40px;
}
.car-wheel {
    position: absolute;
    bottom: -16px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #0f1927;
    border: 6px solid #d4e6ff;
    animation: wheelSpin 2s linear infinite;
}
.car-wheel.right {
    right: 40px;
}

.car-wheel {
    position: absolute;
    bottom: -16px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #0f1927;
    border: 6px solid #d4e6ff;
    animation: wheelSpin 2s linear infinite;
}
.rate-stage {
    display: grid;
    gap: 10px;
}

.car-stage, .rate-stage {
    border-radius: 26px;
    padding: 18px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .06);
}
.rate-head {
    padding: 0 6px 6px;
    color: #9eb4d2;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.rate-head, .rate-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
}
.rate-item {
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .08);
    position: relative;
    overflow: hidden;
}
.rate-item span {
    color: #d4e4fb;
    font-weight: 700;
}
.rate-item strong {
    color: #fff;
    font-size: 1.08rem;
    font-weight: 900;
}
.floating-info.a {
    left: -10px;
    bottom: -4px;
}

.floating-info {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(255, 255, 255, .96);
    box-shadow: 0 18px 42px rgba(43, 85, 163, .12);
    font-weight: 800;
    color: #244a87;
    animation: nodeFloat 6s ease-in-out infinite;
}
.floating-info.b {
    right: -8px;
    top: 22px;
    animation-delay: -2s;
}

.floating-info {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(255, 255, 255, .96);
    box-shadow: 0 18px 42px rgba(43, 85, 163, .12);
    font-weight: 800;
    color: #244a87;
    animation: nodeFloat 6s ease-in-out infinite;
}
/*--------------------------------------------------------------
# faq-shell Section
--------------------------------------------------------------*/
.faq-shell {
    padding: 34px;
}
.faq-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}
.faq-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 999px;
    background: rgba(47, 128, 255, .08);
    color: #2f80ff;
    font-weight: 800;
}
.faq-list {
    display: grid;
    gap: 14px;
}
.faq-card {
    border-radius: 22px;
    background: rgba(255, 255, 255, .84);
    border: 1px solid rgba(255, 255, 255, .94);
    box-shadow: 0 14px 34px rgba(43, 85, 163, .07);
    overflow: hidden;
}
.faq-card[open] {
    box-shadow: 0 22px 44px rgba(43, 85, 163, .12);
}
.faq-card[open] summary {
    background: rgba(47, 128, 255, .04);
}
.faq-card summary {
    transition: background .22s ease, color .22s ease;
}
.navmenu a, .nav-live-button, .faq-card summary {
    cursor: pointer;
}
.faq-card summary {
    transition: background .22s ease;
}
.faq-card summary {
    list-style: none;
    cursor: pointer;
    padding: 22px 60px 22px 22px;
    font-weight: 800;
    color: #27416d;
    position: relative;
}
.faq-card p {
    margin: 0;
    padding: 0 22px 22px;
    color: #6a7c99;
    line-height: 1.85;
}
/*--------------------------------------------------------------
# cta-shell Section
--------------------------------------------------------------*/
.cta-shell {
    padding: 30px;
}
.cta-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: center;
}
.cta-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.cta-actions .btn-primary {
    min-width: 250px;
}
.cta-shell .btn {
    transition: transform .26s ease, box-shadow .26s ease, background .26s ease, border-color .26s ease;
}

.cta-shell .btn-secondary {
    background: rgba(255, 255, 255, .85);
    border-color: rgba(47, 128, 255, .14);
    color: var(--brand);
}
.cta-shell .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 22px;
    border-radius: 14px;
    font-weight: 800;
    border: 1px solid transparent;
    transition: .2s ease;
}

@media (max-width: 1199px) {
    .hero-grid, .hero-grid-v2, .hero-grid-v3, .hero-grid-v4, .autotraum-grid, .visual-grid, .hero-v3-main, .hero-v4-main, .shop-shell, .shop-shell-v2, .shop-shell-v3, .shop-shell-v4, .referral-grid, .dealer-grid, .portal-grid, .benefits-grid, .premium-benefits-anchor, .cta-grid, .flow-track {
        grid-template-columns: 1fr !important;
    }
    .flow-line {
        display: none !important;
    }
    .shop-benefits, .rewards-grid, .shop-status-v4, .autotraum-features{
	grid-template-columns: 1fr !important;
    }
}
@media (max-width: 767px) {
    .reward-card, .card, .shop-benefit, .feature-pill, .hero-bank-chip, .hero-metric, .hero-kpi, .faq-card, .referral-point {
        padding: 16px !important;
        border-radius: 18px !important;
        min-height: unset !important;
    }
}
/*--------------------------------------------------------------
# keyframes Section
--------------------------------------------------------------*/

@keyframes balanceShine {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(420%);
  }
}

@keyframes progressShift {
  0%, 100% {
    width: 62%;
  }
  50% {
    width: 78%;
  }
}

@keyframes rewardFloat{
   0%, 100% {
      transform: translateY(0);
  }

  50% {
     transform: translateY(-5px);
  }
}


@keyframes softFloat {
   0%, 100% {
      transform: translateY(0);
  }

  50% {
     transform: translateY(-4px);
  }
}

@keyframes bankLogoFloat {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }
}
/*--------------------------------------------------------------
# Features Section
--------------------------------------------------------------*/

    .features{
    padding:70px 0;
}

.features h2{
    text-align:center;
    font-size: 2.3rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 50px;
    color: #435076;
}

.feature-grid{
    display:flex;
    gap:30px;
    flex-wrap: wrap;
}

.card-image {
    width: 100%;
    /* height: 200px;*/
    background-color: #eaf4ff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-image img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

.feature-card{
    flex:auto;
    background: #ffffff;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    width: 300px;
    overflow: hidden;
    transition: transform 0.3s ease;
    /* text-align: center; */
    border: 1px solid #e0e0e0;
}

.feature-card h3{
    margin-bottom:15px;
    font-size:18px;
}

.feature-card p{
    font-size: 15px;
    color: #475569;
}

.card-content{
    padding: 0px 27px;
}

/*--------------------------------------------------------------
# status Section
--------------------------------------------------------------*/
.stats{
    background: #f4f6fb;
    padding:50px 0;
    display:flex;
    justify-content:space-evenly;
    text-align:center;
    flex-wrap: wrap;
}

.stats div h3{
    font-size:26px;
    color:#1e3a8a;
    color: #1e3a8a;
    text-align: right;
    
}

.stats div p{
    color:#666;
    font-size: 15px;
    text-align: right;
    
}


/*--------------------------------------------------------------
# advantage Section
--------------------------------------------------------------*/
.advantages-section > div.bar {
    background: #ffffff;
    padding: 6px;
    border-radius: 20px;
    width: 85%;
    margin-bottom: 15px !important;
    border: 1px solid;
}

.advantages-section div.bar-inner {
    background: #2d465e;
    padding: 16px;
    border-radius: 20px;
    width: 100%;
    display: flex;
    align-items: center;
    border: 1px solid;
    justify-content: space-around;
}

.bar-inner [class*=" bi-"]::before {
    margin-right: 0px;
}

.advantages-section > div.bar .icon-div {
    width: 15%;
    display: inline-block;
    background: white;
    border-radius: 50%;
    padding: 13px;
    border: 1px solid;
}

.bar-button [class*=" bi-"]::before {
    color: #ffffff;
    font-size: 14px;
    margin-right: 6px;
    margin-left: 10px;
}

.div-icon-bar {
    width: 79% !important;
}

.advantage-iconone {
    /* width: 4% !important;
  position: absolute;
  bottom: 25px;
  opacity: .7;
  animation: previewShapeX 5s infinite; */

    width: 4% !important;
    position: absolute;
    top: 25px;
    opacity: 0.7;
    animation: previewShapeX 5s infinite;
    left: 6px;
}

.advantage-icontwo {
    /* width: 4% !important;
  right: 0;
  position: absolute;
  top: -35px;
  opacity: .7;
  animation: custom__flipOutY 3s linear infinite; */

    width: 4% !important;
    right: 168px;
    position: absolute;
    top: 361px;
    opacity: 0.7;
    animation: custom__flipOutY 3s linear infinite;
}

.advantages-section .cus_icon_2 {
    width: 50px;
    height: 50px;
    background: white;
    border: 1px solid #0000002b;
    margin: 0px !important;
    margin-left: 10px !important;
}

.advantages-section .bi-arrow-up-right::before {
    content: "\f144";
    color: #85858f;
}

@keyframes previewShapeX {
    0% {
        transform: translateX(-15px);
    }

    50% {
        transform: translateX(15px);
    }
    100% {
        transform: translateX(-15px);
    }
}
@keyframes custom__flipOutY {
    0% {
        transform: perspective(400px) rotateY(0deg);
    }
    50% {
        transform: perspective(400px) rotateY(90deg);
    }
    100% {
        transform: perspective(400px) rotateY(0deg);
    }
}

@media (max-width: 768px) {
    .advantages-section > div.bar .icon-div {
        width: 10%;
    }

    .advantages-section > div.bar {
        margin: auto !important;
        width: 82%;
        margin-bottom: 19px !important;
    }

    .advantages-section {
        margin-top: 50px;
    }
}

/*--------------------------------------------------------------
# Features Cards Section
--------------------------------------------------------------*/
.features-cards {
    --default-color: #555;
    --heading-color: #333;
}
.features-cards {
    background: #f2f6f5;
}
.features-cards .row img {
    width: 30%;
}

.features-cards .feature-box {
    height: 100%;
    padding: 40px 30px;
    border-radius: 10px;
    background-color: #ffffff !important;
}

.feature-cards-header h2,
.features-2 h2,
.about-title,
.second-section-heading {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: #2d465e;
}

.features-cards .feature-box i {
    font-size: 44px;
    display: inline-block;
    line-height: 0;
    color: var(--accent-color);
    margin-bottom: 20px;
}

.features-cards .feature-box h4 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 10px 0;
}

.features-cards .feature-box p {
    font-size: 15px;
    margin-bottom: 0;
}

.features-cards .feature-box.orange {
    background-color: #fff3e2;
}

.features-cards .feature-box.orange i {
    color: #edb86e;
}

.features-cards .feature-box.blue {
    background-color: #deedfd;
}

.features-cards .feature-box.blue i {
    color: #20a5f8;
}

.features-cards .feature-box.green {
    background-color: #d5f1e4;
}

.features-cards .feature-box.green i {
    color: #48c88a;
}

.features-cards .feature-box.red {
    background-color: #fdeded;
}

.features-cards .feature-box.red i {
    color: #f28484;
}

@media (max-width: 768px) {
    .feature-cards-header {
        text-align: center;
    }

    .feature-cards-header p {
        margin: auto;
    }
}

/*--------------------------------------------------------------
# Features 2 Section
--------------------------------------------------------------*/
#features-2 {
    background: #f2f6f5;
}
.features-2 .feature-item .feature-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--accent-color), transparent 92%);
}

/* .features-2-points div p {
  background-color: #2d465e;
} */

/* .features-2-points div p{
  background-color: #f2f6f5;
} */

.customers-animate {
    transform: translateY(50px);
    position: absolute;
    z-index: 9999;
    width: 19% !important;
    top: 6px;
    left: 91px;
    animation: float-badge 3s ease-in-out infinite;
}
.features-2-points .bg-light,
.features-2-points .bg-light p {
    background-color: transparent !important;
}

.customer-button {
    border-radius: 20px;
    width: 40% !important;
}

.customer-button:hover {
    background-color: #2d465e !important;
    color: white;
    border: none;
}

.customer-start {
    position: absolute;
    width: 20%;
    right: 0;
    top: -82px;
}

.customer-arrows {
    position: absolute;
    bottom: 0;
    width: 20%;
    left: -54px;
    animation: previewShapeX 5s infinite;
}

.features-2 .bi::before,
[class*=" bi-"]::before,
[class^="bi-"]::before {
    display: inline-block;
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: 400 !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -0.125em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
   /* font-size: 18px;
    margin-right: 6px;
    color: #2d465e;*/
}

.features-2 .feature-item .feature-icon i {
    font-size: 24px;
    color: var(--accent-color);
}

.features-2 .feature-item .feature-content h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}

.features-2 .feature-item .feature-content p {
    color: color-mix(in srgb, var(--default-color), transparent 25%);
    font-size: 15px;
    margin-bottom: 0;
}

.features-2 .phone-mockup {
    position: relative;
    padding: 30px 0;
}

.features-2 .phone-mockup img {
    max-width: 300px;
    height: auto;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.1));
}

@media (max-width: 768px) {
    .features-2-points {
        text-align: center;
        justify-content: center;
        margin-bottom: 5rem;
    }
    .features-2 .position-relative > img.customer-image {
        width: 60% !important;
    }
    .customer-start {
        width: 12%;
        right: 137px;
        top: -75px;
    }
    .customer-arrows {
        width: 12%;
        left: 76px;
    }
}

@media (max-width: 991.98px) {
    .features-2 .feature-item {
        text-align: center !important;
        margin-bottom: 2rem;
    }

    .features-2 .feature-item .d-flex {
        flex-direction: column;
        text-align: center;
        justify-content: center !important;
    }

    .features-2 .phone-mockup {
        margin: 3rem 0;
    }
}

/*--------------------------------------------------------------
# Call To Action Section
--------------------------------------------------------------*/
/*.call-to-action{
    background-color: #f4f6fb;
}*/
.call-to-action .container {
    background: #ffffff;
    color: var(--contrast-color);
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    padding: 4rem 2rem;
}

.heading_back{
    color: #fcfdff;
    display: inline-block;
    background: #0a8ebf;
    padding: 8px;
    border-radius: 5px;
}

.call-to-action h2,
.call-to-action p {
    position: relative;
    z-index: 2;
    font-size: 15px;
    color: #475569;
}
.call-to-action h2, .payout-section-heading {
    font-size: 2.3rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: #435076;
}

.call-to-action .feature-counting p {
    background: #435076;
    border-radius: 50% !important;
    border: solid;
    text-align: center;
    color: white;
    height: 38px;
    width: 38px;
    padding-top: 4px;
}

.dealer-circle {
    width: 140px;
    height: 140px;
    position: absolute;
    bottom: -30px;
    right: -10px;
    background: white;
    border-radius: 50%;
    border: 10px solid #2d465e;
}

.call-to-action .btn-cta {
    background-color: color-mix(
        in srgb,
        var(--contrast-color) 15%,
        transparent
    );
    color: var(--contrast-color);
    padding: 12px 40px;
    border-radius: 50px;
    transition: all 0.3s ease;
    border: 2px solid var(--contrast-color);
    position: relative;
    z-index: 2;
}

.call-to-action .btn-cta:hover {
    background-color: var(--contrast-color);
    color: var(--accent-color);
}

.call-to-action .shape {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.call-to-action .shape svg {
    width: 100%;
    height: 100%;
}

.call-to-action .shape svg path {
    fill: color-mix(in srgb, var(--contrast-color) 70%, transparent);
}

.call-to-action .shape-1 {
    width: 300px;
    height: 300px;
    top: -100px;
    right: -50px;
    opacity: 0.1;
    transform: rotate(45deg);
    animation: shapes-float 3s ease-in-out infinite;
}

.call-to-action .shape-2 {
    width: 200px;
    height: 200px;
    bottom: -50px;
    left: -50px;
    opacity: 0.15;
    transform: rotate(-15deg);
    animation: shapes-float 4s ease-in-out infinite;
}

.call-to-action .shape-3 {
    width: 150px;
    height: 150px;
    top: 20%;
    right: 15%;
    opacity: 0.08;
    transform: rotate(15deg);
}

.call-to-action .dots {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    color: var(--contrast-color);
}

.call-to-action .dots svg {
    width: 100%;
    height: 100%;
}

.call-to-action .dots-1 {
    width: 200px;
    height: 200px;
    top: -30px;
    left: 10%;
    opacity: 0.1;
    transform: rotate(15deg);
    animation: shapes-float 4s ease-in-out infinite;
}

.call-to-action .dots-2 {
    width: 150px;
    height: 150px;
    bottom: 20px;
    right: 15%;
    opacity: 0.15;
    transform: rotate(-10deg);
}

@keyframes shapes-float {
    0%,
    100% {
        transform: scale(0.8) rotate(45deg) translateY(0);
    }

    50% {
        transform: scale(0.8) rotate(45deg) translateY(-20px);
    }
}

@media (max-width: 1024px) {
    .dealer-circle {
        bottom: -30px;
        right: 0px;
    }

    .customer-button {
        width: 50% !important;
    }
}

@media (max-width: 991.98px) {
    .call-to-action .container {
        padding: 3rem 1.5rem;
    }

    .call-to-action .shape-1 {
        width: 200px;
        height: 200px;
    }

    .call-to-action .shape-2 {
        width: 150px;
        height: 150px;
    }

    .call-to-action .shape-3 {
        width: 100px;
        height: 100px;
    }

    .call-to-action .dots-1 {
        width: 150px;
        height: 150px;
    }

    .call-to-action .dots-2 {
        width: 120px;
        height: 120px;
    }

    .call-to-action .dots-3 {
        width: 80px;
        height: 80px;
    }
}

@media (max-width: 768px) {
    .call-to-action .call-img-section {
        width: 100%;
    }

    .call-to-action .call-content-section {
        width: 100%;
    }
    .call-to-action .call-heading {
        text-align: center;
    }
    .call-content-section > .row {
        justify-content: center;
    }
}

/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/
.owl-item .item {
    background: #f2f6f5;
    padding: 10px;
    border-radius: 10px;
    height: 225px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.owl-item .item div {
    margin: auto;
    width: 96%;
}

.owl-item .item div img {
    width: 20%;
    margin: 20px auto;
    margin-bottom: 19px;
}

.owl-item .item h2 {
    font-size: 20px;
    text-align: center;
    font-weight: 700;
}

.owl-nav {
    position: relative !important;
}

.owl-nav .owl-prev {
    position: absolute !important;
    left: -32px !important;
    top: -185px !important;
    font-size: 59px !important;
}

.owl-nav .owl-next {
    position: absolute !important;
    right: -32px !important;
    top: -185px !important;
    font-size: 59px !important;
}

.item.active-custom {
    background: #2d465e;
    color: white !important;
    /* height: 247px; */
    transition: 0.4s;
}

.item.active-custom img {
    filter: brightness(0) invert(1);
    width: 30% !important;
}

.item.active-custom h2 {
    color: #ffffff;
}

.clients .swiper-slide img {
    /* opacity: 0.5; */
    transition: 0.3s;
    /* filter: grayscale(100); */

    height: 55px !important;
    width: auto !important;
    object-fit: contain !important;
}

.swiper-slide {
    width: auto !important;
    /* margin-right: 33px !important; */
}

.clients .swiper-slide img:hover {
    filter: none;
    opacity: 1;
}

.clients .swiper-wrapper {
    height: auto;
}

.clients .swiper-pagination {
    margin-top: 20px;
    position: relative;
}

.clients .swiper-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    opacity: 1;
    background-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.clients .swiper-pagination .swiper-pagination-bullet-active {
    background-color: var(--accent-color);
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/

#testimonials {
    height: 1000px;
    background-color: #f2f6f5 !important;
}
.testimonials .testimonial-item {
    /* background-color: var(--surface-color);
  box-shadow: 0px 2px 30px rgba(0, 0, 0, 0.08); */
    padding: 30px;
    position: absolute;
    height: 25%;
    width: 22%;
    border-radius: 17px;
    transition: transform 0.3s ease-in-out, z-index 0.8s;
}
.testimonials_iconsmain {
    width: 100%;
}
.testimonial-item-one {
    left: 347px;
}
.testimonial-item-two {
    top: 262px;
    right: 447px;
}
.testimonial-item-three {
    bottom: 273px;
    left: 364px;
}
.testimonial-item-four {
    bottom: 126px;
    right: 498px;
}
.testimonial-item-five {
    top: 481px;
    right: 145px;
}
.a-svg.-france {
    position: absolute;
    width: 100%;
    height: 100%;
    color: #2d465e;
    display: inline-block;
    top: 27px;
}

.testimonials .testimonial-item .testimonial-img {
    width: 90px;
    border-radius: 50px;
    border: 3px solid #2d465e;
    float: left;
    margin: 0 10px 0 0;
    cursor: pointer;
}

.testimonials .testimonial-item h3 {
    font-size: 15px;
    font-weight: bold;
    margin: 10px 0 5px 0;
    display: none;
}

.testimonials .testimonial-item h4 {
    font-size: 12px;
    color: color-mix(in srgb, var(--default-color), transparent 20%);
    margin: 0;
    display: none;
}

.testimonials .testimonial-item .stars {
    margin: 10px 0;
    display: none;
}

.testimonials .testimonial-item .stars i {
    color: #ffc107;
    margin: 0 1px;
}

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
    color: color-mix(in srgb, var(--accent-color), transparent 50%);
    font-size: 26px;
    line-height: 0;
}

.testimonials .testimonial-item .quote-icon-left {
    display: inline-block;
    left: -5px;
    position: relative;
}

.testimonials .testimonial-item .quote-icon-right {
    display: inline-block;
    right: -5px;
    position: relative;
    top: 10px;
    transform: scale(-1, -1);
}

.testimonials .testimonial-item p {
    font-style: italic;
    margin: 15px 0 0 0;
    padding: 0;
    font-size: 12px;
    display: none;
}

.testimonial-item:hover p,
.testimonial-item:hover h4,
.testimonial-item:hover h3,
.testimonial-item:hover .stars {
    display: block;
}

.testimonial-item:hover {
    background-color: var(--surface-color);
    box-shadow: 0px 2px 30px rgba(0, 0, 0, 0.08);
}

@media (max-width: 1024px) {
    .testimonials .testimonial-item .testimonial-img {
        width: 60px;
    }
    .testimonials .testimonial-item {
        width: 32%;
    }
    .testimonial-item-one {
        left: 128px;
    }

    .testimonial-item-three {
        left: 146px;
    }
    .testimonial-item-four {
        right: 161px;
    }
}

@media (max-width: 768px) {
    #testimonials {
        height: 900px;
    }
    .testimonials .testimonial-item {
        width: 42%;
        height: 28%;
    }
    .testimonial-item-one {
        left: 35px;
        top: 254px;
    }
    .testimonial-item-two {
        top: 363px;
        right: 26px;
    }
    .testimonial-item-three {
        bottom: 185px;
        left: 67px;
    }
    .testimonial-item-four {
        bottom: 87px;
        right: 37px;
    }
}

/*--------------------------------------------------------------
# finance Section
--------------------------------------------------------------*/
.finance-heading h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 20px;
    position: relative;
}
.finance-head {
    padding: 40px;
    border-radius: 10px 10px 0px 0px;
    background: #2d465e;
    color: white;
}
.fianance-img {
    border: 1px solid;
}
.fianance-img img {
    object-fit: cover;
    aspect-ratio: 2.4;
}
.fianance-icon img {
    width: 10%;
    filter: brightness(0) invert(1);
}

.finance-head h3 {
    color: white;
    padding: 15px 0px 0px;
    font-weight: 800;
}

/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.stats .stats-item {
    padding: 30px;
    width: 100%;
}

.stats .stats-item span {
    color: var(--heading-color);
    font-size: 48px;
    display: block;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 20px;
    position: relative;
}

.stats .stats-item span:after {
    content: "";
    position: absolute;
    display: block;
    width: 25px;
    height: 3px;
    background: var(--accent-color);
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.stats .stats-item p {
    color: color-mix(in srgb, var(--default-color), transparent 40%);
    padding: 0;
    margin: 0;
    font-family: var(--heading-font);
    font-weight: 500;
}

.stats_div_one, .stats_div_two, .stats_div_three{
    position: relative;
    width: 30%;
    flex: 1 1 408px;
}

.stats_div_one_contant{
    position: absolute;
    top: 24%;
    left: 65%;
    transform: translate(-50%, -50%);
}


.stats_div_two_contant{
    position: absolute;
    top: 34%;
    left: 65%;
    transform: translate(-50%, -50%);
}

.stats_div_three_contant{
    position: absolute;
    top: 46%;
    left: 65%;
    transform: translate(-50%, -50%);
}


/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-card {
    height: 100%;
    padding: 30px;
    background: var(--surface-color);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.services .service-card:hover {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
}

.services .service-card:hover .icon {
    background: var(--accent-color);
    color: var(--contrast-color);
}

.services .service-card:hover .read-more {
    color: color-mix(in srgb, var(--accent-color), transparent 25%);
}

.services .service-card .icon {
    width: 60px;
    height: 60px;
    margin-right: 30px;
    background: color-mix(in srgb, var(--accent-color), transparent 90%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--accent-color);
    font-size: 28px;
    transition: all 0.3s ease;
    line-height: 1;
}

.services .service-card h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
}

.services .service-card p {
    margin-bottom: 25px;
    color: color-mix(in srgb, var(--default-color), transparent 25%);
    font-size: 15px;
    line-height: 1.6;
}

.services .service-card .read-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent-color);
    font-weight: 500;
    transition: all 0.3s ease;
}

.services .service-card .read-more i {
    font-size: 14px;
    transition: transform 0.3s ease;
}

.services .service-card .read-more:hover i {
    transform: translateX(5px);
}

/*--------------------------------------------------------------
# Pricing Section
--------------------------------------------------------------*/
.pricing .pricing-card {
    height: 100%;
    padding: 2rem;
    background: var(--surface-color);
    border-radius: 1rem;
    transition: all 0.3s ease;
    position: relative;
}

.pricing .pricing-card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.pricing .pricing-card.popular {
    background: var(--accent-color);
    color: var(--contrast-color);
}

.pricing .pricing-card.popular h3,
.pricing .pricing-card.popular h4 {
    color: var(--contrast-color);
}

.pricing .pricing-card.popular .price .currency,
.pricing .pricing-card.popular .price .amount,
.pricing .pricing-card.popular .price .period {
    color: var(--contrast-color);
}

.pricing .pricing-card.popular .features-list li {
    color: var(--contrast-color);
}

.pricing .pricing-card.popular .features-list li i {
    color: var(--contrast-color);
}

.pricing .pricing-card.popular .btn-light {
    background: var(--contrast-color);
    color: var(--accent-color);
}

.pricing .pricing-card.popular .btn-light:hover {
    background: color-mix(in srgb, var(--contrast-color), transparent 10%);
}

.pricing .pricing-card .popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--contrast-color);
    color: var(--accent-color);
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.08);
}

.pricing .pricing-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.pricing .pricing-card .price {
    margin-bottom: 1.5rem;
}

.pricing .pricing-card .price .currency {
    font-size: 1.5rem;
    font-weight: 600;
    vertical-align: top;
    line-height: 1;
}

.pricing .pricing-card .price .amount {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
}

.pricing .pricing-card .price .period {
    font-size: 1rem;
    color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.pricing .pricing-card .description {
    margin-bottom: 2rem;
    font-size: 0.975rem;
}

.pricing .pricing-card h4 {
    font-size: 1.125rem;
    margin-bottom: 1rem;
}

.pricing .pricing-card .features-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
}

.pricing .pricing-card .features-list li {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.pricing .pricing-card .features-list li i {
    color: var(--accent-color);
    margin-right: 0.75rem;
    font-size: 1.25rem;
}

.pricing .pricing-card .btn {
    width: 100%;
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 500;
    border-radius: 50px;
}

.pricing .pricing-card .btn.btn-primary {
    background: var(--accent-color);
    border: none;
    color: var(--contrast-color);
}

.pricing .pricing-card .btn.btn-primary:hover {
    background: color-mix(in srgb, var(--accent-color), transparent 15%);
}



/*--------------------------------------------------------------
# Premium Partner Benefits Section
--------------------------------------------------------------*/
.partner_benefits{
   position: relative;
}
.kc-features-wrapper {
    background: #f4f6fb;
}
.kc_heading {
    font-weight: 700;
    line-height: 1.2;
    color: #435076;
}

.fw-extrabold { font-weight: 800; }
.tracking-wider { letter-spacing: 0.15em; }
.py-6 { padding: 5rem 0; }

/* The Glass Calculator
.kc-glass-calculator {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  transform: rotate(-1deg); /* Slight tilt for uniqueness */
  transition: transform 0.4s ease;
}*/

/* .kc-glass-calculator:hover {
  transform: rotate(0deg) scale(1.02);
} */

.kc-calc-display {
  background: #fff;
  padding: 1.5rem;
  border-radius: 1.5rem;
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.02);
}

/* Feature Cards */
.kc-feature-card {
  background: white;
  border: 1px solid rgba(0,0,0,0.03);
  box-shadow: 0 10px 30px rgba(0,0,0,0.02);
  display: flex;
  flex-direction: column;
}

.kc-feature-card:hover {
  /* transform: translateY(-10px); */
  box-shadow: 0 20px 40px rgba(45, 93, 177, 0.08);
  border-color: #2d5db1;
  cursor: pointer;
}

.kc-card-highlight {
    background: linear-gradient(to bottom right, #ffffff, #f0fdf4);
    border: 2px solid #22c55e !important;
}

/* Icons styling */
.kc-icon-blob {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
}

.bg-soft-primary { background: rgba(45, 93, 177, 0.1); color: #2d5db1; }
.bg-soft-success { background: rgba(34, 197, 94, 0.1); }
.bg-soft-info { background: rgba(13, 202, 240, 0.1); color: #0dcaf0; }
.bg-soft-dark { background: rgba(0, 0, 0, 0.05); }

/* Animation for the CTA */
.kc-btn-glow {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.kc-btn-glow:hover {
  box-shadow: 0 0 20px rgba(45, 93, 177, 0.4);
  transform: scale(1.02);
}

.kc-brand-accent {
  color: #2d5db1;
  position: relative;
}

.kc-brand-accent::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background: rgba(45, 93, 177, 0.1);
  z-index: -1;
}

.kc-features-wrapper p , .small {
    font-size: 15px;
    color: #475569;
}

/*--------------------------------------------------------------
# Faq Section
--------------------------------------------------------------*/

.item.faq-item {
    background: #2d465e;
    color: white;
    padding: 28px 31px;
    height: 558px;
    transform: scale(0.9);
}
.item.faq-item h3 {
    color: white;
    font-weight: 500;
    border-bottom: 3px solid white;
    padding-bottom: 14px;
}
.faq-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 20px;
    position: relative;
}
.faq-content p {
    font-size: 18px;
}
#faq {
    padding-bottom: 180px;
    background-color: #f4f6fb !important;
}
#faq .owl-nav .owl-prev {
    left: -14px !important;
    top: -303px !important;
}
#faq .owl-nav .owl-next {
    right: -33px !important;
    top: -303px !important;
}

@media (max-width: 768px) {
    #faq {
        padding-bottom: 34px;
    }
    .faq-9 .col-lg-5 {
        text-align: center;
    }
    .owl-nav {
        display: none;
    }
    .faq-description {
        width: 100% !important;
    }
}

/*--------------------------------------------------------------
# Call To Action 2 Section
--------------------------------------------------------------*/
 .cta-section {
            background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
            padding: 80px 40px;
            color: white;
            overflow: hidden;
            position: relative;
        }

        /* Unique Floating Elements Decoration */
        .cta-section::before {
            content: '';
            position: absolute;
            top: -50px;
            right: -50px;
            width: 200px;
            height: 200px;
            background: var(--accent-blue);
            filter: blur(100px);
            opacity: 0.2;
        }

        .cta-title {
            font-weight: 700;
            font-size: 2.5rem;
            margin-bottom: 20px;
        }

        .cta-text {
            font-size: 1.1rem;
            opacity: 0.9;
            max-width: 500px;
            margin-bottom: 40px;
        }

        /* Modern Glass Button */
        .btn-modern {
            padding: 15px 35px;
            border-radius: 50px;
            border: 1px solid rgba(255, 255, 255, 0.4);
            background: var(--glass-bg);
            backdrop-filter: blur(10px);
            color: white;
            font-weight: 600;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
        }

        .btn-modern:hover {
            background: white;
            color: #1e293b;
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
        }

        /* Mobile Responsive Phone Mockup */
        .mockup-container {
            position: relative;
            z-index: 2;
        }

        .phone-mockup {
            width: 280px;
            height: 500px;
            background: white;
            border-radius: 40px;
            border: 8px solid #111;
            margin: 0 auto;
            position: relative;
            box-shadow: 0 50px 100px rgba(0,0,0,0.5);
        }

        .card-overlap {
            position: absolute;
            top: 30%;
            right: -40px;
            width: 260px;
            background: white;
            padding: 20px;
            border-radius: 15px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.2);
            color: #333;
        }

        .card-brand {
            font-weight: bold;
            color: #007bff;
            letter-spacing: 1px;
        }

        @media (max-width: 992px) {
            .cta-section { text-align: center; padding: 60px 20px; border-radius: 0; }
            .cta-text { margin: 0 auto 40px; }
            .card-overlap { right: 50%; transform: translateX(50%); top: 50%; }
            .mockup-container { margin-top: 50px; }
        } 
/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
	.contact_page_hero{
	    background: radial-gradient(circle at top right, #eef2ff, #ffffff);
	}
        .glass-card-contact {
            background: rgba(255, 255, 255, 0.7);

            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        }

        .contact-icon {
            width: 45px;
            height: 45px;
            background: #4361ee;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            margin-right: 15px;
        }

        .faq-section .accordion-item {
            border: none;
            background: transparent;
            border-bottom: 1px solid #eee;
        }

        .faq-section .accordion-button:not(.collapsed) {
            background-color: transparent;
            color: #4361ee;
            box-shadow: none;
        }

        .btn-primary-custom {
            background: #4361ee;
            border: none;
            padding: 12px 30px;
            border-radius: 10px;
            transition: 0.3s;
        }

        .btn-primary-custom:hover {
            background: #3046c5;
            transform: translateY(-2px);
        }

        .form-control {
            border-radius: 10px;
            padding: 12px;
            border: 1px solid #e0e0e0;
        }

        .illustration-box {
            position: relative;
            text-align: right;
        }

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .service-box {
    background-color: var(--surface-color);
    padding: 20px;
    box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1);
}

.service-details .service-box + .service-box {
    margin-top: 30px;
}

.service-details .service-box h4 {
    font-size: 20px;
    font-weight: 700;
    border-bottom: 2px solid
        color-mix(in srgb, var(--default-color), transparent 92%);
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.service-details .services-list {
    background-color: var(--surface-color);
}

.service-details .services-list a {
    color: color-mix(in srgb, var(--default-color), transparent 20%);
    background-color: color-mix(in srgb, var(--default-color), transparent 96%);
    display: flex;
    align-items: center;
    padding: 12px 15px;
    margin-top: 15px;
    transition: 0.3s;
}

.service-details .services-list a:first-child {
    margin-top: 0;
}

.service-details .services-list a i {
    font-size: 16px;
    margin-right: 8px;
    color: var(--accent-color);
}

.service-details .services-list a.active {
    color: var(--contrast-color);
    background-color: var(--accent-color);
}

.service-details .services-list a.active i {
    color: var(--contrast-color);
}

.service-details .services-list a:hover {
    background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
    color: var(--accent-color);
}

.service-details .download-catalog a {
    color: var(--default-color);
    display: flex;
    align-items: center;
    padding: 10px 0;
    transition: 0.3s;
    border-top: 1px solid
        color-mix(in srgb, var(--default-color), transparent 90%);
}

.service-details .download-catalog a:first-child {
    border-top: 0;
    padding-top: 0;
}

.service-details .download-catalog a:last-child {
    padding-bottom: 0;
}

.service-details .download-catalog a i {
    font-size: 24px;
    margin-right: 8px;
    color: var(--accent-color);
}

.service-details .download-catalog a:hover {
    color: var(--accent-color);
}

.service-details .help-box {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    margin-top: 30px;
    padding: 30px 15px;
}

.service-details .help-box .help-icon {
    font-size: 48px;
}

.service-details .help-box h4,
.service-details .help-box a {
    color: var(--contrast-color);
}

.service-details .services-img {
    margin-bottom: 20px;
}

.service-details h3 {
    font-size: 26px;
    font-weight: 700;
}

.service-details p {
    font-size: 15px;
}

.service-details ul {
    list-style: none;
    padding: 0;
    font-size: 15px;
}

.service-details ul li {
    padding: 5px 0;
    display: flex;
    align-items: center;
}

.service-details ul i {
    font-size: 20px;
    margin-right: 8px;
    color: var(--accent-color);
}

/*--------------------------------------------------------------
# customers' dream section
--------------------------------------------------------------*/
    /* 1. Premium Hero Section & Background Orbs 
.premium-hero-section {
  background: #f4f6fb;
}*/

.bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  z-index: 0;
  opacity: 0.1;
}

.orb-1 {
  width: 500px;
  height: 500px;
  background-color: var(--kreditcar-blue);
  top: -100px;
  right: -100px;
}


/* 2. Advanced Typography */
.text-gradient-stroke {
  /* Subtle dark color, but with a slight texture */
  color: #1a202c;
  line-height: 1.1;
  text-shadow: 1px 1px 0px white, 2px 2px 0px rgba(10, 102, 194, 0.05);
}

.highlight-text {
  color: var(--kreditcar-blue);
  background: linear-gradient(to bottom, #d6e8fb 0%, transparent 100%);
  border-radius: 8px;
  padding: 0 5px;
}

/* 3. Redesigned Feature Cards */
.feature-grid {
  z-index: 10;
  position: relative;
}

.feature-card {
  background: white;
  border: 1px solid rgba(0,0,0,0.03);
  border-radius: 12px;
  transition: all 0.3s ease;
  color: #333;
}

.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(10, 102, 194, 0.08);
  border-color: rgba(10, 102, 194, 0.1);
}

.icon-badge {
  width: 42px;
  height: 42px;
  background-color: #f1f7fe;
  color: var(--kreditcar-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.2rem;
}



/* 5. Glassmorphism Image Container */
.visual-wrapper {
  perspective: 1000px;
}

.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  min-height: 400px;
  position: relative;
  z-index: 1;
}

.dashboard-elements {
  display: flex;
  align-items: flex-end;
  gap: 15px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 6. The Overlapping Real Image */
.overlapping-image-container,
.overlapping-image-container-hero {
 /* position: absolute;*/
  width: 90%;
  top: 15%;
  right: -10%;
  z-index: 5;
  transition: transform 0.3s ease;
}

.overlapping-image-container{
    position: absolute;
    width: 75%;
    top: 62%;
    right: -14%;
}

/* Subtle image animation on hover
.overlapping-image-container-hero:hover {
    transform: translate(-10px, -5px) rotateZ(-1deg);
}
*/
.premium-img, .premium-img2 {
  width: 100%;
  height: auto;
 /* border: 8px solid white; */
}

.premium-img2{
   border: 8px solid white; 
}


/* Floating tagline */
.premium-tag {
    z-index: 10;
}

/* Shadow depth utilities */
.shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Decorative lines */
.decor-line {
  position: absolute;
  height: 2px;
  background: rgba(10, 102, 194, 0.1);
  border-radius: 2px;
  z-index: 0;
}

.decor-line.top {
  width: 150px;
  top: 10%;
  right: 5%;
}

.decor-line.bottom {
  width: 200px;
  bottom: 10%;
  right: 15%;
}
@media (max-width: 992px) {
    .overlapping-image-container-hero {
        width: 75%;
        top: 10%;
        right: 2%;
    }
    .overlapping-image-container{
	width: 75%;
        right: 2%;
     }
    .glass-panel{
        min-height: 290px;
    }
    .scroll-top.active{
        bottom: 148px;
    }
    .scroll-top{
        right: 32px;
    }
    .float {
      bottom: 80px !important;
      right: 22px !important;
      left: auto !important;
    }
}

/**
  all page style on the 575 page design
**/
@media (max-width: 768px){

   .stats_div_one_contant{
      top: 35%;
   }


  .stats_div_two_contant{
     top: 44%;
  }

  .stats_div_three_contant{
     top: 46%;
  }
  
}
@media (max-width: 575px) {
    .hero-left a{
	display: block;
   	margin: 0px;
    	margin-bottom: 20px;	
    }
    #second-section .col-sm-12,
    #features-2 .col-sm-12,
    .customer-button,
    #features-one,
    #features-two,
    #features-three,
    #features-four,
    .feature-cards-header,
    .advantages-section {
        width: 100% !important;
    }

    #second-section .col-sm-12 .col-6 {
        width: 90% !important;
        margin: auto;
    }
    .btn_theme,
    .btn_alt {
        display: block;
        margin-bottom: 10px;
    }

    .scroll-animate {
        top: -30px;
        left: 25px;
        width: 11% !important;
    }
    .feature-cards-header h2,
    .features-2 h2,
    .about-title,
    .second-section-heading {
        font-size: 2rem;
    }

    #second-section .flex-row-reverse,
    #features-2 > .container > .align-items-center {
        margin-top: 0px !important;
    }
    .div-customer-button {
        text-align: center;
    }

    .advantages-section > div.bar {
        padding: 6px;
        width: 82%;
    }
    .advantages-section div.bar-inner {
        padding: 8px;
    }
    .advantages-section .cus_icon_2 {
        width: 33px;
        height: 33px;
    }

    .bar-inner[class*=" bi-"]::before {
        font-size: 14px;
        margin: 0px;
    }

    .advantages-section > div.bar .icon-div {
        width: 22%;
    }

    .footer-about,
    .footer-links {
        width: 100%;
    }

    .copyright .row {
        gap: 15px;
    }

    .copyright .row div {
        width: 100%;
    }

    .call-to-action-low {
        text-align: center;
        margin-bottom: 20px;
    }

    /* testimonial */

    #testimonials {
        height: 556px;
    }
    .testimonials .testimonial-item .testimonial-img {
        width: 58px;
    }
    .testimonials .testimonial-item h3 {
        font-size: 11px;
    }
    .testimonials .testimonial-item h4 {
        font-size: 8px;
    }
    .testimonials [class*=" bi-"]::before {
        font-size: 11px;
    }
    .testimonials .testimonial-item p {
        font-size: 9px;
    }
    .testimonials .testimonial-item {
        width: 44%;
        height: fit-content;
        padding: 12px 12px 17px 12px;
    }
    .testimonial-item-one {
        left: 23px;
        top: 250px;
    }
    .testimonial-item-two {
        top: 363px;
        right: 8px;
    }
    .testimonial-item-three {
        bottom: 121px;
        left: 17px;
    }
    .testimonial-item-four {
        bottom: 214px;
        right: 11px;
    }

    .testimonial-item-five {
        top: 285px;
        right: 121px;
    }

    #finance .col-4 {
        width: 100% !important;
    }
    .seconf_section_banks img{
        margin: 13px auto;
        height: auto;
	width: 151px;
    }
}

@media (max-width: 496px) {
    .float {
        bottom: 88px !important;
        right: 29.6px !important;
    }
    .scroll-top.active {
        bottom: 155px;
    }
    .scroll-top {
        right: 37.6px !important;
    }
}

@media (max-width: 375px) {
    .feature-card-inner .feature-counting {
        right: 162px;
        top: 24px;
    }

    .testimonials .testimonial-item {
        width: 68%;
        height: 23%;
    }

    .testimonial-item-one {
        left: 23px;
        top: 250px;
    }

    .testimonial-item-two {
        top: 399px;
        right: 8px;
    }

    .testimonial-item-three {
        bottom: 325px;
        left: 17px;
    }

    .testimonial-item-four {
        bottom: 177px;
        right: 11px;
    }

    .stats_div_one_contant{
       top: 42%;
    }


    .stats_div_two_contant{
       top: 47%;
    }

    .stats_div_three_contant{
      top: 48%;
    }
}

@media (max-width: 320px) {
    #testimonials {
        height: 438px;
    }
    .testimonials .testimonial-item {
        width: 50%;
        height: fit-content;
    }
    .testimonials .testimonial-item .stars {
        margin: 0px;
    }
    .testimonials .testimonial-item .testimonial-img {
        width: 33px;
    }
    .testimonials [class*=" bi-"]::before {
        font-size: 7px;
        margin: 0px;
    }

    .testimonial-item-one {
        left: 19px;
        top: 212px;
    }
    .testimonial-item-two {
        top: 202px;
        right: 0px;
    }
    .testimonial-item-three {
        bottom: 82px;
        left: 77px;
    }
    .testimonial-item-four {
        bottom: 112px;
        right: 0px;
    }
}