/*
Theme Name: Osty (Child Theme)
Theme URI: http://madsparrow.us/
Author: Mad Sparrow
Author URI: https://themeforest.net/user/madsparrow
Description: Osty Creative Agency and Portfolio Theme – The theme is built to take advantage of the Full Site Editing features introduced in WordPress and Elementor plugin, which means that colors, typography, and the layout of every single page on your site can be customized to suit your vision. Whether you want to build a complex or incredibly simple website, you can do it quickly and intuitively through the bundled styles or dive into creation and full customization yourself.
Tags: one-column, two-columns, right-sidebar, custom-menu, post-formats, sticky-post, translation-ready, page transition
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: osty
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
Template: osty
*/

/* Add your own modification from here
-------------------------------------------------------------- */
p, li{
text-wrap:pretty!important;}

/* Custom back-to-top icon */
.back-to-top .ms-btt--inner {
    line-height: 0;
    overflow: visible;
}
/* mobile nav logo */
@media only screen and (max-width: 1023px) {
  .main-header.menu-center .main-header__inner {
    grid-template-columns: auto 1fr auto !important;
  }
}

/* ==========================================================
   VIDI OVO SCROLL HERO
========================================================== */


/* ==========================================================
   GLOBAL HERO SETTINGS

   Change this HEX value to your desired background color.
========================================================== */

:root {
    --vd-hero-bg: #edf2f2;
    --vd-hero-text: #1f2124;
}



/* ==========================================================
   ELEMENTOR WRAPPER
========================================================== */

.vd-zoom-shell {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    background: var(--vd-hero-bg);
}


/* Remove spacing Elementor may add around the HTML widget */

.vd-zoom-shell .elementor-widget-html,
.vd-zoom-shell .elementor-widget-container {
    width: 100%;

    margin: 0 !important;
    padding: 0 !important;
}



/* ==========================================================
   LONG SCROLLING SECTION

   Increase height for slower animation.
   Decrease height for faster animation.

   Recommended:
   600vh to 750vh
========================================================== */

.vd-zoom-sequence {
    position: relative;

    width: 100vw;
    height: 600vh;

    margin-left: calc(50% - 50vw);

    overflow: visible;

    background: var(--vd-hero-bg);
}



/* ==========================================================
   STICKY FULL-SCREEN STAGE
========================================================== */

.vd-zoom-stage {
    position: sticky;

    top: 0;

    width: 100vw;

    height: 100vh;
    height: 100svh;

    overflow: hidden;

    background: var(--vd-hero-bg);

    isolation: isolate;
}



/* ==========================================================
   MAIN TITLE POSITIONING WRAPPER

   This wrapper handles centering.
   GSAP animates only the title itself.
========================================================== */

.vd-title-position {
    position: absolute;

    inset: 0;

    display: flex;

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

    width: 100%;
    height: 100%;

    padding: 40px;

    z-index: 10;

    pointer-events: none;
}



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

.vd-title {
    margin: 0;

    width: auto;
    max-width: 1100px;

    text-align: center;

    font-family: inherit;

    font-size: clamp(52px, 5.2vw, 100px);

    font-weight: 700;

    line-height: 1.2;

    letter-spacing: -0.005em;

    color: var(--vd-hero-text);

    transform-origin: 50% 50%;

    will-change: transform, opacity, filter;

    backface-visibility: hidden;

    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}



/* ==========================================================
   DEPTH LAYERS

   Every pair occupies the full viewport.

   GSAP scales the entire layer from the center, which creates
   the feeling that the pair is coming toward the viewer.
========================================================== */

.vd-depth-layer {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 20;

    opacity: 0;
    visibility: visible;

    transform-origin: 50% 50%;

    pointer-events: none;

    will-change: transform, opacity, filter;

    backface-visibility: hidden;
}



/* ==========================================================
   INDIVIDUAL TEXT / SVG ELEMENT
========================================================== */

.vd-depth-item {
    position: absolute;

    transform: translate(-50%, -50%);

    white-space: nowrap;

    font-family: inherit;

    font-size: clamp(25px, 3vw, 58px);

    font-weight: 600;

    line-height: 1;

    letter-spacing: -0.035em;

    color: var(--vd-hero-text);

    pointer-events: none;

    backface-visibility: hidden;

    -webkit-font-smoothing: antialiased;
}



/* ==========================================================
   SVG / IMAGE INSIDE DEPTH ELEMENT
========================================================== */

.vd-depth-svg {
    display: block;

    width: clamp(130px, 15vw, 270px);
    height: auto;

    max-width: none;

    pointer-events: none;
}



/* ==========================================================
   PAIR 1
========================================================== */

.vd-p1-a {
    left: 35%;
    top: 40%;

    font-size: clamp(34px, 4.3vw, 76px);
}


.vd-p1-b {
    left: 60%;
    top: 60%;

    font-size: clamp(28px, 2.8vw, 50px);
}



/* ==========================================================
   PAIR 2
========================================================== */

.vd-p2-a {
    left: 65%;
    top: 29%;

    font-size: clamp(28px, 3.3vw, 60px);
}


.vd-p2-b {
    left: 35%;
    top: 69%;

    font-size: clamp(34px, 4.3vw, 76px);
}



/* ==========================================================
   PAIR 3
========================================================== */

.vd-p3-a {
    left: 35%;
    top: 30%;

    font-size: clamp(25px, 3vw, 56px);
}


.vd-p3-b {
    left: 65%;
    top: 65%;

    font-size: clamp(38px, 4.7vw, 82px);
}



/* ==========================================================
   PAIR 4
========================================================== */

.vd-p4-a {
    left: 65%;
    top: 35%;

    font-size: clamp(25px, 3.1vw, 58px);
}


.vd-p4-b {
    left: 33%;
    top: 65%;

    font-size: clamp(35px, 4vw, 70px);
}



/* ==========================================================
   PAIR 5
========================================================== */

.vd-p5-a {
    left: 35%;
    top: 30%;

    font-size: clamp(38px, 4.5vw, 80px);
}


.vd-p5-b {
    left: 65%;
    top: 70%;

    font-size: clamp(26px, 3vw, 54px);
}



/* ==========================================================
   PAIR 6
========================================================== */

.vd-p6-a {
    left: 65%;
    top: 38%;

    font-size: clamp(35px, 4.2vw, 74px);
}


.vd-p6-b {
    left: 35%;
    top: 62%;

    font-size: clamp(28px, 3.2vw, 58px);
}



/* ==========================================================
   FINAL LOGO POSITIONING WRAPPER

   This wrapper keeps the logo perfectly centered.
   GSAP animates only .vd-final-logo.
========================================================== */

.vd-logo-position {
    position: absolute;

    inset: 0;

    display: flex;

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

    width: 100%;
    height: 100%;

    z-index: 30;

    pointer-events: none;
}



/* ==========================================================
   FINAL LOGO
========================================================== */

.vd-final-logo {
    opacity: 0;
    visibility: visible;

    font-family: inherit;

    font-size: clamp(100px, 13vw, 220px);

    font-weight: 700;

    line-height: 1;

    color: var(--vd-hero-text);

    transform-origin: 50% 50%;

    will-change: transform, opacity, filter;

    backface-visibility: hidden;
}



/* Actual logo image or inline SVG */

.vd-final-logo img,
.vd-final-logo svg {
    display: block;

    width: min(220px, 30vw);
    height: auto;

    max-width: none;
}



/* ==========================================================
   SCROLL TO EXPLORE

   Fixed to the browser viewport so it is visible
   immediately, even if the Elementor hero begins
   underneath the website header.
========================================================== */

.vd-scroll-hint {
    position: fixed !important;

    left: 50% !important;
    bottom: 28px !important;

    transform: translateX(-50%) !important;

    z-index: 99999 !important;

    display: flex !important;

    flex-direction: column;

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

    gap: 7px;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    white-space: nowrap;

    color: var(--vd-hero-text);

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

    pointer-events: none;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;
}


/* Hide once the hero has completely finished */

.vd-scroll-hint.vd-hint-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
}


/* Scroll text */

.vd-scroll-hint > span:first-child {
    display: block;

    margin: 0;
    padding: 0;

    font-family: inherit;

    font-size: 16px;

    font-weight: 500;

    line-height: 1;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    color: var(--vd-hero-text);

    opacity: 1;
}


/* Arrow */

.vd-scroll-arrow {
    display: block;

    margin: 0;
    padding: 0;

    font-size: 17px;

    line-height: 1;

    color: var(--vd-hero-text);

    opacity: 1;

    animation: vdScrollArrow 1.7s ease-in-out infinite;
}


@keyframes vdScrollArrow {

    0%,
    100% {
        transform: translateY(0);
        opacity: 0.45;
    }

    50% {
        transform: translateY(6px);
        opacity: 1;
    }

}


/* ==========================================================
   MOBILE HERO
   Native CSS sticky
========================================================== */

@media (max-width: 767px) {


    /* ======================================================
       SCROLL AREA
    ====================================================== */

    .vd-zoom-sequence {
        position: relative !important;

        width: 100vw !important;

        height: 500vh !important;

        margin-left: calc(50% - 50vw) !important;

        overflow: visible !important;

        background: var(--vd-hero-bg);
    }



    /* ======================================================
       STAGE

       IMPORTANT:
       Native CSS sticky.
       NO GSAP pinning.
    ====================================================== */

    .vd-zoom-stage {
        position: sticky !important;

        position: -webkit-sticky !important;

        top: 0 !important;

        width: 100vw !important;

        height: 100vh !important;

        min-height: 100vh !important;

        overflow: hidden !important;

        background: var(--vd-hero-bg);

        isolation: isolate;
    }



    /* ======================================================
       ELEMENTOR WRAPPERS

       Sticky can break if a parent has hidden/auto overflow.
    ====================================================== */

    .vd-zoom-shell {
        overflow: visible !important;

        transform: none !important;
    }


    .vd-zoom-shell .elementor-widget-html {
        overflow: visible !important;

        transform: none !important;
    }


    .vd-zoom-shell .elementor-widget-container {
        overflow: visible !important;

        transform: none !important;
    }



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

    .vd-title-position {
        padding: 52px;
    }


    .vd-title {
        width: 100vw;

        max-width: 100vw;

        font-size: 4em;

        line-height: 1.2;

        letter-spacing: -0.045em;
    }



    /* ======================================================
       BRAND ELEMENTS
    ====================================================== */

    .vd-depth-item {
        max-width: 46vw;

        white-space: normal;

        text-align: left;

        line-height: 1;

        font-size: clamp(18px, 5.8vw, 30px);
    }



    /* ======================================================
       PAIR 1
    ====================================================== */

    .vd-p1-a {
        left: 30%;
        top: 40%;

        font-size: clamp(23px, 7vw, 36px);
    }


    .vd-p1-b {
        left: 69%;
        top: 60%;

        font-size: clamp(17px, 5.2vw, 27px);
    }



    /* ======================================================
       PAIR 2
    ====================================================== */

    .vd-p2-a {
        left: 67%;
        top: 40%;

        font-size: clamp(18px, 5.7vw, 29px);
    }


    .vd-p2-b {
        left: 30%;
        top: 65%;

        font-size: clamp(23px, 6.8vw, 35px);
    }



    /* ======================================================
       PAIR 3
    ====================================================== */

    .vd-p3-a {
        left: 29%;
        top: 40%;

        font-size: clamp(18px, 5.5vw, 29px);
    }


    .vd-p3-b {
        left: 70%;
        top: 65%;

        font-size: clamp(24px, 7vw, 37px);
    }



    /* ======================================================
       PAIR 4
    ====================================================== */

    .vd-p4-a {
        left: 67%;
        top: 40%;

        font-size: clamp(18px, 5.5vw, 29px);
    }


    .vd-p4-b {
        left: 31%;
        top: 65%;

        font-size: clamp(22px, 6.7vw, 34px);
    }



    /* ======================================================
       PAIR 5
    ====================================================== */

    .vd-p5-a {
        left: 30%;
        top: 40%;

        font-size: clamp(24px, 7.2vw, 37px);
    }


    .vd-p5-b {
        left: 69%;
        top: 65%;

        font-size: clamp(18px, 5.5vw, 29px);
    }



    /* ======================================================
       PAIR 6
    ====================================================== */

    .vd-p6-a {
        left: 68%;
        top: 40%;

        font-size: clamp(21px, 6.4vw, 33px);
    }


    .vd-p6-b {
        left: 31%;
        top: 65%;

        font-size: clamp(18px, 5.7vw, 29px);
    }



    /* ======================================================
       SVGs
    ====================================================== */

    .vd-depth-svg {
        width: clamp(55px, 19vw, 105px);

        height: auto;

        max-width: none;
    }



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

    .vd-final-logo img,
    .vd-final-logo svg {
        width: min(155px, 40vw);

        height: auto;
    }



    /* ======================================================
       SCROLL INDICATOR

       Force viewport-fixed positioning.
    ====================================================== */

    .vd-scroll-hint {
        position: fixed !important;

        left: 50% !important;

        right: auto !important;

        top: auto !important;

        bottom: 18px !important;

        transform: translateX(-50%) !important;

        z-index: 2147483000 !important;

        margin: 0 !important;

        opacity: 1;

        visibility: visible;
    }


    .vd-scroll-hint > span:first-child {
        font-size: 9px;

        letter-spacing: 0.11em;
    }


    .vd-scroll-arrow {
        font-size: 15px;
    }

}



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

@media (max-width: 430px) {

    .vd-zoom-sequence {
        height: 480vh !important;
    }


    .vd-title {
        width: 92vw;

        max-width: 92vw;

        font-size: clamp(38px, 11vw, 50px);
    }

}