document.documentElement.style.setProperty("--height-navbar", `${$('.navbar').outerHeight()}px`);

$('.hero .layout-main .nav-button .next').on('click', function (e) {
    $('.hero .carousel').carousel('next')
})
$('.hero .layout-main .nav-button .prev').on('click', function (e) {
    $('.hero .carousel').carousel('prev')
})

$('.hero .layout-main .nav-button.mobile .next').on('click', function (e) {
    $('.hero .carousel.big').carousel('next')
})
$('.hero .layout-main .nav-button.mobile .prev').on('click', function (e) {
    $('.hero .carousel.big').carousel('prev')
})

$('.hero .layout-main .carousel.big').on('slide.bs.carousel', function (e) {
    if (e.direction == 'left') {
        $('.hero .layout-main .carousel.big .carousel-indicators p span.current').text(e.to + 1)
        $('.hero .layout-secondary .call-to-action .container-subtitle').remove()
        $('.hero .layout-secondary .call-to-action').prepend(`<div class="container-subtitle position-relative overflow-hidden"><h1 class="subtitle fw-bolder-3 text-black animation-up mb-0">${$(`.hero .carousel.big .carousel-item:eq(${e.to})`).attr('data-subtitle')}</h1></div>`)
    } else {
        $('.hero .layout-main .carousel.big .carousel-indicators p span.current').text(e.to + 1)
        $('.hero .layout-secondary .call-to-action .container-subtitle').remove()
        $('.hero .layout-secondary .call-to-action').prepend(`<div class="container-subtitle position-relative overflow-hidden"><h1 class="subtitle fw-bolder-3 text-black animation-down mb-0">${$(`.hero .carousel.big .carousel-item:eq(${e.to})`).attr('data-subtitle')}</h1></div>`)
    }
})
$('.hero .layout-main .carousel.big').on('slid.bs.carousel', function (e) {
    if (e.direction == 'left') {
        $('.hero .layout-secondary .call-to-action .description').remove()
        $('.hero .layout-secondary .call-to-action').append(
            `<div class="d-flex description align-items-center animation-up mt-md-4">
                <p class="text-tertiary-1 mb-0">${$(`.hero .carousel.big .carousel-item:eq(${e.to})`).attr('data-description')}</p>
                <div class="vr d-none d-lg-block"></div>
                <a href="${$(`.hero .carousel.big .carousel-item:eq(${e.to})`).attr('data-href')}" role="button" class="btn btn-primary d-flex align-items-center body-small-2">Explore Now <span class="material-icons-round body-small-1 ms-2">arrow_outward</span></a>
            </div>`
        )
    } else {
        $('.hero .layout-secondary .call-to-action .description').remove()
        $('.hero .layout-secondary .call-to-action').append(
            `<div class="d-flex description align-items-center animation-down mt-md-4">
                <p class="text-tertiary-1 mb-0">${$(`.hero .carousel.big .carousel-item:eq(${e.to})`).attr('data-description')}</p>
                <div class="vr d-none d-lg-block"></div>
                <a href="${$(`.hero .carousel.big .carousel-item:eq(${e.to})`).attr('data-href')}" role="button" class="btn btn-primary d-flex align-items-center body-small-2">Explore Now <span class="material-icons-round body-small-1 ms-2">arrow_outward</span></a>
            </div>`
        )
    }
})

$('.hero .layout-main .carousel.small').on('slide.bs.carousel', function (e) {
    if (e.direction == 'left') {
        $('.hero .layout-main .carousel.small .layout-tagline .title').remove()
        $('.hero .layout-main .carousel.small .layout-tagline .subtitle').remove()
        $('.hero .layout-main .carousel.small .layout-tagline .container-title-subtitle').append(`<p class="title body-small-2 mb-1 animation-up">Elevating Your</p>`)
        $('.hero .layout-main .carousel.small .layout-tagline .container-title-subtitle').append(`<h5 class="subtitle op-2 fw-bolder-2 text-white mb-0 animation-up">${$(`.hero .carousel.big .carousel-item:eq(${e.to})`).attr('data-subtitle')}</h5>`)
    } else {
        $('.hero .layout-main .carousel.small .layout-tagline .title').remove()
        $('.hero .layout-main .carousel.small .layout-tagline .subtitle').remove()
        $('.hero .layout-main .carousel.small .layout-tagline .container-title-subtitle').append(`<p class="title body-small-2 mb-1 animation-down">Elevating Your</p>`)
        $('.hero .layout-main .carousel.small .layout-tagline .container-title-subtitle').append(`<h5 class="subtitle op-2 fw-bolder-2 text-white mb-0 animation-down">${$(`.hero .carousel.big .carousel-item:eq(${e.to})`).attr('data-subtitle')}</h5>`)
    }
})