@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap');

body{
    font-family: 'Kalam', cursive !important;
    padding: 0;
    margin: 0;
}

#loading
{
  background: black url(./Images/loadingGif.gif) no-repeat center;
  height:100vh;
  width:100%;
  background-size: 30%;
  position: fixed;
  z-index:10;
}

.hero{
    background-image: url(./Images/inback.jpg);
    background-position: center;
    background-repeat: no-repeat;
    /* background-attachment: fixed; */
    background-size: cover;
    height: 98vh;
}

.hero2{
    background-image: url(./Images/about.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 98vh;
}

.hero3{
    background-image: url(./Images/places.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 98vh;
}

.hero4{
    background-image: url(./Images/hotellss.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 95vh;
}

.hero5{
    background-image: url(./Images/contact.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 95vh;
}

.page{
    background-color: rgb(79, 75, 75);
}

.page2{
    background-color: white;
}

#immg:hover{
    box-shadow: 2px 2px 5px 5px grey;
    transform: scale(1.05) !important;
    transition: 0.3s ease-in !important;
}

.bn:hover{
    text-shadow: 2px 2px 5px grey;
    font-weight: bold;
    transform: scale(1.02);
    transition: 0.2s ease-in-out !important;
}

.btn:hover{
    font-weight: bolder !important;
    transform: scale(1.05) !important;
    transition: 0.5s ease-in-out !important;
}

@media(max-width:425px){
    #fh{
        font-size: 50px !important;
    }

    #fh2{
        font-size: 50px !important;
        margin-top: 170px !important;
        margin-left: 10px !important;
    }

    #hh{
        margin-top:0px !important;
        padding-top: 0px !important;
    }

    .hero2{
        height: 70vh !important;
    }

    .hero3{
        height: 90vh !important;
    }

    .hero4{
        height: 70vh !important;
    }

    .hero5{
        height: 80vh !important;
    }

    #cen{
        text-align: center !important;
    }

    #myBtn{
        display: none !important;
    }
}