/* Light breadcrumb */

body #breadcrumbs .arrow-holder {
    background-color: #ffffff4f;
}

body #breadcrumbs .arrow-holder .arrow {
    stroke: var(--white);
}

body #breadcrumbs a,
body #breadcrumbs {
    color: var(--body-bg);
}

body #breadcrumbs span.breadcrumb_last {
    color: var(--body-bg);
}

body #breadcrumbs span span:not(.breadcrumb_last) {
    opacity: 0.5;
    transition: 0.5s ease;
    margin-right: 5px;
}

body #breadcrumbs span span:not(:first-child) {
    margin-left: 5px;
}

body #breadcrumbs a:hover {
    color: var(--body-bg);
}

body #breadcrumbs span span:not(.breadcrumb_last):hover {
    opacity: 1;
}

body .breadcrumb {
    border: 0px;
    padding-top: clamp(10px, 4rem, 40px);
}


/*****/


.section1 {
    border-radius: 0px 0px 40px 40px;
    height: calc(100dvh - var(--header-height));
    min-height: 650px;
}

.section1 .background {
    left: 0;
    top: 0;
    height: 100%;
}

.section1 .background video,
.section1 .background img {
    object-fit: cover;
    display: block;
    height: 100%;
    width: 100%;
}

/* .section1 .background:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.4;
    background: var(--secondary-color);
    z-index: 2;
} */

.section1 .title {
    margin-bottom: clamp(20px, 4rem, 40px);
}

.section1 .heading1 {
    color: var(--body-bg);
    margin-bottom: clamp(30px, 5.5rem, 55px);
    max-width: clamp(450px, 80rem, 800px);
}

.section1 .scroll-down {
    margin-bottom: clamp(30px, 7.4rem, 74px);
    width: clamp(25px, 5rem, 50px);
    animation: upDown 2s linear infinite;
}

/*.section1 .scroll-down {
    margin-bottom: clamp(35px, 7.4rem, 74px);
}*/

@keyframes upDown {
    0% {
        transform: translateY(0px);
    }

    25% {
        transform: translateY(5px);
    }

    50% {
        transform: translateY(0px);
    }

    75% {
        transform: translateY(-5px);
    }

    100% {
        transform: translateY(0px);
    }
}

@media (max-width: 550px) {
    .section1 {
        background-position-x: 70%;
    }
}

/* section2 */

.section2 .asset-holder {
    --shape-width: clamp(50px, 11.3rem, 113px);
    width: var(--shape-width);
    top: calc(-3.1* var(--shape-width) / 2);
    right: calc(1.2* var(--shape-width) / 2);
}

.section2 .asset-holder:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1.6) rotate(0deg);
    display: block;
    background-image: url('/wp-content/uploads/2024/04/text-purple.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    animation: rotate 15s linear infinite;
    will-change: transform;
}

@keyframes rotate {
    0% {
        transform: translate(-50%, -50%) scale(1.6) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) scale(1.6) rotate(360deg);
    }
}

.section2 .row2 {
    padding-top: clamp(60px, 12rem, 120px);
    padding-bottom: clamp(60px, 12rem, 120px);
    background-color: var(--white);
}

.section2 .title {
    margin-bottom: clamp(20px, 4rem, 40px);
}

.section2 .row .row-heading,
.section2 .row .description {
    margin-bottom: clamp(15px, 3rem, 30px);
}

.section2 .main-btn {
    margin-bottom: 10px;
    line-height: 1.4;
}

.section2 .heading1 {
    margin-bottom: clamp(15px, 3rem, 30px);
}

.section2 :is(.row1, .row3) {
    margin-top: clamp(60px, 12rem, 120px);
    margin-bottom: clamp(60px, 12rem, 120px);
}

@media (min-width: 992px) {
    .section2 :is(.row1, .row3) .column1 {
        padding-right: clamp(30px, 12.5rem, 125px);
    }

    .section2 .row2 .column2 {
        padding-left: clamp(30px, 12.5rem, 125px);
    }
}

@media (max-width: 1400px) and (min-width: 992px) {
    .section2 :is(.row1, .row3) .column1 {
        padding-right: 8.5rem;
    }

    .section2 .row2 .column2 {
        padding-left: 8.5rem;
    }
}

@media (max-width: 991px) {
    .section2 :is(.row1, .row3) {
        flex-direction: column;
    }

    .section2 .row2 .container {
        flex-direction: column-reverse;
    }

    .section2 .row-column {
        width: 100%;
    }

    .section2 .title {
        margin-top: 4rem;
    }
}

@media (max-width: 767px) {
    .section1 .scroll-down {
        margin-top: 5rem;
    }
}

@media (max-width: 550px) {
    .section2 .asset-holder {
        --shape-width: 7rem;
        top: calc(-4.4* var(--shape-width) / 2);
        right: 5rem;
    }

    .section2 .row2 {
        margin-top: 8rem;
        margin-bottom: 8rem;
    }

    .section2 .main-btn {
        padding-left: 3rem;
        padding-right: 3rem;
    }

    .section2 :is(.row1, .row3) {
        margin-bottom: 10rem;
    }
}