@charset "UTF-8";

:root {
    --bs-blue: #4e9cff;
    --bs-indigo: #bba4ff;
    --bs-purple: #de8cff;
    --bs-pink: #f34fa0;
    --bs-red: #ff6060;
    --bs-orange: #ff9f0c;
    --bs-yellow: #f9e80d;
    --bs-green: #1ecc33;
    --bs-teal: #3cd2a5;
    --bs-cyan: #30beff;
    --bs-white: #fff;
    --bs-gray: #526872;
    --bs-gray-dark: #35434a;
    --bs-gray-100: #c0cacf;
    --bs-gray-200: #a8b6bc;
    --bs-gray-300: #90a2aa;
    --bs-gray-400: #798e98;
    --bs-gray-500: #617a86;
    --bs-gray-600: #526872;
    --bs-gray-700: #44555e;
    --bs-gray-800: #35434a;
    --bs-gray-900: #273136;
    --bs-default: #a8b6bc;
    --bs-theme: #3cd2a5;
    --bs-primary: #4e9cff;
    --bs-secondary: #798e98;
    --bs-warning: #ff9f0c;
    --bs-danger: #ff6060;
    --bs-success: #3cd2a5;
    --bs-info: #30beff;
    --bs-dark: #35434a;
    --bs-black: #000;
    --bs-white: #fff;
    --bs-purple: #de8cff;
    --bs-indigo: #bba4ff;
    --bs-red: #ff6060;
    --bs-pink: #f34fa0;
    --bs-green: #1ecc33;
    --bs-yellow: #f9e80d;
    --bs-teal: #3cd2a5;
    --bs-muted: #617a86;
    --bs-light: #c0cacf;
    --bs-lime: #81f32d;
    --bs-gray-100: #c0cacf;
    --bs-gray-200: #a8b6bc;
    --bs-gray-300: #90a2aa;
    --bs-gray-400: #798e98;
    --bs-gray-500: #617a86;
    --bs-gray-600: #526872;
    --bs-gray-700: #44555e;
    --bs-gray-800: #35434a;
    --bs-gray-900: #273136;
    --bs-default-rgb: 168,182,188;
    --bs-theme-rgb: 60,210,165;
    --bs-primary-rgb: 78,156,255;
    --bs-secondary-rgb: 121,142,152;
    --bs-warning-rgb: 255,159,12;
    --bs-danger-rgb: 255,96,96;
    --bs-success-rgb: 60,210,165;
    --bs-info-rgb: 48,190,255;
    --bs-dark-rgb: 53,67,74;
    --bs-black-rgb: 0,0,0;
    --bs-white-rgb: 255,255,255;
    --bs-purple-rgb: 222,140,255;
    --bs-indigo-rgb: 187,164,255;
    --bs-red-rgb: 255,96,96;
    --bs-pink-rgb: 243,79,160;
    --bs-green-rgb: 30,204,51;
    --bs-yellow-rgb: 249,232,13;
    --bs-teal-rgb: 60,210,165;
    --bs-muted-rgb: 97,122,134;
    --bs-light-rgb: 192,202,207;
    --bs-lime-rgb: 129,243,45;
    --bs-gray-100-rgb: 192,202,207;
    --bs-gray-200-rgb: 168,182,188;
    --bs-gray-300-rgb: 144,162,170;
    --bs-gray-400-rgb: 121,142,152;
    --bs-gray-500-rgb: 97,122,134;
    --bs-gray-600-rgb: 82,104,114;
    --bs-gray-700-rgb: 68,85,94;
    --bs-gray-800-rgb: 53,67,74;
    --bs-gray-900-rgb: 39,49,54;
    --bs-white-rgb: 255,255,255;
    --bs-black-rgb: 0,0,0;
    --bs-body-color-rgb: 255,255,255;
    --bs-body-bg-rgb: 39,49,54;
    --bs-font-sans-serif: 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";
    --bs-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    --bs-gradient: linear-gradient(180deg,rgba(255,255,255,0.15),rgba(255,255,255,0));
    --bs-body-font-family: 'Proza Libre', sans-serif;
    --bs-body-font-size: .875rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: rgba(255,255,255,0.75);
    --bs-body-bg: #f9f9f9
}

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

@media (prefers-reduced-motion:no-preference) {
    :root {
        scroll-behavior: smooth
    }
}

body {
    margin: 0;
    font-family: 'Proza Libre',sans-serif;
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    color: #000;
    text-align: var(--bs-body-text-align);
    background-color: #fff;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: #fff0;
    letter-spacing: .046875rem;
    position: relative;
    min-height: 100vh;
    z-index: 9999;
    width: 100%;
    overflow-x: hidden
}
@font-face {
    font-display: swap;
    font-family: 'Proza Libre';
    font-style: normal;
    font-weight: 400;
    src: url(/fonts/proza-libre-v9-latin-regular.woff2) format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Proza Libre';
    font-style: normal;
    font-weight: 500;
    src: url(/fonts/proza-libre-v9-latin-500.woff2) format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Proza Libre';
    font-style: normal;
    font-weight: 600;
    src: url(/fonts/proza-libre-v9-latin-600.woff2) format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Proza Libre';
    font-style: normal;
    font-weight: 700;
    src: url(/fonts/proza-libre-v9-latin-700.woff2) format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Proza Libre';
    font-style: normal;
    font-weight: 800;
    src: url(/fonts/proza-libre-v9-latin-800.woff2) format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url(/fonts/montserrat-v29-latin-regular.woff2) format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    src: url(/fonts/montserrat-v29-latin-500.woff2) format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    src: url(/fonts/montserrat-v29-latin-600.woff2) format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: url(/fonts/montserrat-v29-latin-700.woff2) format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 800;
    src: url(/fonts/montserrat-v29-latin-800.woff2) format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 900;
    src: url(/fonts/montserrat-v29-latin-900.woff2) format('woff2')
}

.fnt10pl {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: #070606
}

.fnt10plwt {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: #fff
}

.fnt10bpl {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: #070606
}

.fnt10bplwt {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: #fff
}

.fnt11pl {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #070606
}

.fnt11plwt {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #fff
}

.fnt11bpl {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #070606
}

.fnt12pl {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #070606
}

.fnt12plwt {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #fff
}

.fnt12bpl {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #070606
}

.fnt12bplwt {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #fff
}

.fnt13pl {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #070606
}

.fnt13plwt {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #fff
}

.fnt13bpl {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #070606
}

.fnt13bplwt {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #fff
}

.fnt14pl {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #070606
}

.fnt14plwt {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #fff
}

.fnt14bpl {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #070606
}

.fnt14bplwt {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #fff
}

.fnt15pl {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #070606
}

.fnt15plwt {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #fff
}

.fnt15bpl {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #070606
}

.fnt15bplwt {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #fff
}

.fnt16pl {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #070606
}

.fnt16plwt {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #fff
}

.fnt16bpl {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #070606
}

.fnt16bplwt {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #fff
}

.fnt17pl {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 17px;
    font-weight: 500;
    color: #070606
}

.fnt17plwt {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 17px;
    font-weight: 500;
    color: #fff
}

.fnt17bpl {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: #070606
}

.fnt17bplwt {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: #fff
}

.fnt18pl {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #070606
}

.fnt18plwt {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #fff
}

.fnt18bpl {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #070606
}

.fnt18bplwt {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #fff
}

.fnt19pl {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 19px;
    font-weight: 500;
    color: #070606
}

.fnt19plwt {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 19px;
    font-weight: 500;
    color: #fff
}

.fnt19bpl {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 19px;
    font-weight: 600;
    color: #070606
}

.fnt19bplwt {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 19px;
    font-weight: 600;
    color: #fff
}

.fnt20pl {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: #070606
}

.fnt20plwt {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: #fff
}

.fnt20bpl {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #070606
}

.fnt20bplwt {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #fff
}

.fnt22pl {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 22px;
    font-weight: 500;
    color: #070606
}

.fnt22plwt {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 22px;
    font-weight: 500;
    color: #fff
}

.fnt22bpl {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #070606
}

.fnt22bplwt {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #fff
}

.fnt25pl {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 25px;
    font-weight: 500;
    color: #070606
}

.fnt25plwt {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 25px;
    font-weight: 500;
    color: #fff
}

.fnt25bpl {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 25px;
    font-weight: 600;
    color: #070606
}

.fnt25bplwt {
    vertical-align: top;
    padding: 1px 1px;
    font-family: 'Proza Libre',sans-serif;
    font-size: 25px;
    font-weight: 600;
    color: #fff
}

/*This is used in the footer*/


.ps-list--line ul {

    list-style: none
}

.ps-list--line li {
 
    list-style: none;
  
}
.ps-list--line a {
    display: block;
    text-decoration: none;
    color: #ffffff
}

    .ps-list--line a:hover {
        color: aquamarine;
        text-decoration: none;
    }



/* Social Icons */
.zc-social {
    text-align: center;
}

    .zc-social ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .zc-social a {
        margin: 0 10px;
        color: #ffffff;
        font-size: 18px;
        transition: 0.2s;
    }

        .zc-social a:hover {
            opacity: 0.7;
        }

/* Bottom Line */
.zc-footer-bottom {
    text-align: center;
    padding: 10px 10px;
    background-image: radial-gradient( #032d45,#021826,#000);
    font-size: 13px;
    line-height: 22px;
}

.footeroverlay {
    filter: drop-shadow(-.5px -.5px 0 #000000) drop-shadow(.5px -.5px 0 #000000) drop-shadow(-.5px .5px 0 #000000) drop-shadow(.5px .5px 0 #000000) drop-shadow(0 0 .5px #000000)
}
.list-inline {
    padding-left: 0;
    list-style: none
}
.list-inline-item {
    display: inline-block
}

    .list-inline-item:not(:last-child) {
        margin-right: .25rem
    }
.footerhead {
    position: relative;
    display: inline-block !important;
    color: #fff;
    font-weight: 600;
    filter: drop-shadow(-.5px -.5px 0 #004867) drop-shadow(.5px -.5px 0 #004867) drop-shadow(-.5px .5px 0 #004867) drop-shadow(.5px .5px 0 #004867) drop-shadow(0 0 .5px #004867)
}

    .footerhead::after {
        margin-top: 1px;
        content: "";
        position: absolute;
        height: 10px; /* was 15px → reduces curve depth */
        width: 70%; /* narrower, more premium */
        left: 15%;
        top: 95%;
        border-top: 3px solid #39a8c6; /* was 5px → reduces thickness */
        border-radius: 50%;
        opacity: 0.95;
    }

.zc-footer-main {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 25px 20px;
}

.zc-col {
    width: 22%;
    min-width: 250px;
    margin-bottom: 15px;
}

    /* Headings */
    .zc-col h3 {
        margin-bottom: 12px;
        font-size: 18px;
        font-weight: 600;
        letter-spacing: 0.7px;
        color: #d9f4ff;
    }

    .zc-col h4 {
        margin-top: 15px;
        margin-bottom: 12px;
        font-size: 17px;
        letter-spacing: 0.7px;
        font-weight: 600;
        color: #d9f4ff;
    }

/* Logo */
.zc-logo {
    margin-bottom: 10px;
    max-height: 40px;
    width: auto;
}
/* Footer Background */
.zc-footer {
    color: #ffffff;
    font-family: 'Proza Libre', sans-serif;
    background-image: radial-gradient( #032d45,#021826,#000);
    background-size: cover;
    background-blend-mode: overlay;
}
    .zc-footer ul {
        padding-left: .5rem!important;
    }
/* Top Bar */
.zc-footer-top {
    text-align: center;
    padding: 10px 10px 10px 10px;
    background-image: radial-gradient( #032d45,#021826,#000);
    font-size: 16px;
    letter-spacing: 0.3px;
}


.logo-link {
    text-decoration: none
}

.logo-image {
    display: inline-block;
    width: auto;
    max-width: 190px;
    height: auto;
    padding: 0px 10px 0px 10px;
}

.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: radial-gradient( circle at center, #e5f7ff 0%,#e1f6ff 40%,#e1f6ff 50%,#d9f4ff 70%,#c0edff 80%, #0079A9 97% );
    border-radius: 20%;
 
    padding: 2px 15px 2px 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1), inset 0 0 8px rgba(255, 255, 255, 0.3);
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
    will-change: transform, box-shadow;
    display: inline-block;
}
    .logo:hover {
        transform: scale(1.03);
        box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(255, 255, 255, 0.4);
    }


/*This is used above the footer in some pages */
.home-icons-1 {
    text-align: center;
    margin-bottom: 10px;
    margin-top: 10px;
    font-size: 14px
}

    .home-icons-1 span {
        display: block;
        margin: 0 auto;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: .6s;
        background-image: radial-gradient(#fff,#d9f4ff,#0079A9);
        border: 1px solid #0079A9;
    }

    .home-icons-1:hover span, .home-icons-2:hover span {
        transform: rotateY(180deg);
        background-image: radial-gradient(#fff,#d9f4ff,#0079A9);
        transition: .6s
    }

        .home-icons-1 span img, .home-icons-1:hover span img {
            filter: brightness(0);
            transition: .6s;
            height: 35px;
        }

    .home-icons-1 h5 {
        margin-top: 5px;
        font-size: 12px;
        font-weight: 600;
        color: #070606;
        line-height: 26px
    }


/*This is used Generally across pages */
.ps-btnd {
    width: fit-content;
    display: inline-block;
    padding: .3em 1em;
    gap: .4rem;
    border: none;
    font-weight: 700;
    border-radius: 20px;
    cursor: pointer;
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
    background: linear-gradient(15deg,#005aa7, #0072b8, #0093d5, #00b4ec, #00ccff, #00b4ec, #0093d5, #0072b8, #005aa7) no-repeat;
    background-size: 300%;
    background-position: left center;
    transition: background 0.3s ease;
    color: #fff;
    font-size: 15px;
    font-family: 'Proza Libre',sans-serif;
    font-weight: 600;
    text-decoration: none
}

    .ps-btnd:hover {
        background-size: 320%;
        background-position: right center;
        color: #fff
    }

a.ps-btnd, a.ps-btnd:visited, a.ps-btnd:active {
    color: #fff !important;
    text-decoration: none
}

#customers-testimonials .t-item {
    text-align: left !important;
    min-height: 200px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    background: #f0f8ff;
    border-radius: 10px;
    padding: 24px;
    border-left: 4px solid #0079A9;
}

.t-item:hover {
    box-shadow: 0 6px 20px rgba(0,121,169,0.12);
    transform: translateY(-2px);
}

.t-item .t-stars {
    color: #f5a623;
    font-size: 15px;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.t-item .t-quote {
    font-size: 13px;
    color: #333232;
    font-style: italic;
    line-height: 1.7;
    margin-bottom: 14px;
}

.t-item .t-person {
    display: flex;
    align-items: center;
    gap: 10px;
    border-top: 0.5px solid #c0dff0;
    padding-top: 12px;
}

.t-item .t-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #e8f4ff;
    color: #0079A9;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.t-item .t-name {
    font-size: 13px;
    font-weight: 700;
    color: #10106e;
    margin: 0;
    line-height: 1.3;
}

.t-item .t-role {
    font-size: 11px;
    color: #777;
    margin: 2px 0 0;
    line-height: 1.3;
}

.t-title {
    padding-top: 12px;
    padding-bottom: 12px;
}

#customers-testimonials .owl-item .t-item {
    opacity: 0.2;
    transform: scale3d(0.82, 0.82, 1);
    transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.2s ease;
}

#customers-testimonials .owl-item.active.center .t-item {
    opacity: 1;
    transform: scale3d(1, 1, 1);
}

    #customers-testimonials .owl-item.active.center .t-item:hover {
        transform: scale3d(1, 1, 1) translateY(-3px);
        box-shadow: 0 8px 28px rgba(0,121,169,0.16);
    }


.owl-carousel .owl-item img {
    transform-style: preserve-3d;
    max-width: 300px;
    margin: 0 auto 17px
}

#customers-testimonials.owl-carousel .owl-dots .owl-dot.active span, #customers-testimonials.owl-carousel .owl-dots .owl-dot:hover span {
    background: #4280bd;
    transform: translate3d(0,-50%,0) scale(.6)
}

#customers-testimonials.owl-carousel .owl-dots {
    display: none;
    width: 100%;
    text-align: center
}

    #customers-testimonials.owl-carousel .owl-dots .owl-dot {
        display: inline-block;
        outline: 0
    }

        #customers-testimonials.owl-carousel .owl-dots .owl-dot span {
            background: #fff;
            display: inline-block;
            height: 20px;
            margin: 0 2px 5px;
            transform: translate3d(0,-50%,0) scale(.3);
            transform-origin: 50% 50% 0;
            transition: all 250ms ease-out 0s;
            width: 20px;
            border-radius: 100%
        }
.mt-1px {
    margin-top: 1px !important
}

.mt-2px {
    margin-top: 2px !important
}

.mt-3px {
    margin-top: 3px !important
}

.mt-4px {
    margin-top: 4px !important
}

.mt-5px {
    margin-top: 5px !important
}

.mt-6px {
    margin-top: 6px !important
}

.mt-7px {
    margin-top: 7px !important
}

.mt-8px {
    margin-top: 8px !important
}

.mt-9px {
    margin-top: 9px !important
}

.mt-10px {
    margin-top: 10px !important
}

.mt-5px {
    margin-top: 5px !important
}

.mt-10px {
    margin-top: 10px !important
}

.mt-15px {
    margin-top: 15px !important
}

.mt-20px {
    margin-top: 20px !important
}

.mt-25px {
    margin-top: 25px !important
}

.mt-30px {
    margin-top: 30px !important
}

.mt-32px {
    margin-top: 32px !important
}

.mt-35px {
    margin-top: 35px !important
}

.mt-40px {
    margin-top: 40px !important
}

.mt-45px {
    margin-top: 45px !important
}

.mt-50px {
    margin-top: 50px !important
}

.mt-75px {
    margin-top: 75px !important
}

.mt-100px {
    margin-top: 100px !important
}

.me-1px {
    margin-right: 1px !important
}

.me-2px {
    margin-right: 2px !important
}

.mb-1px {
    margin-bottom: 1px !important
}

.mb-2px {
    margin-bottom: 2px !important
}

.mb-3px {
    margin-bottom: 3px !important
}

.mb-4px {
    margin-bottom: 4px !important
}

.mb-5px {
    margin-bottom: 5px !important
}

.mb-6px {
    margin-bottom: 6px !important
}

.mb-7px {
    margin-bottom: 7px !important
}

.mb-8px {
    margin-bottom: 8px !important
}

.mb-9px {
    margin-bottom: 9px !important
}

.mb-10px {
    margin-bottom: 10px !important
}

.mb-5px {
    margin-bottom: 5px !important
}

.mb-10px {
    margin-bottom: 10px !important
}

.mb-15px {
    margin-bottom: 15px !important
}

.mb-20px {
    margin-bottom: 20px !important
}

.mb-25px {
    margin-bottom: 25px !important
}

.mb-30px {
    margin-bottom: 30px !important
}

.mb-35px {
    margin-bottom: 35px !important
}

.mb-40px {
    margin-bottom: 40px !important
}

.mb-45px {
    margin-bottom: 45px !important
}

.mb-50px {
    margin-bottom: 50px !important
}

.under {
    position: relative;
    display: inline-block !important;
    font-weight: 600
}

    .under::after {
        margin-top: 1px;
        content: "";
        position: absolute;
        height: 10px; /* was 15px → reduces curve depth */
        width: 70%; /* narrower, more premium */
        left: 15%;
        top: 95%;
        border-top: 3px solid #056f92; /* was 5px → reduces thickness */
        border-radius: 50%;
    }
.headcss {
    text-shadow: 1px 1px #fff, -1px 1px #fff, 1px -1px #fff, -1px -1px #fff, .5px .5px 4px #d1d1d1;
    font-weight: 700;
    color: #10106e;
}

.gradient100a {
    background-image: linear-gradient(to top, #00324d,#043b58, #006b8f);
}

.trust-bar {
    background: #f8f9fa;
    padding: 14px 0;
    text-align: center;
    font-size: 13px;
    color: #666;
    border-bottom: 1px solid #e0e0e0;
}

    .trust-bar span {
        margin: 0 16px;
        display: inline-block;
    }
.videobox {
    height: 100%;
    background-image: radial-gradient(#fcfeff,#fbfeff,#f7fdff);
    box-shadow: inset 0 0 10px #0079A9,-7px 5px 20px -4px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 15px;
    color: #fff;
    border: 2px solid #0079A9;
}
.genbox:hover .iconrnd,
.genbox1:hover .iconrnd {
    background: #d0eaf8;
}

.genbox {
    border-radius: 14px;
    background: #fff;
    border: 0.5px solid #c0dff0;
    padding: 5px;
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
    position: relative;
    overflow: hidden;
    border-color: #0079A9;
}

    .genbox:hover {
        box-shadow: 0 6px 24px rgba(0,121,169,0.13);
        transform: translateY(-3px);
        border-color: #0079A9;
    }

    .genbox::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: #0079A9;
        border-radius: 14px 14px 0 0;
    }
.szhr {
    border-top: 5px solid;
    border-image: linear-gradient( to right, #ffffff 10%, rgb(1, 179, 201) 30%, rgb(40, 48, 68) 50%, rgb(1, 179, 201) 70%, #ffffff 90% ) 1 0 0 1;
}
.headbg {
    background-image: radial-gradient( circle at center, #f7fdff 0%, #f0fbff 25%,#e8f8ff 50%, #e1f6ff 60%, #d9f4ff 80%, #0079A9 103% );
    color: #10106e;
    border-radius: 0% 30% 0% 30%;
}

.headbgcover {
    border-radius: 0% 30% 0% 30%;
    box-shadow: -16px 14px 10px -7px rgba(0, 0, 0, 0.2);
    background-color: #4ca1c2;
    border: 1px solid #003043
}
.product-discover-link {
    color: #0079A9 !important;
    text-decoration: none !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s ease, transform 0.2s ease;
    padding: 4px 0;
    border-bottom: 1px dashed rgba(0, 121, 169, 0.4);
}

    .product-discover-link:hover {
        color: #10106e !important;
        border-bottom-color: #10106e;
        transform: translateX(3px); /* Subtle nudge effect to invite clicks */
    }

    .product-discover-link i {
        transition: transform 0.2s ease;
    }

    .product-discover-link:hover i {
        transform: translateX(2px);
    }
.iconrnd {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8f4ff;
    border: none;
    color: #0079A9;
    padding: 6px;
    font-size: 20px;
    transition: background 0.2s ease;
}
.hero-section1 {
    background-color: #051a32;
    background-image: url('/images/bgfrnt.webp'); /* desktop image */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    height: 600px;
    position: relative;
}

@media (max-width: 767px) {
    .hero-section1 {
        background-image: url('/images/bgfrntmb.webp'); /* NEW mobile image */
        background-position: center bottom;
        height: 100vh; /* full screen hero */
        min-height: 600px; /* safety for small phones */
    }
}

.hero-section2 {
    background-color: #051a32;
    background-image: url('/images/bgzcart.webp'); /* desktop image */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    height: 600px;
    position: relative;
}

@media (max-width: 767px) {
    .hero-section2 {
        background-image: url('/images/bgzcartmb.webp'); /* NEW mobile image */
        background-position: center bottom;
        height: 100vh; /* full screen hero */
        min-height: 600px; /* safety for small phones */
    }
}

.hero-section3 {
    background-color: #051a32;
    background-image: url('/images/bgzcart1.webp'); /* desktop image */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    height: 600px;
    position: relative;
}

@media (max-width: 767px) {
    .hero-section3 {
        background-image: url('/images/bgzcart1mb.webp'); /* NEW mobile image */
        background-position: center bottom;
        background-size: cover;
        min-height: 600px; /* safety for small phones */
    }
}

.hero-section4 {
    background-color: #051a32;
    background-image: url('/images/value.webp'); /* desktop image */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    height: 600px;
    position: relative;
}

@media (max-width: 767px) {
    .hero-section4 {
        background-image: url('/images/valuemb.webp'); /* NEW mobile image */
        background-position: center bottom;
        height: 100vh; /* full screen hero */
        min-height: 600px; /* safety for small phones */
    }
}
header .item1 {
    height: 600px;
    position: relative
}

    header .item1 .cover {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: flex;
        align-items: center
    }

        header .item1 .cover .header-content {
            position: relative;
            padding: 16px;
            overflow: hidden;
            color: #fff;
            text-shadow: -.5px -.5px 0 #000,.5px -.5px 0 #000,-.5px .5px 0 #000,.5px .5px 0 #000;
            text-align: center;
            top: -25px;
        }

            header .item1 .cover .header-content .line {
                content: "";
                display: inline-block;
                width: 100%;
                height: auto;
                left: 0;
                top: 0;
                position: absolute;
                border: 9px solid #fff;
                -webkit-clip-path: polygon(0 0,60% 0,36% 100%,0 100%);
                clip-path: polygon(0 0,60% 0,36% 100%,0 100%)
            }

@media (max-width:576px) {
    header .item1 .cover .header-content .line {
        display: none
    }
}

header .item1 .cover .header-content h2 {
    font-size: 1.125rem;
    font-size: 18px;
    color: #fff;
    font-family: 'Proza Libre',sans-serif
}

header .item1 .cover .header-content h1,
header .item1 .cover .header-content h2 {
    font-size: 1.5625rem; /* 30px */
    font-weight: 600;
    margin: 5px 0 20px;
    word-spacing: 3px;
    color: #fff;
    font-family: 'Proza Libre', sans-serif;
}

header .item1 .cover .header-content h3 {
    font-size: 1rem; /* 16px */
    font-weight: 600;
    line-height: 1.5;
    color: #fff;
    font-family: 'Proza Libre', sans-serif;
    margin: 5px 0 20px;
}


.hd {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    color: #fff;
    font-family: 'Proza Libre', sans-serif;
    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
}

/* ── Tablet (max 1024px) ── */
@media (max-width: 1024px) {
    header .item1 .cover .header-content h1,
    header .item1 .cover .header-content h2 {
        font-size: 1.5rem; /* 24px */
    }

    header .item1 .cover .header-content h3,
    .hd {
        font-size: 0.9375rem; /* 15px */
    }
}

/* ── Mobile (max 767px) ── */
@media (max-width: 767px) {
    header .item1 .cover .header-content h1,
    header .item1 .cover .header-content h2 {
        font-size: 1.2rem; /* 19px */
    }

    header .item1 .cover .header-content h3,
    .hd {
        font-size: 0.8125rem; /* 13px */
    }

    header .item1 .cover .header-content {
        top: 0px;
    }
}

header .owl-item.active h1 {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-name: fadeInDown;
    animation-delay: .3s
}

header .owl-item.active h2 {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-name: fadeInDown;
    animation-delay: .3s
}

header .owl-item.active h3 {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-name: fadeInUp;
    animation-delay: .3s
}

header .owl-item.active .line {
    -webkit-animation-duration: 1s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-name: fadeInLeft;
    animation-delay: .3s
}
/*header file related*/

nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    height: 70px;
    background: #a6e6ff;
  /*  background-image: radial-gradient(#f3fbff,#d9f4ff,#c0edff,#a6e6ff,#0079A9);*/
    background-image: radial-gradient(#def6ff,#d9f4ff,#c0edff,#0079A9 115%);
    box-shadow: 0 1px 2px rgb(0 0 0 / .2);
    font-family: 'Montserrat',sans-serif;
    z-index: 99
}

    nav .navbar {
        height: 100%;
        max-width: 1100px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: auto;
        padding: 0px;
    }
        nav .navbar .nav-links {
            line-height: 70px;
            height: 100%
        }

        nav .navbar .links {
            display: flex
        }

            nav .navbar .links li {
                position: relative;
                display: flex;
                align-items: center;
                justify-content: space-between;
                list-style: none;
                padding: 0 7px
            }

                nav .navbar .links li a {
                    height: 100%;
                    text-decoration: none;
                    white-space: nowrap;
                    color: #000052;
                    font-size: 14px;
                    font-weight: 600
                }

.links li:hover .htmlcss-arrow, .links li:hover .js-arrow, .links li:hover .js-arrow1, .links li:hover .js-arrow2 {
    transform: rotate(180deg)
}

nav .navbar .links li .arrow {
    height: 100%;
    width: 22px;
    line-height: 70px;
    text-align: center;
    display: inline-block;
    color: #fff;
    transition: all .3s ease
}

nav .navbar .links li .sub-menu {
    position: absolute;
    top: 50px;
    left: 0;
    line-height: 40px;
    background-image: radial-gradient(#00446c,#000);
    box-shadow: 0 1px 2px rgb(0 0 0 / .2);
    border-radius: 0 0 4px 4px;
    display: none;
    z-index: 2;
    padding-top: 10px;
}

nav .navbar .links li:hover .htmlCss-sub-menu, nav .navbar .links li:hover .js-sub-menu, nav .navbar .links li:hover .js-sub-menu1, nav .navbar .links li:hover .js-sub-menu2, nav .navbar .links li:hover .js-sub-menu3 {
    display: block
}

.navbar .links li .sub-menu li {
    padding: 0 20px 0 0;
    border-bottom: 1px solid rgb(255 255 255 / .2)
}


.navbar .links li .sub-menu a {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    filter: drop-shadow(-.5px -.5px 0 #000000) drop-shadow(.5px -.5px 0 #000000) drop-shadow(-.5px .5px 0 #000000) drop-shadow(.5px .5px 0 #000000) drop-shadow(0 0 .5px #000000)
}

.menu-parent {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

.menu-label {
    color: white;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap; /* prevents breaking */
}

.menu-label {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    filter: drop-shadow(-.5px -.5px 0 #000000) drop-shadow(.5px -.5px 0 #000000) drop-shadow(-.5px .5px 0 #000000) drop-shadow(.5px .5px 0 #000000) drop-shadow(0 0 .5px #000000)
}

.navbar .links li .sub-menu .more-arrow, .navbar .links li .sub-menu .js-arrow3, .navbar .links li .sub-menu .js-arrow4 {
    line-height: 40px
}

.navbar .links li .sub-menu .more-sub-menu, .navbar .links li .sub-menu .more-sub-menu1, .navbar .links li .sub-menu .more-sub-menu2 {
    position: absolute;
    top: 0;
    left: 100%;
    border-radius: 0 4px 4px 4px;
    z-index: 1;
    display: none
}

.links li .sub-menu .more:hover .more-sub-menu, .links li .sub-menu .more:hover .more-sub-menu1, .links li .sub-menu .more:hover .more-sub-menu2 {
    display: block
}

.navbar .nav-links .sidebar-logo {
    display: none
}

.navbar .fa-bars {
    display: none
}

@media (max-width:920px) {
    nav .navbar {
        max-width: 100%;
        padding: 0 5px
    }

        nav .navbar .links li {
            padding: 0 5px 0 10px;
            white-space: nowrap
        }

            nav .navbar .links li a {
                font-size: 13px
            }
}



@media (max-width:768px) {
    nav .navbar {
        max-width: 100%;
        padding: 0 5px
    }

        nav .navbar .links li {
            padding: 5px 5px 0 0;
            white-space: nowrap
        }

            nav .navbar .links li a {
                font-size: 11px
            }
}

@media (max-width:344px) {
    .top-support {
        margin: 0;
        padding: 5px 5px 0;
        float: left
    }

        .top-support li {
            float: left;
            list-style: none;
            color: #fff;
            font-size: 12px !important;
            font-family: 'Proza Libre',sans-serif;
            font-weight: 500
        }

            .top-support li:first-child {
                margin-right: 10px
            }

            .top-support li a {
                color: #fff
            }

                .top-support li a i {
                    color: #fff
                }

            .top-support li i {
                font-size: 20px;
                color: #fff;
                margin-right: 5px
            }

            .top-support li i, .top-support li span {
                float: left
            }
}

@media (max-width:768px) {
    nav {
    }

    .navbar .fa-bars {
        display: block
    }

    .arrow {
        color: #fff !important
    }

    nav .navbar .nav-links {
        position: fixed;
        top: 0;
        left: -100%;
        display: block;
        max-width: 300px;
        width: 100%;
        background-image: radial-gradient(#00446c,#000);
        line-height: 30px;
        color: #fff !important;
        transition: all 0.5s ease;
        z-index: 1000;
        overflow-y: auto;
    }



    nav .navbar .links li a {
        height: 100%;
        text-decoration: none;
        white-space: nowrap;
        color: #fff;
        font-size: 12px;
        font-weight: 600
    }

    .navbar .nav-links .sidebar-logo {
        display: flex;
        align-items: center;
        justify-content: space-between
    }

    .sidebar-logo .logo-name {
        font-size: 25px;
        color: #fff
    }

    .sidebar-logo i, .navbar .fa-bars {
        font-size: 20px;
        color: #04044d
    }

    nav .navbar .links {
        display: block;
    }

        nav .navbar .links li .arrow {
            line-height: 30px
        }


        nav .navbar .links li {
            display: block;
            padding-left: 1px !important;
        }

            nav .navbar .links li .sub-menu {
                position: relative;
                top: 0;
                box-shadow: none;
                display: none;
                background: transparent !important;
            }

    nav .navbar ul {
        padding-left: 15px !important
    }

    .navbar .links li .sub-menu .more-sub-menu, .navbar .links li .sub-menu .more-sub-menu1, .navbar .links li .sub-menu .more-sub-menu2 {
        display: none;
        position: relative;
        left: 0
    }

    .navbar .nav-links.show1 .links .htmlCss-sub-menu, .navbar .nav-links.show3 .links .js-sub-menu, .navbar .nav-links.show4 .links .js-sub-menu1, .navbar .nav-links.show5 .links .js-sub-menu3, .navbar .nav-links.show2 .links .more .more-sub-menu, .navbar .nav-links.show6 .links .more .more-sub-menu1, .navbar .nav-links.show7 .links .more .more-sub-menu2 {
        display: block;
        padding-left: 15px !important;
        line-height: 30px;
        padding-top: 0px;
    }


    .links li:hover .htmlcss-arrow, .links li:hover .js-arrow, .links li:hover .js-arrow1, .links li:hover .js-arrow2, .links li:hover .js-arrow3, .links li:hover .js-arrow4 {
        transform: rotate(0deg)
    }

    .navbar .links li .sub-menu .more-sub-menu, .navbar .links li .sub-menu .more-sub-menu1, .navbar .links li .sub-menu .more-sub-menu2 {
        display: none
    }

    .navbar .links li .sub-menu .more span {
        display: flex;
        align-items: center
    }

    .links li .sub-menu .more:hover .more-sub-menu, .links li .sub-menu .more:hover .more-sub-menu1, .links li .sub-menu .more:hover .more-sub-menu2 {
        display: none
    }

    nav .navbar .links li:hover .htmlCss-sub-menu, nav .navbar .links li:hover .js-sub-menu, nav .navbar .links li:hover .js-sub-menu1, nav .navbar .links li:hover .js-sub-menu2, nav .navbar .links li:hover .js-sub-menu3 {
        display: none
    }

    .navbar .nav-links.show1 .links .htmlCss-sub-menu, .navbar .nav-links.show3 .links .js-sub-menu, .navbar .nav-links.show4 .links .js-sub-menu1, .navbar .nav-links.show5 .links .js-sub-menu3, .navbar .nav-links.show2 .links .more .more-sub-menu, .navbar .nav-links.show6 .links .more .more-sub-menu1, .navbar .nav-links.show7 .links .more .more-sub-menu2 {
        display: block
    }

    .navbar .nav-links.show1 .links .htmlcss-arrow, .navbar .nav-links.show3 .links .js-arrow, .navbar .nav-links.show4 .links .js-arrow1, .navbar .nav-links.show5 .links .js-arrow2 {
        transform: rotate(180deg)
    }

    .navbar .nav-links.show2 .links .more-arrow {
        transform: rotate(90deg)
    }

    .navbar .nav-links.show2 .links .more-arrow {
        transform: rotate(90deg);
    }

    .navbar .nav-links.show6 .links .js-arrow3 {
        transform: rotate(90deg)
    }

    .navbar .nav-links.show7 .links .js-arrow4 {
        transform: rotate(90deg)
    }

    .navbar .links .sub-menu .show {
        display: block;
        max-height: 500px;
    }

    .sub-menu {
        display: none !important;
    }

        .sub-menu.show {
            display: block !important;
        }
}

@media (max-width:370px) {
    nav .navbar .nav-links {
        max-width: 80%
    }
}
.top-support {
    margin: 0;
    padding: 5px 5px 0;
    float: left
}

    .top-support li {
        float: left;
        list-style: none;
        color: #fff;
        font-size: 13px;
        font-family: 'Proza Libre',sans-serif;
        font-weight: 500
    }

        .top-support li:first-child {
            margin-right: 17px
        }

        .top-support li a {
            color: #fff
        }

            .top-support li a i {
                color: #fff
            }

        .top-support li i {
            font-size: 20px;
            color: #fff;
            margin-right: 10px
        }

        .top-support li i, .top-support li span {
            float: left
        }
.demo-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap
}
.whtbox {
    background: #fff;
    padding: 16px;
    height: 100%;
    box-shadow: 0 2px 12px rgba(0,121,169,0.10);
    border: 0.5px solid #c0dff0;
    border-radius: 14px;
    transition: box-shadow 0.2s ease;
}

    .whtbox:hover {
        box-shadow: 0 6px 20px rgba(0,121,169,0.15);
    }

.pricing-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch; /* This is the key property! */
}
.ribbon {
    position: absolute;
    top: 0;
    right: -50px;
    width: 160px;
    background: #FFC107;
    color: #000;
    text-align: center;
    font-weight: 700;
    font-size: 11px;
    padding: 2px 0;
    transform: rotate(30deg);
    box-shadow: 0 2px 4px rgb(0 0 0 / .3);
    z-index: 10;
    text-transform: uppercase
}
.card-content {
    background-color: #c0edff;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    -webkit-box-shadow: -16px 14px 18px -7px rgb(0 0 0 / .68);
    -moz-box-shadow: -16px 14px 18px -7px rgb(0 0 0 / .68);
    box-shadow: -16px 14px 18px -7px rgb(0 0 0 / .68);
    transition: transform 0.2s,box-shadow 0.2s;
    border: 1px solid #000;
    height: 100%;
    display: flex;
    flex-direction: column
}

    .card-content > div {
        flex-grow: 1
    }

    .card-content h3 {
        margin-bottom: 10px
    }

    .card-content h4 {
        margin-bottom: 15px;
        font-weight: 600
    }

    .card-content p {
        margin-bottom: 20px;
        line-height: 1.6
    }

    .card-content .btn {
        padding: 10px 20px;
        background-color: #004085;
        color: #4e9cff;
        font-size: 1rem;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.2s,color 0.2s
    }

        .card-content .btn:hover {
            background-color: #000;
            color: #fff
        }

    .card-content:hover {
        transform: translateY(-10px);
        box-shadow: 0 6px 12px rgb(0 0 0 / .2)
    }
.card-equal-height {
    /* This makes the inner content div fill the full height of the parent column */
    height: 100%;
    /* You may want to add these styles for a more polished look: */
    border-radius: 8px; /* Example border radius */
    overflow: hidden; /* Ensures child elements don't poke outside the border-radius */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional shadow */
}
.centered-card-container {
    padding: 15px
}

.centered-card {
    margin-bottom: 15px;
    border: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 15px 0;
    background-image: linear-gradient( to bottom, #fcfeff,#fbfeff,#f7fdff, #f4fcff,#f0fbff,#ecfaff,#e8f8ff );
    box-shadow: inset 0 0 5px #0079A9,-7px 5px 20px -4px rgba(0, 0, 0, 0.15);
    border-radius: 20px;
}

    .centered-card .content-row {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .centered-card .icon-col {
        flex-shrink: 0;
        padding: 0 10px
    }

        .centered-card .icon-col i {
            font-size: 30px;
            margin-top: 20px;
            display: block
        }

    .centered-card .text-col {
        flex-grow: 1;
        padding: 0 15px
    }

        .centered-card .text-col p {
            margin-top: 5px;
            margin-bottom: 5px
        }

@media (max-width:767px) {
    .centered-card {
        flex-direction: column
    }

        .centered-card .content-row {
            flex-direction: column;
            text-align: center
        }

        .centered-card .icon-col {
            padding: 0
        }
}

.main-content {
    padding-left: 15px;
    padding-right: 15px
}

@media (min-width:992px) {
    .main-content {
        padding-left: 0;
        padding-right: 0
    }
}
overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / .5);
    z-index: 1000;
    display: none
}

.overlay.show {
    display: block
}

.cta-section {
    width: 100%;
    margin: 40px 0;
    padding: 0 15px;
    box-sizing: border-box
}

.cta-container {
    background: radial-gradient(#00446c,#000);
    box-shadow: -16px 14px 18px -7px rgb(0 0 0 / .68);
    border: 2px solid #000;
    color: #fff;
    text-align: center;
    border-radius: 20px;
    transform: skewY(-3deg);
    overflow: hidden;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto
}

.cta-content {
    padding: 30px 20px;
    transform: skewY(3deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px
}

.cta-heading {
    font-size: 1em;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    padding: 0;
    max-width: 90%;
    box-sizing: border-box;
    color: #ffffff
}

.cta-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 100%
}

.cta-button {
    font-family: 'Proza Libre',sans-serif;
    display: inline-block;
    padding: 7px 15px;
    background-color: #ff9800 !important;
    color: darkblue;
    text-decoration: none;
    font-size: 14px !important;
    font-weight: 500;
    border-radius: 8px;
    transition: background-color 0.3s ease,transform 0.2s ease;
    box-shadow: 0 4px 8px rgb(0 0 0 / .2);
    white-space: nowrap;
    max-width: 90%;
    box-sizing: border-box
}

    .cta-button:hover {
        background: linear-gradient(to right, #0079A9, #00BBD4);
        color: #fff !important;
        transition: 0.3s;
    }

.cta-tagline {
    font-family: 'Proza Libre',sans-serif;
    font-size: 1em;
    font-weight: 600;
    margin: 0;
    padding: 0;
    text-shadow: -2px 4px 3px rgb(0 0 0 / .3);
    color: aqua
}

@media (min-width:768px) {
    .cta-container {
        border-radius: 30% 30% 30% 30%;
        padding: 0
    }

    .cta-content {
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        padding: 20px 40px;
        gap: 30px
    }

    .cta-heading {
        font-size: 1em;
        text-align: right;
        flex-basis: 50%;
        max-width: none
    }

    .cta-actions {
        flex-direction: column;
        align-items: center;
        flex-basis: 50%;
        padding-left: 20px;
        box-sizing: border-box
    }

    .cta-button {
        font-size: 1.2em;
        padding: 7px 15px
    }

    .cta-tagline {
        font-size: 1em
    }
}

@media (min-width:1200px) {
    .cta-container {
        max-width: 1000px
    }

    .cta-heading {
        font-size: 1.4em
    }

    .cta-button {
        font-size: 1.2em
    }
}
.section-title {
    font-size: 18px;
    font-weight: 700;
    color: #10106e;
    text-align: center;
    margin-bottom: 8px;
}

.section-sub {
    text-align: center;
    color: #555;
    font-size: 15px;
    max-width: 700px;
    margin: 0 auto 28px;
}
.feature-card {
    background: #fff;
    border: 1px solid #99f4ff;
    border-radius: 10px;
    padding: 20px;
    height: 100%;
    transition: box-shadow 0.2s ease;
}


    .feature-card:hover {
        box-shadow: 0 4px 20px rgba(0, 50, 77,0.12);
    }
.cmp-wrap {
    padding: 1.5rem 0;
}

.cmp-head {
    margin-bottom: 1.25rem;
}

    .cmp-head h2 {
        font-size: 20px;
        font-weight: 700;
        margin: 0 0 6px;
        color: #10106e;
    }

    .cmp-head p {
        font-size: 15px;
        color: #555;
        margin: 0;
    }

.tbl-scroll {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid #e2e6ea;
}

table.cmp {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    table-layout: fixed;
}

    table.cmp thead tr th {
        padding: 5px 5px;
        font-weight: 600;
        font-size: 12px;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        border-bottom: 1px solid #e2e6ea;
    }

    table.cmp thead tr:first-child {
    }

    table.cmp thead th:first-child {
        width: 22%;
        text-align: left;
        color: #0f3f5e;
        background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
        padding-left: 16px;
    }

    table.cmp thead th.col-zcartify {
        background: linear-gradient(to bottom, #0079A9 -15%, #e1f6ff 15%, #e1f6ff 85%, #0079A9 115%);
        color: #0f3f5e;
        text-align: center;
        width: 19.5%;
        border-left: 1px solid #3f97f2;
        border-right: 1px solid #3f97f2;
    }

    table.cmp thead th.col-other {
        background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
        color: #888;
        text-align: center;
        width: 19.5%;
    }

    table.cmp thead th .col-name {
        display: block;
        font-size: 13px;
        font-weight: 600;
    }

    table.cmp thead th .col-sub {
        display: block;
        font-size: 10px;
        font-weight: 400;
        opacity: 0.75;
        margin-top: 2px;
    }

    table.cmp tbody tr {
        border-bottom: 1px solid #e8ecf0;
    }

        table.cmp tbody tr:last-child {
            border-bottom: none;
        }

        table.cmp tbody tr:hover td {
            background: #f8f9fb !important;
        }

    table.cmp tbody td {
        padding: 11px 12px;
        vertical-align: middle;
    }

        table.cmp tbody td:first-child {
            font-size: 13px;
            color: #1a1a2e;
            font-weight: 500;
            background: #ffffff;
            padding-left: 16px;
        }

        table.cmp tbody td.cell-zcartify {
            text-align: center;
            background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
            color: #0c447c;
            font-weight: 500;
            border-left: 1px solid #3f97f2;
            border-right: 1px solid #3f97f2;
        }

        table.cmp tbody td.cell-other {
            text-align: center;
            color: #6b7280;
            background: #ffffff;
        }

    table.cmp tbody tr.row-best td:first-child {
        background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
        color: #0f3f5e;
        font-weight: 600;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    table.cmp tbody tr.row-best td.cell-zcartify {
        background: linear-gradient(to bottom, #0079A9 -15%, #e1f6ff 15%, #e1f6ff 85%, #0079A9 115%);
        color: #0c447c;
        font-size: 12px;
        border-top: 1px solid #3f97f2;
        border-bottom: 1px solid #3f97f2;
    }

    table.cmp tbody tr.row-best td.cell-other {
        background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
        font-size: 12px;
        color: #6b7280;
    }

.cmp-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
    white-space: normal; /* was nowrap — this was the main culprit */
    word-break: break-word;
    text-align: center;
    justify-content: center;
}


.cmp-badge-yes {
    background: #eaf3de;
    color: #01273d;
    border: 1px solid #375e02;
}

.cmp-badge-no {
    background: #fcebeb;
    color: #a32d2d;
    border: 1px solid #a32d2d;
}

.cmp-badge-warn {
    background: #ebd175;
    color: #6e4603;
    border: 1px solid #6e4603;
}

.cmp-badge-price {
    background: #e6f1fb;
    color: #185fa5;
    font-size: 12px;
    padding: 3px 10px;
}

.cmp-callout {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
    border-left: 3px solid #0079A9;
    border-radius: 0 8px 8px 0;
    padding: 14px 18px;
    margin-top: 16px;
}

    .cmp-callout i {
        font-size: 20px;
        color: #0079A9;
        flex-shrink: 0;
        margin-top: 1px;
    }

    .cmp-callout p {
        font-size: 14px;
        color: #444;
        margin: 0;
        line-height: 1.65;
    }

        .cmp-callout p strong {
            color: #10106e;
        }

.tbl-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
}

table.cmp {
    width: 100%;
    min-width: 600px; /* forces horizontal scroll before it breaks */
    border-collapse: collapse;
    table-layout: fixed;
}

    table.cmp thead th:first-child,
    table.cmp tbody td:first-child {
        width: 22%;
    }

    table.cmp thead th.col-zcartify,
    table.cmp thead th.col-other {
        width: 19.5%;
    }

@media (max-width: 680px) {
    table.cmp {
        min-width: 520px; /* tighter but still scrollable */
        font-size: 11px;
    }

        table.cmp td,
        table.cmp th {
            padding: 8px 6px;
        }

    .cmp-badge {
        font-size: 10px;
        padding: 2px 6px;
    }

    .cmp-badge-price {
        font-size: 10px;
        padding: 2px 6px;
    }

    .col-sub {
        font-size: 10px;
    }

    .cmp-callout {
        flex-direction: column; /* stack icon above text on mobile */
        gap: 8px;
    }
}

.sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 20px;
    text-align: center;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
}

    .sticky-cta a {
        background: #0079A9;
        color: #fff;
        padding: 12px 20px;
        border-radius: 6px;
        font-weight: 700;
        font-size: 14px;
        text-decoration: none;
    }

    .sticky-cta p {
        color: rgba(255,255,255,1);
        font-size: 13px;
        margin: 0;
    }

@media(max-width:576px) {
    .sticky-cta {
        flex-direction: column;
        gap: 8px;
    }
}

.faq-item {
    border-bottom: 1px solid #e0e0e0;
    padding: 14px 0;
}

    .faq-item:last-child {
        border-bottom: none;
    }

.faq-q {
    font-weight: 600;
    color: #10106e;
    font-size: 15px;
    margin-bottom: 6px;
}

.faq-a {
    color: #555;
    font-size: 14px;
    margin: 0;
}
/* Breadcrumb styles */
.breadcrumb-nav ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    list-style: none;
    padding: 10px 16px;
    margin: 0 0 20px;
    background: #f0f6ff;
    border-radius: 8px;
    border-left: 3px solid #0079A9;
}

.breadcrumb-nav li {
    font-size: 13px;
    font-family: 'Montserrat', sans-serif;
    white-space: nowrap;
}

    .breadcrumb-nav li:last-child {
        white-space: normal; /* allow long last item to wrap */
        color: #6b7280;
        font-weight: 500;
    }

    .breadcrumb-nav li a {
        color: #10106e;
        text-decoration: none;
        font-weight: 600;
        transition: color 0.15s;
    }

        .breadcrumb-nav li a:hover {
            color: #0079A9;
            text-decoration: underline;
        }

    .breadcrumb-nav li.separator {
        color: #10106e;
        font-size: 14px;
        font-weight: 800;
        user-select: none;
    }

@media (max-width: 767px) {
    .breadcrumb-nav ol {
        padding: 8px 12px;
        gap: 3px 6px;
    }

    .breadcrumb-nav li {
        font-size: 12px;
    }
}
.section-label {
    font-size: 16px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #10106e;
    font-family: 'Proza Libre', sans-serif text-align: center;
    margin: 0 0 20px;
}

/* ── Steps Grid ── */
.steps-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

.step-card {
    background: #ffffff;
    border: 1px solid #e8ecf0;
    border-radius: 14px;
    padding: 20px 22px 20px 26px;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

    .step-card:hover {
        box-shadow: 0 4px 20px rgba(0,0,0,0.07);
    }

    .step-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 5px;
        height: 100%;
        border-radius: 14px 0 0 14px;
    }

    .step-card:nth-child(1)::before {
        background: #0083be;
    }

    .step-card:nth-child(2)::before {
        background: #0083be;
    }

    .step-card:nth-child(3)::before {
        background: #0083be;
    }

    .step-card:nth-child(4)::before {
        background: #0083be;
    }

.step-num {
    font-family: 'Proza Libre', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #0083be;
    margin: 0 0 6px;
}

.step-title {
    font-family: 'Proza Libre', sans-serif;
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 12px;
    color: #1a1a2e;
}

.step-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .step-list li {
        font-size: 13.5px;
        color: #555e70;
        padding: 4px 0;
        display: flex;
        align-items: flex-start;
        gap: 8px;
        line-height: 1.5;
    }

        .step-list li i {
            font-size: 14px;
            color: #bbc0ca;
            margin-top: 2px;
            flex-shrink: 0;
        }

.earning-card {
    background: linear-gradient(135deg, #001e30 0%, #00446c 100%);
    border-radius: 14px;
    padding: 24px 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 14px;
}

.earning-left {
    flex: 1;
}

    .earning-left h3 {
        font-family: 'Proza Libre', sans-serif;
        font-size: 17px;
        font-weight: 700;
        color: #ffffff;
        margin: 0 0 8px;
    }

    .earning-left p {
        font-size: 13px;
        color: rgba(255,255,255,0.65);
        margin: 0;
        line-height: 1.6;
    }

.earn-stat {
    text-align: center;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    padding: 12px 18px;
    flex-shrink: 0;
}

    .earn-stat span {
        font-family: 'Proza Libre', sans-serif;
        font-size: 20px;
        font-weight: 800;
        color: #FFEB66;
        display: block;
    }

    .earn-stat small {
        font-size: 10px;
        color: rgba(255,255,255,0.55);
        display: block;
        margin-top: 3px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }
.pricing-row1 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

.pricing-card {
    background: #ffffff;
    border: 1px solid #e8ecf0;
    border-radius: 14px;
    padding: 22px 16px;
    text-align: center;
    transition: box-shadow 0.2s ease;
}

    .pricing-card:hover {
        box-shadow: 0 4px 16px rgba(0,0,0,0.07);
    }

    .pricing-card.highlight {
        border: 2px solid #00446c;
    }

.pricing-icon {
    font-size: 24px;
    color: #0083be;
    margin-bottom: 10px;
    display: block;
}

.pricing-amount {
    font-family: 'Proza Libre', sans-serif;
    font-size: 26px;
    font-weight: 800;
    color: #00446c;
    display: block;
    margin: 4px 0 8px;
}

.pricing-lbl {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.5;
}

/* ── Support Card ── */
.support-card {
    background: #ffffff;
    border: 1px solid #e8ecf0;
    border-radius: 14px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 14px;
}

.support-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.support-icon-box {
    width: 46px;
    height: 46px;
    background: #00446c;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .support-icon-box i {
        font-size: 22px;
        color: #ffffff;
    }

.support-text h4 {
    font-family: 'Proza Libre', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 4px;
}

.support-text p {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
}

.support-contacts {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.contact-pill {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: #374151;
    background: #f5f6fa;
    border: 1px solid #e2e6ea;
    border-radius: 20px;
    padding: 7px 16px;
    text-decoration: none;
    transition: background 0.15s ease;
}

    .contact-pill:hover {
        background: #e8ecf0;
        color: #374151;
        text-decoration: none;
    }

    .contact-pill i {
        font-size: 14px;
        color: #0083be;
    }

/* ── CTA Final ── */
.cta-final11 {
    background: #001e30;
    border-radius: 14px;
    padding: 24px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cta-final-text h3 {
    font-family: 'Proza Libre', sans-serif;
    font-size: 18px;
    font-weight: 800;
    color: #FFEB66;
    margin: 0 0 5px;
}

.cta-final-text p {
    font-size: 13px;
    color: #FFEB66;
    margin: 0;
}

.cta-btn11 {
    background: #00446c;
    color: #FFEB66;
    border: none;
    border-radius: 10px;
    padding: 13px 26px;
    font-family: 'Proza Libre', sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none;
    display: inline-block;
    transition: background 0.15s ease;
}

    .cta-btn11:hover {
        background: #00446c;
        color: #FFffff;
        text-decoration: none;
    }

/* ── Responsive ── */
@media (max-width: 680px) {
    .tv-hero {
        padding: 36px 20px 28px;
    }

    .tv-stats {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .pricing-row {
        grid-template-columns: 1fr;
    }

    .earning-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .earn-stats-row {
        display: flex;
        gap: 10px;
        width: 100%;
    }

    .earn-stat {
        flex: 1;
    }

    .support-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .cta-final11 {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
}
.services-section {
    line-height: 1.6;
    padding: 40px 0;
    color: #070606;
    background: #fff
}

.whtbox1 {
    background: #fff;
    padding: 16px;
    height: 100%;
    box-shadow: 0 2px 12px rgba(0,121,169,0.10);
    border: 0.5px solid #c0dff0;
    border-radius: 14px;
    transition: box-shadow 0.2s ease;
}

    .whtbox1:hover {
        box-shadow: 0 6px 20px rgba(0,121,169,0.15);
    }
/* Main outer container using flexbox instead of rigid grid tracks */
.values-grid-container {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    max-width: 960px;
    margin: 35px auto 0;
    padding: 0 15px;
    box-sizing: border-box;
    justify-content: center; /* This natively centers the last 2 cards on the bottom row! */
}

/* Individual Card Frame */
.value-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    border: 1px solid #0079A9;
    border-radius: 12px;
    background-color: #ffffff;
    box-sizing: border-box;
    text-align: left;
    /* Responsive width logic using flex-basis */
    flex: 1 1 100%; /* Default 1 full column layout on mobile */
    max-width: 100%;
    box-shadow: inset 0 0 5px rgba(0, 121, 169, 0.25), -16px 14px 10px -7px rgba(0, 0, 0, 0.15);
    transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}

    .value-card:hover {
        transform: translateY(-4px);
        box-shadow: inset 0 0 6px rgba(0, 121, 169, 0.35), 0 12px 24px rgba(0, 0, 0, 0.12);
    }

/* Stable background circle wrapper for icon */
.value-icon-box {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid #0079A9;
    background-image: radial-gradient(#ffffff, #f0f7ff, #0079A9);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
    margin: 0;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

    .value-icon-box i {
        font-size: 18px !important;
        color: #10106e !important;
        display: block !important;
        line-height: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

.value-card:hover .value-icon-box {
    box-shadow: 0 4px 10px rgba(0, 121, 169, 0.4);
    transform: scale(1.05);
}

/* Text Content Isolation Box */
.value-text-box {
    flex: 1;
    display: block;
    margin: 0;
    padding: 0;
}

    .value-text-box strong {
        font-size: .75rem !important;
        font-weight: 700;
        color: #04044d !important;
        display: block !important;
        margin: 0 0 6px 0 !important;
        line-height: 1.3;
    }

    .value-text-box p {
        font-size: 0.6rem !important;
        color: #070606 !important;
        display: block !important;
        margin: 0 !important;
        line-height: 1.5;
    }

/* ==========================================================================
   RESPONSIVE BREAKPOINTS (Fluid Sizing Framework)
   ========================================================================== */

/* Tablet View: Exact 2 Column layout splits */
@media (min-width: 768px) {
    .value-card {
        flex: 0 1 calc((100% - 24px) / 2);
        max-width: calc((100% - 24px) / 2);
    }
}

/* Desktop View: Exact 3 Column layout splits */
@media (min-width: 1200px) {
    .value-card {
        flex: 0 1 calc((100% - 48px) / 3);
        max-width: calc((100% - 48px) / 3);
    }
}

/* Mobile Clean-ups */
@media (max-width: 576px) {
    .values-grid-container {
        gap: 16px;
        padding: 0 10px;
    }

    .value-card {
        padding: 16px;
        gap: 12px;
    }

    .value-icon-box {
        width: 44px;
        height: 44px;
    }

        .value-icon-box i {
            font-size: 15px !important;
        }
}
.info-container {
    padding: 20px 20px 20px 20px;
    border-radius: 10px 10px 10px 10px;
    background: #e8f8ff;
    box-shadow: inset 0 0 5px #0079A9, -16px 14px 10px -7px rgba(0, 0, 0, 0.2);
}

.info-item {
    width: 100%;
    background: radial-gradient(#00446c,#000);
    margin-bottom: 20px;
    padding: 10px 10px 10px 10px;
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 600
}

.info-item1 {
    width: 100%;
    background: radial-gradient(#007a74,#011e22);
    margin-bottom: 20px;
    padding: 10px 10px 10px 10px;
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 600
}

.info-item:last-child {
    margin-bottom: 0
}

.info-item i {
    font-size: 20px;
    color: #fff;
    float: left;
    width: 44px;
    height: 44px;
    background-color: rgb(255 255 255 / .2);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    transition: all .3s ease-in-out;
    margin-right: 15px
}

.info-item h4 {
    padding: 0;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 5px;
    color: #fff
}

.info-item p {
    padding: 0;
    margin-bottom: 0;
    font-size: 15px;
    font-weight: 500;
    color: #fff
}

.info-item:hover i {
    background: #011e22;
    color: #4AE6D8
}

@keyframes animate-loading {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}
.form-container {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgb(0 0 0 / .1)
}

.form-row {
    margin-bottom: 5px;
    display: flex;
    flex-direction: column
}

.form-label {
    margin-bottom: 5px;
    font-weight: 600;
    color: #fff;
    font-size: 14px
}

.form-input {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    width: 80%;
    box-sizing: border-box
}

    .form-input:focus {
        border-color: #007bff;
        outline: none;
        box-shadow: 0 0 5px rgb(0 123 255 / .5)
    }

.form-button {
    width: 50%;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer
}

    .form-button:hover {
        background-color: #0056b3
    }

@keyframes fadeUpIn {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-up-row .fade-up-item {
    opacity: 0;
}

.fade-up-row.triggered .fade-up-item {
    animation: fadeUpIn 0.6s ease forwards;
}

    .fade-up-row.triggered .fade-up-item:nth-child(1) {
        animation-delay: 0.0s;
    }

    .fade-up-row.triggered .fade-up-item:nth-child(2) {
        animation-delay: 0.15s;
    }

    .fade-up-row.triggered .fade-up-item:nth-child(3) {
        animation-delay: 0.30s;
    }

    .fade-up-row.triggered .fade-up-item:nth-child(4) {
        animation-delay: 0.45s;
    }

    .fade-up-row.triggered .fade-up-item:nth-child(5) {
        animation-delay: 0.60s;
    }
/* zCartify Platform Page Core Styles */
.zc-teardown-wrapper {
    background-color: #0d151c;
    color: #f8f9fa;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    padding: 80px 0;
}

.zc-section-title {
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #ffffff;
}

.zc-accent-text {
    color: #10b981; /* Emerald Green for stable transactional accents */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.85rem;
}

/* Architecture Viewport Cards */
.zc-blueprint-card {
    background: linear-gradient(145deg, #111e29, #0a121a);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

    .zc-blueprint-card:hover {
        border-color: rgba(16, 185, 129, 0.4);
        box-shadow: 0 15px 40px rgba(16, 185, 129, 0.1);
    }

/* Interactive Tabs styling */
.zc-tab-pill {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #a0aec0 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 6px !important;
    font-weight: 600;
    transition: all 0.2s ease;
}

    .zc-tab-pill.active {
        background: #10b981 !important;
        color: #ffffff !important;
        border-color: #10b981 !important;
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
    }

/* Hotspot Overlays */
.zc-hotspot-marker {
    position: absolute;
    width: 24px;
    height: 24px;
    background: #10b981;
    border: 4px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: zcPulse 2s infinite;
}

@keyframes zcPulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}
.zc-edition-badge {
    background: #e0e7ff;
    color: #4338ca;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 10px;
}

.zc-value-pill {
    background: #fdf2e9;
    border: 1px dashed #ea580c;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
}