@font-face {
    font-family: Flyshopfont;
    src: url(../../assets/fonts/fonts/Nunito/Nunito-VariableFont_wght.ttf);
}
* {
    margin: 0;
    padding: 0;
    font-family: Flyshopfont;
}
:root {
    --themecolor: #09b598;
    --secondrycolor: #2f6c8d;
    --whitecolor: #fff;
    --blackcolor: #000;
    --grey: #6e6e74;
    --darkgrey: #282829;
    --bordergrey: #dddde2;
    --lightgrey: #eef0f9;
    --seagreen: #70bb7f;
    --darkgreen: #4e8359
}

.btn:hover {
    color: #fff
}

.btn:focus {
    box-shadow: none
}

.btn:focus-visible {
    box-shadow: none;
    outline: none
}

.navbar {
    position: relative;
    background: #fff;
    z-index: 9;
    padding:0px;
    height:65px;
}
.navbar .container-xl{height:100%;}

.navbar-light .navbar-brand {
    background: #fff;
    border-radius: 50px;
    padding-bottom: 12px;
    display: flex;
    justify-content: center;
    padding: 0;
}

/* .navbar-nav .nav-item {
    padding: 0 10px
} */

.navbar-light .navbar-nav .nav-link {
    color: rgb(0 0 0 / 80%) !important;
    font-weight: 500;
    height: 100%;
    display: flex;
    /* flex-direction: column; */
    justify-content: center;
    padding: 10px 10px;
    position: relative;
    /* flex-direction:column; */
    align-items:center;
}

.forspa {
    text-align: left;
    font-size: 13px;
    color: #000;
}

.topinforight {
    text-align: right;
    display: flex;
    justify-content: right;
    gap: 30px
}

.toolbar-area {
    background: #fff;
    overflow: hidden;
    max-height: 12rem;
    opacity: 1;
    transition:
        max-height 0.42s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.32s ease,
        padding-block 0.32s ease,
        border-bottom-width 0.32s ease;
}

.fs-topbar {
    position: relative;
    background: #ffffff;
    border-bottom-color: #eceff3 !important;
}

.fs-topbar .fs-topbar__inner {
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.fs-topbar .fs-topbar__offer {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    color: #4e5b62;
    font-weight: 500;
}

.fs-topbar .fs-topbar__offer-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #1f8b7e;
    box-shadow: none;
}

.fs-topbar .fs-topbar__contacts {
    display: flex;
    align-items: center;
    gap: 0;
}

.fs-topbar .fs-topbar__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 12px;
    min-height: 24px;
    border-radius: 0;
    border: 0;
    background: transparent;
    color: #5f6b72;
    font-size: 14px;
    text-decoration: none;
    transition: color .18s ease;
}

.fs-topbar .fs-topbar__link+.fs-topbar__link {
    border-left: 1px solid #e3e8ee;
}

.fs-topbar .fs-topbar__link i {
    color: #6c7881;
    font-size: 14px;
}

.fs-topbar .fs-topbar__link:hover {
    color: #172027;
}

.fs-topbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, rgb(31 139 126 / 0) 0%, rgb(31 139 126 / 36%) 50%, rgb(31 139 126 / 0) 100%);
}

@media (max-width: 1199.98px) {
    .fs-topbar .fs-topbar__offer {
        font-size: 11px;
    }

    .fs-topbar .fs-topbar__contacts {
        margin-right: -8px;
    }

    .fs-topbar .fs-topbar__link {
        padding: 0 8px;
        font-size: 11px;
    }
}

.navbar-light .navbar-nav .nav-link.active {
    color: #1f8b7e !important;
    font-weight: 700;
}
/* .navbar-light .navbar-nav .nav-link.active::after{
    content: '';
    position: absolute;
    bottom: -1px;
    height: 4px;
    width: 100%;
    background: #1f8b7e;
    left: 0;
    border-radius: 30px;
} */

.topinforight a {
    font-size: 13px;
    color: #707070;
    text-decoration: none;
    transition: 0.3s;
}

.topinforight a:hover {
    color: #282828;
}

.homeheading {
    text-align: left;
    color: #fff;
    width: 60%;
    padding-right: 50px
}

.blogheading {
    position: absolute;
    bottom: 21%;
    width: 100%;
    text-align: center;
    color: #fff;
    font-weight: 600;
    font-size: 28px;
}
.newbegimgcontent{
    background:url('../images/rated-bgnew.webp') no-repeat center;
    background-size: cover;
    padding: 50px 0px;
    border-radius: 40px;
    position: relative;
    z-index:1;
    overflow: hidden;
}

.hero {
    position: relative;
    border-bottom: 1px solid #ddd;
    z-index: 1;
    padding-top: 150px;
    padding-bottom: 66px;
}
.steps-inner-bg{
    position: absolute;
    z-index: -1;
    left: -25px;
    opacity: 51%;
    top: -23px;
}
.steps-inner-bg img{
    width: 83px;
    height: 90px;
}
.work-process{
    overflow: hidden;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 40px;
    align-items: center;
    overflow: hidden;
}

.badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgb(255, 255, 255);
    backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid #dddd;
    font-size: 12px;
    color: #363636;
}
.home-bg-back{
    position: absolute;
    bottom: 0;
    left: 0;
    z-index:-1;
}

.float-bob-x {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    left: 40%;
    line-height: 0;
    top: 22%;
    z-index: -1;
}

.float-bob-x img {
    display: block;
    width: 70px;
    height: auto;
    animation: float-bob-x-y 3.5s ease-in-out infinite alternate;
}

@keyframes float-bob-x-y {
    0% {
        transform: translateY(-18px);
    }

    100% {
        transform: translateY(36px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .float-bob-x img {
        animation: none;
        transform: none;
    }
}






.title {
    font-size:60px;
    line-height: 1.05;
    margin: 16px 0 10px;
    font-weight: 700;
}

.title--hanken {
    font-family: 'Hanken Grotesk', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: -0.02em;
}

.hero-type-line {
    display: block;
    margin-top: 0.06em;
    min-height: 1.1em;
}

.hero-type-gradient {
    background: linear-gradient(89deg, #08ab90 7.51%, #3365c7 94.39%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-type-gradient--static {
    display: block;
    margin-top: 0.06em;
}

.hero-type-fallback {
    display: none;
}

@media (scripting: none) {
    .hero-type-line {
        display: none;
    }

    .hero-type-fallback {
        display: block;
    }
}

.hero-type-caret {
    display: inline-block;
    width: 3px;
    height: 0.85em;
    margin-left: 4px;
    vertical-align: -0.05em;
    border-radius: 1px;
    background: #3365c7;
    animation: hero-type-caret-blink 1s step-end infinite;
}

@keyframes hero-type-caret-blink {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-type-caret {
        animation: none;
        opacity: 1;
    }
}

.subtitle {
    color: #484848;
    max-width: 60ch;
    font-size: 16px;
}

/* Hero CTAs: pill (brand) + play-circle link — reference layout, Flyshop colors */
.hero-ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    margin-top: 24px;
    max-width: 100%;
}

.cta.hero-ctas__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0;
    padding: 15px 32px 15px 36px;
    border: none;
    border-radius: 999px;
    background: #1f8b7e;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

.cta.hero-ctas__pill i {
    font-size: 15px;
    font-weight: 700;
    opacity: 0.95;
    letter-spacing: 0;
}


.cta.hero-ctas__pill:active {
    transform: translateY(0);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1) inset, 0 2px 8px rgba(7, 180, 159, 0.3);
}

.cta.hero-ctas__pill:focus-visible {
    outline: 2px solid #0d9488;
    outline-offset: 3px;
}

.hero-ctas__play {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: #0f172a;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    font-family: inherit;
    min-width: 0;
    transition: color 0.15s ease;
}

.hero-ctas__play:hover {
    color: #04716b;
}

.hero-ctas__play:hover .hero-ctas__play-title {
    color: #04716b;
}

.hero-ctas__play:hover .hero-ctas__play-hint {
    color: #0d9488;
}

.hero-ctas__play:hover .hero-ctas__play-ring {
    border-color: #07b49f;
    background: #f0fdfa;
}

.hero-ctas__play:focus-visible {
    outline: 2px solid #07b49f;
    outline-offset: 4px;
    border-radius: 8px;
}

.hero-ctas__play-ring {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid #0f172a;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.hero-ctas__play-ring .fa-play {
    font-size: 15px;
    color: #0f172a;
    margin-left: 3px;
}

.hero-ctas__play-label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    min-width: 0;
}

.hero-ctas__play-title {
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.25;
}

.hero-ctas__play-hint {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
    letter-spacing: 0.01em;
    line-height: 1.3;
}

@media (max-width: 480px) {
    .hero-ctas {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .cta.hero-ctas__pill {
        font-size: 10px;
        padding: 10px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .cta.hero-ctas__pill,
    .cta.hero-ctas__pill:hover,
    .cta.hero-ctas__pill:active {
        transform: none;
    }
}

.cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 8px;
    background: #07b49f;
    font-weight: 700;
    border: none;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
}

.metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 14px;
}

.ghost {
    padding: 10px 16px;
    border-radius: 14px;
    background: transparent;
    border: 1px solid #cbd5e1;
    color: var(--themecolor);
    text-decoration: none;
}

.homeheading h1 {
    font-size: 38px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 4rem;
    font-family: "Roboto Condensed", sans-serif;
    color: #0c544a;
    margin-bottom: 20px
}

.metric {
    padding: 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(98, 98, 98, 0.14)
}

.metric h3 {
    margin: 0;
    font-size: 20px;
    color: var(--themecolor);
}

.flxhomicon {
    gap: 10px;
    margin-top:25px;
    margin-bottom:20px;
}

.metric p {
    margin: 6px 0 0;
    color: #000;
    font-size: 12px;
}

/* Hero — lime “services” metric cards (3 per row, marquee bars) */

.hero-svc {
    --hero-svc-lime: #c8ff4a;
    --hero-svc-lime-dark: #7ccf00;
    --hero-svc-lime-ink: #1a2e05;
}


.hero-svc__title {
    margin: 10px 0 0;
    font-size: 25px;
    font-weight: 700;
    color: #0f0f0f;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.hero-svc__title-em {
    color: #2e6dc0;
}

.help-hero-wave {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
}

.help-hero-wave-img {
    position: absolute;
    right: 0;
    top: 15%;
    width: min(95vw, 980px);
    height: auto;
    max-height: min(110%, 460px);
    opacity: 0.92;
}


.hero-svc__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px 16px;
    margin-top: 16px;
}

.hero-svc-card {
    position: relative;
    background: #fff;
    border-radius: 20px;
    padding: 10px 10px;
    height: 120px;
    border: 1px solid #ddd;
    text-align: left;
    box-shadow: 8px 8px 0 0 rgba(3, 24, 17, 0.08);
    overflow: hidden;
    --card-blob-1: rgba(8, 171, 145, 0.07);
    --card-blob-2: rgba(46, 109, 192, 0.05);
    --deco-icon: #08ab91;
}

.hero-svc-card::before,
.hero-svc-card::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.hero-svc-card::before {
    width: 76px;
    height: 76px;
    right: -22px;
    bottom: -24px;
    background: var(--card-blob-1);
}

.hero-svc-card::after {
    width: 56px;
    height: 56px;
    right: 30px;
    bottom: 4px;
    background: var(--card-blob-2);
}

.hero-svc-card--accent-hotel {
    --card-blob-1: rgba(220, 90, 80, 0.09);
    --card-blob-2: rgba(255, 190, 175, 0.06);
    --deco-icon: #d9534f;
}

.hero-svc-card--accent-server {
    --card-blob-1: rgba(46, 109, 192, 0.08);
    --card-blob-2: rgba(130, 170, 230, 0.06);
    --deco-icon: #2e6dc0;
}

.hero-svc-card--accent-bolt {
    --card-blob-1: rgba(212, 160, 0, 0.09);
    --card-blob-2: rgba(255, 220, 120, 0.07);
    --deco-icon: #c9a227;
}

.hero-svc-card--accent-rupee {
    --card-blob-1: rgba(5, 122, 85, 0.08);
    --card-blob-2: rgba(120, 200, 160, 0.06);
    --deco-icon: #0a7d55;
}

.hero-svc-card--accent-gauge {
    --card-blob-1: rgba(8, 145, 178, 0.08);
    --card-blob-2: rgba(140, 210, 230, 0.06);
    --deco-icon: #0891b2;
}

.hero-svc-card--accent-shield {
    --card-blob-1: rgba(91, 80, 180, 0.08);
    --card-blob-2: rgba(180, 170, 230, 0.06);
    --deco-icon: #5b4fb3;
}

.hero-svc-card__pill {
    position: absolute;
    top: 20px;
    left: -5px;
    width: 5px;
    height: 28px;
    border-radius: 10px;
    background: #08ab91;
    z-index: 1;
}

.hero-svc-card__deco {
    position: absolute;
    right: 0;
    bottom: -4px;
    z-index: 0;
    font-size: clamp(2.2rem, 3.2vw, 2.9rem);
    line-height: 1;
    color: var(--deco-icon);
    opacity: 0.05;
    pointer-events: none;
    transform: translate(10%, 14%);
}

.hero-svc-card__deco i {
    display: block;
}

.hero-svc-card__title {
    position: relative;
    z-index: 1;
    margin: 0 0 8px;
    font-size:20px;
    font-weight: 800;
    color: #0f0f0f;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.hero-svc-card__desc {
    position: relative;
    z-index: 1;
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.5;
    color: #3d3d3d;
    font-weight: 500;
}

.hero-svc-card__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #111;
    text-decoration: none;
}

.hero-svc-card__more i {
    font-size: 12px;
    color: var(--hero-svc-lime-dark);
}

.hero-svc-card__more:hover {
    color: var(--hero-svc-lime-dark);
}

.hero-svc__cta {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0;
    width: auto;
    max-width: 100%;
    margin-top: 20px;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    border: none;
    border-radius: 12px;
    background: #fff;
    color: #1e293b;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.3;
    box-shadow: 0 0 0 1px #e2e8f0, 0 4px 16px rgba(15, 23, 42, 0.07);
    overflow: hidden;
    text-align: left;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
    cursor: pointer;
}

.hero-svc__cta::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 48px;
    height: 1px;
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.12) 0%, rgba(15, 23, 42, 0.04) 100%);
    pointer-events: none;
    z-index: 2;
}

.hero-svc__cta:hover {
    color: #0f172a;
    background: #f8fafc;
    box-shadow: 0 0 0 1px #cbd5e1, 0 8px 24px rgba(15, 23, 42, 0.1);
    transform: translateY(-1px);
}

.hero-svc__cta:active {
    transform: translateY(0);
    box-shadow: 0 0 0 1px #e2e8f0, 0 2px 8px rgba(15, 23, 42, 0.06);
}

.hero-svc__cta:focus-visible {
    outline: 2px solid #25d366;
    outline-offset: 3px;
    z-index: 1;
}

.hero-svc__cta-wa {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    flex-shrink: 0;
    background: #25d366;
    color: #fff;
    font-size: 1.28rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.hero-svc__cta-wa i {
    margin-top: 1px;
}

.hero-svc__cta-text {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    padding: 13px 18px 13px 16px;
    flex: 1;
    min-width: 0;
    background: #fff;
    box-shadow: inset 1px 0 0 #eef2f7;
}

.hero-svc__cta:hover .hero-svc__cta-wa {
    background: #20bd5a;
}

.hero-svc__cta:hover .hero-svc__cta-text {
    background: #f8fafc;
}

.hero-svc__cta-em {
    font-weight: 800;
    color: #0f9d58;
    margin-left: 0.1em;
}

@media (max-width: 400px) {
    .hero-svc__cta {
        width:fit-content;
        max-width: 100%;
    }

    .hero-svc__cta-text {
        font-size: 12px;
        padding-left: 12px;
        padding-right: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-svc__cta {
        transition: none;
    }

    .hero-svc__cta:hover,
    .hero-svc__cta:active {
        transform: none;
    }
}

@media (max-width: 991.98px) {
    .hero-svc__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero-svc__marquee-txt {
        white-space: normal;
        line-height: 1.4;
    }
}

@media (max-width: 575.98px) {
    .hero-svc__grid {
        grid-template-columns: 1fr 1fr;
    }
}

.homebaanercontent {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    padding: 150px 80px 20px 80px;
    --asc-bg-size: 56rem;
    --asc-bg-x-offset: -28rem;
    --asc-bg-y-offset: -28rem;
    position: relative;
    z-index: 1;
    overflow: hidden;
    background: linear-gradient(129deg, #ffffff, #9dccfc);
}

.homerightthemeslide {
    text-align: center
}

.homerightthemeslide {
    width: 575px;
    height: 356px;
    margin: auto;
    background: url(/assets/images/laptopimg.png) no-repeat center;
    background-size: cover;
    padding: 30px 71px 55px
}

.homethemes img {
    width: 100%;
    height: 270px
}

.homemobileslidcard {
    margin: auto;
    width: 388px;
    height: 382px;
    background: url(/assets/images/mobilepng.png) no-repeat;
    background-size: cover;
    padding: 21px 112px 15px 109px;
    position: absolute !important;
    right: -14px;
    top: 44px;
    text-align: center;
    overflow: hidden
}

.mobslidbox {
    width: 100%;
    height: 300px;
    margin: auto
}

.mobslidbox img {
    width: 100%;
    height: 342px;
    border-radius: 19px
}

.homerightslidecontent {
    width: 40%;
    position: relative
}

.homeplaneline {
    top: 22%;
    position: absolute;
    width: 90%;
    z-index: -1;
    right: 100px
}

.showmore-box p {
    font-size: 16px;
    max-width: 1000px;
}

/* Why Choose Us — clean two-column (text + 2-col benefits | image) */


.why-choose-split__text {
    padding-top: 0.25rem;
    padding-bottom: 0.5rem;
}

.why-choose-split__title {
    font-size: clamp(1.75rem, 3.5vw, 2.35rem);
    font-weight: 700;
    color: #111;
    margin: 0 0 1rem;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.why-choose-split__lead {
    font-size:16px;
    line-height: 1.65;
    color: #6b6b6b;
    max-width: 36em;
    margin: 0 0 2.25rem;
}

.why-choose-benefits {
    --why-benefit-gap-y: 1.75rem;
    --why-benefit-gap-x: 1.25rem;
}

@media (min-width: 768px) {
    .why-choose-benefits > .col:last-child {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
}

/* Alert-style benefit cards (icon + copy, no dismiss) */
.why-benefit {
    --wb-icon-bg: #e0f2fe;
    --wb-icon: #2563eb;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    height: 100%;
    margin: 0;
    padding: 15px 15px;
    background: #fff;
    border: 1px solid #e8e8ec;
    border-radius: 14px;
    transition: box-shadow 0.22s ease, transform 0.22s ease;
    max-width: none;
    box-shadow: -6px 6px 0px 0px rgba(3, 24, 17, 0.08);
}


.why-benefit--info {
    --wb-icon-bg: #e0f2fe;
    --wb-icon: #2563eb;
}

.why-benefit--warning {
    --wb-icon-bg: #ffedd5;
    --wb-icon: #ea580c;
}

.why-benefit--success {
    --wb-icon-bg: #dcfce7;
    --wb-icon: #16a34a;
}

.why-benefit--danger {
    --wb-icon-bg: #fee2e2;
    --wb-icon: #dc2626;
}

.why-benefit__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--wb-icon-bg);
    color: var(--wb-icon);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    line-height: 1;
}

.why-benefit__body {
    flex: 1;
    min-width: 0;
}

.why-benefit__title {
    font-size:16px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 0.35rem;
    line-height: 1.35;
}

.why-benefit__desc {
    font-size: 14px;
    line-height: 1.55;
    color: #666;
    margin: 0;
}

.why-choose-media {
    position: relative;
    height: 100%;
    min-height: 330px;
    border-radius: 20px;
    overflow: hidden;
}

.why-choose-media__img {
    width: 100%;
    height: 100%;
    min-height: 330px;
    object-fit: cover;
    display: block;
    border-radius: 0;
    transition: transform 0.38s ease, filter 0.38s ease, opacity 0.38s ease;
}

.why-choose-media__cta {
    position: absolute;
    left: 5%;
    bottom: 5%;
    z-index: 2;
    transition: filter 0.3s ease;
}

.why-choose-media__cta .btn {
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: #2f6b92;
    font-size: 0.9375rem;
    padding: 0.65rem 1.1rem;
    border-radius: 4px;
    transition: background 0.2s ease, transform 0.2s ease;
}

.why-choose-media__cta .btn:hover {
    color: #fff;
    background: #254f6e;
}

.why-choose-media__cta .btn i {
    transition: transform 0.25s ease;
}

.why-choose-media__cta .btn:hover i {
    transform: translateX(4px);
}

/* Why Choose — CTA (split block: cream + ink bar; not a pill gradient) */
.why-choose-media__cta .btn.why-choose-cta {
    padding: 0;
    gap: 0;
    overflow: hidden;
    align-items: stretch;
    border: 1.5px solid #121c1c;
    border-radius: 3px;
    background: #f4f0e8;
    color: #121c1c;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    box-shadow: 4px 4px 0 #121c1c;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.why-choose-cta__txt {
    padding: 0.7rem 0.65rem 0.7rem 0.85rem;
    align-self: center;
}

.why-choose-cta__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.65rem;
    background: #121c1c;
    color: #f4f0e8;
    font-size: 0.95rem;
}

.why-choose-media__cta .btn.why-choose-cta:hover {
    color: #121c1c;
    background: #fffdf7;
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 #121c1c;
}

.why-choose-media__cta .btn.why-choose-cta:hover .why-choose-cta__ico {
    background: #0a5c54;
    color: #f4faf9;
}

.why-choose-media__cta .btn.why-choose-cta:hover i {
    transform: none;
}

/* Image area hover / keyboard focus → background recedes, CTA grabs attention */
.why-choose-media:hover .why-choose-media__img,
.why-choose-media:focus-within .why-choose-media__img {
    transform: scale(1.03);
    filter: brightness(0.66) saturate(0.92);
}

.why-choose-media:hover .why-choose-media__cta .btn.why-choose-cta,
.why-choose-media:focus-within .why-choose-media__cta .btn.why-choose-cta {
    transform: translate(-4px, -5px) scale(1.06);
    box-shadow:
        8px 8px 0 #121c1c,
        0 0 0 3px rgba(244, 240, 232, 0.95),
        0 14px 36px rgba(0, 0, 0, 0.22);
    position: relative;
    z-index: 3;
}

.why-choose-media__cta .btn.why-choose-cta:focus-visible {
    outline: 3px solid #0a5c54;
    outline-offset: 5px;
}

@media (min-width: 992px) {
    .why-choose-media {
        min-height: 410px;
    }

    .why-choose-media__img {
        min-height: 390px;
    }
}

.bookdemotop {
    display: none
}

.bookdemotop {
    display: none;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 6px 14px 6px 8px;
    border-radius: 30px;
    border: 1px solid #e7e9ee;
    background: #1f8b7e;
    color: #6f7480;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 8px rgb(18 25 38 / 7%);
    transition: background-color .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease, transform .22s ease;
}

.bookdemotop:hover {
    color: #ffffff;
    background: #0f4162;
    border-color: #0f4162;
    /* box-shadow: 0 8px 16px rgb(18 25 38 / 12%); */
    transform: translateY(-1px);
}

.bookdemotop .bookdemotop-icon {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d6dce6;
    background: #fff;
    color: #1f8b7e;
    transition: transform .26s ease, color .22s ease, border-color .22s ease, background-color .22s ease;
}

.bookdemotop .bookdemotop-label {
    letter-spacing: 0.01em;
    font-size: 14px;
}

.bookdemotop:hover .bookdemotop-icon {
    color: #646a75;
    border-color: #c5ccd7;
    background: #fbfcff;
    animation: bookDemoIconLive .8s cubic-bezier(.22, .61, .36, 1);
}

@keyframes bookDemoIconLive {
    0% {
        transform: translateY(0) scale(1) rotate(0deg);
    }

    35% {
        transform: translateY(-2px) scale(1.06) rotate(-7deg);
    }

    70% {
        transform: translateY(1px) scale(0.98) rotate(4deg);
    }

    100% {
        transform: translateY(0) scale(1) rotate(0deg);
    }
}

.fixed-header .topagentlogin {
    display: block
}

.fixed-header .toploginbtn {
    display: none
}

.highlight {
    background: var(--1, linear-gradient(89deg, #08ab90 7.51%, #3365c7 94.39%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: #fff0;
    font-feature-settings: "liga" off, "clig" off
}

.fixed-header .bookdemotop {
    display: inline-flex
}


.topagentlogin {
    padding: 8px 15px;
    background: transparent;
    font-weight: 600;
    color: #07b49f !important;
    border: 2px solid #07b49f !important;
    transition: all 0.3s ease-in-out;
    text-transform: capitalize;
    position: relative;
    z-index: 1;
    font-size: 12px;
    border-radius: 8px;
    border: none;
    overflow: hidden;
}

.topagentlogin i {
    transition: 0.3s;
}

.topagentlogin:hover i {
    margin-left: 8px;
    position: relative;
}

@media (min-width: 769px) {
    header.fixedheadtop .topheaderflx .topagentlogin {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 4px 6px 4px 14px;
        min-height: 40px;
        border-radius: 999px;
        background: #ffffff;
        color: #101318 !important;
        border: 1px solid #0f4162 !important;
        text-transform: none;
        font-weight: 650;
        /* box-shadow: 0 6px 16px rgb(16 19 24 / 10%); */
        transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
    }

    header.fixedheadtop .topheaderflx .topagentlogin:hover {
        background: #fbfcfe;
        border-color: #123349 !important;
        transform: translateY(-1px);
        /* box-shadow: 0 10px 22px rgb(16 19 24 / 14%); */
    }

    header.fixedheadtop .topheaderflx .topagentlogin .topagentlogin-label {
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
        font-size: 14px;
    }

    header.fixedheadtop .topheaderflx .topagentlogin .topagentlogin-icon {
        width: 34px;
        height: 34px;
        border-radius: 30px;
        background: #0f4162;
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 34px;
        box-shadow: inset 0 0 0 1px rgb(255 255 255 / 8%);
    }

    header.fixedheadtop .topheaderflx .topagentlogin .topagentlogin-icon i {
        margin: 0;
        transition: transform .2s ease;
        transform: rotate(0deg);
        
    }

    header.fixedheadtop .topheaderflx .topagentlogin:hover .topagentlogin-icon i {
        margin-left: 0;
        transform: translateX(2px);
        transform: rotate(-50deg);
    }
}

.dtr-post-content .toggle-more {
    background: var(--1, linear-gradient(89deg, #08ab90 7.51%, #3365c7 94.39%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: #fff0;
    font-feature-settings: "liga" off, "clig" off
}

.dtr-post-content .toggle-more i {
    margin-right: 0;
    opacity: 0;
    width: 0;
    transition: margin-right 0.3s ease, opacity 0.3s ease, width 0.3s ease, margin-left 0.3s ease
}

.dtr-post-content .toggle-more:hover i {
    margin-right: 12px;
    opacity: 1
}

.blogtopbannerimg {
    background-image: url(/assets/blogimage/bannerimg.webp);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 270px;
    position: relative
}

.blogoverlay {
    position: absolute;
    top: 0;
    background-color: #111;
    opacity: .42;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
    width: 100%;
    height: 100%
}

/* Blog List Premium Card Design */
.bloglistcardflx {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 1px solid #ddd;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.bloglistcardflx:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.bloglistcardflx img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    margin-bottom: 0;
    transition: transform 0.6s ease;
}

.bloglistcardflx:hover img {
    transform: scale(1.05);
}

.bloglistimg-wrapper {
    overflow: hidden;
    position: relative;
    height: 190px;
}

.bloglistcontent {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.bloglistcontent a {
    color: #1a1a1a;
    text-decoration: none;
    font-size: 18px;
    line-height: 1.4;
    transition: all 0.3s ease;
    font-weight: 700;
    margin-bottom: 5px;
    display: block;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
}

.bloglistcontent a:hover {
    color: var(--themecolor);
    background: none;
    -webkit-text-fill-color: inherit;
    background-clip: border-box;
}

.bloglistcontent p {
    font-size: 14px;
    color: #666;
    margin-top: 0;
    line-height: 1.6;
    margin-bottom: 10px;
    flex-grow: 1;
}

.read-more-link {
    font-size: 14px !important;
    font-weight: 600;
    color: var(--themecolor);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    margin-top: auto;
}

.read-more-link i {
    transition: transform 0.3s ease;
}

.read-more-link:hover i {
    transform: translateX(4px);
}

.bloglistsection {
    position: relative;
    padding:50px 0px;
}

.leftshadeimg {
    position: absolute;
    top: -150px;
    left: 0;
    z-index: -1
}

.bannerbtn {
    display: flex;
    justify-content: left;
    gap: 15px;
    margin-bottom: 15px
}

.rightslidecontent h2 {
    font-size: 2.4rem;
    color: #fff;
    line-height: 1.1;
    font-weight: 600;
    margin-bottom: 30px
}

.toploginbtn {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: #1f8b7e;
    padding: 10px 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    position: relative;
    z-index: 1;
    text-transform: none;
    gap: 8px;
    border: 1px solid #1f8b7e;
    min-height: 40px;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
    /* box-shadow: 0 4px 12px rgb(16 19 24 / 15%) */
}

.toploginbtn-icon {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.toploginbtn-icon i {
    font-size: 14px;
}



/* .toploginbtn:hover::before {
    left: 4px;
} */

.toploginbtn .toploginbtn-part {
    display: inline-flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    /* padding: 0 14px; */
    font-size: 14px;
    letter-spacing: .01em;
    position: relative;
    z-index: 1;
    transition: color .22s ease;
}

.toploginbtn .toploginbtn-part--login {
    color: #fff;
}

.toploginbtn .toploginbtn-part--signup {
    color: #101318;
}

.toploginbtn:hover .toploginbtn-part--login {
    color: #fff;
}

.toploginbtn:hover .toploginbtn-part--signup {
    color: #000;
}

.toploginbtns a {
    text-decoration: none;
    color: #fff;
}

.dtr-post-content h4 {
    line-height: 20px;
}

.toploginbtns {
    display: flex;
    gap: 1rem;
}

.getstartedbtn {
    position: relative;
    overflow: hidden;
    border: 2px solid var(--themecolor);
    color: var(--themecolor);
    display: inline-block;
    font-size: 15px;
    line-height: 15px;
    padding: 10px 10px 10px;
    text-decoration: none;
    cursor: pointer;
    background: #fff;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    border-radius: 5px;
}

.homeslidgifcontent {
    width: 100%;
    height: 555px;
    margin-bottom: 70px
}

.homeslidgifcontent img {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    filter: drop-shadow(7px 7px 7px rgb(0 0 0 / .5))
}

.homedashboard {
    margin-top: 50px
}

.clipslidbox {
    clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 100% 0%);
    height: 150px;
    background-color: #fff;
    width: 100%;
    position: absolute;
    bottom: -1px
}

.ourflightslides .p-2 {
    height: auto;
    padding: 20px 20px !important
}

.sectionpadding {
    padding: 80px 0;
}

.titleheading {
    margin-bottom: 30px;
    text-align: center;
}
.badge-pill{
    margin-bottom: 12px;
    display: block;
    font-size: 15px;
}


.titleheading h2 {
   font-size:35px;
    line-height:1.08;
}

.titleheading p {
    font-size: 16px;
}

.flightbannerlside {
    border-radius: 10px;
    background: #fff;
}

.flightbannerlside img {
    height: 80px;
    width: 150px;
    margin: auto;
    object-fit: contain
}

.laptopimgfloat {
    width: 100%;
    margin: auto;
    text-align: center
}

.laptopimgfloat img {
    width: 700px;
    margin: auto
}

.youtubecontent {
    position: relative;
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 12px;
}

.mb-screen-wrap {
    max-width: 1030px;
    margin: 0 auto;
    padding:8px;
    border:1px dashed #fff;
    border-radius:20px;
}

.mb-screen-thumb {
    margin: 0.9rem auto 0;
    max-width: 320px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px -8px rgba(15, 23, 42, 0.25);
    line-height: 0;
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.mb-screen-thumb__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.mb-screen {
    position: relative;
    width: 100%;
    max-width: 1000px;
    height: auto !important;
    text-align: center;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: 20px;
    background: #1a1512;
    box-shadow: 0 24px 56px -16px rgba(15, 23, 42, 0.32), 0 0 0 1px rgba(15, 23, 42, 0.08);
}



/* Poster + play (Loume-style) — click to load iframe */
.mb-screen--cinema .mb-screen__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    transform: scale(1.01);
}

.mb-screen--cinema .mb-screen__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(195deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.2) 35%, rgba(0, 0, 0, 0.55) 100%);
    pointer-events: none;
}

.mb-screen--cinema .mb-screen__ui {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: 1.5rem;
    box-sizing: border-box;
    pointer-events: auto;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.mb-screen--cinema .mb-screen__play {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    min-width: 78px;
    min-height: 78px;
    border: none;
    border-radius: 50%;
    background: #fff;
    color: #0f172a;
    font-size: 1.5rem;
    padding: 0 0 0 4px;
    cursor: pointer;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mb-screen--cinema .mb-screen__play:hover {
    transform: scale(1.05);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
}

.mb-screen--cinema .mb-screen__play:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 4px;
}

.mb-screen--cinema .mb-screen__caption {
    margin: 0;
    max-width: 32ch;
    font-size: clamp(1.05rem, 0.2rem + 1.1vw, 1.25rem);
    font-weight: 500;
    line-height: 1.35;
    color: #fff;
    text-align: center;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
    letter-spacing: 0.01em;
}

.mb-screen--cinema .mb-screen__iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0;
    border: 0;
    border-radius: 20px;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.mb-screen--cinema.is-playing .mb-screen__poster,
.mb-screen--cinema.is-playing .mb-screen__veil {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.mb-screen--cinema.is-playing .mb-screen__ui {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.mb-screen--cinema.is-playing .mb-screen__iframe {
    z-index: 3;
    opacity: 1;
    pointer-events: auto;
}

.newbegimgcontent h2 {
    color: #fff;
}

.newbegimgcontent p {
    color: #fff;
    font-size: 14px
}

.service-box {
    margin-top: 10px;
    font-weight: 500
}

.hovanimate {
    transition: 0.3s;
    padding: 20px;
    border: 1px solid #ddd;
    text-align: center;
    border-radius: 20px
}

.hovanimate:hover {
    box-shadow: 0 8px 16px -2px rgb(32 33 36 / .06), 0 16px 32px -2px rgb(32 33 36 / .1)
}

.tp-rated-shape-2 {
    position: absolute;
    top: 10%;
    left: 4%;
    animation: circle-animations 3s ease-in-out 1s forwards infinite alternate;
    width: fit-content
}

.right-plane-box{
    position: absolute; right: -40px; width: fit-content; top: -6px;
}

.bottom-view-2{
  
}

.elementor img {
    height: auto;
    max-width: 100%;
    border: none;
    border-radius: 0;
    box-shadow: none
}

@keyframes circle-animations {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

.floating {
    animation-name: floating;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out
}

@keyframes floating {
    from {
        transform: translate(0, 0)
    }

    65% {
        transform: translate(0, 15px)
    }

    to {
        transform: translate(0, 0)
    }
}

.floatrighleft {
    animation-name: floatrighleft;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out
}

@keyframes floatrighleft {
    from {
        transform: translate(0, 0)
    }

    65% {
        transform: translate(15px, 0)
    }

    to {
        transform: translate(0, 0)
    }
}


.keybenifits h4 {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 30px;
    color: #0f172a;
}

/* Key benefits — vertical timeline (dotted line left, icons + text row) */
.keybenifits .benefit-list,
.keybenifits .benefit-list li {
    list-style: none;
}

.benefit-list {
    list-style: none;
    padding: 0 0 4px;
    margin: 0;
    position: relative;
}

.benefit-list::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 0px;
    bottom: 40px;
    width: 0;
    border-left: 2px dotted #c5cdd8;
    z-index: 0;
    pointer-events: none;
}

.benefit-list li {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 26px;
    position: relative;
    z-index: 1;
    text-align: left;
    transition: 0.3s ease;
}

.benefit-list li:last-child {
    margin-bottom: 0;
}

.benefit-list .icon {
    position: relative;
    z-index: 1;
    height: 35px;
    min-width: 35px;
    background: #1e293b;
    color: #fff;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    box-shadow: 0 0 0 4px #fff;
}

.benefit-list li > div {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.benefit-list strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
}

.benefit-list p {
    font-size: 14px;
    color: #64748b;
    margin: 6px 0 0;
    line-height: 1.6;
    text-align: left;
}

.leftdealsimg {
    text-align: center;
    position: relative;
    padding: 32px 30px;

}

.leftdealsimg .floatdeals {
    width: 480px;
    filter: drop-shadow(5px 2px 5px rgb(0 0 0 / .5))
}

.rightdealcotent .color-dark span {
    font-size: 23px;
    display: block;
    font-weight: 400
}

.keybenifits .flobeg-1 {
    position: absolute;
    top: -4%;
    right: 30px;
    z-index: -1
}

.showmore-content {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    transition: all 0.3s ease
}

.showmore-content.expanded {
    -webkit-line-clamp: unset;
    display: block
}

.showmore-btn {
    background-color: #001f4d;
    color: #fff;
    font-weight: 600;
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer
}

.rightdealcotent {
    padding-right: 40px;
}

.keybenifits ul li {
    font-size: 16px;
    margin-bottom: 10px;
    list-style: none;
    position: relative;
    list-style: decimal;
}

.flobeg-1 {
    animation-name: floatingimg2;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out
}

@keyframes floatingimg2 {
    from {
        transform: translate(0, 0)
    }

    65% {
        transform: translate(20px, 0)
    }

    to {
        transform: translate(0, 0)
    }
}

.flobeg-2 {
    position: absolute;
    top: 26%;
    left: 40px;
}

.flobeg-2 img {
    width: 140px;
}

.flobeg-1 {
    position: absolute;
    top: 28px;
    right: 64px;
}

.flobeg-1 img {
    width: 140px;
}

.flobeg-2 {
    animation-name: floatingimg2;
    animation-duration: 2.1s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out
}

.ourallthemeslide {
    width: 100%;
    flex: 0 0 35%;
    --theme-slide-duration: 5s;
}

@property --theme-progress-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.ourallthemeslide .slick-list {
    margin: 0;
}

.ourallthemeslide .slick-slide {
    height: auto;
}

.ourallthemeslide .slick-slide > div {
    padding: 8px 0;
}

.main-portfolio-box {
    display: flex;
    align-items: stretch;
    gap: 60px;
}

.main-portfolio-box.portfolio-theme-board {
    gap: 24px;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: nowrap;
}

@keyframes floatingimg2 {
    from {
        transform: translate(0, 0)
    }

    65% {
        transform: translate(20px, 0)
    }

    to {
        transform: translate(0, 0)
    }
}

.rightformimg {
    width: 50%;
    padding: 20px
}

.footer {
    background: #f3f5f8 !important;
    color: #1f2a37;
    /* padding: 50px 0 30px; */
    position: relative;
    z-index: 1;
}


.footer-card {
    background: #182744;
    color: #d8dde6;
    border-radius: 0px;
    padding: 44px 48px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
    position: relative;
    z-index:1;
}

.footer-card__top {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
    gap: 40px;
    align-items: start;
}

.footer-card__brand {
    max-width: 320px;
}

.footer-card__logo-link {
    display: inline-block;
    margin-bottom: 14px;
}

.footer-card__brand img {
    width: 130px;
    background: #fff;
    border-radius: 8px;
    padding: 4px 6px;
}

.footer-card__tagline {
    color: #aab1bc;
    font-size: 14px;
    line-height: 1.55;
    margin: 0 0 18px;
}

.footer-card__socials {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.footer-card__socials a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: #d8dde6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
}

.footer-card__socials a:hover {
    background: #2f6db1;
    color: #fff;
}

.footer-card__socials a:active {
    transform: scale(0.95);
}

.footer-card__heading {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 16px;
    letter-spacing: -0.01em;
}

.footer-card__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-card__links a {
    color: #aab1bc;
    text-decoration: none;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 500;
    transition: color 0.18s ease;
    background-image: linear-gradient(currentcolor, currentcolor);
    background-position: 0px 100%;
    background-repeat: no-repeat;
    background-size: 0px 1px;
    text-decoration: none;
    transition: background-size 0.3s;
}

.footer-card__links a:hover {
    color: #fff;
    background-size: 100% 1px;
}

.footer-card__newsletter-desc {
    color: #aab1bc;
    font-size: 16px;
    line-height: 1.55;
    margin: 0 0 14px;
}

.footer-card__newsletter-form {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 5px 5px 18px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.04);
    transition: border-color 0.18s ease, background 0.18s ease;
}

.footer-card__newsletter-form:focus-within {
    border-color: #2f6db1;
    background: rgba(255, 255, 255, 0.07);
}

.footer-card__newsletter-form input {
    flex: 1;
    min-width: 0;
    padding: 10px 4px;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 14px;
    font-family: inherit;
    outline: none;
}

.footer-card__newsletter-form input::placeholder {
    color: #7a838f;
}

.footer-card__newsletter-form button {
    flex-shrink: 0;
    padding: 9px 22px;
    border-radius: 999px;
    border: none;
    background: #2f6db1;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.3;
    transition: background 0.18s ease, transform 0.1s ease;
}

.footer-card__newsletter-form button:hover {
    background: #2660a0;
}

.footer-card__newsletter-form button:active {
    transform: translateY(1px);
}

.footer-card__razorpay {
    margin-top: 0px;
}

.footer-card__bottom {
    margin-top: 32px;
    padding-top: 22px;
    border-top: 1px solid rgb(255 255 255 / 42%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.footer-card__copyright {
    margin: 0;
    color: #dddddd;
    font-size: 14px;
    line-height: 1.5;
}

.footer-card__legal {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.footer-card__legal a {
    color: #dddddd;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.18s ease;
    background-image: linear-gradient(currentcolor, currentcolor);
    background-position: 0px 100%;
    background-repeat: no-repeat;
    background-size: 0px 1px;
    text-decoration: none;
    transition: background-size 0.3s;
}

.footer-card__legal a:hover {
    color: #fff;
    background-size: 100% 1px;
}

@media (max-width: 991.98px) {
    .footer-card {
        padding: 34px 28px;
        border-radius: 0px;
    }

    .footer-card__top {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }
}

@media (max-width: 575.98px) {
    /* .footer {
        padding: 30px 0 20px;
    } */

    .footer-card {
        padding: 26px 20px;
        border-radius: 0px;
    }

    .footer-card__top {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .footer-card__bottom {
        justify-content: flex-start;
        gap: 12px;
    }
}
.top-footer-box{
    position: absolute;
    left: 0;
    top: -1px;
    transform: rotate(180deg);
}
.top-footer-box img{
    width: 100%;
}

.bottom-footer-box{
    position: absolute;
    bottom: 0px;
    z-index: -1;
    width: 100%;
    left: 0;
}
.bottom-footer-box img{width:100%;}

.footer-bottom-bar {
    position: relative;
    padding: 16px 0;
    margin-top: 30px;
    z-index: 2;
    border-top: 1px solid #ddd;
}

.footer-bottom-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.footer-bottom-bar__socials,
.footer-bottom-bar__links {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.footer-bottom-bar__socials {
    gap: 10px;
}

.footer-bottom-bar__socials a {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #d9d9d9;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.18s ease, background 0.18s ease, transform 0.12s ease;
}

.footer-bottom-bar__socials a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.footer-bottom-bar__socials a:active {
    transform: scale(0.96);
}

.footer-bottom-bar__links {
    gap: 28px;
}

.footer-bottom-bar__links a {
    color: #cfcfcf;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    transition: color 0.18s ease;
}

.footer-bottom-bar__links a:hover {
    color: #fff;
}

@media (max-width: 575.98px) {
    .footer-bottom-bar {
        padding: 14px 0;
    }

    .footer-bottom-bar__inner {
        justify-content: center;
        text-align: center;
        gap: 14px;
    }

    .footer-bottom-bar__links {
        gap: 18px;
    }
}

.footer-left {
    max-width: 350px
}

.footer-left .logo {
    width: 140px;
    margin-bottom: 15px;
    padding: 5px 5px;
    background: #fff;
    border-radius: 10px;
}

.footer-left p {
    font-size: 16px;
    line-height: 1.6;
    margin: 5px 0;
    color: #fff;
}

.footer-left .copyright {
    margin-top: 10px;
    font-size: 15px
}

.footer-column h4 {
    font-size: 18px;
    margin-bottom: 12px;
    color: #ffffff;
    font-weight: 700;
}

.newsletter {
    position: relative;
}

.footer-column a {
    display: block;
    font-size: 16px;
    color: #fff;
    text-decoration: none;
    margin-bottom: 6px;
    transition: 0.3s;
    font-weight: 600;
}

.footer-column a:hover {
    color: #fff;
    margin-left: 8px;
}

.newsletter-box {
    display: flex;
    margin-bottom: 10px
}

.newsletter-box input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px 0 0 4px;
    flex: 1
}

.newsletter-box button {
    padding: 8px 16px;
    border: none;
    background-color: var(--themecolor);
    ;
    color: #fff;
    border-radius: 0 4px 4px 0;
    cursor: pointer
}

.social-icons {
    display: flex;
    gap: 10px;
    font-size: 18px;
    margin-top: 20px
}

.payment-logos {
    padding: 20px 0 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center
}

.payment-logos img {
    height: 28px
}

.footer-column {
    position: relative
}

/* .newsletter-box img {
    height: 140px;
    position: absolute;
    top: -140px;
    left: 163px;
} */

.app-slider {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}


.app-item {
    display: flex;
    align-items: center;
    border-radius: 50px;
    padding: 10px 20px;
    transition: transform 0.3s ease-in-out;
    flex-direction: column;
    text-align: center;
}

.innerservicebox strong {
    font-size: 16px;
}

.app-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    width: 70px;
    height: 70px;
    border: 1px solid #555;
    border-radius: 100%;
    margin: auto;
    transition: 0.3s;
}

.app-item:hover .app-icon {
    background: #2f6b92;
    border-color: #2f6b92;
}

.app-item:hover svg path {
    fill: #fff;
}

.app-item p {
    font-size: 13px;
    margin: 3px 0 0;
    color: #555
}

/* Business infographic – vertical color cards (white icon bubble, notch panel, step rail) */
.app-item--infographic {
    --ig-bg: #2f6b92;
    --ig-icon: #2f6b92;
    align-items: stretch;
    padding: 0 4px 8px;
    min-height: 100%;
    border-radius: 0;
    width: 100%;
    max-width: 250px;
    margin: 0 auto;
    transition: filter 0.28s ease;
}

.app-item--step-1 { --ig-bg: #00b4c5; --ig-icon: #00a8b8; }
.app-item--step-2 { --ig-bg: #7cb342; --ig-icon: #6d9e3a; }
.app-item--step-3 { --ig-bg: #37474f; --ig-icon: #263238; }
.app-item--step-4 { --ig-bg: #e85d5d; --ig-icon: #d14a4a; }
.app-item--step-5 { --ig-bg: #f9a825; --ig-icon: #d68910; }
.app-item--step-6 { --ig-bg: #8e24aa; --ig-icon: #6a1b9a; }

.app-item--infographic .app-item__graph {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.app-item--infographic .app-item__icon-bubble {
    position: relative;
    z-index: 2;
    margin-bottom: -26px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.14);
    border: 1px solid rgba(15, 23, 42, 0.06);
    transition: transform 0.32s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.app-item--infographic .app-item__icon-bubble::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--ig-bg) 50%, white);
    opacity: 0;
    transform: scale(0.86);
    transition: transform 0.32s ease, opacity 0.32s ease;
}

.app-item--infographic .app-item__icon-bubble .app-icon {
    width: 50px;
    height: 50px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

.app-item--infographic .app-item__icon-bubble .app-icon svg {
    display: block;
    width: 30px;
    height: 30px;
}

.app-item--infographic .app-item__icon-bubble .app-icon svg path {
    fill: var(--ig-icon);
    transition: fill 0.22s ease;
}

.app-item--infographic .app-item__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    margin: 0;
    padding: 3rem 1.5rem 1.25rem;
    border-radius: 14px 14px 6px 6px;
    background: var(--ig-bg);
    color: #fff;
    text-align: center;
    height: 220px;
    font-size:18px;
    transition: transform 0.34s ease, box-shadow 0.28s ease, filter 0.28s ease;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
    overflow: hidden;
    transform-style: preserve-3d;
}

.app-item--infographic .app-item__panel::before {
    content: "";
    position: absolute;
    top: -70%;
    left: -120%;
    width: 65%;
    height: 240%;
    pointer-events: none;
    background: linear-gradient(115deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.28) 52%, rgba(255, 255, 255, 0) 100%);
    transform: rotate(16deg);
    transition: left 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.app-item--infographic .app-item__panel p {
    margin: 0;
    font-size: 16px;
    line-height: 1.45;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 10px;
}

.app-slider .slick-list{padding:20px 0px;}

.app-item--infographic .app-item__rail {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0.6rem 0 0.35rem;
    padding: 0 0.2rem;
}

.app-item--infographic .app-item__rail-line {
    flex: 1;
    height: 2px;
    min-width: 0.4rem;
    max-width: 100%;
    background: linear-gradient(90deg, transparent, #ccc 12%, #ccc 88%, transparent);
    opacity: 0.9;
}

.app-item--infographic .app-item__rail-num {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 2.1rem;
    min-height: 2.1rem;
    margin: 0 0.2rem;
    border-radius: 50%;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #fff;
    background: var(--ig-bg);
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px #ddd;
}

.app-item--infographic .innerservicebox--ig {
    margin-top: 0.2rem;
    padding: 0 0.1rem 0.25rem;
}

.app-item--infographic .innerservicebox--ig strong {
    display: block;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #1e293b;
    line-height: 1.3;
    margin: 0 0 0.2rem;
}

.app-item--infographic .innerservicebox--ig p {
    font-size: 0.7rem;
    line-height: 1.4;
    color: #64748b;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.app-item--infographic:hover {
    filter: saturate(1.1);
}

.app-item--infographic:hover .app-item__icon-bubble {
    background: #fff;
    transform: scale(1.08) rotate(-6deg);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.24);
    border-color: color-mix(in srgb, var(--ig-bg) 45%, white);
}

.app-item--infographic:hover .app-item__icon-bubble .app-icon svg path {
    fill: var(--ig-icon);
}

.app-item--infographic:hover .app-item__icon-bubble::after {
    opacity: 0.55;
    transform: scale(1);
}

.app-item--infographic:hover .app-item__panel {
    transform: perspective(900px) rotateX(5deg) rotateY(-5deg) scale(1.02);
    box-shadow: 8px 8px 0 0 rgba(3, 24, 17, 0.08);
}

.app-item--infographic:hover .app-item__panel::before {
    left: 145%;
}

.app-slider .slick-track {
    display: flex;
    align-items: stretch;
}

.app-slider .slick-slide {
    height: auto;
    display: flex;
    justify-content: center;
}

.app-slider .slick-next {
    right: -10px;
    top: 50%;
}

.app-slider .slick-prev {
    left: -10px;
    top: 50%;
}

.themeimgcard {
    position: relative;
    height: 150px;
    margin: 0;
}

.themeimgcard img {
    width: 100%;
    height: 100%;
    transition: transform 0.35s ease;
}

.themeitmes a {
    color: #000;
    text-decoration: none
}

.ourallthemeslide .themeitmes{
    position: relative;
    overflow: hidden;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    border-radius:20px;
    border: 2px solid transparent;
    transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

/* Portfolio rail: last real thumb — class set by main.js (Slick clones break pure :last-child) */
.portfolio-theme-board .ourallthemeslide .p-2.portfolio-theme-thumb-last {
    padding-bottom: 0 !important;
}

.ourallthemeslide .slick-list .p-2:last-child{
    padding-bottom:0px;
}

.portfolio-theme-board .ourallthemeslide .slick-slide:has(.portfolio-theme-thumb-last) > div {
    padding-bottom: 0 !important;
}


.themeitmes::before {
    content: "";
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ffffff;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
}

.themeitmes::after {
    content: "";
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    --theme-progress-angle: 0deg;
    background: conic-gradient(
        #ff4013 0deg,
        #ff4013 var(--theme-progress-angle),
        #d9dee2 var(--theme-progress-angle) 360deg
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    transform: rotate(-90deg);
    z-index: 3;
    opacity: 0;
    pointer-events: none;
}

.theme-title h3 {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: #fff;
    padding: 8px 14px;
    color: #17353a;
    border-radius: 999px;
    border-bottom-width: 3px;
    margin-bottom: 0px;
}

.right-view-portfolio{
    width: auto;
    flex: 1 1 auto;
    min-width: 0;

}

.slick-vertical .slick-slide:first-child{padding-top:0px !important;}

.inner-view-images{
    --preview-shift: 0px;
    --preview-scroll-duration: 4.5s;
    position: relative;
    height: 670px;
    overflow: hidden;
    border-radius:20px;
    border: 1px solid #d8e2de;
    background: #fff;
}

.portfolio-theme-window .portfolio-preview-toolbar {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 6;
    display: flex;
    align-items: center;
    padding: 5px 5px 5px 12px;
    border-radius: 999px;
    background: rgba(250, 252, 254, 0.82);
    border: 1px solid rgba(15, 65, 98, 0.16);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.55) inset,
        0 8px 22px rgba(15, 46, 72, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.portfolio-preview-toolbar__label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(15, 65, 98, 0.55);
    padding-right: 6px;
    white-space: nowrap;
}

.portfolio-preview-toolbar__divider {
    width: 1px;
    align-self: stretch;
    margin: 2px 4px;
    flex-shrink: 0;
    background: rgba(15, 65, 98, 0.12);
}

.portfolio-theme-window .portfolio-preview-toolbar .portfolio-preview-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.62rem;
    height: 2.62rem;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: #0f4162;
    color: #fff;
    font-size: 0.92rem;
    line-height: 1;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.12),
        0 6px 16px rgba(15, 65, 98, 0.22);
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.15s ease;
}

.portfolio-theme-window .portfolio-preview-toolbar .portfolio-preview-btn:hover {
    background: #125c83;
}

.portfolio-theme-window .portfolio-preview-toolbar .portfolio-preview-btn:active {
    transform: scale(0.96);
}

.portfolio-theme-window .portfolio-preview-toolbar .portfolio-preview-btn:focus-visible {
    outline: 2px solid #eaf4fb;
    outline-offset: 2px;
}

.portfolio-theme-window .portfolio-preview-toolbar .portfolio-preview-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

@media (max-width: 575.98px) {
    .portfolio-preview-toolbar__label,
    .portfolio-preview-toolbar__divider {
        display: none;
    }

    .portfolio-theme-window .portfolio-preview-toolbar {
        padding: 5px;
    }

    .portfolio-theme-board .portfolio-preview-frame {
        padding: 10px;
        border-radius: 16px;
    }
}

.inner-view-images img{
    width: 100%;
    height: auto;
    display: block;
    will-change: transform;
    transition: transform var(--preview-scroll-duration) linear;
    transform: translateY(0);
}


.theme-title {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: end;
    background: #0000003b;
    padding:8px;
}

.themeitmes:hover .themeimgcard img {
    transform: scale(1.05);
}

.themeitmes:hover h3 {
    background: #dff0e8;
}

.ourallthemeslide .themeitmes.is-active {
    border-color: #89b5ae;
}

.ourallthemeslide .themeitmes.is-active::after {
    opacity: 1;
    animation: theme-clock-progress var(--theme-slide-duration) linear forwards;
}

.ourallthemeslide .themeitmes.is-active::before {
    opacity: 1;
}

.ourallthemeslide:hover .themeitmes.is-active::before,
.ourallthemeslide:hover .themeitmes.is-active::after {
    animation-play-state: paused;
}

.right-view-portfolio .inner-view-images.is-scrolling img {
    transform: translateY(calc(-1 * var(--preview-shift)));
}

@keyframes theme-clock-progress {
    from {
        --theme-progress-angle: 0deg;
    }

    to {
        --theme-progress-angle: 360deg;
    }
}

/* —— Portfolio themes: clean rail + preview (aligned, minimal) —— */
.portfolio-themes-strip {
    z-index: 1;
    background: #f0f6f5;
}

/* Rail column: prev / slider / next —— */
.portfolio-theme-board .portfolio-theme-rail-column {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
    flex: 0 0 20%;
    min-width: 0;
    gap: 0.35rem;
}

.portfolio-theme-board .portfolio-theme-rail-column .ourallthemeslide {
    width: 100%;
    flex: 1 1 auto;
    flex-basis: auto;
    min-height: 0;
}

.portfolio-theme-nav {
    appearance: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width:fit-content;
    margin: 0;
    padding: 0.3rem 0.6rem 0.35rem;
    font-family: inherit;
    color: #0d3d52;
    background: #f8fbfd;
    border: 1px solid rgba(15, 65, 98, 0.12);
    box-shadow: 0 1px 2px rgba(15, 46, 72, 0.06);
    transition:
        background-color 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
    position: relative;
    overflow: hidden;
}

.portfolio-theme-nav--prev {
    border-radius: 10px;
    flex-direction: row;
}

.portfolio-theme-nav--next {
    border-radius: 10px;
    flex-direction: row;
}

.portfolio-theme-nav__glyph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 999px;
    font-size: 0.66rem;
    color: #0a5c6e;
    background: #ffffff;
    border: 1px solid rgba(15, 65, 98, 0.1);
    box-shadow: 0 1px 2px rgba(15, 46, 72, 0.06);
    flex-shrink: 0;
}

.portfolio-theme-nav__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
    text-align: left;
    flex: 1;
    min-width: 0;
}

.portfolio-theme-nav--next .portfolio-theme-nav__text {
    align-items: start;
    text-align: left;
}

.portfolio-theme-nav__kicker {
    display: block;
    font-size: 0.53rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(15, 65, 98, 0.45);
}

.portfolio-theme-nav__label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #0f4162;
}

.portfolio-theme-nav:hover {
    border-color: rgba(15, 65, 98, 0.26);
    background: #ffffff;
    box-shadow: 0 2px 5px rgba(15, 46, 72, 0.09);
}

.portfolio-theme-nav:active {
    box-shadow: 0 1px 3px rgba(15, 46, 72, 0.09);
}

.portfolio-theme-nav:focus {
    outline: none;
}

.portfolio-theme-nav:focus-visible {
    outline: 2px solid #07b49f;
    outline-offset: 2px;
}

@media (max-width: 991.98px) {
    .portfolio-theme-board .portfolio-theme-rail-column {
        flex: 1 1 100%;
        max-width: 100%;
    }
}


.portfolio-theme-board .portfolio-theme-rail {

    padding: 0px 0px;
    border-radius: 12px;
    align-self: stretch;
}

.portfolio-theme-board .ourallthemeslide .slick-list {
    padding-bottom: 0;
}

.portfolio-theme-board .portfolio-theme-stage {
    flex: 1 1 auto;
    min-width: 0;
    align-self: stretch;
}

/* Outer “photo mat” wrap — depth + bezel around live preview */
.portfolio-theme-board .portfolio-preview-frame {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    padding: 14px;
    border-radius: 18px;
    background: #0f4162;
    border: 1px dashed rgb(15 65 98);
    box-shadow: 8px 8px 0 0 rgba(3, 24, 17, 0.08);
}

/* Inner viewport: sits flush inside mat */
.portfolio-theme-board .portfolio-preview-frame .inner-view-images.portfolio-theme-window--with-frame {
    position: relative;
    z-index: 1;
    border-radius: 14px !important;
    border: 1px dashed rgba(15, 65, 98, 0.12);
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.portfolio-theme-board .portfolio-theme-window:not(.portfolio-theme-window--with-frame) {
    border-radius: 12px;
    border: 1px solid #dfe6eb;
    box-shadow: 0 14px 42px rgba(15, 46, 72, 0.08);
}

.portfolio-theme-board .themeitmes {
    border-radius: 12px;
    background: #fff;
    border: 1.7px dashed #e8eef2;
    box-shadow: none;
    transition: border-color 0.22s ease, box-shadow 0.24s ease, background-color 0.24s ease;
}

.portfolio-theme-board .themeimgcard {
    height: clamp(150px, 20vw, 150px);
    border-radius: 10px;
    overflow: hidden;
    margin: 0;
    outline: none;
}

.portfolio-theme-board .theme-title {
    align-items: flex-end;
    padding: 10px;
    background: linear-gradient(180deg, transparent 30%, rgba(15, 46, 72, 0.45) 100%);
}

.portfolio-theme-board .theme-title h3 {
    letter-spacing: 0.04em;
    background: #fff;
    color: #173c4a;
    border: 1px solid rgba(15, 65, 98, 0.12);
}

.portfolio-theme-board .themeitmes:hover h3 {
    background: #f3faf7;
}

/* Non-active thumbnails: light fade so active still pops */
.portfolio-theme-board .ourallthemeslide .themeitmes:not(.is-active) {
    opacity: 0.82;
    filter: saturate(0.96);
    transition:
        opacity 0.26s ease,
        filter 0.26s ease,
        transform 0.26s ease;
}

.portfolio-theme-board .ourallthemeslide .themeitmes:not(.is-active):hover {
    opacity: 0.94;
    filter: saturate(1);
}

/* Selected theme — clear but editorial (accent bar + paper lift, no glow halo) */
.portfolio-theme-board .ourallthemeslide .themeitmes.is-active {
    opacity: 1 !important;
    filter: none;
    border-color: #07b49f;
    background-color: #fbfcfd;
}


.portfolio-theme-board .ourallthemeslide .themeitmes.is-active .theme-title h3 {
    color: #0f4162;
    border-color: rgba(15, 65, 98, 0.22);
    background: #fff;
    font-weight: 800;
    letter-spacing: 0.06em;
}

@media (max-width: 991.98px) {
    .main-portfolio-box.portfolio-theme-board {
        flex-wrap: wrap;
        gap: 20px;
    }

    .portfolio-theme-board .portfolio-theme-rail {
        flex: 1 1 100%;
    }

    .portfolio-theme-board .inner-view-images {
        max-height: min(68vh, 520px);
    }
}

@media (max-width: 575.98px) {
    .portfolio-theme-board {
        padding: 14px;
    }
}

.fixedheadtop {
    position: fixed;
    width: 100%;
    z-index: 999999999
}

.mainformpagebox form {
    background-color: #fff;
    border-radius: 20px;
    display: flex;
    align-items: center;
}

.mainformpagebox div.left {
    width: 50%;
    height: inherit;
    border-radius: 20px;
    position: relative;
    background-position: center;
    background-size: cover;
    background-blend-mode: multiply;
    height: 510px;
    position: relative;
    overflow: hidden;
}

.mainformpagebox div.left .leftformflaot {
    position: absolute;
    left: 0;
    bottom: 0;
    text-align: center;
    line-height: 40px;
    width: 100%;
    padding: 30px 20px;

}

.formheading h4 {
    font-weight: 600
}

.mainformpagebox div.left div p {
    color: #fff;
    font-size: 18px;
    margin: 0;
    font-weight: bolder;
    text-align: left;
    position: relative;
    z-index: 9;
    font-weight: 400;
    line-height: 31px;
}

.loginshordetails {
    width: 100%
}

.leftformflaot h3 {
    color: #fff;
    text-align: left;
    font-size: 23px;
    font-weight: 700;
}





.mainformpagebox div.left div a {
    display: block;
    color: #fff;
    text-decoration: none;
    font-size: 14.5px
}

.mainformpagebox div.left div input {
    border: 2px solid #fff;
    width: 160px;
    height: 46px;
    border-radius: 8px;
    background-color: #fff0;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700
}

.right select {
    padding: 12px 50px 10px 20px;
    margin: 10px 0;
    background-color: #fff0;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    width: 100%;
    box-shadow: none
}

.right select:focus-visible,
.mainformpagebox div.right input {
    outline: none
}

.mainformpagebox div.right {
    width: 55%;
    height: 100%;
    padding:40px;
    position: relative
}

#closeModalBtn a {
    color: #000;
    border: 1px solid #ddd;
    padding: 5px;
    border-radius: 30px;
    width: 30px;
    height: 30px;
    display: block;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none
}

.mainformpagebox div.right h1 {
    font-size: 36px;
    text-align: center;
    font-weight: 700;
    opacity: 70%
}

.mainformpagebox div.right input {
    padding: 12px 50px 10px 20px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    width: 100%;
}

.mainformpagebox div.right input:focus {
    outline-color: #fff0
}

/* Request callback form: simple, aligned, clean (no background effects) */
.mainformpagebox .request-callback-form__heading.formheading {
    display: flex;
    flex-direction: column;
    align-items: start;
    text-align: center;
    gap: 0.35rem;
    margin-bottom: 0.35rem;
}

.mainformpagebox .request-callback-form__icon {
    width: 75px;
    height: auto;
}

.mainformpagebox .request-callback-form .formheading h4 {
    margin: 0;
    font-size: 1.34rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #0f172a;
}

.mainformpagebox .request-callback-form input,
.mainformpagebox .request-callback-form select {
    height: 50px;
    margin: 0.25rem 0;
    padding: 0.7rem 1rem;
    border: 1px solid #cfd8e3;
    border-radius: 6px;
    font-size: 1.05rem;
    font-weight: 500;
    color: #243447;
    background: #fff;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mainformpagebox .request-callback-form input::placeholder {
    color: transparent;
    font-size:18px;
}

.mainformpagebox .request-callback-form input:focus,
.mainformpagebox .request-callback-form select:focus {
    border-color: #0f4162;
    box-shadow: 0 0 0 3px rgba(15, 65, 98, 0.14);
}

.mainformpagebox .request-callback-form__field {
    position: relative;
}

.mainformpagebox .request-callback-form__field label {
    position: absolute;
    left: 0.92rem;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    padding: 0 0.3rem;
    font-size: 16px;
    font-weight: 500;
    color: #7a8798;
    pointer-events: none;
    transition: all 0.2s ease;
}
.request-callback-form__heading p{margin-bottom:5px;}

.mainformpagebox .request-callback-form__field input:focus + label,
.mainformpagebox .request-callback-form__field input:not(:placeholder-shown) + label {
    top: 0;
    transform: translateY(-15%);
    font-size: 0.8rem;
    font-weight: 600;
    color: #0f4162;
}

.mainformpagebox .request-callback-form__field--select label {
    top: 0;
    transform: translateY(-50%);
    font-size: 0.8rem;
    font-weight: 600;
    color: #0f4162;
}

.mainformpagebox .request-callback-form__field--select select {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.mainformpagebox .request-callback-form__select-trigger {
    width: 100%;
    height: 58px;
    margin: 0.25rem 0;
    padding: 0.7rem 2.3rem 0.7rem 1rem;
    border: 1px solid #cfd8e3;
    border-radius: 6px;
    background: #fff;
    color: #243447;
    text-align: left;
    font-size: 1.05rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mainformpagebox .request-callback-form__select-trigger i {
    font-size: 0.8rem;
    color: #243b53;
    transition: transform 0.2s ease;
    margin-left: 0.5rem;
}

.mainformpagebox .request-callback-form__field--select.is-open .request-callback-form__select-trigger {
    border-color: #0f4162;
    box-shadow: 0 0 0 3px rgba(15, 65, 98, 0.14);
}

.mainformpagebox .request-callback-form__field--select.is-open .request-callback-form__select-trigger i {
    transform: rotate(180deg);
}

.mainformpagebox .request-callback-form__select-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 0.22rem);
    z-index: 30;
    margin: 0;
    padding: 0.35rem;
    list-style: none;
    border: 1px solid #e6ebf2;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 14px 26px rgba(15, 23, 42, 0.1);
    display: none;
}

.mainformpagebox .request-callback-form__field--select.is-open .request-callback-form__select-menu {
    display: block;
}

.mainformpagebox .request-callback-form__select-option {
    position: relative;
    border-radius: 9px;
    padding: 0.62rem 2rem 0.62rem 0.75rem;
    font-size: 0.98rem;
    line-height: 1.3;
    color: #2f3f54;
    cursor: pointer;
    transition: background-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.mainformpagebox .request-callback-form__select-option:hover {
    background: #f4f6f8;
}

.mainformpagebox .request-callback-form__select-option.is-active {
    background: #f1f3f5;
    color: #111827;
    font-weight: 600;
}

.mainformpagebox .request-callback-form__select-option.is-active::after {
    content: "\f054";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.72rem;
    color: #2f3f54;
}

.mainformpagebox .request-callback-form .cta {
    border-radius: 14px;
    border: 1.5px solid #1f5f5a !important;
    background: #dceee8 !important;
    color: #052f36 !important;
    font-size: 16px;
    padding: 8px 20px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: none;
    box-shadow: 0 5px 0 #0f5a52, 0 9px 16px rgba(3, 47, 54, 0.18);
    transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.mainformpagebox .request-callback-form .cta:hover {
    transform: translateY(1px);
    box-shadow: 0 4px 0 #0f5a52, 0 8px 14px rgba(3, 47, 54, 0.16);
    filter: brightness(1.01);
}

.mainformpagebox .request-callback-form .cta:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 #0f5a52, 0 4px 8px rgba(3, 47, 54, 0.15);
}

.pricing-card{
    transition: all 0.3s ease;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 5px;
    background: #fff;
    height: fit-content;
    margin-top: 20px;
    position: relative;
    box-shadow: -10px 0px 0px 0px rgba(3, 24, 17, 0.08);
}
.pricing-card.popular{
    margin-top: 0;
    color: #fff !important;
    background: #133c35;
}


.pricing-card h2 {
    margin-top: 0;
    font-size: 22px;
    font-weight: 600;
    color: #000;
}

.price {
    font-size: 20px;
    font-weight: 700;
    margin: 10px 0
}

.desc {
    font-size: 14px;
    color: #000;
    margin-bottom: 20px
}

.ourpricecardbox h3 {
    margin-bottom: 10px;
    font-size: 16px
}

.ourpricecardbox ul {
    list-style: none;
    padding: 0;
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 5px
}

.ourpricecardbox li {
    color: #000
}

.pricesection--modern .ourpricecardbox--modern .pricing-card.popular h2{
    color:#fff !important;
}


.ourpricecardbox .getstartbtn {
    background-color: #5f786b;
    color: #fff;
    padding: 14px 0;
    width: 100%;
    border: none;
    border-radius: 30px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 20px;
    transition: all 0.5s ease
}


.ourpricecardbox {
    display: flex;
    gap: 30px;
}

.showmore-contentul-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 10;
    -webkit-box-orient: vertical;
    transition: all 0.3s ease
}

.showmore-contentul-1.expanded {
    -webkit-line-clamp: unset;
    display: block
}

.showmore-contentul-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 10;
    -webkit-box-orient: vertical;
    transition: all 0.3s ease
}

.showmore-contentul-2.expanded {
    -webkit-line-clamp: unset;
    display: block
}

.showmore-contentul-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 10;
    -webkit-box-orient: vertical;
    transition: all 0.3s ease
}

.showmore-contentul-3.expanded {
    -webkit-line-clamp: unset;
    display: block
}

.showmorebnt {
    font-size: 11px;
    border: none;
    background: #fff0;
    color: #fff;
    padding: 5px;
    background: #5f786b;
    border-radius: 5px
}

.pricing-card:hover .getstartbtn {
    background-color: #E3FFCD;
    color: #000
}

/* —— Pricing: SaaS template (Personal / Starter style) —— */
.pricesection--modern {
    position: relative;
    overflow: hidden;
    padding-top: 5.5rem !important;
    padding-bottom: 5.5rem !important;
    background-size: cover;
    border-top:1px solid #ddd;
    background: #f0f6f5;
}

.get-start{max-width:550px;}

.pricesection--modern .container-xl {
    position: relative;
    z-index: 1;
}
.plane-contrast{
    position: absolute;
    transform: rotate(-58deg);
    right: 20%;
    top: 5%;
    animation: plane-contrast-float 7s ease-in-out infinite;
    will-change: transform;
    pointer-events: none;
}

@keyframes plane-contrast-float {
    0% {
        transform: translate3d(0, 0, 0) rotate(-58deg);
    }
    25% {
        transform: translate3d(-14px, -10px, 0) rotate(-56deg);
    }
    50% {
        transform: translate3d(-30px, 4px, 0) rotate(-58deg);
    }
    75% {
        transform: translate3d(-12px, 12px, 0) rotate(-60deg);
    }
    100% {
        transform: translate3d(0, 0, 0) rotate(-58deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .plane-contrast {
        animation: none;
    }
}

.pricesection--modern .pricesection__head {
    text-align: center;
    margin-bottom: 2.5rem;
}

.pricesection--modern .pricesection__head h2 {
    font-family: inherit;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: #0f172a;
    margin: 0;
}
.why-choose-split{overflow: hidden;}
.pricesection--modern .pricesection__sub {
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.55;
    margin: 0.85rem auto 0;
    max-width: 32rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.pricesection--modern .pricesection__sub-line {
    display: block;
    font-weight: 700;
    color: #111827;
}

.pricesection--modern .pricesection__sub-muted {
    display: block;
    font-size: 0.9rem;
    font-weight: 400;
    color: #9ca3af;
}

.pricesection--modern .ourpricecardbox--modern {
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
    align-items: stretch;
    gap: clamp(1.25rem, 2.2vw, 1.75rem);
    padding: 0.5rem 0.25rem 1rem;
}

.pricesection--modern .ourpricecardbox--modern .pricing-card .inner-pricebox {
    flex: 1 1 280px;
    width:100%;
    margin: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    height: auto;
    align-self: stretch;
    padding: 20px 25px;
    border-radius: 18px;
    border: 1px solid #e8eaef;
    background: #fff !important;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 12px 32px rgba(15, 23, 42, 0.06);
    overflow: visible;
}


.pricesection--modern .ourpricecardbox--modern .pricing-card__art {
    display: none;
}

.pricesection--modern .pricing-card h2,
.pricesection--modern .pricing-card h3,
.pricesection--modern .pricing-card .price,
.pricesection--modern .pricing-card .pricing-card__price-row,
.pricesection--modern .pricing-card .pricing-card__price-main,
.pricesection--modern .pricing-card .desc,
.pricesection--modern .pricing-card ul,
.pricesection--modern .pricing-card li,
.pricesection--modern .pricing-card hr,
.pricesection--modern .pricing-card .showmorebnt,
.pricesection--modern .pricing-card .getstartbtn,
.pricesection--modern .pricing-card .badge {
    position: relative;
    z-index: 1;
}

.pricesection--modern .ourpricecardbox--modern .pricing-card h2 {
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
    color: #0f172a !important;
    margin: 0 0 0.35rem !important;
    text-align: left;
    width: 100%;
    padding: 10px 15px;
}

.pricesection--modern .ourpricecardbox--modern .pricing-card:not(.popular) .pricing-card__price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.5rem;
    margin: 0.15rem 0 0.45rem !important;
    padding: 0 !important;
    width: 100%;
    border: none;
    background: none;
}

.pricesection--modern .ourpricecardbox--modern .pricing-card .pricing-card__price-main {
    font-size: 25px;
    font-weight: 600 !important;
    color: #0f172a !important;
    letter-spacing: -0.035em;
    line-height: 1.05;
}

.pricesection--modern .popular .pricing-card__price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.5rem;
    margin: 0 !important;
    padding-top: 1.5rem !important;
    padding-bottom: 0.4rem !important;
    width: 100%;
    border: none;
    background: none;
}


.pricesection--modern .ourpricecardbox--modern .pricing-card .desc {
    line-height: 1.65;
    color: #000000 !important;
    margin-bottom: 0.95rem !important;
    margin-top: 0 !important;
    max-width: none;
    text-align: left;
    width: 100%;
}

.pricesection--modern .popular .desc {
    font-size: 0.9375rem !important;
    line-height: 1.65;
    color: #64748b !important;
    margin-bottom: 0.95rem !important;
    margin-top: 0 !important;
    max-width: none;
    text-align: left;
}

.pricesection--modern .ourpricecardbox--modern .pricing-card h3 {
    font-size: 15px;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: #000 !important;
    margin: 0 0 0.65rem !important;
    text-align: left;
    width: 100%;
}


.pricesection--modern .ourpricecardbox--modern .pricing-card:not(.popular) hr {
    border: none;
    border-top: 1px solid #f1f5f9;
    width: 100%;
    margin: 0.25rem 0 1.05rem;
}

.pricesection--modern .popular hr {
    border: none;
    border-top: 1px solid #f1f5f9;
    width: 100%;
    margin: 0.25rem 0 1.05rem;
}

.pricesection--modern .ourpricecardbox--modern .pricing-card ul.pricing-card__features {
    text-align: left;
    width: 100%;
    max-width: 100%;
    margin: 0 0 0.35rem;
    list-style: none;
    padding-left: 0;
}

.pricesection--modern .ourpricecardbox--modern .pricing-card ul.pricing-card__features li {
    position: relative;
    color: #1e293b !important;
    font-size: 16px;
    line-height: 1.75;
    padding-left: 17px;
    margin-bottom: 0.12rem;
}

.pricesection--modern .ourpricecardbox--modern .pricing-card ul.pricing-card__features li::before {
    content: "\2713";
    position: absolute;
    left: 0.05rem;
    top: 0.12em;
    color: #0f172a;
    font-size: 0.62rem;
    font-weight: 400;
    line-height: inherit;
    opacity: 0.88;
}


.ourallthemeslide {
    width: 20%;
    flex-basis: 20%;
}



.pricesection--modern .ourpricecardbox--modern .pricing-card:not(.popular) .getstartbtn {
    width: 100%;
    max-width: none;
    margin-top: 1.45rem;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0.88rem 1.4rem !important;
    background: #fff !important;
    color: #0f172a !important;
    border: 1px solid #909090 !important;
    border-radius: 999px !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    text-transform: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    align-self: stretch;
}

.pricesection--modern .ourpricecardbox--modern .pricing-card:not(.popular) .getstartbtn:hover,
.pricesection--modern .ourpricecardbox--modern .pricing-card:not(.popular):hover .getstartbtn {
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
    background: #f1f5f9 !important;
}

.pricesection--modern .popular .getstartbtn {
    width: 100%;
    max-width: none;
    margin-top: 1.45rem;
    margin-left: 0 !important;
    margin-right: 0 !important;
    align-self: stretch;
    transform: none;
    padding: 0.9rem 1.5rem !important;
    background: #133c35;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    text-transform: none;
}

.pricesection--modern .ourpricecardbox--modern .pricing-card:hover .getstartbtn {
    filter: none;
}


.pricesection--modern .ourpricecardbox--modern .pricing-card .showmorebnt {
    display: block;
    width: fit-content;
    margin-top: auto;
    margin-left: 0;
    margin-right: 0;
    color: #2f7ae3 !important;
    text-decoration: underline;
    border-radius: 10px;
    margin-bottom: 0;
    font-weight: 600;
    font-size: 0.8rem;
    align-self: stretch;
    background: transparent;
    padding: 0px;
}

.pricesection--modern .showmorebnt:hover {
    filter: brightness(0.97);
}

/* —— Pricing tier layout (forest / lime, 3-column reference design) —— */
.pricesection--tier {
    --tier-forest: #134236;
    --tier-forest-deep: #0e3028;
    --tier-lime: #c8f227;
    --tier-lime-soft: #d4f875;
    --tier-green: #1f8f5f;
    --tier-green-soft: #2a9d6a;
    --tier-mint: #e8f5ef;
    --tier-muted: #64748b;
}

.pricesection--tier .pricesection__head--tier .pricesection__kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 auto 0.65rem;
    padding: 0.35rem 0.95rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--tier-forest);
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.pricesection--tier .pricesection__kicker-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tier-green);
}

.pricesection--modern.pricesection--tier .ourpricecardbox--modern.ourpricecardbox--tier {
    align-items: stretch;
}

.pricesection--modern.pricesection--tier .ourpricecardbox--modern.ourpricecardbox--tier .pricing-card.pricing-card--tier {
    max-width: 410px;
    margin-top: 0;
    padding: 0;
    border: none;
    border-radius: 14px;
    background: transparent;
    box-shadow: none;
    width: 100%;
}

.pricesection--modern.pricesection--tier .ourpricecardbox--tier .pricing-card--tier .inner-pricebox {
    align-items: center;
    text-align: center;
    padding: 1.85rem 1.5rem 1.65rem;
    border-radius: 14px;
    height: 100%;
}

.pricesection--modern.pricesection--tier .ourpricecardbox--tier .pricing-card--tier-basic .inner-pricebox {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 10px 36px rgba(15, 23, 42, 0.06) !important;
}

.pricesection--modern.pricesection--tier .ourpricecardbox--tier .pricing-card--tier-master .inner-pricebox {
    background: var(--tier-mint) !important;
    border: 1px solid rgba(31, 143, 95, 0.18) !important;
    box-shadow: 0 10px 32px rgba(19, 66, 54, 0.07) !important;
}

.pricesection--modern.pricesection--tier .ourpricecardbox--tier .pricing-card--tier-featured {
    position: relative;
    z-index: 2;
    transform: translateY(-15px);
}

.pricesection--modern.pricesection--tier .ourpricecardbox--tier .pricing-card--tier-featured.popular {
    background: transparent !important;
    color: inherit !important;
}

.pricesection--modern.pricesection--tier .ourpricecardbox--tier .pricing-card--tier-featured .inner-pricebox {
    background: linear-gradient(165deg, var(--tier-forest) 0%, var(--tier-forest-deep) 100%) !important;
    border: 1px solid rgba(200, 242, 39, 0.25) !important;
    padding-top: 2.15rem;
    padding-bottom: 2rem;
}

.pricesection--tier .pricing-card__tier-badge {
    width: 100%;
    height: 188px;
    position: absolute;
    top: -8px;
    left: 8px;
    overflow: hidden;
}

.pricesection--tier .pricing-card__tier-badge:before {
    content: "";
    position: absolute;
    width: 40px;
    height: 8px;
    right: 100px;
    background: #4D6530;
    border-radius: 8px 8px 0px 0px;
}
.pricesection--tier .pricing-card__tier-badge:after{
    content: "";
    position: absolute;
    width: 8px;
    height: 40px;
    right: 0px;
    top: 100px;
    background: #4D6530;
    border-radius: 0px 8px 8px 0px;
}

.pricesection--tier .pricing-card__tier-badge .inner-ribbon{
    width: 200px;
    height: 40px;
    line-height: 40px;
    position: absolute;
    top: 30px;
    right: -50px;
    z-index: 2;
    overflow: hidden;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    border: 1px dashed;
    box-shadow: 0 0 0 3px #57DD43, 0px 21px 5px -18px rgba(0, 0, 0, 0.6);
    background: #57DD43;
    text-align: center;
    color:#fff;
}

.pricesection--modern.pricesection--tier .ourpricecardbox--tier .pricing-card--tier .pricing-card__subtitle {
    margin: 0 0 0.75rem;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--tier-green);
}

.pricesection--modern.pricesection--tier .ourpricecardbox--tier .pricing-card--tier-featured .pricing-card__subtitle {
    color: var(--tier-lime-soft);
}

.pricesection--modern.pricesection--tier .ourpricecardbox--tier .pricing-card--tier .pricing-card__price-row {
    justify-content: center;
    margin-bottom: 0.65rem !important;
}

.pricesection--modern.pricesection--tier .ourpricecardbox--tier .pricing-card--tier .pricing-card__price-main {
    font-size: clamp(1.6rem, 4vw, 2rem) !important;
    font-weight: 700 !important;
    color: var(--tier-green) !important;
}

.pricesection--modern.pricesection--tier .ourpricecardbox--tier .pricing-card--tier-featured .pricing-card__price-main {
    color: var(--tier-lime) !important;
}

.pricesection--modern.pricesection--tier .ourpricecardbox--tier .pricing-card--tier h2 {
    text-align: center !important;
    padding: 0 !important;
    margin: 0 0 0.35rem !important;
    font-size: 22px;
    font-weight: 700 !important;
    color: #1e293b !important;
}

.pricesection--modern.pricesection--tier .ourpricecardbox--tier .pricing-card--tier-featured h2 {
    color: #fff !important;
}

.pricesection--modern.pricesection--tier .ourpricecardbox--tier .pricing-card--tier .desc {
    text-align: center !important;
    color: var(--tier-muted) !important;
    font-size: 15px;
    margin-bottom: 1rem !important;
    max-width: 24rem;
}

.pricesection--modern.pricesection--tier .ourpricecardbox--tier .pricing-card--tier-featured .desc {
    color: rgba(255, 255, 255, 0.88) !important;
}

.pricesection--modern.pricesection--tier .ourpricecardbox--tier .pricing-card--tier h3 {
    text-align: left !important;
    letter-spacing: 0.08em !important;
    font-size: 16px;
    color: var(--tier-forest) !important;
}

.pricesection--modern.pricesection--tier .ourpricecardbox--tier .pricing-card--tier-featured h3 {
    color: rgba(255, 255, 255, 0.92) !important;
}

.pricesection--modern.pricesection--tier .ourpricecardbox--tier .pricing-card--tier hr {
    border-top-color: #fff !important;
    margin: 0.5rem 0 1rem !important;
}

.pricesection--modern.pricesection--tier .ourpricecardbox--tier .pricing-card--tier-featured hr {
    border-top-color: #fff !important;
}

.pricesection--modern.pricesection--tier .ourpricecardbox--tier .pricing-card--tier ul.pricing-card__features {
    text-align: left;
    max-width: 100%;
    margin: 0 auto 0.35rem;
}

.pricesection--modern.pricesection--tier .ourpricecardbox--tier .pricing-card--tier ul.pricing-card__features li {
    padding-left: 1.35rem;
    font-size: 16px;
    color: #334155 !important;
}

.pricesection--modern.pricesection--tier .ourpricecardbox--tier .pricing-card--tier-featured ul.pricing-card__features li {
    color: rgba(255, 255, 255, 0.92) !important;
}

.pricesection--modern.pricesection--tier .ourpricecardbox--tier .pricing-card--tier-basic ul.pricing-card__features li::before,
.pricesection--modern.pricesection--tier .ourpricecardbox--tier .pricing-card--tier-master ul.pricing-card__features li::before {
    content: "\2713";
    position: absolute;
    left: 0.05rem;
    top: 0.12em;
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--tier-green);
    line-height: inherit;
    opacity: 1;
}

.pricesection--modern.pricesection--tier .ourpricecardbox--tier .pricing-card--tier-featured ul.pricing-card__features li::before {
    content: "\2713";
    left: 0.05rem;
    top: 0.12em;
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--tier-lime);
    opacity: 1;
}

.pricesection--modern.pricesection--tier .ourpricecardbox--tier .pricing-card--tier .showmorebnt {
    align-self: center;
    margin-right: auto;
    background: transparent !important;
    color: var(--tier-green-soft) !important;
    text-decoration: underline;
    font-weight: 600;
    font-size: 15px;
}

.pricesection--modern.pricesection--tier .ourpricecardbox--tier .pricing-card--tier-featured .showmorebnt {
    color: var(--tier-lime-soft) !important;
}

.pricesection--modern.pricesection--tier .ourpricecardbox--tier .pricing-card--tier-basic .getstartbtn,
.pricesection--modern.pricesection--tier .ourpricecardbox--tier .pricing-card--tier-master .getstartbtn {
    background: #fff !important;
    color: var(--tier-forest) !important;
    border: 2px solid var(--tier-green) !important;
    border-radius: 10px !important;
    padding: 0.85rem 1.25rem !important;
    font-weight: 700 !important;
}

.pricesection--modern.pricesection--tier .ourpricecardbox--tier .pricing-card--tier-basic .getstartbtn:hover,
.pricesection--modern.pricesection--tier .ourpricecardbox--tier .pricing-card--tier-master .getstartbtn:hover {
    background: var(--tier-mint) !important;
    border-color: var(--tier-green-soft) !important;
    color: var(--tier-forest-deep) !important;
}

.pricesection--modern.pricesection--tier .ourpricecardbox--tier .pricing-card--tier-featured .getstartbtn {
    background: var(--tier-lime) !important;
    color: var(--tier-forest-deep) !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
}

.pricesection--modern.pricesection--tier .ourpricecardbox--tier .pricing-card--tier-featured .getstartbtn:hover {
    background: var(--tier-lime-soft) !important;
    filter: none;
}

.pricing-tier-cta {
    margin-top: 2.25rem;
    padding: 0 0.25rem;
}

.pricing-tier-cta__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.65rem 1.75rem;
    border-radius: 14px;
    background: linear-gradient(90deg, var(--tier-forest) 0%, var(--tier-forest-deep) 100%);
    box-shadow: 0 12px 40px rgba(14, 48, 40, 0.28);
}

.pricing-tier-cta__title {
    display: block;
    font-size: clamp(1.25rem, 3vw, 1.6rem);
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.35rem;
}

.pricing-tier-cta__text {
    margin: 0;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.88);
    max-width: 36rem;
    line-height: 1.5;
}

.pricing-tier-cta__btn {
    flex-shrink: 0;
    padding: 0.75rem 1.6rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #fff;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.pricing-tier-cta__btn:hover {
    background: #fff;
    color: var(--tier-forest-deep);
    border-color: #fff;
}

@media (max-width: 991px) {
    .pricesection--modern.pricesection--tier .ourpricecardbox--tier .pricing-card--tier-featured {
        transform: none;
    }

    .pricing-tier-cta__inner {
        flex-direction: column;
        text-align: center;
        justify-content: center;
    }

    .pricing-tier-cta__copy {
        width: 100%;
    }

    .pricing-tier-cta__btn {
        width: 100%;
        max-width: 20rem;
    }

    .pricesection--modern .ourpricecardbox--modern .pricing-card {
        max-width: none;
    }
}

.whyusmainbox {
    padding-top: 30px !important;
    padding-right: 30px !important;
    padding-bottom: 40px !important;
    padding-left: 40px !important;
    background-color: #ffffff !important;
    border-radius: 30px !important;
    box-shadow: 0 10px 50px rgb(4 75 194 / .1);
    border-bottom-right-radius: 0px !important;
    transition: ease all 0.5s;
    height: 210px
}

.whyusmainbox:hover {
    box-shadow: 0 20px 60px rgb(4 75 194 / .2)
}

.worklistspan {
    background: #ddd;
    margin-bottom: 10px;
    width: fit-content;
    padding: 10px;
    border-radius: 30px;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center
}

.whyworkcontent p {
    font-size: 14px;
    margin-top: 5px
}

.whyusmainbox:hover {
    transform: translateY(-10px)
}

.whyusmainbox:hover .worklistspan {
    background: var(--secondrycolor);
    fill: var(--whitecolor);
    transition: ease all 2s
}

.whyusmainbox:hover .worklistspan svg path {
    fill: var(--whitecolor);
    transition: ease all 0.2s
}

.serveimg img {
    width: 60px
}

.serveimg {
    margin-bottom: 20px;
}


.serveimg svg path {
    fill: #fff;
}

.servecescontent {
    margin-top: 15px;
}

.serveimg svg {
    transition: 0.3s;
}


.ourservicecontents:hover .serveimg svg path {
    fill: #fff;
}

.servecescontent h3 {
    font-size: 20px;
    font-weight: 600;
    text-align: center;
}

.servecescontent p {
    font-size: 13px;
    text-align: center;
    color: #767676;
}

.ourservicecontents {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(10px);
    padding: 30px;
    border-radius: 0;
    transition: all 0.4s cubic-bezier(.4, 0, .2, 1);
    height: 350px;
    overscroll-behavior-x: auto
}

.ourservicecontents:hover::after {
    border: 1px solid #2f6b92 !important;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.07);
}


.ourserveslide .p-2 {
    margin: 15px 20px;
    height: auto
}

.at-work-process-details span {
    display: block
}

.slick-dots {
    display: flex;
    justify-content: center;
    gap: 20px
}

.slick-dots button {
    display: none
}

.slick-dots li {
    border-radius: 100%;
    font-size: 25px
}

.ourservicecontents::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    border-radius: 15px;
    border: 1px solid #07b49f !important;
    z-index: -1;
    transition: all 0.4s ease;
    border: 1px solid #ddd;
}

.leftdemoimg img {
    height: 600px
}

.leftdemoimg {
    position: relative
}

.floimgcontent>div:nth-child(1) {
    background-image: url(/assets/images/hero-element01.webp);
    background-position: left top;
    width: 50px;
    height: 55px;
    left: 15%;
    top: 3%;
    animation: softgen_left_right 4s forwards infinite alternate
}

.floimgcontent>div:nth-child(2) {
    background-image: url(/assets/images/hero-element02.webp);
    background-position: right top;
    width: 80px;
    height: 72px;
    right: 37%;
    top: 10%;
    animation: softgen_up_down 4s forwards infinite alternate
}

.floimgcontent>div:nth-child(3) {
    background-image: url(/assets/images/hero-element03.webp);
    background-position: right top;
    width: 70px;
    height: 53px;
    right: 33%;
    top: 30%;
    animation: softgen_left_right 4s forwards infinite alternate
}

.floimgcontent>div:nth-child(4) {
    background-image: url(/assets/images/hero-element04.webp);
    background-position: right bottom;
    width: 40px;
    height: 37px;
    right: 30%;
    top: 50%;
    animation: softgen_from_bottom_corner 4s forwards infinite alternate
}

.floimgcontent>div:nth-child(5) {
    background-image: url(/assets/images/hero-element05.webp);
    background-position: left top;
    width: 60px;
    height: 52px;
    left: 0;
    top: 30%;
    animation: softgen_scale_up_down 3s forwards infinite alternate
}

.floimgcontent>div {
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute
}

@keyframes softgen_left_right {
    0% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px)
    }

    100% {
        -webkit-transform: translateX(5px);
        transform: translateX(5px)
    }
}

@keyframes softgen_up_down {
    0% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px)
    }

    100% {
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }
}

@keyframes softgen_from_bottom_corner {
    0% {
        -webkit-transform: translate(-5px, -5px);
        transform: translate(-5px, -5px)
    }

    100% {
        -webkit-transform: translate(10px, 10px);
        transform: translate(10px, 10px)
    }
}

.blogmianbox {
    background: linear-gradient(108.44deg, rgb(255 255 255 / .1) 20.99%, rgb(255 255 255 / .025) 84.05%);
    border: 2px solid rgb(255 255 255 / .14);
    box-shadow: 0 30px 60px rgb(0 0 0 / .5);
    backdrop-filter: blur(8px);
    border-radius: 30px;
    padding: 30px
}

.dtr-post-img img {
    height: 150px
}

.dtr-blog-item {
    display: flex;
    flex-direction: row-reverse;
    gap: 10px
}

.dtr-post-content a {
    font-size: 13px;
    color: #000;
    text-decoration: none
}

.pddingnone {
    padding: 0
}

.dtr-post-content p {
    font-size: 13px
}

.dtr-post-img {
    width: 40%
}

.blogbox img {
    width: 100%;
    height: 170px;
    transition: 0.3s
}

.blogbox {
    transition: 0.3s
}

.blogcontentbox {
    padding: 20px;
}

.blogbox:hover img {
    transform: scale(1.1)
}

.social-icons a {
    color: #000;
    background: #fff;
    padding: 10px;
    border-radius: 30px;
    box-shadow: rgb(0 0 0 / .24) 0 3px 8px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s;
    text-decoration: none;
}

.social-icons a:hover {
    background: var(--themecolor);
    color: var(--whitecolor)
}

.PaymentButton--rzp-dark-standard.svelte-ekc7fv.svelte-ekc7fv {
    background: #ddd;
    border-color: #072654
}

.PaymentButton.svelte-ekc7fv.svelte-ekc7fv {
    position: relative;
    display: inline-block;
    min-width: 160px;
    height: 40px;
    padding: 0;
    border-radius: 3px;
    text-align: center;
    font-style: italic;
    font-family: Muli, helvetica, sans-serif;
    font-display: swap;
    overflow: hidden;
    border: 1px solid #fff0;
    outline: none;
    cursor: pointer;
    -webkit-tap-highlight-color: #fff0;
    text-decoration: none;
    margin: 30px 0
}

.PaymentButton--rzpTheme.svelte-ekc7fv.svelte-ekc7fv::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 0;
    width: 46px;
    height: 100%;
    background: #1e40a0;
    border-radius: 2px 0 0 2px;
    transform: skew(-15deg, 0)
}

svg.svelte-ekc7fv.svelte-ekc7fv {
    position: absolute;
    top: 0;
    left: 0;
    margin: 9px 11px
}

.PaymentButton--rzpTheme.svelte-ekc7fv .PaymentButton-contents.svelte-ekc7fv {
    padding-left: 60px;
    padding-top: 5px
}

.PaymentButton-text.svelte-ekc7fv.svelte-ekc7fv {
    display: block;
    min-height: 18px;
    line-height: 18px;
    font-size: 14px;
    font-weight: 800;
    opacity: 1;
    text-transform: initial
}

.PaymentButton-securedBy.svelte-ekc7fv.svelte-ekc7fv {
    font-size: 8px;
    line-height: 10px;
    text-transform: initial;
    margin-top: 0;
    opacity: .6
}

.certificates {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 2rem 0;
    margin-top: 1rem;
    flex-wrap: wrap;
    padding-bottom:0px;
}

.certificates>div img {
    height: 30px;
    object-fit: cover
}

.certificates>div {
    height: 30px
}

.fixed-header .toolbar-area {
    max-height: 0;
    opacity: 0;
    padding-block: 0;
    margin-block: 0;
    border-bottom-width: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .toolbar-area {
        transition-duration: 0.01ms;
        transition-delay: 0ms;
    }
}

.topheaderflx {
    display: flex;
    width: 85%;
    position: inherit;
    visibility: visible;
    background: #fff0;
    flex-direction: row;
    align-items: center;
    height: 100%;
}

.topheaderflx .navbar-nav {
    flex-direction: row;
    gap: 10px;
    margin-top:0px !important;
    height:100%;
}

@media screen and (max-width:768px) {
    .metric h3 {
        font-size: 16px;
        margin: 0;
    }

    .metric p {
        margin: 6px 0 0;
        color: #000;
        font-size: 12px;
    }

    .homgiveproducts {
        gap: 10px;
    }

    .homerightslidecontent {
        margin-top: 20px;
    }

    .open-btn {
        display: block
    }
}

header {
    transition: all 0.4s ease
}

.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background-color: #fff;
    box-shadow: 0 4px 10px rgb(0 0 0 / .1);
    animation: slideDown 0.4s ease-in-out
}

/* Product hero — paired CTAs: same height, same radius, shared language */
.product-hero-actions {
    display: flex;
    /* flex-wrap: wrap; */
    align-items: stretch;
    gap: 12px;
    margin-top: 22px;
}

.product-hero-actions__btn {
    box-sizing: border-box;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 22px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    text-decoration: none;
    border-radius: 12px;
    border-width: 2px;
    border-style: solid;
    cursor: pointer;
    font-family: inherit;
    touch-action: manipulation;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

/* Primary: split “Shop Now” style — dark #0f4162 icon tile + white label band (Ui-style D) */
.product-hero-actions__btn--primary.product-hero-actions__btn--split {
    gap: 14px;
    justify-content: flex-start;
    padding: 6px 22px 6px 8px;
    color: #0f4162;
    background: #fff;
    border-width: 2px;
    border-color: rgba(255, 255, 255, 0.55);
    border-radius: 14px;
    font-weight: 700;
    letter-spacing: -0.02em;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.product-hero-actions__primary-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 8px;
    background: #a5d3ff4a;
    border: 1px solid #b3bec9;
    color: #163c62;
    line-height: 0;
    transition: background-color 0.2s ease;
}

.product-hero-actions__badge-cal {
    display: block;
    flex-shrink: 0;
}

.product-hero-actions__btn--primary.product-hero-actions__btn--split .product-hero-actions__label {
    padding: 0;
    color: inherit;
}

.product-hero-actions__btn--primary.product-hero-actions__btn--split:hover {
    color: #0a3550;
    background: #fafcfd;
    border-color: rgba(255, 255, 255, 0.82);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
}

.product-hero-actions__btn--primary.product-hero-actions__btn--split:hover .product-hero-actions__primary-badge {
    background: #0d3856;
    color:#fff;
}
.product-hero-actions__btn--primary.product-hero-actions__btn--split:active {
    transform: translateY(1px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.product-hero-actions__btn--outline {
    color: #fff;
    background: transparent;
    border-radius: 14px;
    border-color: rgba(255, 255, 255, 0.58);
    box-shadow: none;
}

.product-hero-actions__btn--outline:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.85);
    box-shadow: none;
}

.product-hero-actions__btn--outline:active {
    transform: translateY(1px);
}

.product-hero-actions__btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.product-hero-actions__btn--primary:focus-visible {
    outline-color: #fff;
}

.product-hero-actions__btn--outline:focus-visible {
    outline-color: #c8ff4a;
}

.product-hero-actions__arrow {
    display: inline-flex;
    font-size: 0.95em;
    transition: transform 0.2s ease;
}

.product-hero-actions__btn--outline:hover .product-hero-actions__arrow {
    transform: translateX(4px);
}

@media (max-width: 480px) {
    .product-hero-actions {
        /* flex-direction: column; */
        align-items: stretch;
    }

    .product-hero-actions__btn {
        width: 100%;
        justify-content: center;
    }

    .product-hero-actions__btn--primary.product-hero-actions__btn--split {
        justify-content: center;
        padding-left: 18px;
        padding-right: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .product-hero-actions__btn,
    .product-hero-actions__btn:hover,
    .product-hero-actions__btn:active,
    .product-hero-actions__arrow,
    .product-hero-actions__btn--outline:hover .product-hero-actions__arrow {
        transition: none;
        transform: none;
    }
}

/* —— Product page hero (layout + surface; scoped to .product-hero-shell) —— */
.product-hero-shell {
    position: relative;
    overflow: hidden;
    padding-top: clamp(132px, 13vw, 200px);
    padding-bottom: clamp(44px, 6vw, 76px);
    background-color: #0f4162;
    background-image:
        linear-gradient(122deg, rgba(15, 65, 98, 0.94) 0%, rgba(18, 72, 108, 0.86) 48%, rgba(11, 52, 82, 0.93) 100%),
        url("../images/probg.svg");
    background-size: cover, cover;
    background-position: center, 72% 36%;
    background-repeat: no-repeat, no-repeat;
}


.product-hero-shell .container {
    z-index: 1;
}

.product-hero-copy {
    max-width: 34rem;
}

.product-hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 79%);
}

.product-hero-eyebrow__mark {
    flex-shrink: 0;
    width: 32px;
    height: 2px;
    background: #fff;
}

.product-hero-copy h1 {
    margin: 0 0 18px;
    font-size: clamp(1.75rem, 3.2vw, 2.65rem);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -0.035em;
    color: #f4fffc;
}

.product-hero-heading-accent {
    display: block;
    margin-top: 10px;
    font-size: 0.88em;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #9fe9dc;
}

.product-hero-lede {
    margin: 0;
    max-width: 36em;
    font-size: 16px;
    line-height: 1.58;
    color: rgb(255 255 255 / 90%);
}

.product-hero-points {
    list-style: none;
    padding: 0;
    margin: 22px 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
}

.product-hero-points li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    background: rgba(0, 0, 0, 0.22);
    font-size: 14px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.88);
}

.product-hero-points__k {
    flex-shrink: 0;
    min-width: 1.5em;
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
    color: var(--themecolor);
    opacity: 0.95;
}

.product-hero-actions--in-hero {
    margin-top: 26px;
}

.product-hero-visual {
    margin: 0;
    padding: 0 0 0 clamp(0px, 3vw, 18px);
}

.product-hero-visual__frame {
    position: relative;
    padding: 12px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0 40px 2px 16px;
    box-shadow: 16px 20px 0 rgba(0, 0, 0, 0.28);
}

.product-hero-visual__frame img {
    display: block;
    width: 100%;
    object-fit: contain;
}

.product-hero-visual__tag {
    margin: 16px 0 0 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
}

@media (max-width: 575px) {
    .product-hero-points {
        grid-template-columns: 1fr;
    }

    .product-hero-visual {
        padding-left: 0;
        margin-top: 8px;
    }

    .product-hero-visual__frame {
        box-shadow: 10px 12px 0 rgba(0, 0, 0, 0.24);
    }
}

.slick-prev {
    background: #fff;
    padding: 10px;
    border: none;
    border-radius: 30px;
    box-shadow: rgb(0 0 0 / .24) 0 3px 8px;
    position: absolute;
    left: 0;
    top: 40%;
    z-index: 999;
    width: 42px;
    transition: 0.3s;
}

.slick-arrow:hover {
    background: #07b49f;
    color: #fff;
}

.slick-next {
    background: #fff;
    padding: 10px;
    border: none;
    border-radius: 30px;
    box-shadow: rgb(0 0 0 / .24) 0 3px 8px;
    position: absolute;
    right: 0;
    top: 40%;
    width: 42px;
    transition: 0.3s;
}




.why-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 50px;
    background: #f2f9fd;
    border-radius: 10px;
    max-width: 1200px;
    margin: auto
}

.selectcalendarbox .left-section {
    padding: 20px 20px;
    position: relative;
    width: 50%;
    padding-left: 0px;
    background:url(../images/demo-bg.webp), linear-gradient(90deg, #000000cc, #0000009c, transparent);
    background-blend-mode: multiply;
    background-size: cover;
    background-position: top;
}

.left-section {
    padding: 20px 20px;
    position: relative;
    width: 50%;
    padding-left: 0px;
}

.mainflexinnerbox {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.maniwhysec {
    display: flex;
    align-items: center;
    border-radius: 10px;
    overflow: hidden;
}

.left-section h1 {
    font-size: 40px;
    margin-bottom: 15px;
    color: var(--themecolor)
}

.left-section h1 span {
    color: #444;
    font-weight: 700
}

.feature {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
    gap: 10px;
}


.feature--shape .feature__num i{
    font-size: 20px;
    border-radius: 100%;
    height: unset;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature--shape-1  .feature__num i{color: #e984a3;}
.feature--shape-2  .feature__num i{color: #83d4c5;}
.feature--shape-3  .feature__num i{color: #3bb5d5;}
.feature--shape-4  .feature__num i{color: #6f8ce5;}

.feature img {
    width: 45px;
    height: 45px;
    margin-right: 15px
}

.feature .text {
    font-size: 16px;
    color: #484848;
    line-height: 1.5;
    font-weight: 500;
    width: 75%;
}

.feature .text strong {
    color: #2f6b92;
    font-weight: 700;
    font-size: 18px;
    display: block;
}

.right-chooseimg {
    text-align: center;
    width: 45%;
}

.why-with-media {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}

.why-with-media:hover .why-with-media__cta .btn.why-with-cta, .why-with-media:focus-within .why-with-media__cta .btn.why-with-cta {
    transform: translate(-4px, -5px) scale(1.06);
    box-shadow: 8px 8px 0 #121c1c, 0 0 0 3px rgba(244, 240, 232, 0.95), 0 14px 36px rgba(0, 0, 0, 0.22);
    position: relative;
    z-index: 3;
}

.why-with-media__img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 390px;
    transition: transform 0.38s ease, filter 0.38s ease, opacity 0.38s ease;
    object-fit: cover;
}

.why-with-media__cta {
    position: absolute;
    left: 22px;
    bottom: 18px;
    display: flex;
    justify-content: flex-start;
    z-index: 3;
}

.right-chooseimg:hover .why-with-media__img, .why-with-media:focus-within .why-with-media__img {
    transform: scale(1.03);
    filter: brightness(0.66) saturate(0.92);
}


.why-with-media__cta .btn.why-with-cta {
    padding: 0;
    gap: 0;
    overflow: hidden;
    align-items: stretch;
    border: 1.5px solid #121c1c;
    border-radius: 3px;
    background: #f4f0e8;
    color: #121c1c;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    box-shadow: 4px 4px 0 #121c1c;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
    display: inline-flex;
}

.why-with-cta__txt {
    padding: 0.7rem 0.65rem 0.7rem 0.85rem;
    align-self: center;
    display:block;
}

.why-with-cta__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.65rem;
    background: #121c1c;
    color: #f4f0e8;
    font-size: 0.95rem;
}

.why-with-media__cta .btn.why-with-cta:hover {
    color: #121c1c !important;
    background: #fffdf7;
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 #121c1c;
}

.mainflexinnerbox--shape {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.mainflexinnerbox--shape .feature--shape {
    --shape-border: #d9dee7;
    --shape-bg: #eef3fb;
    --shape-pill: #ffffff;
    --shape-pill-shadow: rgba(15, 23, 42, 0.12);
    position: relative;
    align-items: center;
    gap: 18px;
    margin-bottom: 0;
    padding: 10px 10px;
    border-radius: 12px;
    background: var(--shape-bg);
    border: 1px solid rgba(15, 23, 42, 0.05);
}

.mainflexinnerbox--shape .feature--shape .feature__num {
    flex: 0 0 55px;
    height: 45px;
    border-radius: 10px;
    border: 3px solid var(--shape-border);
    background: var(--shape-pill);
    box-shadow: 8px 8px 0 var(--shape-pill-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
    color: #7f8a9e;
    line-height: 1;
}

.mainflexinnerbox--shape .feature--shape .text {
    width: auto;
    font-size: 14px;
    line-height: 1.45;
}

.mainflexinnerbox--shape .feature--shape .text strong {
    color: #1f2a37;
    font-size: 18px;
    letter-spacing: 0.01em;
    margin-bottom: 2px;
}

.mainflexinnerbox--shape .feature--shape-1 {
    --shape-border: #ebb4c1;
    --shape-bg: linear-gradient(90deg, #f8dce5 0%, #f3cad6 100%);
    --shape-pill-shadow: rgba(194, 126, 146, 0.3);
}

.mainflexinnerbox--shape .feature--shape-2 {
    --shape-border: #b0ddd7;
    --shape-bg: linear-gradient(90deg, #d8f0eb 0%, #cbe9e3 100%);
    --shape-pill-shadow: rgba(98, 167, 154, 0.3);
}

.mainflexinnerbox--shape .feature--shape-3 {
    --shape-border: #9fd2df;
    --shape-bg: linear-gradient(90deg, #c4eaf4 0%, #aedce9 100%);
    --shape-pill-shadow: rgba(93, 151, 170, 0.3);
}

.mainflexinnerbox--shape .feature--shape-4 {
    --shape-border: #a9b7e7;
    --shape-bg: linear-gradient(90deg, #c8d2f5 0%, #b3c0ef 100%);
    --shape-pill-shadow: rgba(99, 118, 177, 0.3);
}

@media (max-width:575.98px) {
    .feature {
        margin-bottom: 20px;
    }

    .mainflexinnerbox {
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    .feature i {
        width: 45px;
        height: 45px;
        font-size: 18px;
    }

    .feature .text strong {
        font-size: 16px;
    }

    .mainflexinnerbox--shape .feature--shape {
        padding: 14px 12px;
        gap: 12px;
        flex-direction: column;
        align-items: start;
    }

    .mainflexinnerbox--shape .feature--shape .feature__num {
        flex-basis: 45px;
        height: 35px;
        font-size: 24px;
    }

    .mainflexinnerbox--shape .feature--shape .text strong{
        font-size: 15px;
    }
    .mainflexinnerbox--shape .feature--shape .text{
        font-size: 12px;
    }


}



.formtitle {
    margin-bottom: 30px
}

.formverifybtn {
    width: 100%;
    height: 100%;
    background: var(--themecolor);
    border-radius: 0;
    color: #fff
}

.producttabscontent {
    position: relative;
    margin-bottom: 1.5rem;
}

.ourproductflxbox {
    display: flex;
    gap: 22px 28px;
}

.ourproductflxbox a.portal-offer-card {
    display: block;
    box-sizing: border-box;
    width:100%;
    text-decoration: none;
    text-align: left;
    color: #0f172a;
    position: relative;
    z-index: 1;
    outline: none;
    transition: transform 0.22s ease;
}
.inner-domainimg{
    width: 100%;
    height: 230px;
    position: relative;
}
.inner-domainimg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}
.b2c-title1{
    position: absolute;
    top: -16px;
    right: 16px;
    background: #163c62;
    color: #fff;
    padding: 5px 20px;
    border-radius: 30px;
    font-size: 14px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.b2c-title2{
    position: absolute;
    top: 34px;
    right: 186px;
    background: #fff;
    color: #000;
    padding: 5px 20px;
    border-radius: 30px;
    font-size: 13px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    transform: rotate(-6deg);
    width:fit-content;
}

.b2c-title3{
    position: absolute;
    top: 75px;
    right: 186px;
    background: #fff;
    color: #000;
    padding: 5px 20px;
    border-radius: 30px;
    font-size: 13px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    transform: rotate(-6deg);
}

.b2c-title4 {
    position: absolute;
    top: 118px;
    right: 186px;
    background: #fff;
    color: #000;
    padding: 5px 20px;
    border-radius: 30px;
    font-size: 14px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    transform: rotate(-6deg);
    width: fit-content;
}

/* B2B card: floating pills inside image (same vibe as B2C), positions tuned for handshake/tablet crop */
.inner-domainimg--b2b {
    border-radius: 20px;
}

.inner-domainimg--b2b img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.inner-domainimg--b2b .b2b-float {
    position: absolute;
    z-index: 2;
    box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px;
    width: fit-content;
    pointer-events: none;
    background: #fff;
    color: #000;
    padding: 5px 20px;
    border-radius: 30px;
    font-size: 13px;
}

.inner-domainimg--b2b .b2b-float--flights {
    top: 60%;
    left: 30%;
    background: #fff;
    color: #000;
    transform: rotate(10deg);
}

.inner-domainimg--b2b .b2b-float--hotels {
    top: 70%;
    right: 25%;
    background: #fff;
    color: #000;
    transform: rotate(11deg);
}

.inner-domainimg--b2b .b2b-float--transfers {
    top: 74%;
    left: 20%;
    background: #fff;
    color: #000;
    transform: rotate(11deg);
}

.inner-domainimg--b2b .b2b-float--packages {
    bottom: -1px;
    right: 30%;
    background: #fff;
    color: #000;
    transform: rotate(15deg);
}

.ourproductflxbox a.portal-offer-card:hover {
    transform: translateY(-3px);
}
.ourproductflxbox a.portal-offer-card:hover  .portal-offer-card__shell{
    background:#163c62;
}
.ourproductflxbox a.portal-offer-card:hover .portal-offer-card__lane{
    color:#fff;
}

.ourproductflxbox a.portal-offer-card:focus-visible {
    outline: 2px solid var(--themecolor);
    outline-offset: 4px;
    border-radius: 20px;
}

.portal-offer-card__shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 14px 14px 16px;
    background: #f3f3f3;
    border-radius: 18px;
    border: 1px solid #ffffff;
    box-shadow: 8px 8px 0 0 rgba(3, 24, 17, 0.08);
    transition: 0.22s ease;
}

@keyframes home-left-circle-radiate {
    0% {
        box-shadow:
            0 0 0 0 rgba(22, 72, 118, 0.5),
            0 0 22px rgba(22, 72, 118, 0.42),
            0 0 48px rgba(22, 72, 118, 0.22),
            0 0 72px rgba(9, 181, 152, 0.14);
    }
    48% {
        box-shadow:
            0 0 0 52px rgba(22, 72, 118, 0),
            0 0 28px rgba(22, 72, 118, 0.48),
            0 0 72px rgba(22, 72, 118, 0.28),
            0 0 110px rgba(9, 181, 152, 0.22);
    }
    100% {
        box-shadow:
            0 0 0 0 rgba(22, 72, 118, 0),
            0 0 22px rgba(22, 72, 118, 0.42),
            0 0 48px rgba(22, 72, 118, 0.22),
            0 0 72px rgba(9, 181, 152, 0.14);
    }
}

@keyframes home-left-circle-pulse {
    0%,
    100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.12);
    }
}

.home-left-circle {
    position: absolute;
    left: -5%;
    top: 11%;
    width: 160px;
    height: 150px;
    background: #164876;
    border-radius: 100%;
    animation:
        home-left-circle-radiate 5.5s ease-out infinite,
        home-left-circle-pulse 5.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .home-left-circle {
        animation: none;
        box-shadow: 0 0 20px rgba(22, 72, 118, 0.35);
    }
}

.ourproductflxbox a.portal-offer-card:hover .portal-offer-card__shell {
    box-shadow: 0 16px 40px rgba(15, 65, 98, 0.12);
    border-color: #d5dee8;
}

.portal-offer-card__lane {
    display: block;
    margin: 0 0 10px 4px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #94a3b8;
}

.portal-offer-card__inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 16px 16px 14px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #eef2f6;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
    transition: box-shadow 0.22s ease;
}



.portal-offer-card__title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin-bottom: 8px;
    color: #0f172a;
}

.portal-offer-card__hint {
    display: block;
    flex: 1;
    font-size:16px;
    line-height: 1.45;
    color: #64748b;
    margin-bottom: 16px;
}

.portal-offer-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
}

.portal-offer-card__meta {
    font-size: 0.75rem;
    line-height: 1.3;
    color: #64748b;
}

.portal-offer-card__action {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--themecolor);
}

.portalslide {
    display: flex;
    gap: 14px;
    border-radius: 18px;
    overflow: hidden;
}

.portalcardflx {
    flex: 1;
    min-width: 0;
    width: 100%;
    height: 350px !important;
    border-radius: 14px;
    overflow: hidden;
}

.portalcardflx img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.prodcutpara {
    padding-top: 50px;
}

.prodcutpara p {
    font-size: 16px;
}

@media (prefers-reduced-motion: reduce) {
    .ourproductflxbox a.portal-offer-card:hover {
        transform: none;
    }
}

.featuretopheading h2,
.featuretopheading h1 {
    font-size: 50px;
    font-weight: 600;
    line-height: 50px;
    text-align: center;
    color: #fff
}

.featuretopheading h4 {
    text-align: center;
    margin-top: 20px;
    font-size: 20px;
    font-weight: 400;
    color: #fff
}

.featuretopheading P {
    margin-top: 20px;
    color: #fff
}

.featurestabcontents {
    display: grid;
    gap: 30px;
    grid-template-columns: 1fr 1fr 1fr
}

.material-icons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: 500
}

.featurecardbox a {
    text-decoration: none;
    color: #000
}

.featurecardbox {
    padding: 20px;
    box-shadow: rgb(100 100 111 / .2) 0 7px 29px 0;
    border-radius: 20px;
    transition: all 0.7s ease-out
}

.featurecardbox p {
    margin-top: 12px;
    font-size: 15px;
    text-align: center
}

.featurecardbox:hover {
    background: var(--secondrycolor);
    transform: scale(1.1)
}

.featurecardbox:hover a {
    color: #fff
}

.featurecardbox:hover .material-icons svg {
    transform: scaleX(-1);
    transition: all 0.3s ease-out
}

.aboutotpbanner {
    width: 100%;
    height: 250px;
    position: relative;
    Background: linear-gradient(-180deg, rgb(0 0 0 / 77%), rgb(255 255 255 / 0%)) fixed, url(../../assets/images/contactusnew.webp);
    background-size: cover;
    background-position: center;
}

.aboutotpbanner img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.aboutotpbanner h4,
.aboutotpbanner h1 {
    font-size: 50px;
    position: absolute;
    top: 40%;
    width: 100%;
    text-align: center;
    color: #fff
}

.ourmissionbox {
    text-align: center
}

.ourmissionbox img {
    height: 360px
}

.ourmissioncontent {
    width: 70%
}

.flyshopjourneyconte h4 {
    font-size: 18px;
    margin: 20px 0;
    color: var(--themecolor)
}

.contacttitle {
    margin-bottom: 50px;
    font-size: 20px;
    font-weight: 600
}

.rightcontentboxflx {
    background-color: #FFF;
    -border-radius: 16px 16px 16px 16px;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 30px;
    padding-right: 30px;
    box-shadow: rgb(0 0 0 / .24) 0 3px 8px;
    margin-top: 80px;
    border-radius: 10px;
    padding: 120px 140px;
    position: relative;
    z-index: 1
}

.rightcontentboxflx::before {
    content: '';
    background: url(/assets/images/conformbg.webp) no-repeat center;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: .05;
    position: absolute;
    z-index: -1
}

.corpocardflx {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 15px;
    border: 1px solid #ededed;
    border-radius: 15px;
    margin-bottom: 20px
}

.corporightcontent p {
    margin-bottom: 0
}

.contacthead h4 {
    font-size: 25px;
    margin-bottom: 20px;
    font-weight: 600
}

.form-control:hover {
    box-shadow: none
}

.form-control:focus {
    box-shadow: none;
    border-color: var(--themecolor)
}

.form-floating>.form-select {
    background: #fff0;
    border: 1px solid #ddd;
    padding: 1rem .75rem 12px
}

.form-floating>.form-select:focus {
    border-color: var(--themecolor)
}

.contopicon svg:hover {
    animation-name: elementor-animation-buzz-out;
    animation-duration: .75s;
    animation-timing-function: linear;
    animation-iteration-count: 1
}

@keyframes elementor-animation-buzz-out {
    10% {
        transform: translateX(3px) rotate(2deg)
    }

    20% {
        transform: translateX(-3px) rotate(-2deg)
    }

    30% {
        transform: translateX(3px) rotate(2deg)
    }

    40% {
        transform: translateX(-3px) rotate(-2deg)
    }

    50% {
        transform: translateX(2px) rotate(1deg)
    }

    60% {
        transform: translateX(-2px) rotate(-1deg)
    }

    70% {
        transform: translateX(2px) rotate(1deg)
    }

    80% {
        transform: translateX(-2px) rotate(-1deg)
    }

    90% {
        transform: translateX(1px) rotate(0)
    }

    100% {
        transform: translateX(-1px) rotate(0)
    }
}

#popupModal {
    display: none;
    position: fixed;
    z-index: 999999999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 64%);
    backdrop-filter: blur(4px)
}

.popup-content {
    margin: 10% auto;
    width: fit-content;
    border-radius: 30px;
    text-align: center;
    position: relative;
    height: 100%
}

#closeBtn {
    position: absolute;
    top: -30px;
    right: -24px;
    cursor: pointer;
    font-weight: 700;
    font-size: 20px;
    color: #fff;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .2);
    border-radius: 50%
}

.queryformcontent {
    display: flex;
    align-items: center;
    flex-direction: column;
    border-radius: 30px;
    height: fit-content !important;
    background: #fff
}

.leftformimg {
    width: 100%;
    position: relative
}

.rightinputs {
    width: 100%;
    text-align: left
}

.formdemo {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 22px;
    font-weight: 700
}

.formdemo {
    font-weight: 700;
    font-size: 25px;
    animation: blinkColor 1s infinite
}

@keyframes blinkColor {
    0% {
        color: red
    }

    25% {
        color: #09b598
    }

    50% {
        color: #2f6c8d
    }

    75% {
        color: #fa0
    }

    100% {
        color: red
    }
}

input:invalid {
    border-color: #fff;
}

#success-popup {
    animation: fadeIn 1s ease-in
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px)
    }

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

.popinputs {
    position: relative;
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto
}

.popinputs input {
    width: 100%;
    padding: 12px 15px;
    font-size: 1rem;
    letter-spacing: .062rem;
    border: 1px solid #ccc;
    background: #fff0;
    border-radius: 10px
}

.popinputs input:focus-visible {
    outline: none
}

.popinputs select:focus-visible {
    outline: none
}

.selctcountryinputs #selectCountryCode {
    padding: 12px 15px;
    border-radius: 10px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0
}

.inputflxicon {
    position: absolute;
    top: 12px;
    left: 17px;
    color: #999
}

.popupbtn {
    position: absolute;
    text-align: center;
    width: 100%;
    left: 0;
    bottom: -30px;
}

.popupbtn button {
    width: 100%;
    background: var(--themecolor);
    color: #fff;
    border-radius: 30px;
    padding: 10px 12px;
    margin: auto;
    text-align: center;
    width: fit-content;
    border: none
}

.inner_ctc_box {
    width: 700px;
    margin: auto;
    padding: 20px;
    color: #000;
    text-align: center;
}

.inner_ctc_box h4 {
    font-size: 20px;
    font-weight: 600;
}

.inner_ctc_box p {
    font-size: 16px;
    color: rgb(0 0 0 / 55%);
}

.formcontent {
    padding: 30px;
    width: 100%;
}

.popupbtn button {
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-name: shake-hv;
    animation-timing-function: ease-in-out;
    padding: 10px;
    border-radius: 10px;
    color: #fff
}

.leftformimg h4 {
    margin-bottom: 0;
    font-size: 20px;
    font-weight: 600;
    padding: 10px;
    background: var(--1, linear-gradient(89deg, #08ab90 7.51%, #3365c7 94.39%));
    color: #fff;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px
}

.selctcountryinputs .selectcountryform .dropdown-toggle {
    padding: 12px 15px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0
}

#countrySearch {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    font-size: 12px;
    padding: 8px 10px
}

.invaliderror {
    position: absolute
}

.popupbtn :disabled {
    background: #ddd
}

.popinputs label {
    font-size: 18px;
    margin-bottom: 15px;
    display: block;
    text-align: center
}

.leftformimg img {
    width: 100%;
    height: 220px
}

.selctcountryinputs {
    display: flex;
    align-items: center;
    margin-bottom: 10px
}

.close-btn {
    display: none
}

.open-btn {
    display: none
}

.contopicon {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 20px
}

.contopicon svg {
    padding: 10px;
    background: #dce7e5;
    border-radius: 30px
}

.contopicon span {
    margin-right: 10px
}

.alllocationdtls {
    width:100%;
}

.allinfoconact h4 {
    font-size: 18px;
    font-weight: 600;
    color: #0f172a;
}

.allinfoconact p {
    font-size: 14px;
    color: #555
}

.alllocationdtls .allinfoconact {
    margin-bottom: 30px
}

.alllocationdtls .allinfoconact:last-child {
    margin-bottom: 0
}

.contactbgflx {
    position: relative;
    z-index: 1
}

.contactbgflx::before {
    content: '';
    background: url(/assets/images/contactbeg.png) no-repeat center;
    background-position: center;
    background-size: cover;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
    opacity: 4%;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1
}

/* —— Contact page two-column split (.contact-modern) —— */
.contact-modern {
    background: #fff;
}

.contact-modern__split {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.5rem;
}

@media (min-width: 992px) {
    .contact-modern__split {
        flex-wrap: nowrap;
        gap: 2rem;
    }

    .contact-modern__split .contact-modern__col {
        width:65%;
    }

    .contact-modern__split .contact-modern__col--form {
        position: sticky;
        top: 5.5rem;
        align-self: flex-start;
        width:45%;
    }
}

@media (min-width: 1200px) {
    .contact-modern__split {
        gap: 3rem;
    }
}

@media (max-width: 991.98px) {
    .contact-modern__split .contact-modern__col {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

.contact-modern .contacttitle {
    margin-bottom: 1rem;
    font-size: clamp(1.45rem, 3vw, 2rem);
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.contact-modern__eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #0ab592;
    margin-bottom: 0.6rem;
}

.contact-modern__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.25rem;
    margin-bottom: 1.75rem;
    position: relative;
    z-index: 1;
}

.contact-modern__grid.contactbgflx::before {
    border-radius: 12px;
}

.contact-modern__cell {
    border: 1px solid #eef2f6;
    border-radius: 12px;
    padding: 1rem 1.05rem;
    background: #fafbfc;
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    min-height: 100%;
    flex-direction:column;
}

.contact-modern__cell-icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #163c62;
    font-size: 1.05rem;
}

.contact-modern__cell-body {
    min-width: 0;
    font-size: 0.88rem;
    line-height: 1.45;
    color: #475569;
}

.contact-modern__cell-kicker {
    display: block;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7e7e7e;
    margin-bottom: 0.35rem;
}

.contact-modern__cell-strong {
    font-size: 1rem;
    font-weight: 700;
}

.contact-modern__cell-strong a {
    color: #0f172a;
    text-decoration: none;
}

.contact-modern__cell-strong a:hover {
    color: #07b49f;
}

.contact-modern__cell-body .alllocationdtls {
    padding-top: 0;
}

.contact-modern__cell-body .allinfoconact {
    margin-bottom: 0.85rem;
}

.contact-modern__cell-body .allinfoconact:last-child {
    margin-bottom: 0;
}

.contact-modern__policies {
    font-size: 0.95rem;
    margin-bottom: 1rem;
    color: #0f172a;
}

.contact-modern__policies a {
    font-weight: 700;
    color: #0f172a;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.contact-modern__policies a:hover {
    color: #ea580c;
    border-bottom-color: #fdba74;
}

.contact-modern__divider {
    border: 0;
    border-top: 1px solid #e8ecf1;
    margin: 1rem 0 1.25rem;
    opacity: 1;
}

.contact-modern__social-label {
    display: block;
    font-weight: 700;
    font-size: 0.95rem;
    color: #0f172a;
    margin-bottom: 0.65rem;
}

.contact-modern__social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.contact-modern__social-links a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    text-decoration: none;
}

.contact-modern__social-links a:hover {
    color: #0f4162;
    border-color: #1d6595;
    background: #eaf7ff;
}

.contact-modern__form-wrap {
    border: 1px solid #e8ecf1;
    border-radius: 14px;
    padding: clamp(1.35rem, 3.5vw, 2rem);
    background: #fff;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.06);
}

.contact-modern__form-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #0f172a;
    margin-bottom: 0.45rem;
}

.contact-modern__form-title {
    font-size: clamp(1.25rem, 2.2vw, 1.65rem);
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 1.35rem;
    letter-spacing: -0.02em;
}

.contact-modern__control {
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
}

.contact-modern .form-floating > .form-control:focus,
.contact-modern .form-floating > .form-select:focus {
    border-color: #ea580c;
    box-shadow: none;
}

.contact-modern__textarea {
    min-height: 120px;
}

.contact-modern__submit {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.85rem 1.15rem;
    font-size: 1rem;
    font-weight: 700;
    color: #fff !important;
    background: #163d62 !important;
    border: none !important;
    border-radius: 10px;
    transition: background 0.2s, transform 0.15s;
}

.contact-modern__submit:hover {
    background: #0e2e4c !important;
    transform: translateY(-1px);
}

.contact-modern .contact-phone-wrap .iti input.contact-modern__control {
    border-radius: 10px;
}

/* Custom Agent Type select (fieldset-style label + panel) */
.contact-modern__select-field {
    position: relative;
}

.contact-modern__select {
    position: relative;
    z-index: 2;
}

.contact-modern__select.is-open {
    z-index: 60;
}

.contact-modern__select-legend {
    position: absolute;
    left: 14px;
    top: 0;
    transform: translateY(-50%);
    padding: 0 6px;
    background: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #163d62;
    z-index: 3;
    pointer-events: none;
    line-height: 1.2;
}
.contact-phone-wrap .iti--inline-dropdown .iti__dropdown-content{
    z-index: 9;
}

.contact-modern__select-trigger {
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 58px;
    padding: 0.85rem 1rem;
    margin: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 500;
    color: #0f172a;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
}

.contact-modern__select-trigger:hover {
    border-color: #163d62;
}

.contact-modern__select-trigger:focus {
    outline: none;
    border-color: #d7d7d7;
    box-shadow: 0 0 0 1px #d2d2d2;
}

.contact-modern__select-value {
    flex: 1;
    min-width: 0;
}

.contact-modern__select-value.is-placeholder {
    color: #94a3b8;
    font-weight: 400;
}

.contact-modern__select-caret {
    flex-shrink: 0;
    font-size: 0.7rem;
    color: #64748b;
    transition: transform 0.2s ease;
}

.contact-modern__select.is-open .contact-modern__select-caret {
    transform: rotate(180deg);
}

.contact-modern__select-menu {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0.4rem 0;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% - 2px);
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.14);
    max-height: 240px;
    overflow-y: auto;
}

.contact-modern__select-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    margin: 0;
    font-size: 0.95rem;
    color: #334155;
    cursor: pointer;
    transition: background 0.12s ease;
}

.contact-modern__select-item:hover {
    background: #f1f5f9;
}

.contact-modern__select-item.is-selected,
.contact-modern__select-item[aria-selected="true"] {
    background: #f1f5f9;
}

.contact-modern__select-item-label {
    flex: 1;
    min-width: 0;
}

.contact-modern__select-item-ind {
    flex-shrink: 0;
    font-size: 0.65rem;
    color: #64748b;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.contact-modern__select-item[aria-selected="true"] .contact-modern__select-item-ind {
    opacity: 1;
}

@media (max-width: 991.98px) {
    .contact-modern__col--form {
        margin-top: 0.5rem;
    }
}

@media (max-width: 575.98px) {
    .contact-modern__grid {
        grid-template-columns: 1fr;
    }
}

.sucesspopflxbox {
    text-align: center;
    padding: 30px;
    background: rgb(0 0 0 / 55%);
    margin-top: 0;
    z-index: 999999999;
    backdrop-filter: blur(4px);
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0
}

.popup-header {
    background: #f9b233;
    color: #fff;
    padding: 10px;
    font-weight: 700;
    font-size: 17px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px
}

.popup-header a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 700
}

.popup-body {
    text-align: center;
    position: relative
}

.celebration {
    height: 10px;
    background: url(https://em-content.zobj.net/thumbs/120/google/350/sparkles_2728.png) no-repeat center;
    background-size: contain
}

.support-section {
    margin-top: 20px
}

.support-section .text {
    position: relative
}

.support-section .text img {
    height: 166px;
    position: absolute;
    left: 0;
    bottom: -14px
}

.bottomlogintext {
    background: #f9b233;
    color: #fff;
    padding: 8px 10px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    padding-left: 200px;
    font-size: 22px;
    font-weight: 600
}

.logincontent {
    text-align: left;
    padding-left: 220px
}

.text span {
    font-size: 20px;
    color: var(--secondrycolor)
}

.text strong {
    color: #f9b233;
    font-size: 16px
}

#error-msg {
    color: red
}

#valid-msg {
    color: #00c900
}

input.error {
    border: 1px solid #ff7c7c
}

.hide {
    display: none
}

.sucessfullcontent {
    width: 400px;
    margin: auto;
    margin-top: 120px;
    background: #fff;
    border-radius: 30px
}

.card-front__heading {
    font-size: 18px;
    margin-top: 5px;
    color: #000;
    font-weight: 700;
}

.card-front__heading span {
    font-weight: 600;
    color: #8c8c8c;
    font-size: 12px;
    margin-top: 3px;
    font-style: italic;
}

.inside-page__heading {
    padding-bottom: 1rem;
    width: 100%
}

.inside-page__heading,
.card-front__text-view {
    font-size: 18px;
    font-weight: 600;
    margin-top: .2rem
}

.inside-page__heading--city,
.card-front__text-view--city {
    color: var(--themecolor)
}

.card-front__tp {
    color: #fafbfa;
    display: flex;
    gap: 10px;
}

.card-front__text-price {
    font-size: 1.2rem;
    margin-top: -.2rem
}

.card-section {
    padding: 30px;
    border: 1px solid transparent;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    width: 100%;
    margin: auto;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    background: #fff;
    position: relative;
    overflow: hidden;
}

.card-section:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(47, 107, 146, 0.15);
    border-color: rgba(47, 107, 146, 0.1);
}

.card-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, var(--themecolor), var(--secondrycolor));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.card-section:hover::before {
    transform: scaleX(1);
}

.featu_main_box .col-lg-4 {
    margin-bottom: 20px;
}

.inside-page__container {
    margin-top: 10px;
}



.featur_icon_box {
    padding: 15px;
    border: 1px solid rgba(47, 107, 146, 0.1);
    background: #f0f8ff;
    border-radius: 15px;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: all 1s ease;
}

.featur_icon_box svg {
    width: 35px;
    height: 35px;
    transition: all 0.3s ease;
}

.featur_icon_box svg path {
    fill: var(--secondrycolor);
    transition: all 0.3s ease;
}


.card-section:hover .featur_icon_box {
    background: var(--secondrycolor);
    box-shadow: 0 10px 20px rgba(47, 107, 146, 0.2);
    transform: rotateY(360deg);
}

.card-section:hover .featur_icon_box svg path {
    fill: #fff;
}

.card-front__heading {
    font-size: 22px;
    margin-top: 15px;
    color: #1a1a1a;
    font-weight: 800;
    line-height: 1.3;
    transition: color 0.3s ease;
}

.card-section:hover .card-front__heading {
    color: var(--secondrycolor);
}

.card-front__heading span {
    font-weight: 500;
    color: #666;
    font-size: 14px;
    margin-top: 0px;
    font-style: normal;
    display: block;
}

.inside-page__container {
    margin-top: 0px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

.inside-page__container p {
    font-size: 16px;
    color: #686868;
    line-height: 1.7;
    margin-bottom: 0;
}

.inside-page__text {
    color: #333
}

.card-front__icon {
    fill: #fafbfa;
    font-size: 3vw;
    height: 3.25rem;
    margin-top: -.5rem;
    width: 3.25rem
}






.inside-page__btn {
    background-color: #fff0;
    border: 3px solid;
    border-radius: .5rem;
    font-size: 1.2rem;
    font-weight: 600;
    margin-top: 2rem;
    overflow: hidden;
    padding: .7rem .75rem;
    position: relative;
    text-decoration: none;
    transition: all .3s ease;
    width: 90%;
    z-index: 10
}

.inside-page__btn::before {
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transform: scaleY(0);
    transition: all .3s ease;
    width: 100%;
    z-index: -1
}

.inside-page__btn:hover {
    color: #fafbfa
}

.inside-page__btn:hover::before {
    transform: scaleY(1)
}

.main {
    background: linear-gradient(to bottom right, #eee8dd, #e3d9c6);
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    width: 100%
}

.card-area {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    height: 100%;
    justify-content: space-evenly;
    padding: 1rem
}

.video__container {
    clip-path: polygon(0% 0%, 100% 0%, 90% 50%, 100% 100%, 0% 100%);
    height: auto;
    min-height: 100%;
    object-fit: cover;
    width: 100%
}


.slidemedia img {
    width: 100%;
    height: 100%
}

/* B2C themes page hero (b2cwebsite.php) */
.b2c-hero {
    position: relative;
    overflow: hidden;
    padding: 0;
    padding-bottom: clamp(2.75rem, 6vw, 4.25rem);
    color: #fff;
    border-bottom: 1px solid #ddd;
    background: #e7f7ff;
}

.b2c-hero__gridline {
    position: absolute;
    inset: 0;
    opacity: 0.11;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
    mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 90%, transparent);
}

.b2c-hero__row {
    margin-top: 0;
}

.b2c-hero__copy {
    text-align: center;
    padding: 90px 0px;
}

@media (min-width: 992px) {
    .b2c-hero__copy {
        text-align: left;
    }
}

.b2c-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 1rem;
    padding: 0.38rem 0.95rem 0.38rem 0.62rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgb(0 0 0 / 94%);
    background:rgb(250 250 250);
    border: 1px solid rgb(211 211 211);
    border-radius: 999px;
}

.b2c-hero__eyebrow-dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--themecolor);
    box-shadow: 0 0 14px rgba(9, 181, 152, 0.85);
}

.b2c-hero__copy h1 {
    margin: 0 0 1rem;
    font-size: clamp(1.85rem, 4.1vw, 2.9rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.14;
    color: #0f0f0f;
}

.b2c-hero__accent {
    background: linear-gradient(95deg, #37a392 0%, #277eb7 42%, #0f4162 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.b2c-hero__lede {
    margin: 0 0 1.4rem;
    font-size: 1.02rem;
    line-height: 1.65;
    color: #000;
    max-width: 38rem;
}

@media (max-width: 991.98px) {
    .b2c-hero__lede {
        margin-left: auto;
        margin-right: auto;
    }
}

.b2c-hero__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 992px) {
    .b2c-hero__chips {
        justify-content: flex-start;
    }
}

.b2c-hero__chips li {
    padding: 0.38rem 0.82rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: rgb(0 0 0 / 95%);
    background: rgb(255 255 255);
    border: 1px solid rgb(218 218 218);
    border-radius: 8px;
}

.b2c-hero__mockup {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (min-width: 992px) {
    .b2c-hero__mockup {
        justify-content: flex-end;
    }
}

.b2c-hero__mockup-ring {
    position: absolute;
    inset: -5% -8% auto auto;
    width: min(420px, 90%);
    height: min(420px, 70vw);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(9, 181, 152, 0.22) 0%, transparent 68%);
    filter: blur(4px);
    pointer-events: none;
    z-index: 0;
}

@keyframes b2c-hero-marquee-up {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(0, -50%, 0);
    }
}

.b2c-hero__marquee-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 500px;
    margin-left: auto;
    height: 600px;
}

@media (min-width: 992px) {
    .b2c-hero__marquee-wrap {
        margin-right: 0;
    }
}

@media (max-width: 991.98px) {
    .b2c-hero__marquee-wrap {
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
        height: clamp(300px, 48vh, 440px);
    }
}

.b2c-hero-marquee-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(10px, 2vw, 16px);
    height: 100%;
    align-items: stretch;
}

.b2c-hero-marquee-col {
    position: relative;
    overflow: hidden;
    padding: 0px 5px;
}

.b2c-hero-marquee-col--invert {
    transform: scaleY(-1);
}

.b2c-hero-marquee-col--invert .b2c-hero-theme {
    transform: scaleY(-1);
}

.b2c-hero-marquee-track {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    will-change: transform;
}

.b2c-hero-marquee-track--up {
    animation: b2c-hero-marquee-up 26s linear infinite;
}

.b2c-hero-marquee-track--invert-speed {
    animation-duration: 28s;
}

.b2c-hero-theme {
    margin: 0;
    position: relative;
    flex-shrink: 0;
    border-radius: 9px;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    border: 1px solid #ddd;
}

.b2c-hero-theme__pill {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    padding: 0.32rem 0.65rem;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.95);
    background: rgba(12, 40, 70, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 6px;
}

.b2c-hero-theme__frame {
    display: block;
    line-height: 0;
    height: 145px;
}

.b2c-hero-theme__frame img {
    width: 100%;
    height: 100%;
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .b2c-hero-marquee-track--up {
        animation: none;
        transform: none;
        will-change: auto;
    }

    .b2c-hero-marquee-col--invert {
        transform: none;
    }

    .b2c-hero-marquee-col--invert .b2c-hero-theme {
        transform: none;
    }

    .b2c-hero-marquee-track > .b2c-hero-theme:nth-child(n + 4) {
        display: none;
    }

    .b2c-hero__marquee-wrap {
        height: auto;
        max-height: none;
    }

    .b2c-hero-marquee-columns {
        height: auto;
    }

    .b2c-hero-marquee-col {
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
    }
}

.laptopslidebox {
    background: url(/assets/images/laptopbg.png) no-repeat center;
    background-size: cover;
    margin: auto;
    position: relative;
    margin-top: 50px;
    width: 640px;
    height: 100%;
    padding: 180px;
    position: relative
}

.floatourtheme {
    position: absolute;
    left: 94px;
    top: 35px;
    width: 503px;
    height: 313px
}

.headingtop {
    text-align: center;
    width: 60%;
    margin: auto
}

.headingtop h2,
.headingtop h1 {
    font-size: 50px;
    font-weight: 500;
    color: #fff
}

.headingtop p {
    color: #fff
}

.leftthemedetails h4 {
    font-size: 28px;
    background: var(--1, linear-gradient(89deg, #08ab90 7.51%, #3365c7 94.39%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: #fff0;
    font-feature-settings: "liga" off, "clig" off;
    font-weight: 700;
    margin-bottom: 25px
}

.leftthemedetails button {
    margin-bottom: 25px
}

.leftthemedetails p {
    font-size: 16px;
    margin-bottom: 15px
}

.leftthemedetails ul li {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    margin-bottom: 15px;
    font-style: italic
}

.leftthemedetails ul li:before {
    float: left;
    display: block;
    content: '\2605';
    color: #ffd900;
    margin: 0 10px 0 0
}

.rightthemeimg {
    width: 50%
}

.leftkeypoints {
    width: 50%
}

.content {
    position: relative
}

.lepmediascreen {
    background: url('../images/laptopbg.webp');
    background-size: cover;
    padding: 34px 30px 44px 32px
}

.screen,
.screen2,
.screen3,
.screen4,
.screen5 {
    display: block;
    width: 81%;
    height: 296px;
    --screen-view-h: 296px;
    overflow: hidden;
    position: relative;
    border-radius: 1px;
    margin: 0 auto;
    margin-top: 0;
    cursor: pointer
}

.screen img,
.screen2 img,
.screen3 img,
.screen4 img,
.screen5 img {
    position: absolute;
    left: 0;
    top: 0;
    bottom: auto;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    z-index: 999;
    transform: translateY(0);
    transition: transform 5s ease;
    -webkit-transition: transform 5s ease;
    will-change: transform
}

.screen:hover img,
.screen2:hover img,
.screen3:hover img,
.screen4:hover img,
.screen5:hover img {
    transform: translateY(min(0px, calc(-100% + var(--screen-view-h))));
    transition: transform 5s ease;
    -webkit-transition: transform 5s ease
}

.mythemeflxbox {
    display: flex;
    align-items: center
}

.homb2bimg {
    width: 55%;
    margin: auto
}

.homb2bimg img {
    width: 100%;
    height: 100%
}

.waves {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 15vh;
    margin-bottom: -8px;
    min-height: 100px;
    max-height: 150px
}

.parallax>use:nth-child(1) {
    -webkit-animation-delay: -2s;
    animation-delay: -2s;
    -webkit-animation-duration: 7s;
    animation-duration: 7s
}

.parallax>use {
    -webkit-animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
    animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite
}

.parallax>use:nth-child(2) {
    -webkit-animation-delay: -3s;
    animation-delay: -3s;
    -webkit-animation-duration: 10s;
    animation-duration: 10s
}

.parallax>use:nth-child(3) {
    -webkit-animation-delay: -4s;
    animation-delay: -4s;
    -webkit-animation-duration: 13s;
    animation-duration: 13s
}

.parallax>use:nth-child(4) {
    -webkit-animation-delay: -5s;
    animation-delay: -5s;
    -webkit-animation-duration: 20s;
    animation-duration: 20s
}

@keyframes move-forever {
    0% {
        -webkit-transform: translate3d(-90px, 0, 0);
        transform: translate3d(-90px, 0, 0)
    }

    100% {
        -webkit-transform: translate3d(85px, 0, 0);
        transform: translate3d(85px, 0, 0)
    }
}

.management-section:before {
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    height: 76px;
    width: 100%;
    background-position: left top;
    background-repeat: repeat-x;
    background: url(b2b/assets/images/pattern-8.png)
}

/* B2B landing hero: light b2c-style copy + product screenshot (not B2C theme marquee) */
.b2b-landing-hero .b2c-hero__copy {
    max-width: 38rem;
}

@media (min-width: 992px) {
    .b2b-landing-hero .col-lg-7 {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
}

.b2b-landing-hero .b2b-hero__visual {
    position: relative;
    width: 100%;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 992px) {
    .b2b-landing-hero .b2b-hero__visual {
        margin-right: 0;
    }
}

.b2b-landing-hero .homb2bimg {
    width: 100%;
    margin: 0 auto;
}

.b2b-landing-hero .homb2bimg img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.b2b-landing-hero .b2c-hero__chips {
    margin-bottom: 1.5rem;
}

.b2b-hero__actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 0.2rem;
}

.b2b-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 42px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    border-radius: 10px;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease;
}

.b2b-hero__btn-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95em;
    line-height: 1;
    opacity: 0.95;
}

.b2b-hero__btn-txt {
    white-space: nowrap;
}

.b2b-landing-hero .b2b-hero__btn:focus-visible {
    outline: 2px solid var(--themecolor);
    outline-offset: 2px;
}

/* Primary: brand fill + soft lift (dark-on-light hero feel) */
.b2b-landing-hero .b2b-hero__btn--primary {
    color: #fff;
    background: #174f6e;
    border: 1px solid #174f6e;
    box-shadow: 0 1px 2px rgb(6 58 52 / 12%), 0 4px 14px rgb(9 120 105 / 22%);
}

.b2b-landing-hero .b2b-hero__btn--primary:hover {
    background:rgb(20, 74, 103);
    border: 1px solidrgb(16, 65, 92);
    box-shadow:
        0 2px 4px rgb(6 58 52 / 14%),
        0 8px 22px rgb(9 120 105 / 26%);
    transform: translateY(-1px);
}

.b2b-landing-hero .b2b-hero__btn--primary:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgb(6 58 52 / 20%);
}

/* Secondary: white card + subtle depth (reference “light” button) */
.b2b-landing-hero .b2b-hero__btn--ghost {
    color: #1e293b;
    background: #fff;
    border: 1px solid rgb(15 23 42 / 10%);
    box-shadow:
        0 1px 2px rgb(15 23 42 / 6%),
        0 4px 16px rgb(15 23 42 / 9%);
}

.b2b-landing-hero .b2b-hero__btn--ghost:hover {
    background: #fafbfc;
    border-color: rgb(15 23 42 / 16%);
    color: #0f172a;
    box-shadow:
        0 2px 4px rgb(15 23 42 / 7%),
        0 8px 22px rgb(15 23 42 / 11%);
    transform: translateY(-1px);
}

.b2b-landing-hero .b2b-hero__btn--ghost:active {
    transform: translateY(0);
    background: #f1f5f9;
}

.b2bsearchimg {
    text-align: center;
    transition: all 4s cubic-bezier(.2, .8, .2, 1) 0s !important
}

.b2bsearchimg img {
    width: 80%
}

.b2brightcontent {
    width: 100%
}

.b2bsearchimg:hover {
    -ms-transform: translate(30px, -30px);
    transform: translate(30px, -30px);
    transition-delay: all 4s cubic-bezier(.2, .8, .2, 1) 0s !important
}

.b2brightcontent h2 {
    background: var(--1, linear-gradient(89deg, #08ab90 7.51%, #3365c7 94.39%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: #fff0;
    font-feature-settings: "liga" off, "clig" off;
    font-weight: 700;
    position: relative
}

.b2brightcontent .b2c-heading {
    background: var(--1, linear-gradient(89deg, #08ab90 7.51%, #3365c7 94.39%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: #fff0;
    font-feature-settings: "liga" off, "clig" off;
    font-weight: 700;
    position: relative;
    margin-bottom: 30px
}

.b2brightcontent p {
    font-size: 20px
}

h3.b2c-heading-child {
    font-family: 'Poppins';
    font-weight: 700;
    color: #3385d9;
    padding-left: 70px;
    font-size: 25px;
    position: relative
}

h3.b2c-heading-child:after {
    content: url(/assets/b2bimages/b2c-bor.png);
    position: absolute;
    padding-top: 1.2em;
    max-width: 100%;
    width: 100%;
    right: -8px;
    top: -62px
}

.airplaneAnimation {
    position: relative;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background-color: #caf0f8;
    overflow: hidden
}

.plane {
    position: relative;
    left: 0;
    top: 75px;
    animation: fly 2s linear infinite
}

@keyframes fly {
    0% {
        transform: translateY(0)
    }

    25% {
        transform: translateY(-10px)
    }

    50% {
        transform: translateY(0)
    }

    75% {
        transform: translateY(10px)
    }

    100% {
        transform: translateY(0)
    }
}

.main {
    position: absolute;
    width: 220px;
    height: 40px;
    background-color: #0077b6;
    top: 100px;
    left: 100px;
    border-radius: 0 100px 30px 100px;
    overflow: hidden;
    box-shadow: inset -10px -10px rgb(0 0 0 / .2);
    z-index: 2
}

.main:before,
.main:after {
    content: "";
    position: absolute;
    background-color: #fdc921;
    top: 10px
}

.main:before {
    width: 40px;
    height: 10px;
    border-radius: 0 0 0 30px;
    left: 190px
}

.main:after {
    width: 5px;
    height: 10px;
    border-radius: 20px;
    left: 160px;
    box-shadow: -10px 0 #fdc921, -20px 0 #fdc921, -30px 0 #fdc921, -40px 0 #fdc921, -50px 0 #fdc921, -60px 0 #fdc921, -70px 0 #fdc921, -80px 0 #fdc921, -90px 0 #fdc921, -100px 0 #fdc921, -110px 0 #fdc921, -120px 0 #fdc921
}

.wingOne {
    position: absolute;
    width: 20px;
    border-right: 20px solid #fff0;
    border-left: 20px solid #fff0;
    border-top: 80px solid #0077b6;
    height: 0;
    top: 115px;
    left: 160px;
    transform: skew(-45deg) rotateX(30deg);
    z-index: 4
}

.wingTwo {
    position: absolute;
    width: 20px;
    border-right: 20px solid #fff0;
    border-left: 20px solid #fff0;
    border-bottom: 80px solid #023e8a;
    height: 0;
    top: 55px;
    left: 160px;
    transform: skew(45deg) rotateX(30deg)
}

.wingTwo:after {
    content: "";
    position: absolute;
    width: 20px;
    border-right: 15px solid #fff0;
    border-left: 15px solid #fff0;
    border-bottom: 35px solid #0077b6;
    height: 0;
    left: -100px;
    top: 29px
}

.wingOne:after {
    content: "";
    position: absolute;
    width: 20px;
    height: 25px;
    background-color: #0077b6;
    top: -105px;
    left: -140px;
    box-shadow: 5px 5px 10px rgb(0 0 0 / .2)
}

.wingTwo:before {
    content: "";
    position: absolute;
    width: 20px;
    height: 25px;
    background-color: #023e8a;
    left: -80px;
    top: 35px;
    transform: skew(-55deg)
}

.clouds {
    position: absolute;
    top: 50px;
    left: 100px
}

@keyframes cloud {
    from {
        left: -150px
    }

    to {
        left: 400px
    }
}

.cloudOne,
.cloudTwo,
.cloudThree {
    position: absolute;
    width: 50px;
    height: 25px;
    background-color: #fff;
    border-radius: 100px 100px 0 0
}

.popinputs p {
    text-align: center;
    margin-bottom: 0
}

.flxmobileinpt {
    display: flex;
    align-items: center;
    flex-direction: column
}

.optsection input {
    display: inline-block;
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 5px;
    border-color: var(--themecolor)
}

.optflxbox {
    display: flex;
    justify-content: center;
    gap: 10px
}

.optsection p {
    font-size: 12px;
    margin-bottom: 15px
}

.cloudOne {
    top: 0;
    left: 0;
    animation: cloud 3s linear infinite reverse
}

.cloudTwo {
    top: 50px;
    left: 100px;
    animation: cloud 2.5s linear infinite reverse
}

.cloudThree {
    top: 250px;
    left: 50px;
    animation: cloud 2.8s linear infinite reverse
}

.cloudOne:before,
.cloudTwo:before,
.cloudThree:before {
    content: "";
    position: absolute;
    width: 25px;
    height: 12.5px;
    background-color: #fff;
    border-radius: 100px 100px 0 0;
    left: -20px;
    top: 12.5px;
    box-shadow: 65px 0 #fff
}

.pollution {
    position: absolute;
    background-color: #fff;
    top: 130px;
    left: 65px;
    width: 30px;
    height: 10px;
    border-radius: 20px;
    opacity: 0;
    animation: up 1s linear infinite
}

.pollution:before,
.pollution:after {
    content: "";
    position: absolute;
    background-color: #fff;
    border-radius: 20px;
    opacity: 0;
    width: 30px;
    height: 10px
}

.pollution:after {
    top: 10px;
    left: -25px;
    animation: up 2s linear infinite
}

.pollution:before {
    top: -10px;
    left: -35px;
    animation: up 3s linear infinite
}

@keyframes up {
    20% {
        opacity: .7
    }

    35% {
        left: 100px;
        opacity: .7;
    }

    70% {
        left: 70px;
        opacity: 0;
    }
}

.getopt span {
    font-size: 12px;
    margin-top: 15px;
    display: block
}

.resendotp {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    align-items: center
}

.resendotp strong {
    font-size: 11px
}

.resendotp a {
    text-decoration: none;
    font-size: 11px;
    padding: 2px;
    border: 1px solid #ddd;
    color: #000
}

.blogbox .dtr-read-more {
    display: block;
    width: 100%;
    padding: 10px 10px;
    color: #000;
    text-decoration: none;
    background: linear-gradient(45deg, #003e56, #09b598);
    color: #fff
}

.blogcontentbox {
    padding: 20px 10px 5px
}

/* Terms page — clipboard / exam-board frame */
.terms-clipboard-section {
    padding-top: 2.5rem;
    padding-bottom: 3.5rem;
}

.terms-clipboard {
    position: relative;
}


.terms-clipboard__paper {
    position: relative;
    z-index: 1;
    background: #fff;
}

/* Terms tabs — left nav (sticky), right panel */
.terms-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

@media (min-width: 992px) {
    .terms-tabs {
        display: grid;
        grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
        align-items: start;
        gap: 0;
    }
}

.terms-tabs__nav {
    flex: 0 0 250px;
    max-width: 100%;
    position: sticky;
    top: 70px;
    align-self: flex-start;
    max-height: calc(100vh - 70px - 1.5rem);
    overflow-y: auto;
    padding: 1rem 1.25rem;
    box-sizing: border-box;
}

.terms-tabs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap:12px;
}

.terms-tabs__btn {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    font-size: 16px;
    font-weight: 400;
    border: none;
    background: transparent;
    color: #565656;
    border-radius: 0px;
    opacity: 80%;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    font-family: inherit;
    line-height: 1.35;
}

.terms-tabs__btn .fa-circle {
    flex-shrink: 0;
    font-size: 0.35rem;
    opacity: 0.65;
}

.terms-tabs__btn.is-active .fa-circle {
    opacity: 1;
    color: #0f4162;
}

.terms-tabs__btn.is-active {
    background: #ffffff;
    color: #0f4162;
    font-weight: 600;
    opacity: 100%;
}

.terms-tabs__btn:focus {
    outline: none;
    box-shadow:none;
}

.terms-tabs__panels {
    flex: 1 1 280px;
    min-width: 0;
    min-height: 0;
    border-left: 1px solid #e5e7eb;
    padding: 1rem 1.375rem 1.75rem;
    box-sizing: border-box;
}

/* Hash / anchor scroll: match sticky nav (70px) + column padding (1rem) */
.terms-clipboard [data-terms-section] {
    scroll-margin-top: calc(70px + 1rem);
}

.terms-clipboard [data-terms-section] + [data-terms-section] {
    margin-top: 15px;
    margin-bottom: 0.75rem;
    padding-top: 15px;
    border-top: 1px solid #eef2f6;
}

/* Terms right column: undo inverted ul/ol list markers from global .blogdetailscontent + tighten headings */
.terms-clipboard .terms-tab-panel.blogdetailscontent h3 {
    margin: 0 0 1rem;
    padding: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
    scroll-margin-top: calc(70px + 1rem);
}

.terms-clipboard .terms-tab-panel.blogdetailscontent h4 {
    margin: 1.35rem 0 0.65rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: #1e293b;
}

.terms-clipboard .terms-tab-panel.blogdetailscontent > h3 + h4 {
    margin-top: 0.5rem;
}

.terms-clipboard .terms-tab-panel.blogdetailscontent ul > li {
    list-style: disc;
}

.terms-clipboard .terms-tab-panel.blogdetailscontent ul[type="circle"] > li,
.terms-clipboard .terms-tab-panel.blogdetailscontent ul[style*="circle"] > li {
    list-style: circle;
}

.terms-clipboard .terms-tab-panel.blogdetailscontent ol > li {
    list-style-type: decimal;
}

.terms-clipboard .terms-tab-panel.blogdetailscontent ol ol > li {
    list-style-type: lower-alpha;
}

.terms-clipboard .terms-tab-panel.blogdetailscontent ol ol ol > li {
    list-style-type: lower-roman;
}

.terms-clipboard .terms-tab-panel.blogdetailscontent ul,
.terms-clipboard .terms-tab-panel.blogdetailscontent ol {
    margin-top: 0.35rem;
    margin-bottom: 1.15rem;
}

.terms-clipboard .terms-tab-panel.blogdetailscontent li ol,
.terms-clipboard .terms-tab-panel.blogdetailscontent li ul {
    margin-top: 0.5rem;
}

@media (max-width: 991.98px) {
    .terms-tabs__nav {
        flex: 1 1 100%;
        position: relative;
        top: auto;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 0.5rem;
        margin: 0 -0.25rem;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
        -webkit-overflow-scrolling: touch;
    }

    .terms-tabs__list {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0.45rem;
        width: max-content;
        min-width: min(100%, max-content);
    }

    .terms-tabs__btn {
        white-space: nowrap;
        width: auto;
        flex: 0 0 auto;
    }
}

.sticky-headig-all{
    margin-bottom: 30px;
    text-align: center;
    background: #fff;
    border-bottom: 1px solid #ddd;
    padding: 12px 10px;
    margin-bottom:0px;
}
.sticky-headig-all h2{
    font-size: 30px;
   
}

/* Terms page title — editorial strip (eyebrow + title + bicolor rule) */
.terms-clipboard .terms-page-heading {
    margin: 0 0 1.25rem;
    padding: 1.25rem 1rem 1.45rem;
    text-align: center;
}

.terms-clipboard .terms-page-heading__eyebrow {
    margin: 0 0 0.55rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #64748b;
}

.terms-clipboard .terms-page-heading__title {
    margin: 0;
    font-size: clamp(1.5rem, 4vw, 1.95rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.12;
    color: #0f172a;
}

.terms-clipboard .terms-page-heading__title .terms-page-heading__amp {
    font-weight: 700;
    color: #163d62;
}

.terms-clipboard .terms-page-heading__title::after {
    content: "";
    display: block;
    width: 3rem;
    height: 3px;
    margin: 0.75rem auto 0;
    background: #163d62;
    border-radius: 2px;
    box-shadow: 12px 0 0 0 #ea580c;
}

@media (max-width: 575.98px) {
    .terms-clipboard .terms-page-heading__eyebrow {
        letter-spacing: 0.18em;
        font-size: 0.6rem;
    }
}

.terms-clipboard .terms-tab-panel.blogdetailscontent > h2:first-of-type {
    text-align: center;
    display: block;
    width: 100%;
    margin-bottom: 1.75rem;
}

.terms-clipboard .terms-tab-panel.blogdetailscontent > h2:first-of-type:after {
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 575.98px) {
    .terms-clipboard-section {
        padding-top: 1.75rem;
        padding-bottom: 2.5rem;
    }

    .terms-clipboard {
        padding: 2rem 0.75rem 1.35rem;
        border-radius: 14px;
        margin-top: 0.75rem;
    }

    .terms-clipboard::before {
        width: 96px;
        height: 30px;
        top: -12px;
    }

    .terms-clipboard::after {
        width: 64px;
        height: 8px;
        top: -3px;
    }
}

.blogdetailscontent h2 {
    font-weight: 700;
    color: var(--themecolor);
    margin-bottom: 30px;
    position: relative;
    display: inline-block;
}

.blogdetailscontent h2:after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background: var(--secondrycolor);
    margin-top: 8px;
}


.blogdetailscontent h4 {
    background-clip: text;
}

.blogdetailscontent ul li {
    list-style: auto;
    margin-bottom: 15px;
    color: #505050;
    font-size: 15px;
    text-align: justify
}

.blogdetailscontent h4 a {
    color: blue
}

.mediacoverageslide {
    width: 100%;
    height: 700px;
    background: url(/assets/images/)
}

.mediacoverageslide img {
    width: 100%;
    height: 100%
}

.mboshowgetstatbtn {
    display: none
}

.mobparashow {
    display: none
}

.instantdemomob {
    display: none
}

/* ============================================================
   Mobile: refined Instant Demo CTA + hamburger toggle
   ============================================================ */
@media (max-width: 991.98px) {
    .instantdemomob {
        display: block;
        margin-left: auto;
        margin-right: 8px;
    }

    .instantdemomob .getstartedbtn {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 16px 8px 14px;
        background: #0d6f60;
        color: #fff !important;
        border: none;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        line-height: 1;
        /* box-shadow: 0 4px 14px rgba(13, 111, 96, 0.32); */
        transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
    }

    .instantdemomob .getstartedbtn::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #6dd9c2;
        box-shadow: 0 0 0 4px rgba(109, 217, 194, 0.28);
        animation: instantdemomobPulse 1.6s ease-in-out infinite;
        flex-shrink: 0;
    }

    .product-hero-actions__btn--primary.product-hero-actions__btn--split{
        font-size: 13px;
    }
    .product-hero-actions__btn{
        min-height: 45px;
        font-size: 13px;
    }
    .product-hero-lede{
        font-size: 14px;
    }
    .home-left-circle{
        left: -15%;
        top: 3%;
    }
    .ourproductflxbox{
        flex-direction:column;
    }
    .prodcutpara{
        padding-top:10px;
    }
    .b2c-title2{
        top: 42px;
        right: 40%;
        font-size: 12px;
    }
    .b2c-title3{
        font-size: 12px;
        top: 79px;
        right: 39%;
    }

    .instantdemomob .getstartedbtn:hover {
        background: #0a5d51;
        box-shadow: 0 6px 18px rgba(13, 111, 96, 0.42);
    }

    .instantdemomob .getstartedbtn:active {
        transform: translateY(1px);
        box-shadow: 0 2px 8px rgba(13, 111, 96, 0.3);
    }

    .instantdemomob .getstartedbtn .text {
        color: inherit;
        font-size: inherit;
        font-weight: inherit;
        letter-spacing: inherit;
        line-height: inherit;
        margin-left: 5px;
    }

    @keyframes instantdemomobPulse {
        0%, 100% {
            box-shadow: 0 0 0 4px rgba(109, 217, 194, 0.28);
        }
        50% {
            box-shadow: 0 0 0 7px rgba(109, 217, 194, 0);
        }
    }

    /* Hamburger toggle: minimal three black lines (no background) */
    .open-btn {
        width: 36px;
        height: 36px;
        padding: 0;
        font-size: 0;
        background: transparent !important;
        color: transparent;
        border: none !important;
        border-radius: 0;
        right: 0;
        margin-right: 0;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        position: relative;
        box-shadow: none !important;
        cursor: pointer;
        transition: opacity 0.18s ease;
    }

    .open-btn::before,
    .open-btn::after,
    .open-btn span {
        content: "";
        position: absolute;
        left: 50%;
        width: 22px;
        height: 3px;
        background: #414141;
        border-radius: 2px;
        transform: translateX(-50%);
    }

    .open-btn::before {
        top: 7px;
    }

    .open-btn span {
        top: 15px;
    }

    .open-btn::after {
        top: 23px;
    }

    .open-btn:hover {
        opacity: 0.7;
    }

    .open-btn:active {
        opacity: 0.5;
    }
}

@media (max-width: 480px) {
    .instantdemomob .getstartedbtn {
        padding: 12px 15px 12px 20px;
        font-size: 11px;
        letter-spacing: 0.03em;
    }

    .open-btn {
        width: 36px;
        height: 36px;
    }
}

.calendar-container {
    display: flex;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgb(0 0 0 / 22%)
}

.calendar-container .left-section,
.right-section {
    padding: 30px;
    width: 55%
}

.calendar-container .left-section h1 {
    font-size: 28px;
    margin-top: 5px;
    color: #1d1d1f;
    font-weight: 600;
}

.calendar-container .left-section h4 {
    font-weight: 600;
    color: #6c757d;
    font-size: 16px
}



.footer-links {
    position: absolute;
    bottom: 20px
}

.footer-links a {
    font-size: 14px;
    color: #0a58ca;
    margin-right: 20px;
    text-decoration: none
}

.right-section {
    position: relative
}

.ribbonrightflx {
    position: absolute;
    top: -5px;
    right: -5px;
    z-index: 1;
    overflow: hidden;
    width: 105px;
    height: 105px;
    text-decoration: none;
    pointer-events: none;
    transition: all 0.1s ease-in;
    will-change: transform
}

.homeheading .homespan {
    text-decoration: underline;
    background: linear-gradient(135deg, #0bb698, #0ea5e9);
    background-clip: text;
    color: transparent;
}

.ribboncontent {
    position: relative;
    top: 21px;
    left: -11px;
    z-index: 1;
    display: block;
    width: 160px;
    padding: 9px 0 6px 0;
    background: var(--1, linear-gradient(89deg, #08ab90 7.51%, #3365c7 94.39%));
    color: #fff;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 20%);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    pointer-events: auto;
    transition: all 0.1s ease-in;
    transform: rotate(45deg);
    margin-left: -7px;
    color: var(--color-grey-4, #F2F2F2);
    font-size: 8px;
    text-transform: uppercase
}

.ribboncontent strong {
    display: block
}

.ribbonrightflx::before {
    top: 0;
    left: 0
}

.ribbonrightflx::before,
.ribbonrightflx::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: #505960;
    transition: all 0.1s ease-in
}

.ribbonrightflx::after {
    right: 0;
    bottom: 0
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 15px 0
}

.calendar-header button {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer
}

.calendar-days,
.calendar-dates {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    text-align: center
}

.calendar-days div {
    color: #666;
    padding: 10px 0;
    font-size: 14px
}

.calendar-dates div {
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    color: #333;
    transition: 0.3s
}

.selectcalendarbox {
    margin: auto;
    margin-top: 100px
}

.selectcalendarbox .right-section h3 {
    font-size: 18px;
    margin-bottom: 30px
}

.calendar-dates div:hover {
    background: #e6f0ff
}

.calendar-dates .selected {
    background: #06f;
    color: #fff
}

.timezone {
    margin-top: 20px;
    color: #333;
    font-size: 14px
}

.timezone-wrapper {
    margin-top: 20px;
    position: relative;
    width: 100%;
    font-size: 14px
}

.timezone-display {
    cursor: pointer;
    color: #333;
    background: #f5f5f5;
    padding: 10px;
    border-radius: 6px;
    display: inline-block;
    width: 100%
}

.timezone-dropdown {
    display: none;
    position: absolute;
    z-index: 10;
    top: 100%;
    margin-top: 5px;
    background: #fff;
    width: 100%;
    max-height: 300px;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgb(0 0 0 / .1);
    overflow: hidden
}

#timezone-search {
    width: 100%;
    padding: 10px;
    border: none;
    border-bottom: 1px solid #ddd;
    font-size: 14px;
    outline: none
}

.toggle-format {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: #fafafa;
    font-size: 13px;
    gap: 10px
}

.switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 34px
}

.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background-color: #fff;
    transition: 0.4s;
    border-radius: 50%
}

input:checked+.slider {
    background-color: #2196f3
}

input:checked+.slider:before {
    transform: translateX(16px)
}

.timezone-list {
    max-height: 200px;
    overflow-y: auto;
    padding: 5px 10px
}

.group {
    margin-bottom: 10px
}

.group-title {
    font-size: 11px;
    font-weight: 700;
    color: #666;
    padding: 5px 0
}

.tz-item {
    padding: 6px 10px;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    transition: 0.2s
}

.tz-item:hover {
    background-color: #f0f0f0
}

.tz-item.selected {
    background-color: #005eff;
    color: #fff
}

.mobileribbon {
    display: none
}

.shape-inner_box {
    position: absolute;
    left: 100px;
    top: 0;
}


.fly_airplane_icon {
    position: absolute;
    top: 4px;
    right: 102px;
}

.fly_airplane_icon img {
    width: 69px;
}

/* —— Features page: main grid (feature.php) —— */
.feature-showcase {
    position: relative;
    background: #fff;
    border-top: 1px solid #e8ecf0;
}

.feature-showcase::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.35;
    background-image: repeating-linear-gradient(
        -9deg,
        transparent,
        transparent 72px,
        rgba(15, 65, 98, 0.025) 72px,
        rgba(15, 65, 98, 0.025) 73px
    );
}

.feature-showcase > .container {
    position: relative;
    z-index: 1;
}

.feature-showcase__head {
    max-width: 40rem;
    margin: 0 0 2.5rem;
    text-align: left;
    padding: 0 0.15rem;
}

.feature-showcase__head--split {
    max-width: none;
    margin: 0 0 3rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    align-items: start;
}

.feature-showcase__head-main .feature-showcase__badge {
    margin-bottom: 0.65rem;
}

.feature-showcase__head-aside .feature-showcase__sub {
    margin: 0;
}

.feature-showcase__head-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--secondrycolor);
    text-decoration: none;
    transition: color 0.15s ease, gap 0.15s ease;
}

.feature-showcase__head-cta i {
    font-size: 0.72rem;
    opacity: 0.9;
    transition: transform 0.15s ease;
}

.feature-showcase__head-cta:hover {
    color: #245a78;
}

.feature-showcase__head-cta:hover i {
    transform: translateX(2px);
}

.feature-showcase__badge {
    display: inline-block;
    margin: 0 0 0.65rem;
    padding: 0.2rem 0.85rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #0f4162;
    border: 1px solid #b8c5d0;
    border-radius: 3px;
    background: #fff;
}

.feature-showcase__title {
    margin: 0 0 0.7rem;
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.025em;
    color: #0f1419;
}

.feature-showcase__sub {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.58;
    color: #3d4d5c;
}

.feature-showcase__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 35px;
    align-items: stretch;
}

.feature-showcase .featu_main_box .card-section {
    margin-bottom: 0;
}

/* Equal-height cards: direct grid children as flex columns */
.feature-showcase .feature-showcase__grid > .card-section {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    align-self: stretch;
    width: 100%;
    min-height: 0;
}

/* WOW.js + display:contents — WOW visibility:hidden icons ko chupa deta hai; init ab .feature-showcase skip karta hai */
.feature-showcase .card-section.wow,
.feature-showcase .flip-card.wow {
    visibility: visible !important;
}

/* Feature cards: column flex (body flex:1 = equal row heights) + flex header row */
.feature-showcase .card-section {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 1.6rem 1.65rem 1.5rem;
    border-radius: 14px;
    border: 1px solid #eef2f6;
    background: #fff;
    box-shadow: 8px 8px 0 0 rgba(3, 24, 17, 0.08);
    overflow: visible;
    position: relative;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.2s ease;
}

.feature-showcase .card-section::before {
    display: none;
    content: none;
}

.feature-showcase .card-section:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.1);
    border-color: #e2e8f0;
    filter: none;
}

.feature-showcase .card-section:hover::before {
    display: none;
}

/* Flatten wrapper chain; keep card-front__tp as real flex row (icon | titles) */
.feature-showcase .flip-card,
.feature-showcase .flip-card__container,
.feature-showcase .card-front {
    display: contents;
}

.feature-showcase .flip-card {
    padding: 0;
}

.feature-showcase .card-front__tp {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
}

.feature-showcase .featur_icon_box {
    flex: 0 0 auto;
    width: 70px;
    height: 70px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: none;
    background: #e0f2fe;
    box-shadow: none;
}

.feature-showcase .featur_icon_box svg {
    width: 40px;
    height: 40px;
}

.feature-showcase .featur_icon_box svg path,
.feature-showcase .featur_icon_box svg g[fill] {
    fill: #0284c7;
}

/* Pastel icon tiles + matching icon hues (cycles every 6 cards) */
.feature-showcase .feature-showcase__grid > .card-section:nth-child(6n + 1) .featur_icon_box {
    background: #e0f2fe;
}

.feature-showcase .feature-showcase__grid > .card-section:nth-child(6n + 1) .featur_icon_box svg path,
.feature-showcase .feature-showcase__grid > .card-section:nth-child(6n + 1) .featur_icon_box svg g {
    fill: #0284c7;
}

.feature-showcase .feature-showcase__grid > .card-section:nth-child(6n + 2) .featur_icon_box {
    background: #fce7f3;
}

.feature-showcase .feature-showcase__grid > .card-section:nth-child(6n + 2) .featur_icon_box svg path,
.feature-showcase .feature-showcase__grid > .card-section:nth-child(6n + 2) .featur_icon_box svg g {
    fill: #db2777;
}

.feature-showcase .feature-showcase__grid > .card-section:nth-child(6n + 3) .featur_icon_box {
    background: #ccfbf1;
}

.feature-showcase .feature-showcase__grid > .card-section:nth-child(6n + 3) .featur_icon_box svg path,
.feature-showcase .feature-showcase__grid > .card-section:nth-child(6n + 3) .featur_icon_box svg g {
    fill: #0d9488;
}

.feature-showcase .feature-showcase__grid > .card-section:nth-child(6n + 4) .featur_icon_box {
    background: #ffedd5;
}

.feature-showcase .feature-showcase__grid > .card-section:nth-child(6n + 4) .featur_icon_box svg path,
.feature-showcase .feature-showcase__grid > .card-section:nth-child(6n + 4) .featur_icon_box svg g {
    fill: #ea580c;
}

.feature-showcase .feature-showcase__grid > .card-section:nth-child(6n + 5) .featur_icon_box {
    background: #ede9fe;
}

.feature-showcase .feature-showcase__grid > .card-section:nth-child(6n + 5) .featur_icon_box svg path,
.feature-showcase .feature-showcase__grid > .card-section:nth-child(6n + 5) .featur_icon_box svg g {
    fill: #7c3aed;
}

.feature-showcase .feature-showcase__grid > .card-section:nth-child(6n + 6) .featur_icon_box {
    background: #e0e7ff;
}

.feature-showcase .feature-showcase__grid > .card-section:nth-child(6n + 6) .featur_icon_box svg path,
.feature-showcase .feature-showcase__grid > .card-section:nth-child(6n + 6) .featur_icon_box svg g {
    fill: #4f46e5;
}

.feature-showcase .card-front__heading {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    font-size:18px;
    font-weight: 700;
    line-height: 1.32;
    color: #1e293b;
    background: transparent;
    border: none;
    border-radius: 0;
}

.feature-showcase .card-front__heading span.d-block {
    display: block;
    margin-top: 0.35rem;
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    color: #64748b;
    line-height: 1.45;
}

.feature-showcase .inside-page {
    margin-top: 1rem;
    padding: 1.05rem 0 0;
    background: transparent;
    border: none;
    border-top: 1px solid #eef2f6;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

.feature-showcase .inside-page__container {
    flex: 1 1 auto;
    margin-top: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.feature-showcase .card-section:hover .featur_icon_box {
    transform: none;
}

.feature-showcase .card-section:hover .card-front__heading {
    color: #0f172a;
}

.feature-showcase .inside-page__container p.apiText {
    margin: 0;
    font-size: 16px;
    line-height: 1.68;
    color: #64748b;
}


.feature-showcase__cta {
    position: relative;
    text-align: center;
    padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 3rem);
    border: 1px solid #e8ecf0;
    border-radius: 26px;
    background: #fff;
    overflow: visible;
    background:url('../images/cta-bg.jpeg');
    background-position: center;
    background-size: cover;
    box-shadow: 8px 8px 0 0 rgba(3, 24, 17, 0.08);
    
}

.feature-showcase__cta-inner {
    position: relative;
    z-index: 2;
    max-width: 31rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.feature-showcase__cta-avatar {
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
    border: 3px solid #fff;
    line-height: 0;
    pointer-events: none;
}

.feature-showcase__cta-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.feature-showcase__cta-avatar--l1 {
    width: 56px;
    height: 56px;
    top: 8%;
    left: 3%;
}

.feature-showcase__cta-avatar--l2 {
    width: 48px;
    height: 48px;
    top: 38%;
    left: 10%;
}

.feature-showcase__cta-avatar--l3 {
    width: 44px;
    height: 44px;
    bottom: 28%;
    left: 5%;
}

.feature-showcase__cta-avatar--l4 {
    width: 52px;
    height: 52px;
    top: 52%;
    left: 1%;
}

.feature-showcase__cta-avatar--l5 {
    width: 40px;
    height: 40px;
    bottom: 10%;
    left: 12%;
}

.feature-showcase__cta-avatar--r1 {
    width: 52px;
    height: 52px;
    top: 10%;
    right: 4%;
}

.feature-showcase__cta-avatar--r2 {
    width: 44px;
    height: 44px;
    top: 42%;
    right: 11%;
}

.feature-showcase__cta-avatar--r3 {
    width: 56px;
    height: 56px;
    bottom: 18%;
    right: 3%;
}

.feature-showcase__cta-avatar--r4 {
    width: 48px;
    height: 48px;
    bottom: 38%;
    right: 6%;
}

.feature-showcase__cta-avatar--r5 {
    width: 42px;
    height: 42px;
    top: 58%;
    right: 1%;
}

@media (max-width: 991.98px) {
    .feature-showcase__cta-avatar {
        opacity: 0.92;
        transform: scale(0.92);
    }

    .feature-showcase__cta-avatar--l4,
    .feature-showcase__cta-avatar--r5 {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .feature-showcase__cta-avatar {
        display: none;
    }

    .feature-showcase__cta {
        border-radius: 20px;
        padding: 2rem 1.35rem;
    }
}

.feature-showcase__cta-title {
    margin: 0 0 1rem;
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.feature-showcase__cta-lede {
    margin: 0 auto 1.5rem;
    max-width: 31rem;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: #64748b;
}

.feature-showcase__cta-btn {
    max-width: 320px;
    width: auto;
    min-width: 200px;
    margin: 0;
    padding: 14px 28px;
    background: #0f4162;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25);
    
}

.feature-showcase__cta-btn:hover {
    background: #1e293b;
    color: #fff;
    transform: translateY(-2px);
}

.feature-showcase__cta .feature-showcase__cta-btn.getstartedbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border: none;
    line-height: 1.35;
}

.feature-showcase__cta .feature-showcase__cta-btn.getstartedbtn,
.feature-showcase__cta .feature-showcase__cta-btn.getstartedbtn .text {
    color: #fff;
}

@media (min-width: 992px) {
    .feature-showcase__head:not(.feature-showcase__head--split) {
        max-width: 48rem;
    }

    .feature-showcase__head--split {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
        gap: 2.5rem 3rem;
        margin-bottom: 3.25rem;
    }

    .feature-showcase__head--split .feature-showcase__title {
        font-size: clamp(1.5rem, 2.2vw, 1.95rem);
        line-height: 1.22;
    }
}

@media (max-width: 575.98px) {
    .feature-showcase__head {
        text-align: left;
    }

    .feature-showcase__title {
        font-size: 1.25rem;
    }

    .feature-showcase__cta .feature-showcase__cta-btn.getstartedbtn {
        font-size: 0.875rem !important;
        padding: 12px 22px !important;
    }
}

.feature_title {
    background: #ffffff;
    width: fit-content;
    margin: auto;
    border: 1px solid #2f6b92;
    padding: 3px 15px;
    border-radius: 30px;
    margin-bottom: 5px;
    color: #2f6b92;
    font-size: 12px;
}

.careers-hero__art{text-align:center;}

/* —— Careers / carrier.php — editorial light hero —— */
.careers-hero {
    background: #fff;
    /* background: url(../images/carrer-home-bg.png); */
    /* background-size: cover; */
    /* background-position: center; */
    padding-top: 100px;
    padding-bottom: 0px;
    position: relative;
    overflow: hidden;
    z-index:1;
}

.rotate-box{
    position: absolute;
    right: -4%;
    top: 5%;
    width: clamp(96px, 14vw, 160px);
    aspect-ratio: 1 / 1;
    background: #164876;
    border-radius: 50%;
    animation: home-left-circle-radiate 5.5s ease-out infinite, home-left-circle-pulse 5.5s ease-in-out infinite;
    z-index: 0;
    pointer-events: none;
}



.careers-hero__wrap {
    position: relative;
    margin: 0 auto;
    max-width: 1320px;
  
}

.careers-hero__rail {
    display: none;
}

@media (min-width: 992px) {
    .careers-hero__rail {
        display: block;
        position: absolute;
        left: 0.25rem;
        top: 55%;
        margin: 0;
        transform: rotate(-90deg);
        transform-origin: left top;
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.26em;
        text-transform: uppercase;
        color: #000;
        white-space: nowrap;
        pointer-events: none;
        user-select: none;
    }

    .careers-hero__wrap {
        padding-left: 2.25rem;
    }
}

@media (min-width: 1400px) {
    .careers-hero__wrap {
        padding-left: 2.75rem;
    }
}

.careers-hero__copy .careers-hero__status {
    display: inline-block;
    margin: 0 0 1rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #3d4856;
    background: #f4f7fa;
    border: 1px solid #dfe6ee;
    border-radius: 999px;
}

.careers-hero__copy h1 {
    margin: 0 0 1.125rem;
    font-family: "Fraunces", Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 4.6vw, 3.125rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: #161b22;
}

.careers-hero__hl {
    display: inline;
    padding: 0 0.08em;
    background: linear-gradient(180deg, transparent 62%, #80dfd3 62%, #80dfd3 92%, transparent 92%);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone
}


.career-empty {
    /* background: #f7f9fb; */
    border:1px solid #ddd;
    overflow: hidden;
}

.career-empty .container {
    position: relative;
}

.career-empty__grid {
    display: block;
}

.career-empty__media {
    margin: 0;
    position: relative;
}

.career-empty__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.career-empty__shape {
    position: absolute;
    z-index: 2;
    border-radius: 999px;
    pointer-events: none;
}

.career-empty__shape--teal {
    width: 70px;
    height: 38px;
    background: #54b9b5;
    left: -16px;
    top: 20%;
}

.career-empty__shape--yellow {
    width: 48px;
    height: 48px;
    background: #f5c93d;
    right: -14px;
    top: 14%;
}

.career-empty__shape--pink {
    width: 34px;
    height: 34px;
    background: #ff5f85;
    left: 12%;
    bottom: 8%;
}

/* .career-empty__content {
    width: min(100%, 780px);
    margin: 0 auto;
    padding: clamp(0.25rem, 1vw, 0.6rem) 0;
} */

.career-empty__index {
    margin: 0 0 0.7rem;
    color: #aeb7bf;
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    font-weight: 700;
    text-transform: uppercase;
}

.career-empty h2 {
    margin: 0 0 1rem;
    font-family: "Fraunces", Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 3.8vw, 2.75rem);
    line-height: 1.18;
    letter-spacing: -0.015em;
    color: #1c2733;
}

.career-empty h2 span {
    color: #54a9a4;
}

.career-subtext {
    margin: 0 0 1rem;
    font-size: 16px;
    line-height: 1.75;
    color: #4f5f70;
}

.career-desc {
    margin: 0 0 1rem;
    font-size: 16px;
    line-height: 1.75;
    color: #4f5f70;
}

.career-mail {
    margin: 0.25rem 0 0;
    font-size:16px;
    line-height: 1.72;
    color: #435364;
    font-weight: 600;
}

.career-mail a {
    color: #0f4162;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    word-break: break-word;
}

.career-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.78rem 1.35rem;
    border-radius: 10px;
    border: none;
    background: #0f4162;
    color: #ffffff !important;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none !important;
    transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease;
}

.career-btn:hover {
    background: #10354e;
    transform: translateY(-2px);
}

.career-btn:focus-visible {
    outline: 2px solid #0f4162;
    outline-offset: 3px;
}

@media (max-width: 991.98px) {
    .career-empty__content {
        width: 100%;
    }

    .career-empty h2 {
        max-width: none;
    }
}

.career-gallery {
    background: #f5f2f0;
    border-top: 1px solid #e8edf3;
    border-bottom: 1px solid #e8edf3;
}

.career-gallery__eyebrow {
    margin: 0 0 0.35rem;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(245, 249, 255, 0.9);
}

.career-gallery__hero {
    position: relative;
    margin: 0 0 1.35rem;
    border-radius: 14px;
    overflow: hidden;
    height: 400px;
}

.career-gallery__hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    object-position: center;
    transform-origin: center center;
    animation: career-gallery-hero-zoom 10s ease-in-out infinite;
}

.career-gallery__hero-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(1rem, 3vw, 2rem);
    background: linear-gradient(180deg, rgba(11, 24, 38, 0.15) 0%, rgba(11, 24, 38, 0.62) 70%, rgba(11, 24, 38, 0.78) 100%);
}

.career-gallery__hero-overlay h2 {
    margin: 0;
    font-family: "Fraunces", Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 5vw, 3.3rem);
    line-height: 1.06;
    letter-spacing: -0.02em;
    color: #fff;
}

@keyframes career-gallery-hero-zoom {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.career-gallery__content {
    display: grid;
    grid-template-columns: minmax(200px, 0.7fr) minmax(0, 1.3fr);
    gap:20px;
    align-items: stretch;
}

.career-gallery__intro {
    display: flex;
    flex-direction: column;
}

.career-gallery__intro p {
    margin: 0;
    font-size: 18px;
    line-height: 1.75;
    color: #535353;
    padding-left: 5px;
    margin-bottom: 10px;
}

.career-gallery__intro-media {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e1e8f0;
    height: 285px;
    margin-bottom:0px;
}

.career-gallery__intro-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.career-gallery__intro-media:hover img {
    transform: scale(1.1);
}

.career-gallery__intro-media--bottom {
    margin-top: auto;
}

.career-gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:20px;
}

.career-gallery__item {
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    overflow: hidden;
    border-radius: 10px;
}

.career-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #eef4f8;
    border: 1px solid #e1e8f0;
    border-radius: 10px;
    transition: transform 0.35s ease;
}

.career-gallery__item img:hover {
    transform: scale(1.1);
}

@media (prefers-reduced-motion: reduce) {
    .career-gallery__intro-media img,
    .career-gallery__item img {
        transition: none;
    }

    .career-gallery__intro-media:hover img,
    .career-gallery__item img:hover {
        transform: none;
    }
}

.career-gallery__item--stack {
    gap: 20px;
    justify-content: flex-start;
    overflow: visible;
}

.career-gallery__item--stack .career-gallery__stack-frame {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid #e1e8f0;
    background: #eef4f8;
}

.career-gallery__item--stack .career-gallery__stack-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: none;
    border-radius: 0;
}

.career-gallery__item:nth-child(1) { height: 387px; }
.career-gallery__item:nth-child(2) { height: 387px; }
.career-gallery__item:nth-child(3) { height: 387px; }
.career-gallery__item:nth-child(4) { height: 288px; }
.career-gallery__item:nth-child(5) { height: 288px; }

@media (min-width: 992px) {
    .career-gallery__item:nth-child(4).career-gallery__item--wide {
        grid-column: 1 / span 2;
        grid-row: 2;
    }

    .career-gallery__item:nth-child(5) {
        grid-column: 3;
        grid-row: 2;
    }
}

@media (max-width: 991.98px) {
    .career-gallery__content {
        grid-template-columns: 1fr;
    }

    .career-gallery__intro-media {
        min-height: 220px;
    }

    .career-gallery__intro-media--bottom {
        margin-top: 1rem;
    }

    .career-gallery__grid {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: auto;
    }

    .career-gallery__item:nth-child(4).career-gallery__item--wide,
    .career-gallery__item:nth-child(5) {
        grid-column: auto;
        grid-row: auto;
    }

    .career-gallery__item:nth-child(n) {
        height: 220px;
    }
}

@media (max-width: 575.98px) {
    .career-gallery__grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .career-gallery__item:nth-child(4).career-gallery__item--wide,
    .career-gallery__item:nth-child(5) {
        grid-column: auto;
        grid-row: auto;
    }

    .career-gallery__item {
        height: 210px !important;
    }
}

.careers-hero__lede {
    margin: 0;
    max-width: 38em;
    font-size: 16px;
    line-height: 1.65;
    color: #000000;
}

.careers-hero__actions {
    margin-top: 1.75rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.25rem;
}

.careers-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.78rem 1.65rem;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    color: #fff !important;
    text-decoration: none !important;
    background: #1f2429;
    border-radius: 2px;
    border: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.careers-hero__cta:hover {
    background: #0f1418;
    color: #fff !important;
}

.careers-hero__cta:focus-visible {
    outline: 2px solid var(--themecolor, #0f4162);
    outline-offset: 3px;
}

.careers-hero__hint {
    font-size: 14px;
    line-height: 1.45;
    color: #000000;
    max-width: 16rem;
}

.careers-hero__art img{
    width: 550px;
    height: auto;
}

@media (max-width: 991.98px) {
    .careers-hero__art {
        margin: 0 auto;
        /* max-width: min(540px, 100%); */
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .career-gallery__hero img {
        animation: none;
    }

    .careers-hero__cta {
        transition: none;
    }
}

/* Careers page: Why join split section */
.why-join {
    background: #ffffff;
    border-top: 1px solid #e8edf3;
}

.why-join__head {
    margin-bottom: clamp(1.2rem, 3vw, 2rem);
}

.why-join__eyebrow {
    margin: 0 0 0.35rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #5687a8;
}

.why-join__head h2 {
    margin: 0;
    font-family: "Fraunces", Georgia, "Times New Roman", serif;
    font-size: clamp(1.55rem, 3vw, 2.2rem);
    letter-spacing: -0.015em;
    color: #162635;
}

.why-join-us {
    display: grid;
    grid-template-columns: minmax(55%, 1fr) minmax(45%, 1fr);
    align-items: stretch;
    background: #f3f6f9;
    border: 1px solid #e2e8ef;
}

.why-join-us__media {
    margin: 0;
    min-height: 100%;
    height: 450px;
}

.why-join-us__media img {
    width: 100%;
    height: 100%;
    min-height: 300px;
    object-fit: cover;
    display: block;
    object-position: top;
}

.why-join-us__content {
    padding: clamp(1.2rem, 2.8vw, 2.3rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #0f4162;
}

.why-join-us__content h3 {
    margin: 0 0 0.75rem;
    font-family: "Fraunces", Georgia, "Times New Roman", serif;
    font-size: 28px;
    color: #ffffff;
}

.why-join-us__content p {
    margin: 0 0 0.9rem;
    font-size: 16px;
    line-height: 1.72;
    color: #c8c8c8;

}

.why-join-us__cta {
    margin-top: 0.5rem;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1.2rem;
    background: #0f3f66;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.why-join-us__cta:hover {
    background: #0d3454;
}

@media (max-width: 767.98px) {
    .why-join-us {
        grid-template-columns: 1fr;
    }

    .why-join-us__media img {
        min-height: 220px;
    }

    .why-join-us__content p {
        max-width: none;
    }
}

/* Careers page: Our values section */
.our-values {
    background: #fff;
    border-top: 1px solid #ddd;
}

.our-values__top {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) auto;
    gap: 1.25rem 2rem;
    align-items:center;
    margin-bottom: clamp(1.2rem, 3vw, 2rem);
}

.our-values__eyebrow {
    margin: 0 0 0.45rem;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #7b8896;
}

.our-values__intro h2 {
    margin: 0;
    max-width: 22ch;
    font-family: "Fraunces", Georgia, "Times New Roman", serif;
    font-size: clamp(1.55rem, 3vw, 2.2rem);
    line-height: 1.22;
    color: #132438;
}

.our-values__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(110px, 1fr));
    gap: 1.1rem;
}

.our-values__stat strong {
    display: block;
    font-size: clamp(1.2rem, 2.4vw, 1.65rem);
    line-height: 1.1;
    color: #1d63b4;
}

.our-values__stat span {
    display: block;
    margin-top: 0.28rem;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #6d7884;
}

.our-values__layout {
    display: grid;
    grid-template-columns: minmax(280px, 44%) minmax(280px, 1fr);
    gap: 1.1rem;
    align-items: stretch;
}

.our-values__media {
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    height: 350px;
}

.our-values__media img {
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: cover;
    display: block;
}

.our-values__cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.our-values__card {
    background: #f4f7fa;
    border: 1px solid #e5ebf2;
    border-radius: 14px;
    padding: 1rem 1rem 0.95rem;
}

.our-values__card--accent {
    background: #dce8f8;
    border-color: #c5d8f3;
}

.our-values__card--full {
    grid-column: 1 / -1;
}

.our-values__card h3 {
    margin: 0 0 0.45rem;
    font-size: 22px;
    color: #15283d;
    font-weight: 600;
}

.our-values__card p {
    margin: 0;
    font-size: 16px;
    line-height: 1.64;
    color: #5f6e7f;
}

@media (max-width: 991.98px) {
    .our-values__top {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .our-values__stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .our-values__layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .our-values__stats {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }

    .our-values__cards {
        grid-template-columns: 1fr;
    }
}

/* Careers page: internship callout banner */
.career-campus-callout {
    background: #f5f8fc;
}

.career-campus-callout__panel {
    position: relative;
    background-attachment: fixed;
    overflow: hidden;
    background-image: linear-gradient(90deg, rgba(12, 31, 49, 0.78) 0%, rgba(15, 41, 66, 0.6) 38%, rgba(17, 49, 78, 0.3) 58%, rgba(17, 49, 78, 0.12) 100%), url("../images/career-3.jpg");
    background-size: cover;
    background-position: center;
}

.career-campus-callout__content {
    position: relative;
    z-index: 1;
    /* width: min(100%, 520px); */
    padding: 70px 90px;
    color: #f8fbff;
}

.career-campus-callout__eyebrow {
    margin: 0 0 5px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em;
    text-transform: uppercase !important;
}

.career-campus-callout__content h2 {
    margin: 0 0 0.8rem;
    font-family: "Fraunces", Georgia, "Times New Roman", serif;
    font-size: clamp(1.8rem, 3.2vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: #fff;
    width: 35rem;
}

.career-campus-callout__content p {
    margin: 0 0 0.78rem;
    font-size: 16px;
    line-height: 1.72;
    font-weight: 600;
    color: rgb(255 255 255 / 90%);
    width: 35rem;

}

.career-campus-callout__cta {
    margin-top: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.78rem 1.35rem;
    border-radius: 999px;
    border: 1px solid rgb(40 121 174);
    background: #0f4162;
    color: #fff !important;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none !important;
}

.career-campus-callout__cta:hover {
    filter: brightness(1.06);
}

@media (max-width: 767.98px) {
    .career-campus-callout__panel {
        border-radius: 0 24px 0 0;
        background-image: linear-gradient(180deg, rgba(12, 31, 49, 0.82) 0%, rgba(15, 41, 66, 0.62) 42%, rgba(17, 49, 78, 0.46) 100%), url("../images/why-bg.png");
    }

    .career-campus-callout__content {
        width: 100%;
    }
}

/* —— About page (aboutus.php) —— */
.about-page-hero.product-hero-shell {
    padding-top: 100px;
    padding-bottom: 0;
}

.about-page-hero .product-hero-visual__frame {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.about-page-hero .product-hero-visual__frame img {
    width: 100%;
    height: 600px;
    display: block;
}

.about-hero-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.6rem;
    margin-top: 1.1rem;
    max-width: 32rem;
    padding-bottom: 35px;
}

.about-hero-pill {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #0f172a;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    line-height: 1.3;
}

@media (max-width: 575.98px) {
    .about-hero-pill {
        font-size: 0.75rem;
    }
}

.about-hero-lede-follow {
    margin-top: 0.85rem;
    opacity: 0.92;
}

.enhance-container {
    padding-left: 5%;
    padding-right: 5%;
}

@media (min-width: 1200px) {
    .enhance-container {
        padding-left: 10%;
        padding-right: 10%;
    }
}

.about-page--main {
    border-top: 1px solid #e2e8ef;
}

.about-page__container {
    max-width: 56rem;
}

.about-intro {
    margin-bottom: 2.75rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #dce4ec;
}

.about-intro__kicker {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #64748b;
    margin: 0 0 0.5rem;
}

.about-intro__title {
    font-size:30px;
    font-weight: 700;
    color: #0f2744;
    margin: 0 0 1.25rem;
    line-height: 1.25;
}

.about-page--main .about-intro__text p {
    font-size:16px;
    line-height: 1.75;
    color: #3d4d5c;
    margin: 0 0 1.1rem;
    text-align: left;
}

.about-page--main .about-intro__text p:last-child {
    margin-bottom: 0;
}

.about-keywords {
    margin-top: 2rem;
    padding: 1rem 1.1rem;
    background: #fff;
    border: 1px solid #e5edf4;
    border-radius: 8px;
}

.about-keywords__label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #94a3b8;
    margin: 0 0 0.5rem;
}

.about-keywords p {
    font-size:14px;
    line-height: 1.65;
    color: #64748b;
    margin: 0;
    text-align: left;
}

.about-panels {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
}

.about-card {
    background: #fff;
}

.about-card__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.about-card__content {
    padding: 1.5rem 1.35rem;
}

.about-card__content h3 {
    font-size:20px;
    font-weight: 700;
    color: var(--themecolor);
    margin: 0 0 0.85rem;
    letter-spacing: -0.02em;
}

.about-card__content p {
    font-size:16px;
    line-height: 1.72;
    color: #3d4d5c;
    margin: 0;
    text-align: left;
}

.about-card__figure {
    margin: 0;
    line-height: 0;
    background: #eef4f8;
}

.about-card__figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-height: 200px;
}

@media (min-width: 992px) {
    .about-card__inner {
        flex-direction: row;
        align-items: stretch;
    }

    .about-card--reverse .about-card__inner {
        flex-direction: row-reverse;
    }

    .about-card__content {
        flex: 1;
        padding: 1.75rem 1.85rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .about-card__figure {
        margin: 0;
        width: 270px;
    }
}

.about-timeline-wrap {
    margin-top: 3rem;
    padding-top: 2.5rem;
    border-top: 1px solid #dce4ec;
}

.about-timeline__heading {
    font-size: 25px;
    font-weight: 700;
    color: #0f2744;
    margin: 0 0 1.75rem;
}

.about-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}

.about-timeline::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 0.35rem;
    bottom: 0.35rem;
    width: 2px;
    background: linear-gradient(180deg, var(--secondrycolor), rgba(47, 108, 141, 0.18));
}

.about-timeline__item {
    position: relative;
    padding: 0 0 2.25rem 2.35rem;
    margin: 0;
}

.about-timeline__item:last-child {
    padding-bottom: 0;
}

.about-timeline__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.35rem;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--secondrycolor);
    box-shadow: 0 0 0 3px #f4f7f9;
}

.about-timeline__year {
    display: block;
    font-size:13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--secondrycolor);
    margin-bottom: 0.35rem;
}

.about-timeline__title {
    font-size:18px;
    font-weight: 700;
    color: #1e3a52;
    margin: 0 0 0.5rem;
    line-height: 1.35;
}

.about-timeline__body p {
    font-size:16px;
    line-height: 1.72;
    color: #3d4d5c;
    margin: 0;
    text-align: left;
}

.about-timeline__body p + p {
    margin-top: 0.75rem;
}

@media (max-width: 575.98px) {
    .about-timeline::before {
        left: 0.45rem;
    }

    .about-timeline__item {
        padding-left: 2rem;
    }
}




@media (max-width:575.98px) {
    .navbar-light .navbar-nav .nav-link {
        font-size: 13px !important;
    }

    .homeheading h1 {
        color: #030025;
        font-weight: 900;
        line-height: 60px;
        font-family: "Inter", sans-serif;
        font-size: clamp(28px, 6vw, 45px);
        font-weight: 900;
    }

    .homeheading {
        padding-top: 20px;
        width: 100%
    }

    .getstartedbtn {
        padding: 10px 10px 10px;
        font-size: 10px
    }

    .homedashboard {
        margin-top: 0
    }

    .homeslidgifcontent {
        height: auto;
        margin-bottom: 0
    }

    .sectionpadding {
        padding: 30px 0;
        padding-top: 75px;
    }

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

    .headingtop p {
        font-size: 13px
    }

    .homeheading P {
        font-size: 13px
    }

    .homeheading {
        padding-right: 0
    }

    .contacttitle {
        margin-bottom: 20px
    }

    .toolbar-area {
        display: none
    }

    .ourflightslides .p-2 {
        padding: 20px 10px !important
    }

    .titleheading h2 {
        font-size: 20px
    }

    .newbegimgcontent p {
        font-size: 12px
    }

    .tp-rated-shape-2 {
        top: 34%;
        left: 3%
    }

    .laptopimgfloat img {
        width: 330px
    }

    .mb-screen--cinema .mb-screen__play {
        width: 50px;
        height: 45px;
        min-width: 50px;
        min-height: 50px;
        font-size: 1.25rem;
    }

    .mb-screen--cinema .mb-screen__caption {
        font-size: 0.95rem;
    }

    .mb-screen {
        top: auto;
        max-width: 100%;
    }

    .app-icon img {
        width: 40px;
        height: 40px
    }

    .app-item strong {
        font-size: 13px
    }

    .app-item {
        min-width: auto !important;
    }

    .app-item--infographic {
        max-width: 100%;
    }

    .leftdealsimg .floatdeals {
        width: 280px
    }

    .flobeg-2 {
        top: 35%
    }

    .flobeg-2 img {
        width: 100px
    }

    .flobeg-1 {
        top: 4%
    }

    .flobeg-1 img {
        width: 100px
    }

    .rightdealcotent {
        margin: 20px 0 20px 0;
        text-align: center
    }

    .rightdealcotent h2 {
        font-size: 18px
    }

    .rightdealcotent p {
        font-size: 12px
    }

    .rightdealcotent button {
        font-size: 12px
    }

    .formsection {
        padding: 50px 0px !important
    }

    .mainformpagebox form {
        flex-direction: column;
        width: 100%;
    }

    .mainformpagebox div.left {
        width: 100%;
        border-top-right-radius: 30px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        height: 200px
    }

    .mainformpagebox div.left div p {
        line-height: 22px;
        font-size: 16px;
    }

    .mainformpagebox div.right {
        width: 100%;
        padding: 20px
    }

    .mainformpagebox div.right input {
        font-size: 13px
    }

    .right select {
        font-size: 13px
    }

    .themeitmes img {
        width: 300px
    }

    .pricesection {
        padding: 50px 0
    }

    .pricesection--modern {
        padding-top: 48px !important;
        padding-bottom: 56px !important;
    }

    .ourpricecardbox {
        flex-direction: column
    }

    .ourpricecardbox--modern {
        align-items: stretch !important;
    }

    .whyusmainbox {
        margin-bottom: 20px
    }

    .leftdemoimg img {
        height: 350px
    }

    .leftdemoimg {
        text-align: center
    }

    .floimgcontent>div:nth-child(2) {
        width: 50px;
        height: 50px;
        right: 13%
    }

    .floimgcontent>div:nth-child(3) {
        width: 50px;
        height: 50px;
        right: 13%
    }

    .floimgcontent>div:nth-child(4) {
        width: 40px;
        height: 38px;
        right: 20%
    }

    .floimgcontent>div:nth-child(1) {
        width: 50px;
        height: 50px;
        left: 42%;
        top: -3%
    }

    .floimgcontent>div:nth-child(5) {
        width: 50px;
        height: 50px;
        left: 90px;
        top: 30%
    }

    .whymaincardflx h4 {
        font-size: 13px
    }

    .certificates>div img {
        height: 16px
    }

    .leftshadeimg img {
        width: 100%;
        height: 100%
    }

    /* .footer {
        padding: 60px 20px 50px
    } */

    .navbar .container {
        padding: 0
    }

    .navbar-brand {
        padding: 0 10px !important;
        padding-bottom: 10px !important;
        margin-left: 5px
    }

    .navbar-toggler {
        margin-right: 25px
    }

    .navbar-brand img {
        height: 40px !important
    }

    .navbar::after {
        width: 40% !important;
    }

    .homeheading {
        top: 25%
    }

    .flobeg-1 {
        right: 33px
    }

    .flobeg-2 {
        left: 20px
    }

    .rightdealcotent .color-dark span {
        font-weight: 500;
        font-size: 16px
    }

    .keybenifits h4 {
        font-size: 17px;
        text-align: left;
    }

    .keybenifits ul li {
        font-size: 13px;
        text-align: left
    }

    .benefit-list::before {
        left: 21px;
        top: 22px;
        bottom: 22px;
    }

    .benefit-list .icon {
        flex: 0 0 35px;
        width: 35px;
        height: 35px;
        min-width: 35px;
        font-size: 12px;
        box-shadow: 0 0 0 3px #fff;
    }

    .mainformpagebox div.left div p {
        text-align: left;
    }

    .themeitmes img {
        width: 270px
    }

    .themeimgcard {
        height: 190px
    }

    .why-choose-split__lead {
        margin-bottom: 1.75rem;
    }

    .why-choose-media,
    .why-choose-media__img {
        min-height: 260px;
    }

    .why-choose-media__cta {
        left: 50%;
        transform: translateX(-50%);
        width: max-content;
        max-width: calc(100% - 2rem);
    }

    .why-benefit {
        max-width: none;
        padding-right: 0;
    }

    .titleheading {
        margin-bottom: 10px
    }

    .maniwhysec {
        flex-direction: column
    }

    .left-section {
        width: 100%
    }

    .left-section h1 {
        font-size: 28px
    }

    .left-section {
        padding: 0px;
        margin-bottom:20px;
    }

    .right-chooseimg {
        width: 100%
    }

    .why-with-media__img {
        min-height: 230px;
        height: 230px;
    }

    .why-with-media__cta {
        left: 12px;
        bottom: 12px;
    }

    .open-btn {
        display: none;
        position: relative;
        top: 2px;
        padding: 5px 12px;
        background-color: #09b598;
        color: #fff;
        font-size: 20px;
        border: none;
        z-index: 1000;
        cursor: pointer;
        right: 10px;
        border-radius: 27px;
        margin-right: 12px
    }

    .navbar {
        height: 72px
    }

    .offcanvas {
        position: fixed;
        top: 0;
        left: -250px;
        width: 250px;
        background-color: #000000bd;
        color: #fff;
        padding: 20px;
        transition: left 0.3s ease;
        z-index: 9999;
        visibility: visible;
        flex-direction: column
    }

    .navbar-nav {
        margin: 0px !important;
        flex-direction: column !important;

    }

    .offcanvas.active {
        left: 0
    }

    .offcanvas .close-btn {
        top: 0px;
        right: 5px;
        font-size: 30px;
        cursor: pointer;
        text-align: right;
        margin-left: auto;
        line-height: 35px;
    }

    .overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: rgb(0 0 0 / .4);
        z-index: 9998
    }

    .overlay.active {
        display: block
    }

    .offcanvas.show {
        display: block
    }

    .offcanvas-overlay.show {
        display: block
    }

    .open-btn {
        display: block
    }

    .close-btn {
        display: block
    }

    .navbar-nav {
        margin-top: 0px !important;
        margin-right: 0px !important;
        width: 100% !important;
    }

    .toploginbtns {
        flex-direction: column;
        align-items: baseline;
        padding-left: 10px
    }

    .toploginbtn {
        padding: 10px 10px
    }

    .topagentlogin {
        font-size: 13px
    }

    .navbar-light .navbar-nav .nav-link {
        padding: 8px 10px;
        border-radius: 0px;
        margin-bottom: 10px;
        color: #fff;
        border-bottom: 1px solid #fff;
    }

    .featuretopheading h2 {
        line-height: 20px;
        font-size: 28px;
    }

    .featuretopheading h4 {
        font-size: 16px
    }

    .featuretopheading P {
        font-size: 13px;
        text-align: center
    }

    .featurestabcontents {
        grid-template-columns: 1fr !important
    }

    .product-hero-copy h1 {
        font-size: clamp(1.45rem, 6.5vw, 1.85rem);
    }
    .product-hero-copy{
        margin-top:20px;
    }

    .product-hero-heading-accent {
        font-size: 0.86em;
    }

    .portalslide {
        flex-direction: column;
        gap: 12px;
    }

    .portalcardflx {
        height: 180px !important
    }

    .ourproductflxbox {
        position: relative;
        bottom: auto;
        left: auto;
        margin-top: 14px;
        gap: 12px;
    }

    .ourproductflxbox a.portal-offer-card {
        width: 100%;
        max-width: 360px;
    }

    .portal-offer-card__shell {
        padding: 12px 12px 14px;
    }

    .portal-offer-card__inner {
        padding: 14px 14px 12px;
    }

    .portal-offer-card__title {
        font-size: 1rem;
    }

    .portal-offer-card__hint {
        font-size: 0.78rem;
    }

    .inner-domainimg--b2b .b2b-float {
        font-size: 11px;
        padding: 4px 12px;
    }
    .product-hero-actions__primary-badge{
        width: 30px;
        height: 30px;
    }

    .prodcutpara p {
        font-size: 14px
    }
    .product-hero-visual__frame img{height:auto !important;}
    .feature-showcase__grid{
        grid-template-columns: 1fr;
    }
    .feature-showcase__head-aside .feature-showcase__sub{
        font-size: 14px;
    }
    .feature-showcase .featur_icon_box{
        width: 50px;
        height: 50px;
    }

    .about-intro__title{
        font-size: 26px;
    }
    .about-intro__kicker{
        font-size: 11px;
    }
    .contact-modern .contacttitle{
        font-size: 23px;
    font-weight: 700;
    }

    .feature-showcase .featur_icon_box svg {
        width: 30px;
        height: 30px;
    }
    .feature-showcase .inside-page__container p.apiText{
        font-size: 14px;
    }
    .about-page--main .about-intro__text p{
        font-size: 14px;
    }

    .aboutuscontent p {
        font-size: 13px
    }

    .ourmissioncontent {
        width: 100%
    }

    .ourmissioncontent p {
        font-size: 13px
    }

    .ourmissionbox {
        text-align: center !important
    }

    .ourmissionbox img {
        height: 240px
    }

    .flxmobcheck {
        flex-direction: column-reverse
    }

    .flyshopjourneyconte h4 {
        font-size: 16px
    }

    .flyshopjourneyconte p {
        font-size: 13px
    }

    .arc {
        width: 300px;
        height: 150px
    }

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

    .col_fourth {
        width: 100%
    }

    .steps::after,
    .steps::before,
    .steps .col_fourth::before {
        display: none
    }

    .alllocationdtls {
        padding-top: 0
    }

    .contactcardflx {
        margin-bottom: 50px
    }

    .alllocationdtls .allinfoconact {
        margin-bottom: 15px;
    }

    .rightcontentboxflx {
        margin-top: 0
    }

    .rightcontentboxflx {
        padding: 20px 20px
    }

    .navbar-light .navbar-nav .nav-link.active {
        background: var(--themecolor);
        color: #fff;
        border-bottom: 0px;
        border-radius: 5px;
    }

    .mobagent {
        padding-top: 90px !important
    }

    .process-point-left {
        display: none
    }

    .process-point-left:before {
        display: none
    }

    .process-box {
        width: 85%;
        margin: auto;
        margin-bottom: 50px
    }

    .process-right:after,
    .process-left:after {
        display: none
    }

    .bookdemotop {
        animation: none
    }

    .mobparahide {
        display: none
    }

    .bannerbtn {
        display: none
    }

    .offcanvas-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        backdrop-filter: blur(5px);
        background: rgb(0 0 0 / .5);
        z-index: 9998
    }

    .offcanvas-overlay.active {
        display: block
    }

    .toploginbtn {
        width: 100%
    }

    .topagentlogin {
        border-radius: 5px
    }

    .homtbottomtheme img {
        height: 200px
    }

    #modal-content {
        padding-top: 50px
    }

    .homebaanercontent {
        flex-direction: column
    }

    .homerightslidecontent {
        display: flex;
        flex-direction: column;
        overflow: visible
    }

    .homerightslidecontent {
        width: 100%;
        height: 285px !important
    }

    .rightslidecontent {
        flex-shrink: initial;
        height: auto;
        align-items: center
    }

    .rightslidecontent h2 {
        text-align: center;
        font-size: 20px !important;
        line-height: 28px
    }

    .bannerbtn {
        width: 100%;
        justify-content: center
    }

    .slidehomimg {
        padding-bottom: 20px
    }

    .slidehomimg {
        height: 60px;
        width: 120px
    }

    .toploginbtns {
        width: 100%;
        padding-left: 10px;
        width: 100%;
        padding-right: 10px;
        gap: 10px
    }

    .topagentlogin {
        width: 100%;
        font-size: 13px;
        font-weight: 400;
        padding: 10px 10px
    }

    .fixed-header .bookdemotop {
        width: 100%;
        text-align: center;
    }

    .ourallthemeslide {
        width: 42%;
    }

    .portfolio-theme-board .ourallthemeslide.portfolio-theme-rail {
        width: 100%;
        max-width: 100%;
        flex: 1 1 auto;
    }

    .themeitmes h3 {
        font-size: 12px;
        padding: 7px 10px;
        margin-top: 9px;
    }

    .headingtop {
        width: 100%
    }

    .headingtop h2 {
        font-size: 22px
    }

    .floatourtheme {
        left: 43px;
        top: 18px;
        width: 272px;
        height: 170px
    }

    .slidemedia img {
        width: 274px !important
    }

    .laptopslidebox {
        padding: 86px;
        width: 356px
    }

    .b2c-hero.sectionpadding {
        padding-top: 5.25rem !important;
        padding-bottom: 2rem !important;
    }

    .mobhomepadd {
        padding-top: 80px !important
    }

    .leftthemedetails h4 {
        font-size: 20px !important
    }

    .leftthemedetails p {
        font-size: 13px !important
    }

    .mythemeflxbox {
        flex-direction: column
    }

    .leftkeypoints {
        width: 100%
    }

    .leftthemedetails ul li {
        font-size: 14px !important;
        margin-bottom: 5px !important
    }

    .rightthemeimg {
        width: 100% !important
    }

    .screen {
        height: 170px !important;
        --screen-view-h: 170px
    }

    .lepmediascreen {
        padding: 20px 16px 33px 18px !important
    }

    .screen2 {
        height: 170px !important;
        --screen-view-h: 170px
    }

    .screen3 {
        height: 170px !important;
        --screen-view-h: 170px
    }

    .screen4 {
        height: 170px !important;
        --screen-view-h: 170px
    }

    .mobflexclm {
        flex-direction: column-reverse
    }

    .screen5 {
        height: 170px !important;
        --screen-view-h: 170px
    }

    .waves {
        min-height: 51px;
        max-height: 50px;
        height: 5vh
    }

    .management-section {
        padding-bottom: 70px !important
    }

    .b2b-landing-hero .b2c-hero__copy h1 {
        font-size: 1.65rem;
        letter-spacing: -0.02em
    }

    .b2b-landing-hero .b2c-hero__lede {
        font-size: 0.95rem
    }

    .b2b-landing-hero .b2b-hero__visual {
        max-width: 100%;
        margin-top: 0.75rem
    }

    .b2brightcontent {
        margin-top: 10px
    }

    .b2brightcontent p {
        font-size: 14px
    }

    .b2brightcontent h2 {
        font-size: 20px
    }

    .angle-1,
    .angle-2 {
        width: 240px
    }

    .b2brightcontent .b2c-heading {
        margin-bottom: 10px
    }

    h3.b2c-heading-child {
        font-size: 20px;
        padding-left: 0
    }

    h3.b2c-heading-child:after {
        display: none
    }

    .leftfloat {
        text-align: left !important
    }

    .mainhomsecmob {
        padding-top: 70px !important
    }

    .homerightthemeslide {
        padding: 15px 45px 13px;
        width: 340px;
        height: 200px;
        margin-top: 0
    }

    .homethemes img {
        height: 158px
    }

    .homemobileslidcard {
        width: 217px;
        height: 237px;
        padding: 15px 47px 9px 66px;
        right: -17px;
        top: 50px
    }

    .mobslidbox img {
        height: 208px;
        border-radius: 12px
    }

    .mboshowgetstatbtn {
        display: block;
        margin-bottom: 20px
    }

    .mobhide {
        display: none
    }

    .mobparashow {
        display: block;
        font-size: 13px
    }

    .homebaanercontent {
        height: auto;
    }

    .instantdemomob {
        display: block
    }

    .sucessfullcontent {
        width: 340px
    }

    .calendar-container {
        flex-direction: column
    }

    .calendar-container .left-section {
        width: 100%
    }

    .right-section {
        width: 100%
    }

    .ribbonrightflx {
        display: none
    }

    .mobileribbon {
        position: absolute;
        top: -5px;
        right: -5px;
        z-index: 1;
        overflow: hidden;
        width: 105px;
        height: 105px;
        text-decoration: none;
        pointer-events: none;
        transition: all 0.1s ease-in;
        will-change: transform;
        display: block
    }

    .mobileribbon .ribboncontent {
        position: relative;
        top: 21px;
        left: -11px;
        z-index: 1;
        display: block;
        width: 160px;
        padding: 9px 0 6px 0;
        background: var(--1, linear-gradient(89deg, #08ab90 7.51%, #3365c7 94.39%));
        color: #fff;
        box-shadow: 0 2px 4px 0 rgb(0 0 0 / 20%);
        font-weight: 700;
        line-height: 1.2;
        text-align: center;
        text-decoration: none;
        pointer-events: auto;
        transition: all 0.1s ease-in;
        transform: rotate(45deg);
        margin-left: -7px;
        color: var(--color-grey-4, #F2F2F2);
        font-size: 8px;
        text-transform: uppercase
    }

    .mobileribbon::before,
    .mobileribbon::after {
        content: "";
        position: absolute;
        width: 6px;
        height: 6px;
        background-color: #505960;
        transition: all 0.1s ease-in
    }

    .mobileribbon::before {
        top: 0;
        left: 0
    }

    .mobileribbon::after {
        right: 0;
        bottom: 0
    }
}

@media (max-width:1399.98px) {
    .toploginbtn {
        font-size: 12px
    }

    .bookdemotop {
        font-size: 12px
    }

    .navbar-brand img {
        height: 40px !important
    }

    .rightthemeimg {
        width: 69%
    }

    .lepmediascreen {
        padding: 29px 30px 44px 32px
    }

    .screen,
    .screen3,
    .screen2 {
        width: 81%;
        height: 298px;
        --screen-view-h: 298px
    }

    .leftthemedetails h4 {
        font-size: 25px
    }

    .leftthemedetails p {
        font-size: 14px
    }

    .leftthemedetails ul li {
        font-size: 16px;
        margin-bottom: 10px
    }

    .rightslidecontent h2 {
        font-size: 28px;
        line-height: 33px
    }

    .getstartedbtn {
        font-size: 12px;
        padding: 10px 10px 10px
    }

    .homeheading h1 {
        font-size: 32px;
        line-height: 3rem
    }

    .homemobileslidcard {
        right: -90px
    }

    .showdatehere {
        cursor: pointer;
        color: #0a0a0a;
        /* padding: 10px; */
        border-radius: 6px;
        font-size: 15px;
        margin-top: 20px;
        /* background: #f3f3f3; */
        /* text-align: center; */
    }

    .card_boox {
        width: 100%;
        height: 13rem;

    }

    .card_boox p {
        font-size: 12px;
    }

    .hero-grid {
        flex-direction: column !important;
        display: flex;
    }

    .leanmorebtn {
        margin-bottom: 0px;
    }

    .titleheading p {
        font-size: 13px;
    }

    .app-slider .slick-next {
        right: 0px !important;
    }

    .app-slider .slick-prev {
        left: 0px !important;
    }

    .leftformflaot h3 {
        font-size: 20px;
    }

    .ourserveslide .p-2 {
        margin: 0px;
    }

    .ourservicecontents {
        height: 350px;
        padding: 10px;
    }

    .fly_airplane_icon {
        top: 26%;
        right: 35px;
    }

    .fly_airplane_icon img {
        width: 45px;
    }

    .showmore-box p {
        font-size: 14px;
        max-width: 100%;
    }

    .shape-inner_box img {
        width: 150px !important;
    }

    .shape-inner_box {
        left: 0px;
        top: 26px;
    }

    .servecescontent h3 {
        font-size: 15px !important;
    }

    .servecescontent {
        margin-top: 10px;
    }

    .blogmaincontent .p-3 {
        padding: 5px !important;
    }

    .dtr-post-content a {
        font-size: 12px !important;
        line-height: 12px !important;
    }

    .blogbox img {
        object-fit: cover;
        height: 150px;
    }

    .blogcontentbox {
        padding: 12px 5px 5px;
    }

    .blog_inner_img {
        height: 140px !important;
    }
    .fixed-header .toploginbtn{
        display:block !important;
    }

    blogbox {
        height: 335px !important;
    }

    .payment-logos {
        margin-top: 15px;
    }

    .mobflx_style {
        width: 100%;
        margin-top: 10px;
    }

    .titleheading .my-4 {
        width: 100% !important;
    }

    .leftformimg img {
        height: 190px;
        object-fit: cover;
    }

    .inner_ctc_box {
        width: 100%;
    }

}

.leftformimg img {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    width: 100%
}


.blogdetailscontent h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    margin-top: 30px;
    margin: 0px;
    color: #0f4162;
}

.blogdetailscontent h4 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
    margin-top: 20px;
    color: #222;
}

.blogdetailscontent p {
    font-size: 16px;
    line-height: 1.9;
    margin-bottom: 10px;
    color: #5f5f5f;
}

.blogdetailscontent ul,
.blogdetailscontent ol {
    margin-bottom: 20px;
    padding-left: 26px;
    margin-top:15px;
}

.blogdetailscontent li {
    font-size: 16px;
    line-height: 1.9;
    margin-bottom: 10px;
    color: #5f5f5f;
}

.blogdetailscontent ul li {
    list-style: decimal-leading-zero;
}

.blogdetailscontent ol li {
    list-style-type: disc;
}

.blogdetailscontent li ol,
.blogdetailscontent li ul {
    margin-top: 10px;
    margin-left: 10px;
}

/* Contact page: international phone input with floating-style label */
.contact-phone-wrap {
    position: relative;
}

.contact-phone-wrap .form-label {
    position: absolute;
    left: 52px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    color: #6c757d;
    font-size: 1rem;
    pointer-events: none;
    transition: top 0.2s, font-size 0.2s, color 0.2s;
    z-index: 2;
}

.contact-phone-wrap.phone-focused .form-label,
.contact-phone-wrap.phone-has-value .form-label {
    top: 0.65rem;
    transform: none;
    font-size: 0.75em;
    color: #6c757d;
}

.contact-phone-wrap .iti {
    width: 100%;
}

.contact-phone-wrap .iti input {
    padding-left: 0;
    height: calc(3.5rem + 2px);
    border-radius: 0.375rem;
    border: 1px solid #dee2e6;
}

.contact-phone-wrap .iti input:focus,
.contact-phone-wrap .iti.iti--allow-dropdown input:focus {
    border-color: var(--themecolor);
    box-shadow: none;
}

.contact-phone-wrap .iti__selected-flag {
    padding: 0 0 0 12px;
    border-right: 1px solid #dee2e6;
}

.contact-phone-wrap .iti__selected-dial-code {
    margin-left: 6px;
    color: #212529;
}
.blogdetailscontent img{
    object-fit: contain;
    height:400px !important;
}

/* Services - umbrella card layout */
.services-umbrella {
    position: relative;
    overflow: hidden;
    background: #0f4162 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
}

.services-umbrella .titleheading h2,
.services-umbrella .titleheading p {
    color: #f8fbff;
}

.ourserveslide--umbrella {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 55px;
    margin-top:30px;
    margin-bottom:30px;
}
.top-quote{
    position: absolute; top: -17px; right: -20px; background: #0f4162; padding: 5px;
}
.bottom-quote{
    position: absolute; bottom: -17px; left: -13px; background: #0f4162; padding: 5px;
}
.bottom-quote img{
    transform: rotate(180deg);
    opacity: 50%;
    width: 35px !important;
}
.top-quote img{
    opacity:50%;
    width: 35px !important;
}

.ourserveslide--umbrella .p-2 {
    margin: 0 !important;
    padding: 0 !important;
}

.ourserveslide--umbrella .ourservicecontents {
    position: relative;
    height: 100%;
    min-height: 196px;
    padding: 35px 35px 35px;
    border-radius: 6px;
    background: transparent;
    border: 1.5px dashed rgb(255 255 255 / 72%);
    backdrop-filter: blur(1px);
}

.ourserveslide--umbrella .ourservicecontents::after {
    display: none;
}

.ourserveslide--umbrella .serveimg {
  background:transparent;
}

.ourserveslide--umbrella .serveimg svg {
    width: 40px;
    height: 40px;
}

.ourserveslide--umbrella .serveimg svg path {
    fill: #f2f7ff;
}

.ourserveslide--umbrella .servecescontent {
    margin-top: 0;
}

.ourserveslide--umbrella .servecescontent h3 {
    text-align: left;
    font-size: 20px;
    color: #f3f8ff;
    margin-bottom: 8px;
}

.ourserveslide--umbrella .servecescontent p {
    text-align: left;
    font-size: 16px;
    line-height: 1.5;
    color: rgb(226 226 226);
}

.ourserveslide--umbrella .ourservicecontents:hover {
    border-color: #fff;
    transform: translateY(-3px);
}

.ourserveslide--umbrella .ourservicecontents:hover .serveimg svg path {
    fill: #ffffff;
}

@media (max-width: 1199px) {
    .ourserveslide--umbrella {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .ourserveslide--umbrella {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ourserveslide--umbrella .servecescontent h3 {
        font-size: 18px !important;
    }

    .ourserveslide--umbrella .servecescontent p {
        font-size: 14px;
    }
}

@media (max-width: 575.98px) {
    .ourserveslide--umbrella {
        grid-template-columns: 1fr;
    }
}

/* —— Get Started: schedule / ticket cards (vertical stack) —— */
.section-schedule-cards {
    background-color: #f0f6f5;
    background-image: url("../images/testimonial-vector-bg.png");
    background-repeat: no-repeat;
    border-top: 1px solid #e9e9e9;
    background-size: cover;
    border-bottom: 1px solid #e9e9e9;
}

/* Trust line — paper-stamp pill (scoped to this section) */
.section-schedule-cards .titleheading .badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    margin: 0 0 0.85rem;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.015em;
    color: #123033;
    background-color: #ecf6f1;
    background-image: repeating-linear-gradient(-11deg, transparent, transparent 7px, rgba(18, 48, 51, 0.034) 7px, rgba(18, 48, 51, 0.034) 8px);
    border: 1px solid rgba(18, 48, 51, 0.26);
    border-radius: 11px 14px 10px 12px;
    border-bottom-width: 3px;
}

.section-schedule-cards .titleheading .badge-pill .badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.85rem;
    height: 1.85rem;
    font-size: 0.95rem;
    line-height: 1;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(18, 48, 51, 0.14);
    border-radius: 9px 11px 8px 10px;
    transform: rotate(-9deg);
    box-shadow: 1px 2px 0 rgba(18, 48, 51, 0.05);
}

@media (prefers-reduced-motion: reduce) {
    .section-schedule-cards .titleheading .badge-pill .badge-icon {
        transform: none;
    }
}

@media (max-width: 575.98px) {
    .section-schedule-cards .titleheading .badge-pill {
        font-size: 0.76rem;
        padding: 0.38rem 0.8rem 0.42rem 0.5rem;
    }
}

/* Heading — sketchbook: Fraunces + ink squiggle + hand underline + marker */
.section-schedule-cards .getstarted-hero-title {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 0 0 0.85rem;
    padding: 0;
    color: #141816;
}

.section-schedule-cards .getstarted-hero-title__scribble {
    flex-shrink: 0;
    width: 26px;
    height: auto;
    align-self: stretch;
    min-height: 5.5rem;
    max-height: 9rem;
    color: rgba(12, 52, 48, 0.42);
}

.section-schedule-cards .getstarted-hero-title__inner {
    flex: 1;
    min-width: 0;
}

.section-schedule-cards .getstarted-hero-title__line {
    display: block;
    position: relative;
    padding-bottom: 10px;
    font-family: "Fraunces", Georgia, "Times New Roman", serif;
    font-size: 40px;
    font-weight: 650;
    font-variation-settings: "SOFT" 78, "WONK" 0;
    line-height: 1.14;
    letter-spacing: -0.028em;
    color: #121816;
}

.section-schedule-cards .getstarted-hero-title__sub {
    margin-top: 0.55rem;
    font-family: inherit;
    font-size: clamp(0.98rem, 0.88rem + 0.35vw, 1.12rem);
    font-weight: 500;
    font-style: italic;
    line-height: 1.45;
    letter-spacing: 0.01em;
    color: #3a4e52;
}

.section-schedule-cards .getstarted-hero-title__with {
    font-style: italic;
    font-weight: 500;
}

.section-schedule-cards .getstarted-hero-title__brand {
    display: inline;
    font-family: "Fraunces", Georgia, serif;
    font-style: normal;
    font-weight: 780;
    font-variation-settings: "SOFT" 50, "WONK" 0;
    letter-spacing: -0.02em;
    color: #0b322d;
    background: linear-gradient(
        180deg,
        transparent 58%,
        rgba(255, 218, 120, 0.52) 58%,
        rgba(255, 218, 120, 0.42) 92%,
        transparent 92%
    );
    padding: 0 0.06em;
    border-bottom: none;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

@media (max-width: 575.98px) {
    .section-schedule-cards .getstarted-hero-title {
        gap: 0.45rem;
    }

    .section-schedule-cards .getstarted-hero-title__scribble {
        width: 20px;
        min-height: 4.5rem;
        max-height: 9rem;
    }

    .section-schedule-cards .getstarted-hero-title__line {
        font-size: clamp(1.45rem, 1.1rem + 1.5vw, 1.95rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .section-schedule-cards .getstarted-hero-title__line::after {
        opacity: 0.65;
    }
}

/* CTA — same paper / stamp language as .badge-pill above */
.section-schedule-cards .getstartedbtn-wrap {
    display: flex;
    justify-content: flex-start;
}

.section-schedule-cards .getstartedbtn.getstartedbtn--paper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    padding: 0.72rem 1.5rem 0.68rem 1.45rem;
    font-size: 16px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #123033 !important;
    background-color: #ecf6f1;
    background-image: repeating-linear-gradient(
        -11deg,
        transparent,
        transparent 7px,
        rgba(18, 48, 51, 0.034) 7px,
        rgba(18, 48, 51, 0.034) 8px
    );
    border: 1px solid rgba(18, 48, 51, 0.26);
    border-radius: 12px 15px 11px 13px;
    border-bottom-width: 4px;
    border-bottom-color: rgba(18, 48, 51, 0.34);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.75),
        3px 5px 0 rgba(18, 48, 51, 0.08);
    transition: transform 0.16s ease, background-color 0.16s ease, border-bottom-width 0.12s ease,
        box-shadow 0.16s ease;
}

.section-schedule-cards .getstartedbtn.getstartedbtn--paper .text {
    color: inherit !important;
}

.section-schedule-cards .getstartedbtn.getstartedbtn--paper:hover {
    background-color: #dff3ea;
    transform: translateY(-2px);
    border-bottom-width: 5px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        3px 6px 0 rgba(18, 48, 51, 0.1);
}

.section-schedule-cards .getstartedbtn.getstartedbtn--paper:active {
    transform: translateY(2px);
    background-color: #d4ebe2;
    border-bottom-width: 2px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        2px 2px 0 rgba(18, 48, 51, 0.06);
}

.section-schedule-cards .getstartedbtn.getstartedbtn--paper:focus-visible {
    outline: 2px solid rgba(18, 48, 51, 0.45);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .section-schedule-cards .getstartedbtn.getstartedbtn--paper,
    .section-schedule-cards .getstartedbtn.getstartedbtn--paper:hover,
    .section-schedule-cards .getstartedbtn.getstartedbtn--paper:active {
        transform: none;
        transition: none;
    }
}

@media (max-width: 575.98px) {
    .section-schedule-cards .getstartedbtn.getstartedbtn--paper {
        font-size: 13px;
        max-width: 19rem;
        justify-content: center;
        text-align: center;
    }
}

.section-schedule-cards .cards_right_demo--schedule {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.15rem;
    width:100%;
    margin-left: auto;
    margin-right: auto;
}

.section-schedule-cards .schedule-card {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-align: left !important;
    border-radius: 0 !important;
    overflow: visible !important;
    cursor: default;
}

.section-schedule-cards .schedule-card::after {
    display: none !important;
}

.section-schedule-cards .schedule-card__shell {
    padding: 0.85rem 1rem 0.95rem;
    background: #fdfdfd;
    border: 2px dashed rgba(52, 62, 68, 0.22);
    border-radius: 22px 17px 24px 19px;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    box-shadow: 6px 7px 0 rgba(3, 24, 17, 0.07);
}

@media (min-width: 576px) {
    .section-schedule-cards .schedule-card:nth-child(1) .schedule-card__shell {
        transform: rotate(-0.45deg);
    }

    .section-schedule-cards .schedule-card:nth-child(2) .schedule-card__shell {
        transform: rotate(0.5deg);
    }

    .section-schedule-cards .schedule-card:nth-child(3) .schedule-card__shell {
        transform: rotate(-0.28deg);
    }

    .section-schedule-cards .schedule-card:nth-child(4) .schedule-card__shell {
        transform: rotate(0.38deg);
    }
}

.section-schedule-cards .schedule-card:hover .schedule-card__shell {
    transform: translateY(-4px) rotate(0deg);
    box-shadow: 8px 10px 0 rgba(3, 24, 17, 0.09);
}

@media (prefers-reduced-motion: reduce) {
    .section-schedule-cards .schedule-card:nth-child(n) .schedule-card__shell {
        transform: none;
    }

    .section-schedule-cards .schedule-card:hover .schedule-card__shell {
        transform: none;
    }
}

.section-schedule-cards .schedule-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.section-schedule-cards .schedule-card__meta-l,
.section-schedule-cards .schedule-card__meta-r {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #98a5b3;
    line-height: 1.2;
}

.section-schedule-cards .schedule-card__rule {
    margin: 0.65rem 0 0.75rem;
    height: 0;
    border: none;
    border-top: 1px dashed #d5dde6;
}

.section-schedule-cards .schedule-card__panel {
    position: relative;
    display: grid;
    grid-template-columns: 6px minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
    padding: 0.75rem 0.65rem 0.85rem 0.6rem;
    border-radius: 14px;
    background: var(--sc-panel, #f8fafb);
}

.section-schedule-cards .schedule-card__accent {
    width: 3px;
    border-radius: 4px;
    background: var(--sc-accent, #3182ce);
    align-self: stretch;
}

.section-schedule-cards .schedule-card__pill {
    position: absolute;
    top: 0.55rem;
    right: 0.6rem;
    min-width: 1.75rem;
    padding: 0.15rem 0.45rem;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    border-radius: 999px;
    color: var(--sc-title, #2c5282);
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--sc-pill-border, rgba(49, 130, 206, 0.35));
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.section-schedule-cards .schedule-card__main {
    padding-right: 0px;
    min-width: 0;
}

.section-schedule-cards .schedule-card__title-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.35rem;
}

.section-schedule-cards .schedule-card__title-row i {
    flex-shrink: 0;
    font-size: 18px !important;
    margin: 0 !important;
    display: inline-block !important;
    color: var(--sc-title, #2c5282) !important;
    opacity: 0.95;
}

.section-schedule-cards .schedule-card__main h4 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 !important;
    color: var(--sc-title, #2c5282);
    line-height: 1.25;
}

.section-schedule-cards .schedule-card__main p {
    font-size: 16px;
    line-height: 1.5;
    margin: 0 !important;
    color: var(--sc-body, #4a6572);
}

.mian-award-box{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    margin-top:50px;
}

.box-item {
    position: relative;
    -webkit-backface-visibility: hidden;
    width:100%;
    margin-bottom: 35px;
    max-width: 100%;
  }
  
  .flip-box {
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    perspective: 1000px;
    -webkit-perspective: 1000px;
  }
  
  .flip-box-front,
  .flip-box-back {
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    min-height: 330px;
    -ms-transition: transform 0.7s cubic-bezier(.4,.2,.2,1);
    transition: transform 0.7s cubic-bezier(.4,.2,.2,1);
    -webkit-transition: transform 0.7s cubic-bezier(.4,.2,.2,1);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  .flip-box-front {
    -ms-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }
  
  .flip-box:hover .flip-box-front {
    -ms-transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }
  
  .flip-box-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    
    -ms-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }
  
  .flip-box:hover .flip-box-back {
    -ms-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }
  
  .flip-box .inner {
    position: absolute;
    left: 0;
    width: 100%;
    padding: 60px;
    outline: 1px solid transparent;
    -webkit-perspective: inherit;
    perspective: inherit;
    z-index: 2;
    
    transform: translateY(-50%) translateZ(60px) scale(.94);
    -webkit-transform: translateY(-50%) translateZ(60px) scale(.94);
    -ms-transform: translateY(-50%) translateZ(60px) scale(.94);
    top: 50%;
  }
  
  .flip-box-header {
    font-size: 34px;
  }
  
  .flip-box p {
    font-size: 20px;
    line-height: 1.5em;
  }
  
  .flip-box-img {
    margin-top: 25px;
  }
  
  .flip-box-button {
    background-color: transparent;
    border: 2px solid #fff;
    border-radius: 2px;
    color: #fff;
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    margin-top: 25px;
    padding: 15px 20px;
    text-transform: uppercase;
  }









.section-schedule-cards .schedule-card--t1 {
    --sc-panel: #fff5f5;
    --sc-accent: #e53e3e;
    --sc-title: #c53030;
    --sc-body: #9b2c2c;
    --sc-pill-border: rgba(229, 62, 62, 0.4);
}

.section-schedule-cards .schedule-card--t2 {
    --sc-panel: #fff5fa;
    --sc-accent: #d53f8c;
    --sc-title: #b83280;
    --sc-body: #97266d;
    --sc-pill-border: rgba(213, 63, 140, 0.38);
}

.section-schedule-cards .schedule-card--t3 {
    --sc-panel: #f0f7ff;
    --sc-accent: #3182ce;
    --sc-title: #2c5282;
    --sc-body: #2d4a5e;
    --sc-pill-border: rgba(49, 130, 206, 0.38);
}

.section-schedule-cards .schedule-card--t4 {
    --sc-panel: #f0fff4;
    --sc-accent: #38a169;
    --sc-title: #276749;
    --sc-body: #2f5f49;
    --sc-pill-border: rgba(56, 161, 105, 0.4);
}

@media (max-width: 575.98px) {
    .section-schedule-cards .schedule-card__main {
        padding-right: 2.1rem;
    }

    .section-schedule-cards .schedule-card__main h4 {
        font-size: 0.95rem;
    }
}

@media (max-width: 575.98px) {
    .ourallthemeslide {
        width: 100%;
    }

    .portfolio-theme-board .ourallthemeslide.portfolio-theme-rail {
        width: 100%;
        flex: 1 1 auto;
        max-width: 100%;
    }

    .ourallthemeslide .slick-slide > div {
        padding: 6px 0;
    }

    .themeimgcard {
        height: 200px;
    }
}

/* Flyshop enquiry modal — hero + overlapping sheet; theme --themecolor; visible field chrome */
#popupModal.flyshop-modal {
    --fm-accent: #0f4162;
    --fm-accent-dim: rgba(15, 65, 98, 0.2);
    --fm-field-bg: #f8fbfd;
    --fm-field-edge: #dbe4ec;
    --fm-muted: #728391;
    --fm-title: #111827;

    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(0.75rem, 4vw, 1.5rem);
    background: transparent !important;
    backdrop-filter: none !important;
    box-sizing: border-box;
}

/* Some scripts toggle popup with display:block; force centered flex layout */
#popupModal.flyshop-modal[style*="display: block"] {
    display: flex !important;
}

#popupModal.flyshop-modal .flyshop-modal__scrim {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(7px);
}

#popupModal.flyshop-modal .flyshop-modal__dialog.popup-content {
    position: relative;
    z-index: 1;
    margin: 0 !important;
    width: 100% !important;
    max-width: min(432px, 100%) !important;
    height: auto !important;
    max-height: min(92vh, 780px);
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    background: #e8eef0;
    box-shadow:
        6px 22px 0 rgba(9, 181, 152, 0.07),
        0 20px 50px rgba(15, 46, 72, 0.18);
    text-align: left;
}

#popupModal.flyshop-modal .flyshop-modal__hero {
    position: relative;
    flex-shrink: 0;
    min-height: 180px;
    max-height: 180px;
    border-top-left-radius: 20px;
    overflow: hidden;
    border-top-right-radius: 20px;
}

#popupModal.flyshop-modal .flyshop-modal__hero-slider,
#popupModal.flyshop-modal .flyshop-modal__hero-slider .carousel-inner,
#popupModal.flyshop-modal .flyshop-modal__hero-slider .carousel-item,
#popupModal.flyshop-modal .flyshop-modal__hero-slide {
    height: 250px;
}

#popupModal.flyshop-modal .flyshop-modal__hero-slide {
    position: relative;
    overflow: hidden;
    background: #dfe8ee;
}

#popupModal.flyshop-modal .flyshop-modal__hero-img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 180px;
    max-height: 180px;
    object-fit: cover;
    object-position: center;
}

#popupModal.flyshop-modal .flyshop-modal__hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        115deg,
        rgba(9, 181, 152, 0.82) 0%,
        rgba(47, 108, 141, 0.55) 48%,
        rgba(15, 65, 98, 0.65) 100%
    );
    mix-blend-mode: multiply;
    pointer-events: none;
}

#popupModal.flyshop-modal .flyshop-modal__hero-kicker {
    position: absolute;
    left: 1rem;
    bottom: 188px;
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

#popupModal.flyshop-modal .flyshop-modal__hero-line {
    position: absolute;
    left: 1rem;
    bottom: 158px;
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}

#popupModal.flyshop-modal .flyshop-modal__hero-slider .carousel-indicators {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 40%;
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 12;
}

#popupModal.flyshop-modal .flyshop-modal__hero-slider .carousel-indicators [data-bs-target] {
    width: 8px;
    height: 8px;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px;
    background: #fff;
    opacity: 1;
    cursor: pointer;
    transition: width 0.22s ease, background-color 0.22s ease;
}

#popupModal.flyshop-modal .flyshop-modal__hero-slider .carousel-indicators .active {
    background: #0f4162;
    width: 30px;
}


#popupModal.flyshop-modal .flyshop-modal__body-sheet {
    position: relative;
    z-index: 2;
    margin-top: -1.35rem;
    padding: 0px;
    border-radius: 24px 24px 14px 14px;
    background: #FFFFFF;
    box-shadow: #00000042 0px 0px 7px;
}

#popupModal.flyshop-modal .flyshop-modal__sheet.queryformcontent {
    width: 100% !important;
    max-width: none !important;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

#popupModal.flyshop-modal .flyshop-modal__stack.popinputs {
    width: 100%;
    margin: 0;
    align-items: stretch;
}

#popupModal.flyshop-modal .leftformimg {
    display: none !important;
}

#popupModal.flyshop-modal .flyshop-modal__form.formcontent {
    padding: clamp(1.15rem, 3vw, 1.5rem) clamp(1.15rem, 3.5vw, 1.65rem) clamp(1.25rem, 3vw, 1.65rem);
}

#popupModal.flyshop-modal .flyshop-modal__panel .flyshop-modal__form.formcontent {
    text-align: center;
    background: #ffffff;
    border: 1px solid #e8edf2;
    border-radius: 22px;
    box-shadow: 0 12px 30px -24px rgba(15, 65, 98, 0.28);
}

#popupModal.flyshop-modal .flyshop-modal__panel .flyshop-modal__masthead {
    text-align: center;
}

/* Phone step — clean mobile auth style; minimal and human-made look */
#popupModal.flyshop-modal #phone-section .flyshop-sketch-phone {
    --fs-clean-brand: #0f4162;
    --fs-clean-brand-soft: rgba(15, 65, 98, 0.14);
}

#popupModal.flyshop-modal #phone-section .flyshop-sketch-phone.flyshop-modal__form.formcontent {
    padding: clamp(1.35rem, 4vw, 1.85rem) clamp(1.15rem, 3.8vw, 1.55rem) clamp(1.4rem, 4vw, 1.7rem);
    text-align: center;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid #e8edf2;
    box-shadow:
        0 18px 44px -28px rgba(12, 36, 56, 0.32),
        0 8px 22px -16px rgba(15, 65, 98, 0.18);
}

#popupModal.flyshop-modal #phone-section .flyshop-sketch-phone__head.flyshop-modal__masthead {
    margin-bottom: 1.2rem;
    text-align: center;
}

#popupModal.flyshop-modal #phone-section .flyshop-sketch-phone__eyebrow {
    margin: 0 0 0.55rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5f7383;
}

#popupModal.flyshop-modal #phone-section .flyshop-sketch-phone__title.flyshop-modal__h2 {
    margin: 0;
    font-size: clamp(1.45rem, 4.8vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: #111827;
}

#popupModal.flyshop-modal #phone-section .flyshop-sketch-phone__lead.flyshop-modal__lead {
    margin: 0.5rem auto 0;
    max-width: 20rem;
    font-size: 0.84rem;
    line-height: 1.5;
    color: #728391;
}

#popupModal.flyshop-modal #phone-section .flyshop-sketch-phone__lbl.flyshop-modal__lbl {
    margin: 0 0 0.35rem 0.05rem;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
    color: #374151;
}

#popupModal.flyshop-modal #phone-section .flyshop-sketch-phone__field.flyshop-modal__field {
    border-radius: 13px;
    border: 1px solid #dbe4ec;
    background: #f8fbfd;
    box-shadow: none;
}

#popupModal.flyshop-modal #phone-section .flyshop-sketch-phone__field.flyshop-modal__field:focus-within {
    border-color: var(--fs-clean-brand);
    background: #fff !important;
}

#popupModal.flyshop-modal #phone-section .flyshop-sketch-phone__field.flyshop-modal__field--tel .iti__selected-flag {
    border-radius: 13px 0 0 13px;
}

#popupModal.flyshop-modal #phone-section .flyshop-sketch-phone__hint.flyshop-modal__inline-hint {
    margin-top: 0.9rem;
    text-align: center;
    font-size: 0.8rem;
    color: #6e7f8e;
}

#popupModal.flyshop-modal #phone-section .flyshop-sketch-phone__hint .flyshop-modal__a {
    color: var(--fs-clean-brand);
    font-weight: 700;
    border-bottom: none;
    text-decoration: none;
}

#popupModal.flyshop-modal #phone-section .flyshop-sketch-phone__hint .flyshop-modal__a:hover {
    text-decoration: underline;
}

#popupModal.flyshop-modal #phone-section .flyshop-sketch-phone__cta.flyshop-modal__cta-wrap {
    margin-top: 1.2rem;
}

#popupModal.flyshop-modal #phone-section .flyshop-sketch-phone__cta.popupbtn button {
    border-radius: 16px !important;
    padding: 0.88rem 1rem !important;
    font-size: 0.98rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    border: none !important;
    outline: none !important;
    background: #0f4162 !important;
}

#popupModal.flyshop-modal #phone-section .flyshop-sketch-phone__err.flyshop-modal__err {
    margin-top: 0.55rem;
    font-size: 0.78rem;
    text-align: center;
    border: 0;
    background: transparent;
    padding: 0;
}

#popupModal.flyshop-modal .flyshop-modal__masthead {
    text-align: center;
    margin-bottom: 1.15rem;
}

#popupModal.flyshop-modal .flyshop-modal__h2 {
    margin: 0 0 0.35rem;
    font-size: clamp(1.25rem, 3.8vw, 1.45rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--fm-title);
    line-height: 1.2;
}

#popupModal.flyshop-modal .flyshop-modal__lead {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--fm-muted);
}

#popupModal.flyshop-modal .flyshop-modal__lbl {
    display: block;
    margin: 0 0 0.35rem 0.05rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #374151;
    text-align: center;
}

#popupModal.flyshop-modal .flyshop-modal__lbl--mt {
    margin-top: 0.95rem;
}

#popupModal.flyshop-modal .flyshop-modal__field {
    border-radius: 14px;
    background: var(--fm-field-bg);
    border: 1px solid var(--fm-field-edge);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

#popupModal.flyshop-modal .flyshop-modal__field:focus-within {
    border-color: var(--fm-accent);
    background: #fff;
    box-shadow: 0 0 0 3px var(--fm-accent-dim);
}

#popupModal.flyshop-modal .flyshop-modal__field--tel .iti {
    width: 100% !important;
}

#popupModal.flyshop-modal .flyshop-modal__field--tel .iti__selected-flag {
    padding-left: 12px;
    border-radius: 14px 0 0 14px;
}

/* Plain text/email inputs — normal padding (do NOT reserve space for country flag) */
#popupModal.flyshop-modal .flyshop-modal__field .flyshop-modal__control.form-control {
    border: none !important;
    border-radius: 14px !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0.75rem 0.95rem !important;
    font-size: 0.94rem !important;
}

/* intl-tel: flag column — extra left padding only on the actual tel input */
#popupModal.flyshop-modal .flyshop-modal__field--tel input.iti__tel-input,
#popupModal.flyshop-modal .flyshop-modal__field--tel .iti input[type="tel"] {
    padding-left: 88px !important;
    box-shadow: none !important;
}

#popupModal.flyshop-modal .flyshop-modal__inline-hint {
    margin: 0.75rem 0 0;
    text-align: center;
    font-size: 0.82rem;
    color: var(--fm-muted);
}

#popupModal.flyshop-modal .flyshop-modal__a {
    color: var(--fm-accent);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--fm-accent) 35%, transparent);
}

#popupModal.flyshop-modal .flyshop-modal__a:hover {
    filter: brightness(0.92);
}

#popupModal.flyshop-modal .flyshop-modal__a--inline {
    margin-left: 0.2rem;
    border-bottom: none;
}

#popupModal.flyshop-modal .flyshop-modal__otp.optflxbox {
    display: flex;
    justify-content: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    margin-top: 0.15rem;
}

#popupModal.flyshop-modal .flyshop-modal__otp .otp {
    width: 3.1rem;
    height: 3.25rem;
    margin: 0;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 700;
    border-radius: 14px;
    border: 1px solid var(--fm-field-edge);
    background: var(--fm-field-bg);
    color: #111827;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

#popupModal.flyshop-modal .flyshop-modal__otp .otp:focus {
    outline: none;
    border-color: var(--fm-accent);
    background: #fff;
    box-shadow: 0 0 0 3px var(--fm-accent-dim);
}

#popupModal.flyshop-modal .flyshop-modal__grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem 0.85rem;
    align-items: start;
}

@media (max-width: 380px) {
    #popupModal.flyshop-modal .flyshop-modal__grid2 {
        grid-template-columns: 1fr;
    }
}

#popupModal.flyshop-modal .flyshop-modal__select.form-select {
    width: 100%;
    border-radius: 14px;
    border: 1px solid var(--fm-field-edge);
    background: var(--fm-field-bg);
    padding: 0.78rem 1rem;
    font-size: 0.92rem;
    margin-top: 0.25rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

#popupModal.flyshop-modal .flyshop-modal__select.form-select:focus {
    outline: none;
    border-color: var(--fm-accent);
    box-shadow: 0 0 0 3px var(--fm-accent-dim);
    background: #fff;
}

#popupModal.flyshop-modal .flyshop-modal__cta-wrap.popupbtn {
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    width: 100%;
    margin-top: 1.25rem;
}

#popupModal.flyshop-modal .flyshop-modal__cta-wrap.popupbtn button {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0.88rem 1rem !important;
    border: none !important;
    border-radius: 16px !important;
    font-size: 0.98rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    background: var(--fm-accent) !important;
    color: #fff !important;
    animation: none !important;
    transition: transform 0.15s ease, filter 0.15s ease, opacity 0.2s ease;
}


#popupModal.flyshop-modal .flyshop-modal__cta-wrap.popupbtn button:disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    filter: grayscale(0.15);
}

#popupModal.flyshop-modal .flyshop-modal__err,
#popupModal.flyshop-modal #email-error-msg.flyshop-modal__err {
    display: block;
    margin-top: 0.45rem;
    font-size: 0.8rem;
    color: #dc2626 !important;
    text-align: center;
}

#popupModal.flyshop-modal #errMsg:not(:empty) {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: #dc2626;
    text-align: center;
}

#popupModal.flyshop-modal #errMsg:empty {
    display: none !important;
}

#popupModal.flyshop-modal .getopt {
    margin-top: 1rem;
    font-size: 0.8rem;
    color: var(--fm-muted);
    text-align: center;
}

#popupModal.flyshop-modal .resendotp a {
    color: var(--fm-accent);
    font-weight: 600;
}

#popupModal.flyshop-modal #closeBtn.flyshop-modal__close.flyshop-modal__close--hero {
    top: -35px;
    right: -35px;
    color: #ffffff;
    background: transparent;
    border: none;
    z-index: 9999;
    background: #000000;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    text-align: center;
    font-size: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

#popupModal.flyshop-modal #closeBtn.flyshop-modal__close.flyshop-modal__close--hero:hover {
    background: rgba(15, 23, 42, 0.55);
    color: #fff;
}

@media (max-width: 575.98px) {
    #popupModal.flyshop-modal .flyshop-modal__dialog.popup-content {
        border-radius: 18px;
        max-width: 320px !important;
    }

    .title{
        font-size:30px;
    }
    .home-bg-back img{width:100%;}
    .help-hero-wave-img{top:4%;}
    .badge {font-size:11px;}
    .subtitle{font-size:14px;}

    .hero-ctas__play-ring{    width: 36px;
        height: 36px;}

        .flxhomicon{
            display: flex;
            flex-wrap: wrap;
        }
        .pill{
            font-size: 12px;
        }
        .hero-card.hero-svc{width:100%;margin-bottom:10px;}

        .hero-svc-card__desc{
            font-size:13px;
        }
        .hero-svc-card{
            height: 95px;
        }
        .newbegimgcontent{border-radius:10px;}
        .right-plane-box img{
            width:140px;
        }

        .why-with-media__cta .btn.why-with-cta{
            font-size: 11px;
        }
        .why-with-cta__txt{
            padding: 8px 8px;
        }
        .top-quote{
            right: 0px;
        }
        .bottom-quote{
            left: 0px;
        }
        .section-schedule-cards .getstarted-hero-title__scribble{
            max-height: 6rem;
        }
        .titleheading .subtitle{
            font-size: 14px;
        }
        .titleheading .desc{
            font-size: 14px;
        }

        .section-schedule-cards .cards_right_demo--schedule{
            grid-template-columns: 1fr;
            margin-top:20px;
        }
        .blogbox{
            height: 340px;
        }
        #popupModal.flyshop-modal #closeBtn.flyshop-modal__close.flyshop-modal__close--hero{
            right:0px;
        }
        .float-bob-x{
            left: 53%;
            top: 31%;
        }
        .mainformpagebox .request-callback-form .cta{
            font-size: 13px;

        }
        

}

/* B2C content strips — shared palette + bg (same theme as hero → first strip) */
.b2c-content-strip {
    position: relative;
    --b2c-navy: #102a43;
    --b2c-navy-deep: #0b1f33;
    --b2c-teal-soft: #3d9d91;
    --b2c-teal-muted: #5cb3a8;
    --b2c-body: #3a4f62;
    background: #f7fafc;
    box-shadow: inset 0 1px 0 rgba(16, 42, 67, 0.06);
}

.b2c-content-strip--muted {
    background: #eef4f7;
}

/* Unified copy styling for all B2C strips (headings + body like first section) */
.b2c-content-strip .leftthemedetails h4:not(.b2c-lead-title):not(.b2c-lead-features-heading):not(.b2c-lead-benefits-heading) {
    background: none !important;
    background-clip: unset !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--b2c-navy) !important;
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-weight: 700;
    font-size: clamp(1.05rem, 1.85vw, 1.28rem) !important;
    letter-spacing: -0.02em;
    line-height: 1.32 !important;
    margin-bottom: 0.75rem !important;
}

.b2c-content-strip .leftthemedetails > p,
.b2c-content-strip .leftthemedetails .leftkeypoints > p,
.b2c-content-strip .leftthemedetails .b2c-lead-stack__copy .leftkeypoints > p {
    font-size: 0.9375rem !important;
    line-height: 1.78 !important;
    color: var(--b2c-body) !important;
}

.b2c-content-strip:not(.b2c-content-strip--lead) .leftthemedetails ul:not(.b2c-feature-columns):not(.b2c-lead-feature-grid) > li {
    font-style: normal !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
    color: var(--b2c-body);
}

.b2c-content-strip:not(.b2c-content-strip--lead) .leftthemedetails ul:not(.b2c-feature-columns):not(.b2c-lead-feature-grid) > li::before {
    float: none !important;
    display: inline-block;
    width: auto !important;
    height: auto !important;
    margin: 0 0.35rem 0 0 !important;
    content: "\203A" !important;
    color: var(--b2c-teal-soft) !important;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
    vertical-align: baseline;
}

/* Lead: headline + body + lists left, laptop right from the top (no empty top-right) */
.b2c-lead-stack.mythemeflxbox {
    align-items: flex-start;
    gap: clamp(1.35rem, 3.5vw, 2.75rem);
}

.b2c-lead-stack__copy {
    flex: 1 1 0;
    min-width: 0;
}

.b2c-content-strip .b2c-lead-stack .b2c-lead-stack__copy .leftkeypoints,
.b2c-content-strip .b2c-lead-stack .leftkeypoints {
    width: 100% !important;
}

.b2c-content-strip .b2c-lead-stack .b2c-lead-stack__visual {
    width: 50% !important;
    flex-shrink: 0;
}

@media (min-width: 992px) {
    .b2c-content-strip .b2c-lead-stack .b2c-lead-stack__visual {
        position: sticky;
        top: 88px;
        align-self: flex-start;
    }
}

.b2c-content-strip--lead .b2c-content-strip__note {
    font-size: 0.875rem;
    color: var(--b2c-teal-soft);
    margin-bottom: 0.5rem;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.b2c-lead-title {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--b2c-navy) !important;
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-weight: 700;
    font-size: clamp(1.55rem, 2.85vw, 2.125rem);
    line-height: 1.22;
    letter-spacing: -0.02em;
    margin-bottom: 1rem !important;
    max-width: 42rem;
}

.b2c-content-strip--lead .b2c-lead-stack .b2c-lead-title {
    max-width: none;
}

.b2c-content-strip--lead .b2c-lead-body {
    margin-bottom: 1.5rem;
}

.b2c-content-strip--lead .b2c-lead-body p {
    max-width: 100%;
    font-size: 0.9375rem !important;
    line-height: 1.78 !important;
    color: var(--b2c-body);
    margin-bottom: 1rem !important;
}

.b2c-content-strip--lead .b2c-lead-body p:last-child {
    margin-bottom: 0 !important;
}

.b2c-content-strip__note {
    font-size: 0.95rem;
    color: #4a6662;
    margin-bottom: 0.35rem;
    font-style: italic;
    letter-spacing: 0.01em;
}

.b2c-content-strip__cta-row {
    margin-bottom: 1.25rem;
}

.b2c-content-strip--lead .b2c-content-strip__cta-row .getstartedbtn {
    margin-bottom: 0 !important;
}

.b2c-content-strip__pull {
    font-size: 1.05rem;
    line-height: 1.5;
    color: #243330;
    margin-bottom: 1rem;
    font-weight: 600;
}

.b2c-content-strip--lead .b2c-content-strip__pull {
    font-size: 1.06rem;
    line-height: 1.65;
    color: var(--b2c-navy);
    font-weight: 600;
    padding-left: 0.85rem;
    border-left: 3px solid var(--b2c-teal-soft);
    margin-bottom: 1.15rem;
}

.b2c-content-strip__split {
    align-items: flex-start;
    gap: 2rem;
    margin-top: 0.5rem;
}

/* Lead — features/benefits: editorial list + one stamped card (avoid generic card grids) */
.b2c-content-strip--lead .b2c-lead-stack__features {
    margin-top: 1.35rem;
    padding-top: 1.35rem;
    border-top: 1px solid rgba(16, 42, 67, 0.09);
    font-family: "Poppins", system-ui, sans-serif;
}

.b2c-content-strip--lead .b2c-lead-features-heading,
.b2c-content-strip--lead .b2c-lead-benefits-heading {
    background: none !important;
    background-clip: unset !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: currentColor !important;
    font-family: "Poppins", system-ui, sans-serif;
    color: var(--b2c-navy) !important;
}

.b2c-content-strip--lead .b2c-lead-features-heading {
    font-size: 1.15rem !important;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.3 !important;
    margin-bottom: 0.85rem !important;
    padding-left: 0.85rem;
    border-left: 4px solid var(--b2c-teal-soft);
    max-width: 100%;
}

.b2c-content-strip--lead .b2c-lead-stack__features .b2c-lead-feature-grid {
    row-gap: 0.35rem;
    column-gap: 1.5rem;
    padding-left: 15px;
}

.b2c-content-strip--lead .b2c-lead-stack__features .b2c-lead-feature-grid > li {
    font-style: normal !important;
    font-size: 16px !important;
    font-weight: 500;
    line-height: 1.5 !important;
    margin-bottom: 0 !important;
    padding: 0.38rem 0 !important;
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--b2c-body);
}

.b2c-content-strip--lead .b2c-lead-stack__features .b2c-lead-feature-grid > li::before {
    float: none !important;
    flex-shrink: 0;
    margin: 0 !important;
    content: "\203A" !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--b2c-teal-soft);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
    opacity: 0.9;
}

.b2c-benefits-wrap {
    margin-top: 1.6rem;
    max-width: min(32rem, 100%);
    padding: 1rem 1.1rem 1.05rem 1.15rem;
    background: #fff;
    border: 1px solid rgba(16, 42, 67, 0.11);
    border-radius: 12px;
    box-shadow: 5px 6px 0 rgba(16, 42, 67, 0.07);
}

.b2c-content-strip--lead .b2c-benefits-wrap .b2c-lead-benefits-heading {
    font-size: 0.7rem !important;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0 0 0.65rem !important;
    color: var(--b2c-teal-soft) !important;
    opacity: 0.95;
}

.b2c-content-strip--lead .b2c-benefit-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: b2c-benefit;
}

.b2c-content-strip--lead .b2c-benefit-list > li {
    font-style: normal !important;
    font-size: 0.88rem !important;
    font-weight: 500;
    line-height: 1.55 !important;
    margin-bottom: 0 !important;
    padding: 0.55rem 0 0.55rem 2.35rem !important;
    position: relative;
    color: var(--b2c-navy);
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    border-bottom: 1px dashed rgba(16, 42, 67, 0.14);
}

.b2c-content-strip--lead .b2c-benefit-list > li:last-child {
    border-bottom: none;
    padding-bottom: 0 !important;
}

.b2c-content-strip--lead .b2c-benefit-list > li::before {
    display: block !important;
    content: counter(b2c-benefit, decimal-leading-zero) !important;
    counter-increment: b2c-benefit;
    position: absolute;
    left: 0;
    top: 0.58rem;
    width: 1.65rem;
    font-family: "Poppins", system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    color: #fff;
    background: var(--b2c-navy);
    text-align: center;
    line-height: 1.45rem;
    border-radius: 4px;
}

/* Lead strip — navy primary + soft teal accent */
.b2c-content-strip--lead button.getstartedbtn.b2c-cta-main {
    border: 1px solid var(--b2c-teal-soft);
    background: var(--b2c-navy);
    color: #f0f7f6 !important;
    padding: 10px 24px;
    font-family: "Poppins", system-ui, sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.02em;
    text-transform: none;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(16, 42, 67, 0.2);
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.b2c-content-strip--lead button.getstartedbtn.b2c-cta-main .text {
    color: inherit;
}

.b2c-content-strip--lead button.getstartedbtn.b2c-cta-main:hover {
    background: #163656;
    border-color: var(--b2c-teal-muted);
    filter: none;
    transform: none;
    box-shadow: 0 4px 14px rgba(16, 42, 67, 0.22);
}

.b2c-content-strip--lead button.getstartedbtn.b2c-cta-main:active {
    background: var(--b2c-navy-deep);
    transform: none;
    box-shadow: 0 1px 4px rgba(16, 42, 67, 0.18);
}

.b2c-content-strip--lead button.getstartedbtn.b2c-cta-main:focus-visible {
    outline: 2px solid var(--b2c-teal-soft);
    outline-offset: 2px;
}

.b2c-feature-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.25rem;
    row-gap: 0.25rem;
}

.b2c-feature-columns li {
    font-style: normal !important;
}

@media (max-width: 991.98px) {
    .b2c-feature-columns {
        grid-template-columns: 1fr;
    }

    .b2c-content-strip__split {
        gap: 1.5rem;
    }

    .b2c-content-strip .b2c-lead-stack .b2c-lead-stack__visual {
        position: static;
        width: 100% !important;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }

    .leftthemedetails h4.b2c-lead-title {
        font-size: clamp(1.35rem, 3.4vw, 1.75rem) !important;
        line-height: 1.24 !important;
    }

    .b2c-content-strip--lead .b2c-lead-stack__features .b2c-lead-feature-grid > li {
        font-size: 0.84rem !important;
    }

    .b2c-content-strip--lead .b2c-benefit-list > li {
        font-size: 0.875rem !important;
    }
}

@media (max-width: 767.98px) {
    .b2c-content-strip__pull {
        font-size: 1rem;
    }

    .b2c-content-strip--lead button.getstartedbtn.b2c-cta-main {
        width: 100%;
        max-width: 320px;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .b2c-content-strip--lead button.getstartedbtn.b2c-cta-main {
        transition: none;
    }
}

@media (max-width: 575.98px) {
    .b2c-content-strip--lead button.getstartedbtn.b2c-cta-main {
        font-size: 13px !important;
        padding: 10px 20px !important;
    }

    .topheaderflx.offcanvas .bookdemotop {
        display: none;
    }

    .leftthemedetails h4.b2c-lead-title {
        font-size: 1.32rem !important;
        line-height: 1.28 !important;
    }

    .b2c-content-strip--lead .b2c-lead-body p {
        font-size: 0.9rem !important;
        line-height: 1.76 !important;
    }
}

/* ============================================================
   Mobile menu: full-screen overlay (overrides drawer styles)
   ============================================================ */
@media (max-width: 991.98px) {
    /* Make offcanvas cover full viewport */
    #offcanvasMenu.offcanvas,
    .topheaderflx.offcanvas {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        background: #ffffff !important;
        color: #111827 !important;
        padding: 72px 28px 32px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 18px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        transform: translateX(100%) !important;
        transition: transform 0.32s ease !important;
        z-index: 10000 !important;
        visibility: visible !important;
    }

    #offcanvasMenu.offcanvas.active,
    .topheaderflx.offcanvas.active {
        transform: translateX(0) !important;
    }

    /* Hide the dim overlay since the menu fills the screen */
    .offcanvas-overlay,
    .offcanvas-overlay.active {
        display: none !important;
    }

    /* Close button: top-right, dark, no extra chrome */
    #offcanvasMenu .close-btn,
    .topheaderflx.offcanvas .close-btn {
        position: absolute !important;
        top: 18px !important;
        right: 22px !important;
        margin: 0 !important;
        width: 36px !important;
        height: 36px !important;
        line-height: 36px !important;
        font-size: 30px !important;
        text-align: center !important;
        color: #111827 !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer;
        z-index: 2;
    }

    /* Nav links: stacked, larger typography */
    #offcanvasMenu .navbar-nav,
    .topheaderflx.offcanvas .navbar-nav {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        flex-direction: column !important;
        gap: 4px;
    }

    #offcanvasMenu .navbar-nav .nav-item,
    .topheaderflx.offcanvas .navbar-nav .nav-item {
        width: 100%;
    }

    #offcanvasMenu .navbar-nav .nav-link,
    .topheaderflx.offcanvas .navbar-nav .nav-link {
        position: relative;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 14px 4px !important;
        margin: 0 !important;
        font-size: 17px !important;
        font-weight: 500 !important;
        color: #111827 !important;
        background: transparent !important;
        border: none !important;
        border-bottom: 1px solid #ececec !important;
        border-radius: 0 !important;
        text-align: left !important;
    }

    #offcanvasMenu .navbar-nav .nav-link::after,
    .topheaderflx.offcanvas .navbar-nav .nav-link::after {
        content: "\203A";
        font-size: 22px;
        line-height: 1;
        color: #9ca3af;
        margin-left: 12px;
        transition: transform 0.18s ease, color 0.18s ease;
    }

    #offcanvasMenu .navbar-nav .nav-link:hover,
    #offcanvasMenu .navbar-nav .nav-link.active,
    .topheaderflx.offcanvas .navbar-nav .nav-link:hover,
    .topheaderflx.offcanvas .navbar-nav .nav-link.active {
        color: #1f8b7e !important;
        border-color: #1f8b7e !important;
    }

    #offcanvasMenu .navbar-nav .nav-link:hover::after,
    #offcanvasMenu .navbar-nav .nav-link.active::after,
    .topheaderflx.offcanvas .navbar-nav .nav-link:hover::after,
    .topheaderflx.offcanvas .navbar-nav .nav-link.active::after {
        color: #1f8b7e;
        transform: translateX(3px);
    }

    /* CTA / login form area below the menu list */
    #offcanvasMenu .mobflx_style,
    .topheaderflx.offcanvas .mobflx_style {
        margin-top: 18px !important;
        width: 100% !important;
    }

    #offcanvasMenu .toploginbtns,
    .topheaderflx.offcanvas .toploginbtns {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px;
        padding: 0 !important;
        width: 100% !important;
    }

    #offcanvasMenu .toploginbtn,
    #offcanvasMenu .topagentlogin,
    #offcanvasMenu .bookdemotop,
    .topheaderflx.offcanvas .toploginbtn,
    .topheaderflx.offcanvas .topagentlogin,
    .topheaderflx.offcanvas .bookdemotop {
        width: 100% !important;
        justify-content: center;
        text-align: center;
        padding: 12px 18px !important;
        font-size: 14px !important;
        border-radius: 10px;
    }

    /* Lock background scroll while menu is open */
    body:has(#offcanvasMenu.active) {
        overflow: hidden;
    }
}

@media (max-width: 575.98px) {
    #offcanvasMenu.offcanvas,
    .topheaderflx.offcanvas {
        padding: 64px 22px 28px !important;
    }

    #offcanvasMenu .navbar-nav .nav-link,
    .topheaderflx.offcanvas .navbar-nav .nav-link {
        font-size: 16px !important;
        padding: 13px 2px !important;
    }
}