.elementor-kit-7{--e-global-color-primary:#212D69;--e-global-color-secondary:#3B50BC;--e-global-color-text:#272727;--e-global-color-accent:#3B50BC;--e-global-typography-primary-font-family:"Geologica";--e-global-typography-primary-font-weight:200;--e-global-typography-secondary-font-family:"Geologica";--e-global-typography-secondary-font-weight:200;--e-global-typography-text-font-family:"Geologica";--e-global-typography-text-font-size:20px;--e-global-typography-text-font-weight:200;--e-global-typography-accent-font-family:"Geologica";--e-global-typography-accent-font-weight:500;font-family:"Geologica", Geologica, Sans-serif;font-weight:200;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7 h1{font-size:151px;}.elementor-kit-7 h2{font-size:60px;}.elementor-kit-7 h3{font-size:40px;}.elementor-kit-7 h5{font-size:30px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-kit-7{--e-global-typography-text-font-size:18px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-7{--e-global-typography-text-font-size:16px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS */.interactive-block {
    display: grid !important;
    grid-template-columns: 1fr 2fr;
    gap: 160px;
}


.interactive-title {
    position: relative;
    overflow: hidden;

    cursor: pointer;

    display: flex !important;
    align-items: flex-start;
    gap: 40px;

    border-radius: 10px;

    opacity: 0.4;

    transition: opacity 0.6s ease !important;
}


.interactive-title::after {
    content: "";

    position: absolute;
    inset: 0;

    background: #212D69;

    transform: scaleX(0);
    transform-origin: left center;

    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);

    z-index: 0;
}


/* Keep title content above blue background */

.interactive-title .elementor-heading-title,
.interactive-title::before {
    position: relative;
    z-index: 1;
}

.interactive-title .elementor-heading-title {
    color: #272727 !important;

    transition:
        color 0.45s ease,
        letter-spacing 0.6s cubic-bezier(0.65, 0, 0.35, 1),
        transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}


/* =========================
   NUMBERS
========================= */

.interactive-title::before {
    content: "01";

    font-size: 18px;
    font-weight: 200;
    line-height: 1;

    color: #272727;

    min-width: 25px;

    transition:
        color 0.45s ease,
        transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.interactive-title:nth-child(2)::before {
    content: "02";
}
.interactive-title:nth-child(3)::before {
    content: "03";
}
.interactive-title:nth-child(4)::before {
    content: "04";
}


.interactive-title:hover,
.interactive-title.active {
    opacity: 1;
}
.interactive-title:hover::after,
.interactive-title.active::after {
    transform: scaleX(1);
}


.interactive-title:hover .elementor-heading-title,
.interactive-title.active .elementor-heading-title {
    color: #fff !important;

    letter-spacing: 0.02em;
}

.interactive-title:hover::before,
.interactive-title.active::before {
    color: #fff !important;
}


/* =========================
   CONTENT AREA
========================= */

.interactive-content {
    position: relative;
}

.interactive-content .content-1,
.interactive-content .content-2,
.interactive-content .content-3,
.interactive-content .content-4 {
    display: none !important;
}


/* Show active content */

.interactive-content .content-1.active,
.interactive-content .content-2.active,
.interactive-content .content-3.active,
.interactive-content .content-4.active {
    display: flex !important;

    animation: contentIn 0.6s ease forwards;
}


/* =========================
   CONTENT ANIMATION
========================= */

@keyframes contentIn {

    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

}
@media (max-width: 1220px) {

    .interactive-block {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 40px;
    }

    .interactive-titles {
        display: flex;
        flex-direction: column;
    }

}/* End custom CSS */