html {
    background-color: var(--color-bg);

}

@font-face {
    font-family: 'Urbanist';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/urbanist/v15/L0x4DF02iFML4hGCyMqgXSFsjlC0V7q7Ag.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Urbanist';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/urbanist/v15/L0x4DF02iFML4hGCyMqgXS9sjlC0V7o.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Urbanist';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/urbanist/v15/L0x-DF02iFML4hGCyMqrbS1miXK2Z7s.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Urbanist';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/urbanist/v15/L0x-DF02iFML4hGCyMqlbS1miXK2.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



.nav-shadow {
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1);
}

.b-root {
    display: flex;
    flex-direction: column;
}

/* COMMON SECTION STARTS */

.b-container-general-btn {
    margin: 0px;
    padding: 0px;
    display: flex;
    color: var(--color-white);
    font-size: var(--font-medium);
    text-align: center;
    border-radius: var(--roundness-full);
    padding: var(--dim-16px);

    cursor: pointer;
    outline: 0px;
    border: none;
    width: fit-content;
    height: fit-content;
    background-color: transparent;
    border: 1px solid var(--color-black-stroke);
    align-items: center;
    text-decoration: none;

    transform: scale(1);
}



.b-container-general-btn>img {
    display: flex;
    width: 20px;
    object-fit: contain;
    height: 20px;
    margin-right: var(--dim-8px);
    filter: invert(1);
}



@media (hover: hover) and (pointer: fine) {

    .b-container-general-btn:hover {
        color: var(--color-black) !important;
        background-color: var(--color-white) !important;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px !important;

        transform: scale(1.1);
    }

    .b-container-general-btn:hover img {
        filter: invert(0);
    }


}

.b-container-general-btn-active {
    border: 0px solid black;
    background-color: var(--color-brand);
    pointer-events: none;
    border: 1px solid var(--color-brand);
}


/* COMMON SECTION ENDS */
/* ************************************************************** */
/* ************************************************************** */
/* ************************************************************** */
/* NAVBAR SECTION STARTS */

.navbar-container {
    margin: 0px;
    padding: 0px;
    display: flex;
    height: fit-content;
    position: relative;
    width: 100%;
    display: flex;
    margin: auto;
    max-width: var(--global-max-width);
    background-color: var(--color-black);

}

.navbar-container-inner {
    margin: 0px;
    padding: 0px;
    display: flex;
    height: 80px;
    position: relative;
    width: var(--global-width);
    display: flex;
    margin: 0 auto;
    max-width: var(--global-max-width);
    align-items: center;

}


.card-navbar-logo-container {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    flex-shrink: 0;
    width: fit-content;

}

.card-navbar-logo-container>p {
    margin: 0px;
    padding: 0px;
    color: var(--color-white);
    font-size: var(--font-large);
    font-weight: 900;
    text-transform: uppercase;
    -webkit-text-stroke: 0.5px var(--color-white);
    width: fit-content;
}

.card-navbar-poweredby {
    display: flex;
    align-items: center;
    width: 200px;
}

.card-navbar-poweredby>p {
    margin: 0px;
    padding: 0px;
    color: var(--color-white);
    font-size: var(--font-small);
    display: flex;
    flex-shrink: none;
}

.card-navbar-poweredby>img {
    height: 18px;
    margin-left: var(--dim-4px);
    cursor: pointer;
    object-fit: contain;
}

.navbar-item-container {
    margin: 0px;
    padding: 0px;
    display: flex;
    align-items: center;
    height: 100%;
    background-color: var(--color-white);

    height: 40px;
    border-radius: var(--roundness-full);
    padding: 0px var(--dim-8px);
    margin-left: auto;
}


.navbar-item {
    list-style: none;
    margin: 0px;
    padding: 0px;
    font-size: var(--font-small);
    cursor: pointer;
    color: var(--color-black);


}


@media (hover: hover) and (pointer: fine) {


    .navbar-item:hover {
        transition: 0.5s all ease;
        background-color: var(--color-hover);
        border-radius: var(--roundness-full);
    }


}

.navbar-item>a {
    font-size: var(--font-small);
}

.navbar-link {
    display: flex;
    justify-content: center;
    width: 100% !important;
    height: 100% !important;
    align-items: center;
    margin: 0px;
    padding: 0px;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--roundness-full);
    padding: var(--dim-8px) var(--dim-12px);
    text-decoration: none;
    font-size: var(--font-medium);
    color: var(--color-black);

}

.active-navbar-item {
    background-color: var(--color-brand);
    border: 0px solid var(--color-stroke) !important;
}

.active-navbar-item>a {
    color: white;
}

/* NAVBAR SECTION ENDS */
/* ************************************************************** */
/* ************************************************************** */
/* ************************************************************** */
/* HEADER SECTION STARTS */

.b-header {

    margin: 0px;
    padding: 0px;
    display: flex;
    height: fit-content;
    width: 100%;
    display: flex;
    margin: auto;
    max-width: var(--global-max-width);
    background-color: var(--color-black-stroke);

}

.b-header-inner {

    margin: 0px;
    padding: 0px;
    display: flex;
    height: fit-content;
    position: relative;
    width: var(--global-width);
    display: flex;
    margin: 0 auto;
    max-width: var(--global-max-width);
    flex-direction: column;
    padding: var(--dim-separator-gap) 0px;
}


.b-header h1 {
    color: var(--color-white);
    font-size: var(--font-large-extra);
    margin-bottom: var(--dim-8px);
    width: fit-content;
}

.b-header-br {
    display: none;
}

.b-header p {
    color: var(--color-bg) !important;
    font-size: var(--font-medium);
    width: 60%;
}


.b-header a {

    margin-top: var(--dim-32px);
    color: var(--color-black) !important;
    background-color: var(--color-white) !important;
}

.b-header a img {
    filter: invert(0) !important;
}




.container {
    height: 170px;
    display: flex;
    position: absolute;
    right: 0%;

}

.cover {
    display: inline-block;
    width: 339px;
    height: 198px;
    border-radius: var(--roundness);
}

.b-header-showpiece-showpiece {

    border-radius: var(--roundness);
    transform-style: preserve-3d;
    -webkit-tap-highlight-color: rgba(#000, 0);
}

.b-header-showpiece-showpiece img {
    border-radius: var(--roundness);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.b-header-showpiece-showpiece-container {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: var(--roundness);
    transition: all 0.2s ease-out;
}

.b-header-showpiece-showpiece-container.over .b-header-showpiece-showpiece-shadow {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.b-header-showpiece-showpiece-layers {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: var(--roundness);
    overflow: hidden;
    transform-style: preserve-3d;
}

.b-header-showpiece-showpiece-rendered-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    background-size: cover;
    transition: all 0.1s ease-out;
    overflow: hidden;
    border-radius: var(--roundness);
}

.b-header-showpiece-showpiece-shadow {
    position: absolute;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
    transition: all 0.2s ease-out;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.b-header-showpiece-showpiece-shine {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--roundness);
    background: linear-gradient(135deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 60%);
}

/* HEADER SECTION ENDS */
/* ************************************************************** */
/* ************************************************************** */
/* ************************************************************** */
/* HERO SECTION STARTS */



.b-hero {
    margin: 0px;
    padding: 0px;
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    right: 0;
    left: 0;
    max-width: var(--global-max-width);
    height: fit-content;
    background-color: var(--color-white);

}

.b-hero-inner {
    margin: 0px;
    padding: 0px;
    width: var(--global-width);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--dim-16px);
    margin: 0 auto;
    height: fit-content;
    padding: var(--dim-separator-gap) 0px;
    align-items: center;
    min-height: 500px;
}

.b-hero-inner-left {
    display: flex;
    flex-direction: column;

}

.b-hero-inner-left h2 {
    display: flex;
    color: var(--color-black);
    font-size: var(--font-large-extra);
    margin-bottom: var(--dim-8px);

}

.b-hero-inner-left>p {
    display: flex;
    color: var(--color-gray);
    font-size: var(--font-medium);
    margin-bottom: var(--dim-32px);

}

.b-hero-features {
    list-style: none;
    margin-bottom: var(--dim-32px);
}

.b-hero-features li {
    display: flex;
    align-items: center;
    margin-bottom: var(--dim-8px);
}

.b-hero-features li:last-child {
    margin-bottom: 0px;
}

.b-hero-features li:before {
    content: "✓";
    color: var(--color-green);
    font-weight: bold;
    margin-right: var(--dim-8px);
}

.b-hero-stats {
    display: flex;
    flex-direction: column;
}

.b-hero-stats p {
    font-size: var(--font-medium);
    margin-bottom: var(--dim-8px);
}

.b-hero-stats p:last-child {
    margin-bottom: 0px;
}

.b-order-now-btn {
    margin-top: var(--dim-32px);
    color: var(--color-black) !important;
}

.b-hero-inner-right {

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--dim-16px);
}

.b-hero-inner-right div {
    width: 100%;
    display: flex;
    border-radius: var(--roundness);
    border: 1px solid var(--color-stroke);
    padding: var(--dim-4px);
    box-sizing: border-box;
}

.b-hero-inner-right div img {
    width: 100%;
    height: auto;
    display: flex;
    border-radius: var(--roundness);

}

/* HERO SECTION ENDS */
/* ************************************************************** */
/* ************************************************************** */
/* ************************************************************** */
/* CLIENTS SECTION STARTS */

.b-showcase-container {
    margin: 0px;
    padding: 0px;
    width: 100%;
    display: flex;
    right: 0;
    left: 0;
    max-width: var(--global-max-width);
    height: fit-content;
    margin: 0 auto;
    background-color: var(--color-black);
}

.b-showcase-container-inner {
    margin: 0px;
    padding: 0px;
    width: var(--global-width);
    display: flex;
    height: fit-content;
    padding: var(--dim-separator-gap) 0px;
    margin: 0 auto;
    flex-direction: column;
}

.b-showcase-title {
    text-align: center;
    color: var(--color-white);
    font-size: var(--font-large-extra);
    width: 100%;
    margin-bottom: var(--dim-64px);

}

.b-showcase-swiper {
    width: 100%;
}

.b-showcase-swiper .swiper-slide {
    width: 220px;
    display: flex;
    justify-content: center;
    border-radius: var(--roundness);
    padding: var(--dim-4px);
    border: 1px double var(--color-brand);
    box-sizing: border-box;

}

.swiper-wrapper {
    display: flex;
    align-items: center;
}

.b-showcase-swiper img {
    display: flex;
    align-self: center;
    width: 100%;
    height: auto;
    border-radius: var(--roundness);
    object-fit: cover;
}

/* CLIENTS SECTION ENDS */
/* ************************************************************** */
/* ************************************************************** */
/* ************************************************************** */
/* CASE STUDIES SECTION STARTS */

.b-case-studies {
    margin: 0px;
    padding: 0px;
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    right: 0;
    left: 0;
    max-width: var(--global-max-width);
    height: fit-content;
    background-color: var(--color-bg);

}

.b-case-studies-inner {
    margin: 0px;
    padding: 0px;
    width: var(--global-width);
    display: flex;
    margin: 0 auto;
    height: fit-content;
    padding: var(--dim-separator-gap) 0px;
    flex-direction: column;
    align-items: center;
}

.b-case-studies-title {
    text-align: center;
    font-size: var(--font-large-extra);
    color: var(--color-black);
    margin-bottom: var(--dim-64px);
}

.b-cases-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--dim-16px);
}

.b-case-card {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border-radius: var(--roundness);
    padding: var(--dim-32px);
    box-sizing: border-box;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px !important;

    height: 400px;
}

.b-case-card p {

    font-size: var(--font-medium);
    display: flex;
    margin-top: var(--dim-16px);

}

.b-case-icon {
    font-size: 40px;
    margin-bottom: var(--dim-16px);
}

.b-case-title {
    color: var(--color-black) !important;
    font-size: var(--font-large)
}


.b-case-result {
    display: flex;
    background: var(--color-success);
    color: var(--color-black);
    border-radius: var(--roundness-full);
    display: inline-block;
    font-weight: bold;
    margin-top: auto;
}

.b-case-span {
    font-size: var(--font-small) !important;
    color: var(--color-brand) !important;
}


/* CASE STUDIES SECTION ENDS */
/* ************************************************************** */
/* ************************************************************** */
/* ************************************************************** */
/* FEATURES SECTION STARTS */

.b-features {
    margin: 0px;
    padding: 0px;
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    right: 0;
    left: 0;
    max-width: var(--global-max-width);
    height: fit-content;
    background-color: var(--color-black);
}

.b-features-inner {
    margin: 0px;
    padding: 0px;
    width: var(--global-width);
    display: flex;
    margin: 0 auto;
    height: fit-content;
    padding: var(--dim-separator-gap) 0px;
    flex-direction: column;
    align-items: center;
}

.b-features-title {
    text-align: center;
    font-size: var(--font-large-extra);
    color: var(--color-white);
    margin-bottom: var(--dim-64px);

}

.b-features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;

    width: 100%;
    gap: var(--dim-16px);
}

.b-feature-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--roundness);
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    padding: var(--dim-16px);
    box-sizing: border-box;
    border: 1px solid var(--color-black-stroke);
    width: 100%;

}

.b-feature-icon {
    width: 40px;
    height: 40px;
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
}

.b-feature-card h3 {

    font-size: var(--font-large);
    display: flex;
    color: var(--color-white);
    margin-top: var(--dim-16px);
    margin-bottom: var(--dim-4px);

}

.b-feature-card p {

    font-size: var(--font-small);
    display: flex;
    color: var(--color-white);
    text-align: center;

}


/* FEATURES SECTION ENDS */
/* ************************************************************** */
/* ************************************************************** */
/* ************************************************************** */
/* How it Works SECTION STARTS */

.b-hiw {
    margin: 0px;
    padding: 0px;
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    right: 0;
    left: 0;
    max-width: var(--global-max-width);
    height: fit-content;
    background-color: var(--color-white);
}

.b-hiw-inner {
    margin: 0px;
    padding: 0px;
    width: var(--global-width);
    display: flex;
    margin: 0 auto;
    height: fit-content;
    padding: var(--dim-separator-gap) 0px;
    flex-direction: column;
    align-items: center;
}

.b-hiw-title {
    text-align: center;
    font-size: var(--font-large-extra);
    color: var(--color-black);
    margin-bottom: var(--dim-64px);
}

.b-hiw-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--dim-16px);
}

.b-hiw-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--roundness);
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    padding: var(--dim-16px);
    box-sizing: border-box;
    border: 1px solid var(--color-stroke);

}

.b-hiw-icon {
    width: 40px;
    height: 40px;
    color: var(--color-black);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
}

.b-hiw-card h3 {

    font-size: var(--font-large);
    display: flex;
    color: var(--color-black);
    margin-top: var(--dim-16px);
    margin-bottom: var(--dim-4px);

}

.b-hiw-card p {

    font-size: var(--font-medium);
    display: flex;
    color: var(--color-black);
    text-align: center;

}

/* How it Works  SECTION ENDS */
/* ************************************************************** */
/* ************************************************************** */
/* ************************************************************** */
/* CTA SECTION STARTS */


.b-cta {
    margin: 0px;
    padding: 0px;
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    right: 0;
    left: 0;
    max-width: var(--global-max-width);
    height: fit-content;
    background-color: var(--color-bg);
}

.b-cta-inner {
    margin: 0px;
    padding: 0px;
    width: var(--global-width);
    display: flex;
    margin: 0 auto;
    height: fit-content;
    padding: var(--dim-separator-gap) 0px;
    flex-direction: column;
    position: relative;


}



.b-cta h2 {
    display: flex;
    font-size: var(--font-large-extra);
    color: var(--color-black);
    margin-bottom: var(--dim-8px);
}

.b-cta p {
    display: flex;
    font-size: var(--font-medium);
    display: flex;
    color: var(--color-gray);
    width: 40%;
}


.b-cta-order-now-btn {
    color: var(--color-white);
    margin-top: var(--dim-32px);
    background-color: var(--color-black) !important;
    color: var(--color-white) !important;
    border: none !important;
}

.b-cta-order-now-btn img {
    filter: invert(1) !important;

}
.b-cta-order-now-btn:hover img  {
   
    filter: invert(0) !important;
}

.b-cta-call {
    font-size: var(--font-medium);
    display: flex;
    margin-top: var(--dim-16px);
}

.b-cta-call a {
    display: flex;
    margin-left: var(--dim-8px);
    color: var(--color-black);
    text-decoration: none;
}

.b-cta-call a:hover {
    cursor: pointer;
    text-decoration: underline;
}

.b-cta-right {
    position: absolute;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--dim-16px);
    right: 0%;
}

.b-cta-image {

    width: 100%;
    display: flex;
    border-radius: var(--roundness);

}

.b-cta-image img {
    width: 100%;
    height: 140px;
    display: flex;
    border-radius: var(--roundness);

}



/* CTA SECTION ENDS */
/* ************************************************************** */
/* ************************************************************** */
/* ************************************************************** */
/* FAQ SECTION STARTS */

.b-faq {
    margin: 0px;
    padding: 0px;
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    right: 0;
    left: 0;
    max-width: var(--global-max-width);
    height: fit-content;
    background-color: var(--color-white);
}

.b-faq-inner {

    margin: 0px;
    padding: 0px;
    width: var(--global-width);
    display: flex;
    margin: 0 auto;
    height: fit-content;
    padding: var(--dim-separator-gap) 0px;
    flex-direction: column;
}

.b-faq-title {
    display: flex;
    font-size: var(--font-large-extra);
    color: var(--color-black);
    margin-bottom: var(--dim-16px);
}

.b-faq-item {
    border-bottom: 1px solid var(--color-stroke);

    display: flex;
    flex-direction: column;
    padding: var(--dim-8px) 0px;
}

.b-faq-question {
    font-weight: bold;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-small);
}

.b-faq-answer {
    max-height: 0;
    overflow: hidden;
}

.b-faq-answer p {
    font-size: var(--font-small);
    padding: var(--dim-8px) 0px;

}

.b-faq-answer.open {
    max-height: 500px;
}

/* FAQ SECTION ENDS */
/* ************************************************************** */
/* ************************************************************** */
/* BLOGS SECTION STARTS */

.blogs-container {
    margin: 0px;
    padding: 0px;
    width: 100%;
    display: flex;
    right: 0;
    left: 0;
    max-width: var(--global-max-width);
    height: fit-content;
    margin: 0 auto;
    background-color: transparent
}

.blogs-container-inner {
    margin: 0px;
    padding: 0px;
    width: var(--global-width);
    display: flex;
    height: fit-content;
    padding: var(--dim-separator-gap) 0px;
    margin: 0 auto;
    flex-direction: column;
}

.blogs-title {
    color: var(--color-black);
    font-size: var(--font-large-extra);
    color: var(--color-black);
    margin-bottom: var(--dim-32px);
}

.blogs-other-section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--dim-16px);
}

.blogs-other-section>div {
    background: var(--color-white);
    border-radius: 18px;
    overflow: hidden;
    transition: .3s;
    cursor: pointer;
    border: 1px solid var(--color-stroke);

}

.blogs-other-section>div:hover {
    transform: translateY(-8px);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;

}

.blogs-other-section>div>img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: .45s;
}

.blogs-other-section>div:hover img {
    transform: scale(1.08);
}

.blogs-other-section>div>a {
    display: block;
    padding: var(--dim-16px);
    color: var(--color-black);
    font-size: var(--font-medium);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blogs-other-section>div>a:hover {
    color: var(--color-link);
}

@media only screen and (max-width: 950px) {

    .blogs-other-section {
        grid-template-columns: 1fr 1fr;
    }

    .blogs-container-inner {
        width: var(--global-width);
    }

    .blog-content {
        width: 100%;
    }
}

@media only screen and (max-width: 650px) {

    .blogs-other-section {
        grid-template-columns: 1fr;
    }
}

@media only screen and (max-width: 450px) {

    .blogs-other-section {
        grid-template-columns: 1fr;
    }
}

/* BLOGS SECTION ENDS */
/* ************************************************************** */
/* ************************************************************** */

/* ************************************************************** */
/* ************************************************************** */
/* FOOTER SECTION STARTS */


.footer-container {
    margin: 0px;
    padding: 0px;
    display: flex;
    height: fit-content;
    position: relative;
    width: 100%;
    display: flex;
    max-width: var(--global-max-width);
    margin: auto;

    background: #1d183b;
    background: linear-gradient(45deg, #1d183b, #0c091c, #1d183b);
    background-size: 300% 300%;
    animation: diagonalFlow 5s ease-in-out infinite;

}

.footer-container-inner {
    margin: 0px;
    padding: 0px;
    width: var(--global-width);
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    height: fit-content;
    padding: var(--dim-32px) 0px;
}

.footer-top {
    display: flex;
    width: 100%;


}

.footer-main {

    display: flex;
    flex-direction: column;
}


.footer-section-title {
    margin: 0px;
    padding: 0px;
    font-size: var(--font-medium);
    color: var(--color-white);
    width: 80%;
}



.footer-logo-container {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--dim-16px);


}

.footer-logo-container>p {
    margin: 0px;
    padding: 0px;
    color: var(--color-white);
    font-size: var(--font-large-extra);
    font-weight: 900;
    text-transform: uppercase;
    -webkit-text-stroke: 1px var(--color-white);
    width: fit-content;


}

.footer-poweredby {
    display: flex;
    align-items: center;
    width: 100%;

}

.footer-poweredby>p {
    margin: 0px;
    padding: 0px;
    color: var(--color-white);
    font-size: var(--font-small);
    display: flex;

}

.footer-poweredby>img {

    height: 18px;
    margin-left: var(--dim-4px);
    margin-right: var(--dim-4px);
    cursor: pointer;
    object-fit: contain;
}


.footer-social-icons {
    display: flex;
    margin-top: auto;
    margin-left: auto;
    justify-self: flex-end;
    align-items: flex-end;

}

.footer-social-icons>a {
    width: 40px;
    height: 40px;
    cursor: pointer;

    margin-left: var(--dim-16px);
}

@media (hover: hover) and (pointer: fine) {


    .footer-social-icons>a:hover {

        transform: scale(var(--scale-down-effect));
    }
}


.footer-social-icons>a>img {
    width: 40px;
    height: 40px;
}


.footer-section-ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    margin-top: var(--dim-16px);
}

.footer-section-li {
    margin: 0px;
    padding: 0px;
    font-size: var(--font-small);
    margin-bottom: var(--dim-2px);
    color: var(--color-white);
}

.footer-section-a {
    color: var(--color-black);
    text-decoration: none;
    cursor: pointer;
    color: var(--color-white);
    font-size: var(--font-small);
}

@media (hover: hover) and (pointer: fine) {
    .footer-section-a:hover {
        color: var(--color-brand);
        text-decoration: underline;
    }



}


.footer-middle {
    display: flex;
    margin-top: var(--dim-64px);
    margin-bottom: var(--dim-64px);
}

.footer-middle-section {
    width: 25%;
    display: flex;
    flex-direction: column;

}

.footer-bottom {
    width: 100%;
    height: fit-content;
    display: flex;
    align-items: center;
}

.footer-rights {
    margin: 0px;
    padding: 0px;
    color: var(--color-white);
    font-size: var(--font-medium);
}

.footer-payment-method {
    margin-left: auto;
}

.footer-company {
    color: var(--color-white);
}


.footer-no-pointer {
    pointer-events: none;
}


@media only screen and (max-width: 1250px) {


    .b-features-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }


    .b-cta-right {
        grid-template-columns: 1fr;
    }

    .b-cta p {
        width: 60%;
    }

    .b-cta-image:nth-child(3),
    .b-cta-image:nth-child(4) {


        display: none;

    }

}

@media only screen and (max-width: 1152px) {

    .b-header-br {
        display: flex;
    }

    .b-header p {
        width: 50%;
    }

    .b-hero-inner {
        display: flex;
        align-items: flex-start;
    }

    .b-hero-inner-left {
        flex: 1;
        width: 70%;

    }

    .b-hero-inner-right {
        width: 200px;
        grid-template-columns: 1fr;
    }

    .b-hero-inner-right div {
        padding: 0px;
    }


    .b-cases-grid {
        grid-template-columns: 1fr 1fr;
    }

}

@media only screen and (max-width: 1100px) {

    .footer-top {
        flex-direction: column;
    }

    .footer-main {
        width: 100%;
    }

    .footer-social-icons {
        width: 100%;

        margin-top: var(--dim-16px);
        margin-left: 0px;
        justify-self: initial;
        align-items: initial;
        flex-wrap: wrap;

    }

    .footer-social-icons>a {
        margin-right: var(--dim-16px);
        margin-left: 0px;
        margin-bottom: var(--dim-16px);
    }

    .footer-middle {
        display: flex;
        margin-top: var(--dim-32px);
        margin-bottom: var(--dim-32px);
    }

    .footer-section-title {
        width: 100%;
    }



}

@media only screen and (max-width: 1060px) {


    .footer-middle-section {
        width: 25% !important;
    }

    .footer-middle {
        flex-wrap: wrap;
    }

    .footer-middle-margin-bottom-16 {
        margin-bottom: var(--dim-16px);
    }

    .footer-middle-margin-left-auto {
        margin-left: auto !important;
    }





}

@media only screen and (max-width: 920px) {


    .b-features-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media only screen and (max-width: 900px) {


    .container {

        display: none;

    }

    .b-header-br {
        display: none;
    }

    .b-header p {
        width: 100%;
    }

    .b-hero-br {
        display: none;
    }

    .b-showcase-title,
    .b-case-studies-title,
    .b-features-title,
    .b-hiw-title {
        text-align: start;
        margin-bottom: var(--dim-16px);
        width: 100%;
    }

    .b-hiw-grid {
        grid-template-columns: 1fr 1fr;
    }

    .b-cta-inner {
        flex-direction: column;


    }

    .b-cta-right {
        display: none;
    }

    .b-cta p {
        width: 100%;
    }
}

@media only screen and (max-width: 650px) {
    .b-hero-inner {


        flex-direction: column;
    }

    .b-hero-inner-left {
        width: 100%;

    }

    .b-hero-inner-right {
        margin-top: var(--dim-16px);
        width: 100%;
        grid-template-columns: 1fr 1fr;
    }

    .b-cases-grid {
        grid-template-columns: 1fr;
    }

    .b-case-card {
        padding: var(--dim-16px);

        box-shadow: none !important;
        height: fit-content;
    }

    .b-case-result {
        margin-top: var(--dim-16px);
    }

}

@media only screen and (max-width: 550px) {


    .b-feature-card {
        justify-content: flex-start;
        align-items: flex-start;

    }

    .b-feature-card p {
        text-align: start;

    }

    .b-features-grid {
        grid-template-columns: 1fr;
    }

    .b-hiw-card {
        justify-content: flex-start;
        align-items: flex-start;

    }

    .b-hiw-card p {
        text-align: start;

    }

    .b-hiw-grid {
        grid-template-columns: 1fr;
    }

    .footer-middle-section {
        width: 49% !important;
    }

    .footer-middle {
        flex-wrap: wrap;
    }

    .footer-middle-margin-bottom-16 {
        margin-bottom: var(--dim-16px);
    }

    .footer-middle-margin-left-auto {
        margin-left: auto !important;
    }

}



/* Add at the very top for direction support */
html[dir="rtl"] {
    direction: rtl;
}

/* COMMON SECTION FIXES */
.b-container-general-btn>img {
    margin-right: var(--dim-8px);
    margin-inline-end: var(--dim-8px);
}

/* NAVBAR SECTION FIXES */
.card-navbar-poweredby>img {
    margin-left: var(--dim-4px);
    margin-inline-start: var(--dim-4px);
}

.navbar-item-container {
    margin-left: auto;
    margin-inline-start: auto;
}

/* HERO SECTION FIXES */
.b-hero-features li:before {
    margin-right: var(--dim-8px);
    margin-inline-end: var(--dim-8px);
}

/* CTA SECTION FIXES */
.b-cta-call a {
    margin-left: var(--dim-8px);
    margin-inline-start: var(--dim-8px);
}

/* FOOTER SECTION FIXES */
.footer-poweredby>img {
    margin-left: var(--dim-4px);
    margin-inline-start: var(--dim-4px);
    margin-right: var(--dim-4px);
    margin-inline-end: var(--dim-4px);
}

.footer-social-icons {
    margin-left: auto;
    margin-inline-start: auto;
}

.footer-social-icons>a {
    margin-left: var(--dim-16px);
    margin-inline-start: var(--dim-16px);
}

.footer-payment-method {
    margin-left: auto;
    margin-inline-start: auto;
}

/* Responsive fixes */
@media only screen and (max-width: 1100px) {
    .footer-social-icons {
        margin-left: 0px;
        margin-inline-start: 0px;
    }

    .footer-social-icons>a {
        margin-right: var(--dim-16px);
        margin-inline-end: var(--dim-16px);
        margin-left: 0px;
        margin-inline-start: 0px;
    }
}

@media only screen and (max-width: 1060px) {
    .footer-middle-margin-left-auto {
        margin-left: auto !important;
        margin-inline-start: auto !important;
    }
}

/* Add RTL-specific fixes */
html[dir="rtl"] .container {
    right: auto;
    left: 0%;
}

html[dir="rtl"] .b-cta-right {
    right: auto;
    left: 0%;
}

/* Fix text alignment for RTL */
html[dir="rtl"] .b-showcase-title,
html[dir="rtl"] .b-case-studies-title,
html[dir="rtl"] .b-features-title,
html[dir="rtl"] .b-hiw-title,
html[dir="rtl"] .b-faq-title {
    text-align: right;
}

/* Fix float/direction for RTL */
html[dir="rtl"] .b-header p,
html[dir="rtl"] .b-cta p {
    text-align: right;
}

/* Fix flex order for RTL if needed */
html[dir="rtl"] .navbar-item-container {
    margin-inline-start: 0;
    margin-inline-end: auto;
    margin-left: initial !important;

}

/* ************************************************************** */
/* ================================================================
   NEW CSS ADDED FOR THIS PAGE (gym-fitness-trainer-nfc-card-saudi-arabia)
   -----------------------------------------------------------------
   No custom rules were needed — every section on this page reuses
   the existing .b-* and .blogs-* classes from the shared page
   framework above. Nothing new added here.
   When you build the Arabic (-ar) version, duplicate this ENTIRE
   file as-is; the html[dir="rtl"] rules already above will handle it.
   ================================================================ */