/* ============================================
   CSS START-PAGE-WRAP
   ============================================ */
.start-page-wrap {
    position: relative;
}

.start-page {
    display: flex;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    position: relative;
    min-height: 43.75vw;
}

.start-page.left-hover .direction-anim {
    margin-left: 2.08333vw;
}

.start-page.right-hover .direction-anim {
    margin-left: -2.08333vw;
}

.start-page .direction-anim {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 8.33333vw;
    height: 8.33333vw;
    border-radius: 50%;
    border: 1px solid rgba(200, 200, 204, 0.4);
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 5px 1px rgba(200, 200, 204, 0.49) inset;
    z-index: 2;
    margin: 0;
    transition: margin 0.2s ease-in-out;
}

.start-page .direction-anim-lottie{
    max-height:32px;
}

.start-page .direction-anim .text {
    font-size: .90278vw;
    line-height: 1.23;
    font-weight: 400;
    text-align: center;
}

/* ===== Left & Right Section (Basic Style) ===== */   
.start-page .left,
.start-page .right {
    padding: 8.88889vw 2.5vw;
    box-sizing: border-box;
    position: relative;
    text-decoration: none;
    z-index: 1;
}

.start-page .left {
    background-color: #1d1d20;
    width: 50%;
    flex-shrink: 0;
}

.start-page .right {
    background-color: #252a2f;
    width: 50%;
    flex-shrink: 0;
}

.e-con>.e-con-inner>.elementor-widget>.elementor-widget-container,.e-con>.elementor-widget>.elementor-widget-container {
    width: 100%!important;
    height: 100%!important;
    object-fit: cover!important;
}

/* ===== Title H2 ===== */ 
.start-page .left h2,
.start-page .right h2 {
    opacity: .6;
    font-size: 3.05556vw;
    line-height: normal;
    text-transform: uppercase;
    position: relative;
    z-index: 2;
    display: inline-block;
    transition: all 0.2s ease-in-out;
}

/* ===== Desc ===== */ 
.start-page .left .desc,
.start-page .right .desc {
    margin: 1.13889vw auto 0;
    font-size: .97222vw;
    text-align: center;
    max-width: 25vw !important;
    position: relative;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

/* ===== Arrow ===== */ 
.start-page .left .arrow,
.start-page .right .arrow {
    margin-top: 1.13889vw;
    text-align: center;
    position: relative;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.start-page .left .arrow svg,
.start-page .right .arrow svg {
    width: 2.98611vw;
    height: 2.22222vw;
}

/* ===== Right Section Bg With Image ===== */   
.start-page .right .bg {
    position: absolute;
    z-index: 1;
    top: 29%;
    right: 1.5%;
    width: 22.22222vw;
    height: 33.33333vw;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out;
}

.start-page .right .bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.2s ease-in-out;
    -webkit-clip-path: inset(19% 12.5% 4% 12.5% round 8.33333vw);
    clip-path: inset(19% 12.5% 4% 12.5% round 8.33333vw);
}

/* ===== Left Section Bg With Video ===== */
.elementor-11187 .elementor-element.elementor-element-27b42dd .elementor-wrapper {
    --video-aspect-ratio: 0.667;
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
}

.start-page .left .video-widget {
    position: absolute;
    z-index: 1;
    top: 29%;
    left: 1.5%;
    width: 22.22222vw;
    height: 33.33333vw;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out;
    overflow: hidden;
}

.start-page .left .video-widget .elementor-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: all 0.2s ease-in-out;
    -webkit-clip-path: inset(19% 12.5% 4% 12.5% round 8.33333vw);
    clip-path: inset(19% 12.5% 4% 12.5% round 8.33333vw);
    opacity: 0;
}

.start-page .left .video-widget::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('https://cdn.dentify.com.ua/assets/media/2025/10/22103021/video-poster.webp') center/cover no-repeat;
    z-index: 2;
    opacity: 1;
    transition: all 0.2s ease-in-out;
    -webkit-clip-path: inset(19% 12.5% 4% 12.5% round 8.33333vw);
    clip-path: inset(19% 12.5% 4% 12.5% round 8.33333vw);
}

/* ===== Footer Start Page ===== */
.start-page-footer {
    position: absolute;
    inset: auto 0 0;
    z-index: 100;
    display: flex;
}

.start-page-footer .left,
.start-page-footer .right {
    width: 50%;
    flex-shrink: 0;
    height: 4.86111vw;
    box-sizing: border-box;
}

.start-page-footer .left {
    padding: .625vw 2.5vw;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.start-page-footer .right {
    padding: .625vw 2.5vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ===== Media Queries (max-width: 960px) ===== */   
@media screen and (max-width: 960px) {
    .start-page {
        min-height: 246vw;
        flex-wrap: wrap !important;
    }

    .start-page.left-hover .direction-anim {
        margin-left: 0;
    }

    .start-page.right-hover .direction-anim {
        margin-left: 0;
    }

    .start-page .direction-anim {
        width: 24vw;
        height: 24vw;
        border-radius: 50%;
    }

    .start-page .direction-anim .text {
        font-size: 3.2vw;
        padding: 0 1.33333vw 1.86667vw;
    }

    .start-page .left,
    .start-page .right {
        height: 123vw !important;
        min-height: 123vw;
        width: 100%;
    }

    .start-page .left {
        padding: 26.66667vw 9.6vw;
    }

    .start-page .right {
        padding: 19.66667vw 9.6vw;
    }

    .start-page .left h2,
    .start-page .right h2 {
        opacity: 1;
        font-size: 8vw;
        text-align: center;
        display: block;
        transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
    }

    .start-page .left.active ~ .right h2 {
        opacity: 0.6;
    }

    .start-page:has(.right.active) .left h2 {
        opacity: 0.6;
    }

    .start-page .left h2 {
        transform: translateY(33.33333vw);
        transition: transform 0.2s ease-in-out;
    }

    .start-page:has(.right.active) .right h2,
    .start-page:has(.right.active) .right .desc,
    .start-page:has(.right.active) .right .arrow {
        transform: translateY(18.33333vw);
        transition: transform 0.2s ease-in-out;
    }

    .start-page .left.active h2,
    .start-page .right.active h2 {
        transform: translateY(0);
    }

    .start-page .left.active .arrow,
    .start-page .left.active .desc,
    .start-page .right.active .arrow,
    .start-page .right.active .desc {
        opacity: 1;
    }

    .start-page .left .desc,
    .start-page .right .desc {
        padding-top: 1vw;
        font-size: 3.73333vw;
        max-width: 66.66667vw !important;
    }

    .start-page .left .arrow,
    .start-page .right .arrow {
        margin-top: 18px;
    }

    .start-page .left .arrow svg,
    .start-page .right .arrow svg {
        width: 9.33333vw;
        height: 6.93333vw;
    }

    .start-page .left .left-badge {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        transition: all 0.2s ease-in-out;
    }

    .start-page-footer {
        display: none;
    }

    /* ===== Left Section Bg With Video (mobile)  ===== */
    .start-page .left .video-widget {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        transition: all 0.3s ease-in-out;
    }

    .start-page .left .video-widget .elementor-video {
        -webkit-clip-path: inset(0 15% round 40vw);
        clip-path: inset(0 15% round 40vw);
        transform: translateY(-50%);
        opacity: 0;
        transition: all 0.3s ease-in-out;
    }

    .start-page .left .video-widget::before {
        -webkit-clip-path: inset(0 15% round 40vw);
        clip-path: inset(0 15% round 40vw);
        transform: translateY(-50%);
        opacity: 1;
        transition: all 0.3s ease-in-out;
    }

    .start-page .left.active .video-widget .elementor-video {
        -webkit-clip-path: inset(0 round 0);
        clip-path: inset(0 round 0);
        transform: translateY(0);
        opacity: 1;
    }

    .start-page .left.active .video-widget::before {
        -webkit-clip-path: inset(0 round 0);
        clip-path: inset(0 round 0);
        transform: translateY(0);
        opacity: 0;
    }

    .start-page .left.active .video-widget:after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 1;
        transition: all 0.3s ease-in-out;
        pointer-events: none;
    }

    /* ===== Right Section Bg With Image (mobile)  ===== */
    .start-page .right .bg {
        top: 0;
        left: 0;
        right: auto;
        width: 100%;
        height: 100%;
        overflow: hidden;
        transition: all 0.3s ease-in-out;
    }

    .start-page .right .bg img {
        -webkit-clip-path: inset(0 15% round 40vw);
        clip-path: inset(0 15% round 40vw);
        transform: translateY(50%);
    }

    .start-page .right.active .bg img {
        -webkit-clip-path: inset(0 round 0);
        clip-path: inset(0 round 0);
        transform: translateY(0);
    }

    .start-page .right.active .bg:after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 1;
        transition: all 0.2s ease-in-out;
        pointer-events: none;
    }
}

/* ========================================
   MEDIA QUERIES (min-width: 960px)
   ======================================== */
@media screen and (min-width: 960px) {
    .start-page .left,
    .start-page .right {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        transition: all 0.2s ease-in-out;
    }

    .start-page .left:hover,
    .start-page .right:hover {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .start-page .left:hover h2,
    .start-page .right:hover h2 {
        text-align: center;
        opacity: 1;
    }

    .start-page .left:hover .arrow,
    .start-page .left:hover .desc,
    .start-page .right:hover .arrow,
    .start-page .right:hover .desc {
        opacity: 1;
    }

    /* Left Section Bg With Video (DESKTOP HOVER) */
    .start-page .left:hover .video-widget {
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        left: 0;
    }

    .start-page .left:hover .video-widget .elementor-video {
        -webkit-clip-path: inset(0 round 0);
        clip-path: inset(0 round 0);
        transform: translateY(0);
        opacity: 1;
    }

    .start-page .left:hover .video-widget::before {
        -webkit-clip-path: inset(0 round 0);
        clip-path: inset(0 round 0);
        transform: translateY(0);
        opacity: 0;
    }

    .start-page .left:hover .video-widget:after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 1;
        transition: all 0.3s ease-in-out;
        pointer-events: none;
    }

    /* Right Section Bg With Image (DESKTOP HOVER) */
    .start-page .right:hover .bg {
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        right: 0;
    }

    .start-page .right:hover .bg img {
        -webkit-clip-path: inset(0 round 0);
        clip-path: inset(0 round 0);
    }

    .start-page .right:hover .bg:after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 1;
        transition: all 0.2s ease-in-out;
        pointer-events: none;
    }

    .start-page .left:hover h2 {
        left: 50%;
        transform: translateX(-50%);
    }

    .start-page .left h2 {
        left: 0;
    }

    .start-page .right:hover h2 {
        right: 50%;
        transform: translateX(50%);
    }

    .start-page .right h2 {
        float: right;
        text-align: right;
        right: 0;
    }

    .start-page .left .left-badge {
        position: relative;
        z-index: 2;
        left: 0;
        transform: translateX(0);
        transition: all 0.2s ease-in-out;
    }

    .start-page .left:hover .left-badge {
        left: 50%;
        transform: translateX(-50%);
    }
    
    #desc-adress {
        display: none;
    }
}