.search-margin {
    margin-top: 55vh;
}

.search-box {
    width: 100%;
    height: 220px;
}

.tab-button {
    min-width: 70px;
    margin: auto;
    margin-top: 15px;
}


.div-main {
    z-index: 100;
    width: 100%;
    height: 100vh;
    border: solid 0px red;
    position: absolute;
    top: 0;
    left: 0;
}

.home-icon {
    width: 70px;
    height: 70px;
}

.custom-icon-button {
    color: #666; /* Replace with your desired default color */
    background-color: rgba(0,0,0,.1);
    border: none;
}

.custom-icon-button:hover {
    color: white; /* Replace with your desired hover color */
    background-color: #b37f1d; /* Optional: Remove background color on hover */
    transition: all 0.3s;
}

.custom-icon-button.active {
    color: #13179e;
    background-color: white;
    border0: solid 2px #0c80df;
}

.custom-icon-button .mud-typography-body2 {    
    font-size: 0.7rem;
    padding-top:5px;
}

.custom-icon-button.active:hover {
    color: white;
    background-color: #13179e;
    transition: all 0.3s;
}

.custom-icon-button > div > .text-active:hover {
    /*color: #F9A519;*/
    color: red;
    transition: all 0.3s;
}

#home-bot {
    position: absolute;
    top: 100vh;
    right: 0;
    width: 100%;
    height: 100vh;
    background: url('../images/home-bg-bot.jpg') no-repeat top right;
    background-size: cover;
    z-index: 2;
}


#tour {
    position: absolute;
    top: 100px;
    right: 0;
    width: 100%;
    height: 45%;
    background: url('../images/banner/hotel.jpg') no-repeat bottom left;
    background-size: cover;
    z-index: 2;
}

#flight {
    position: absolute;
    top: 45px;
    right: 0;
    width: 100%;
    height: 43%;
    background: url('../images/banner/flight.jpg') no-repeat bottom left;
    background-size: cover;
    z-index: 2;
}

#left-mountain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: url('images/home-bg-top.jpg') no-repeat bottom left;
    background-size: cover;
    z-index: 0;
}

#left-bot {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: url('images/home-bg-bot-left.png') no-repeat bottom left;
    background-size: cover;
    z-index: 90;
}

#tour-intel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: url('images/tour-intel.png') no-repeat bottom left;
    background-size: cover;
    z-index: 91;
    opacity: 0;
}

@keyframes showTourIntel {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes hideTourIntel {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

#train {
    position: absolute;
    top: 0; /* Adjust the vertical position of the train */
    right: calc(-27.3vw); /* Start the train in the middle between the mountains */
    width: calc(27.3vw); /* Adjust the width of the train */
    height: 100vh; /* Adjust the height of the train */
    background: url('images/train.png') no-repeat bottom right;
    background-size: cover;
    z-index: 1;
    animation1: moveTrain 2s linear forwards; /* Adjust duration as needed */
}

@keyframes moveTrain {
    0% {
        right: calc(-27.3vw);
    }

    100% {
        right: 0; /* Move the train to the rightmost position */
    }
}

@keyframes hideTrain {
    0% {
        right: 0;
    }

    100% {
        right: calc(-27.3vw);
    }
}

#airplane {
    position: absolute;
    left: 10px;
    top: 210px;
    width: 10px;
    z-index: 101;
}


@keyframes movePlane {
    0% {
        left: 10px;
        top: 210px;
        width: 0px;
    }

    100% {
        left: 320px;
        top: 100px;
        width: 310px;
    }
}

@keyframes hidePlane {
    0% {
        left: 320px;
        top: 100px;
        width: 310px;
    }

    100% {
        left: 10px;
        top: 210px;
        width: 0px;
    }
}

#bus {
    position: absolute;
    top: calc(64vh); /* Adjust the vertical position of the train */
    left: calc(55vw); /* Start the train in the middle between the mountains */
    width: 0; /* Adjust the width of the train */
    height: 0; /* Adjust the height of the train */
    z-index: 99;
}

@keyframes moveBus {
    0% {
        top: calc(64vh);
        left: calc(55vw); /* Start the train in the middle between the mountains */
        width: 0; /* Adjust the width of the train */
        height: 0; /* Adjust the height of the train */
    }

    100% {
        top: calc(55vh);
        left: calc(67vw); /* Start the train in the middle between the mountains */
        width: calc(29.4vw); /* Adjust the width of the train */
        height: calc(26.7vh); /* Adjust the height of the train */
    }
}

@keyframes hideBus {
    0% {
        top: calc(55vh);
        left: calc(67vw); /* Start the train in the middle between the mountains */
        width: calc(29.4vw); /* Adjust the width of the train */
        height: calc(26.7vh); /* Adjust the height of the train */
    }

    100% {
        top: calc(64vh);
        left: calc(55vw); /* Start the train in the middle between the mountains */
        width: 0; /* Adjust the width of the train */
        height: 0; /* Adjust the height of the train */
    }
}

#hotel {
    position: absolute;
    left: calc(2vw);
    top: calc(50vh);
    width: 0; /* Adjust the width of the train */
    height: 0; /* Adjust the height of the train */
    z-index: 88;
    animation1: bounce 1s forwards;
}

@keyframes moveHotel {

    0% {
        top: calc(32vh);
        width: calc(24vw);
        height: calc(42vh);
    }

    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0); /* Bounce at the top position */
    }

    40% {
        transform: translateY(-70px); /* Bounce up */
    }

    60% {
        transform: translateY(-35px); /* Bounce down */
    }

    100% {
        top: calc(32vh);
        width: calc(24vw);
        height: calc(42vh);
    }
}

@keyframes hideHotel {
    0% {
        top: calc(32vh);
        width: calc(24vw);
        height: calc(42vh);
    }

    100% {
        top: calc(50vh);
        width: 0; /* Adjust the width of the train */
        height: 0; /* Adjust the height of the train */
    }
}

#hospital {
    position: absolute;
    left: calc(2vw);
    top: calc(50vh);
    width: 0; /* Adjust the width of the train */
    height: 0; /* Adjust the height of the train */
    z-index: 88;
    animation1: bounce 1s forwards;
}

@keyframes moveHospital {

    0% {
        top: calc(32vh);
        width: calc(19.5vw);
        height: calc(37.6vh);
    }

    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0); /* Bounce at the top position */
    }

    40% {
        transform: translateY(-70px); /* Bounce up */
    }

    60% {
        transform: translateY(-35px); /* Bounce down */
    }

    100% {
        top: calc(32vh);
        width: calc(19.5vw);
        height: calc(37.6vh);
    }
}

@keyframes hideHotel {
    0% {
        top: calc(32vh);
        width: calc(19.5vw);
        height: calc(37.6vh);
    }

    100% {
        top: calc(50vh);
        width: 0; /* Adjust the width of the train */
        height: 0; /* Adjust the height of the train */
    }
}

#tour-domes {
    position: absolute;
    left: calc(2vw);
    top: calc(50vh);
    width: 0; /* Adjust the width of the train */
    height: 0; /* Adjust the height of the train */
    z-index: 87;
    animation1: bounce 1s forwards;
}

@keyframes moveTourDomes {

    0% {
        top: calc(32vh);
        width: calc(45vw);
        height: calc(42vh);
    }

    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0); /* Bounce at the top position */
    }

    40% {
        transform: translateY(-70px); /* Bounce up */
    }

    60% {
        transform: translateY(-35px); /* Bounce down */
    }

    100% {
        top: calc(32vh);
        width: calc(45vw);
        height: calc(42vh);
    }
}

@keyframes hideTourDomes {
    0% {
        top: calc(32vh);
        width: calc(45vw);
        height: calc(42vh);
    }

    100% {
        top: calc(50vh);
        width: 0; /* Adjust the width of the train */
        height: 0; /* Adjust the height of the train */
    }
}

#villa {
    position: absolute;
    left: calc(0vw);
    top: calc(38vh);
    width: 0; /* Adjust the width of the train */
    height: 0; /* Adjust the height of the train */
    z-index: 86;
    animation1: bounce 1s forwards;
}

@keyframes moveVilla {

    0% {
        top: calc(38vh);
        width: calc(19.5vw);
        height: calc(31.2vh);
    }

    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0); /* Bounce at the top position */
    }

    40% {
        transform: translateY(-70px); /* Bounce up */
    }

    60% {
        transform: translateY(-35px); /* Bounce down */
    }

    100% {
        top: calc(38vh);
        width: calc(19.5vw);
        height: calc(31.2vh);
    }
}

@keyframes hideVilla {
    0% {
        top: calc(38vh);
        width: calc(24vw);
        height: calc(42vh);
    }

    100% {
        top: calc(50vh);
        width: 0; /* Adjust the width of the train */
        height: 0; /* Adjust the height of the train */
    }
}

#ambulance {
    position: absolute;
    top: calc(65vh); /* Adjust the vertical position of the train */
    right: calc(5vw); /* Start the train in the middle between the mountains */
    width: Calc(14vw); /* Adjust the width of the train */
    height: Calc(14vw); /* Adjust the height of the train */
    z-index: 92;
    opacity: 0;
}

@keyframes moveAmbulance {
    0% {
        top: calc(64vh);
        right: calc(5vw); /* Start the train in the middle between the mountains */
        width: Calc(14vw); /* Adjust the width of the train */
        height: Calc(14vw); /* Adjust the height of the train */
        opacity: 1;
    }

    100% {
        top: calc(60vh);
        right: calc(40vw);
        width: calc(7vw);
        height: calc(8vh);
        transform: rotate(15deg);
        opacity: 1;
    }
}

@keyframes hideAmbulance {
    0% {
        top: calc(60vh);
        right: calc(40vw);
        width: calc(7vw);
        height: calc(8vh);
        transform: rotate(15deg);
        opacity: 1;
    }

    100% {
        top: calc(64vh);
        right: calc(5vw); /* Start the train in the middle between the mountains */
        width: Calc(14vw); /* Adjust the width of the train */
        height: Calc(14vw); /* Adjust the height of the train */
        opacity: 0;
    }
}

/******************************************/

@media (max-width: 1280px) {

    #home-bot {
        top: 90vh;
        height: 90vh;
    }

    #right-mountain {
        width: 100%;
        height: 90vh;
    }

    #left-mountain {
        width: 100%;
        height: 90vh;
    }

    #left-bot {
        width: 100%;
        height: 90vh;
    }

    #tour-intel {
        width: 100%;
        height: 90vh;
    }

    #hotel {
        position: absolute;
        left: calc(2vw);
        top: calc(47vh);
        width: 0; /* Adjust the width of the train */
        height: 0; /* Adjust the height of the train */
        z-index: 88;
        animation1: bounce 1s forwards;
    }

    @keyframes moveHotel {

        0% {
            top: calc(36vh);
            width: calc(24vw);
            height: calc(42vh);
        }

        0%, 20%, 50%, 80%, 100% {
            transform: translateY(0); /* Bounce at the top position */
        }

        40% {
            transform: translateY(-70px); /* Bounce up */
        }

        60% {
            transform: translateY(-35px); /* Bounce down */
        }

        100% {
            top: calc(32vh);
            width: calc(24vw);
            height: calc(42vh);
        }
    }

    @keyframes hideHotel {
        0% {
            top: calc(36vh);
            width: calc(24vw);
            height: calc(42vh);
        }

        100% {
            top: calc(50vh);
            width: 0; /* Adjust the width of the train */
            height: 0; /* Adjust the height of the train */
        }
    }

    #villa {
        position: absolute;
        left: calc(0vw);
        top: calc(40vh);
        width: 0; /* Adjust the width of the train */
        height: 0; /* Adjust the height of the train */
        animation1: bounce 1s forwards;
    }

    @keyframes moveVilla {

        0% {
            top: calc(39vh);
            width: calc(19.5vw);
            height: calc(31.2vh);
        }

        0%, 20%, 50%, 80%, 100% {
            transform: translateY(0); /* Bounce at the top position */
        }

        40% {
            transform: translateY(-70px); /* Bounce up */
        }

        60% {
            transform: translateY(-35px); /* Bounce down */
        }

        100% {
            top: calc(39vh);
            width: calc(19.5vw);
            height: calc(31.2vh);
        }
    }

    @keyframes hideVilla {
        0% {
            top: calc(37vh);
            width: calc(19.5vw);
            height: calc(31.2vh);
        }

        100% {
            top: calc(50vh);
            width: 0; /* Adjust the width of the train */
            height: 0; /* Adjust the height of the train */
        }
    }

    #train {
        position: absolute;
        top: 0; /* Adjust the vertical position of the train */
        right: calc(-27.3vw); /* Start the train in the middle between the mountains */
        width: calc(27.3vw); /* Adjust the width of the train */
        height: 90vh; /* Adjust the height of the train */
        background: url('images/train.png') no-repeat bottom left;
        background-size: cover;
        z-index: 1;
        animation1: moveTrain 2s linear forwards; /* Adjust duration as needed */
        border: solid 1px red;
    }

    @keyframes moveTrain {
        0% {
            right: calc(-27.3vw);
        }

        100% {
            right: 0; /* Move the train to the rightmost position */
        }
    }

    @keyframes hideTrain {
        0% {
            right: 0;
        }

        100% {
            right: calc(-27.3vw);
        }
    }
}

@media (max-width: 1160px) {

    #home-bot {
        top: 80vh;
        height: 80vh;
    }

    #right-mountain {
        width: 100%;
        height: 80vh;
    }

    #left-mountain {
        width: 100%;
        height: 80vh;
    }

    #left-bot {
        width: 100%;
        height: 80vh;
    }

    #tour-intel {
        width: 100%;
        height: 80vh;
    }

    #airplane {
        position: absolute;
        left: 10px;
        top: 160px;
        width: 10px;
        z-index: 101;
    }

    @keyframes movePlane {
        0% {
            left: 10px;
            top: 160px;
            width: 0px;
        }

        100% {
            left: 360px;
            top: 70px;
            width: 300px;
        }
    }

    @keyframes hidePlane {
        0% {
            left: 360px;
            top: 70px;
            width: 300px;
        }

        100% {
            left: 10px;
            top: 140px;
            width: 0px;
        }
    }

    #train {
        position: absolute;
        top: 0; /* Adjust the vertical position of the train */
        right: calc(-27.3vw); /* Start the train in the middle between the mountains */
        width: calc(27.3vw); /* Adjust the width of the train */
        height: 80vh; /* Adjust the height of the train */
        background: url('images/train.png') no-repeat bottom left;
        background-size: cover;
        z-index: 1;
        animation1: moveTrain 2s linear forwards; /* Adjust duration as needed */
        border: solid 1px green;
    }

    @keyframes moveTrain {
        0% {
            right: calc(-27.3vw);
        }

        100% {
            right: 0; /* Move the train to the rightmost position */
        }
    }

    @keyframes hideTrain {
        0% {
            right: 0;
        }

        100% {
            right: calc(-27.3vw);
        }
    }
}

@media (max-width: 990px) {

    #home-bot {
        top: 75vh;
        height: 75vh;
    }

    #right-mountain {
        width: 100%;
        height: 75vh;
    }

    #left-mountain {
        width: 100%;
        height: 75vh;
    }

    #left-bot {
        width: 100%;
        height: 75vh;
    }

    #airplane {
        position: absolute;
        left: 10px;
        top: 140px;
        width: 10px;
        z-index: 101;
    }

    @keyframes movePlane {
        0% {
            left: 10px;
            top: 140px;
            width: 0px;
        }

        100% {
            left: 320px;
            top: 60px;
            width: 260px;
        }
    }

    @keyframes hidePlane {
        0% {
            left: 320px;
            top: 60px;
            width: 260px;
        }

        100% {
            left: 10px;
            top: 140px;
            width: 0px;
        }
    }

    #train {
        position: absolute;
        top: 0; /* Adjust the vertical position of the train */
        right: calc(-27.3vw); /* Start the train in the middle between the mountains */
        width: calc(27.3vw); /* Adjust the width of the train */
        height: 75vh; /* Adjust the height of the train */
        background: url('images/train.png') no-repeat bottom left;
        background-size: cover;
        z-index: 1;
        animation1: moveTrain 2s linear forwards; /* Adjust duration as needed */
        border: solid 1px blue;
    }

    @keyframes moveTrain {
        0% {
            right: calc(-27.3vw);
        }

        100% {
            right: 0; /* Move the train to the rightmost position */
        }
    }

    @keyframes hideTrain {
        0% {
            right: 0;
        }

        100% {
            right: calc(-27.3vw);
        }
    }
}

@media (max-width: 960px) {

    .search-margin {
        margin-top: 320px;
    }

    .search-box {
        width: 100%;
        height: 280px;
    }

    #home-bot {
        top: 70vh;
        height: 70vh;
    }

    #right-mountain {
        width: 100%;
        height: 70vh;
    }

    #left-mountain {
        width: 100%;
        height: 70vh;
    }

    #left-bot {
        width: 100%;
        height: 70vh;
    }

    #airplane {
        position: absolute;
        left: 10px;
        top: 140px;
        width: 10px;
        z-index: 101;
    }

    @keyframes movePlane {
        0% {
            left: 10px;
            top: 140px;
            width: 0px;
        }

        100% {
            left: 320px;
            top: 60px;
            width: 260px;
        }
    }

    @keyframes hidePlane {
        0% {
            left: 320px;
            top: 60px;
            width: 260px;
        }

        100% {
            left: 10px;
            top: 140px;
            width: 0px;
        }
    }

    #train {
        position: absolute;
        top: 0; /* Adjust the vertical position of the train */
        right: calc(-27.3vw); /* Start the train in the middle between the mountains */
        width: calc(27.3vw); /* Adjust the width of the train */
        height: 70vh; /* Adjust the height of the train */
        background: url('images/train.png') no-repeat bottom left;
        background-size: cover;
        z-index: 1;
        animation1: moveTrain 2s linear forwards; /* Adjust duration as needed */
        border: solid 1px yellow;
    }

    @keyframes moveTrain {
        0% {
            right: calc(-27.3vw);
        }

        100% {
            right: 0; /* Move the train to the rightmost position */
        }
    }

    @keyframes hideTrain {
        0% {
            right: 0;
        }

        100% {
            right: calc(-27.3vw);
        }
    }
}

@media (max-width: 890px) {

    .search-margin {
        margin-top: 320px;
    }

    .search-box {
        width: 100%;
        height: 280px;
    }

    #home-bot {
        top: 60vh;
        height: 60vh;
    }

    #right-mountain {
        width: 100%;
        height: 60vh;
    }

    #left-mountain {
        width: 100%;
        height: 60vh;
    }

    #left-bot {
        width: 100%;
        height: 60vh;
    }

    #airplane {
        position: absolute;
        left: 10px;
        top: 110px;
        width: 10px;
        z-index: 101;
    }

    @keyframes movePlane {
        0% {
            left: 10px;
            top: 110px;
            width: 0px;
        }

        100% {
            left: 300px;
            top: 80px;
            width: 180px;
        }
    }

    @keyframes hidePlane {
        0% {
            left: 300px;
            top: 80px;
            width: 180px;
        }

        100% {
            left: 10px;
            top: 110px;
            width: 0px;
        }
    }

    #train {
        position: absolute;
        top: 0; /* Adjust the vertical position of the train */
        right: calc(-27.3vw); /* Start the train in the middle between the mountains */
        width: calc(27.3vw); /* Adjust the width of the train */
        height: 60vh; /* Adjust the height of the train */
        background: url('images/train.png') no-repeat bottom left;
        background-size: cover;
        z-index: 1;
        animation1: moveTrain 2s linear forwards; /* Adjust duration as needed */
        border: solid 1px red;
    }

    @keyframes moveTrain {
        0% {
            right: calc(-27.3vw);
        }

        100% {
            right: 0; /* Move the train to the rightmost position */
        }
    }

    @keyframes hideTrain {
        0% {
            right: 0;
        }

        100% {
            right: calc(-27.3vw);
        }
    }
}

@media (max-width: 768px) {

    .search-margin {
        margin-top: 220px;
    }

    #home-bot {
        top: 50vh;
        width: 100%;
    }

    #right-mountain {
        width: 100%;
        height: 50vh;
    }

    #left-mountain {
        width: 100%;
        height: 50vh;
    }

    #left-bot {
        width: 100%;
        height: 50vh;
    }

    #airplane {
        position: absolute;
        left: 10px;
        top: 110px;
        width: 10px;
        z-index: 101;
    }

    @keyframes movePlane {
        0% {
            left: 10px;
            top: 110px;
            width: 0px;
        }

        100% {
            left: 220px;
            top: 60px;
            width: 140px;
        }
    }

    @keyframes hidePlane {
        0% {
            left: 220px;
            top: 60px;
            width: 140px;
        }

        100% {
            left: 10px;
            top: 110px;
            width: 0px;
        }
    }

    #train {
        position: absolute;
        top: 0; /* Adjust the vertical position of the train */
        right: calc(-27.3vw); /* Start the train in the middle between the mountains */
        width: calc(27.3vw); /* Adjust the width of the train */
        height: 50vh; /* Adjust the height of the train */
        background: url('images/train.png') no-repeat bottom left;
        background-size: cover;
        z-index: 1;
        animation1: moveTrain 2s linear forwards; /* Adjust duration as needed */
        border: solid 1px red;
    }

    @keyframes moveTrain {
        0% {
            right: calc(-27.3vw);
        }

        100% {
            right: 0; /* Move the train to the rightmost position */
        }
    }

    @keyframes hideTrain {
        0% {
            right: 0;
        }

        100% {
            right: calc(-27.3vw);
        }
    }
}

@media (max-width: 600px) {

    .search-margin {
        margin-top: 100px;
    }

    .search-box {
        height: 500px;
    }

    #home-bot {
        top: 40vh;
        height: 40vh;
    }

    #right-mountain {
        width: 100%;
        height: 40vh;
    }

    #left-mountain {
        width: 100%;
        height: 40vh;
    }

    #left-bot {
        width: 100%;
        height: 40vh;
    }

    #airplane {
        position: absolute;
        left: 10px;
        top: 110px;
        width: 10px;
        z-index: 101;
        border: solid 1px blue;
    }

    @keyframes movePlane {
        0% {
            left: 10px;
            top: 110px;
            width: 0px;
        }

        100% {
            left: 220px;
            top: 60px;
            width: 110px;
        }
    }

    @keyframes hidePlane {
        0% {
            left: 220px;
            top: 60px;
            width: 110px;
        }

        100% {
            left: 10px;
            top: 110px;
            width: 0px;
        }
    }

    #train {
        position: absolute;
        top: 0; /* Adjust the vertical position of the train */
        right: calc(-27.3vw); /* Start the train in the middle between the mountains */
        width: calc(27.3vw); /* Adjust the width of the train */
        height: 40vh; /* Adjust the height of the train */
        background: url('images/train.png') no-repeat bottom left;
        background-size: cover;
        z-index: 1;
        animation1: moveTrain 2s linear forwards; /* Adjust duration as needed */
        border: solid 1px red;
    }

    @keyframes moveTrain {
        0% {
            right: calc(-27.3vw);
        }

        100% {
            right: 0; /* Move the train to the rightmost position */
        }
    }

    @keyframes hideTrain {
        0% {
            right: 0;
        }

        100% {
            right: calc(-27.3vw);
        }
    }
}