@tailwind base;
@tailwind components;
@tailwind utilities;
/* =========================================================
   Fanscreens Header / Navigation
   ========================================================= */
html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: "Jost", sans-serif;
}

.no-break {
    white-space: nowrap;
}

/* =========================================================
   Header
   ========================================================= */

.site-header {
    position: relative;
    z-index: 1000;
    width: 100%;
}

.site-navigation {
    position: relative;
    width: 100%;
    background: #ffffff;
    z-index: 1500;
    border-radius: 0px;
}

.site-navigation-container {
    width: 100%;
    max-width: 1500px;

    margin: 0 auto;

    padding-left: 32px;
    padding-right: 32px;
    border-radius: 0px;
}

.navigation-inner {
    position: relative;

    width: 100%;
    min-height: 90px;

    display: flex;
    align-items: center;

    min-width: 0;
}


/* =========================================================
   Logo
   ========================================================= */

.site-logo {
    display: inline-flex;
    align-items: center;

    flex-shrink: 0;

    text-decoration: none;
}

.site-logo img {
    display: block;

    width: auto;
    max-width: 190px;
    height: auto;
}


/* =========================================================
   Desktop Menu
   ========================================================= */

.desktop-menu {
    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    display: flex;
    align-items: center;

    min-width: 0;
}

.main-menu {
    display: flex;
    align-items: center;

    gap: 36px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.main-menu > li {
    position: relative;
}


/* =========================================================
   Main Menu Links
   ========================================================= */

.main-menu > li > a {
    position: relative;

    display: inline-flex;
    align-items: center;

    gap: 6px;

    padding: 12px 0;

    color: #111111;

    font-family: "Jost", sans-serif;
    font-size: 16px;
    font-weight: 500;

    line-height: 1.2;

    text-decoration: none;

    transition: color 0.2s ease;
}


/*
|--------------------------------------------------------------------------
| Blue vertical indicator
|--------------------------------------------------------------------------
|
| This creates the blue rectangle visible on the left side
| of the hovered navigation item.
|
*/

.main-menu > li > a::before {
    content: "";

    position: absolute;

    left: -11px;
    top: 50%;

    width: 3px;
    height: 18px;

    background: #159ed9;

    transform: translateY(-50%) scaleY(0);

    transform-origin: center;

    transition: transform 0.18s ease;
}


/*
|--------------------------------------------------------------------------
| Main menu hover
|--------------------------------------------------------------------------
*/

.main-menu > li > a:hover::before,
.main-menu > li:hover > a::before {
    transform: translateY(-50%) scaleY(1);
}

.main-menu > li > a:hover {
    color: #111111;
}


/* =========================================================
   Services Arrow
   ========================================================= */

.menu-caret {
    display: inline-block;

    font-size: 13px;
    line-height: 1;

    transform: translateY(-1px);
}


/* =========================================================
   Services Dropdown
   ========================================================= */

.has-dropdown {
    position: relative;
}

.submenu {
    position: absolute;

    top: calc(100% + 20px);
    left: 50%;

    width: 270px;

    margin: 0;
    padding: 17px 18px;

    transform:
        translateX(-50%)
        translateY(8px);

    background: #ffffff;

    list-style: none;

    box-shadow:
        0 4px 18px rgba(0, 0, 0, 0.08);

    border-radius: 0;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.18s ease,
        visibility 0.18s ease,
        transform 0.18s ease;
}


/*
|--------------------------------------------------------------------------
| Invisible bridge
|--------------------------------------------------------------------------
|
| Prevents the dropdown from disappearing while the mouse
| moves from "Services" down into the dropdown.
|
*/

.submenu::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    top: -20px;

    height: 20px;
}


/*
|--------------------------------------------------------------------------
| Show dropdown
|--------------------------------------------------------------------------
*/

.has-dropdown:hover > .submenu {
    opacity: 1;
    visibility: visible;

    transform:
        translateX(-50%)
        translateY(0);
}


/* =========================================================
   Dropdown Items
   ========================================================= */

.submenu li {
    position: relative;
}

.submenu li:not(:last-child) {
    border-bottom: 1px solid #e5e5e5;
}

.submenu li a {
    position: relative;

    display: block;

    padding: 13px 4px 13px 4px;

    color: #707070;

    font-family: "Jost", sans-serif;
    font-size: 16px;
    font-weight: 400;

    line-height: 1.3;

    text-decoration: none;

    transition:
        color 0.18s ease,
        padding-left 0.18s ease;
}


/*
|--------------------------------------------------------------------------
| Dropdown blue indicator
|--------------------------------------------------------------------------
*/

.submenu li a::before {
    content: "";

    position: absolute;

    left: -4px;
    top: 50%;

    width: 3px;
    height: 30px;

    background: #159ed9;

    transform:
        translateY(-50%)
        scaleY(0);

    transform-origin: center;

    transition: transform 0.18s ease;
}


/*
|--------------------------------------------------------------------------
| Dropdown hover
|--------------------------------------------------------------------------
*/

.submenu li a:hover {
    color: #159ed9;

    padding-left: 14px;
}

.submenu li a:hover::before {
    transform:
        translateY(-50%)
        scaleY(1);
}


/* =========================================================
   Login Button
   ========================================================= */

.navigation-login {
    margin-left: auto;

    flex-shrink: 0;
}

.login-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 82px;
    height: 48px;

    padding: 0 22px;

    border-radius: 30px;

    background: #159ed9;

    color: #ffffff;

    font-family: "Jost", sans-serif;
    font-size: 16px;
    font-weight: 500;

    text-decoration: none;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.login-button:hover {
    background: #159ed9;

    color: #ffffff;

    transform: translateY(-1px);
}


/* =========================================================
   Mobile Menu Button
   ========================================================= */

.mobile-menu-toggle {
    display: none;

    width: 42px;
    height: 42px;

    padding: 8px;

    border: 0;

    background: transparent;

    cursor: pointer;
}

.mobile-menu-toggle span {
    display: block;

    width: 100%;
    height: 2px;

    margin: 5px 0;

    background: #111111;
}


/* =========================================================
   Mobile Menu
   ========================================================= */

.mobile-menu {
    position: fixed;

    top: 0;
    right: 0;

    width: min(380px, 90vw);
    max-width: 100%;

    height: 100vh;

    padding: 25px;

    background: #ffffff;

    z-index: 2000;

    overflow-y: auto;

    transform: translateX(100%);

    box-shadow:
        -10px 0 30px rgba(0, 0, 0, 0.12);

    transition:
        transform 0.3s ease;
}

.mobile-menu.is-open {
    transform: translateX(0);
}

.mobile-menu-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    padding-bottom: 25px;

    border-bottom: 1px solid #eeeeee;
}

.mobile-menu-close {
    width: 40px;
    height: 40px;

    border: 0;

    background: transparent;

    font-size: 32px;
    line-height: 1;

    cursor: pointer;
}

.mobile-main-menu {
    margin: 0;
    padding: 25px 0;

    list-style: none;
}

.mobile-main-menu > li {
    border-bottom: 1px solid #eeeeee;
}

.mobile-main-menu a,
.mobile-dropdown-toggle {
    display: flex;

    align-items: center;
    justify-content: space-between;

    width: 100%;

    padding: 15px 0;

    color: #111111;

    font-family: "Jost", sans-serif;
    font-size: 16px;
    font-weight: 500;

    text-decoration: none;

    background: transparent;

    border: 0;

    cursor: pointer;
}

.mobile-submenu {
    display: none;

    margin: 0;
    padding: 0 0 10px 15px;

    list-style: none;
}

.mobile-has-dropdown.is-open .mobile-submenu {
    display: block;
}

.mobile-submenu a {
    font-size: 14px;
    font-weight: 400;
}

/* =========================================================
   MOBILE LOGIN
   ========================================================= */

.mobile-login-item {
    margin-top: 25px;

    border-bottom: 0 !important;
}

.mobile-login-item a.mobile-login-button {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;

    min-height: 48px;

    padding: 12px 24px;

    border-radius: 30px;

    background: #159ed9;

    color: #ffffff !important;

    font-family: "Jost", sans-serif;

    font-size: 16px;
    font-weight: 500;

    text-decoration: none;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.mobile-login-item a.mobile-login-button:hover {
    background: #159ed9;

    color: #ffffff !important;

    transform: translateY(-1px);
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 991px) {

	.site-navigation.is-scrolled {
	    top: 10px;
	    left: 10px;
	    right: 10px;

	    width: calc(100% - 20px);

	    border-radius: 0px;
	}

    .site-navigation.is-scrolled .site-navigation-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .site-navigation-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .navigation-inner {
        min-height: 75px;
    }

    .desktop-menu,
    .navigation-login {
        display: none;
    }

    .mobile-menu-toggle {
        display: block;

        margin-left: auto;
    }

    .site-logo img {
        max-width: 165px;
    }
}

/* =========================================================
   Navigation Login - Final Override
   ========================================================= */

.navigation-inner {
    display: flex;
    align-items: center;
    width: 100%;
}

.navigation-login {
    display: flex !important;
    align-items: center;
    margin-left: auto;
    flex-shrink: 0;
    visibility: visible !important;
    opacity: 1 !important;
}

.login-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    width: 82px;
    height: 48px;

    padding: 0 22px;

    background: #159ed9;
    color: #ffffff !important;

    border: none;
    border-radius: 30px;

    font-family: "Jost", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;

    text-decoration: none !important;

    visibility: visible !important;
    opacity: 1 !important;
}

.login-button:hover {
    background: #159ed9;
    color: #ffffff !important;
}

/* =========================================================
   STICKY NAVIGATION ON SCROLL
   ========================================================= */

.site-navigation {
    transition:
        background-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}


/*
|--------------------------------------------------------------------------
| Navigation after scrolling
|--------------------------------------------------------------------------
*/

.site-navigation.is-scrolled {
    position: fixed;

    top: 15px;
    left: 15px;
    right: 15px;

    width: calc(100% - 30px);

    z-index: 1500;

    background: #ffffff !important;

    border-radius: 0px;

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.10);
}


/*
|--------------------------------------------------------------------------
| Container when sticky
|--------------------------------------------------------------------------
*/

.site-navigation.is-scrolled .site-navigation-container {
    max-width: 1500px;

    margin: 0 auto;

    padding-left: 32px;
    padding-right: 32px;
}


/*
|--------------------------------------------------------------------------
| Navigation text becomes dark again
|--------------------------------------------------------------------------
*/

.site-navigation.is-scrolled .main-menu > li > a {
    color: #111111;
}

.site-navigation.is-scrolled .main-menu > li > a:hover {
    color: #111111;
}


/*
|--------------------------------------------------------------------------
| Blue hover indicator
|--------------------------------------------------------------------------
*/

.site-navigation.is-scrolled .main-menu > li > a::before {
    background: #159ed9;
}


/*
|--------------------------------------------------------------------------
| Login button
|--------------------------------------------------------------------------
*/

.site-navigation.is-scrolled .login-button {
    background: #159ed9;
    color: #ffffff;
}

/* HERO Section */
/* =========================================================
   HOMEPAGE HERO
   ========================================================= */

.hero-section {
    position: relative;

    width: calc(100% - 36px);

    min-height: calc(100vh - 60px);

    margin: 15px 15px 0;

    border-radius: 28px;

    overflow: hidden;
}
/* =========================================================
   HERO BACKGROUND
   ========================================================= */

.hero-background {
    position: absolute;
    inset: 0;

    z-index: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;
}

.hero-background img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;
}

/* =========================================================
   DARK OVERLAY
   ========================================================= */

.hero-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background: rgba(255, 255, 255, 0.20);
}


/* =========================================================
   HEADER OVER HERO
   ========================================================= */

.hero-header {
    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    z-index: 10;

    width: 100%;
}


/*
|--------------------------------------------------------------------------
| Header must be transparent
|--------------------------------------------------------------------------
*/

.hero-header .site-navigation {
    background: transparent;
}

.hero-header .site-navigation-container {
    max-width: none;

    padding-left: 38px;
    padding-right: 38px;
}


/*
|--------------------------------------------------------------------------
| Navigation text becomes white
|--------------------------------------------------------------------------
*/

.hero-header .main-menu > li > a {
    color: #ffffff;
}

.hero-header .main-menu > li > a:hover {
    color: #ffffff;
}


/*
|--------------------------------------------------------------------------
| Blue hover indicator
|--------------------------------------------------------------------------
*/

.hero-header .main-menu > li > a::before {
    background: #159ed9;
}


/*
|--------------------------------------------------------------------------
| Login button
|--------------------------------------------------------------------------
*/

.hero-header .login-button {
    background: #159ed9;
    color: #ffffff;
}


/* =========================================================
   HERO CONTENT
   ========================================================= */

.hero-content {
    position: relative;

    z-index: 5;

    display: flex;

    flex-direction: column;

    width: 100%;

    max-width: 760px;

    padding-left: 5.5%;
    padding-top: 220px;
    padding-bottom: 100px;
}


/* =========================================================
   HERO TITLE
   ========================================================= */

.hero-title {
    margin: 0 0 48px;

    max-width: 700px;

    color: #ffffff;

    font-family: "Jost", sans-serif;

    font-size: clamp(48px, 4.3vw, 68px);

    font-weight: 400;

    line-height: 1.08;

    letter-spacing: -2.5px;

    text-shadow:
        0 1px 1px rgba(0, 0, 0, 0.65),
        0 3px 8px rgba(0, 0, 0, 0.35),
        0 8px 20px rgba(0, 0, 0, 0.20);
}

/* =========================================================
   HERO BUTTON
   ========================================================= */

.hero-button {
    display: inline-flex;

    flex: 0 0 auto;

    align-items: center;
    justify-content: center;

    width: fit-content;
    min-width: 175px;
    height: 51px;
    min-height: 51px;

    padding: 0 24px;

    border-radius: 30px;

    background: #159ed9;
    color: #ffffff;

    font-family: "Jost", sans-serif;
    font-size: 16px;
    font-weight: 500;

    line-height: 1;

    text-decoration: none;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease;
}

.hero-button:hover {
    background: #159ed9;

    color: #ffffff;

    transform: translateY(-2px);
}

/* =========================================================
   HERO RESPONSIVE
   ========================================================= */

@media (max-width: 991px) {

    .hero-section {
        width: calc(100% - 20px);

        height: calc(100vh - 20px);
        min-height: 680px;

        margin: 10px;

        border-radius: 28px;
    }

    .hero-header .site-navigation-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .hero-content {
        max-width: 90%;

        padding-left: 7%;
        padding-top: 100px;
    }

    .hero-title {
        font-size: clamp(44px, 7vw, 58px);

        letter-spacing: -1.8px;

        line-height: 1.08;
    }
}


@media (max-width: 576px) {

    .hero-section {
        min-height: 680px;

        border-radius: 22px;
    }

    .hero-content {
        max-width: 100%;

        padding-left: 25px;
        padding-right: 25px;
        padding-top: 100px;
    }

     .hero-title {
        font-size: clamp(22px, 8vw, 42px);

        letter-spacing: -1.2px;

        line-height: 1.08;

        margin-bottom: 36px;
    }

    .hero-button {
        height: 50px;

        min-width: 170px;
    }
}

.hero-bottom-image {
    margin-top: 200px;

    width: 960px;
    max-width: 100%;
}

.hero-bottom-image img {
    display: block;

    width: 100%;
    height: auto;
}

/* =========================================================
   STICKY NAV OVERRIDE INSIDE HERO
   ========================================================= */

.hero-header .site-navigation.is-scrolled {
    background: #ffffff !important;
}

.hero-header .site-navigation.is-scrolled .main-menu > li > a {
    color: #111111;
}

.hero-header .site-navigation.is-scrolled .main-menu > li > a:hover {
    color: #111111;
}

/* =========================================================
   MOBILE - HIDE DESKTOP LOGIN
   ========================================================= */

@media (max-width: 991px) {

    .site-navigation .navigation-login {
        display: none !important;
    }

}

/* FOR PRESS BRANDS SECTION */
/* =========================================================
   PRESS SECTION
   ========================================================= */

.press-section {
    width: 100%;

    background: #ffffff;

    padding-top: 28px;
    padding-bottom: 80px;

    overflow: hidden;
}


/* =========================================================
   PRESS CONTAINER
   ========================================================= */

.press-container {
    width: 100%;

    margin: 0 auto;
}


/* =========================================================
   PRESS HEADING
   ========================================================= */

.press-heading {
    text-align: center;

    color: #374151;

    font-family: "Jost", sans-serif;

    font-size: 20px;
    font-weight: 400;

    line-height: 1.4;

    margin-bottom: 20px;
}


/* =========================================================
   PRESS MARQUEE
   ========================================================= */

.press-marquee {
    position: relative;

    width: 100%;

    overflow: hidden;
}


/* =========================================================
   PRESS TRACK
   ========================================================= */

.press-track {
    display: flex;

    align-items: center;

    width: max-content;

    animation: pressMarquee 28s linear infinite;

    will-change: transform;
}


/* =========================================================
   PRESS LOGO
   ========================================================= */

.press-logo {
    flex: 0 0 auto;

    width: 240px;
    height: 70px;

    margin: 0 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
}


/* =========================================================
   PRESS LOGO IMAGE
   ========================================================= */

.press-logo img {
    display: block;

    width: auto;
    max-width: 210px;
    max-height: 55px;

    object-fit: contain;

    transform: scale(1);

    transition: transform 0.2s ease;
}


/* =========================================================
   HEARTBEAT HOVER
   ========================================================= */

.press-logo:hover img {
    animation: pressLogoHeartbeat 1.15s ease-in-out infinite;
}


/* =========================================================
   HEARTBEAT ANIMATION
   ========================================================= */

@keyframes pressLogoHeartbeat {

    0% {
        transform: scale(1);
    }

    25% {
        transform: scale(1.08);
    }

    45% {
        transform: scale(1.03);
    }

    65% {
        transform: scale(1.10);
    }

    100% {
        transform: scale(1);
    }

}


/* =========================================================
   PAUSE MARQUEE WHEN LOGO IS HOVERED
   ========================================================= */

.press-track:has(.press-logo:hover) {
    animation-play-state: paused;
}


/* =========================================================
   MARQUEE ANIMATION
   ========================================================= */

@keyframes pressMarquee {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    .press-section {
        padding-top: 25px;
        padding-bottom: 65px;
    }

    .press-heading {
        font-size: 19px;

        margin-bottom: 18px;
    }

    .press-logo {
        width: 210px;

        height: 65px;

        margin-left: 20px;
        margin-right: 20px;
    }

    .press-logo img {
        max-width: 185px;

        max-height: 50px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 576px) {

    .press-section {
        padding-top: 22px;
        padding-bottom: 55px;
    }

    .press-heading {
        font-size: 17px;

        margin-bottom: 15px;
    }

    .press-track {
        animation-duration: 22s;
    }

    .press-logo {
        width: 170px;

        height: 60px;

        margin-left: 15px;
        margin-right: 15px;
    }

    .press-logo img {
        max-width: 150px;

        max-height: 45px;
    }

}

/* =========================================================
   ABOUT SECTION
   ========================================================= */

.about-section {
    width: 100%;

    background: #ffffff;

    padding-top: 0px;
    padding-bottom: 100px;
}


/* =========================================================
   ABOUT CONTAINER
   ========================================================= */

.about-container {
    width: calc(80% - 80px);

    max-width: 1320px;

    margin: 0 auto;
}


/* =========================================================
   ABOUT LABEL
   ========================================================= */

.about-label {
    margin-bottom: 8px;

    color: #9a9a9a;

    font-family: "Jost", sans-serif;

    font-size: 16px;
    font-weight: 400;

    line-height: 1.4;
}


/* =========================================================
   ABOUT TITLE
   ========================================================= */

.about-title {
    max-width: 1150px;

    margin: 0;

    color: #050505;

    font-family: "Jost", sans-serif;

    font-size: clamp(38px, 3.2vw, 52px);

    font-weight: 400;

    line-height: 1.08;

    letter-spacing: -2px;
}


/* =========================================================
   ABOUT TABLET
   ========================================================= */

@media (max-width: 991px) {

    .about-section {
        padding-top: 0px;
        padding-bottom: 80px;
    }

    .about-container {
        width: calc(100% - 50px);
    }

    .about-title {
        font-size: clamp(34px, 5vw, 46px);

        letter-spacing: -1.5px;
    }

}


/* =========================================================
   ABOUT MOBILE
   ========================================================= */

@media (max-width: 576px) {

    .about-section {
        padding-top: 0px;
        padding-bottom: 65px;
    }

    .about-container {
        width: calc(100% - 40px);
    }

    .about-label {
        font-size: 14px;

        margin-bottom: 10px;
    }

    .about-title {
        font-size: 34px;

        line-height: 1.08;

        letter-spacing: -1px;
    }

}


/* WHY US SECTION */
/* =========================================================
   WHY US SECTION
   ========================================================= */

.why-us-section {
    width: 100%;

    background: #ffffff;

    padding-top: 70px;
    padding-bottom: 100px;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.why-us-container {
    width: calc(80% - 80px);

    max-width: 1350px;

    margin: 0 auto;
}


/* =========================================================
   SECTION HEADER
   ========================================================= */

.why-us-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;
}


/* =========================================================
   TITLE
   ========================================================= */

.why-us-title {
    margin: 0;

    color: #050505;

    font-family: "Jost", sans-serif;

    font-size: 34px;
    font-weight: 500;

    line-height: 1.15;

    letter-spacing: -1.5px;
}


/* =========================================================
   MORE ABOUT US BUTTON
   ========================================================= */

.why-us-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    min-width: 154px;
    height: 61px;

    padding: 0 25px;

    border-radius: 32px;

    background: #159ed9;

    color: #ffffff;

    font-family: "Jost", sans-serif;

    font-size: 16px;
    font-weight: 500;

    line-height: 1;

    text-decoration: none;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease;
}


.why-us-button:hover {
    background: #159ed9;

    color: #ffffff;

    transform: translateY(-2px);
}


/* =========================================================
   DIVIDER
   ========================================================= */

.why-us-divider {
    width: 100%;

    height: 1px;

    margin-top: 22px;
    margin-bottom: 22px;

    background: #d0d0d0;
}


/* =========================================================
   CARD GRID
   ========================================================= */

.why-us-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 10px 12px;
}


/* =========================================================
   CARD
   ========================================================= */

.why-us-card {
    min-height: 170px;

    padding: 30px 33px 27px;

    background: #f5f5f5;

    border: 1px solid #bcbcbc;

    border-radius: 14px;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


/* =========================================================
   CARD HEADING
   ========================================================= */

.why-us-card-heading {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 25px;
}


.why-us-card-heading h3 {
    margin: 0;

    color: #080808;

    font-family: "Jost", sans-serif;

    font-size: 20px;
    font-weight: 500;

    line-height: 1.2;

    letter-spacing: -0.5px;
}


/* =========================================================
   ICON
   ========================================================= */

.why-us-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 28px;
    height: 28px;

    color: #050505;

    font-family: Arial, sans-serif;

    font-size: 21px;
    font-weight: 700;

    line-height: 1;
}

.why-us-icon img {
    width: 28px;
    height: 28px;

    object-fit: contain;
    display: block;
}

.google-icon {
    font-size: 18px;
    letter-spacing: -2px;
}


.ad-icon {
    width: 28px;
    height: 22px;

    border: 2px solid #050505;

    font-size: 12px;

    letter-spacing: -0.5px;
}


.monitor-icon {
    font-size: 30px;

    transform: rotate(90deg);
}


/* =========================================================
   CARD DESCRIPTION
   ========================================================= */

.why-us-card p {
    max-width: 430px;

    margin: 0;

    color: #596575;

    font-family: "Jost", sans-serif;

    font-size: 16px;
    font-weight: 400;

    line-height: 1.45;
}


/* =========================================================
   CARD HOVER
   ========================================================= */

.why-us-card:hover {
    transform: translateY(-2px);

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.06);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    .why-us-section {
        padding-top: 60px;
        padding-bottom: 80px;
    }

    .why-us-container {
        width: calc(100% - 50px);
    }

    .why-us-title {
        font-size: 30px;
    }

    .why-us-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 12px;
    }

    .why-us-card {
        padding: 26px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 576px) {

    .why-us-section {
        padding-top: 50px;
        padding-bottom: 65px;
    }

    .why-us-container {
        width: calc(100% - 40px);
    }

    .why-us-header {
        align-items: flex-start;

        flex-direction: column;

        gap: 20px;
    }

    .why-us-title {
        font-size: 29px;

        letter-spacing: -1px;
    }

    .why-us-button {
        min-width: 145px;

        height: 52px;

        font-size: 15px;
    }

    .why-us-divider {
        margin-top: 25px;
        margin-bottom: 15px;
    }

    .why-us-grid {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .why-us-card {
        min-height: auto;

        padding: 25px;
    }

    .why-us-card-heading {
        margin-bottom: 20px;
    }

    .why-us-card-heading h3 {
        font-size: 19px;
    }

    .why-us-card p {
        font-size: 15px;
    }

}

/* OUR SERVICES */
/* =========================================================
   SERVICES SECTION
   ========================================================= */

.services-section {
    width: 100%;

    background: #050505;

    color: #ffffff;

    padding-top: 70px;
    padding-bottom: 80px;

    overflow: hidden;
}


/* =========================================================
   SERVICES CONTAINER
   ========================================================= */

.services-container {
    width: calc(80% - 80px);

    max-width: 1350px;

    margin: 0 auto;
}


/* =========================================================
   SERVICES INTRO
   ========================================================= */

.services-intro {
    width: 100%;

    padding-left: 0;

    margin-bottom: 35px;
}


/* =========================================================
   LABEL
   ========================================================= */

.services-label {
    margin-bottom: 10px;

    color: #aeb5bd;

    font-family: "Jost", sans-serif;

    font-size: 16px;
    font-weight: 400;

    line-height: 1.4;
}


/* =========================================================
   TITLE
   ========================================================= */

.services-title {
    margin: 0;

    max-width: 400px;

    color: #ffffff;

    font-family: "Jost", sans-serif;

    font-size: clamp(48px, 4vw, 58px);

    font-weight: 400;

    line-height: 1.05;

    letter-spacing: -2.5px;
}


/* =========================================================
   SERVICES LIST
   ========================================================= */

.services-list {
    width: 100%;
}


/* =========================================================
   SERVICE ITEM
   ========================================================= */

.service-item {
    position: relative;

    display: grid;

    grid-template-columns: 175px minmax(0, 1fr) 60px;

    align-items: center;

    width: 100%;

    min-height: 113px;

    border-bottom: 1px solid #242424;

    color: #ffffff;

    text-decoration: none;

    transition:
        background-color 0.25s ease;
}


/* =========================================================
   SERVICE NUMBER
   ========================================================= */

.service-number {
    padding-left: 7px;

    color: #5f6872;

    font-family: "Jost", sans-serif;

    font-size: 17px;
    font-weight: 400;

    line-height: 1;
}


/* =========================================================
   SERVICE NAME
   ========================================================= */

.service-name {
    color: #ffffff;

    font-family: "Jost", sans-serif;

    font-size: clamp(22px, 1.7vw, 28px);

    font-weight: 400;

    line-height: 1.2;

    letter-spacing: -0.8px;

    transition:
        transform 0.25s ease,
        color 0.25s ease;
}


/* =========================================================
   ARROW
   ========================================================= */

.service-arrow {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 50px;
    height: 50px;

    margin-left: auto;

    border-radius: 50%;

    background: #159ed9;

    color: #ffffff;

    font-family: Arial, sans-serif;

    font-size: 32px;
    font-weight: 300;

    line-height: 1;

    overflow: hidden;
}


.service-arrow span {
    display: block;

    transform: translateX(0);

    transition:
        transform 0.25s ease;
}


/* =========================================================
   SERVICE HOVER
   ========================================================= */

.service-item:hover {
    color: #ffffff;
}


.service-item:hover .service-name {
    transform: translateX(8px);
}


.service-item:hover .service-arrow span {
    transform: translateX(5px);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    .services-section {
        padding-top: 60px;
        padding-bottom: 70px;
    }

    .services-container {
        width: calc(100% - 50px);
    }

    .services-title {
        font-size: clamp(44px, 6vw, 54px);

        letter-spacing: -2px;
    }

    .service-item {
        grid-template-columns:
            100px minmax(0, 1fr) 55px;

        min-height: 100px;
    }

    .service-number {
        font-size: 15px;
    }

    .service-name {
        font-size: 21px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 576px) {

    .services-section {
        padding-top: 50px;
        padding-bottom: 60px;
    }

    .services-container {
        width: calc(100% - 40px);
    }

    .services-intro {
        margin-bottom: 25px;
    }

    .services-label {
        font-size: 14px;
    }

    .services-title {
        font-size: 43px;

        letter-spacing: -1.5px;
    }

    .service-item {
        grid-template-columns:
            45px minmax(0, 1fr) 48px;

        min-height: 95px;

        column-gap: 10px;
    }

    .service-number {
        padding-left: 0;

        font-size: 13px;
    }

    .service-name {
        font-size: 18px;

        letter-spacing: -0.4px;
    }

    .service-arrow {
        width: 43px;
        height: 43px;

        font-size: 27px;
    }

}

/* TESTIMONIES */
/* =========================================================
   TESTIMONIALS SECTION
   ========================================================= */

.testimonials-section {
    width: 100%;

    padding: 120px 0 140px;

    background: #ffffff;

    overflow: hidden;
}


.testimonials-container {
    width: calc(80% - 80px);

    max-width: 1500px;

    margin: 0 auto;
}


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

.testimonials-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;
}


.testimonials-title {
    margin: 0;

    color: #050505;

    font-family: "Jost", sans-serif;

    font-size: clamp(32px, 3vw, 42px);

    font-weight: 500;

    line-height: 1.1;

    letter-spacing: -1.8px;
}


.testimonials-view-all {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 115px;
    height: 68px;

    padding: 0 28px;

    border-radius: 40px;

    background: #159ed9;

    color: #ffffff;

    font-family: "Jost", sans-serif;

    font-size: 16px;
    font-weight: 500;

    text-decoration: none;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease;
}


.testimonials-view-all:hover {
    background: #159ed9;

    color: #ffffff;

    transform: translateY(-2px);
}


/* =========================================================
   DIVIDER
   ========================================================= */

.testimonials-divider {
    width: 100%;

    height: 1px;

    margin: 24px 0 26px;

    background: #d5d5d5;
}


/* =========================================================
   CAROUSEL
   ========================================================= */

.testimonials-carousel {
    width: 100%;

    overflow: hidden;
}


.testimonials-track {
    display: flex;

    width: 100%;

    margin: 0;

    padding: 0;

    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);

    will-change: transform;
}


.testimonial-slide {
    flex: 0 0 33.333333%;

    min-width: 0;

    padding-right: 12px;
}


.testimonial-slide:first-child {
    padding-left: 0;
}


.testimonial-slide:last-child {
    padding-right: 0;
}


/* =========================================================
   TESTIMONIAL CARD
   ========================================================= */

.testimonial-card {
    position: relative;

    height: 430px;

    padding: 50px 35px 35px;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    background: #ffffff;

    border: 1px solid #e5e5e5;

    border-radius: 10px;

    overflow: hidden;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.testimonial-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.06);
}


/* =========================================================
   CLIENT PHOTO
   ========================================================= */

.testimonial-photo {
    width: 88px;
    height: 88px;

    margin-bottom: 20px;

    border-radius: 50%;

    overflow: hidden;

    flex-shrink: 0;

    background: #eeeeee;
}


.testimonial-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================================================
   STARS
   ========================================================= */

.testimonial-stars {
    margin-bottom: 14px;

    color: #f4ad42;

    font-size: 22px;

    line-height: 1;

    letter-spacing: 2px;
}


/* =========================================================
   CLIENT NAME
   ========================================================= */

.testimonial-name {
    margin: 0 0 20px;

    color: #050505;

    font-family: "Jost", sans-serif;

    font-size: 25px;

    font-weight: 500;

    line-height: 1.2;
}


/* =========================================================
   TESTIMONIAL TEXT
   ========================================================= */

.testimonial-text {
    max-width: 430px;

    margin: 0;

    color: #686868;

    font-family: "Jost", sans-serif;

    font-size: 16px;

    font-weight: 400;

    line-height: 1.6;
}


/* =========================================================
   NAVIGATION BUTTONS
   ========================================================= */

.testimonials-navigation {
    display: flex;

    justify-content: flex-end;

    align-items: center;

    gap: 12px;

    margin-top: 28px;
}


.testimonial-nav-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    padding: 0;

    border: 1px solid #d7d7d7;

    border-radius: 50%;

    background: #ffffff;

    color: #111111;

    font-family: Arial, sans-serif;

    font-size: 22px;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}


.testimonial-nav-button:hover {
    background: #159ed9;

    border-color: #159ed9;

    color: #ffffff;

    transform: translateY(-2px);
}


.testimonial-nav-button:disabled {
    opacity: 0.35;

    cursor: default;

    transform: none;

    background: #ffffff;

    color: #111111;

    border-color: #d7d7d7;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    .testimonials-section {
        padding: 90px 0 100px;
    }

    .testimonials-container {
        width: calc(100% - 40px);
    }

    .testimonial-slide {
        flex: 0 0 50%;
    }

    .testimonial-card {
        height: 410px;

        padding: 40px 25px 30px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 576px) {

    .testimonials-section {
        padding: 75px 0 90px;
    }

    .testimonials-container {
        width: calc(100% - 30px);
    }

    .testimonials-header {
        align-items: flex-start;
    }

    .testimonials-title {
        font-size: 32px;
    }

    .testimonials-view-all {
        min-width: 95px;

        height: 52px;

        padding: 0 20px;

        font-size: 14px;
    }

    .testimonial-slide {
        flex: 0 0 100%;

        padding-right: 0;
    }

    .testimonial-card {
        height: 400px;

        padding: 35px 25px 30px;
    }

    .testimonials-navigation {
        justify-content: center;
    }

}
/* FOOTER */
/* =========================================================
   FANScreens FOOTER
   ========================================================= */

.site-footer {
    width: 100%;
    background: #000000;
    color: #ffffff;
}


/* =========================================================
   Footer Shared Container
   ========================================================= */

.footer-container {
    width: 100%;
    max-width: 1500px;

    margin: 0 auto;

    padding-left: 7%;
    padding-right: 7%;
}


/* =========================================================
   CONTACT SECTION
   ========================================================= */

.footer-contact-section {
    padding-top: 78px;
    padding-bottom: 65px;

    background: #000000;
}


.footer-contact-heading {
    text-align: center;

    margin-bottom: 55px;
}


.footer-eyebrow {
    color: #159ed9;

    font-family: "Jost", sans-serif;

    font-size: 15px;
    font-weight: 400;

    line-height: 1.2;

    text-transform: uppercase;
}


.footer-contact-heading h2 {
    margin: 14px 0 0;

    color: #ffffff;

    font-family: "Jost", sans-serif;

    font-size: clamp(48px, 4.5vw, 70px);

    font-weight: 400;

    line-height: 1.05;

    letter-spacing: -3px;
}


/* =========================================================
   CONTACT CARDS
   ========================================================= */

.footer-contact-cards {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr)
        minmax(0, 1.8fr);

    gap: 12px;

    margin-bottom: 14px;
}


.footer-contact-card {
    display: flex;

    flex-direction: column;
    justify-content: center;

    min-height: 113px;

    padding: 25px 40px;

    background: #ffffff;

    border-radius: 15px;

    color: #111111;

    text-decoration: none;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.footer-contact-card:hover {
    color: #111111;

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.15);
}


.footer-contact-label {
    margin-bottom: 5px;

    color: #9a9a9a;

    font-size: 16px;
    font-weight: 400;
}


.footer-contact-value {
    color: #111111;

    font-size: 22px;
    font-weight: 400;

    line-height: 1.3;
}


.footer-address-card .footer-contact-value {
    font-size: 21px;
}


/* =========================================================
   AUDIT BOX
   ========================================================= */

.footer-audit-box {
    display: flex;

    flex-direction: column;
    align-items: center;

    min-height: 330px;

    padding: 48px 30px;

    background: #242424;

    border-radius: 15px;

    text-align: center;
}


.footer-audit-box h3 {
    margin: 0 0 25px;

    color: #ffffff;

    font-family: "Jost", sans-serif;

    font-size: 30px;
    font-weight: 500;

    line-height: 1.2;
}


.footer-audit-form {
    display: flex;

    flex-direction: column;
    align-items: center;

    width: 100%;
}


.footer-audit-form input {
    width: 438px;
    max-width: 100%;

    height: 81px;

    padding: 0 26px;

    border: none;
    outline: none;

    border-radius: 10px;

    background: #ffffff;

    color: #111111;

    font-family: "Jost", sans-serif;

    font-size: 16px;
}


.footer-audit-form input::placeholder {
    color: #777777;
}


.footer-audit-form button {
    margin-top: 27px;

    min-width: 136px;
    height: 67px;

    padding: 0 30px;

    border: none;
    border-radius: 35px;

    background: #159ed9;

    color: #ffffff;

    font-family: "Jost", sans-serif;

    font-size: 17px;
    font-weight: 500;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease;
}


.footer-audit-form button:hover {
    background: #159ed9;

    transform: translateY(-2px);
}


/* =========================================================
   MAIN FOOTER
   ========================================================= */

.footer-main-section {
    border-top: 0px solid #333333;

    background: #000000;
}


.footer-main-inner {
    display: grid;

    grid-template-columns: 46% 54%;

    min-height: 560px;
}


/* =========================================================
   GLOBE
   ========================================================= */

.footer-globe {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 560px;
}


.footer-globe::before {
    content: "";

    width: 375px;
    height: 375px;

    border: 1px solid #3c3c3c;

    border-radius: 50%;

    background:
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 18px,
            rgba(255,255,255,0.12) 19px,
            transparent 20px
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 18px,
            rgba(255,255,255,0.12) 19px,
            transparent 20px
        );
}


/* =========================================================
   UP ARROW
   ========================================================= */

.footer-top-button {
    position: absolute;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 145px;
    height: 145px;

    border: none;

    background: transparent;

    color: #ffffff;

    font-family: Arial, sans-serif;

    font-size: 105px;
    font-weight: 200;

    line-height: 1;

    cursor: pointer;

    z-index: 2;

    transition:
        transform 0.3s ease;
}


.footer-top-button:hover {
    transform: translateY(-8px);
}


/* =========================================================
   FOOTER INFORMATION
   ========================================================= */

.footer-information {
    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding-top: 75px;
    padding-bottom: 55px;
}


.footer-information-top {
    display: grid;

    grid-template-columns: 1fr 1.35fr;

    gap: 50px;
}


.footer-info-column {
    color: #ffffff;

    font-size: 20px;

    line-height: 1.4;
}


.footer-info-column .footer-eyebrow {
    margin-bottom: 22px;
}


.footer-phone {
    font-size: 21px;
}


.footer-email {
    display: block;

    color: #ffffff;

    text-decoration: none;

    font-size: 21px;
}


.footer-email:hover {
    color: #159ed9;
}

/* =========================================================
   EMAIL OPTIONS
========================================================= */

.footer-email-options {
    display: flex;

    gap: 8px;

    margin-top: 12px;

    flex-wrap: wrap;
}


.footer-email-button {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 6px 11px;

    border: 1px solid rgba(0, 0, 0, 0.12);

    border-radius: 6px;

    background: #ffffff;

    color: #333333;

    font-size: 12px;

    line-height: 1;

    font-weight: 500;

    text-decoration: none;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}


.footer-email-button:hover {
    transform: translateY(-1px);

    border-color: rgba(0, 0, 0, 0.25);

    background: #f7f7f7;

    color: #111111;
}


.footer-email-button i {
    font-size: 12px;
}


/* Gmail */

.footer-email-gmail {
    color: #333333;
}


/* Outlook */

.footer-email-outlook {
    color: #333333;
}

.footer-talk-link {
    display: inline-block;

    margin-top: 28px;

    color: #159ed9;

    font-size: 20px;
    font-weight: 500;

    text-decoration: none;
}


.footer-talk-link:hover {
    color: #159ed9;
}


.footer-address {
    padding-top: 38px;

    font-size: 20px;
}


/* =========================================================
   SOCIAL
   ========================================================= */

.footer-social-section {
    margin-top: auto;
}


.footer-social-section .footer-eyebrow {
    margin-bottom: 25px;
}


.footer-social-links {
    display: flex;

    align-items: center;

    gap: 25px;
}


.footer-social-links a {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 31px;
    height: 31px;

    border: 2px solid #777777;

    border-radius: 4px;

    color: #999999;

    font-family: Arial, sans-serif;

    font-size: 18px;
    font-weight: 600;

    text-decoration: none;

    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}


.footer-social-links a:hover {
    color: #159ed9;

    border-color: #159ed9;

    transform: translateY(-2px);
}


/* =========================================================
   FOOTER BOTTOM
   ========================================================= */

.footer-bottom {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    margin-top: 45px;

    color: #777777;

    font-size: 14px;
}


.footer-legal {
    display: flex;

    align-items: center;

    gap: 12px;
}


.footer-legal a {
    color: #777777;

    text-decoration: none;
}


.footer-legal a:hover {
    color: #159ed9;
}


.footer-legal span {
    color: #555555;
}

.footer-copyright {
    color: #777777;
    text-decoration: none;

    transition: color 0.2s ease;
}

.footer-copyright:hover {
    color: #159ed9;
    text-decoration: none;
}
/* =========================================================
   FOOTER RESPONSIVE
   ========================================================= */

@media (max-width: 991px) {

    .footer-container {
        padding-left: 30px;
        padding-right: 30px;
    }


    .footer-contact-heading h2 {
        font-size: 50px;
        letter-spacing: -2px;
    }


    .footer-contact-cards {
        grid-template-columns: 1fr;
    }


    .footer-main-inner {
        grid-template-columns: 1fr;
    }


    .footer-globe {
        min-height: 400px;
    }


    .footer-information {
        padding-top: 20px;
        padding-bottom: 50px;
    }

}


@media (max-width: 576px) {

    .footer-contact-section {
        padding-top: 60px;
        padding-bottom: 45px;
    }


    .footer-container {
        padding-left: 20px;
        padding-right: 20px;
    }


    .footer-contact-heading {
        margin-bottom: 35px;
    }


    .footer-contact-heading h2 {
        font-size: 42px;
        letter-spacing: -1.5px;
    }


    .footer-contact-card {
        min-height: 100px;

        padding: 22px 25px;
    }


    .footer-contact-value,
    .footer-address-card .footer-contact-value {
        font-size: 18px;
    }


    .footer-audit-box {
        min-height: 300px;

        padding: 40px 20px;
    }


    .footer-audit-box h3 {
        font-size: 24px;
    }


    .footer-audit-form input {
        height: 70px;
    }


    .footer-main-inner {
        display: block;
    }


    .footer-globe {
        min-height: 360px;
    }


    .footer-globe::before {
        width: 300px;
        height: 300px;
    }


    /*.footer-top-button {
        width: 110px;
        height: 110px;

        font-size: 80px;
    }*/

    .footer-top-button {
        display: flex;

        align-items: center;
        justify-content: center;

        padding: 0;

        border: 0;

        background: transparent;

        cursor: pointer;
    }

    .footer-top-button img {
        display: block;

        width: 100%;
        height: auto;

        object-fit: contain;
    }
    .footer-information {
        padding-top: 20px;
    }


    .footer-information-top {
        grid-template-columns: 1fr;

        gap: 35px;
    }


    .footer-address {
        padding-top: 0;
    }


    .footer-bottom {
        flex-direction: column;

        align-items: flex-start;

        gap: 20px;
    }


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

}






/* INNER PAGES NAVIGATION */
/* =========================================================
   INNER PAGE NAVIGATION
   About / Services / Contact
   ========================================================= */

.site-navigation--inner {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    background: #ffffff;

    z-index: 1500;

    /*
     * No border/shadow while at the very top
     */
    border-bottom: 1px solid transparent;

    box-shadow: none;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


/* =========================================================
   Inner Page Container
   ========================================================= */

.site-navigation--inner .site-navigation-container {

    width: 100%;
    max-width: none;

    margin: 0;

    padding-left: 36px;
    padding-right: 36px;
}


/* =========================================================
   Inner Page Navigation Height
   ========================================================= */

.site-navigation--inner .navigation-inner {
    min-height: 90px;
}


/* =========================================================
   Inner Page Logo
   ========================================================= */

.site-navigation--inner .site-logo img {
    max-width: 215px;
}


/* =========================================================
   Inner Page Menu
   ========================================================= */

.site-navigation--inner .main-menu > li > a {
    color: #111111;
}


/* =========================================================
   Inner Page Login
   ========================================================= */

.site-navigation--inner .login-button {
    background: #159ed9;
    color: #ffffff;
}


/* =========================================================
   INNER PAGE — SCROLLED
   ========================================================= */

.site-navigation--inner.is-scrolled {

    top: 0;
    left: 0;

    width: 100%;

    background: #ffffff !important;

    border-bottom: 1px solid #e5e5e5;

    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.06);

    border-radius: 0;
}


/* =========================================================
   Scrolled Container
   ========================================================= */

.site-navigation--inner.is-scrolled
.site-navigation-container {

    max-width: none;

    margin: 0;

    padding-left: 36px;
    padding-right: 36px;
}
@media (max-width: 991px) {

    .site-navigation--inner {

        position: fixed;

        top: 0;
        left: 0;

        width: 100%;

        background: #ffffff;

        border-bottom: 1px solid transparent;

        box-shadow: none;
    }


    .site-navigation--inner .site-navigation-container {

        padding-left: 20px;
        padding-right: 20px;
    }


    .site-navigation--inner .navigation-inner {

        min-height: 75px;
    }


    .site-navigation--inner .site-logo img {

        max-width: 165px;
    }


    /* ---------------------------------------------------------
       Scrolled Mobile
       --------------------------------------------------------- */

    .site-navigation--inner.is-scrolled {

        top: 0;
        left: 0;

        width: 100%;

        border-radius: 0;

        border-bottom: 1px solid #e5e5e5;

        box-shadow:
            0 3px 12px rgba(0, 0, 0, 0.06);
    }


    .site-navigation--inner.is-scrolled
    .site-navigation-container {

        padding-left: 20px;
        padding-right: 20px;
    }
}


/* =========================================
   ABOUT FANSCREENS
========================================= */

.about-fanscreens-section {
    width: 100%;
    background: #ffffff;
    padding: 150px 0 80px;
}

.about-container {
    width: calc(80% - 80px);
    max-width: 1500px;
    margin: 0 auto;
}


/* =========================================
   INTRO
========================================= */

.about-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 70px;
    align-items: center;
    margin-bottom: 80px;
}

.about-copy {
    max-width: 900px;
}

.about-label {
    font-size: 16px;
    line-height: 1.4;
    font-weight: 400;
    letter-spacing: 0.2px;
    color: #63788b;
    margin-bottom: 14px;
}

.about-title-about {
    margin: 0;
    font-size: clamp(48px, 5vw, 76px);
    line-height: 0.95;
    letter-spacing: -3.5px;
    font-weight: 400;
    color: #050505;
}

.about-description {
    margin-top: 38px;
    max-width: 1000px;
}

.about-description p {
    margin: 0 0 24px;
    font-size: 20px;
    line-height: 1.55;
    font-weight: 400;
    color: #111111;
}

.about-description p:last-child {
    margin-bottom: 0;
}


/* =========================================
   GLOBE
========================================= */

.about-globe {
    display: flex;
    align-items: center;
    justify-content: center;
}

.globe {
    position: relative;
    width: 285px;
    height: 285px;
    border: 1px solid #9a9a9a;
    border-radius: 50%;
    overflow: hidden;
    opacity: 0.75;
}

.about-globe img {
    width: 100%;
    height: auto;
    display: block;
}
/* Vertical longitude lines */

.globe-v1,
.globe-v2,
.globe-v3,
.globe-v4 {
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: 50%;
    border-left: 1px solid #999;
    border-radius: 50%;
    transform: translateX(-50%);
}

.globe-v1 {
    width: 55px;
}

.globe-v2 {
    width: 120px;
}

.globe-v3 {
    width: 185px;
}

.globe-v4 {
    width: 240px;
}


/* Horizontal latitude lines */

.globe-h1,
.globe-h2,
.globe-h3,
.globe-h4,
.globe-h5 {
    position: absolute;
    left: -1px;
    right: -1px;
    top: 50%;
    border-top: 1px solid #999;
    border-radius: 50%;
    transform: translateY(-50%);
}

.globe-h1 {
    height: 55px;
}

.globe-h2 {
    height: 115px;
}

.globe-h3 {
    height: 170px;
}

.globe-h4 {
    height: 225px;
}

.globe-h5 {
    height: 270px;
}


/* =========================================
   CARDS
========================================= */

.about-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.about-card {
    min-height: 325px;
    padding: 38px 38px 35px;
    border: 1px solid #b7b7b7;
    border-radius: 15px;
    background: #f8f8f8;
}

.about-card h3 {
    margin: 0 0 12px;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: -0.7px;
    color: #111111;
}

.about-card p {
    margin: 0 0 25px;
    font-size: 18px;
    line-height: 1.48;
    color: #66788a;
}

.about-card p:last-child {
    margin-bottom: 0;
}


/* =========================================
   CARD ICONS
========================================= */

.about-card-icon {
    display: none;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1100px) {

    .about-container {
        width: calc(100% - 60px);
    }

    .about-intro {
        grid-template-columns: 1fr 280px;
        gap: 30px;
    }

    .globe {
        width: 230px;
        height: 230px;
    }

    .about-title-about {
        font-size: clamp(45px, 5vw, 65px);
    }

    .about-description p {
        font-size: 18px;
    }

    .about-card {
        padding: 30px;
    }

    .about-card h3 {
        font-size: 21px;
    }

    .about-card p {
        font-size: 16px;
    }
}


@media (max-width: 768px) {

    .about-fanscreens-section {
        padding: 55px 0;
    }

    .about-container {
        width: calc(100% - 40px);
    }

    .about-intro {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 45px;
        margin-bottom: 55px;
    }

    .about-title-about {
        font-size: 48px;
        line-height: 0.98;
        letter-spacing: -2.5px;
    }

    .about-description {
        margin-top: 30px;
    }

    .about-description p {
        font-size: 17px;
    }

    .about-globe {
        width: 100%;
        justify-content: center;
    }

    .globe {
        width: 230px;
        height: 230px;
    }

    .about-cards {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .about-card {
        min-height: auto;
        padding: 30px;
    }
}


@media (max-width: 480px) {

    .about-container {
        padding: 70px 0 80px;
    }

    .about-container {
        width: calc(100% - 30px);
         max-width: none;
        margin: 0 auto;
    }

    .about-title-about {
        font-size: 39px;
        letter-spacing: -2px;
    }

    .about-label {
        font-size: 14px;
    }

    .about-description p {
        font-size: 16px;
    }

    .globe {
        width: 190px;
        height: 190px;
    }

    .about-card {
        padding: 25px;
    }

    .about-card h3 {
        font-size: 20px;
    }
}
/* WHY TRUST US */
/* =========================================
   WHY TRUST FANSCREENS
========================================= */

.trust-fanscreens-section {
    width: 100%;
    min-height: 700px;
    display: grid;
    grid-template-columns: 37% 63%;
    background: #000;
}

/* =========================================
   LEFT IMAGE
========================================= */

/*.trust-fanscreens-image {
    position: relative;
    z-index: 10;

    width: 100%;
    min-height: 700px;

    overflow: hidden;

    background: #ffffff;
}

.trust-fanscreens-image img {
    position: relative;
    z-index: 20;

    display: block;

    width: 100%;
    height: 700px;

    object-fit: cover;
    object-position: center center;
}*/

/* =========================================
   WHY TRUST FANSCREENS
========================================= */

.trust-fanscreens-section {
    width: 100%;
    min-height: 700px;

    display: grid;
    grid-template-columns: 37% 63%;

    background: #000;
}


/* =========================================
   WIREFRAME SCREEN
========================================= */

.trust-fanscreens-image {

    position: relative;

    width: 100%;
    min-height: 700px;

    overflow: hidden;

    background: #fff;

    isolation: isolate;
}


/* =========================================
   SCREEN CONTAINER
========================================= */

.wireframe-screen {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #fff;
}


/* =========================================
   SVG
========================================= */

.wireframe-svg {

    display: block;

    width: 100%;
    height: 100%;

    overflow: visible;

    background: #fff;

    transform:
        scale(1.08);

    transform-origin: center center;
}


/* =========================================
   SCREEN ANIMATION
========================================= */

.wireframe-svg {

    animation:
        screenFloat 48s ease-in-out infinite alternate;
}


/* =========================================
   SUBTLE SCREEN MOVEMENT
========================================= */

@keyframes screenFloat {

    0% {
        transform:
            scale(1.08)
            translate3d(-2%, -1%, 0);
    }

    50% {
        transform:
            scale(1.12)
            translate3d(2%, 1%, 0);
    }

    100% {
        transform:
            scale(1.08)
            translate3d(-2%, -1%, 0);
    }

}


/* =========================================
   RIGHT CONTENT
========================================= */

.trust-fanscreens-content {

    display: flex;
    align-items: center;

    background: #000;

    color: #fff;
}


.trust-fanscreens-inner {

    width: 100%;
    max-width: 1100px;

    padding:
        80px
        7vw
        80px
        4.2vw;
}


/* =========================================
   TITLE
========================================= */

.trust-fanscreens-title {

    margin: 0 0 32px;

    font-size: clamp(44px, 4vw, 68px);

    line-height: 0.98;

    font-weight: 400;

    letter-spacing: -3px;

    color: #fff;
}


/* =========================================
   DESCRIPTION
========================================= */

.trust-fanscreens-description {

    max-width: 1050px;
}


.trust-fanscreens-description p {

    margin: 0 0 24px;

    font-size: 17px;

    line-height: 1.5;

    font-weight: 400;

    color: #fff;
}


.trust-fanscreens-description p:last-child {

    margin-bottom: 0;
}


/* =========================================
   POINTS
========================================= */

.trust-fanscreens-points {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 22px;
}


.trust-point {

    display: inline-flex;

    align-items: center;

    min-height: 54px;

    padding: 0 24px;

    border: 1px solid rgba(255,255,255,.8);

    border-radius: 16px;

    color: #fff;

    font-size: 16px;

    line-height: 1;

    white-space: nowrap;

    transition:
        background-color .25s ease,
        border-color .25s ease,
        transform .25s ease;
}


.trust-point:hover {

    background: rgba(255,255,255,.08);

    border-color: #fff;

    transform:
        translateY(-2px);
}


.trust-check {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    margin-right: 13px;

    font-size: 18px;

    font-weight: 600;

    color: #fff;
}
/* =========================================
   RIGHT CONTENT
========================================= */

.trust-fanscreens-content {
    display: flex;
    align-items: center;
    background: #000;
    color: #fff;
}

.trust-fanscreens-inner {
    width: 100%;
    max-width: 1100px;
    padding: 80px 7vw 80px 4.2vw;
}


/* =========================================
   TITLE
========================================= */

.trust-fanscreens-title {
    margin: 0 0 32px;

    font-size: clamp(44px, 4vw, 68px);
    line-height: 0.98;

    font-weight: 400;
    letter-spacing: -3px;

    color: #fff;
}


/* =========================================
   DESCRIPTION
========================================= */

.trust-fanscreens-description {
    max-width: 1050px;
}

.trust-fanscreens-description p {
    margin: 0 0 24px;

    font-size: 17px;
    line-height: 1.5;

    font-weight: 400;

    color: #fff;
}

.trust-fanscreens-description p:last-child {
    margin-bottom: 0;
}


/* =========================================
   POINTS / BADGES
========================================= */

.trust-fanscreens-points {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 22px;
}

.trust-point {
    display: inline-flex;
    align-items: center;

    min-height: 54px;

    padding: 0 24px;

    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 16px;

    color: #fff;

    font-size: 16px;
    line-height: 1;

    white-space: nowrap;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

.trust-point:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: #fff;
    transform: translateY(-2px);
}

.trust-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-right: 13px;

    font-size: 18px;
    font-weight: 600;

    color: #fff;
}


/* =========================================
   LARGE SCREENS
========================================= */

@media (min-width: 1600px) {

    .trust-fanscreens-section {
        grid-template-columns: 37% 63%;
    }

    .trust-fanscreens-inner {
        padding-left: 4vw;
        padding-right: 6vw;
    }

    .trust-fanscreens-description p {
        font-size: 18px;
    }

    .trust-point {
        font-size: 17px;
    }
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1100px) {

    .trust-fanscreens-section {
        grid-template-columns: 40% 60%;
        min-height: 650px;
    }

    .trust-fanscreens-image {
        min-height: 650px;
    }

    .trust-fanscreens-inner {
        padding: 60px 40px;
    }

    .trust-fanscreens-title {
        font-size: 48px;
        letter-spacing: -2px;
    }

    .trust-fanscreens-description p {
        font-size: 15px;
    }

    .trust-point {
        min-height: 48px;
        padding: 0 18px;
        font-size: 14px;
        border-radius: 14px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

    .trust-fanscreens-section {
        display: flex;
        flex-direction: column;

        min-height: auto;
    }

    .trust-fanscreens-image {
        width: 100%;
        height: 400px;
        min-height: 400px;
    }

    .trust-fanscreens-image img {
        object-position: center center;
    }

    .trust-fanscreens-content {
        width: 100%;
    }

    .trust-fanscreens-inner {
        padding: 60px 25px 70px;
    }

    .trust-fanscreens-title {
        font-size: 42px;
        line-height: 1;
        letter-spacing: -2px;

        margin-bottom: 30px;
    }

    .trust-fanscreens-description p {
        font-size: 16px;
        line-height: 1.55;
        margin-bottom: 22px;
    }

    .trust-fanscreens-points {
        gap: 10px;
        margin-top: 30px;
    }

    .trust-point {
        width: 100%;
        min-height: 52px;

        justify-content: flex-start;

        padding: 0 18px;

        font-size: 14px;
        border-radius: 14px;

        white-space: normal;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .trust-fanscreens-image {
        height: 300px;
        min-height: 300px;
    }

    .trust-fanscreens-inner {
        padding: 50px 20px 60px;
    }

    .trust-fanscreens-title {
        font-size: 36px;
        letter-spacing: -1.5px;
    }

    .trust-fanscreens-description p {
        font-size: 15px;
    }

    .trust-point {
        font-size: 14px;
    }
}
/* =========================================================
   CORE VALUES
========================================================= */

.core-values-section {
    position: relative;

    width: 100%;

    background: #ffffff;

    overflow: hidden;

    padding: 105px 0 115px;
}


/* =========================================================
   CONTAINER
========================================================= */

.core-values-container {
    width: calc(100% - 24%);

    max-width: 1125px;

    margin: 0 auto;
}


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

.core-values-heading {
    margin-bottom: 38px;
}


.core-values-label {
    margin-bottom: 12px;

    font-family: "Jost", sans-serif;

    font-size: 15px;

    line-height: 1.4;

    font-weight: 400;

    letter-spacing: 0.2px;

    color: #63788b;
}


.core-values-heading h2 {
    margin: 0;

    font-family: "Jost", sans-serif;

    font-size: 38px;

    line-height: 1;

    letter-spacing: -1.8px;

    font-weight: 400;

    color: #050505;
}


/* =========================================================
   VALUES LIST
========================================================= */

.core-values-list {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 12px;
}


/* =========================================================
   VALUE CARD
========================================================= */

.core-value-item {

    position: relative;

    min-height: 250px;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding: 30px;

    border: 1px solid #dedede;

    border-radius: 18px;

    background: #ffffff;

    overflow: hidden;

    box-sizing: border-box;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


.core-value-item:hover {

    transform: translateY(-6px);

    border-color: #bfc8ce;

    box-shadow:
        0 16px 35px rgba(20, 30, 40, 0.08);
}


/* =========================================================
   LARGE BACKGROUND NUMBER
========================================================= */

.core-value-number {

    position: absolute;

    top: 12px;
    right: 20px;

    font-family: "Jost", sans-serif;

    font-size: 92px;

    line-height: 1;

    font-weight: 400;

    letter-spacing: -6px;

    color: #63788b;

    pointer-events: none;

    user-select: none;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}


.core-value-item:hover .core-value-number {

    color: #63788b;

    transform: translateY(-4px);
}


/* =========================================================
   BLUE ACCENT
========================================================= */

.core-value-accent {

    width: 34px;

    height: 4px;

    margin-bottom: 22px;

    border-radius: 10px;

    background: #279ee8;

    transition:
        width 0.3s ease;
}


.core-value-item:hover .core-value-accent {

    width: 58px;
}


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

.core-value-content {

    position: relative;

    z-index: 2;

    max-width: 280px;
}


.core-value-content h3 {

    margin: 0 0 9px;

    font-family: "Jost", sans-serif;

    font-size: 25px;

    line-height: 1.05;

    letter-spacing: -1px;

    font-weight: 400;

    color: #050505;
}


.core-value-content p {

    margin: 0;

    font-family: "Jost", sans-serif;

    font-size: 16px;

    line-height: 1.45;

    font-weight: 400;

    color: #63788b;
}


/* =========================================================
   CARD ARROW
========================================================= */

.core-value-arrow {

    position: absolute;

    right: 27px;
    bottom: 25px;

    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 1px solid #d9dfe3;

    border-radius: 50%;

    font-family: Arial, sans-serif;

    font-size: 18px;

    color: #111111;

    opacity: 0.65;

    transition:
        transform 0.3s ease,
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}


.core-value-item:hover .core-value-arrow {

    transform: translateX(4px);

    background: #279ee8;

    border-color: #279ee8;

    color: #ffffff;

    opacity: 1;
}


/* =========================================================
   ACTION
========================================================= */

.core-values-action {

    margin-top: 30px;
}


.core-values-button {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 18px;

    min-height: 60px;

    padding:
        0
        27px;

    border-radius: 40px;

    background: #279ee8;

    color: #ffffff;

    font-family: "Jost", sans-serif;

    font-size: 16px;

    font-weight: 600;

    text-decoration: none;

    transition:
        transform 0.25s ease,
        background-color 0.25s ease,
        box-shadow 0.25s ease;
}


.core-values-button span {

    font-size: 19px;

    line-height: 1;

    transition:
        transform 0.25s ease;
}


.core-values-button:hover {

    background: #159ed9;

    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px
        rgba(39, 158, 232, 0.18);
}


.core-values-button:hover span {

    transform: translateX(4px);
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1600px) {

    .core-values-container {

        width: calc(100% - 24%);

        max-width: 1125px;
    }


    .core-values-heading h2 {

        font-size: 40px;
    }


    .core-value-item {

        min-height: 270px;

        padding: 34px;
    }


    .core-value-content h3 {

        font-size: 27px;
    }


    .core-value-content p {

        font-size: 17px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .core-values-section {

        padding:
            80px
            0
            90px;
    }


    .core-values-container {

        width: calc(100% - 80px);

        max-width: none;
    }


    .core-values-heading h2 {

        font-size: 34px;
    }


    .core-values-list {

        gap: 10px;
    }


    .core-value-item {

        min-height: 235px;

        padding: 25px;
    }


    .core-value-number {

        font-size: 75px;
    }


    .core-value-content h3 {

        font-size: 22px;
    }


    .core-value-content p {

        font-size: 15px;
    }


    .core-value-arrow {

        right: 20px;
        bottom: 20px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .core-values-section {

        padding:
            65px
            0
            75px;
    }


    .core-values-container {

        width: calc(100% - 40px);

        margin-left: 20px;
        margin-right: 20px;
    }


    .core-values-heading {

        margin-bottom: 30px;
    }


    .core-values-label {

        font-size: 14px;

        margin-bottom: 10px;
    }


    .core-values-heading h2 {

        font-size: 31px;

        line-height: 1.02;

        letter-spacing: -1.4px;
    }


    .core-values-list {

        display: flex;

        flex-direction: column;

        gap: 10px;
    }


    .core-value-item {

        min-height: 190px;

        padding: 25px;

        border-radius: 16px;
    }


    .core-value-number {

        top: 7px;

        right: 15px;

        font-size: 75px;

        letter-spacing: -5px;
    }


    .core-value-accent {

        width: 30px;

        height: 3px;

        margin-bottom: 17px;
    }


    .core-value-content {

        max-width: calc(100% - 35px);
    }


    .core-value-content h3 {

        font-size: 23px;

        letter-spacing: -0.8px;
    }


    .core-value-content p {

        font-size: 15.5px;

        line-height: 1.45;
    }


    .core-value-arrow {

        width: 34px;
        height: 34px;

        right: 20px;
        bottom: 20px;

        font-size: 16px;
    }


    .core-values-action {

        margin-top: 25px;
    }


    .core-values-button {

        min-height: 58px;

        padding:
            0
            25px;

        font-size: 16px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .core-values-section {

        padding:
            55px
            0
            65px;
    }


    .core-values-container {

        width: calc(100% - 30px);

        margin-left: 15px;
        margin-right: 15px;
    }


    .core-values-heading h2 {

        font-size: 29px;

        letter-spacing: -1.3px;
    }


    .core-value-item {

        min-height: 180px;

        padding: 22px;
    }


    .core-value-number {

        font-size: 65px;
    }


    .core-value-content h3 {

        font-size: 21px;
    }


    .core-value-content p {

        font-size: 15px;
    }


    .core-value-arrow {

        width: 32px;
        height: 32px;

        right: 17px;
        bottom: 17px;
    }


    .core-values-button {

        width: 100%;

        min-height: 58px;
    }

}




/* CONTACT US */
/* =========================================================
   CONTACT SECTION
========================================================= */

.contact-section {
    width: 100%;
    background: #ffffff;
    padding: 150px 0 80px;
    overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.contact-container {
    width: calc(80% - 80px);
    max-width: 1500px;
    margin: 0 auto;
}


/* =========================================================
   INTRO AREA
========================================================= */

.contact-intro {

    position: relative;

    min-height: 520px;

    display: flex;

    align-items: flex-start;

    overflow: hidden;
}


.contact-intro-content {

    position: relative;

    z-index: 5;

    width: 72%;
}


/* =========================================================
   EYEBROW
========================================================= */

.contact-eyebrow {

    display: block;

    margin-bottom: 14px;

    color: #637b8d;

    font-family: "Jost", sans-serif;

    font-size: 16px;

    font-weight: 400;

    line-height: 1.2;

    letter-spacing: 0.2px;
}


/* =========================================================
   TITLE
========================================================= */

.contact-title {

    margin: 0;

    max-width: 650px;

    color: #080808;

    font-family: "Jost", sans-serif;

    font-size: clamp(
        58px,
        5.5vw,
        82px
    );

    font-weight: 400;

    line-height: 0.94;

    letter-spacing: -4px;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.contact-description {

    max-width: 1050px;

    margin-top: 42px;
}


.contact-description p {

    max-width: 1050px;

    margin: 0 0 25px;

    color: #111111;

    font-family: "Jost", sans-serif;

    font-size: 18px;

    font-weight: 400;

    line-height: 1.55;
}


.contact-description p:last-child {

    margin-bottom: 0;
}


/* =========================================================
   CONTACT DECORATIVE SCREEN
========================================================= */

.contact-screen {
    position: absolute;
    z-index: 2;

    top: 5px;
    right: 10px;

    width: 240px;
    height: auto;

    pointer-events: none;
    opacity: 0.88;

    background: transparent;
    overflow: visible;
    border-radius: 0;
    box-shadow: none;
}

.contact-screen img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    object-fit: contain;
}
/* =========================================================
   SCREEN GRID
========================================================= */

.contact-screen-lines {

    position: absolute;

    top: -35px;
    left: -45px;

    width: calc(100% + 90px);
    height: calc(100% + 70px);

    transform:
        rotate(-1deg)
        scale(1.08);

    transform-origin: center;

    overflow: hidden;

    border-radius: 50%;
}


/* =========================================================
   HORIZONTAL SCREEN LINES
========================================================= */

.contact-screen-lines span {

    position: absolute;

    left: -8%;

    width: 116%;

    height: 42px;

    border-top:
        1px solid
        rgba(35, 35, 35, 0.42);

    border-radius: 50%;

    background: transparent;

    transform-origin: center;

    animation:
        contactHorizontalCurve
        14s
        ease-in-out
        infinite
        alternate;
}


/* =========================================================
   HORIZONTAL LINE POSITIONS
========================================================= */

.contact-screen-lines span:nth-child(1) {
    top: 2%;
}

.contact-screen-lines span:nth-child(2) {
    top: 5%;
}

.contact-screen-lines span:nth-child(3) {
    top: 8%;
}

.contact-screen-lines span:nth-child(4) {
    top: 11%;
}

.contact-screen-lines span:nth-child(5) {
    top: 14%;
}

.contact-screen-lines span:nth-child(6) {
    top: 17%;
}

.contact-screen-lines span:nth-child(7) {
    top: 20%;
}

.contact-screen-lines span:nth-child(8) {
    top: 23%;
}

.contact-screen-lines span:nth-child(9) {
    top: 26%;
}

.contact-screen-lines span:nth-child(10) {
    top: 29%;
}

.contact-screen-lines span:nth-child(11) {
    top: 32%;
}

.contact-screen-lines span:nth-child(12) {
    top: 35%;
}

.contact-screen-lines span:nth-child(13) {
    top: 38%;
}

.contact-screen-lines span:nth-child(14) {
    top: 41%;
}

.contact-screen-lines span:nth-child(15) {
    top: 44%;
}

.contact-screen-lines span:nth-child(16) {
    top: 47%;
}

.contact-screen-lines span:nth-child(17) {
    top: 50%;
}

.contact-screen-lines span:nth-child(18) {
    top: 53%;
}

.contact-screen-lines span:nth-child(19) {
    top: 56%;
}

.contact-screen-lines span:nth-child(20) {
    top: 59%;
}

.contact-screen-lines span:nth-child(21) {
    top: 62%;
}

.contact-screen-lines span:nth-child(22) {
    top: 65%;
}

.contact-screen-lines span:nth-child(23) {
    top: 68%;
}

.contact-screen-lines span:nth-child(24) {
    top: 71%;
}

.contact-screen-lines span:nth-child(25) {
    top: 74%;
}

.contact-screen-lines span:nth-child(26) {
    top: 77%;
}

.contact-screen-lines span:nth-child(27) {
    top: 80%;
}

.contact-screen-lines span:nth-child(28) {
    top: 83%;
}

.contact-screen-lines span:nth-child(29) {
    top: 86%;
}

.contact-screen-lines span:nth-child(30) {
    top: 89%;
}

.contact-screen-lines span:nth-child(31) {
    top: 92%;
}

.contact-screen-lines span:nth-child(32) {
    top: 95%;
}

.contact-screen-lines span:nth-child(33) {
    top: 98%;
}


/* =========================================================
   VERTICAL SCREEN LINES
========================================================= */

.contact-screen-lines span:nth-child(34) {
    left: 4%;
}

.contact-screen-lines span:nth-child(35) {
    left: 8%;
}

.contact-screen-lines span:nth-child(36) {
    left: 12%;
}

.contact-screen-lines span:nth-child(37) {
    left: 16%;
}

.contact-screen-lines span:nth-child(38) {
    left: 20%;
}

.contact-screen-lines span:nth-child(39) {
    left: 24%;
}

.contact-screen-lines span:nth-child(40) {
    left: 28%;
}

.contact-screen-lines span:nth-child(41) {
    left: 32%;
}

.contact-screen-lines span:nth-child(42) {
    left: 36%;
}

.contact-screen-lines span:nth-child(43) {
    left: 40%;
}

.contact-screen-lines span:nth-child(44) {
    left: 44%;
}

.contact-screen-lines span:nth-child(45) {
    left: 48%;
}

.contact-screen-lines span:nth-child(46) {
    left: 52%;
}

.contact-screen-lines span:nth-child(47) {
    left: 56%;
}

.contact-screen-lines span:nth-child(48) {
    left: 60%;
}

.contact-screen-lines span:nth-child(49) {
    left: 64%;
}

.contact-screen-lines span:nth-child(50) {
    left: 68%;
}

.contact-screen-lines span:nth-child(51) {
    left: 72%;
}

.contact-screen-lines span:nth-child(52) {
    left: 76%;
}

.contact-screen-lines span:nth-child(53) {
    left: 80%;
}

.contact-screen-lines span:nth-child(54) {
    left: 84%;
}

.contact-screen-lines span:nth-child(55) {
    left: 88%;
}

.contact-screen-lines span:nth-child(56) {
    left: 92%;
}

.contact-screen-lines span:nth-child(57) {
    left: 96%;
}


/* =========================================================
   VERTICAL LINE STYLE
========================================================= */

.contact-screen-lines span:nth-child(n + 34) {

    top: -8%;

    width: 42px;

    height: 116%;

    border-top: 0;

    border-left:
        1px solid
        rgba(35, 35, 35, 0.25);

    border-radius: 50%;

    transform-origin: center;

    animation:
        contactVerticalCurve
        16s
        ease-in-out
        infinite
        alternate;
}


/* =========================================================
   SPHERICAL PERSPECTIVE
========================================================= */

.contact-screen-lines span:nth-child(34),
.contact-screen-lines span:nth-child(57) {
    transform: scaleX(0.45);
}

.contact-screen-lines span:nth-child(35),
.contact-screen-lines span:nth-child(56) {
    transform: scaleX(0.58);
}

.contact-screen-lines span:nth-child(36),
.contact-screen-lines span:nth-child(55) {
    transform: scaleX(0.70);
}

.contact-screen-lines span:nth-child(37),
.contact-screen-lines span:nth-child(54) {
    transform: scaleX(0.80);
}

.contact-screen-lines span:nth-child(38),
.contact-screen-lines span:nth-child(53) {
    transform: scaleX(0.88);
}

.contact-screen-lines span:nth-child(39),
.contact-screen-lines span:nth-child(52) {
    transform: scaleX(0.94);
}

.contact-screen-lines span:nth-child(40),
.contact-screen-lines span:nth-child(51) {
    transform: scaleX(0.98);
}


/* =========================================================
   CENTER VERTICAL LINES
========================================================= */

.contact-screen-lines span:nth-child(41),
.contact-screen-lines span:nth-child(50) {
    transform: scaleX(1);
}

.contact-screen-lines span:nth-child(42),
.contact-screen-lines span:nth-child(49) {
    transform: scaleX(1);
}

.contact-screen-lines span:nth-child(43),
.contact-screen-lines span:nth-child(48) {
    transform: scaleX(1);
}

.contact-screen-lines span:nth-child(44),
.contact-screen-lines span:nth-child(47) {
    transform: scaleX(1);
}

.contact-screen-lines span:nth-child(45),
.contact-screen-lines span:nth-child(46) {
    transform: scaleX(1);
}


/* =========================================================
   HORIZONTAL CURVE ANIMATION
========================================================= */

@keyframes contactHorizontalCurve {

    0% {
        transform:
            translateX(-3px)
            scaleX(1)
            rotate(-0.7deg);
    }

    50% {
        transform:
            translateX(4px)
            scaleX(1.018)
            rotate(0.7deg);
    }

    100% {
        transform:
            translateX(-2px)
            scaleX(1.008)
            rotate(-0.4deg);
    }
}


/* =========================================================
   VERTICAL CURVE ANIMATION
========================================================= */

@keyframes contactVerticalCurve {

    0% {
        margin-left: -2px;
    }

    50% {
        margin-left: 2px;
    }

    100% {
        margin-left: -1px;
    }
}


/* =========================================================
   SCREEN LIGHT / DEPTH
========================================================= */

.contact-screen::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: 20;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.48),
            transparent 18%,
            transparent 82%,
            rgba(255,255,255,0.35)
        );

    opacity: 0.55;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .contact-screen {

        position: relative;

        top: auto;
        right: auto;

        width: 270px;
        height: 270px;

        margin: 30px auto 15px;

        opacity: 0.65;
    }

    .contact-screen-lines {

        top: -20px;
        left: -25px;

        width: calc(100% + 50px);
        height: calc(100% + 40px);

        transform:
            rotate(-1deg)
            scale(1.05);
    }
}


/* =========================================================
   SCREEN WAVE
========================================================= */

@keyframes contactScreenWave {

    0% {

        transform:
            translateX(-7%)
            scaleX(1)
            rotate(-1deg);
    }

    50% {

        transform:
            translateX(4%)
            scaleX(1.12)
            rotate(1deg);
    }

    100% {

        transform:
            translateX(-3%)
            scaleX(1.05)
            rotate(-1deg);
    }
}


/* =========================================================
   FORM WRAPPER
========================================================= */

.contact-form-wrapper {

    width: 100%;

    max-width: 1100px;

    margin-top: 30px;
}


/* =========================================================
   FORM
========================================================= */

.contact-form {

    width: 100%;
}


/* =========================================================
   TWO-COLUMN ROW
========================================================= */

.contact-form-row {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 28px;

    margin-bottom: 28px;
}


/* =========================================================
   FIELD
========================================================= */

.contact-field {

    display: flex;

    flex-direction: column;

    width: 100%;

    margin-bottom: 0px;
}


/* =========================================================
   LABEL
========================================================= */

.contact-field label {

    margin-bottom: 9px;

    color: #333333;

    font-family: "Jost", sans-serif;

    font-size: 15px;

    font-weight: 500;

    line-height: 1.3;
}


/* =========================================================
   INPUT / SELECT / TEXTAREA
========================================================= */

.contact-field input,
.contact-field select,
.contact-field textarea {

    width: 100%;

    box-sizing: border-box;

    border: 1px solid #d9dee5;

    border-radius: 7px;

    background: #f3f4f6;

    color: #111111;

    font-family: "Jost", sans-serif;

    font-size: 16px;

    font-weight: 400;

    outline: none;

    /* Subtle 3D / raised effect */
    box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}


/* =========================================================
   INPUT
========================================================= */

.contact-field input,
.contact-field select {

    height: 54px;

    padding:
        0
        17px;
}


/* =========================================================
   TEXTAREA
========================================================= */

.contact-field textarea {

    padding: 15px 17px;

    resize: vertical;
}


/* =========================================================
   FOCUS
========================================================= */

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {

    border-color: #bfc5cc;

    background: #ffffff;

    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 1);

    transform: translateY(-1px);
}


/* =========================================================
   HOVER
========================================================= */

.contact-field input:hover,
.contact-field select:hover,
.contact-field textarea:hover {

    border-color: #c9c9c9;

    box-shadow:
        0 3px 7px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* =========================================================
   TEXTAREA
========================================================= */

.contact-field textarea {

    min-height: 155px;

    padding:
        15px
        17px;

    resize: vertical;

    line-height: 1.5;
}


/* =========================================================
   PLACEHOLDER
========================================================= */

.contact-field input::placeholder,
.contact-field textarea::placeholder {

    color: #999999;

    opacity: 1;
}


/* =========================================================
   SELECT
========================================================= */

.contact-field select {

    appearance: none;

    padding-right: 45px;

    background-image:
        linear-gradient(45deg, transparent 50%, #777 50%),
        linear-gradient(135deg, #777 50%, transparent 50%);

    background-position:
        calc(100% - 19px) 22px,
        calc(100% - 14px) 22px;

    background-size:
        5px 5px,
        5px 5px;

    background-repeat: no-repeat;
}


/* =========================================================
   FOCUS
========================================================= */

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {

    border-color: #159ed9;

    background: #ffffff;

    box-shadow:
        0 0 0 3px
        rgba(21, 158, 217, 0.10);
}


/* =========================================================
   CONSENT
========================================================= */

.contact-consent {

    margin-top: 5px;

    margin-bottom: 28px;
}


.contact-checkbox {

    position: relative;

    display: flex;

    align-items: flex-start;

    gap: 12px;

    cursor: pointer;
}


/* Hide native checkbox */

.contact-checkbox input {

    position: absolute;

    width: 1px;

    height: 1px;

    opacity: 0;

    pointer-events: none;
}


/* Custom checkbox */

.contact-checkbox-mark {

    position: relative;

    display: block;

    width: 18px;

    height: 18px;

    flex: 0 0 18px;

    margin-top: 2px;

    border:
        1px solid #bcbcbc;

    border-radius: 3px;

    background: #ffffff;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}


/* Checked */

.contact-checkbox input:checked
+ .contact-checkbox-mark {

    border-color: #159ed9;

    background: #159ed9;
}


.contact-checkbox input:checked
+ .contact-checkbox-mark::after {

    content: "";

    position: absolute;

    left: 5px;

    top: 1px;

    width: 5px;

    height: 10px;

    border:
        solid #ffffff;

    border-width:
        0
        2px
        2px
        0;

    transform:
        rotate(45deg);
}


/* =========================================================
   CONSENT TEXT
========================================================= */

.contact-consent-text {

    max-width: 100%;

    color: #666666;

    font-family: "Jost", sans-serif;

    font-size: 13px;

    font-weight: 400;

    line-height: 1.55;
}


/* =========================================================
   SUBMIT
========================================================= */

.contact-submit {

    display: flex;

    align-items: center;
}


.contact-submit-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 16px;

    min-width: 125px;

    height: 52px;

    padding:
        0
        25px;

    border: 0;

    border-radius: 28px;

    background: #159ed9;

    color: #ffffff;

    font-family: "Jost", sans-serif;

    font-size: 16px;

    font-weight: 500;

    line-height: 1;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.contact-submit-button:hover {

    background: #159ed9;

    color: #ffffff;

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 20px
        rgba(21, 158, 217, 0.20);
}


.contact-submit-arrow {

    font-size: 20px;

    line-height: 1;

    transition:
        transform 0.2s ease;
}


.contact-submit-button:hover
.contact-submit-arrow {

    transform:
        translateX(4px);
}
/* =========================================================
   CONTACT — LARGE SCREENS
========================================================= */

@media (min-width: 1600px) {

    .contact-container {

        padding-left: 40px;
        padding-right: 40px;
    }

    .contact-title {

        font-size: 84px;
    }

    .contact-description p {

        font-size: 19px;
    }

    .contact-screen {

        right: 4%;

        width: 310px;

        height: 500px;
    }
}


/* =========================================================
   CONTACT — TABLET
========================================================= */

@media (max-width: 1100px) {

    .contact-container {
        width: calc(100% - 120px);
        max-width: 1500px;
        margin: 0 auto;
    }

    .contact-intro {
        min-height: 470px;
    }

    .contact-intro-content {
        width: 75%;
    }

    .contact-title {
        font-size: 62px;
        letter-spacing: -3px;
    }

    .contact-description {
        margin-top: 35px;
        max-width: 720px;
    }

    .contact-description p {
        font-size: 17px;
    }

    .contact-screen {
        right: -3%;
        width: 250px;
        height: 430px;
        opacity: 0.6;
    }

    .contact-form-wrapper {
        max-width: 100%;
    }
}

/* =========================================================
   CONTACT — MOBILE
========================================================= */

@media (max-width: 768px) {

    .contact-section {
        padding: 70px 0 80px;
    }

    .contact-container {
        width: calc(100% - 0px);
        max-width: none;
        margin: 0 auto;
    }


    /* =========================================
       INTRO
    ========================================= */

    .contact-intro {
        min-height: auto;
        display: block;
    }

    .contact-intro-content {
        width: 100%;
    }


    /* =========================================
       TITLE
    ========================================= */

    .contact-title {
        font-size: 50px;
        line-height: 0.96;
        letter-spacing: -2.5px;
    }


    /* =========================================
       DESCRIPTION
    ========================================= */

    .contact-description {
        position: relative;
        z-index: 5;

        margin-top: 32px;
        max-width: 100%;
    }

    .contact-description p {
        font-size: 16px;
        line-height: 1.55;
    }


    /* =========================================
       DECORATIVE SCREEN
    ========================================= */

    .contact-screen {
        position: relative;

        top: auto;
        right: auto;

        width: 190px;
        height: 300px;

        margin: 45px auto 20px;

        opacity: 0.55;
    }


    /* =========================================
       FORM
    ========================================= */

    .contact-form-wrapper {
        margin-top: 35px;
        width: 100%;
    }

    .contact-form-row {
        grid-template-columns: 1fr;
        gap: 0;
        margin-bottom: 0;
    }

    .contact-field {
        margin-bottom: 23px;
    }

    .contact-field input,
    .contact-field select {
        height: 52px;
    }

    .contact-field textarea {
        min-height: 150px;
    }


    /* =========================================
       CONSENT
    ========================================= */

    .contact-consent {
        margin-top: 5px;
        margin-bottom: 25px;
    }

    .contact-consent-text {
        font-size: 12px;
    }


    /* =========================================
       BUTTON
    ========================================= */

    .contact-submit-button {
        width: 100%;
    }
}


/* =========================================================
   CONTACT — SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .contact-container {

        padding:
            55px
            20px
            70px;
    }


    .contact-eyebrow {

        font-size: 14px;
    }


    .contact-title {

        font-size: 42px;

        letter-spacing: -2px;
    }


    .contact-description {

        margin-top: 28px;
    }


    .contact-description p {

        font-size: 15px;
    }


    .contact-screen {

        width: 165px;

        height: 270px;
    }


    .contact-field label {

        font-size: 14px;
    }


    .contact-field input,
    .contact-field select,
    .contact-field textarea {

        font-size: 15px;
    }
}












/* =========================================================
   SERVICES INTRO
========================================================= */

.service-detail-section {
    width: 100%;
    background: #ffffff;
}


/* =========================================================
   CONTAINER
========================================================= */

.service-container {
    width: calc(80% - 80px);
    max-width: 1500px;
    margin: 0 auto;

    position: relative;
    overflow: visible;
}


/* =========================================================
   SERVICE INTRO
========================================================= */

.service-intro {
    position: relative;

    min-height: 410px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        420px;

    gap: 70px;

    align-items: center;

    padding:
        150px
        0
        70px;
}


/* =========================================================
   COPY
========================================================= */

.service-copy {
    max-width: 1050px;
}


/* =========================================================
   LABEL
========================================================= */

.service-label {
    margin-bottom: 14px;

    font-size: 16px;

    line-height: 1.4;

    font-weight: 400;

    letter-spacing: 0.2px;

    color: #63788b;
}


/* =========================================================
   TITLE
========================================================= */

.service-title {
    margin: 0;

    max-width: 1000px;

    font-size:
        clamp(
            48px,
            5vw,
            76px
        );

    line-height: 0.95;

    letter-spacing: -3.5px;

    font-weight: 400;

    color: #050505;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.service-description {
    margin-top: 38px;

    max-width: 1050px;
}


.service-description p {
    margin: 0;

    font-size: 20px;

    line-height: 1.55;

    font-weight: 400;

    color: #111111;
}


/* =========================================================
   SERVICE VISUAL - DESKTOP
========================================================= */

.service-visual {
    position: absolute;

    /*
     * Keeps the image aligned with the actual
     * bottom-right edge of the viewport/container area.
     */
    left: calc(50% + 50vw - 600px);

    bottom: -40px;

    width: 600px;

    pointer-events: none;

    z-index: 2;
}


.service-visual img {
    display: block;

    width: 100%;

    height: auto;

    object-fit: contain;
}


/* =========================================================
   BLACK CONTENT SECTION
========================================================= */

.service-content-section {
    width: 100%;

    background: #000000;

    color: #ffffff;

    padding:
        90px
        0
        100px;
}


/* =========================================================
   CONTENT GRID
========================================================= */

.service-content-grid {
    display: grid;

    grid-template-columns:
        32%
        minmax(0, 1fr);

    gap: 70px;

    align-items: start;
}


/* =========================================================
   CONTENT HEADING
========================================================= */

.service-content-heading {
    padding-top: 5px;
}


.service-content-heading h2 {
    margin: 0;

    font-size: clamp(42px, 4vw, 58px);

    line-height: 1.02;

    letter-spacing: -2.5px;

    font-weight: 400;

    color: #ffffff;

    white-space: nowrap;
}


/* =========================================================
   CONTENT COPY
========================================================= */

.service-content-copy {
    max-width: 1050px;
}


.service-content-copy p {
    margin: 0 0 27px;

    font-size: 17px;

    line-height: 1.55;

    font-weight: 400;

    color: #ffffff;
}


.service-content-copy p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   LARGE SCREENS
========================================================= */

@media (min-width: 1600px) {

    .service-container {
        width: calc(80% - 80px);

        max-width: 1500px;
    }


    .service-intro {
        grid-template-columns:
            minmax(0, 1fr)
            450px;
    }


    .service-title {
        font-size: 78px;
    }


    .service-description p {
        font-size: 20px;
    }


    .service-visual {
        width: 600px;
    }


    .service-content-copy p {
        font-size: 18px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .service-container {
        width: calc(100% - 60px);
    }


    .service-intro {
        grid-template-columns:
            minmax(0, 1fr)
            280px;

        gap: 30px;

        padding:
            110px
            0
            60px;
    }


    .service-title {
        font-size:
            clamp(
                45px,
                5vw,
                65px
            );

        letter-spacing: -3px;
    }


    .service-description {
        margin-top: 30px;
    }


    .service-description p {
        font-size: 18px;
    }


    /*
     * Keep the image positioned outside the
     * normal tablet content area.
     */
    .service-visual {
        left: auto;

        right: -80px;

        bottom: -40px;

        width: 400px;
    }


    .service-content-section {
        padding:
            70px
            0
            80px;
    }


    .service-content-grid {
        grid-template-columns:
            30%
            minmax(0, 1fr);

        gap: 45px;
    }


    .service-content-heading h2 {
        font-size: 42px;

        letter-spacing: -2px;
    }


    .service-content-copy p {
        font-size: 16px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .services-section {
        padding: 70px 0 80px;
    }
    .service-detail-section {
        width: 100%;
    }


    /* -----------------------------------------
       CONTAINER
    ----------------------------------------- */

    .service-container {
        width: calc(100% - 30px);

        max-width: none;

        margin: 0 auto;

        position: relative;

        overflow: visible;
    }


    /* -----------------------------------------
       INTRO
    ----------------------------------------- */

    .service-intro {
        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 0;

        min-height: auto;

        padding:
            75px
            0
            0;
    }


    /* -----------------------------------------
       COPY
    ----------------------------------------- */

    .service-copy {
        width: 100%;

        max-width: none;
    }


    /* -----------------------------------------
       LABEL
    ----------------------------------------- */

    .service-label {
        font-size: 14px;

        margin-bottom: 12px;
    }


    /* -----------------------------------------
       TITLE
    ----------------------------------------- */

    .service-title {
        font-size: 48px;

        line-height: 0.98;

        letter-spacing: -2.5px;

        max-width: 100%;
    }


    /* -----------------------------------------
       DESCRIPTION
    ----------------------------------------- */

    .service-description {
        margin-top: 30px;

        max-width: 100%;
    }


    .service-description p {
        font-size: 17px;

        line-height: 1.55;
    }


    /* -----------------------------------------
       SERVICE IMAGE
       
       IMPORTANT:
       Reset the desktop absolute positioning.
       The image now becomes a normal flex item,
       therefore it appears AFTER the description.
    ----------------------------------------- */

    .service-visual {
        position: relative;

        left: auto;

        right: auto;

        bottom: auto;

        width: 100%;

        height: auto;

        min-height: 0;

        margin-top: 30px;

        display: flex;

        justify-content: flex-end;

        align-items: flex-end;

        overflow: visible;

        pointer-events: none;

        z-index: 2;
    }


    .service-visual img {
        display: block;

        width: 380px;

        max-width: 100%;

        height: auto;

        margin-left: auto;
    }


    /* -----------------------------------------
       BLACK SECTION
    ----------------------------------------- */

    .service-content-section {
        padding:
            60px
            0
            70px;
    }


    .service-content-grid {
        display: flex;

        flex-direction: column;

        gap: 35px;
    }


    .service-content-heading {
        width: 100%;
    }


    .service-content-heading h2 {
        font-size: 42px;

        line-height: 1;

        letter-spacing: -2px;
    }


    .service-content-copy {
        width: 100%;
    }


    .service-content-copy p {
        font-size: 16px;

        line-height: 1.55;

        margin-bottom: 24px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    /* -----------------------------------------
       CONTAINER
       
       KEEP THE ORIGINAL PADDING.
       This preserves the top spacing needed
       to show the SERVICES label.
    ----------------------------------------- */

    .service-container {
        width: calc(100% - 30px);

        max-width: none;

        margin: 0 auto;

        padding: 70px 0 80px;
    }


    /* -----------------------------------------
       INTRO
       
       Keep the top padding so SERVICES remains
       visible, but offset the bottom by 80px
       to consume the container's bottom padding.
    ----------------------------------------- */

    .service-intro {
        padding-top: 60px;

        margin-bottom: -80px;
    }


    /* -----------------------------------------
       TITLE
    ----------------------------------------- */

    .service-title {
        font-size: 39px;

        letter-spacing: -2px;
    }


    /* -----------------------------------------
       DESCRIPTION
    ----------------------------------------- */

    .service-description {
        margin-top: 27px;
    }


    .service-description p {
        font-size: 16px;

        line-height: 1.55;
    }


    /* -----------------------------------------
       SERVICE IMAGE
    ----------------------------------------- */

    .service-visual {
        margin-top: 25px;

        width: 100%;

        height: auto;

        min-height: 0;

        display: flex;

        justify-content: flex-end;

        align-items: flex-end;

        overflow: visible;
    }


    .service-visual img {
        width: 300px;

        max-width: 100%;

        height: auto;

        margin-left: auto;
    }


    /* -----------------------------------------
       BLACK SECTION
    ----------------------------------------- */

    .service-content-section {
        padding:
            50px
            0
            60px;
    }


    .service-content-heading h2 {
        font-size: 36px;

        letter-spacing: -1.8px;
    }


    .service-content-copy p {
        font-size: 15px;

        line-height: 1.55;
    }

}




/* SERVICES DETAILS */
/* =========================================
   BUILDING CAMPAIGNS
========================================= */

.campaign-section {
    width: 100%;
    background: #ffffff;
    padding: 80px 0 90px;
}


.campaign-container {
    width: calc(80% - 80px);
    max-width: 1500px;
    margin: 0 auto;
}


/* =========================================
   INTRO
========================================= */

.campaign-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}


.campaign-intro-content {
    flex: 1;
    min-width: 0;
}


.campaign-title {
    margin: 0;

    font-size: clamp(42px, 4vw, 60px);
    line-height: 0.98;

    font-weight: 400;
    letter-spacing: -3px;

    color: #050505;
}


.campaign-description {
    max-width: 900px;

    margin: 8px 0 0;

    font-size: 16px;
    line-height: 1.45;

    font-weight: 400;

    color: #63788b;
}


/* =========================================
   CTA
========================================= */

.campaign-cta {
    flex: 0 0 auto;
}


.campaign-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 177px;
    height: 54px;

    padding: 0 30px;

    border-radius: 30px;

    background: #249de0;
    color: #ffffff;

    font-size: 16px;
    font-weight: 500;

    line-height: 1;
    text-decoration: none;

    transition:
        background-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.campaign-button:hover {
    background: #168dcc;
    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px
        rgba(36, 157, 224, 0.20);
}


/* =========================================
   DIVIDER
========================================= */

.campaign-divider {
    width: 100%;

    height: 1px;

    margin-top: 25px;

    background: #dddddd;
}


/* =========================================
   SERVICE GRID
========================================= */

.campaign-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr)
        minmax(0, 1fr);

    grid-template-areas:
        "blogging ad-design vendors"
        "landing  landing  vendors"
        "budget   budget   reports";

    gap: 10px;

    margin-top: 80px;
}


/* =========================================
   CARDS
========================================= */

.campaign-card {
    min-width: 0;

    padding: 30px;

    border:
        1px solid #b8b8b8;

    border-radius: 14px;

    background: #f7f7f7;

    box-sizing: border-box;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}


.campaign-card:hover {
    background: #fafafa;

    border-color: #9e9e9e;

    transform: translateY(-2px);
}


/* =========================================
   GRID POSITIONS
========================================= */

.campaign-card-blogging {
    grid-area: blogging;
}


.campaign-card-ad-design {
    grid-area: ad-design;
}


.campaign-card-vendors {
    grid-area: vendors;
}


.campaign-card-landing {
    grid-area: landing;
}


.campaign-card-budget {
    grid-area: budget;
}


.campaign-card-reports {
    grid-area: reports;
}


/* =========================================
   CARD TYPOGRAPHY
========================================= */

.campaign-card h3 {
    margin: 0 0 17px;

    font-size: 20px;

    line-height: 1.25;

    font-weight: 400;

    letter-spacing: -0.6px;

    color: #111111;
}


.campaign-card p {
    margin: 0;

    font-size: 16px;

    line-height: 1.5;

    font-weight: 400;

    color: #63788b;
}


/* =========================================
   TALL VENDOR CARD
========================================= */

.campaign-card-vendors {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-height: 325px;
}


/* =========================================
   LANDING PAGE
========================================= */

.campaign-card-landing {
    min-height: 162px;
}


/* =========================================
   BUDGET / REPORTS
========================================= */

.campaign-card-budget,
.campaign-card-reports {
    min-height: 180px;
}


/* =========================================
   LARGE SCREENS
========================================= */

@media (min-width: 1600px) {

    .campaign-container {
        padding-left: 40px;
        padding-right: 40px;
    }


    .campaign-title {
        font-size: 62px;
    }


    .campaign-description {
        font-size: 17px;
    }


    .campaign-card {
        padding: 32px;
    }


    .campaign-card h3 {
        font-size: 21px;
    }


    .campaign-card p {
        font-size: 17px;
    }
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1100px) {

    .campaign-container {
        width: calc(100% - 60px);
    }


    .campaign-intro {
        gap: 30px;
    }


    .campaign-title {
        font-size: 44px;
        letter-spacing: -2.5px;
    }


    .campaign-description {
        font-size: 15px;
    }


    .campaign-button {
        min-width: 160px;
        height: 50px;

        padding: 0 24px;

        font-size: 15px;
    }


    .campaign-grid {
        margin-top: 60px;
    }


    .campaign-card {
        padding: 25px;
    }


    .campaign-card h3 {
        font-size: 19px;
    }


    .campaign-card p {
        font-size: 15px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

    .campaign-section {
        padding: 55px 0 70px;
    }


    .campaign-container {
        width: calc(100% - 40px);
    }


    /* -----------------------------------------
       INTRO
    ----------------------------------------- */

    .campaign-intro {
        display: flex;
        flex-direction: column;

        align-items: flex-start;

        gap: 28px;
    }


    .campaign-title {
        font-size: 44px;

        line-height: 0.98;

        letter-spacing: -2.5px;
    }


    .campaign-description {
        margin-top: 20px;

        font-size: 16px;

        line-height: 1.5;
    }


    /* -----------------------------------------
       CTA
    ----------------------------------------- */

    .campaign-cta {
        width: 100%;
    }


    .campaign-button {
        width: 100%;
    }


    /* -----------------------------------------
       DIVIDER
    ----------------------------------------- */

    .campaign-divider {
        margin-top: 35px;
    }


    /* -----------------------------------------
       GRID
    ----------------------------------------- */

    .campaign-grid {

        display: grid;

        grid-template-columns: 1fr;

        grid-template-areas:
            "blogging"
            "ad-design"
            "vendors"
            "landing"
            "budget"
            "reports";

        gap: 12px;

        margin-top: 45px;
    }


    /* -----------------------------------------
       CARDS
    ----------------------------------------- */

    .campaign-card {

        min-height: auto;

        padding: 28px;

        border-radius: 14px;
    }


    .campaign-card-vendors {

        min-height: auto;

        justify-content: flex-start;
    }


    .campaign-card-landing,
    .campaign-card-budget,
    .campaign-card-reports {

        min-height: auto;
    }


    .campaign-card h3 {

        margin-bottom: 12px;

        font-size: 20px;
    }


    .campaign-card p {

        font-size: 16px;

        line-height: 1.5;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .campaign-container {
        width: calc(100% - 30px);
    }


    .campaign-section {
        padding: 50px 0 60px;
    }


    .campaign-title {
        font-size: 38px;

        letter-spacing: -2px;
    }


    .campaign-description {
        font-size: 15px;
    }


    .campaign-card {
        padding: 24px;
    }


    .campaign-card h3 {
        font-size: 19px;
    }


    .campaign-card p {
        font-size: 15px;
    }
}

/* CAMPAIGN CARDS ICON */
.campaign-card-icon {

    display: flex;

    align-items: center;

    justify-content: flex-start;

    margin-bottom: 28px;
}


.campaign-card-icon span {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 72px;

    height: 72px;

    border-radius: 18px;

    font-size: 30px;

    line-height: 1;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

/* =========================================================
   CONVERSION RATE OPTIMIZATION — 2 COLUMN GRID
========================================================= */

.campaign-grid-two-columns {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 32px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .campaign-grid-two-columns {

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 24px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .campaign-grid-two-columns {

        grid-template-columns: 1fr;

        gap: 24px;
    }

}

/* =========================================================
   INDIVIDUAL ICON COLORS
========================================================= */

.icon-responsive {

    color: #159ed9;

    background: rgba(21, 158, 217, 0.10);
}


.icon-ux {

    color: #7b61ff;

    background: rgba(123, 97, 255, 0.10);
}


.icon-development {

    color: #16a085;

    background: rgba(22, 160, 133, 0.10);
}


.icon-design {

    color: #e67e22;

    background: rgba(230, 126, 34, 0.10);
}


/* =========================================================
   HOVER
========================================================= */

.campaign-card:hover .campaign-card-icon span {

    transform: translateY(-4px);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.08);
}


/* =========================================================
   ICON SIZE — LARGE SCREENS
========================================================= */

@media (min-width: 1101px) {

    .campaign-card-icon span {

        width: 78px;

        height: 78px;

        border-radius: 20px;

        font-size: 32px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .campaign-card-icon {

        margin-bottom: 22px;
    }


    .campaign-card-icon span {

        width: 64px;

        height: 64px;

        border-radius: 16px;

        font-size: 27px;
    }

}

/* =========================================================
   SOCIAL MEDIA ICON COLORS
========================================================= */

.icon-google {
    color: #4285f4;
    background: rgba(66, 133, 244, 0.10);
}


.icon-facebook {
    color: #1877f2;
    background: rgba(24, 119, 242, 0.10);
}


.icon-x-twitter {
    color: #111111;
    background: rgba(17, 17, 17, 0.07);
}

.icon-x-twitter img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    display: block;
}

.icon-linkedin {
    color: #0a66c2;
    background: rgba(10, 102, 194, 0.10);
}

/* =========================================================
   EMAIL MARKETING ICON COLORS
========================================================= */

.icon-sales {

    color: #e67e22;

    background: rgba(230, 126, 34, 0.10);
}


.icon-newsletter {

    color: #159ed9;

    background: rgba(21, 158, 217, 0.10);
}


.icon-lead {

    color: #16a085;

    background: rgba(22, 160, 133, 0.10);
}


.icon-reviews {

    color: #7b61ff;

    background: rgba(123, 97, 255, 0.10);
}

/* =========================================================
   LANDING PAGE ICON COLORS
========================================================= */

.icon-targeted {

    color: #159ed9;

    background: rgba(21, 158, 217, 0.10);
}


.icon-headlines {

    color: #7b61ff;

    background: rgba(123, 97, 255, 0.10);
}


.icon-cta {

    color: #16a085;

    background: rgba(22, 160, 133, 0.10);
}


.icon-attractive {

    color: #e67e22;

    background: rgba(230, 126, 34, 0.10);
}

/* =========================================================
   SEO ICON COLORS
========================================================= */

.icon-blogging {

    color: #e74c3c;

    background: rgba(231, 76, 60, 0.10);
}


.icon-search-engines {

    color: #4285f4;

    background: rgba(66, 133, 244, 0.10);
}


.icon-onpage {

    color: #8e44ad;

    background: rgba(142, 68, 173, 0.10);
}


.icon-keyword {

    color: #f39c12;

    background: rgba(243, 156, 18, 0.10);
}


.icon-backlinks {

    color: #16a085;

    background: rgba(22, 160, 133, 0.10);
}


.icon-directories {

    color: #3498db;

    background: rgba(52, 152, 219, 0.10);
}


.icon-traffic {

    color: #9b59b6;

    background: rgba(155, 89, 182, 0.10);
}


.icon-local-seo {

    color: #27ae60;

    background: rgba(39, 174, 96, 0.10);
}


.icon-webmaster {

    color: #e67e22;

    background: rgba(230, 126, 34, 0.10);
}

/* =========================================================
   CAMPAIGN / ADVERTISING ICON COLORS
========================================================= */

.icon-blogging {

    color: #e74c3c;

    background: rgba(231, 76, 60, 0.10);
}


.icon-ad-design {

    color: #e67e22;

    background: rgba(230, 126, 34, 0.10);
}


.icon-vendors {

    color: #16a085;

    background: rgba(22, 160, 133, 0.10);
}


.icon-landing {

    color: #7b61ff;

    background: rgba(123, 97, 255, 0.10);
}


.icon-budget {

    color: #159ed9;

    background: rgba(21, 158, 217, 0.10);
}


.icon-reports {

    color: #27ae60;

    background: rgba(39, 174, 96, 0.10);
}





/* Activate 360 */
/* =========================================================
   ACTIVATE 360
========================================================= */

.activate360-section {
    position: relative;
    width: 100%;
    background: #ffffff;
    overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.activate360-container {
    width: calc(80% - 80px);
    max-width: 1500px;
    margin: 0 auto;
}


/* =========================================================
   HERO
========================================================= */

.activate360-hero {
    position: relative;
    min-height: 562px;

    display: flex;
    align-items: center;

    padding: 90px 0 0px;
}


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

.activate360-copy {
    position: relative;
    z-index: 5;

    width: 100%;
    max-width: 1050px;
    padding: 70px 0 70px;
}


/* =========================================================
   LABEL
========================================================= */

.activate360-label {
    margin-bottom: 18px;

    font-size: 16px;
    line-height: 1.4;

    font-weight: 400;
    letter-spacing: 0.2px;

    color: #63788b;
}


/* =========================================================
   TITLE
========================================================= */

.activate360-title {
    margin: 0;

    max-width: 1000px;

    font-size: clamp(48px, 5vw, 76px);

    line-height: 0.95;
    letter-spacing: -3.5px;

    font-weight: 400;

    color: #050505;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.activate360-description {
    margin-top: 40px;
    max-width: 1050px;
}

.activate360-description p {
    margin: 0;

    max-width: 1050px;

    font-size: 20px;
    line-height: 1.55;

    font-weight: 400;

    color: #111111;
}


/* =========================================================
   BUTTON
========================================================= */

.activate360-action {
    margin-top: 28px;
}

.activate360-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 184px;
    height: 68px;

    padding: 0 32px;

    background: #279ee8;

    color: #ffffff;

    border-radius: 40px;

    font-family: "Jost", sans-serif;

    font-size: 17px;
    font-weight: 600;

    line-height: 1;

    text-decoration: none;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease;
}

.activate360-button:hover {
    background: #159ed9;
    color: #ffffff;
    transform: translateY(-2px);
}


/* =========================================================
   DECORATIVE SCREEN
========================================================= */

.activate360-visual {
    position: absolute;

    top: -35px;
    right: -70px;

    width: 570px;
    height: 380px;

    z-index: 1;

    pointer-events: none;

    overflow: visible;

    opacity: 0.9;
}


/* =========================================================
   SCREEN BODY
========================================================= */

.activate360-screen {
    position: absolute;

    inset: 0;

    overflow: hidden;

    background: #ffffff;

    /*
     * Large organic curved shape.
     */
    border-radius:
        0
        0
        130px
        90px;

    clip-path: polygon(
        0 0,
        100% 0,
        100% 64%,

        98% 66%,
        96% 68%,
        94% 70%,
        92% 73%,
        90% 76%,
        88% 79%,
        85% 82%,
        82% 85%,
        79% 88%,
        75% 90%,
        71% 92%,
        67% 93%,
        63% 94%,
        59% 94%,
        55% 93%,
        51% 91%,
        47% 88%,
        43% 85%,
        39% 82%,
        35% 79%,
        31% 77%,
        27% 76%,
        23% 76%,
        19% 77%,
        15% 78%,
        11% 78%,
        8% 77%,
        5% 75%,
        2% 72%,
        0 68%
    );
}


/* =========================================================
   SCREEN GRID
========================================================= */

.activate360-screen-lines {
    position: absolute;

    top: -45px;
    left: -60px;

    width: calc(100% + 120px);
    height: calc(100% + 90px);

    transform:
        rotate(-2deg)
        scale(1.08);

    transform-origin: center;

    overflow: visible;
}


/* =========================================================
   CURVED HORIZONTAL LINES
========================================================= */

.activate360-horizontal {
    position: absolute;

    left: -5%;
    width: 110%;

    height: 55px;

    /*
     * The border becomes the curved line.
     */
    border-top:
        1px solid
        rgba(25, 25, 25, 0.42);

    border-radius: 50%;

    background: transparent;

    transform-origin: center;

    animation:
        activate360HorizontalCurve
        12s
        ease-in-out
        infinite
        alternate;
}


/*
 * Instead of straight horizontal lines,
 * every line is a shallow curved arc.
 */

.activate360-horizontal:nth-child(1) {
    top: 2%;
}

.activate360-horizontal:nth-child(2) {
    top: 5%;
}

.activate360-horizontal:nth-child(3) {
    top: 8%;
}

.activate360-horizontal:nth-child(4) {
    top: 11%;
}

.activate360-horizontal:nth-child(5) {
    top: 14%;
}

.activate360-horizontal:nth-child(6) {
    top: 17%;
}

.activate360-horizontal:nth-child(7) {
    top: 20%;
}

.activate360-horizontal:nth-child(8) {
    top: 23%;
}

.activate360-horizontal:nth-child(9) {
    top: 26%;
}

.activate360-horizontal:nth-child(10) {
    top: 29%;
}

.activate360-horizontal:nth-child(11) {
    top: 32%;
}

.activate360-horizontal:nth-child(12) {
    top: 35%;
}

.activate360-horizontal:nth-child(13) {
    top: 38%;
}

.activate360-horizontal:nth-child(14) {
    top: 41%;
}

.activate360-horizontal:nth-child(15) {
    top: 44%;
}

.activate360-horizontal:nth-child(16) {
    top: 47%;
}

.activate360-horizontal:nth-child(17) {
    top: 50%;
}

.activate360-horizontal:nth-child(18) {
    top: 53%;
}

.activate360-horizontal:nth-child(19) {
    top: 56%;
}

.activate360-horizontal:nth-child(20) {
    top: 59%;
}

.activate360-horizontal:nth-child(21) {
    top: 62%;
}

.activate360-horizontal:nth-child(22) {
    top: 65%;
}

.activate360-horizontal:nth-child(23) {
    top: 68%;
}

.activate360-horizontal:nth-child(24) {
    top: 71%;
}

.activate360-horizontal:nth-child(25) {
    top: 74%;
}

.activate360-horizontal:nth-child(26) {
    top: 77%;
}

.activate360-horizontal:nth-child(27) {
    top: 80%;
}

.activate360-horizontal:nth-child(28) {
    top: 83%;
}

.activate360-horizontal:nth-child(29) {
    top: 86%;
}

.activate360-horizontal:nth-child(30) {
    top: 89%;
}

.activate360-horizontal:nth-child(31) {
    top: 92%;
}

.activate360-horizontal:nth-child(32) {
    top: 95%;
}


/* =========================================================
   CURVED VERTICAL LINES
========================================================= */

.activate360-vertical {
    position: absolute;

    top: -10%;
    bottom: -10%;

    width: 45px;

    /*
     * Curved vertical stroke.
     */
    border-left:
        1px solid
        rgba(25, 25, 25, 0.20);

    border-radius: 50%;

    background: transparent;

    transform-origin: center;

    animation:
        activate360VerticalCurve
        15s
        ease-in-out
        infinite
        alternate;
}


/*
 * Narrow curved columns.
 */

.activate360-vertical:nth-child(33) {
    left: 4%;
}

.activate360-vertical:nth-child(34) {
    left: 8%;
}

.activate360-vertical:nth-child(35) {
    left: 12%;
}

.activate360-vertical:nth-child(36) {
    left: 16%;
}

.activate360-vertical:nth-child(37) {
    left: 20%;
}

.activate360-vertical:nth-child(38) {
    left: 24%;
}

.activate360-vertical:nth-child(39) {
    left: 28%;
}

.activate360-vertical:nth-child(40) {
    left: 32%;
}

.activate360-vertical:nth-child(41) {
    left: 36%;
}

.activate360-vertical:nth-child(42) {
    left: 40%;
}

.activate360-vertical:nth-child(43) {
    left: 44%;
}

.activate360-vertical:nth-child(44) {
    left: 48%;
}

.activate360-vertical:nth-child(45) {
    left: 52%;
}

.activate360-vertical:nth-child(46) {
    left: 56%;
}

.activate360-vertical:nth-child(47) {
    left: 60%;
}

.activate360-vertical:nth-child(48) {
    left: 64%;
}

.activate360-vertical:nth-child(49) {
    left: 68%;
}

.activate360-vertical:nth-child(50) {
    left: 72%;
}

.activate360-vertical:nth-child(51) {
    left: 76%;
}

.activate360-vertical:nth-child(52) {
    left: 80%;
}

.activate360-vertical:nth-child(53) {
    left: 84%;
}

.activate360-vertical:nth-child(54) {
    left: 88%;
}

.activate360-vertical:nth-child(55) {
    left: 92%;
}

.activate360-vertical:nth-child(56) {
    left: 96%;
}


/* =========================================================
   HORIZONTAL CURVE ANIMATION
========================================================= */

@keyframes activate360HorizontalCurve {

    0% {
        transform:
            translateX(-4px)
            scaleX(1)
            rotate(-1deg);
    }

    50% {
        transform:
            translateX(5px)
            scaleX(1.025)
            rotate(1deg);
    }

    100% {
        transform:
            translateX(-3px)
            scaleX(1.01)
            rotate(-0.5deg);
    }
}


/* =========================================================
   VERTICAL CURVE ANIMATION
========================================================= */

@keyframes activate360VerticalCurve {

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

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

    100% {
        transform:
            translateX(-1px)
            rotate(-0.5deg);
    }
}


/* =========================================================
   EXTRA WAVE OVERLAY
========================================================= */

.activate360-screen::before {

    content: "";

    position: absolute;

    left: -10%;
    top: 38%;

    width: 120%;
    height: 120px;

    border-top:
        1px solid
        rgba(20, 20, 20, 0.18);

    border-radius: 50%;

    transform:
        rotate(-3deg)
        scaleX(1.05);

    pointer-events: none;

    z-index: 3;
}


/* =========================================================
   SCREEN LIGHT
========================================================= */

.activate360-screen::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.48),
            transparent 20%,
            transparent 80%,
            rgba(255,255,255,0.35)
        );

    opacity: 0.5;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1600px) {

    .activate360-container {
        width: calc(80% - 80px);
        max-width: 1500px;
    }

    .activate360-title {
        font-size: 78px;
    }

    .activate360-description p {
        font-size: 20px;
    }

    .activate360-visual {
        width: 620px;
        height: 400px;

        right: -90px;
        top: -35px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .activate360-container {
        width: calc(80% - 80px);
    }

    .activate360-hero {
        min-height: 520px;

        padding:
            100px
            0
            60px;
    }

    .activate360-title {

        font-size:
            clamp(
                45px,
                5vw,
                65px
            );

        letter-spacing: -3px;
    }

    .activate360-description {
        margin-top: 30px;
    }

    .activate360-description p {
        font-size: 18px;
    }

    .activate360-visual {

        width: 450px;
        height: 300px;

        right: -80px;
        top: -20px;

        opacity: 0.68;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .activate360-container {
        width: calc(80% - 30px);
    }

    .activate360-hero {

        min-height: auto;

        display: flex;
        flex-direction: column;
        align-items: flex-start;

        padding:
            75px
            0
            70px;
    }

    .activate360-copy {
        width: 100%;
    }

    .activate360-label {

        font-size: 14px;

        margin-bottom: 12px;
    }

    .activate360-title {

        font-size: 48px;

        line-height: 0.98;

        letter-spacing: -2.5px;
    }

    .activate360-description {

        margin-top: 30px;

        max-width: 100%;
    }

    .activate360-description p {

        font-size: 17px;

        line-height: 1.55;
    }

    .activate360-action {
        margin-top: 28px;
    }

    .activate360-button {

        min-width: 175px;

        height: 62px;

        font-size: 16px;
    }

    .activate360-visual {

        top: -15px;

        right: -145px;

        width: 370px;
        height: 245px;

        opacity: 0.35;
    }

    .activate360-screen {
        border-radius:
            0
            0
            85px
            55px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .activate360-container {
        width: calc(100% - 30px);
    }

    .activate360-hero {
        padding-top: 65px;
    }

    .activate360-title {

        font-size: 39px;

        letter-spacing: -2px;
    }

    .activate360-description {
        margin-top: 27px;
    }

    .activate360-description p {
        font-size: 16px;
    }

    .activate360-button {

        min-width: 165px;

        height: 58px;

        padding: 0 27px;

        font-size: 15px;
    }

    .activate360-visual {

        top: -10px;

        right: -165px;

        width: 335px;
        height: 220px;

        opacity: 0.28;
    }
}



/* =========================================================
   ACTIVATE 360 — DETAILS
========================================================= */

.activate360-details {
    position: relative;

    width: 100%;

    background: #ffffff;

    overflow: hidden;
}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.activate360-details-container {

    /*
     * The screenshot intentionally leaves a lot of
     * whitespace on the left.
     */

    width: 46%;

    max-width: 900px;

    margin-left: 36.2%;
    margin-right: auto;

    padding-top: 0px;
    padding-bottom: 70px;
}


/* =========================================================
   INTRO
========================================================= */

.activate360-details-intro {
    width: 100%;
}


/* =========================================================
   MAIN TITLE
========================================================= */

.activate360-details-title {

    margin: 0;

    font-family: "Jost", sans-serif;

    font-size: 50px;

    line-height: 0.96;

    letter-spacing: -2.7px;

    font-weight: 400;

    color: #050505;
}


/* =========================================================
   INTRO DESCRIPTION
========================================================= */

.activate360-details-description {

    margin-top: 34px;

    width: 100%;
}


.activate360-details-description p {

    margin: 0;

    font-family: "Jost", sans-serif;

    font-size: 17px;

    line-height: 1.42;

    font-weight: 400;

    letter-spacing: -0.25px;

    color: #090909;
}


.activate360-details-description p + p {

    margin-top: 26px;

}


/* =========================================================
   THREE PILLARS
========================================================= */

.activate360-pillars {

    margin-top: 29px;

    width: 100%;
}


/* =========================================================
   PILLARS HEADING
========================================================= */

.activate360-pillars-title {

    margin: 0 0 28px;

    font-family: "Jost", sans-serif;

    font-size: 36px;

    line-height: 1;

    letter-spacing: -1.8px;

    font-weight: 400;

    color: #050505;
}


/* =========================================================
   INDIVIDUAL PILLAR
========================================================= */

.activate360-pillar {

    margin: 0;

    padding: 0;
}


.activate360-pillar + .activate360-pillar {

    margin-top: 28px;

}


/* =========================================================
   PILLAR TITLE
========================================================= */

.activate360-pillar-title {

    margin: 0;

    font-family: "Jost", sans-serif;

    font-size: 29px;

    line-height: 1;

    letter-spacing: -1.35px;

    font-weight: 400;

    color: #050505;
}


/* =========================================================
   PILLAR DESCRIPTION
========================================================= */

.activate360-pillar-description {

    margin: 4px 0 0;

    font-family: "Jost", sans-serif;

    font-size: 17px;

    line-height: 1.35;

    letter-spacing: -0.25px;

    font-weight: 400;

    color: #090909;
}


/* =========================================================
   ACTION
========================================================= */

.activate360-details-action {

    margin-top: 31px;

}


/* =========================================================
   BUTTON
========================================================= */

.activate360-details-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 221px;

    height: 68px;

    padding: 0 34px;

    border-radius: 40px;

    background: #279ee8;

    color: #ffffff;

    font-family: "Jost", sans-serif;

    font-size: 17px;

    font-weight: 600;

    line-height: 1;

    text-decoration: none;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}


.activate360-details-button:hover {

    background: #159ed9;

    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px
        rgba(39, 158, 232, 0.18);
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1600px) {

    .activate360-details-container {

        width: 46%;

        max-width: 900px;

        margin-left: 36.2%;

        padding-top: 55px;

        padding-bottom: 75px;
    }


    .activate360-details-title {

        font-size: 52px;

        letter-spacing: -2.9px;
    }


    .activate360-details-description p {

        font-size: 17px;

    }


    .activate360-pillars-title {

        font-size: 37px;

    }


    .activate360-pillar-title {

        font-size: 30px;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1200px) {

    .activate360-details-container {

        width: 55%;

        max-width: 800px;

        margin-left: 34%;

        padding-top: 55px;

        padding-bottom: 65px;
    }


    .activate360-details-title {

        font-size: 46px;

    }


    .activate360-details-description p {

        font-size: 17px;

    }


    .activate360-pillar-title {

        font-size: 27px;

    }

}


/* =========================================================
   SMALL TABLET
========================================================= */

@media (max-width: 900px) {

    .activate360-details-container {

        width: calc(100% - 100px);

        max-width: none;

        margin-left: 50px;

        margin-right: 50px;

        padding-top: 55px;

        padding-bottom: 65px;
    }


    .activate360-details-title {

        font-size: 46px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .activate360-details-container {

        width: calc(100% - 40px);

        margin-left: 20px;

        margin-right: 20px;

        padding-top: 55px;

        padding-bottom: 60px;
    }


    .activate360-details-title {

        font-size: 43px;

        line-height: 0.98;

        letter-spacing: -2.2px;
    }


    .activate360-details-description {

        margin-top: 28px;
    }


    .activate360-details-description p {

        font-size: 16px;

        line-height: 1.5;
    }


    .activate360-details-description p + p {

        margin-top: 22px;
    }


    .activate360-pillars {

        margin-top: 32px;
    }


    .activate360-pillars-title {

        margin-bottom: 25px;

        font-size: 32px;

        letter-spacing: -1.5px;
    }


    .activate360-pillar + .activate360-pillar {

        margin-top: 25px;
    }


    .activate360-pillar-title {

        font-size: 25px;

        line-height: 1.05;

        letter-spacing: -1.1px;
    }


    .activate360-pillar-description {

        margin-top: 5px;

        font-size: 16px;

        line-height: 1.45;
    }


    .activate360-details-action {

        margin-top: 30px;
    }


    .activate360-details-button {

        min-width: 210px;

        height: 62px;

        padding: 0 30px;

        font-size: 16px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .activate360-details-container {

        width: calc(100% - 30px);

        margin-left: 15px;

        margin-right: 15px;

        padding-top: 45px;

        padding-bottom: 55px;
    }


    .activate360-details-title {

        font-size: 39px;

        letter-spacing: -2px;
    }


    .activate360-details-description {

        margin-top: 26px;
    }


    .activate360-details-description p {

        font-size: 15.5px;

        line-height: 1.48;
    }


    .activate360-pillars {

        margin-top: 30px;
    }


    .activate360-pillars-title {

        font-size: 30px;

        margin-bottom: 23px;
    }


    .activate360-pillar + .activate360-pillar {

        margin-top: 24px;
    }


    .activate360-pillar-title {

        font-size: 23px;

    }


    .activate360-pillar-description {

        font-size: 15.5px;

    }


    .activate360-details-button {

        width: 100%;

        min-width: 0;

        height: 60px;
    }

}

/* =========================================================
   THREE PILLARS
========================================================= */

.activate360-pillars {
    margin-top: 29px;
    width: 100%;
}


/* =========================================================
   PILLARS HEADING
========================================================= */

.activate360-pillars-title {
    margin: 0 0 28px;

    font-family: "Jost", sans-serif;

    font-size: 36px;
    line-height: 1;

    letter-spacing: -1.8px;

    font-weight: 400;

    color: #050505;
}


/* =========================================================
   INDIVIDUAL PILLAR
========================================================= */

.activate360-pillar {

    display: flex;
    align-items: flex-start;

    gap: 18px;

    margin: 0;
    padding: 0;
}


.activate360-pillar + .activate360-pillar {
    margin-top: 28px;
}


/* =========================================================
   PILLAR ICON
========================================================= */

.activate360-pillar-icon {

    flex: 0 0 50px;

    width: 50px;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    border: 1px solid #d9e8f2;

    border-radius: 50%;

    background: #f1f9fd;

    color: #279ee8;

    font-size: 20px;

    line-height: 1;

    transition:
        transform 0.25s ease,
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease;
}


.activate360-pillar-icon i {
    display: block;

    font-size: 20px;

    line-height: 1;
}


/* =========================================================
   ICON HOVER
========================================================= */

.activate360-pillar:hover .activate360-pillar-icon {

    transform: translateY(-3px);

    background: #279ee8;

    border-color: #279ee8;

    color: #ffffff;
}


/* =========================================================
   PILLAR CONTENT
========================================================= */

.activate360-pillar-content {
    flex: 1;
    min-width: 0;
}


/* =========================================================
   PILLAR TITLE
========================================================= */

.activate360-pillar-title {

    margin: 0;

    font-family: "Jost", sans-serif;

    font-size: 29px;

    line-height: 1;

    letter-spacing: -1.35px;

    font-weight: 400;

    color: #050505;
}


/* =========================================================
   PILLAR DESCRIPTION
========================================================= */

.activate360-pillar-description {

    margin: 4px 0 0;

    font-family: "Jost", sans-serif;

    font-size: 17px;

    line-height: 1.35;

    letter-spacing: -0.25px;

    font-weight: 400;

    color: #090909;
}

/* =========================================================
   ACTIVATE 360
   PROBLEM SECTION
========================================================= */

.activate360-problem {

    position: relative;

    width: 100%;

    background: #f7fafc;

    overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.activate360-problem-container {

    width: calc(100% - 24%);

    max-width: 1125px;

    margin: 0 auto;

    padding-top: 105px;

    padding-bottom: 115px;
}


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

.activate360-problem-header {

    max-width: 720px;
}


/* =========================================================
   EYEBROW
========================================================= */

.activate360-problem-eyebrow {

    margin-bottom: 18px;

    font-family: "Jost", sans-serif;

    font-size: 13px;

    line-height: 1;

    font-weight: 500;

    letter-spacing: 2px;

    text-transform: uppercase;

    color: #279ee8;
}


/* =========================================================
   TITLE
========================================================= */

.activate360-problem-title {

    margin: 0;

    font-family: "Jost", sans-serif;

    font-size: 52px;

    line-height: 0.98;

    letter-spacing: -2.8px;

    font-weight: 400;

    color: #050505;
}


.activate360-problem-title span {

    color: #7b8792;
}


/* =========================================================
   INTRO
========================================================= */

.activate360-problem-intro {

    max-width: 680px;

    margin: 25px 0 0;

    font-family: "Jost", sans-serif;

    font-size: 17px;

    line-height: 1.55;

    letter-spacing: -0.2px;

    color: #56616b;
}


/* =========================================================
   PROBLEM GRID
========================================================= */

.activate360-problem-grid {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 16px;

    margin-top: 65px;
}


/* =========================================================
   PROBLEM CARD
========================================================= */

.activate360-problem-card {

    position: relative;

    min-height: 330px;

    padding: 30px 30px 32px;

    background: #ffffff;

    border: 1px solid #e5e9ed;

    border-radius: 18px;

    box-sizing: border-box;

    overflow: hidden;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


.activate360-problem-card:hover {

    transform: translateY(-6px);

    border-color: #cfe8f7;

    box-shadow:
        0 18px 45px
        rgba(20, 40, 60, 0.08);
}


/* =========================================================
   CARD TOP
========================================================= */

.activate360-problem-card-top {

    display: flex;

    align-items: center;

    justify-content: space-between;
}


/* =========================================================
   NUMBER
========================================================= */

.activate360-problem-number {

    font-family: "Jost", sans-serif;

    font-size: 13px;

    line-height: 1;

    font-weight: 500;

    letter-spacing: 1px;

    color: #9aa5ae;
}


/* =========================================================
   ICON
========================================================= */

.activate360-problem-icon {

    width: 96px;

    height: 96px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #f0f9fd;

    border: 1px solid #d9edf8;

    color: #279ee8;

    font-size: 19px;

    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


.activate360-problem-card:hover
.activate360-problem-icon {

    background: #279ee8;

    color: #ffffff;

    transform: rotate(-5deg);
}


/* =========================================================
   ACCENT LINE
========================================================= */

.activate360-problem-card-line {

    width: 42px;

    height: 2px;

    margin-top: 30px;

    background: #279ee8;

    transition:
        width 0.3s ease;
}


.activate360-problem-card:hover
.activate360-problem-card-line {

    width: 70px;
}


/* =========================================================
   CARD TITLE
========================================================= */

.activate360-problem-card-title {

    margin: 28px 0 0;

    font-family: "Jost", sans-serif;

    font-size: 29px;

    line-height: 0.98;

    letter-spacing: -1.4px;

    font-weight: 400;

    color: #050505;
}


/* =========================================================
   CARD DESCRIPTION
========================================================= */

.activate360-problem-card-description {

    margin: 18px 0 0;

    font-family: "Jost", sans-serif;

    font-size: 15.5px;

    line-height: 1.5;

    letter-spacing: -0.15px;

    color: #68737d;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1600px) {

    .activate360-problem-container {

        max-width: 1200px;

        padding-top: 120px;

        padding-bottom: 125px;
    }


    .activate360-problem-title {

        font-size: 56px;
    }


    .activate360-problem-grid {

        margin-top: 70px;

        gap: 18px;
    }


    .activate360-problem-card {

        min-height: 345px;

        padding: 32px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .activate360-problem-container {

        width: calc(100% - 80px);

        max-width: none;

        padding-top: 80px;

        padding-bottom: 90px;
    }


    .activate360-problem-title {

        font-size: 45px;
    }


    .activate360-problem-grid {

        gap: 12px;

        margin-top: 50px;
    }


    .activate360-problem-card {

        min-height: 350px;

        padding: 25px;
    }


    .activate360-problem-card-title {

        font-size: 26px;
    }


    .activate360-problem-card-description {

        font-size: 15px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .activate360-problem-container {

        width: calc(100% - 40px);

        margin-left: 20px;

        margin-right: 20px;

        padding-top: 65px;

        padding-bottom: 75px;
    }


    .activate360-problem-title {

        font-size: 39px;

        line-height: 0.98;

        letter-spacing: -2px;
    }


    .activate360-problem-intro {

        margin-top: 20px;

        font-size: 16px;

        line-height: 1.5;
    }


    .activate360-problem-grid {

        grid-template-columns: 1fr;

        gap: 12px;

        margin-top: 38px;
    }


    .activate360-problem-card {

        min-height: auto;

        padding: 25px;

        border-radius: 15px;
    }


    .activate360-problem-card-line {

        margin-top: 24px;
    }


    .activate360-problem-card-title {

        margin-top: 22px;

        font-size: 27px;
    }


    .activate360-problem-card-description {

        margin-top: 14px;

        font-size: 15.5px;

        line-height: 1.5;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .activate360-problem-container {

        width: calc(100% - 30px);

        margin-left: 15px;

        margin-right: 15px;

        padding-top: 55px;

        padding-bottom: 65px;
    }


    .activate360-problem-eyebrow {

        font-size: 11px;

        letter-spacing: 1.7px;
    }


    .activate360-problem-title {

        font-size: 35px;

        letter-spacing: -1.8px;
    }


    .activate360-problem-grid {

        margin-top: 32px;
    }


    .activate360-problem-card {

        padding: 22px;
    }


    .activate360-problem-icon {

        width: 44px;

        height: 44px;

        font-size: 17px;
    }


    .activate360-problem-card-title {

        font-size: 25px;
    }


    .activate360-problem-card-description {

        font-size: 15px;
    }

}

/* =========================================================
   HOW ACTIVATE360 WORKS
========================================================= */

.activate360-how {

    position: relative;

    width: 100%;

    background: #f4f9f8;

    overflow: hidden;
}


/* =========================================================
   HOW TITLE CONTAINER
========================================================= */

.activate360-how-container {

    width: calc(100% - 24%);

    max-width: 1125px;

    margin: 0 auto;

    padding-bottom: 29px;
}


/* =========================================================
   HOW TITLE
========================================================= */

.activate360-how-title {

    margin: 0;

    font-family: "Jost", sans-serif;

    font-size: 38px;

    line-height: 1;

    letter-spacing: -1.8px;

    font-weight: 400;

    color: #050505;
}


/* =========================================================
   DIAGRAM AREA
========================================================= */

.activate360-how-diagram {

    position: relative;

    width: 100%;

    min-height: 470px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        55px
        5%
        35px;

    background: #f4f9f8;

    overflow: hidden;
}


/* =========================================================
   DIAGRAM IMAGE
========================================================= */

.activate360-how-image {

    display: block;

    width: 100%;

    max-width: 1100px;

    height: auto;

    object-fit: contain;

    margin: 0 auto;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1600px) {

    .activate360-problem-container,
    .activate360-how-container {

        width: calc(100% - 24%);

        max-width: 1125px;
    }


    .activate360-problem-title,
    .activate360-how-title {

        font-size: 40px;
    }


    .activate360-problem-list {

        gap: 6px;
    }


    .activate360-problem-item {

        min-height: 46px;

        padding-left: 18px;

        padding-right: 18px;
    }


    .activate360-problem-text {

        font-size: 15px;
    }


    .activate360-how-diagram {

        min-height: 490px;

        padding:
            60px
            6%
            38px;
    }


    .activate360-how-image {

        max-width: 1150px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .activate360-problem-container,
    .activate360-how-container {

        width: calc(100% - 80px);

        max-width: none;
    }


    .activate360-problem-container {

        padding-top: 60px;

        padding-bottom: 85px;
    }


    .activate360-problem-title,
    .activate360-how-title {

        font-size: 34px;

        letter-spacing: -1.5px;
    }


    .activate360-problem-list {

        flex-wrap: wrap;

        gap: 8px;
    }


    .activate360-problem-item {

        min-height: 44px;
    }


    .activate360-how-container {

        padding-bottom: 26px;
    }


    .activate360-how-diagram {

        min-height: 400px;

        padding:
            45px
            35px
            30px;
    }


    .activate360-how-image {

        max-width: 950px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .activate360-problem-container,
    .activate360-how-container {

        width: calc(100% - 40px);

        margin-left: 20px;

        margin-right: 20px;
    }


    /* -----------------------------------------------------
       PROBLEM
    ----------------------------------------------------- */

    .activate360-problem-container {

        padding-top: 55px;

        padding-bottom: 70px;
    }


    .activate360-problem-title,
    .activate360-how-title {

        font-size: 31px;

        line-height: 1.02;

        letter-spacing: -1.4px;
    }


    .activate360-problem-divider {

        margin-top: 18px;
    }


    .activate360-problem-list {

        flex-direction: column;

        align-items: stretch;

        gap: 8px;

        margin-top: 22px;
    }


    .activate360-problem-item {

        width: 100%;

        min-height: 46px;

        box-sizing: border-box;

        padding:
            10px
            15px;
    }


    .activate360-problem-icon {

        flex-shrink: 0;

        margin-right: 12px;
    }


    .activate360-problem-text {

        white-space: normal;

        font-size: 15px;

        line-height: 1.3;
    }


    /* -----------------------------------------------------
       HOW IT WORKS
    ----------------------------------------------------- */

    .activate360-how-container {

        padding-bottom: 22px;
    }


    .activate360-how-diagram {

        min-height: 0;

        padding:
            30px
            15px
            25px;

        overflow-x: auto;

        justify-content: flex-start;
    }


    .activate360-how-image {

        width: 850px;

        max-width: none;

        flex-shrink: 0;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .activate360-problem-container,
    .activate360-how-container {

        width: calc(100% - 30px);

        margin-left: 15px;

        margin-right: 15px;
    }


    .activate360-problem-container {

        padding-top: 45px;

        padding-bottom: 60px;
    }


    .activate360-problem-title,
    .activate360-how-title {

        font-size: 29px;

        letter-spacing: -1.3px;
    }


    .activate360-problem-list {

        margin-top: 20px;
    }


    .activate360-problem-item {

        min-height: 44px;

        padding:
            9px
            13px;
    }


    .activate360-problem-icon {

        font-size: 25px;

        margin-right: 10px;
    }


    .activate360-problem-text {

        font-size: 14px;
    }


    .activate360-how-container {

        padding-bottom: 20px;
    }


    .activate360-how-diagram {

        padding:
            25px
            10px
            20px;
    }


    .activate360-how-image {

        width: 760px;
    }

}

/* Contact Form */

    /* =========================================================
       CONTACT ALERT
    ========================================================= */

    .contact-alert {
        position: relative;
        display: flex;
        align-items: flex-start;
        gap: 14px;

        width: 100%;
        box-sizing: border-box;

        margin-bottom: 28px;
        padding: 18px 48px 18px 18px;

        border: 1px solid rgba(34, 197, 94, 0.22);
        border-radius: 12px;

        background: rgba(240, 253, 244, 0.95);

        color: #166534;

        animation: contactAlertIn 0.45s ease both;
    }


    /* Icon */

    .contact-alert-icon {
        flex: 0 0 34px;

        width: 34px;
        height: 34px;

        display: flex;
        align-items: center;
        justify-content: center;

        border-radius: 50%;

        background: #22c55e;
        color: #ffffff;

        font-size: 17px;
        font-weight: 700;
    }


    /* Content */

    .contact-alert-content {
        display: flex;
        flex-direction: column;
        gap: 3px;

        padding-top: 1px;
    }

    .contact-alert-content strong {
        font-size: 14px;
        font-weight: 700;
        color: #166534;
    }

    .contact-alert-content span {
        font-size: 13px;
        line-height: 1.6;
        color: #4d7c5b;
    }


    /* Close Button */

    .contact-alert-close {
        position: absolute;
        top: 12px;
        right: 14px;

        width: 28px;
        height: 28px;

        display: flex;
        align-items: center;
        justify-content: center;

        padding: 0;

        border: 0;
        background: transparent;

        color: #65a374;

        font-size: 22px;
        line-height: 1;

        cursor: pointer;

        transition:
            color 0.2s ease,
            transform 0.2s ease;
    }

    .contact-alert-close:hover {
        color: #166534;
        transform: scale(1.08);
    }


    /* Animation */

    @keyframes contactAlertIn {

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

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

    }
    .contact-alert-error {
        border-color: rgba(239, 68, 68, 0.22);
        background: rgba(254, 242, 242, 0.95);
        color: #991b1b;
    }

    .contact-alert-error .contact-alert-icon {
        background: #ef4444;
    }

    .contact-alert-error .contact-alert-content strong {
        color: #991b1b;
    }

    .contact-alert-error .contact-alert-content span {
        color: #b45353;
    }

    .contact-alert-error .contact-alert-close {
        color: #d27a7a;
    }

    .contact-alert-error .contact-alert-close:hover {
        color: #991b1b;
    }

    /* =========================================================
       CONTACT SUCCESS ALERT
    ========================================================= */

    .contact-alert-success {
        border-color: rgba(34, 197, 94, 0.22);
        background: rgba(240, 253, 244, 0.95);
        color: #166534;
    }

    .contact-alert-success .contact-alert-icon {
        background: #22c55e;
    }

    .contact-alert-success .contact-alert-content strong {
        color: #166534;
    }

    .contact-alert-success .contact-alert-content span {
        color: #4d7c5b;
    }

    .contact-alert-success .contact-alert-close {
        color: #65a374;
    }

    .contact-alert-success .contact-alert-close:hover {
        color: #166534;
    }

    /* =========================================================
       CONTACT SUBMIT BUTTON
    ========================================================= */

    .contact-submit-button {
        position: relative;

        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;

        min-width: 150px;
    }


    /* Loading State */

    .contact-submit-button.is-loading {
        cursor: wait;
        opacity: 0.85;
    }

    .contact-submit-loading {
        display: none;
        align-items: center;
        justify-content: center;
        gap: 9px;
    }


    /* Spinner */

    .contact-spinner {
        width: 15px;
        height: 15px;

        border: 2px solid currentColor;
        border-right-color: transparent;

        border-radius: 50%;

        animation: contactSpinner 0.7s linear infinite;
    }


    @keyframes contactSpinner {

        to {
            transform: rotate(360deg);
        }

    }




/* =========================================
   TERMS AND CONDITIONS
========================================= */

.terms-fanscreens-section {
    width: 100%;
    background: #ffffff;
    padding: 150px 0 80px;
}

.terms-container {
    width: calc(80% - 80px);
    max-width: 1100px;
    margin: 0 auto;
}


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

.terms-header {
    max-width: 900px;
    margin-bottom: 75px;
}

.terms-label {
    font-size: 16px;
    line-height: 1.4;
    font-weight: 400;
    letter-spacing: 0.2px;
    color: #63788b;
    margin-bottom: 14px;
}

.terms-title {
    margin: 0;
    font-size: clamp(48px, 5vw, 76px);
    line-height: 0.98;
    letter-spacing: -3.5px;
    font-weight: 400;
    color: #050505;
}

.terms-intro {
    max-width: 850px;
    margin: 38px 0 0;
    font-size: 20px;
    line-height: 1.6;
    font-weight: 400;
    color: #111111;
}


/* =========================================
   TERMS CONTENT
========================================= */

.terms-content {
    max-width: 900px;
}

.terms-item {
    padding: 0 0 45px;
    margin-bottom: 45px;
    border-bottom: 1px solid #d9d9d9;
}

.terms-item:last-of-type {
    margin-bottom: 0;
}

.terms-item h2 {
    margin: 0 0 20px;
    font-size: 28px;
    line-height: 1.25;
    letter-spacing: -0.8px;
    font-weight: 500;
    color: #111111;
}

.terms-item p {
    margin: 0 0 20px;
    font-size: 18px;
    line-height: 1.65;
    font-weight: 400;
    color: #66788a;
}

.terms-item p:last-child {
    margin-bottom: 0;
}


/* =========================================
   LISTS
========================================= */

.terms-item ul {
    margin: 0 0 22px;
    padding-left: 25px;
}

.terms-item li {
    margin-bottom: 10px;
    padding-left: 5px;
    font-size: 18px;
    line-height: 1.55;
    color: #66788a;
}

.terms-item li:last-child {
    margin-bottom: 0;
}


/* =========================================
   LINKS
========================================= */

.terms-item a {
    color: #111111;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: opacity 0.2s ease;
}

.terms-item a:hover {
    opacity: 0.6;
}


/* =========================================
   CONTACT
========================================= */

.terms-contact-list {
    list-style: none;
    padding-left: 0 !important;
}

.terms-contact-list li {
    padding-left: 0;
    margin-bottom: 10px;
}


/* =========================================
   UPDATED DATE
========================================= */

.terms-updated {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-top: 55px;
    padding: 25px 0;

    border-top: 1px solid #111111;
}

.terms-updated span {
    font-size: 15px;
    color: #63788b;
}

.terms-updated strong {
    font-size: 15px;
    font-weight: 500;
    color: #111111;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1100px) {

    .terms-container {
        width: calc(100% - 60px);
    }

    .terms-title {
        font-size: clamp(45px, 5vw, 65px);
    }

    .terms-intro {
        font-size: 18px;
    }

    .terms-item h2 {
        font-size: 25px;
    }

    .terms-item p,
    .terms-item li {
        font-size: 17px;
    }
}


@media (max-width: 768px) {

    .terms-fanscreens-section {
        padding: 55px 0 0px;
    }

    .terms-container {
        width: calc(100% - 40px);
    }

    .terms-header {
        margin-bottom: 55px;
    }

    .terms-title {
        font-size: 48px;
        line-height: 0.98;
        letter-spacing: -2.5px;
    }

    .terms-intro {
        margin-top: 30px;
        font-size: 17px;
        line-height: 1.6;
    }

    .terms-item {
        padding-bottom: 35px;
        margin-bottom: 35px;
    }

    .terms-item h2 {
        font-size: 23px;
    }

    .terms-item p,
    .terms-item li {
        font-size: 16px;
        line-height: 1.6;
    }

    .terms-updated {
        margin-top: 40px;
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }
}


@media (max-width: 480px) {

    .terms-container {
        width: calc(100% - 30px);
        max-width: none;
        padding: 70px 0 80px;
    }

    .terms-title {
        font-size: 39px;
        letter-spacing: -2px;
    }

    .terms-label {
        font-size: 14px;
    }

    .terms-intro {
        font-size: 16px;
    }

    .terms-item h2 {
        font-size: 21px;
    }

    .terms-item p,
    .terms-item li {
        font-size: 16px;
    }
}

/* =========================================
   LEGAL / PRIVACY POLICY PAGE
========================================= */

.legal-page-section {
    width: 100%;
    background: #ffffff;
    padding: 150px 0 80px;
}

.legal-container {
    width: calc(80% - 80px);
    max-width: 1100px;
    margin: 0 auto;
}


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

.legal-header {
    max-width: 900px;
    margin-bottom: 75px;
}

.legal-label {
    font-size: 16px;
    line-height: 1.4;
    font-weight: 400;
    letter-spacing: 0.2px;
    color: #63788b;
    margin-bottom: 14px;
}

.legal-title {
    margin: 0;
    font-size: clamp(48px, 5vw, 76px);
    line-height: 0.95;
    letter-spacing: -3.5px;
    font-weight: 400;
    color: #050505;
}

.legal-effective-date {
    margin: 30px 0 0;
    font-size: 17px;
    line-height: 1.5;
    color: #66788a;
}

.legal-intro {
    margin: 12px 0 0;
    font-size: 18px;
    line-height: 1.5;
    color: #111111;
}

.legal-intro a {
    color: inherit;
    text-decoration: underline;
}


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

.legal-content {
    max-width: 900px;
}

.legal-content > p {
    margin: 0 0 24px;
    font-size: 18px;
    line-height: 1.65;
    font-weight: 400;
    color: #111111;
}


/* =========================================
   SECTIONS
========================================= */

.legal-section {
    margin-top: 55px;
}

.legal-section h2 {
    margin: 0 0 20px;
    font-size: 30px;
    line-height: 1.25;
    letter-spacing: -0.8px;
    font-weight: 500;
    color: #111111;
}

.legal-section p {
    margin: 0 0 22px;
    font-size: 18px;
    line-height: 1.65;
    color: #66788a;
}

.legal-section ul {
    margin: 0 0 25px;
    padding-left: 25px;
}

.legal-section li {
    margin-bottom: 12px;
    padding-left: 5px;
    font-size: 18px;
    line-height: 1.55;
    color: #66788a;
}

.legal-section li:last-child {
    margin-bottom: 0;
}


/* =========================================
   LINKS
========================================= */

.legal-section a {
    color: #111111;
    text-decoration: underline;
}

.legal-section a:hover {
    text-decoration: none;
}


/* =========================================
   CONTACT
========================================= */

.contact-list {
    list-style: none;
    padding-left: 0 !important;
}

.contact-list li {
    padding-left: 0;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1100px) {

    .legal-container {
        width: calc(100% - 60px);
    }

    .legal-title {
        font-size: clamp(45px, 5vw, 65px);
    }

    .legal-content > p,
    .legal-section p,
    .legal-section li {
        font-size: 17px;
    }

    .legal-section h2 {
        font-size: 27px;
    }
}


@media (max-width: 768px) {

    .legal-page-section {
        padding: 55px 0 0px;
    }

    .legal-container {
        width: calc(100% - 40px);
    }

    .legal-header {
        margin-bottom: 50px;
    }

    .legal-title {
        font-size: 48px;
        line-height: 0.98;
        letter-spacing: -2.5px;
    }

    .legal-effective-date {
        font-size: 16px;
    }

    .legal-intro {
        font-size: 17px;
    }

    .legal-content > p,
    .legal-section p,
    .legal-section li {
        font-size: 17px;
    }

    .legal-section {
        margin-top: 45px;
    }

    .legal-section h2 {
        font-size: 25px;
    }
}


@media (max-width: 480px) {

    .legal-container {
        width: calc(100% - 30px);
        max-width: none;
        padding: 70px 0 80px;
    }

    .legal-title {
        font-size: 39px;
        letter-spacing: -2px;
    }

    .legal-label {
        font-size: 14px;
    }

    .legal-effective-date,
    .legal-intro {
        font-size: 15px;
    }

    .legal-content > p,
    .legal-section p,
    .legal-section li {
        font-size: 16px;
    }

    .legal-section h2 {
        font-size: 22px;
    }

    .legal-section ul {
        padding-left: 22px;
    }
}