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

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

.tab-button {
    min-width: 60px;
    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: 75px;
}

.custom-icon-button {
    color: #666; /* Replace with your desired default color */
    /*background-color: rgba(0,0,0,.1);*/
    /*background: linear-gradient(-90deg, rgba(242,242,242,.3), white, lightgray, white, rgba(242,242,242,.3));
    background-size: 400% 200%;*/
    background: rgb(247, 250, 252, 0.80);
    overflow-x: hidden;
    border: none;
    
}

    .custom-icon-button:hover {
        color: black; /* Replace with your desired hover color */
        /*background-color: #F9A519;*/
        background: linear-gradient(-90deg, rgba(161,161,161,.8), white, rgba(34,135,215,.8), white, rgba(161,161,161,.8));
        background-size: 200% 100%;
        transition: all 0.3s;
    }

    .custom-icon-button.active {
        color: #206093;
        /*background: linear-gradient(-90deg, rgba(34,135,215,.3), white, lightgray, white, #2287d7);
        background-size: 400% 200%;*/
        background: linear-gradient(-90deg, rgba(161,161,161,.8), white, rgba(34,135,215,.8), white, rgba(161,161,161,.8));
        background-size: 200% 100%;
        overflow-x: hidden;
        border0: solid .2px rgba(242, 242, 242, .7);
    }

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

.custom-icon-button.active:hover {
    color: orangered;
    background-color: #1b79a5;
    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: 45px;
    right: 0;
    width: 100%;
    height: 43%;
    background: url('../images/banner/tour.jpg') no-repeat bottom left;
    background-size: cover;
    z-index: 2;
    opacity: 0;
}

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

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

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

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

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

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

#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;
}

@keyframes showTour {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes hideTour {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes showPackage {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes hidePackage {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes showTrain {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes hideTrain {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes showPlane {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes hidePlane {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes showBus {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes hideBus {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes showHotel {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes hideHotel {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes showInsurance {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes hideInsurance {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes showDubai {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes hideDubai {
    from {
        opacity: 1;
    }

    to {
        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: 1400px)
{
    .search-box {
        width: 100%;
        height: 220px;
        border:solid 0px gray;
        margin-bottom:70px;
    }
}

@media (max-width: 1300px) {
    .search-margin {
        margin-top: 90px;
    }

    .search-box {
        width: 100%;
        height: 220px;
        border: solid 0px green;
        margin-bottom: 100px;
    }
}

@media (max-width: 1200px) {
    .search-margin {
        margin-top: 90px;
    }

    .search-box {
        width: 100%;
        height: 220px;
        border: solid 0px blue;
        margin-bottom: 80px;
    }
}

@media (max-width: 1150px) {
    .search-margin {
        margin-top: 60px;
    }

    .search-box {
        width: 100%;
        height: 220px;
        border: solid 0px yellow;
        margin-bottom: 70px;
    }
}

@media (max-width: 1050px) {
    .search-margin {
        margin-top: 40px;
    }

    .search-box {
        width: 100%;
        height: 220px;
        border: solid 0px orange;
        margin-bottom: 50px;
    }
}

@media (max-width: 960px) {

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

    .home-icon {
        width:15%;
    }

    .search-box {
        width: 100%;
        height: 280px;
        border: solid 0px red;
        margin-bottom: 30px;
    }

    #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: 120px;
    }

    .tab-button{
        min-width:16%;
        margin-bottom:10px;
    }

    .home-icon {
        width: 80px;        
    }

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

    #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: 90px;
    }

    #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: 10px;
    }

    .tab-button {
        min-width: 25%;
        margin-bottom: 10px;
    }

    .home-icon {
        width: 75px;
    }

    .search-box {
        height: 580px;
    }

    #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);
        }
    }
}