/*=============== SHOW MENU ===============*/
const navMenu = document.getElementById('nav-menu'),
    navToggle = document.getElementById('nav-toggle'),
    navClose = document.getElementById('nav-close')

/* Menu show */
if(navToggle) {
    navToggle.addEventListener('click', () =>{
        navMenu.classList.add('show-menu')
    })
}

/* Menu hidden */
if(navClose) {
    navClose.addEventListener('click', () =>{
        navMenu.classList.remove('show-menu')
    })
}

/*=============== SHOW AGENCY DROPDOWN MENU ===============*/
const agencyDropdownItems = document.querySelectorAll('.dropdownagency__item')

// 1. Select each dropdown item.
agencyDropdownItems.forEach((item) =>{
    const dropdownButton = item.querySelector('.dropdown__button')

    // 2. Select each button click.
    dropdownButton.addEventListener('click', () =>{

        // 7. Select the current show-dropdown class.
        const showDropdown = document.querySelector('.show-dropdown')
        
        // 5. Call the toggleItem function.
        agencyToggleItem(item)

        // 8. Remove the show-dropdown class from other items.
        if(showDropdown && showDropdown != item) {
            toggleItem(showDropdown)
        }
    })
})

// 3. Create a function to display the dropdown.
const agencyToggleItem = (item) =>{

    // 3.1. Select each dropdown content.
    const agencyDropdownContainer = item.querySelector('.dropdownagency__container')

    // 6. If the same item contains the show-dropdown class, remove.
    if(item.classList.contains('show-dropdown')) {
        agencyDropdownContainer.removeAttribute('style')
        item.classList.remove('show-dropdown')
    } else {
        // 4. Add the maximum height to dropdown content and add the show-dropdown class.
        agencyDropdownContainer.style.height = agencyDropdownContainer.scrollHeight + 'px'
        item.classList.add('show-dropdown')
    }
}

/*=============== SHOW PRODUCTS DROPDOWN MENU ===============*/
const dropdownItems = document.querySelectorAll('.dropdown__item')

// 1. Select each dropdown item.
dropdownItems.forEach((item) =>{
    const dropdownButton = item.querySelector('.dropdown__button')

    // 2. Select each button click.
    dropdownButton.addEventListener('click', () =>{

        // 7. Select the current show-dropdown class.
        const showDropdown = document.querySelector('.show-dropdown')
        
        // 5. Call the toggleItem function.
        toggleItem(item)

        // 8. Remove the show-dropdown class from other items.
        if(showDropdown && showDropdown != item) {
            agencyToggleItem(showDropdown)
        }
    })
})

// 3. Create a function to display the dropdown.
const toggleItem = (item) =>{

    // 3.1. Select each dropdown content.
    const dropdownContainer = item.querySelector('.dropdown__container')

    // 6. If the same item contains the show-dropdown class, remove.
    if(item.classList.contains('show-dropdown')) {
        dropdownContainer.removeAttribute('style')
        item.classList.remove('show-dropdown')
    } else {
        // 4. Add the maximum height to dropdown content and add the show-dropdown class.
        dropdownContainer.style.height = dropdownContainer.scrollHeight + 'px'
        item.classList.add('show-dropdown')
    }
}

/*=============== DELETE DROPDOWN STYLES ===============*/
const mediaQuery = matchMedia('(min-width: 1150px)'),
      dropdownContainer = document.querySelectorAll('.dropdown__container')

// Function to remove dropdown styles in mobile mode when browser resizes
const removeStyle = () =>{
    // Validate if the media query reaches 1118px
    if(mediaQuery.matches){
        // Remove the dropdown container height style
        dropdownContainer.forEach((e) =>{
            e.removeAttribute('style')
        })

        // Remove the show-dropdown class from dropdown item
        dropdownItems.forEach((e) =>{
            e.classList.remove('show-dropdown')
        })
    }
}

addEventListener('resize', removeStyle)

/*=============== LOGIN ===============*/
const loginButton = document.getElementById('login-button'),
    loginClose = document.getElementById('login-close'),
    loginContent = document.getElementById('login-content')

/* Login show */
if(loginButton) {
    loginButton.addEventListener('click', () =>{
        loginContent.classList.add('show-login')
    })
}

/* Login hidden */
if(loginClose) {
    loginClose.addEventListener('click', () =>{
        loginContent.classList.remove('show-login')
    })
}

/*=============== PELLETEUSE BOOKING LOGIN ===============*/
const pelleteuseBooking = document.getElementById('pelleteuse-booking'),
    pelleteuseBookingClose = document.getElementById('login-close'),
    pelleteuseBookingContent = document.getElementById('login-content')

/* Modal show */
if(pelleteuseBooking) {
    pelleteuseBooking.addEventListener('click', () =>{
        pelleteuseBookingContent.classList.add('show-login')
    })
}

/* Modal hidden */
if(pelleteuseBookingClose) {
    pelleteuseBookingClose.addEventListener('click', () =>{
        pelleteuseBookingContent.classList.remove('show-login')
    })
}

/*=============== PELLETEUSE BOOKING BY PHONE ===============*/
const pelleteuseBookingPhone = document.getElementById('pelleteuse-booking-phone'),
    pelleteuseBookingPhoneClose = document.getElementById('modal-close'),
    pelleteuseBookingPhoneContent = document.getElementById('modal-content')

/* Modal show */
if(pelleteuseBookingPhone) {
    pelleteuseBookingPhone.addEventListener('click', () =>{
        pelleteuseBookingPhoneContent.classList.add('show-modal')
    })
}

/* Modal hidden */
if(pelleteuseBookingPhoneClose) {
    pelleteuseBookingPhoneClose.addEventListener('click', () =>{
        pelleteuseBookingPhoneContent.classList.remove('show-modal')
    })
}

/*=============== MARTEAU PIQUEUR BOOKING LOGIN ===============*/
const marteauPiqueurBooking = document.getElementById('marteau-piqueur-booking'),
    marteauPiqueurBookingClose = document.getElementById('login-close'),
    marteauPiqueurBookingContent = document.getElementById('login-content')

/* Login show */
if(marteauPiqueurBooking) {
    marteauPiqueurBooking.addEventListener('click', () =>{
        marteauPiqueurBookingContent.classList.add('show-login')
    })
}

/* Login hidden */
if(marteauPiqueurBookingClose) {
    marteauPiqueurBookingClose.addEventListener('click', () =>{
        marteauPiqueurBookingContent.classList.remove('show-login')
    })
}

/*=============== MARTEAU PIQUEUR BOOKING BY PHONE ===============*/
const marteauPiqueurBookingPhone = document.getElementById('marteau-piqueur-booking-phone'),
    marteauPiqueurBookingPhoneClose = document.getElementById('modal-close'),
    marteauPiqueurBookingPhoneContent = document.getElementById('modal-content')

/* Modal show */
if(marteauPiqueurBookingPhone) {
    marteauPiqueurBookingPhone.addEventListener('click', () =>{
        pelleteuseBookingPhoneContent.classList.add('show-modal')
    })
}

/* Modal hidden */
if(marteauPiqueurBookingPhoneClose) {
    pelleteuseBookingPhoneClose.addEventListener('click', () =>{
        pelleteuseBookingPhoneContent.classList.remove('show-modal')
    })
}

/*=============== BENNE A BETON BOOKING LOGIN ===============*/
const benneBetonBooking = document.getElementById('benne-beton'),
    benneBetonBookingClose = document.getElementById('login-close'),
    benneBetonBookingContent = document.getElementById('login-content')

/* Login show */
if(benneBetonBooking) {
    benneBetonBooking.addEventListener('click', () =>{
        benneBetonBookingContent.classList.add('show-login')
    })
}

/* Login hidden */
if(benneBetonBookingClose) {
    benneBetonBookingClose.addEventListener('click', () =>{
        benneBetonBookingContent.classList.remove('show-login')
    })
}

/*=============== BENNE A BETON BOOKING BY PHONE ===============*/
const benneBetonBookingPhone = document.getElementById('benne-beton-phone'),
    benneBetonBookingPhoneClose = document.getElementById('modal-close'),
    benneBetonBookingPhoneContent = document.getElementById('modal-content')

/* Modal show */
if(benneBetonBookingPhone) {
    benneBetonBookingPhone.addEventListener('click', () =>{
        benneBetonBookingPhoneContent.classList.add('show-modal')
    })
}

/* Modal hidden */
if(benneBetonBookingPhoneClose) {
    benneBetonBookingPhoneClose.addEventListener('click', () =>{
        benneBetonBookingPhoneContent.classList.remove('show-modal')
    })
}

/*=============== GOULOTTE BOOKING LOGIN ===============*/
const goulotteBooking = document.getElementById('goulotte'),
    goulotteBookingClose = document.getElementById('login-close'),
    goulotteBookingContent = document.getElementById('login-content')

/* Login show */
if(goulotteBooking) {
    goulotteBooking.addEventListener('click', () =>{
        goulotteBookingContent.classList.add('show-login')
    })
}

/* Login hidden */
if(goulotteBookingClose) {
    goulotteBookingClose.addEventListener('click', () =>{
        goulotteBookingContent.classList.remove('show-login')
    })
}

/*=============== GOULOTTE BOOKING BY PHONE ===============*/
const goulotteBookingPhone = document.getElementById('goulotte-phone'),
    goulotteBookingPhoneClose = document.getElementById('modal-close'),
    goulotteBookingPhoneContent = document.getElementById('modal-content')

/* Modal show */
if(goulotteBookingPhone) {
    goulotteBookingPhone.addEventListener('click', () =>{
        goulotteBookingPhoneContent.classList.add('show-modal')
    })
}

/* Modal hidden */
if(goulotteBookingPhoneClose) {
    goulotteBookingPhoneClose.addEventListener('click', () =>{
        goulotteBookingPhoneContent.classList.remove('show-modal')
    })
}

/*=============== DISCOUNT LOGIN ===============*/
const discountLogin = document.getElementById('discount-login'),
    discountLoginClose = document.getElementById('login-close'),
    discountLoginContent = document.getElementById('login-content')

/* Login show */
if(discountLogin) {
    discountLogin.addEventListener('click', () =>{
        discountLoginContent.classList.add('show-login')
    })
}

/* Login hidden */
if(discountLoginClose) {
    discountLoginClose.addEventListener('click', () =>{
        discountLoginContent.classList.remove('show-login')
    })
}



/*=============== REMOVE MENU MOBILE ===============*/
const navLink = document.querySelectorAll('.nav__link')

const linkAction = () =>{
    const navMenu = document.getElementById('nav-menu')
    navMenu.classList.remove('show-menu')
}
navLink.forEach(n => n.addEventListener('click', linkAction))

/*=============== ADD SHADOW HEADER ===============*/
/*const shadowHeader = ()=>{
    const header = document.getElementById('header')
    this.scrollY >= 50 ? header.classList.add('shadow-header')
        : header.classList.remove('shadow-header')
}
window.addEventListener('scroll', shadowHeader)*/

/*=============== SWIPER HOME ===============*/
let swiperHome = new Swiper('.home__swiper', {
    loop: true,
    spaceBetween: -24,
    grabCursor: true,
    slidesPerView: 'auto',
    centeredSlides: 'auto',

    autoplay: {
        delay: 3000,
        disableOnInteraction: false,
    },

    breakpoints: {
        1220: {
            spaceBetween: -32,
            slidesPerView: 3,
        }
    }
})

/*=============== FARMLAND SWIPER ===============*/
let swiperFarmland = new Swiper('.farmland__swiper', {
    loop: true,
    spaceBetween: 16,
    grabCursor: true,
    slidesPerView: 'auto',
    centeredSlides: 'auto',

    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },

    breakpoints: {
        1150: {
            slidesPerView: 4,
            centeredSlides: false,
        }
    }
})

/*=============== FARMLAND ATTECOUBÉ BOOKING BY PHONE ===============*/
const farmlandAttecoubePhoneClose = document.getElementById('modal-close'),
    farmlandAttecoubePhoneContent = document.getElementById('modal-content')
function farmlandAttecoubeByPhone() {
    farmlandAttecoubePhoneContent.classList.add('show-modal');
}

/*=============== FARMLAND ATTECOUBÉ  BOOKING LOGIN ===============*/
const farmlandAttecoubeClose = document.getElementById('login-close'),
    farmlandAttecoubeContent = document.getElementById('login-content')
function farmlandAttecoube() {
    farmlandAttecoubeContent.classList.add('show-login');
}

/*=============== FARMLAND TREICHVILLE BOOKING BY PHONE ===============*/
const farmlandTreichvillePhoneClose = document.getElementById('modal-close'),
    farmlandTreichvillePhoneContent = document.getElementById('modal-content')
function farmlandTreichvilleByPhone() {
    farmlandTreichvillePhoneContent.classList.add('show-modal');
}

/*=============== FARMLAND TREICHVILLE  BOOKING LOGIN ===============*/
const farmlandTreichvilleClose = document.getElementById('login-close'),
    farmlandTreichvilleContent = document.getElementById('login-content')
function farmlandTreichville() {
    farmlandTreichvilleContent.classList.add('show-login');
}

/*=============== FARMLAND MARCORY BOOKING BY PHONE ===============*/
const farmlandMarcoryPhoneClose = document.getElementById('modal-close'),
    farmlandMarcoryPhoneContent = document.getElementById('modal-content')
function farmlandMarcoryByPhone() {
    farmlandMarcoryPhoneContent.classList.add('show-modal');
}

/*=============== FARMLAND MARCORY  BOOKING LOGIN ===============*/
const farmlandMarcoryClose = document.getElementById('login-close'),
    farmlandMarcoryContent = document.getElementById('login-content')
function farmlandMarcory() {
    farmlandMarcoryContent.classList.add('show-login');
}

/*=============== FARMLAND BRACODI BOOKING BY PHONE ===============*/
const farmlandBracodiPhoneClose = document.getElementById('modal-close'),
    farmlandBracodiPhoneContent = document.getElementById('modal-content')
function farmlandBracodiByPhone() {
    farmlandBracodiPhoneContent.classList.add('show-modal');
}

/*=============== FARMLAND BRACODI  BOOKING LOGIN ===============*/
const farmlandBracodiClose = document.getElementById('login-close'),
    farmlandBracodiContent = document.getElementById('login-content')
function farmlandBracodi() {
    farmlandBracodiContent.classList.add('show-login');
}

/*=============== FARMLAND SIKASSO BOOKING BY PHONE ===============*/
const farmlandSikassoPhoneClose = document.getElementById('modal-close'),
    farmlandSikassoPhoneContent = document.getElementById('modal-content')
function farmlandSikassoByPhone() {
    farmlandSikassoPhoneContent.classList.add('show-modal');
}

/*=============== FARMLAND SIKASSO  BOOKING LOGIN ===============*/
const farmlandSikassoClose = document.getElementById('login-close'),
    farmlandSikassoContent = document.getElementById('login-content')
function farmlandSikasso() {
    farmlandSikassoContent.classList.add('show-login');
}

/*=============== BUILDING PELLETEUSE BOOKING BY PHONE ===============*/
const buildingPelleteusePhoneClose = document.getElementById('modal-close'),
    buildingPelleteusePhoneContent = document.getElementById('modal-content')
function buildingPelleteuseByPhone() {
    buildingPelleteusePhoneContent.classList.add('show-modal');
}

/*=============== BUILDING PELLETEUSE  BOOKING LOGIN ===============*/
const buildingPelleteuseClose = document.getElementById('login-close'),
    buildingPelleteuseContent = document.getElementById('login-content')
function buildingPelleteuse() {
    buildingPelleteuseContent.classList.add('show-login');
}

/*=============== BUILDING MARTEAU BOOKING BY PHONE ===============*/
const buildingMarteauPhoneClose = document.getElementById('modal-close'),
    buildingMarteauPhoneContent = document.getElementById('modal-content')
function buildingMarteauByPhone() {
    buildingMarteauPhoneContent.classList.add('show-modal');
}

/*=============== BUILDING MARTEAU  BOOKING LOGIN ===============*/
const buildingMarteauClose = document.getElementById('login-close'),
    buildingMarteauContent = document.getElementById('login-content')
function buildingMarteau() {
    buildingMarteauContent.classList.add('show-login');
}

/*=============== BUILDING BENNE BOOKING BY PHONE ===============*/
const buildingBennePhoneClose = document.getElementById('modal-close'),
    buildingBennePhoneContent = document.getElementById('modal-content')
function buildingBenneByPhone() {
    buildingBennePhoneContent.classList.add('show-modal');
}

/*=============== BUILDING BENNE  BOOKING LOGIN ===============*/
const buildingBenneClose = document.getElementById('login-close'),
    buildingBenneContent = document.getElementById('login-content')
function buildingBenne() {
    buildingBenneContent.classList.add('show-login');
}

/*=============== BUILDING GOULOTTE BOOKING BY PHONE ===============*/
const buildingGoulottePhoneClose = document.getElementById('modal-close'),
    buildingGoulottePhoneContent = document.getElementById('modal-content')
function buildingGoulotteByPhone() {
    buildingGoulottePhoneContent.classList.add('show-modal');
}

/*=============== BUILDING GOULOTTE  BOOKING LOGIN ===============*/
const buildingGoulotteClose = document.getElementById('login-close'),
    buildingGoulotteContent = document.getElementById('login-content')
function buildingGoulotte() {
    buildingGoulotteContent.classList.add('show-login');
}

/*=============== SONGON BY PHONE ===============*/
const songonPhoneClose = document.getElementById('modal-close'),
    songonPhoneContent = document.getElementById('modal-content')
function songonPhone() {
    songonPhoneContent.classList.add('show-modal');
}

function explore() {
    setTimeout(function () {
        location.reload();
    }, 3000);
}

function zoneSongon() {
    setTimeout(function () {
        location.reload();
    }, 3000);
}

function deposerAnnonce() {
    setTimeout(function () {
        location.reload();
    }, 10);
}

/*=============== DEPOSER ANNONCE LOGIN ===============*/
const deposerAnnonceClose = document.getElementById('login-close'),
    deposerAnnonceContent = document.getElementById('login-content')
function deposerAnnonceToLogin() {
    deposerAnnonceContent.classList.add('show-login');
}

/*=============== INSCRIPTION ANNONCE ===============*/
function inscriptionAnnonce() {
    setTimeout(function () {
        location.reload();
    }, 10);
}

/*=============== EVENTROOM SALLE A BY PHONE ===============*/
const eventroomSalleAPhoneClose = document.getElementById('modal-close'),
    eventroomSalleAPhoneContent = document.getElementById('modal-content')
function eventroomSalleAPhone() {
    eventroomSalleAPhoneContent.classList.add('show-modal');
}

/*=============== EVENTROOM SALLE A LOGIN ===============*/
const eventroomSalleAClose = document.getElementById('login-close'),
    eventroomSalleAContent = document.getElementById('login-content')
function eventroomSalleA() {
    eventroomSalleAContent.classList.add('show-login');
}

/*=============== EVENTROOM SALLE B BY PHONE ===============*/
const eventroomSalleBPhoneClose = document.getElementById('modal-close'),
    eventroomSalleBPhoneContent = document.getElementById('modal-content')
function eventroomSalleBPhone() {
    eventroomSalleBPhoneContent.classList.add('show-modal');
}

/*=============== EVENTROOM SALLE B LOGIN ===============*/
const eventroomSalleBClose = document.getElementById('login-close'),
    eventroomSalleBContent = document.getElementById('login-content')
function eventroomSalleB() {
    eventroomSalleBContent.classList.add('show-login');
}

/*=============== EVENTROOM SALLE C BY PHONE ===============*/
const eventroomSalleCPhoneClose = document.getElementById('modal-close'),
    eventroomSalleCPhoneContent = document.getElementById('modal-content')
function eventroomSalleCPhone() {
    eventroomSalleCPhoneContent.classList.add('show-modal');
}

/*=============== EVENTROOM SALLE C LOGIN ===============*/
const eventroomSalleCClose = document.getElementById('login-close'),
    eventroomSalleCContent = document.getElementById('login-content')
function eventroomSalleC() {
    eventroomSalleCContent.classList.add('show-login');
}

/*=============== EVENTROOM SALLE D BY PHONE ===============*/
const eventroomSalleDPhoneClose = document.getElementById('modal-close'),
    eventroomSalleDPhoneContent = document.getElementById('modal-content')
function eventroomSalleDPhone() {
    eventroomSalleDPhoneContent.classList.add('show-modal');
}

/*=============== EVENTROOM SALLE D LOGIN ===============*/
const eventroomSalleDClose = document.getElementById('login-close'),
    eventroomSalleDContent = document.getElementById('login-content')
function eventroomSalleD() {
    eventroomSalleDContent.classList.add('show-login');
}

/*=============== TARPAULIN BACHE STRUCTURE A BY PHONE ===============*/
const tarpaulinBacheAPhoneClose = document.getElementById('modal-close'),
    tarpaulinBacheAPhoneContent = document.getElementById('modal-content')
function tarpaulinBacheAPhone() {
    tarpaulinBacheAPhoneContent.classList.add('show-modal');
}

/*=============== TARPAULIN BACHE STRUCTURE A LOGIN ===============*/
const tarpaulinBacheAClose = document.getElementById('login-close'),
    tarpaulinBacheAContent = document.getElementById('login-content')
function tarpaulinBacheA() {
    tarpaulinBacheAContent.classList.add('show-login');
}

/*=============== TARPAULIN BACHE STRUCTURE B BY PHONE ===============*/
const tarpaulinBacheBPhoneClose = document.getElementById('modal-close'),
    tarpaulinBacheBPhoneContent = document.getElementById('modal-content')
function tarpaulinBacheBPhone() {
    tarpaulinBacheBPhoneContent.classList.add('show-modal');
}

/*=============== TARPAULIN BACHE STRUCTURE B LOGIN ===============*/
const tarpaulinBacheBClose = document.getElementById('login-close'),
    tarpaulinBacheBContent = document.getElementById('login-content')
function tarpaulinBacheB() {
    tarpaulinBacheBContent.classList.add('show-login');
}

/*=============== TARPAULIN BACHE STRUCTURE C BY PHONE ===============*/
const tarpaulinBacheCPhoneClose = document.getElementById('modal-close'),
    tarpaulinBacheCPhoneContent = document.getElementById('modal-content')
function tarpaulinBacheCPhone() {
    tarpaulinBacheCPhoneContent.classList.add('show-modal');
}

/*=============== TARPAULIN BACHE STRUCTURE C LOGIN ===============*/
const tarpaulinBacheCClose = document.getElementById('login-close'),
    tarpaulinBacheCContent = document.getElementById('login-content')
function tarpaulinBacheC() {
    tarpaulinBacheCContent.classList.add('show-login');
}

/*=============== TARPAULIN BACHE STRUCTURE D BY PHONE ===============*/
const tarpaulinBacheDPhoneClose = document.getElementById('modal-close'),
    tarpaulinBacheDPhoneContent = document.getElementById('modal-content')
function tarpaulinBacheDPhone() {
    tarpaulinBacheDPhoneContent.classList.add('show-modal');
}

/*=============== TARPAULIN BACHE STRUCTURE D LOGIN ===============*/
const tarpaulinBacheDClose = document.getElementById('login-close'),
    tarpaulinBacheDContent = document.getElementById('login-content')
function tarpaulinBacheD() {
    tarpaulinBacheDContent.classList.add('show-login');
}

/*=============== SPOTLIGHT CHAISE BY PHONE ===============*/
const spotlightChaisePhoneClose = document.getElementById('modal-close'),
    spotlightChaisePhoneContent = document.getElementById('modal-content')
function spotlightChaisePhone() {
    spotlightChaisePhoneContent.classList.add('show-modal');
}

/*=============== SPOTLIGHT BATEAU BY PHONE ===============*/
const spotlightBateauPhoneClose = document.getElementById('modal-close'),
    spotlightBateauPhoneContent = document.getElementById('modal-content')
function spotlightBateauPhone() {
    spotlightBateauPhoneContent.classList.add('show-modal');
}

/*=============== SPOTLIGHT VAISSELLE BY PHONE ===============*/
const spotlightVaissellePhoneClose = document.getElementById('modal-close'),
    spotlightVaissellePhoneContent = document.getElementById('modal-content')
function spotlightVaissellePhone() {
    spotlightVaissellePhoneContent.classList.add('show-modal');
}

/*=============== SPOTLIGHT BACHE BY PHONE ===============*/
const spotlightBachePhoneClose = document.getElementById('modal-close'),
    spotlightBachePhoneContent = document.getElementById('modal-content')
function spotlightBachePhone() {
    spotlightBachePhoneContent.classList.add('show-modal');
}

/*=============== SPOTLIGHT TERRAIN ATTECOUBE BY PHONE ===============*/
const spotlightTerrainAttecoubePhoneClose = document.getElementById('modal-close'),
    spotlightTerrainAttecoubePhoneContent = document.getElementById('modal-content')
function spotlightTerrainAttecoubePhone() {
    spotlightTerrainAttecoubePhoneContent.classList.add('show-modal');
}

/*=============== SPOTLIGHT TERRAIN TREICHVILLE BY PHONE ===============*/
const spotlightTerrainTreichvillePhoneClose = document.getElementById('modal-close'),
    spotlightTerrainTreichvillePhoneContent = document.getElementById('modal-content')
function spotlightTerrainTreichvillePhone() {
    spotlightTerrainTreichvillePhoneContent.classList.add('show-modal');
}

/*=============== SPOTLIGHT TERRAIN MARCORY BY PHONE ===============*/
const spotlightTerrainMarcoryPhoneClose = document.getElementById('modal-close'),
    spotlightTerrainMarcoryPhoneContent = document.getElementById('modal-content')
function spotlightTerrainMarcoryPhone() {
    spotlightTerrainMarcoryPhoneContent.classList.add('show-modal');
}

/*=============== SPOTLIGHT TERRAIN BRACODI BY PHONE ===============*/
const spotlightTerrainBracodyPhoneClose = document.getElementById('modal-close'),
    spotlightTerrainBracodiPhoneContent = document.getElementById('modal-content')
function spotlightTerrainBracodiPhone() {
    spotlightTerrainBracodiPhoneContent.classList.add('show-modal');
}

/*=============== SPOTLIGHT RENAULT BY PHONE ===============*/
const spotlightRenaultPhoneClose = document.getElementById('modal-close'),
    spotlightRenaultPhoneContent = document.getElementById('modal-content')
function spotlightRenaultPhone() {
    spotlightRenaultPhoneContent.classList.add('show-modal');
}

/*=============== SPOTLIGHT MAZDA BY PHONE ===============*/
const spotlightMazdaPhoneClose = document.getElementById('modal-close'),
    spotlightMazdaPhoneContent = document.getElementById('modal-content')
function spotlightMazdaPhone() {
    spotlightMazdaPhoneContent.classList.add('show-modal');
}

/*=============== SPOTLIGHT AUDI BY PHONE ===============*/
const spotlightAudiPhoneClose = document.getElementById('modal-close'),
    spotlightAudiPhoneContent = document.getElementById('modal-content')
function spotlightAudiPhone() {
    spotlightAudiPhoneContent.classList.add('show-modal');
}





















/*=============== BUILDING SWIPER ===============*/
let swiperBuilding = new Swiper('.building__swiper', {
    loop: true,
    spaceBetween: 16,
    grabCursor: true,
    slidesPerView: 'auto',
    centeredSlides: 'auto',

    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },

    breakpoints: {
        1150: {
            slidesPerView: 4,
            centeredSlides: false,
        }
    }
})

/*=============== VEHICLE SWIPER ===============*/
let swiperVehicle = new Swiper('.vehicle__swiper', {
    loop: true,
    spaceBetween: 16,
    slidesPerView: 'auto',

    breakpoints: {
        1150: {
            slidesPerView: 3,
        }
    }
})

/*=============== TESTIMONIAL SWIPER ===============*/
let swiperTestimonial = new Swiper('.testimonial__swiper', {
    loop: true,
    spaceBetween: 16,
    grabCursor: true,
    slidesPerView: 'auto',
    centeredSlides: 'auto',

    breakpoints: {
        1150: {
            slidesPerView: 3,
            centeredSlides: false,
        }
    }
})

/*=============== EVENTROOMS SWIPER ===============*/
let swiperEventrooms = new Swiper('.eventrooms__swiper', {
    loop: true,
    spaceBetween: 16,
    grabCursor: true,
    slidesPerView: 'auto',
    centeredSlides: 'auto',

    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },

    breakpoints: {
        1150: {
            slidesPerView: 4,
            centeredSlides: false,
        }
    }
})

/*=============== TARPAULIN SWIPER ===============*/
let swiperTarpaulin = new Swiper('.tarpaulin__swiper', {
    loop: true,
    spaceBetween: 16,
    grabCursor: true,
    slidesPerView: 'auto',
    centeredSlides: 'auto',

    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },

    breakpoints: {
        1150: {
            slidesPerView: 4,
            centeredSlides: false,
        }
    }
})

























/*=============== SHOW SCROLL UP ===============*/ 
const scrollUp = () => {
    const scrollUp = document.getElementById('scroll-up')
    this.scrollY >= 350 ? scrollUp.classList.add('show-scroll') 
        :scrollUp.classList.remove('show-scroll')
}
window.addEventListener('scroll', scrollUp)

/*=============== SCROLL REVEAL ANIMATION ===============*/
const sr = ScrollReveal({
    origin: 'top',
    distance: '60px',
    duration: 2500,
    delay: 400,
    reset: true, // Repeat
})

sr.reveal(`.home__data, .building__container, .vehicle__container,
    .join__data, .testimonial__container, .footer`)
sr.reveal(`.home__images`, {delay: 600})
sr.reveal(`.services__card`, {interval: 100})
sr.reveal(`.discount__data`, {origin: 'left'})
sr.reveal(`.discount__images`, {origin: 'right'})