/*
 Theme Name:   FJ Solutions Theme
 Theme URI:    https://generatepress.com
 Description:  FJ Solutions theme
 Author:       FJ Solutions
 Author URI:   https://www.fjsolutions.com
 Template:     generatepress
 Version:      2.0
*/

/* font-family: ADOBE typekit link */

:root {
    /* generatepress overwrites */
    --wp--preset--font-size--small: clamp(12px, 0.625vw, 14px);
    --wp--preset--font-size--medium: clamp(18px, 1.146vw, 22px);;
    --wp--preset--font-size--large: clamp(20px, 1.927vw, 37px);   
    --wp--preset--font-size--x-large: clamp(39px, 3.958vw, 76px); 
    --gp-slideout-width: 100%;

    --swiper-theme-color: var(--color-naranjo);
    --swiper-pagination-bottom: 8px !important;
    /* custom */
    --wrapper-width: 83.3vw;
    --border-radius: 15px;
    --color-naranjo: #E6745C;
    --color-azulejo: #262B3F;
    --color-black: #3F3F3F;
    --color-gray-light: #adadad;
    --bg-gray-light: #f6f6f6;
    --gradient-text: linear-gradient(90deg, #E6745C 0%, #C56483 100%);
    --gradient-fj: linear-gradient(90deg, #E6745C 0%, #C56483 100%);
    --gradient-bg-gray: linear-gradient(0deg, #F7F7F7 0%, #FFF 100%);      
    --gradient-bg-gray-lg: linear-gradient(174deg, #FFF 2.4%, #F7F7F8 59.88%, #F5F5F7 89.05%);    
}

* {
    box-sizing: border-box;
}

:last-child {
    margin-bottom: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 50px;
}
body {
    font-size: clamp(16px, 0.938vw, 18px);
    /**/
    text-wrap: balance;
    text-wrap: pretty;
    
}
body *:not(:is(h1, h2, h3, h4, h5, h6)) {
    letter-spacing: 0.5px;
}



/* GENERAL */
.relative {
    position: relative;
}
p {
    margin-bottom: 25px;
    /*line-height: clamp(1.5em, 1.3vw, 2em);*/
}
ul, ol{
    margin-left: 20px;
}
.lhn,
.line-auto { 
    line-height: normal;
}
.lh1{ line-height:1; }
.hidden{ display:none !important; }
.nowrap{ flex-wrap:nowrap; }

.border-radius{
    border-radius: var(--border-radius);
}

/* colors */
    .color-naranjo{ color: var(--color-naranjo); }
    .color-azulejo{ color: var(--color-azulejo); }
    .color-black{ color: var(--color-black); }
    .color-white{ color: #fff; }

    .gradient-text{
        background: var(--gradient-text);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .gradient-fj{
        background-image: var(--gradient-fj);
    }
    .gradient-gray,
    .gradient-fj-gray {    
        background-color: #FFF;
        background-image: var(--gradient-bg-gray);
        background-repeat: no-repeat;
        background-size: 100% 66px;  
        background-position: bottom; 
    }
    .gradient-gray-lg{
        background-image: var(--gradient-bg-gray-lg);
        background-size: 100%;  
    }

    .border-gray {
        border-color: #c4c4c4;
    }


.sticky-nav {    
    position: sticky;
    top: 0px;
    z-index: 999;
    
}

.shadow-box {
    /*filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));*/
}

.br-mobile-only br { display: none; }
.br-desktop-only br { display: block; }

.o-hidden {
    overflow: hidden;
}

.underline,
.underline > * {
    text-decoration: underline;
}

/* icons */
    .fjs-check-icon > li {
        font-size: 13px;
        position: relative;
        padding-left: 15px;
        margin-bottom: 10px;
        list-style-type: none;
    }

    .fjs-check-icon > li:before {
        content: ' ';
        display: inline-block;
        position: absolute;
        background: #9E9D9E url(/wp-content/uploads/2024/11/check-mark-black-outline.png) no-repeat;
        left: -20px;
        top: 1px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        text-align: center;
        color: white;
        background-size: 11px;
        background-position: center;
    }

    @media screen and (max-width: 1024px) {
        .fjs-check-icon {
            min-height: auto;
        }
    }


/* font-styles */
    .w500{
        font-weight: 500;
    }
    b, strong, .w600{
        font-weight: 600;
    }
    .bold, .w700 {
        font-weight: 700;
    }

/* font-sizes */
    h1, .h1 {
        font-size: clamp(51px, 4.9vw, 65px);        
        line-height: clamp(1.2, 1, 1);
        line-height: 1;
    }
    .size-lg {
        font-size: clamp(60px, 6.25vw, 120px);
        letter-spacing: -2px;
        line-height: 1;
    }
    .h1-lg {
        font-size: clamp(48px, 6.25vw, 120px);
    }

    h2, .h2 {
        font-size: clamp(36px, 2.865vw, 55px);
        line-height: 1.1;
    }
    h3, .h3 {
        font-size: clamp(24px, 1.458vw, 28px);
        /*line-height: 1em;*/
    }
    h4, .h4 { font-size: clamp(18px, 1.250vw, 24px); }
    h5, .h5 {
        font-size: clamp(17px, 1.042vw, 20px);
        line-height: 1;
    }

    .sub-heading-sm {
        font-size: clamp(30px, 2.358em, 40px);
    }

    .pre-text {
        font-size: 14px;
        letter-spacing: 1.2px;
        text-transform: uppercase;
    }

    .text-description {
        /**/
        font-size: clamp(16px, 1.2vw, 23px);
    }
    .font-8-16{ font-size: clamp(12px, 0.833vw, 16px);}
    .font-9-14{ font-size: clamp(12px, 0.729vw, 14px);}
    .font-25-41{ font-size: clamp(25px, 2.135vw, 41px);}
    .font-22-33{ font-size: clamp(22px, 1.719vw, 33px);}

/* SPACING */
    .section-space {
        padding-top: clamp(40px, 3.6455vw, 70px);
        padding-bottom: clamp(30px, 3.6455vw, 70px);
        padding-left: 20px;
        padding-right: 20px;
    }    

    hr{
        margin-bottom: 1.5rem;
        margin-top: 1.5rem;
    }
    .separator{
        margin: 0 20px;
    }
    .full-right{
        margin-right: calc((100svw - var(--wrapper-width)) / -2);
    }

    /* margins */
    .m-0 {
        margin: 0px !important;
    }
    .my-0{
        margin-bottom: 0;
        margin-top: 0;
    }
    .my-20{margin-bottom: 20px; margin-top: 20px;}
    .mt-auto{ margin-top: auto; }
    .mt-0{ margin-top:0; }
    .mt-10 {
        margin-top: 10px !important;
    }
    .mt-20 {
        margin-top: 20px !important;
    }
    .mt-30 {
        margin-top: 30px !important;
    }
    .mt-40 {
        margin-top: 40px !important;
    }
    .mt-60 {
        margin-top: 60px !important;
    }

    .mb-0 {
        margin-bottom: 0 !important;
    }
    .mb-5 {
        margin-bottom: 5px !important;
    }
    .mb-10 {
        margin-bottom: 10px !important;
    }
    .mb-15 {
        margin-bottom: 15px;
    }
    .mb-20 {
        margin-bottom: 20px !important;
    }
    .mb-30 {
        margin-bottom: 30px !important;
    }
    .mb-40 {
        margin-bottom: 40px !important;
    }
    .mb-60 {
        margin-bottom: 60px !important;
    }

    /* padding */
    .p-10 {
        padding: 10px !important;
    }
    .p-20 {
        padding: 20px !important;
    }
    .pb-0 {
        padding-bottom: 0px !important;
    }
    .pb-10 {
        padding-bottom: 10px !important;
    }
    .pb-20 {
        padding-bottom: 20px !important;
    }
    .pb-40 {
        padding-bottom: 40px !important;
    }
    .pb-60 {
        padding-bottom: 60px !important;
    }

    .pt-0 {
        padding-top: 0px !important;
    }
    .pt-20 {
        padding-top: 20px !important;
    }
    .pt-40 {
        padding-top: 40px !important;
    }
    .pt-60 {
        padding-top: 60px !important;
    }
    .px-0{
        padding-left: 0;
        padding-right: 0;
    }
    .px-20{
        padding-left: 20px;
        padding-right: 20px;
    }
    .py-0,
    .ptb-0 {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }
    .py-20{
        padding-top: 20px;
        padding-bottom: 20px;
    }    
    .py-40,
    .ptb-40 {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .justify-between{
        justify-content: space-between;
    }
    .justify-evenly{
        justify-content: space-evenly;
    }

    @media screen and (max-width: 767px){
        .full-right-mobile{
            margin-right: calc((100vw - var(--wrapper-width)) / -2);
        }
        .px-0-mobile{
            padding-left: 0;
            padding-right: 0;
        }
    }

/* CONTAINER */
@media screen and (min-width: 1024px) {
    .comments-area,
    .grid-container,
    .container-lg, 
    .container-sm, 
    .container-xs,
    .grid-container.grid-parent, 
    .site-header .inside-header{
        max-width: calc(var(--wrapper-width) + 40px);
        margin-left: auto;
        margin-right: auto;
    }
    .single-post #page.grid-container,
    .comments-area,
    .container-sm {
        max-width: calc(67.7vw + 40px);
    }
    .container-xs{ max-width: calc(41vw + 40px); }
}

/* 
NAV
*/

    #menu-new-menu .sub-menu {
        border-radius: 15px;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.30);
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .main-navigation .main-nav ul li a{
        line-height: normal;
    }
    .main-navigation .main-nav ul li.menu-button{ margin-left:20px; }
    .main-navigation .main-nav ul li.menu-button a{ 
        font-size:16px;
        color: #fff;
    }
    .main-navigation .main-nav ul li.menu-button a:hover{ 
        background:var(--color-black);
        color: #fff;
    }

    @media screen and (max-width: 978px) {
        .main-navigation .main-nav > ul{
            row-gap: 15px;
        }
        .slideout-navigation.do-overlay .slideout-exit {
            text-align: right;
        }
        #generate-slideout-menu.main-navigation .main-nav ul li a {
            font-size: 24px;            
        }
        #generate-slideout-menu.main-navigation .main-nav ul li span.dropdown-menu-toggle {
            color: var(--color-naranjo);
        }

        #generate-slideout-menu.main-navigation ul ul {
            background-color: unset;
        }
        #generate-slideout-menu.main-navigation .main-nav ul ul li a {
            font-size: 18px;
            font-weight: 400;
        }

        #generate-slideout-menu.do-overlay .slideout-menu li {
            
            text-align: left;
            /*margin-bottom: 10px;*/
            
        }
    }

/* BUTTONS */

    .main-navigation .main-nav ul li.menu-button a,
    .button,
    .wp-block-button:not(.link-plus) .wp-block-button__link,
    .gb-button {
        font-size: clamp(13.2px, 0.925vw, 18px);
        padding: 12px clamp(20px, 1.3025vw, 25px);        
        transition: .2s ease;
        text-transform: capitalize;
        /**/
        min-width: 140px;
        border-radius: 9999px;
    }
    .main-navigation .main-nav ul li.menu-button a,
    .button,
    .wp-block-button .wp-block-button__link:not(.has-background) {
        background: var(--gradient-fj);
    }
    
    .wp-block-button.button-sm .wp-block-button__link{
        padding-top: 7px;
        padding-bottom: 7px;
    }
    .wp-block-button.button-white .wp-block-button__link{
        background: #fff;
        color: var(--color-black);
    }

    .wp-block-button .wp-block-button__link:hover{
        /*background-size: 300% 100%;       */
        opacity: 0.9;
    }

    .wp-block-button.is-style-outline .wp-block-button__link{
        background: unset;
        padding: 10px 25px;
    }
    .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) {      
        color: var(--color-naranjo);
        color: var(--color-black);
        border: 2px solid var(--color-naranjo);        
    }

    .wp-block-button.is-style-outline .wp-block-button__link:hover {
        background: var(--gradient-fj);
        color: #fff;
    }

    /* .link-plus */
    .wp-block-button.link-plus .wp-block-button__link{
        font-size: 20px;
        height: 26px;
        width: 26px;
        padding: 0;
        border-radius: 50%;       
        line-height: 1;    
    }
    .wp-block-button.link-plus .wp-block-button__link:not(.has-background){
        background: var(--accent);
    }

    @media screen and (max-width: 767px){
        .wp-block-buttons > .wp-block-button.full-width-mobile{
            width: 100%;
        }
        .wp-block-buttons > .wp-block-button.full-width-mobile .wp-block-button__link{
            padding-top:5.5px;
            padding-bottom: 5.5px;
        }        
    }

/* FOOTER */
    .footer-container .footer-block {
        align-content: end;
    }
    .footer .ul-orange {
        margin-left: 8px;
    }

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

        .footer {
            background-position: 14vw 148vw;
            background-size: 100%;
        }
        .wp-block-social-links, .wp-block-social-links.has-normal-icon-size{
            font-size: 18px;
            justify-content: flex-start;
        }
    }

/* MODAL */
    .modal.gb-container {
        position: fixed;
        top: 0; left: 0;
        width: 100%;
        min-height: 100vh;
        background-color: rgba(31, 31, 31, 0.9);
        display: none;
        z-index: 99999;
        justify-content: center;
        align-items: center;
        animation: fadeIn 1s;
    }
    .modal-content {
        position: relative;
        width: 100%;
        padding: clamp(20px, 2.08vw, 40px);
        max-width: 67.7vw;
        height: 100%;
        line-height: normal;
        border-radius: var(--border-radius);
        background: #F9F9F9;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
        width: fit-content;
    }
    .modal-content .close-modal {
        position: absolute;
        right: 15px;
        top: 10px;
        color: #000;
        cursor: pointer;
        font-size: 25px;
        line-height: 1em;
        font-weight: 500;
    }
    .modal-content iframe{
        height: 80vh;
        border-radius: var(--border-radius);
    }
    @media screen and (min-width: 1024px) {
        .modal-content:has(iframe){
            max-width: 66vw;
        }
    }
    @media screen and (max-width: 767px) {
        .modal-content {
            margin-left: 20px;
            margin-right: 20px;
            max-width: none;
        }
        .modal-content .close-popup {
            right: 10px;
            top: 0;
        }
    }
    @keyframes fadeIn {
        0% { opacity: 0; }
        100% { opacity: 1; }
    }


/* FORMS */
    .gform-theme--foundation{
        --gf-local-bg-color: var(--color-naranjo);
        --gf-form-gap-y: 20px;
    }
    .gform_heading{
        display: none;
    }
    .gform_wrapper.gravity-theme .gfield_required {
        text-transform: capitalize;
        font-size: 12px;
    }

    .gform-theme--framework.gform-theme.gform_wrapper .gfield_description.validation_message {
        color: #c02b0a !important;
    }

    .gform-theme--foundation .gfield textarea,
    .gform-theme--framework.gform-theme.gform_wrapper  input {        
        border-radius: 16px;
        border: none;
        padding: 0 20px;
    }
    .gform-theme--foundation .gfield textarea{
        padding: 15px 20px;
        max-height: 100px;
    }

    .gform-theme--foundation.gform-theme--framework.gform-theme.gform_wrapper .gform_footer input[type="submit"],
    .single-post .post .klaviyo-form button {
        background: var(--color-naranjo);
        border-radius: 50px;
        font-weight: 500;
    }
    .gradient-fj .gform-theme--foundation.gform-theme--framework.gform-theme.gform_wrapper .gform_footer input[type="submit"]{
        background: var(--color-azulejo);
    }

    /* Loader outside box */
    /**/
        .gravity--newsletter {
            position: relative !important;
        }

        .gravity--newsletter .gform_footer {
            position: absolute;
            top: 0;
            right: 10px;
            margin: 0;
            margin-block-start: 0 !important;
            z-index: 1;
        }

        .gravity--newsletter input#gform_submit_button_1 {
            background: none;
            padding: 0;
            font-size: 1.25em;
        }

        .gravity--newsletter input#input_1_1 {
            background: none;
            color: #fff;
            border-radius: 15px;
            border: 1px solid #D8D8D8;
            text-align: left;
            font-size: 14px;
            padding-left: 20px;
            letter-spacing: 3px;
        }

/* Form Error Messages */
    .gform-theme--framework .gform_validation_errors,
    .gform_wrapper.gravity-theme .gform_validation_errors,
    .gform_wrapper.gravity-theme .gfield_description {
        background: var(--color-naranjo) !important;
        text-transform: initial;
        font-size: 13px;
    }

    h2.gform_submission_error.hide_summary,
    span.gform-icon.gform-icon--circle-error,
    .gfield_validation_message {
        color: #fff !important;
        border-color: #fff !important;
        letter-spacing: normal;        
        font-size: 13px;
    }

/* Klaviyo */
    /* footer newsletter */
    .fjs-newsletter{ max-width:410px; }
    .fjs-newsletter .needsclick[data-testid="form-row"]:has(button) {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
    }

    .fjs-newsletter input:-internal-autofill-selected {
        color-scheme: dark;
    }

    .klaviyo-form div[role="listbox"] {
        scrollbar-color: var(--accent) #f7f7f7;
    }

/**/
    .border-radius video,
    .video-round video {
        border-radius: var(--border-radius);
    }
    .aspect-ratio-3 video{ aspect-ratio: 3 !important;}
    .fit-cover{ height:100%; }
    .fit-cover video{ object-fit: cover; height:100%; }


/* 
SWIPER SLIDERS
*/
    .swiper-slide{ height: initial; }

    /* Gray boxes */
        .gray-boxes .swiper-slide{
            padding: 25px clamp(20px, 1.563vw, 30px); 
            padding-bottom: 15px;
            background: var(--bg-gray-light);
            border-radius: var(--border-radius);
            display: flex; flex-direction: column;
            gap: 10px;
        }
        .gray-boxes .swiper-slide > * {
            margin-bottom: 0;
        }
        .gray-boxes .swiper-slide .wp-block-buttons:not(:has(.link-plus)){
            margin-top: auto; 
        }
        .gray-boxes .swiper-slide :not(.wp-block-buttons) + figure{            
            margin-top: auto;    
        }
        .gray-boxes .link-plus{
            position: absolute;
            bottom: 20px; right: 20px;
        }

    /* Numbers */
        .fjs-numbers h5 {
            font-size: clamp(12px, 1.146vw, 22px);
            line-height: 1.15;
        }
        .fjs-numbers sup {
            font-size: 50%;
        }

    /* Testimonials */
        .testimonial-boxes div {
            cursor: grab;
        }
        .testimonial-boxes p {
            font-size: clamp(16px, 2.085vw, 24px);
            margin: 0;
            position: relative;
        }
        .testimonial-boxes p:before {
            content: '';
            width: 58px;
            height: 79px;
            z-index: -1;
            background: url('https://new.fjsolutions.com/wp-content/uploads/2024/10/fjs-open-quote.webp');
            background-size: contain;
            background-repeat: no-repeat;
            position: absolute;
            top: -20px;
            left: -20px;
        }
        .testimonial-boxes p sub {
            font-family: 'circular';
            color: #f1f1f1;
            font-size: 100px;
            bottom: 0;
            vertical-align: middle;
        }

    /* Advertising services */
        .swiper.fjs-dsg-services {
            position: relative;
            overflow: visible;
        }

        .swiper.fjs-dsg-services .swiper-button-next,
        .swiper.fjs-dsg-services .swiper-button-prev {            
            position: absolute;
            right: 0;
            top: -20%;
        }

        .swiper.fjs-dsg-services .swiper-button-prev {            
            left: inherit;
            right: 3%;
        }

        .swiper.fjs-dsg-services .swiper-button-next:after, 
        .swiper-rtl .swiper.fjs-dsg-services .swiper-button-prev:after,
        .swiper.fjs-dsg-services .swiper-button-prev:after, 
        .swiper.fjs-dsg-services .swiper-rtl .swiper-button-next:after {
            content: '→';
            color: #000;
            font-size: 1.5em;
        }

        .swiper.fjs-dsg-services .swiper-button-prev:after, .swiper.fjs-dsg-services .swiper-rtl .swiper-button-next:after {
            content: '←';
        }

        .swiper.fjs-dsg-services .swiper-slide hr {
            color: var(--accent);
        }

        .swiper.fjs-dsg-services .swiper-slide:hover {
            background-color: var(--accent);
            transition: .2s all;
            color: #fff;
        }

        .swiper.fjs-dsg-services .swiper-slide:hover .arrow-scale mark,
        .swiper.fjs-dsg-services .swiper-slide:hover hr {
            color: #fff;
        }

    /* Our team */
        .slide-staff .image-title,
        .slide-staff-reversed .image-title {
            width: 100%;
            height: 100%;
            padding: 20px;
            color: #fff;
            text-align: center;
            background-color: rgba(0, 0, 0, 0.5);
            opacity: 0;
            transition: 0.3s;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            flex-direction: column;
            border-radius: 15px;
            position: absolute;
        }
        .slide-staff .image-title h5,
        .slide-staff-reversed .image-title h5 {            
            font-size: clamp(20px, 1.823vw, 35px);
            margin: 0;
        }
        .slide-staff .image-title p,
        .slide-staff-reversed .image-title p {
            font-size: clamp(14px, .89vw, 17px);
        }
        .slide-staff .swiper-slide:hover .image-title,
        .slide-staff-reversed .swiper-slide:hover .image-title {
            opacity: 1;
        }
        .slide-staff .swiper-slide img:after {
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.75);
            z-index: 999;
        }

    /* Cases Study */
        .fjs-cases.swiper{
            padding-bottom: 1px;
            padding-left: 3px;
        }
        .fjs-cases .case-studies-box {
            position: absolute;
            box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.10);
            bottom: 0;
            left: 0px;
            /**/
            border-top: 1px solid var(--color-naranjo);
            background: rgba(255, 255, 255, 0.97);
            padding: 12px;
            border-radius: 0 0 20px 20px;
            width: 100%;
        }
        .fjs-cases .case-studies-box > p {
            margin-bottom: 0;
        }

    /* Latest Projects */
        .swiper.fjs-portfolio .wp-block-buttons{
            position: absolute;
            right: 30px; bottom: 30px;
            z-index: 100;
        }
        .swiper.fjs-portfolio .swiper-pagination.portfolio {
            bottom: 20px;
        }

    /* GSAP fjs cards  */
        .fjs-cards.swiper {
            width: clamp(200px, 20.835vw, 400px);
            height: clamp(200px, 20.835vw, 400px);
            padding: 0;
        }
        .fjs-cards .swiper-slide {
            display: grid;
            place-items: center;
            box-shadow: 0px 3.521px 3.521px 0px rgba(0, 0, 0, 0.25);
        }
        .fjs-cards p {
            margin: 0;
        }



/* Join Our Team Form */
.jobField .ginput_container_select {
    text-transform: none;
}

/* Careers Single */
    .careers-back-cta .wp-block-button {
        width: 100%;
    }

    .careers-back-cta .wp-block-button .wp-element-button {
        position: relative;
        padding: 10px 30px;
        color: #000;
    }

    .careers-back-cta .wp-block-button .wp-element-button:before {
        content: "←";
        font-size: 2em;
        position: absolute;
        top: 0;
        left: 10px;
        color: #e6745c;
    }

    .careers-back-cta .wp-block-button .wp-element-button:hover:before {
        color: #fff;
    }

    .post-index .careers-index-title {
        font-size: 14px;
        color: #000;
    }


/**/
.reviews-box .clutch-widget {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
}

.reviews-box .clutch-widget img {
    max-width: 125px;
}

/* Arrow Icon */
    .arrow-scale a {
        color: var(--contrast);
        text-decoration: underline;
    }
    .arrow-scale mark {
        display: inline-block;
        transform: rotate(315deg);
    }

    /**/
    .arrow-right{
        display: flex;
        align-items: center;
        gap: 5px;
    }
    .arrow-right mark{
        font-size: 150%;
        font-weight: 400;
    }



/* Logos Boxes */
    .marquee__content figure img,
    .partner-icons figure img,
    .clients-logos figure img {
        max-width: clamp(80px, 6.25vw, 120px);
        max-height: 64px;
        aspect-ratio: 3 / 2;
        object-fit: contain;
    }

/* Client logos marquee */
    .clients-logos{ padding-top:20px; display:flex; }
    .clients-logos figure img {
        max-width: clamp(100px, 7.813vw, 150px);
        opacity: .6;
        filter: grayscale(1);
    }
    .clients-logos figure img:hover {
        opacity: 1;
        transition: .2s ease-in-out;
    }
    .clients-logos-wrap{
        width: max-content;
        animation: clients-marquee 75s linear infinite;
    }
    .reverse-animation{
      animation-direction: reverse;
    }
    .reverse-animation .clients-logos{
        flex-direction: row-reverse;
    }

    @keyframes clients-marquee {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-50%);
      }
    }



/* Contact Us - World Section */
    .world-section ul {
        margin: 0 0 1em 1em;
    }

    .world-section ul li::marker,
    .ul-orange li::marker {
        color: #e6745c;
    }



/* BLOCK - Work With Us  */
    .how-we-work p:first-child {
        font-size: 1em;
        color: var(--accent);
        display: block;
        position: relative;
        line-height: normal;
    }

    .how-we-work p {
        font-size: 15px;
    }

/* BLOCK - Specialized Services */
    .services-block .wp-block-cover {
        position: relative;
        border-radius: 16px;
        max-height: 335px;
        max-width: 335px;
        flex-direction: column;
        justify-content: flex-end;
    }
    .services-block .wp-block-cover .wp-block-cover__inner-container {
        position: unset;
    }
    .services-block .wp-block-cover__inner-container h3 {
        position: absolute;
        top: 15px;
    }
    .services-block .wp-block-buttons > .wp-block-button{
        position: relative;
    }
    .services-block a.wp-block-button__link mark {
        display: inline-block;
        transform: rotate(315deg);
    }
    .services-block.services-bottom .wp-block-cover {
        min-height: clamp(150px, 11.75vw, 225px);
    }


/* FAQs */
    .schema-faq {        
        margin-left: 40px;
    }
    .schema-faq:not(:last-child){
        margin-bottom: 1.5em;
    }
    .schema-faq-section {
        padding: 15px 0;        
    }
    .schema-faq-section:not(:last-child){
        border-bottom: 1px solid var(--color-gray-light);
    }
    .schema-faq-section .schema-faq-question {
        font-size: clamp(18px, 1.458vw, 24px);
        font-weight: normal;
        cursor: pointer;
        position: relative;
        display: block;
    }
    .schema-faq-section .schema-faq-question:hover,
    .schema-faq-section.open .schema-faq-question{
        background: var(--gradient-text);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .schema-faq-section .schema-faq-question:before {
        content: '➜';
        font-size: 18px;
        line-height: 1;
        transition: all .5s;
        position: absolute; left: -35px;  top: 50%;
        transform: translateY(-50%);        
        -webkit-text-fill-color: var(--accent);
    }
    .schema-faq-section.open .schema-faq-question:before {
        transform: rotate(45deg);
    }

    .schema-faq-section .schema-faq-answer {
        display: none;
    }
    .schema-faq-section.open .schema-faq-answer {
        display: block;
    }
    .schema-faq-section .schema-faq-answer {
        display: none;
    }



/* BLOG */
    #blog-header{ padding-top:20px; }
    #blog-header h1{
        font-size: clamp(40px, 4.9vw, 65px);
    }
    #blog-header .wp-block-post-author__name {
        text-decoration: underline;
    }
    #blog-header .wp-block-post-author__avatar img,
    .author .wp-block-post-author img {
        border-radius: 100%;
    }

/* Posts Grid */
    .wp-block-post-template{
        row-gap: 30px;
    }
    .related-posts img {
        aspect-ratio: 40 / 21;
        object-fit: contain !important;
        border-radius: 15px;
        background-color: #efefef;
    }


/* BLOG - Single */

    .single-post .post-content{ line-height:1.7 }
    .single-post .post-content :is(h4, h5, h6){
        font-weight: 500;
    }
    .single-post .entry-content ol > li{
        margin-bottom: 10px;
    }

    .single-post .entry-content h2 {
        font-size: clamp(22px, 2.188vw, 42px);    
    }
    .single-post .entry-content h3 {
        font-size: clamp(18px, 1.98vw, 38px);
    }

    .single .post-content .wp-block-image {
        margin-bottom: 30px;
    }

    .single-post .blogpost-form {
        border-radius: var(--border-radius);
    }

    .single-post .podcast-audio .wp-block-audio audio {
        min-width: auto;
    }

    .single-post .podcast-audio .wp-block-audio audio::-webkit-media-controls-panel {
        background-color: #f7f7f7;
    }

    .single-post .podcast-audio .wp-block-audio audio::-webkit-media-controls-play-button {
        background-color: #f7f7f7;
        border-radius: 50%;
        border: 2px solid #e6745c;
    }

    .single-post .podcast-audio p {
        line-height: normal;
    }

    .single-post .podcast-audio p:first-child {
        font-size: 1.25em;
    }

    audio::-webkit-media-controls-current-time-display,
    audio::-webkit-media-controls-time-remaining-display {
        color: #E6745C;
    }

    /* Index */
        .index {
            background: #f7f7f7;
            padding: 20px;
            border-radius: var(--border-radius);
        }

        .index h6 {
            font-size: clamp(12px, .834vw, 16px);
            text-transform: uppercase;
            letter-spacing: 2px;
            color: #e7755d;
            font-weight: 700;
            margin: 0;
        }

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

        .index a:hover {
            color: #e7755d;
        }

        .index li {
            margin: 5px 0px;
        }


    .single-post .post-note,
    .post-note {
        padding: clamp(20px, 2.085vw, 40px);
        border-radius: var(--border-radius);
        background: #f7f7f7;
    }

    .single-post .post-note h4 {
        color: var(--accent);
        margin-bottom: 0;
    }

    .single-post .free-checklist-form {
        position: relative;
    }

    .single-post .free-checklist-form img {
        position: absolute;
        right: 0;
    }

    @media screen and (max-width: 1024px) {
        .single-post .free-checklist-form img {
            position: absolute;
            top: -10px;
            left: -10px;
            width: 90px !important;
        }

        .single-post .free-checklist-form h4 {
            margin-left: 20%;
        }
    }


    /* BLOG - Sticky Sidebar */
    .sticky-sidebar .gb-grid-column:has(.post-index):first-child {
        position: sticky;
        z-index: 999;
        top: clamp(70px, 5.21vw, 100px);
    }

    @media screen and (max-width: 767px) {
        .sticky-sidebar .gb-grid-column:has(.post-index):first-child {
            position: fixed;
            bottom: 20px;
            height: auto;
            left: 20px;
            right: 20px;
            padding: 0;
            width: auto;
            display: block;
            align-self: end;
            top: auto;
        }
    }

    .single-post .sticky-form,
    .sticky-form {
        padding: 20px;
        border-radius: var(--border-radius);
        border: 2px solid var(--color-naranjo);
        background: #F7F7F7;
    }

    .sticky-form:not(.single-post) {
        border: none;
    }

    .single-post .category-case-study .sticky-form,
    .sticky-form {
        text-align: left;
    }

    /* for careers - column reverse */
    .sticky-sidebar.row-reverse {
        flex-direction: row-reverse;
    }

    @media screen and (max-width: 1024px) {
        .sticky-sidebar .gb-grid-column:first-child {
            top: 50px;
        }

        .post-index h6 {
            margin-bottom: 0px;
            position: relative;
            cursor: pointer;
        }

        .post-index h6:after {
            border-style: solid;
            border-width: 3px 3px 0 0;
            border-color: #E7755D;
            content: '';
            display: inline-block;
            float: right;
            height: 12px;
            width: 12px;
            transform: rotate(135deg);
            vertical-align: middle;
        }

        .post-index h6.closed {
            margin-bottom: 20px;
        }

        .post-index ol,
        .post-index ul {
            display: none;
        }

        .post-index ol ol,
        .post-index ul ul {
            display: block;
        }
    }

/* StickyPin for Table of Contents */
    .form-pin-mobile {
        display: none;
    }

    @media screen and (max-width: 1024px) {
        .form-pin-mobile.open {
            display: block;
        }
    }

/* Author */
    .wp-block-post-author{
        align-items: center;
    }
    @media screen and (max-width: 767px){
        .wp-block-post-author{
            align-items: start;
        }
    }


/*Comments*/
    .comments-area{
        padding-left: 20px;
        padding-right: 20px;
    }
    .comments-title,
    #reply-title {
        font-size: 22px;
    }

    .comment-content {
        border: 0;
        padding: 0;
        padding-left: 60px;
    }

    .comment-content p {
        margin-bottom: 10px;
    }

    .comment .children {
        border: 0;
    }

    .comment-author-info {
        display: flex;
        gap: 20px;
        padding-top: 12px;
        align-items: center;
    }

    #respond {
        padding: 35px;
        background: #F9F9F9;
        border-radius: var(--border-radius);
    }

    .comment-form #author,
    .comment-form #email,
    .comment-form #url,
    .comment-form-comment textarea {
        background: #FFFFFF;
        border: 1px solid rgba(30, 30, 30, 0.4);
        border-radius: 4px;
        color: inherit;
        width: 100%;
    }

    .comment-form #author::placeholder,
    .comment-form #email::placeholder,
    .comment-form #url::placeholder,
    .comment-form-comment textarea::placeholder {
        text-transform: uppercase;
        font-size: 14px;
    }

    .comment-form>.form-submit {
        text-align: center;
    }

    .entry-meta.comment-metadata{
        font-size: 10px;
    }


    @media screen and (min-width: 767px) {
        #comments {
            max-width: calc(68% - 45px);
            width: 100%;
        }

        .comments-area {
            display: flex;
            justify-content: flex-end;
        }
    }


/**/
.box-rocket {
    position: absolute;
    bottom: 50%;
    right: -18%;
    z-index: 9;
}


/* Table Styles */
    .rate-table {
        border: 0px;
    }

    .rate-table th:is(:empty) {
        border-top-color: #fff;
        border-left-color: #fff;
        background: #fff;
    }

    .rate-table thead th {
        background: #f2ad9a;
    }

    .rate-table td {
        border-radius: 5px;
        background: #f7d4ca;
        border: 0px;
    }

/* GSAP - Timeline */
    .timeline-header {
        font-size: clamp(56px, 6.771vw, 130px);
        line-height: 1;
    }
    .timeline-container {
        position: relative;
        padding: 2rem 0;
        margin-top: 8rem;
    }

    .timeline-line {
        position: relative;
        height: 2px;
        background: none;
        top: 1px;
        border-top: 1px dotted var(--color-gray-light);
        width: 100%;
        margin: 2rem 0 0;
    }

    .timeline-progress {
        position: absolute;
        top: -1px;
        left: 0;
        height: 100%;
        width: 0;
        background-color: var(--color-naranjo);
        transform-origin: left center;
    }

    .timeline-logo {
        position: absolute;
        width: 20px;
        height: 20px;
        top: -10px;
        left: 0;
        z-index: 3;
    }

    .timeline-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        position: absolute;
    }

    .timeline-events {
        display: flex;
        justify-content: space-between;
        gap: 0rem;
        position: relative;
    }

    .timeline-wrapper .event {
        position: relative;
        opacity: 1;
        transition: opacity 0.3s, color 0.3s;
        padding: 0 5px;
        text-align: left;
        max-width: 150px;
    }

    .timeline-wrapper .event .year,
    .timeline-wrapper .event .event-dot {
        color: var(--color-gray-light);
        transition: color 0.3s, background-color 0.3s;
    }

    .timeline-wrapper .event p {
        font-size: 13px;
    }

    .timeline-wrapper .event.active {
        opacity: 1;
    }



    .timeline-wrapper .event-dot {
        width: 10px;
        height: 10px;
        background-color: #fff;
        border: 1px solid var(--color-gray-light);
        border-radius: 50%;
        position: absolute;
        top: -38px;
        left: 0;
        transition: background-color 0.3s;
    }

    .timeline-wrapper .event.active .event-dot {
        background-color: var(--accent);
        border-color: var(--accent);
    }

    .timeline-wrapper .event .year {
        font-size: clamp(25px, 1.56vw, 30px);;
        color: var(--color-gray-light);
        transition: color 0.3s;
        transform: rotate(270deg);
        position: absolute;
        top: -110px;
        left: -28px;
        min-width: 55px;
        line-height: 1; margin: 0;
    }
    .timeline-wrapper .event.active .year {
        color: var(--color-naranjo);
    }

    @media (max-width: 1024px) {

        .timeline-line {
            height: 100%;
            width: 0;
            position: absolute;
            left: 2rem;
            margin: 0;
            border-top: none;
        }

        .timeline-container {
            margin-top: 0;
            /*
            position: absolute;
            padding: 50% 0;
            
            top: 14.5rem;
            left: 3.97rem;
            */
            /**/
            display: none;
        }

        .timeline-events {
            flex-direction: column;
            padding-left: 2rem;
            padding-top: 2vw;
        }

        .timeline-wrapper .event {
            margin-bottom: 1.2rem;
            padding-left: 4.5rem;
            max-width: none;
            opacity: 1;
            transform: translateY(20px);
        }

        .timeline-wrapper .event::before {
            content: '';
            position: absolute;
            left: 2.76rem;
            top: 0.3rem;
            width: 0;
            height: calc(100% + 1.8rem);
            border-left: 1px dotted var(--color-gray-light);
            z-index: -1;
        }

        .timeline-wrapper .event:last-child::before {
            border-left: none;
            width: 1px;
            background-image: linear-gradient(to bottom,
                    var(--color-gray-light) 0%,
                    var(--color-gray-light) 20%,
                    transparent 50%);
            background-size: 1px 100%;
            background-position: center;
            background-repeat: repeat-y;
            mask-image: linear-gradient(to bottom, black 50%, transparent 50%);
            mask-size: 1px 2px;
            -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 50%);
            -webkit-mask-size: 1px 2px;
        }

        .timeline-wrapper .event .year {
            transform: none;
            top: -5px;
            left: -30px;
        }

        .timeline-wrapper .event-dot {
            left: 2.5rem;
            top: 0.2rem;
        }

        .timeline-progress {
            width: 2px;
            /*height: 0;*/
            background: linear-gradient(to bottom,
                    var(--color-naranjo) 0%,
                    var(--color-naranjo) calc(100% - 50px),
                    rgba(230, 116, 92, 0) 100%);
            /**/
            left: 12vw;
        }

        .timeline-logo {
            /*
            left: 2rem;
            top: 0;
            transform: none;
            */
            /**/
            left: 17.6vw;
            
        }

        .timeline-logo img {
            /*
            position: absolute;
            left: -2.6rem;
            top: -0.5rem;
            */
            /**/

            position: absolute;
            left: -30px;
            top: 12px;
            height: 20px;
            width: 20px;

        }

        .timeline-wrapper {
            /*
            min-height: auto;
            height: auto;
            */
        }
    }

/* BREAKPOINTS */
    .show-mobile, 
    .show-mobile-inline,
    .show-mobile-flex {
        display: none !important;
    }

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

        .show-mobile,
        .br-mobile-only br {
            display: block !important;
        }

        .hide-mobile,
        .br-desktop-only br {
            display: none !important;
        }

        .show-mobile-inline {
            display: inline-block !important;
        }
        .show-mobile-flex {
            display: flex !important;
        }

        .testimonial-boxes .testimonials.swiper-pagination {
            display: block;
        }

        /* Video Grid for Mobile */
        .video-grid-mb .gb-container {
            height: 215px;
            max-width: 250px;
        }

        .video-grid-mb figure,
        .video-grid-mb video {
            height: 100%;
            object-fit: cover;
        }


        .swiper.fjs-projects {
            padding: 20px 0px 0px 0px;
        }

        .swiper.fjs-dsg-services {
            overflow: hidden;
        }

        .swiper.fjs-dsg-services .swiper-slide .arrow-scale {
            text-align: left;
        }


        /* Contac Us - World Section */
        .world-section {
            background: none;
        }

        /* Results Video */
        .results-video {
            margin: 0px -20px 0px -20px;
        }
        .results-video video {
            border-radius: 0;
        }

        .box-rocket {
            bottom: 75%;
            right: -5%;
        }

        /* BLOG */
        .single-post .entry-content {
            padding: 0px 20px;
        }

    }


/* LP -- Magento to Shopify Migration Service */
    .text-vertical {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
    }
    .sbs-section li {
        font-size: clamp(16px, 3.5vw, 42px);
        line-height: clamp(35px, 5.825vw, 70px);
    }
    .sbs-section li strong {
        color: var(--color-naranjo);
    }

    .start-now a {
        content: "START MIGRATION NOW! →";
        position: absolute;
        top: 30%;
        color: #E6755D;
        
        font-size: clamp(10px, 1.085vw, 13px);
        font-weight: 700;
        line-height: normal;
        margin-left: 2%;
        letter-spacing: clamp(1.6px, 0.215vw, 2.6px);
        text-decoration: none;
    }

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

        .hide-bg-mobile {
            background-image: none;
        }

        .text-vertical {
            writing-mode: inherit;
            transform: none;
        }
    }

/* LP -- Google Analytics - Sticky Logo */
    .sticky-analytics-logo figure img {
        position: absolute;
        top: 30%;
        left: -11%;
        max-width: 150px;
    }

    @media screen and (max-width: 1024px) {
        .sticky-analytics-logo {
            margin-top: 20%;
        }
        .sticky-analytics-logo figure img {
            top: -40%;
            left: 30%;
        }
    }

/* 
NEW 11/2025 
*/

/* fix overflow? */
.no-sidebar .entry-content .alignfull{
    overflow: hidden;
}

/* hides next Section Reusable Block title */
.hide-next-titles + #our-team,
.hide-next-titles + #case-studies > .gb-container{
    padding-top: 0;
}

.page-book-a-meeting .hide-self,
.page-portfolio .hide-self,
.page-schedule-a-call .hide-self,
.hide-next-titles + #our-team > h2,
.hide-next-titles + #our-team > p,
.hide-next-titles + #case-studies > .gb-container > p,
.hide-next-titles + #case-studies > .gb-container > h2{
    display: none;
}



.post-password-form{
    text-align: center;
    padding: 5vw 0;
}