/*
 Theme Name:  Divi Child Theme
 Description:  Child Theme for Divi
 Author:       DEMA
 Template:     Divi
*/

/*****Add any custom CSS below this line*****/
/* HEADER STYLES */
/* HEADER WRAPPER */
/*
Theme Name: Divi Child Template
Version: 1.0
Description: A customized version of Divi which adds a number of tiny features you need.
Template: Divi
*/

:root {
    --primary-font-color: #000;
    --secondary-font-color: #fff;
    --tertiary-font-color: #D9D9D9;
    --green: #8FEF8D;
    --lime: #c4e57a;
    --light-green: #CFF5E3;
    --blue: #3F4B81;
    --bg-light: #fff;
    --bg-gray: #999;
    --bg-light-gray: #F4F4F4;
    --bg-light-blue: #F9FBFF;
    --bg-dark: #000;
    --brand-gradient: linear-gradient(90deg, #CFFF34 0%, #8FEF8D 45.59%, #3F4B81 104.19%);
    --brand-gradient-organic: linear-gradient(
            120deg,
            #CFFF34,
            #8FEF8D,
            #3F4B81,
            #CFFF34,
            #8FEF8D,
            #3F4B81
    );
    --font-heading: "Exo 2", sans-serif;
    --font-body: "Montserrat", sans-serif;
    --font-size-14: clamp(10px, 1vw, 14px);
    --font-size-16: clamp(12px, 1vw, 16px);
    --font-size-18: clamp(14px, 1.1vw, 18px);
    --font-size-20: clamp(16px, 1.3vw, 20px);
    --font-size-25: clamp(18px, 1.3vw, 25px);
    --font-size-32: clamp(24px, 2vw, 32px);
    --font-size-36: clamp(24px, 2.2vw, 36px);
    --font-size-40: clamp(26px, 2.4vw, 40px);
    --font-size-48: clamp(32px, 3vw, 48px);
    --font-size-60: clamp(40px, 4vw, 60px);
    --font-size-96: clamp(64px, 6vw, 96px);
    --font-size-120: clamp(80px, 8vw, 120px);
}

/*
================
HEADER STYLES
================
*/

#page-container {
    /*padding-top: 0 !important;*/
    margin-top: 0 !important;
}

.dm-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--bg-dark) !important;
    z-index: 999;
    padding: 18px 0;
}

body {
    padding-top: 116px;
}

.dm-header-inner {
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

#main-header.et-fixed-header {
    padding: 10px 0;
}

#main-header .dm-logo img:hover {
    transform: scale(1.05);
}

#main-header.et-fixed-header .dm-logo img {
    height: 60px;
}

#et-top-navigation {
    order: 3;
    padding-top: 0 !important;
}
.et_header_style_left #et-top-navigation .mobile_menu_bar {
    padding-bottom: 0 !important;
}
#main-header.et-fixed-header #et-top-navigation {
    padding-top: 15px;
}

.dm-logo img {
    display: block;
    max-width: 100px;
    height: 60px;
    width: auto;
}

#top-menu-nav {
    display: none;
}

#top-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: clamp(22px, 2vw, 40px);
    align-items: center;
}

#top-menu li {
    padding-right: clamp(8px, 1vw, 22px) !important;
    padding-bottom: 20px;
    padding-top: 20px;
}

#top-menu > li > a {
    color: var(--secondary-font-color) !important;
    text-decoration: none !important;
    font-size: var(--font-size-16);
    letter-spacing: 0.02em;
    font-family: var(--font-heading), serif;
    cursor: pointer;
}

#top-menu li a:hover, #top-menu li.current-menu-item a {
    /*color: var(--light-green) !important;*/
    /*color: var(--primary-font-color);*/
    background-image: var(--brand-gradient);
    background-size: 300% 100%;
    background-position: 0 50%;

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
    animation: shimmerPulse 3s linear infinite;
}

#top-menu li li a {
    width: unset !important;
}

#top-menu > li {
    position: relative;
}

#top-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--bg-dark);
    padding: 12px 0;
    margin: 0;
    list-style: none;
    width: unset !important;
    display: none;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    border-top: unset !important;
}

#top-menu .sub-menu::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;

    background-image: var(--brand-gradient);
    background-repeat: no-repeat;
    background-size: 300% 100%;
    background-position: 0 50%;

    z-index: 2;
    animation: shimmerPulse 4s linear infinite;
}

@keyframes shimmerPulse {
    0% {
        background-position: 0 50%;
        opacity: 0.7;
    }
    50% {
        background-position: 100% 50%;
        opacity: 1;
    }
    100% {
        background-position: 0 50%;
        opacity: 0.7;
    }
}

#top-menu li:hover > .sub-menu {
    display: flex;
    flex-direction: column;

}

/* Sub-menu items */
#top-menu .sub-menu li {
    padding: 0;
}

#top-menu .sub-menu a {
    display: block;
    padding: 6px 20px;
    color: var(--secondary-font-color) !important;
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
}

/*#top-menu .sub-menu a:hover {*/
/*    background: var(--bg-dark);*/
/*}*/

#top-menu > li.menu-item-has-children > a::after {
    font-family: 'ETmodules', serif;
    content: "3";
    position: absolute;
}

#mobile_menu li {
    margin: 5px 0;
}

.et_mobile_menu {
    border-top: none;
    top: 96px;
    max-height: calc(-96px + 100vh);
    overflow: hidden auto;
}

.et_mobile_menu:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-image: var(--brand-gradient);
    background-repeat: no-repeat;
    background-size: 300% 100%;
    background-position: 0 50%;
    z-index: 2;
    animation: shimmerPulse 4s linear infinite;
}

.et_mobile_menu .menu-item-has-children > a {
    background-color: unset;
}

.et_mobile_menu li a:hover, .nav ul li a:hover {
    opacity: 1;
    background-color: var(--bg-dark);
    color: var(--lime);
}

.et_mobile_menu li a {
    border-radius: 20px;
}

.current_page_item a {
    opacity: 1;
    background-color: var(--bg-dark);
    color: var(--lime) !important;
}

.dm-header-cta {
    display: none;
    order: 2;
    margin-left: auto;
}

.mobile_menu_bar:before {
    font-size: 50px;
    color: var(--bg-light);
}
.et_header_style_left #et-top-navigation nav>ul>li>a {
     padding-bottom: 0 !important;
}
.et_header_style_left .et-fixed-header #et-top-navigation nav>ul>li>a {
    padding-bottom: 20px !important;
    padding-top: 20px !important;
}
#top-menu .menu-item-has-children>a:first-child:after {
    top: 50%;
    transform: translate(0, -50%);
}
@media (min-width: 500px) {
    .dm-header-cta {
        display: block;
    }

}

@media (min-width: 981px) {
    .dm-header-cta {
        order: unset;
        margin-left: unset;
    }

    #main-header #et-top-navigation {
        order: unset;
    }

    #top-menu-nav {
        display: block;
    }
}

/*
=================
HEADER STYLES END
=================
*/

/*
=================
FOOTER STYLES
=================
*/

#main-footer {
    background: var(--bg-dark);
    color: var(--secondary-font-color);
    border-top: none;
    padding: 0;
}

#footer-top {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 0;
    display: flex;
    align-items: flex-start;
    gap: 80px;
    flex-direction: column;
}

#footer-top-right {
    width: 100%;
}

.footer-social {
    display: flex;
    gap: 15px;
    /*justify-content: center;*/
    margin-bottom: 30px;
}

.footer-social a .logo-container {
    width: 27px;
    height: 27px;
    background-color: var(--bg-light);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--blue);
    font-size: var(--font-size-18);
}

.footer-social a:hover .logo-container {
    width: 27px;
    height: 27px;
    background-color: var(--blue);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--bg-light);
    font-size: var(--font-size-18);
}

#footer-logo {
    max-width: 100px;
    height: auto;
    display: block;
    flex-shrink: 0;
    /*margin: 0 auto 20px auto;*/
    margin-bottom: 20px;
}

.bottom-nav li {
    padding-right: 0 !important;
}

#et-footer-nav {
    background-color: transparent;
}

#et-footer-nav .container {
    margin: 0;
    padding: 0;
}

#main-footer .bottom-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
    text-align: unset !important;
}

/* Each top-level menu item becomes a column */
#main-footer .bottom-nav > li {
    display: flex;
    flex-direction: column; /* heading on top, links below */
    align-items: flex-start;
    margin: 0;
}

/* Column headings (Company, Services, Resources) */
#main-footer .bottom-nav > li > a {
    display: block;
    font-weight: 500;
    font-size: var(--font-size-18);
    margin: 0 0 10px;
    color: var(--secondary-font-color);
    text-decoration: none;
    font-family: var(--font-body), serif;
}

/* Make sure footer sub-menus are vertical lists, not dropdowns */
#main-footer .bottom-nav .sub-menu {
    position: static;
    display: block;
    background: none;
    box-shadow: none;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

#main-footer .bottom-nav .sub-menu li {
    display: flex;
    justify-content: space-between;
    margin: 0;
    border-bottom: 1px solid var(--secondary-font-color);
    align-items: center;
    position: relative;
}

#main-footer .bottom-nav .sub-menu li:hover {
    /*background-color: var(--bg-light);*/
    transform: translateY(-2px);
    transition: all 0.3s ease;
}
/*
#main-footer .bottom-nav .sub-menu li:hover::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;

    background-image: var(--brand-gradient);
    background-repeat: no-repeat;
    background-size: 300% 100%;
    background-position: 0 50%;

    z-index: 2;
    animation: shimmerPulse 4s linear infinite;
}
*/
#main-footer .bottom-nav .sub-menu li:hover a, #main-footer .bottom-nav .sub-menu li.current-menu-item a {
    background-image: var(--brand-gradient);
    background-size: 300% 100%;
    background-position: 0 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
    animation: shimmerPulse 3s linear infinite;
    width: 100%;
}

#main-footer .bottom-nav .sub-menu li::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border: solid currentColor;
    border-width: 0 1px 1px 0;
    transform: rotate(-45deg);
    vertical-align: middle;
    margin-right: 15px;
}

#main-footer .bottom-nav .sub-menu li a {
    font-family: var(--font-heading), serif;
}

/* Links inside each column */
#main-footer .bottom-nav .sub-menu li + li {
    margin-top: 8px;
}

#main-footer .bottom-nav .sub-menu a {
    color: var(--tertiary-font-color);
    font-size: var(--font-size-16);
    text-decoration: none;
    font-weight: 400;
}

#main-footer .bottom-nav .sub-menu a:hover {
    color: var(--light-green);
}

/* Bottom copyright bar */
#footer-bottom {
    background: var(--bg-light);
    color: var(--primary-font-color);
    font-size: var(--font-size-16);
    padding: 12px 0;
    text-align: center;
}

#footer-bottom .container {
    text-align: center;
}

.bottom-nav a:hover {
    opacity: 1;
}

@media (min-width: 768px) {

    #main-footer .bottom-nav {
        flex-direction: row;
        gap: 80px;
    }

    #main-footer .bottom-nav .sub-menu {
        width: unset;
    }

    #main-footer .bottom-nav .sub-menu li {
        border-bottom: none;
    }

    #main-footer .bottom-nav .sub-menu li::after {
        display: none;
    }
}

@media (min-width: 981px) {
    #footer-top {
        flex-direction: row;
        align-items: center;
    }
}

/*
===================
FOOTER STYLES END
===================
*/


body, p {
    font-family: var(--font-body), serif;
    font-size: var(--font-size-18);
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    color: var(--primary-font-color);
}

.eyebrow {
    color: var(--primary-font-color);
    font-family: var(--font-body), serif;
    font-weight: 700;
    /*text-transform: uppercase;*/
    letter-spacing: -0.4px;
    line-height: 1;
    font-size: var(--font-size-20);
}

h1 {
    color: var(--primary-font-color);
    font-family: var(--font-heading), serif;
    text-transform: uppercase;
    font-size: var(--font-size-48) !important;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 2.4px;
}

h2 {
    color: var(--primary-font-color);
    font-family: var(--font-heading), serif;
    text-transform: uppercase;
    line-height: 1;
    text-align: center;
    font-size: var(--font-size-48) !important;
    font-weight: 700;
    letter-spacing: 1.92px;
}

h3 {
    color: var(--primary-font-color);
    font-family: var(--font-heading), serif;
    font-size: var(--font-size-32);
    font-weight: 700;
    /*text-transform: uppercase;*/
}

.et_builder_inner_content {
    z-index: auto;
}

.textalign-left {
    text-align: left;
}

.textalign-center {
    text-align: center;
}

.textalign-center-m {
    text-align: center;
}

.flex {
    display: flex;
}

.flexdirection-column {
    flex-direction: column;
}

.alignitems-center {
    align-items: center;
}

.alignitems-end {
    align-items: end;
}

.justifycontent-center {
    justify-content: center;
}

.et_pb_row {
    width: 80%;
    max-width: 2560px !important;
}

.width100pct-m {
    width: 100%;
}

.maxwidth-600 {
    max-width: 600px;
}

.maxwidth-700 {
    max-width: 700px;
}

.maxwidth-900 {
    max-width: 900px;
}

.maxwidth-1000 {
    max-width: 1000px;
}

.position-static, .position-static .et_pb_code_inner {
    position: static !important;
}

.margin-0-auto {
    margin: 0 auto;
}

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    border-radius: 999px;
    background: var(--bg-light);
    color: var(--primary-font-color);
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.03em;
    font-family: var(--font-body), serif;
    max-width: 262px;
    max-height: 56px;
    margin: 10px 0;
}

.mb-20 {
    margin-bottom: 20px;
}

.pb-20 {
    padding-bottom: 20px;
}

.mb-40 {
    margin-bottom: 40px;
}

.green-btn {
    background: var(--bg-light);
}

.green-btn:hover {
    background: var(--light-green);
}

.blue-btn {
    border: 1px solid var(--blue);
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.16);
    font-size: var(--font-size-18);
}

.blue-btn:hover {
    background: var(--blue);
    color: var(--secondary-font-color);
}

.bg-dark {
    background-color: var(--bg-dark) !important;
}

.bg-lightblue {
    background-color: var(--bg-light-blue) !important;
}

.bg-lightgray {
    background-color: var(--bg-light-gray) !important;
}

.bg-blue {
    background-color: var(--blue) !important;
}

.font-light {
    color: var(--secondary-font-color) !important;
}

.color-green {
    color: var(--lime);
}

.color-lightgreen {
    color: var(--light-green);
}

.font-16-m {
    font-size: 16px;
}

.fw-500 {
    font-weight: 500;
}

.flex-center {
    display: flex;
    justify-content: center;
}

.flex-center-m {
    display: flex;
    justify-content: center;
}

.et_pb_section_0 {
    padding-top: 0 !important;
}

@media (min-width: 768px) {
    .width100pct-m {
        width: 90%;
    }

    .font-16-m {
        font-size: unset;
    }
    .et_pb_section_0 {
        padding-top: 60px !important;
    }
}

@media (min-width: 981px) {
    .flex-center-m {
        display: block;
    }

    .textalign-center-m {
        text-align: unset;
    }
    .et_pb_section_0 {
        padding-top: 120px !important;
    }
}


/*
===================
HOME PAGE HERO SECTION
===================
*/

.hero {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.section-left {
    flex: 1;
}

.section-right {
    flex: 1;
}


.hero-stats {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.hero-stats div {
    padding: 20px 0;
    position: relative;
}

.hero-stats div:nth-child(1)::after, .hero-stats div:nth-child(2)::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 80px;
    height: 2px;
    transform: translateX(-50%);
    background: var(--blue);
}

.hero-stats .hero-stat-number {
    color: var(--blue);
    font-family: var(--font-heading), serif;
    font-size: 28px;
    font-weight: 700;
}

.hero-stats p {
    color: var(--primary-font-color);
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 500;
}

@media (min-width: 981px) {
    .hero {
        flex-direction: row;
        gap: 80px;
    }

    .hero-stats {
        flex-direction: row;
        text-align: left;
    }

    .hero-stats div:nth-child(1)::after, .hero-stats div:nth-child(2)::after {
        bottom: unset;
        left: unset;
        width: 2px;
        top: 50%;
        right: 0;
        height: 70%;
        transform: translateY(-50%);
    }

    .hero-stats div {
        padding: 0 20px;
    }

    /*.hero-stats div:nth-child(1), .hero-stats div:nth-child(2) {*/
    /*    border-right: 1px solid var(--blue);*/
    /*}*/
}

/*
===================
HOME PAGE HERO SECTION END
===================
*/


/* carousel logos */

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-backface-hidden .swiper-slide {
    text-align: center;
}

.swiper-slide img {
    height: auto;
    transition: filter 0.3s ease;
}

/* end carousel logos */

.services-container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
}

.service {
    background-color: var(--blue);
    display: flex;
    position: relative;
    flex-direction: column;
}

.service h3 {
    color: var(--bg-light);
    letter-spacing: 1.12px;
}

.service p {
    color: var(--bg-light);
}

.service a {
    /*max-width: 100%;*/
    margin: 20px 0;
}

.service-text {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    height: 100%;
}

.service img {
    margin-top: auto;
    align-self: center;
    /*max-width: 60%;*/
    max-height: 270px;
}

@media (min-width: 1200px) {
    .service {
        flex-direction: row;
    }

    .service p {
        height: 150px;
    }

    .service-text {
        width: 55%;
        z-index: 2;
        padding: 40px 0 40px 40px;

    }

    .service img {
        position: absolute;
        right: 0;
        bottom: 0;
        max-width: 45%;
        max-height: 100%;
    }
}

@media (min-width: 768px) {
    .services-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .service {
        border-radius: 26px;
    }
}


.portfolio-section {
    padding: 40px 0;
}

.portfolio-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}

.portfolio-meta {
    text-align: left;
}

.portfolio-arrows {
    display: flex;
    gap: 40px;
}

.swiper-button-next,
.swiper-button-prev {
    position: relative !important; /* so they stay in the header row */
    width: 35px !important;
    height: 35px !important;
    border-radius: 999px;
    background: var(--bg-light);
    box-shadow: 0 5px 16px 0 rgba(0, 0, 0, 0.19);
    color: var(--primary-font-color) !important;
}

/* Optional: shrink the default arrow icons a bit */
.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: var(--font-size-16) !important;
}

.swiper-backface-hidden .swiper-slide {
    height: auto;
}

.portfolio-slider {
    overflow: visible !important;
}

.portfolio-card {
    height: 100% !important;
    background: var(--bg-light);
    color: var(--primary-font-color) !important;
    text-align: left !important;
}

.portfolio-card img {
    width: 100%;
    display: block;
    border-radius: 10px;
    margin-bottom: 12px;
    aspect-ratio: 506 / 363;
    height: auto;
    object-fit: cover;
    object-position: center;
}

.portfolio-card p {
    font-family: var(--font-heading), serif;
    text-align: left;
}

.portfolio-card h3 {
    text-align: left;
}

.video-embed {
    max-width: 80%;
    width: 950px;
    margin: 0 auto;
}

.video-ornaments {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: auto;
    min-height: 320px;
    max-height: 100%;
}

.video-ornaments-left {
    left: 0;
}

.video-ornaments-right {
    right: 0;
}
.video-ornaments-left.ornament-full {
    transform: translate(-50%, -50%);
}
.video-ornaments-right.ornament-full {
    transform: translate(50%, -50%);
}
@media (min-width: 768px) {
    .ornament-full {
        transform: translateY(-50%);
    }
}

.perks-container {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.perks-left {
    flex: 1;
    display: flex;
    /*align-items: center;*/
    justify-content: center;
    flex-direction: column;
    margin-bottom: 50px;
}

.perks {
    flex: 2;
    display: grid;
    gap: 80px;
}

.perk {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /*align-items: center;*/
}

.perk-text {
    display: flex;
    gap: 40px;
    align-items: center;
    padding-bottom: 20px;
    margin-bottom: 10px;
    position: relative;
}

.perk-text p {
    color: var(--green);
    font-size: var(--font-size-16);

    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: translateY(4px);
    transition:
            opacity 0.35s ease,
            clip-path 0.6s ease,
            transform 0.35s ease;
}

.perk img {
    margin-bottom: 20px;
    height: 119px;
}
.perk svg {
    height: 119px;
    color: var(--secondary-font-color);
    flex-shrink: 0;
}
.perks-left p, .perks-left h2 {
    text-align: center;
}
.perk > p {
    text-align: right;
    color: var(--secondary-font-color);
}
.perks-left h2 {
    margin-bottom: 20px;
}

.perk > p {
    font-size: var(--font-size-25);
}
.perk-text::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background: var(--lime);

    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.perk:hover .perk-text::after {
    transform: scaleX(1);
}

.perk:hover .perk-text p {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
}
.perk:hover svg {
    color: var(--green);
}

.perk:hover > p {
    color: var(--lime);
}
@media (min-width: 768px) {
    .perks {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 981px) {
    .perks-container {
        flex-direction: row;
    }

    .perks-left {
        margin-bottom: 0;
    }

    .perk {
        justify-content: end;
        align-items: end;
    }


    .perks-left p, .perks-left h2 {
        text-align: left;
    }

    .perks-container {
        gap: 40px;
    }
    .perks {
        gap: 40px;
    }
    .perk-text {
        gap: 20px;
    }
    .perk svg {
        width: var(--font-size-120);
        height: unset;
    }
}
@media (min-width: 1440px) {
    .perks-container {
        gap: 60px;
    }
    .perks {
        gap: 80px;
    }
    .perk-text {
        gap: 40px;
    }
}

.roadmap {
    position: relative;
    /* background-color: var(--bg-dark); */
    padding: 40px 0 0;
}

/*noinspection CssUnknownTarget*/
.roadmap-inner {
    background-image: url("/wp-content/uploads/Mask-group-4-1.webp");
    background-repeat: no-repeat;
    background-size: 222% 64%;
    background-position: center right;
    display: flex;
    min-height: 700px;
    flex-direction: column;
}

.roadmap-left {
    flex: 0 0 30%;
    display: flex;
    justify-content: start;
    align-items: end;
    order: 2;
}

.roadmap-person {
    width: 60%;
    height: auto;
    object-fit: contain;
}

.roadmap-right {
    flex: 1;
    position: relative;
    order: 1;
    width: 80%;
    margin: 0 auto;
    padding-bottom: 40px;
}

.roadmap-title {
    margin-bottom: 32px;
    text-align: left;
}

.roadmap-steps {
    inset: 0;
    display: flex;
    justify-content: end;
    align-items: center;
    pointer-events: none;
    flex-direction: column;
    gap: 25px;
}

.step-card {
    position: relative;
    --final-y: 0px;

    background: var(--bg-light);
    border-radius: 7px;
    padding: 20px;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.16);
    font-size: 16px;
    text-align: center;
    width: 100%;
    max-width: 200px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (min-width: 768px) {
    .roadmap-inner {
        flex-direction: row;
        background-size: cover;
    }

    .roadmap-left {
        justify-content: end;
        order: 1;
    }

    .roadmap-person {
        width: 100%;
    }

    .roadmap-right {
        order: 2;
        width: unset;
        margin: unset;
    }
}

@media (min-width: 981px) {
    .roadmap {
        background-color: var(--bg-light);
    }

    .roadmap-title {
        width: 50%;
    }

    .roadmap-steps {
        position: absolute;
        width: 80%;
        flex-direction: row;
        justify-content: space-between;
        gap: 0;
    }

    .step-card {
        opacity: 0;
        transform: translateY(calc(var(--final-y) + 40px)) scale(0.96);
    }

    .roadmap.is-visible .step-card {
        animation: stepCardReveal 2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .roadmap.is-visible .step-card:nth-child(1) {
        animation-delay: 0.3s;
    }

    .roadmap.is-visible .step-card:nth-child(2) {
        animation-delay: 0.9s;
    }

    .roadmap.is-visible .step-card:nth-child(3) {
        animation-delay: 1.5s;
    }

    .roadmap.is-visible .step-card:nth-child(4) {
        animation-delay: 2.1s;
    }

    .roadmap.is-visible .step-card:nth-child(5) {
        animation-delay: 2.7s;
    }

    .step-card::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -50px;
        width: 1px;
        height: 40px;
        background: var(--bg-dark);
        transform: translateX(-50%) scaleY(0);
        transform-origin: top;
    }

    .roadmap.is-visible .step-card::after {
        animation: lineReveal 2s ease forwards;
    }

    .roadmap.is-visible .step-card:nth-child(1)::after {
        animation-delay: 0.6s;
    }

    .roadmap.is-visible .step-card:nth-child(2)::after {
        animation-delay: 1.2s;
    }

    .roadmap.is-visible .step-card:nth-child(3)::after {
        animation-delay: 1.8s;
    }

    .roadmap.is-visible .step-card:nth-child(4)::after {
        animation-delay: 2.4s;
    }

    .roadmap.is-visible .step-card:nth-child(5)::after {
        animation-delay: 3.0s;
    }

    .step-card:nth-child(1) {
        --final-y: 8vw;
    }

    .step-card:nth-child(2) {
        --final-y: 3vw;
    }

    .step-card:nth-child(3) {
        --final-y: -2vw;
    }

    .step-card:nth-child(4) {
        --final-y: -7vw;
    }

    .step-card:nth-child(5) {
        --final-y: -12vw;
    }
}

@media (min-width: 1300px) {
    .step-card:nth-child(1) {
        --final-y: 14vw;
    }

    .step-card:nth-child(2) {
        --final-y: 9.5vw;
    }

    .step-card:nth-child(3) {
        --final-y: 5vw;
    }

    .step-card:nth-child(4) {
        --final-y: 0.5vw;
    }

    .step-card:nth-child(5) {
        --final-y: -4vw;
    }
}

@keyframes stepCardReveal {
    from {
        opacity: 0;
        transform: translateY(calc(var(--final-y) + 40px)) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(var(--final-y)) scale(1);
    }
}

@keyframes lineReveal {
    to {
        transform: translateX(-50%) scaleY(1);
    }
}

.case-studies {
    padding: 40px 0;
}

.case-studies h2 {
    margin-bottom: 20px;
}

.case-grid {
    display: flex;
    gap: clamp(24px, 2vw, 32px);
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.case-card {
    position: relative;
    height: 400px;
    overflow: hidden;
    min-height: 300px;
}

.case-card__img {
    width: 100%;
    height: 100%;
    max-width: unset;
    object-fit: cover;
}

.case-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.68);
}

.case-card__front,
.case-card__stats {
    position: absolute;
    inset: 0;
    padding: 24px;
    display: flex;
    flex-direction: column;
    z-index: 2;
}

.case-card__front {
    justify-content: center;
}

.case-card__stats {
    justify-content: space-between;
}

.case-card__front img {
    max-width: 80%;
    margin-bottom: 15px;
}

.case-card__front p, .case-card__stats p {
    color: var(--secondary-font-color);
}

.case-card__stats p .stat {
    color: var(--light-green);
}

.case-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--blue);
    z-index: 1;
    clip-path: polygon(0 0, 25% 0, 0 25%);
    transition: clip-path 0.45s ease;
}

.case-card:hover::before {
    clip-path: polygon(0 0, 200% 0, 0 200%);
}

.case-card__front {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.case-card__stats {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.case-card:hover .case-card__front {
    opacity: 0;
    transform: translateY(-10px);
}

.case-card:hover .case-card__stats {
    opacity: 1;
    transform: translateY(0);
}

.case-card__label {
    color: var(--secondary-font-color);
    font-family: var(--font-heading), serif;
    font-size: var(--font-size-25);
    font-weight: 700;
    line-height: 150%;
    padding-bottom: 0;
    text-align: left;
}

.case-card_stats-top {
    display: flex;
    /*gap: 20px;*/
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--secondary-font-color);
    margin-bottom: clamp(10px, 2vw, 30px);
}

.case-card_stats-top img {
    max-height: 40px;
}

.case-card_stats_bottom {
    display: flex;
    gap: 20px;
    align-items: center;
}

.case-card_stats_bottom .stat {
    color: var(--light-green);
    font-family: Inter, sans-serif;
    font-size: var(--font-size-96);
    font-weight: 600;
}

p.case-card__big {
    color: var(--light-green);
    font-family: Inter, sans-serif;
    font-size: var(--font-size-48);
    font-weight: 600;
    line-height: 150%;
}

.case-card__sub {
    color: var(--secondary-font-color);
    font-family: var(--font-heading), serif;
    font-size: var(--font-size-20);
    font-weight: 700;
    line-height: 150%; /* 30px */
}

.case-card__btn {
    align-self: flex-end;
    margin: 0 20px;
    padding: 10px 0;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid var(--bg-light);
    background: transparent;
    color: var(--secondary-font-color);
}

.case-card__btn:hover {
    margin: 0;
    padding: 10px 20px;
    border-radius: 10px;
    border-bottom: 1px solid var(--blue);
    background: var(--bg-light);
    color: var(--blue);
}

@media (min-width: 768px) {
    .case-studies {
        width: 80%;
        margin: 0 auto;
    }

    .case-card {
        max-width: 500px;
        border-radius: 8px;

    }
    .case-card__img {
        width: unset;
        height: unset;
    }
}

@media (min-width: 981px) {
    .case-grid {
        flex-direction: row;
    }

    .case-card {
        height: unset;
    }

    .case-card__front,
    .case-card__stats {
        justify-content: center;
    }
}


/* cards */
.card,
.card-two {
    position: sticky;
    top: 200px;
}

.card__inner_two {
    margin-bottom: 20px;
}

.card__inner {
    will-change: transform;
    overflow: hidden;
    transform-origin: center top;
    padding: clamp(20px, 6vw, 80px);
    border-radius: 29px;
    border: 12px solid var(--bg-light);
}

.card-1 .card__inner {
    border-color: var(--bg-light);
    background: var(--light-green);
    transform: rotate(-2.823deg);
}

.card-2 .card__inner {
    background: var(--bg-light);
    border-color: var(--light-green);
    transform: rotate(1.644deg);
    position: relative;
    right: 20px;
    top: 20px;
}

.card-3 .card__inner {
    border-color: var(--lime);
    background: var(--bg-light);
    box-shadow: 0 5px 16px 0 rgba(0, 0, 0, 0.19);
    transform: rotate(-1.712deg);
    top: 70px;
    left: 7px;
    position: relative;
}

.card-3-1 .card__inner {
    box-shadow: none;
    position: sticky;
}

.card-4 .card__inner {
    background: var(--bg-light);
    border-color: var(--light-green);
    transform: rotate(3.67deg);
    position: relative;
    right: 20px;
    top: 100px;
}

.card-5 .card__inner {
    background: var(--blue);
    box-shadow: 0 5px 16px 0 rgba(0, 0, 0, 0.19);
    transform: rotate(-3.134deg);
    top: 125px;
    left: -10px;
    position: relative;
}

.card-5 .card__inner .heading-card h3,
.card-5 .card__inner .cards-descrp {
    color: var(--secondary-font-color);
}

.card-6 .card__inner {
    background: var(--bg-light);
    border-color: var(--blue);
    transform: rotate(5.216deg);
    position: relative;
    right: 20px;
    top: 140px;
}

.heading-card h3 {
    font-size: var(--font-size-40);
    font-weight: 700;
    letter-spacing: 0.72px;
    text-transform: capitalize;
}

.cards {
    max-width: 700px;
    width: 100%;
    margin: 100px auto 100px;
}

/* end cards */
/* accordion FAQ wordpress */
.box-faq-buttons-wordpress .accordion-item {
    border-radius: 14px;
    background: var(--bg-light);
    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.19);
    cursor: pointer;
    width: 100%;
    text-align: left;
    outline: none;
    transition: 0.4s;
    margin-bottom: 40px;
    position: relative;
}

.box-faq-buttons-wordpress .accordion-item.active::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 3px;
    border-radius: inherit;
    background: var(--brand-gradient);
    background-size: 300% 300%;
    animation: borderMove 6s ease infinite;
    /*noinspection CssInvalidPropertyValue,CssInvalidFunction*/
    -webkit-mask: linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
    /*noinspection CssInvalidFunction*/
    mask: linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

@keyframes borderMove {
    0% {
        background-position: 0 50%;
    }
    25% {
        background-position: 100% 30%;
    }
    50% {
        background-position: 60% 100%;
    }
    75% {
        background-position: 80% 0;
    }
    100% {
        background-position: 0 50%;
    }
}

.box-faq-buttons-wordpress .accordion-item .heading h3 {
    text-align: left;
    font-size: 22px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.88px;
    padding-bottom: 0;
}

.box-left-faq {
    padding: 24px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.71);
}

.box-faq-buttons-wordpress .accordion-item button {
    width: 100%;
    border: none;
    background: transparent;
    /*display: flex;*/
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 20px 60px 20px 20px;
    position: relative;

}

.box-faq-buttons-wordpress .accordion-item button h3:after {
    content: "5";
    font-family: "ETmodules", serif;
    background: transparent;
    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.19);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    float: right;
    margin-left: 5px;
    font-size: 35px;
    border-radius: 50%;
    height: 40px;
    width: 40px;
    position: absolute;
    right: 2%;
    top: 50%;
    transform: translateY(-50%);
}

.box-faq-buttons-wordpress .active.accordion-item button h3:after {
    content: "3" !important;
    background: var(--blue);
    color: var(--secondary-font-color);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}

.box-faq-buttons-wordpress .panel p {
    margin: 25px 0 45px 0;
    color: var(--primary-font-color);
}

.panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.panel-open {
    max-height: 250px;
}

.panel-open:before {
    visibility: visible;
    opacity: 1;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    content: "";
    background: linear-gradient(transparent 70%, #fafafa);
    pointer-events: none;
    z-index: 9;
}

.accordion-item.active .panel-open:before {
    display: none;
}

.panel p {
    text-align: left;
    margin: 25px 10px 45px 0;
    font-weight: 400;
}


.accordion-item.active .panel {
    max-height: 1000px;
    overflow: hidden;
    transition: max-height 0.2s ease-in;
}

@media screen and (min-width: 981px) {
    .box-faq-buttons-wordpress .panel p {
        margin: 25px 50px 45px 0;
    }

    .box-faq-buttons-wordpress .accordion-item button:after {
        height: 50px;
        width: 50px;
    }
}

/* end accordion FAQ wordpress */

.pointofcontact .eyebrow {
    color: var(--secondary-font-color);
    font-size: var(--font-size-48);
    padding-bottom: 20px;
}
.pointofcontact h2 {
    font-size: var(--font-size-60) !important;
}
.pointofcontact a {
    margin-top: 40px;
}
/*
==================
BLUE GRID
==================
*/

/*.blue-grid {*/
/*    display: flex;*/
/*    grid-template-columns: 1fr 1fr;*/
/*    grid-template-rows: 1fr 1fr;*/
/*    gap: 30px;*/
/*}*/
.blue-grid-row {
    display: flex;
    gap: 30px;
    margin-bottom: 30px;
    flex-direction: column;
}

.blue-grid-card {
    background-color: var(--light-green);
    border-radius: 21px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 30px;
    gap: 30px;
}

.blue-grid-media {
    display: flex;
    justify-content: center;
    align-items: center;
}

@media screen and (min-width: 981px) {
    .blue-grid-row {
        flex-direction: row;
    }

    .blue-grid-card {
        gap: 0;
        padding: 0;
        background-color: var(--blue);
        height: 30vw;

        flex-direction: row;
        flex: 1 1 0%;
        flex-basis: 0%;
        min-width: 0;

        transition: transform .5s ease, box-shadow .25s ease, background-color .25s ease, flex-basis .35s ease;
    }

    .blue-grid-text {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        padding: clamp(40px, 6vw, 100px) clamp(20px, 3vw, 50px);
        flex: 1 1 auto;
        min-width: 0;
        padding-right: 0;
    }

    .blue-grid-media {
        padding: 20px 20px 20px 0;
        overflow: hidden;
        min-width: 0;

        flex: 0 0 0%;
        opacity: 0;

        transform: translateX(100px);

        transition: flex-basis .65s cubic-bezier(.2, .8, .2, 1),
        opacity .115s ease,
        transform .115s cubic-bezier(.2, .8, .2, 1);
    }
    .blue-grid-media.fullwidth img {
        position: absolute;
        right: 0;
        /* padding: 0; */
        z-index: -1;
        object-fit: cover;
    }
    .blue-grid-media img {
        width: 100%;
        height: 100%;
        max-height: 95%;
        display: block;

        object-fit: contain;

        opacity: 0;
        transition: opacity .65s ease;
    }

    /* HOVER */
    .blue-grid-card:hover {
        box-shadow: 0 14px 40px rgba(0, 0, 0, .25);
        background: var(--light-green);
        z-index: 1;
        flex-basis: 25%;
    }

    .blue-grid-card:hover .blue-grid-media {
        flex-basis: 38%;
        opacity: 1;
        transform: translateX(0);
        transition-delay: 0s, 0s, .06s;
        flex: 3;
    }
    .blue-grid-card:hover .blue-grid-text {
        flex: 2;
    }
    .blue-grid-card:hover .blue-grid-media img {
        opacity: 1;
        transition-delay: .10s;
    }

    .blue-grid-card:hover p,
    .blue-grid-card:hover h3 {
        color: var(--primary-font-color);
    }

    .blue-grid-text p,
    .blue-grid-text h3 {
        color: var(--secondary-font-color);
    }

    /* Your special cases */
    .blue-grid-row:nth-child(1) .blue-grid-card:nth-child(2) .blue-grid-media,
    .blue-grid-row:nth-child(2) .blue-grid-card:nth-child(1) .blue-grid-media {
        padding-bottom: 0;
        align-items: flex-end;
    }
}

/*
==================
BLUE GRID END
==================
*/
.process-ring h3 {
    color: var(--secondary-font-color, #fff);
    font-size: 25px;
    font-weight: 700;
    letter-spacing: 1.8px;
    margin: 0;
}

.process-ring p {
    color: var(--secondary-font-color, #fff);
    font-size: 16px;
    font-weight: 500;
    line-height: 25px;
    max-width: 42ch;
    margin: 0;
}

.process-slider {
    position: relative;
    margin: 0 auto;
    display: grid;
    place-items: center;
}

.process-ring {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 14px;
    padding: 25px;
}


.stage-title,
.stage-img,
.stage-text {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    transition: opacity 0.32s ease, transform 0.32s ease, filter 0.32s ease;
    will-change: opacity, transform, filter;
}

.process-ring.is-changing .stage-title {
    opacity: 0;
    transform: translateY(10px);
    filter: blur(4px);
    transition-delay: 0s;
}

.process-ring.is-changing .stage-img {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
    filter: blur(4px);
    transition-delay: 0.04s;
}

.process-ring.is-changing .stage-text {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(4px);
    transition-delay: 0.08s;
}

.process-ring.is-entering {
    animation: ringContentPulse 0.35s ease;
}

@keyframes ringContentPulse {
    0% { transform: scale(0.985); }
    100% { transform: scale(1); }
}

@keyframes ringContentPulse {
    0% { transform: scale(0.985); }
    100% { transform: scale(1); }
}
@media screen and (min-width: 768px) {
    .process-ring h3 {
        font-size: var(--font-size-40);
        max-width: 85%;
    }

    .process-ring p {
        font-size: var(--font-size-16);
        max-width: 85%;
    }

    .process-scroll-area {
        position: relative;
        min-height: 220vh;
    }

    .process-sticky {
        position: sticky;
        top: 0;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .process-sticky-inner {
        /*width: min(80vw, 60vh, 620px);*/
        margin: 0 auto;
        display: grid;
        place-items: center;
        gap: 20px;
        padding-top: 60px;
        box-sizing: border-box;
    }


    .process-slider {
        position: relative;
        margin: 0 auto;
        display: grid;
        place-items: center;
    }

    .process-ring {
        position: relative;
        /*width: min(80vw, 60vh, 620px);*/
        height: 70vh;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        padding: 64px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .process-ring > * {
        position: relative;
        z-index: 2;
    }

    .process-ring img {
        max-height: 33%;
    }

    .ring-dots {
        position: absolute;
        inset: 0;
        pointer-events: auto;
        z-index: 3;
    }

    .ring-dots .dot {
        position: absolute;
        width: 26px;
        height: 26px;
        border: 0;
        padding: 0;
        background: transparent;
        cursor: pointer;
    }

    .ring-dots .dot i {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 999px;
        background: rgba(255, 255, 255);
        box-shadow: 0 0 0 2px rgba(0, 0, 0, .25);
        transform: scale(1);
        transform-origin: center;
    }

    /* 12 o'clock */
    .dot:nth-child(1){
        top: 4%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /* 3 o'clock */
    .dot:nth-child(2){
        top: 50%;
        left: 96%;
        transform: translate(-50%, -50%);
    }

    /* 6 o'clock */
    .dot:nth-child(3){
        top: 96%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /* 9 o'clock */
    .dot:nth-child(4){
        top: 50%;
        left: 4%;
        transform: translate(-50%, -50%);
    }

    .ring-dots .dot.is-on i {
        background: linear-gradient(156deg, #CFFF34 4.69%, #8FEF8D 36.28%, #3F4B81 95.94%);
    }

    @keyframes dotFill {
        0% {
            transform: scale(.65);
            filter: blur(.2px);
            box-shadow: 0 0 0 2px rgba(0, 0, 0, .25);
        }
        55% {
            transform: scale(1.12);
        }
        100% {
            transform: scale(1);
            filter: none;
            box-shadow: 0 0 0 2px rgba(0, 0, 0, .25), 0 0 18px rgba(207, 255, 52, .45);
        }
    }

    .ring-dots .dot.pop i {
        animation: dotFill 520ms cubic-bezier(.2, .9, .2, 1) both;
    }

    .ring-dots .dot:focus-visible i {
        outline: 2px solid rgba(207, 255, 52, .75);
        outline-offset: 3px;
    }

    .ring {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        overflow: visible;
    }

    .ring-base {
        fill: none;
        stroke: rgba(255, 255, 255);
        stroke-width: 0.5;
    }

    .ring-progress {
        fill: none;
        stroke: url(#ringGradient);
        stroke-width: 0.5;
        stroke-linecap: round;
        transform: rotate(-90deg);
        transform-origin: 50% 50%;
        opacity: 1;
        transition: opacity 160ms ease;
        will-change: stroke-dashoffset;
    }
}


/*
==================
PROCESS RING END
==================
*/

.whychoose-heading {
    width: 80%;
    margin: 0 auto;
}

.whychoose-container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
}

.whychoose-box {
    background-color: var(--light-green);
    position: relative;
    overflow: hidden;
    min-height: 418px;
    display: flex;
    align-items: flex-end;
}

.whychoose-text {
    position: relative;
    z-index: 2;
    padding: 20px;
    transition: color 350ms ease;
}

.whychoose-text h3 {
    font-size: 24px;
    font-weight: 500;
}

.whychoose-text p {
    font-size: 16px;
    font-weight: 400;
}

.whychoose-media {
    position: absolute;
    inset: 0;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.whychoose-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: translateY(105%);
    transition: transform 600ms cubic-bezier(.2, .9, .2, 1);
    will-change: transform;
}

.whychoose-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    opacity: 0;
    transition: opacity 350ms ease;
}

/* Desktop hover only */
@media (hover: hover) and (pointer: fine) {
    .whychoose-box:hover .whychoose-media img {
        transform: translateY(0);
    }

    .whychoose-box:hover .whychoose-media::after {
        opacity: 1;
    }

    .whychoose-box:hover .whychoose-text,
    .whychoose-box:hover .whychoose-text h3,
    .whychoose-box:hover .whychoose-text p {
        color: var(--secondary-font-color);
    }
}

/* Mobile / tablet scroll reveal only */
@media (hover: none), (pointer: coarse) {
    .whychoose-box.in-view .whychoose-media img {
        transform: translateY(0);
    }

    .whychoose-box.in-view .whychoose-media::after {
        opacity: 1;
    }

    .whychoose-box.in-view .whychoose-text,
    .whychoose-box.in-view .whychoose-text h3,
    .whychoose-box.in-view .whychoose-text p {
        color: var(--secondary-font-color);
    }
}

@media (min-width: 768px) {
    .whychoose-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .whychoose-text h3 {
        min-height: 80px;
    }

    .whychoose-text p {
        min-height: 126px;
    }
}

@media (min-width: 1200px) {
    .whychoose-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

/*
==============
THE RESULTS
==============
 */
.results-split {
    min-height: 200vh;
    position: relative;
}
.results-inner {
    grid-template-columns: 1fr;
    position: sticky;
    top: 0;
    min-height: 100vh;
    display: grid;
    align-items: center;
}


.results-left {
    background: var(--blue);
    padding: clamp(20px, 4vw, 80px) clamp(26px, 2.4vw, 40px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
}

.results-left h2 {
    text-align: left;
    color: var(--secondary-font-color);
}

.results-left p {
    color: var(--secondary-font-color);
}

.results-right {
    background: var(--bg-dark);
    padding: clamp(20px, 4vw, 80px) 0 clamp(20px, 4vw, 80px) clamp(20px, 4vw, 80px);
    display: flex;
    gap: 24px;
    flex-direction: column;
}

.results-slide {
    display: flex;
    gap: 14px;
    flex-direction: column;
}

.results-dots {
    display: flex;
    gap: 6px;
    align-items: center;
}

.rdot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: 0;
    background: var(--bg-light);
    cursor: pointer;
    padding: 0;
}

.rdot.is-active {
    background: #CFFF34;
}

.results-right-text {
    color: var(--secondary-font-color);
    transition: opacity 0.25s ease;
}

.results-visual {
    display: flex;
    justify-content: flex-end;
}

.results-visual img {
    width: min(420px, 80vw);
    height: auto;
    display: block;
    transition: opacity 0.25s ease;
}

.results-left a {
    display: none;
}
.results-right a.btn {
    margin: 10px auto;
}

/* Desktop split */
@media (min-width: 768px) {
    .results-split {
        min-height: 300vh;
    }
    .results-inner {
        grid-template-columns: 1fr 1.15fr;
    }

    .results-left {
        padding: clamp(40px, 6vw, 80px) clamp(28px, 5vw, 56px);
    }
    .results-slide {
        max-width: 40%;
    }
    .results-right {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        position: relative;
    }
    .results-left,
    .results-right {
        height: 70vh;
    }
    .results-left a {
        display: flex;
    }

    .results-right a {
        display: none;
    }
    #resultsImg.last-slide-img {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 50%;
    }

}

/*
==============
THE RESULTS END
==============
 */

/*
===================
ABOUT PAGE HERO SECTION
===================
*/

.hero-about {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hero-about .section-left {
    max-width: 1000px;
    text-align: center;
}

.hero-about .video-ornaments {
    max-height: 300px;
    top: 0;
    transform: none;
    max-width: 13%;
    height: auto;
    min-height: unset;
}

@media (min-width: 981px) {
    .hero-about .video-ornaments {
        max-height: 100%;
        min-height: 320px;
        max-width: 25%;
    }
}

/*
===================
ABOUT PAGE HERO SECTION END
===================
*/
.quote {
    font-size: var(--font-size-25);
    font-style: italic;
}


.our-story {
    width: 90%;
    margin: 0 auto;
    padding-top: 40px;
}

.our-story .container-left img {
    display: none;
}

.our-story .container-left .eyebrow, .our-story .container-left h2 {
    text-align: left;
}

.our-story .container-right {
    display: flex;
    flex-direction: column;
}

@media (min-width: 981px) {
    .our-story {
        display: flex;
        width: 90%;
        margin: 0 auto;
        gap: 80px;
        padding-top: 80px;
    }

    .our-story .container-left {
        flex: 0 0 40%;
        display: flex;
        flex-direction: column;
        justify-content: end;
        align-items: center;
    }

    .our-story .container-left img {
        display: none;
    }

    .our-story .container-left .eyebrow, .our-story .container-left h2 {
        width: 85%;
    }

    .our-story .container-right img {
        display: none;
    }

    .our-story .container-right {
        padding: 40px 0;
    }

    .our-story .container-right p:first-child {
        /*padding-top: 40px;*/
    }

    .our-story .container-left img {
        display: block;
    }
}

/*noinspection ALL*/
.thereforyou {
    min-height: 243px;
    background-image: url("/wp-content/uploads/Desktop-3-scaled.webp");
    margin: 54px 0;
    padding: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}


/* cards profile */
.slider-images-cards h2 {
    color: var(--secondary-font-color);
}

.sections-profile-cards {
    background-color: var(--blue);
    background-size: cover;
}

.swiper-container-cards .swiper-wrapper {
    height: auto;
}

.col-profile-cards-heading-dekstop {
    display: flex;
    justify-content: center;
    align-items: center;
}

.col-profile-cards-heading-dekstop,
.col-profile-cards {
    padding: 20px 20px 40px;
}

.col-profile-cards {
    height: auto !important;
    border-radius: 29px;
    background: var(--bg-light);
    transition: all 1s ease-out;
    pointer-events: auto !important;
}

.box-inner-profile-cards-img {
    text-align: center;
    position: relative;
    transition: all 1s ease-out;
}

.img-profile-cards-hover {
    display: none;
}

.img-profile-cards,
.img-profile-cards-hover {
    position: relative;
}

.col-profile-cards:hover .img-profile-cards-hover {
    display: inline-block;
}

.col-profile-cards:hover .img-profile-cards {
    display: none;
}

.img-arrow-b {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 25%);
}

.box-profile-cards-name {
    text-align: center;
}

.box-profile-cards-name h3 {
    color: var(--primary-font-color);
    font-family: var(--font-heading), sans-serif;
    font-size: var(--font-size-20);
    font-weight: 700;
    letter-spacing: 0.8px;
}

.position {
    color: var(--primary-font-color);
    font-family: var(--font-heading), sans-serif;
    font-size: var(--font-size-20);
    font-weight: 500;
    letter-spacing: 0.8px;
}

.hashtag {
    margin-top: 20px;
}

.hashtag p {
    visibility: hidden;
    text-align: center;
    color: var(--blue);
    font-family: var(--font-heading), sans-serif;
    font-size: var(--font-size-16);
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.56px;
}

.col-profile-cards:hover .hashtag p {
    visibility: visible;
}

.col-profile-cards-heading-mobile {
    margin-bottom: 20px;
}

.thereforyou.casestudies {
    margin-bottom: 0;
    padding: 60px 40px;
}

.thereforyou.casestudies h2 {
    padding-bottom: 40px;
}

.thereforyou.casestudies h2, .thereforyou.casestudies p {
    max-width: 1000px;
    text-align: center;
}

@media screen and (max-width: 1200px) and (min-width: 981px) {
    .box-slider-img img {
        height: 400px;
    }

    body .col-profile-cards-heading-dekstop,
    body .col-profile-cards {
        width: calc(33.8% - 2%) !important;
    }

}

@media screen and (min-width: 981px) {
    .img-shape img {
        display: none;
    }

    .col-profile-cards-heading-mobile {
        display: none;
    }

    .slider-images-cards .swiper-container-cards .swiper-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 19px;
    }

    .col-profile-cards-heading-dekstop,
    .col-profile-cards {
        width: calc(25% - 19px) !important;
    }

    .swiper-container-cards {
        width: 100%;
        overflow: hidden;
    }

    .col-profile-cards {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

@media screen and (max-width: 980px) {
    .col-profile-cards-heading-dekstop {
        display: none;
    }

    .swiper-container-cards .swiper-pagination {
        bottom: -60px !important;
    }

    .slider-images-cards {
        overflow: hidden;
    }
}

/* end cards profile */


/* accordion FAQ wordpress */
.about-accordion .accordion-item {
    border-radius: 14px;
    cursor: pointer;
    width: 100%;
    text-align: left;
    outline: none;
    transition: 0.4s;
    position: relative;
}

.about-accordion .accordion-item .heading h3 {
    text-align: left;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.88px;
    padding-bottom: 0;
    /*text-transform: capitalize;*/
}

.box-left-faq {
    padding: 24px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.71);
}

.about-accordion .accordion-item button {
    width: 100%;
    border: none;
    background: transparent;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 40px 60px 40px 0;
    position: relative;

}

.about-accordion .accordion-item button h3:after {
    content: "3";
    font-family: "ETmodules", serif;
    background: transparent;
    color: var(--primary-font-color);
    display: flex;
    align-items: center;
    justify-content: center;
    float: right;
    margin-left: 5px;
    font-size: 35px;
    border-radius: 50%;
    height: 40px;
    width: 40px;
    position: absolute;
    right: 2%;
    top: 50%;
    transform: translateY(-50%);
}

.about-accordion .active.accordion-item button h3:after {
    content: "2" !important;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}

.accordion-item.active .panel-open:before {
    display: none;
}

.accordion-item.active .panel {
    max-height: 1000px;
    overflow: hidden;
    transition: max-height 0.2s ease-in;
}

.line-separator {
    border-bottom: 1px solid var(--primary-font-color);
}

@media screen and (min-width: 981px) {
    .about-accordion .panel p {
        margin: 25px 0 0 0;
    }

    .about-accordion .accordion-item button:after {
        height: 50px;
        width: 50px;
    }
}

/* end accordion FAQ wordpress */


.case-study-hero {
    display: flex;
    flex-direction: column;

}

.case-study-hero .left {
    overflow: hidden;
    position: relative;
    max-height: 500px;
}

.case-study-hero .left::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--blue);
    z-index: 1;
    clip-path: polygon(0 0, 25% 0, 0 25%);
    transition: clip-path 0.45s ease;
}

.case-study-hero .left::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.68);
}

.case-study-hero .left img.bg {
    object-fit: cover;
    max-width: unset;
    height: 100%;
    width: 100%;
}

.case-study-hero .left img.logo {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 20px;
    z-index: 2;
    width: 90%;
    margin: 0 auto;

}

.case-study-hero .right {
    background-color: var(--bg-light-blue);
}

.case-study-hero .right .heading {
    padding: 60px 5%;
}

.case-study-hero .right .heading h1 {
    font-size: var(--font-size-36) !important;
    text-align: center;
}

.case-study-hero .right .stats {
    background-color: var(--light-green);
    padding: 60px;
    display: flex;
    gap: 40px;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
}

.case-study-hero .right .stats .stat-num {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.case-study-hero .right .stats svg {
    color: var(--blue);
    height: var(--font-size-120);
    width: auto;
}

.case-study-hero .right .stats p.stat {
    font-size: var(--font-size-120);
    font-family: Inter, sans-serif;
    color: var(--blue);
    font-weight: 600;
    display: flex;
    align-items: center;
    padding: 0;
    line-height: 1;
}

.case-study-hero .right .stats p.stat-text {
    color: var(--primary-font-color);
    font-family: var(--font-heading), sans-serif;
    font-size: var(--font-size-25);
    font-weight: 700;
    line-height: 150%;
    text-transform: capitalize;
}

.case-study-hero .right .stats .stat-left .stat-text {
    text-align: right;
}

.case-study-hero .right .stats .stat-right .stat-text {
    text-align: left;
}

@media screen and (min-width: 981px) {
    .case-study-hero {
        flex-direction: row;
    }

    .case-study-hero .left {
        max-height: unset;
        width: 30%;
    }

    .case-study-hero .right {
        width: 70%;
    }

    .case-study-hero .right .heading h1 {
        max-width: 750px;
        text-align: left;
    }

    .case-study-hero .right .stats {
        padding: 5% 15%;
    }

    .case-study-hero .right .stats .stat-num {
        justify-content: unset;
    }
}

@media screen and (min-width: 768px) {
    .case-study-hero .right .heading {
        padding: 120px 60px;
    }

    .case-study-hero .right .stats {
        align-items: unset;
        flex-direction: row;
    }
}


.case-study-boxes {
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 80px 0;
}

.case-study-box {
    border-radius: 50px;
    box-shadow: 0 4px 40px 0 rgba(0, 0, 0, 0.16);
    flex: 1;
    padding: 40px 20px;
    position: relative;
    min-height: 600px;
}

.case-study-box img.logo {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 90%;
}

.case-study-box:first-child {
    background-color: var(--bg-light);
}

/*noinspection ALL*/
.case-study-box:last-child {
    background-image: url("/wp-content/uploads/slider-background-dekstop.gif");
}

.case-study-box .about-accordion .accordion-item button {
    padding: 20px 50px 20px 0;
}

.case-study-box h3 {
    padding-right: 40px;
    margin-bottom: 20px;
    padding-bottom: 0;
}

.case-study-box h3:after {
    content: "5";
    font-family: "ETmodules", serif;
    background: transparent;
    color: var(--primary-font-color);
    display: flex;
    align-items: center;
    justify-content: center;
    float: right;
    margin-left: 5px;
    font-size: 35px;
    border-radius: 50%;
    height: 40px;
    width: 40px;
    position: absolute;
    right: 2%;
    top: 50%;
    transform: translateY(-50%);
}

.case-study-box .text-arrow-container {
    position: relative;
}

.case-study-challenge, .case-study-solution {
    flex: 1;
    position: relative;
    min-height: 600px;

}

.case-study-solution {
    border-top: 1px solid var(--primary-font-color);
    padding: 20px;

}

.case-study-solution .about-accordion .accordion-item button {
    padding: 20px 60px 20px 0;
}

.case-study-challenge {
    display: flex;
    gap: 40px;
    flex-direction: column-reverse;
    align-items: center;
    padding-bottom: 20px;
}

.case-study-boxes.boxes-lower {
    gap: 30px;
}

.case-study-boxes h2, .case-study-result h2 {
    text-align: left;
    font-size: var(--font-size-36) !important;
    margin-bottom: 40px;
}

.case-study-challenge img.ladder {
    max-width: 30%;
    height: auto;
    object-fit: contain;
}

.case-study-result {
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: var(--bg-light-blue);
}

.case-study-result .left {
    flex: 4;
}
.case-study-result .right {
    flex: 5;
}
.case-study-result .left {
    padding: 5% 1% 5% 5%;

}

.case-study-result .right {
    position: relative;
    min-height: 350px;
    display: flex;
    justify-content: space-between;
    align-items: start;
    padding: 5%;
}

.case-study-result .right .stat-left, .case-study-result .right .stat-right {
    /*position: absolute;*/
    top: 15%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.case-study-result .right .stat-left {
    left: 5%;
}

.case-study-result .right .stat-right {
    right: 5%;
}

.case-study-result .right .stat-left .stat-num {
    display: flex;
}
.case-study-result .right img {
    position: absolute;
    right: 0;
    max-height: 100%;
    top: 50%;
    transform: translateY(-50%);
    max-width: 68%;
}
.case-study-result .right svg {
    color: var(--blue);
    height: var(--font-size-60);
    width: auto;
}

.case-study-result .right p.stat {
    font-size: var(--font-size-60);
    font-family: Inter, sans-serif;
    color: var(--blue);
    font-weight: 600;
    display: flex;
    align-items: center;
    padding: 0;
    line-height: 1;
}
.touchpoint.case-study-result .right p.stat {
    font-size: var(--font-size-32);
}

.case-study-result .right p.stat-text {
    color: var(--primary-font-color);
    font-family: var(--font-heading), sans-serif;
    font-size: var(--font-size-16);
    font-weight: 700;
    line-height: 150%;
    text-transform: capitalize;
}

@media screen and (min-width: 600px) {
    .case-study-challenge {
        flex-direction: row;
        gap: 20px;
        padding: clamp(64px, 6vw, 96px) clamp(64px, 6vw, 96px) 0;
    }
    .case-study-result .right p.stat-text {
        font-size: var(--font-size-20);
    }
    .case-study-box {
        padding: clamp(64px, 6vw, 96px);
    }
    .case-study-solution {
        padding: clamp(64px, 6vw, 96px) clamp(64px, 6vw, 96px) 0;
    }
}

@media screen and (min-width: 981px) {
    .case-study-boxes, .case-study-result {
        flex-direction: row;
    }

    .case-study-boxes.boxes-lower {
        gap: 0;
    }

    .case-study-challenge {
        border-right: 1px solid var(--primary-font-color);
        padding: clamp(64px, 6vw, 96px) clamp(64px, 6vw, 96px) 0 0;
    }

    .case-study-challenge, .case-study-solution {
        border-top: 1px solid var(--primary-font-color);
    }
    .case-study-result .right p.stat-text {
        font-size: var(--font-size-16);
    }
    .case-study-result .right {
        min-height: 500px;
    }
}
@media screen and (min-width: 1440px) {
    .case-study-result .right p.stat-text {
        font-size: var(--font-size-20);
    }
}

/* Contact us form */
.contact-us-form .ff-el-input--content input, .contact-us-form .ff-el-input--content textarea {
    border: none;
    border-radius: 27px;

}

.contact-us-form .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label:after {
    color: var(--primary-font-color);
    content: "*";
    margin-left: 0;
    font-size: var(--font-size-20);
}

.contact-us-form .btn {
    border: none;
    cursor: pointer;
    max-width: 200px;
    width: 100%;
}

/* Contact us form END */

/* PRICING PAGE */
.pricing-3up {
    width: 80%;
    margin: 0 auto;
    max-width: 1080px;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 40px;
}

.price-card {
    border-radius: 8px;
    background-color: var(--bg-light);
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.16);
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
}

.price-card > div {
    padding: 20px;
}

.price-card .mint {
    background-color: var(--light-green);
}

.price-card .lime {
    background-color: var(--green);
}

.price-top h3, .price-divider .plus {
    text-align: center;
    font-family: var(--font-heading), serif;
    font-size: var(--font-size-16);
    font-weight: 700;
    line-height: 25px;
}

.price-top.darkhead {
    background: var(--brand-gradient);
    padding: 10px;
}

.price-top.darkhead h3 {
    padding: 0;
}

.price-card.dark {
    background-color: var(--blue);
    color: var(--secondary-font-color);
}

.price-card.dark p {
    color: var(--secondary-font-color);
}

.price-card .btn {
    margin: auto auto 0;
}

.price-card .starting .price {
    font-size: var(--font-size-36);
    font-weight: 700;
    margin-left: 10px;
}

.price-card p {
    text-align: center;
}

.price-card .dark-sub {
    text-align: center;
    font-family: var(--font-heading), serif;
    font-size: var(--font-size-25);
    font-weight: 700;
    line-height: 30px;
    padding: 40px 20px !important;

}

.price-card ul {
    padding: 20px 40px;
    list-style: none;
}

.price-card ul li {
    position: relative;
    padding-left: 30px;
    margin: 12px 0;
    line-height: 1.4;
}

.price-card ul li::before {
    content: "";
    position: absolute;
    left: 0;
    width: 20px;
    height: 20px;
    /*noinspection CssUnknownTarget*/
    background-image: url("/wp-content/uploads/blue-check.webp");
    background-repeat: no-repeat;
    background-position: center;
}

.price-card.dark ul li::before {
    /*noinspection CssUnknownTarget*/
    background-image: url("/wp-content/uploads/green-check.webp");
}

@media screen and (min-width: 981px) {
    .pricing-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


.table-card {
    background: var(--bg-light);
    text-align: center;
    transform: translateY(0);
    opacity: 1;
    transition: transform .45s ease, opacity .35s ease;
}

.table-card.bg-lightblue {
    background-color: var(--bg-light-blue);
    padding: 80px 0;
    margin-bottom: 80px;
}

.table-card .comparison {
    overflow: scroll;
    font-size: var(--font-size-14);
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.16);
}

.table-card .comparison tr td:first-child, .table-card .comparison tr th:first-child {
    text-align: left;
}

.table-card .comparison thead th {
    font-weight: 700;
    padding: 16px 5px;
    background: var(--bg-light-blue);
    text-align: center;
}

.table-card .comparison tbody td {
    padding: 16px 5px;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    vertical-align: middle;
    text-align: center;
}

.table-card .comparison tbody tr:last-child td {
    border-bottom: none;
}

.table-card .check {
    display: inline-block;
    width: 18px;
    height: 18px;
    /*noinspection CssUnknownTarget*/
    background-image: url("/wp-content/uploads/blue-check.webp");
    background-repeat: no-repeat;
    background-position: center;
}

.table-card .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


.features-compare {
    position: relative;
    margin: 80px auto;
}

.features-compare__inner {
    position: relative;
    max-height: 350px;
    overflow: hidden;
    transition: max-height .6s cubic-bezier(.4, 0, .2, 1),
    padding-bottom .4s ease;

    padding-bottom: 60px;
}

.features-compare__inner::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    opacity: 1;
    transition: opacity .35s ease;
}

.features-compare__inner.is-expanded {
    max-height: unset;
    padding-bottom: 0;
}

.features-compare__inner.is-expanded::after {
    /*display: none;*/
    opacity: 0;
}

.features-compare__actions {
    display: flex;
    justify-content: center;
    margin-top: 18px;
}

.features-compare__inner:not(.is-expanded) .table-card:nth-child(2) {
    opacity: .35;
}

@media screen and (min-width: 375px) {
    .features-compare {
        padding: 0 10px;
    }

    .table-card .comparison {
        border-radius: 8px;
        width: 94% !important;
        margin: 40px 3% !important;
    }
}

@media screen and (min-width: 425px) {
    .features-compare {
        width: 90%;
        padding: 0;
    }
}

@media screen and (min-width: 981px) {

    .table-card .comparison {
        font-size: var(--font-size-18);
    }

    .table-card .comparison thead th {
        font-weight: 700;
        padding: 16px 18px;
    }

    .table-card .comparison tbody td {
        padding: 14px 18px;
    }

}

/* PRICING PAGE END */

/* PORTFOLIO PAGE */
.portfolio-categories a {
    color: var(--primary-font-color);
    font-size: var(--font-size-16);
}
.portfolio-categories a:hover {
    font-weight: bold;
}
.eyebrow.logo {
    text-transform: capitalize;
    color: var(--blue);
}

.portfolio-font {
    display: flex;
    flex-direction: column;
    gap: var(--font-size-40);
    justify-content: center;
}

.portfolio-font p {
    color: var(--blue);
    padding: 0;
    line-height: 100%;
}

.portfolio-font .weight {
    font-size: var(--font-size-25);
    text-transform: uppercase;
    text-align: right;
}

.portfolio-font .family {
    font-size: var(--font-size-60);
    text-transform: uppercase;
    letter-spacing: 2.56px;
}

.portfolio-font .family, .portfolio-font .usage, .portfolio-font .uppercase {
    text-transform: uppercase;
}

.portfolio-font .family, .portfolio-font .uppercase, .portfolio-font .lowercase {
    padding-bottom: 20px;
}

.portfolio-font .usage {
    padding-bottom: 40px;
}

.portfolio-font .lowercase {
    text-transform: lowercase;
}

.portfolio-font .usage, .portfolio-font .uppercase, .portfolio-font .lowercase {
    color: var(--primary-font-color);
}


.portfolio-font.facility-experts .left-col p {
    font-family: Poppins, sans-serif;
}

.portfolio-font.facility-experts .left-col .weight, .portfolio-font.facility-experts .left-col .family {
    font-weight: 700;
}

.portfolio-font.facility-experts .right-col p {
    font-family: Open-sans, sans-serif;
}

.portfolio-font.facility-experts .right-col .weight, .portfolio-font.facility-experts .right-col .family {
    font-weight: 600;
}


.portfolio-font.drone-patrol .left-col p {
    font-family: Orbitron, sans-serif;
}

.portfolio-font.drone-patrol .left-col .weight, .portfolio-font.drone-patrol .left-col .family {
    font-weight: 700;
}

.portfolio-font.drone-patrol .right-col p {
    font-family: Inter, sans-serif;
}

.portfolio-font.drone-patrol .right-col .weight, .portfolio-font.drone-patrol .right-col .family {
    font-weight: 400;
}

.portfolio-font.wp-services .family {
    font-size: 30px;
}

.portfolio-font.wp-services .left-col p {
    font-family: "Exo 2", sans-serif;
}

.portfolio-font.wp-services .left-col .weight, .portfolio-font.wp-services .left-col .family {
    font-weight: 700;
}

.portfolio-font.wp-services .right-col p {
    font-family: Montserrat, sans-serif;
}

.portfolio-font.wp-services .right-col .weight, .portfolio-font.wp-services .right-col .family {
    font-weight: 400;
}


.portfolio-font.mobilepro .left-col .family {
    font-size: var(--font-size-32);
}

.portfolio-font.mobilepro .left-col p {
    font-family: 'MuseoModerno', sans-serif;
}

.portfolio-font.mobilepro .left-col .weight, .portfolio-font.mobilepro .left-col .family {
    font-weight: 700;
}

.portfolio-font.mobilepro .right-col p {
    font-family: Inter, sans-serif;
}

.portfolio-font.mobilepro .right-col .weight, .portfolio-font.mobilepro .right-col .family {
    font-weight: 500;
}


@media screen and (min-width: 600px) {
    .portfolio-font {
        flex-direction: row;
    }
}

@media screen and (min-width: 1440px) {
    .portfolio-font.wp-services .family {
        font-size: var(--font-size-60);
    }
}

.portfolio-buttons {
    display: flex;
    gap: 20px;
    flex-direction: column;
}

.portfolio-buttons > div {
    display: flex;
    gap: 20px;
    align-items: center;

}

.portfolio-buttons.facility-experts > div {
    max-width: 268px;
    width: 100%;
}

.portfolio-buttons.facility-experts a {
    max-width: 268px;
    width: 100%;
    height: 52px;
    border-radius: 50px;

    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}



.portfolio-buttons.facility-experts .primary a {
    background: #00AEEF;
    color: #fff;
}

.portfolio-buttons.facility-experts .secondary a {
    border: 1px solid #003AF8;
    color: #000;
}
.portfolio-buttons.facility-experts a:hover {
    background: #003AF8;
    box-shadow: 0 6px 20px rgb(0 0 0 / .15);
    transform: translateX(-8px) scale(1.02);
    color: #fff;
}

.portfolio-buttons.drone-patrol .primary {
    max-width: 229px;
    width: 100%;
}

.portfolio-buttons.drone-patrol .secondary {
    max-width: 340px;
    width: 100%;
}

.portfolio-buttons.drone-patrol a {
    position: relative;
    overflow: hidden;
    padding: 15px 80px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    z-index: 1;
    display: inline-block;
    text-align: center;
    transition: color .3s ease;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 500;
    width: 100%;
}

.portfolio-buttons.drone-patrol .secondary a:hover {
    color: #d9d9d9;;
}

.portfolio-buttons.drone-patrol .primary a {
    background: #131313;
    border: 1px solid #008ffb;
    color: #d9d9d9;
}

.portfolio-buttons.drone-patrol .secondary a {
    border: 1px solid #131313;
    color: #000;
    background: #d9d9d9;;
}

.portfolio-buttons.drone-patrol .primary .btn-effect-header {
    background: linear-gradient(90deg, #008ffb -25.8%, #008ffb 35.98%, #008ffb 109.97%);
}

.portfolio-buttons.drone-patrol .secondary .btn-effect-header {
    background: linear-gradient(90deg, #2c3033 -25.8%, #2c3033 35.98%, #2c3033 109.97%);
}

.portfolio-buttons.drone-patrol .animated-btn a:hover .btn-effect {
    animation: moveUpAndExpand 0.5s forwards;
}

.portfolio-buttons.drone-patrol .animated-btn a.animate .btn-effect {
    animation: moveDownAndShrink 0.5s forwards;
}

.portfolio-buttons.drone-patrol .btn-effect {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translate(-50%, 50%) scale(0.5);
    height: 20px;
    border-radius: 50%;
    z-index: -1;
    transition: transform 0.4s ease, border-radius 0.4s ease;
}

@keyframes moveUpAndExpand {
    0% {
        transform: translate(-50%, 50%) scale(0.5);
        border-radius: 50%;
        width: 20px;
    }
    50% {
        transform: translate(-50%, -25%) scale(3);
        border-radius: 50%;
        width: 20px;
    }
    100% {
        transform: translate(-50%, -50%) scale(17);
        border-radius: 0%;
        width: 30px;
    }
}

@keyframes moveDownAndShrink {
    0% {
        transform: translate(-50%, -50%) scale(17);
        border-radius: 0%;
        width: 30px;
    }
    50% {
        transform: translate(-50%, -25%) scale(3);
        border-radius: 50%;
        width: 20px;
    }
    100% {
        transform: translate(-50%, 50%) scale(0.5);
        border-radius: 50%;
        width: 20px;
    }
}


.portfolio-buttons.wp-services > div {
    max-width: 262px;
    width: 100%;
}

.portfolio-buttons.wp-services a {
    max-width: 268px;
    width: 100%;
    height: 52px;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 20px;
}

.portfolio-buttons.wp-services .primary a {
    background: #00AEEF;
    color: #fff;
    background: linear-gradient(174deg, #64D1FF -31.96%, #5FCEB8 121.12%);
}

.portfolio-buttons.wp-services .secondary a {
    border: 1px solid #5FCEB8;
    color: #000;
}


.portfolio-buttons.guard-training > div {
    max-width: 186px;
    width: 100%;
}

.portfolio-buttons.guard-training a {
    max-width: 186px;
    width: 100%;
    height: 52px;
    border-radius: 5px;
    color: #FFF;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
}

.portfolio-buttons.guard-training .primary a {
    color: #fff;
    background: #0B57D0;
}

.portfolio-buttons.guard-training .secondary a {
    background-color: #04002E;
}


.portfolio-buttons.mobilepro > div {
    max-width: 100px;
    width: 100%;
}

.portfolio-buttons.mobilepro a {
    max-width: 100px;
    width: 100%;
    height: 52px;
    border-radius: 8px;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.08);
}

.portfolio-buttons.mobilepro .primary a {
    color: #fff;
    background: #3E8436;
}

.portfolio-buttons.mobilepro .secondary a {
    color: #3E8436;
    background-color: #fff;
}


.portfolio-colors {
    display: flex;
    gap: 20px;
}

.portfolio-colors > div {
    width: 127px;
    height: 70px;
}

.portfolio-colors.facility-experts > div:nth-child(1) {
    background-color: #00AEEF;
}

.portfolio-colors.facility-experts > div:nth-child(2) {
    background-color: #151F7F;
}

.portfolio-colors.facility-experts > div:nth-child(3) {
    background-color: #FFB300;
}

.portfolio-colors.facility-experts > div:nth-child(4) {
    background-color: #4CAF50;
}

.portfolio-colors.facility-experts > div:nth-child(5) {
    background-color: #34495E;
}


.portfolio-colors.drone-patrol > div:nth-child(1) {
    background-color: #486BF1;
}

.portfolio-colors.drone-patrol > div:nth-child(2) {
    background-color: #000000;
}

.portfolio-colors.drone-patrol > div:nth-child(3) {
    background-color: #FFFFFF;
    border: 1px solid #000;
}

.portfolio-colors.drone-patrol > div:nth-child(4) {
    background-color: #2C3033;
}

.portfolio-colors.wp-services > div:nth-child(1) {
    background-color: #64D1FF;
}

.portfolio-colors.wp-services > div:nth-child(2) {
    background-color: #5FCEB8;
}

.portfolio-colors.wp-services > div:nth-child(3) {
    background: linear-gradient(180deg, #64D1FF -22.5%, rgba(95, 206, 184, 0.74) 160%);
}

.portfolio-colors.wp-services > div:nth-child(4) {
    background-color: #2C3E50;
}

.portfolio-colors.guard-training > div:nth-child(1) {
    background-color: #0B57D0;
}

.portfolio-colors.guard-training > div:nth-child(2) {
    background-color: #04002E;
}

.portfolio-colors.guard-training > div:nth-child(3) {
    background-color: #EFF0F3;
}

.portfolio-colors.guard-training > div:nth-child(4) {
    border: 1px solid #000;
    background: #FFF;
}

.portfolio-colors.mobilepro > div:nth-child(1) {
    background-color: #3E8436;
}

.portfolio-colors.mobilepro > div:nth-child(2) {
    background-color: #000000;
}

.portfolio-colors.mobilepro > div:nth-child(3) {
    border: 1px solid #000;
    background: #FFF;
}

@media screen and (min-width: 600px) {
    .portfolio-buttons {
        flex-direction: row;
    }

    .portfolio-buttons > div {
        display: unset;

    }

    .portfolio-buttons > div a {
        margin-bottom: 20px;
    }
}


.portfolio-stat {
    display: flex;
    margin-bottom: 10px;
    justify-content: center;
}

.portfolio-stat svg, .portfolio-stat p {
    color: var(--light-green);

}

.portfolio-stat svg {
    height: var(--font-size-120);
}

.portfolio-stat p {
    font-size: var(--font-size-120);
    font-weight: 600;
    font-family: Inter, sans-serif;
    align-items: center;
    padding: 0;
    line-height: 1;
}

.portfolio-stat-text {
    font-size: var(--font-size-25);
    text-align: center;
    color: var(--secondary-font-color);
}

/* PORTFOLIO PAGE END */

.subscription-form {
    max-width: 480px;
    margin: 20px auto;
}

.subscription-form .ff-el-input--content input {
    border-radius: 27px;
}

.subscription-form button {
    width: 100%;
    max-width: unset;
}

.linkedin-btn {
    margin: 20px auto;
    justify-content: space-between;
    max-width: 200px;
}

.linkedin-btn:hover {
    background-color: var(--light-green);
}

.linkedin-btn svg {
    margin-left: 5px;
}


/* BLOG POSTS */
.blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 26px;
}

.blog-card {
    display: block;
    text-decoration: none;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
    background: var(--bg-light);
}
.blog-card:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, .30);
}
.blog-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
}

.blog-card .body {
    padding: 16px 16px 18px;
}

.blog-card .cat {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .65;
    margin: 0 0 6px;
}

.blog-card h3 {
    margin: 0 0 12px;
    line-height: 1.25;
}

.blog-card .meta {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 12px;
    opacity: .7;
    margin: 0;
}
.blog-card .author {
    font-weight: bold;
}
.blog-card .avatar {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    object-fit: cover;
    flex: 0 0 auto;
}
@media (min-width: 768px) {
    .blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 981px) {
    .blog-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}




.top-row{
    display:grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 50px;
    align-items:start;
}

/* Latest card */
.latest-card{
    display:block;
    text-decoration:none;
    border-radius: 14px;
    overflow:hidden;
    background:#fff;
    box-shadow: 0 10px 25px rgba(0,0,0,.08);
}
.latest-card:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, .30);
}
.latest-card > img{
    width:100%;
    /*height: 320px;*/
    object-fit:cover;
    display:block;
}
.latest-body{ padding: 18px; }
.kicker{
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 700;
    opacity: .8;
    margin: 0 0 8px;
}
.latest-title{
    margin: 0 0 14px;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 800;
}
.meta{
    display:flex;
    gap: 10px;
    align-items:center;
    font-size: 12px;
    opacity: .75;
    margin: 0;
}
.avatar{
    width: 22px;
    height: 22px;
    border-radius: 999px;
    object-fit: cover;
    flex: 0 0 auto;
}

/* Popular list */
.popular-heading{
    margin: 0 0 12px;
    font-size: var(--font-size-25);
    font-weight: 800;
}
.popular-item {
    padding: 14px 0;
    border-bottom: 1px solid rgba(0,0,0,.08);
}
.popular-item:hover {
    transform: scale(1.05);

}
.popular-item:last-child{ border-bottom: 0; }
.popular-kicker{
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    display:flex;
    gap: 10px;
    align-items:center;
    margin: 0 0 6px;
    opacity: .9;
}
.popular-kicker .date{ opacity: .65; font-weight: 600; }
.popular-title{
    margin: 0;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 700;
}
.popular-link{ text-decoration:none; display:block; }

/* Bottom grid */
.bottom-grid{
    margin-top: 40px;
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
}
.mini-card{
    display:block;
    text-decoration:none;
    border-radius: 12px;
    overflow:hidden;
    background:#fff;
    box-shadow: 0 10px 25px rgba(0,0,0,.08);
}
.mini-card:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, .30);
}

.mini-card > img{
    width:100%;
    height: 240px;
    object-fit:cover;
    display:block;
}
.mini-body{ padding: 16px; }
.mini-title{
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 800;
}

@media (max-width: 980px){
    .top-row{ grid-template-columns: 1fr; gap: 28px; }
    .bottom-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px){
    .bottom-grid{ grid-template-columns: 1fr; }
}


/* PORTFOLIO PAGE */

 .portfolio-grid{
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 30px;
 }
.portfolio-card{
    display: block;
    text-decoration: none;
}
.portfolio-card img{
    width: 100%;
    aspect-ratio: 506 / 363;
    object-fit: cover;
    object-position: center;
    display: block;
}
.portfolio-card h2{ margin: 14px 0 8px; font-size: var(--font-size-32) !important; text-align: left}
.portfolio-card .portfolio-meta{ margin: 0; opacity: 0.8; }

@media (max-width: 767px){
    .portfolio-grid{ grid-template-columns: 1fr; }
}

/* --- Skeleton --- */
.sk-card{
    border-radius: 10px;
    overflow: hidden;
}
.sk-img{
    width: 100%;
    aspect-ratio: 506 / 363;
}
.sk-line{
    height: 14px;
    margin-top: 14px;
    border-radius: 999px;
    width: 75%;
}
.sk-line.short{ width: 55%; margin-top: 10px; opacity: 0.9; }

.sk-img, .sk-line{
    background: linear-gradient(
            90deg,
            rgba(0,0,0,0.06),
            rgba(0,0,0,0.12),
            rgba(0,0,0,0.06)
    );
    background-size: 200% 100%;
    animation: shimmer 1.2s infinite linear;
}
@keyframes shimmer{
    0%{ background-position: 200% 0; }
    100%{ background-position: -200% 0; }
}


/* PORTFOLIO PAGE END */