.title-i.top-title {
    width: 100%;
    text-align: left;
}

.new_hero_right video {
    max-height: 500px;
    width: 500px;
    margin-left: 20%;
}

.lang-switcher-container {
    display: none;
}

.top-title {
    opacity: 0;
    font-weight: 650;
    opacity: 1;
    font-family: Graphik;
}

.bold_subtitle {
    opacity: 1;
    font-size: 18px;
    margin-top: -28px;
    margin-bottom: 24px;
    color: #717A88;
}

.top-wrapper {
    display: flex;
    flex-direction: column;
}


.top-wrapper {
    margin-top: 32px;
}

.new_hero_right video {
    margin-top: 32px;
    position: absolute;
}


.new_hero_right {
    background-color: transparent !important;
}

.new-hero-top-container-for-mobile {
    display: flex;
    width: 80%;
    min-height: 300px;
}

.before-after-img-div {
    min-height: 495px;
    max-height: 495px;
    object-fit: cover;

}


#crop {
    max-width: 100%;
    object-fit: cover; /* Ensures video fills the area while maintaining aspect ratio */
}

.portrait-crop-text {
    padding: 24px 16px;
}

.portrait-description {
    color: #717A88;
    margin-top: 12px;
    font-size: 18px;
    line-height: 30.6px !important;
    letter-spacing: -0.18px;
}

.portrait-title {
    color: #222125;
    font-size: 36px;
}

.try-for-free-abtest-btn {
    display: none;
    justify-content: center;

}

.try-for-free-btn-cta {
    display: none;
}


.cta-link.blue-link {
    display: none;
}

.cta-for-try-after-portrait-mobile {
    display: flex;
    justify-content: center;
    margin: 36px 0 0px 0;
}

.reviews-container {
    margin-top: 64px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.review-card {
    display: flex;
    flex-direction: column;
    padding: 36px 24px;
    background-color: #F6F6F6;
    border-radius: 10px;
    height: 355px;
    max-width: 400px;
    min-width: 365px;
    justify-content: space-between;

}

.review-title {
    font-weight: 600;
    font-family: Graphik;
    font-size: 18px;
    line-height: 120%; /* 21.6px */
    letter-spacing: -0.54px;
    margin-top: 8px;
}

.review-text {
    font-family: Prody-Regular;
    font-size: 15px;
    line-height: 140%;
    color: #0C1B33;
}


.before-holder:after {
    content: "Antes" !important;
}

.after-holder:after {
    content: "Depois" !important;
}


.hr-seperator {
    border: 1px solid #20375E;
    opacity: 0.3;
    margin: 16px 8px;
    min-width: 500px;
    @media screen and (max-width: 991px) {
        display: none;
        min-width: 200px;
    }
}

.container-for-text {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    margin: 40px 32px;

    @media screen and (max-width: 991px) {
        flex-direction: column;
        margin: 0;
    }
}

.text-between-beforeafter-to-portrait {
    margin-top: 64px;
    display: none;
    flex-direction: row;
    padding: 0 24px;
    @media screen and (max-width: 991px) {
        display: flex;
        flex-direction: column;
        padding: 0;

    }
}

.text-row {
    min-width: fit-content;
    font-family: Graphik;
    display: flex;
    justify-content: center;
    margin-top: 24px;
    gap: 8px;
}

.left-item {
    min-width: fit-content;
    color: #20375E;
    font-size: 36px;
    @media screen and (max-width: 991px) {
        font-size: 20px;
    }
}

.right-item {
    min-width: fit-content;
    color: #20375E99;
    font-size: 36px;
    @media screen and (max-width: 991px) {
        font-size: 20px;
        min-width: auto;
    }
}

.thumbnail-wrapper {
    cursor: pointer;
    border: 3px solid transparent;
    border-radius: 8px; /* Ensure the wrapper has rounded corners */
}

.thumbnail {
    width: 61px;
    height: 61px;
    object-fit: cover;
    border-radius: 10px;
    cursor: pointer;
}

.thumbnail-wrapper.selected {
    border-color: black; /* Solid black border for selected thumbnail */
    border-radius: 14px; /* Rounded corners for selected thumbnail */
}

.images-before-after-div {
    margin-top: 40px;
    display: none;
}

.thumbnails {
    margin-top: 16px;
    display: flex;
    justify-content: center;
    gap: 4px;
}

.images-color-correction-before-after {
    display: none;
}


.switch-panel-wrapper {
    margin-bottom: 60px;
}

.cull-preview-left p {
    margin-bottom: 38px;
}

.text-i p {
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: -0.18px;
}

.video-fix {
    padding-bottom: 126.2%;
}

.b2b-image-holder-fixer {
    display: block;
    border-radius: 22px;
}

.b2b-image-holder-2 {
    padding: 2px;
}

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

    .text-i br {
        display: none;
    }

    .text-i p {
        font-size: 18px;
        line-height: 1.5 !important;
        letter-spacing: 0.16px;
    }

    .sub-real br {
        display: none;
    }

    .w-260-m {
        max-width: 260px;
        margin: 0 auto;
    }

    .bold_subtitle {
        margin-top: -16px;

    }

    .text-between-beforeafter-to-portrait {
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 60px;
    }
}

@media screen and (min-width: 768px) {

    .top-wrapper {
        flex-direction: row;
    }

    .top-texts-container {
        justify-content: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: left;
        flex: 1;
        max-width: 55%;
        margin-right: 32px;

    }

    .subtitle-text {
        align-self: flex-start;

    }

    .portrait-crop-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .portrait-title {
        font-size: 50px;
    }

    .try-for-free-btn-cta {
        width: 40%;
        display: block;
        margin-top: 32px;

    }

    .cta-for-try-after-portrait-mobile {
        display: none;
    }

    .reviews-container {
        flex-direction: row;

    }

    .container-for-text {
        flex-direction: column;
        margin: 0;
    }

}


#images-before-after-desktop {
    display: none;
}

.compatability-container {
    margin-top: 64px;
    display: block;
}

.icon {
    width: 30px !important;
    height: 30px !important;
}

.texts-for-items {
    display: flex;
    align-self: center;
    flex-direction: column;
    text-align: center;
    min-width: fit-content;
    font-size: 18px;
    font-weight: 400;
    margin-left: -16px;
    color: #717A88;
}

.carousel-container {
    display: flex;
    justify-content: center;
    overflow: hidden;
    align-items: center;
    position: relative;
    overflow: hidden;
    width: 100%;
    margin-top: 16px;
    touch-action: pan-x;
}

.carousel {
    display: flex;
    transition: transform 0.2s ease-out; /* Smooth scrolling after swipe */
    will-change: transform; /* Optimize performance */
    gap: 28px; /* Space between icons */
    align-items: center;
    animation: bannermove 20s linear infinite;
    width: fit-content;
    scroll-snap-type: x mandatory; /* Enable snapping for smoother scroll */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on touch devices */

    @media screen and (min-width: 768px) {
        animation: none;
        overflow-x: hidden;
        margin-top: 80px;

    }
}

.circ-icon {
    border-radius: 50%;
    min-width: 60px; /* Set icon size */
    min-height: 60px;
    width: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    flex-shrink: 0;
    border: 1px solid gray;
}

.circ-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Swiping animation */
@keyframes bannermove {
    0% {
        transform: translateX(0); /* Start position */
    }
    100% {
        transform: translateX(-100%); /* Shift left by half (including clones) */
    }
}


@media screen and (max-width: 968px) {
    #mobile-menu-btn {
        display: none;
    }

    #cta-header-button {
        margin-right: 0;
    }

    .new_hero_right video {
        max-width: 200px;
        margin-left: 0;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .before-after-pic {
        margin-top: 32px;
    }

    .new_hero_right video {
        position: unset;
    }


    .new-hero-top-container-for-mobile {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 20px;

    }

    .before-after-img-div {
        min-height: 500px;
        max-height: 500px;
        object-fit: cover;
    }


    .new_hero_right {
        max-width: 100%;
    }

    .new_hero_right video {
        margin-top: 32px;
        position: relative;
        width: 100%;
        height: auto;
        left: auto;
        transform: none;
        top: auto;
    }

    .new_hero_right {
        max-width: 100%;
        margin-top: 20px;
    }


    .hr-seperator {
        display: none;
        min-width: 200px;
    }

    .hero-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .right-item{
        font-size: 20px;
    }

}


.bottom-footer-for-tests {
    background-color: #0C1B33;
    color: #8DA5CB;
}

.with-after-style:after {
    top: 8px;
    height: 12px;
}


@media screen and (max-width: 1280px) {
    .sec-pad-bottom-2{
            padding-bottom: 0 !important;
        }
    .sec-pad-bottom{
            padding-bottom: 0 !important;
            margin-bottom:0 !important;
    }
    }


    .before-after-pic{
        display: block;
    }

    .before-after-img-div{
        width:495px;
        height:495px;
        @media screen and (screen-width: 128px) {
        width:90%;
        height:400px;
        }
        }
        .before-after-top-pic-div{
            display: block;
        }