body{
    margin: 0;
    padding: 0%;
    font-family: "cursive";
   overflow: auto;
}
.home{
   background-image: url("/images/tourism11.jpeg");
   background-repeat: no-repeat;
   background-size: cover;
}

#bgVideo{
    position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
    
}


.content {
    position: fixed;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    color: #f1f1f1;
    width: 100%;
    height: 100vh;
    text-align: center;
    vertical-align: middle;
    float: left;
    
  }
  #navbar{
    background-color: #333!important; 
    position: fixed;
    top: -140px; 
    width: 100%; 
    transition: top 1s;
    z-index: 10;
  }
  .dropdown:hover .dropdown-content {display: block;}
  #logo{
    width: 70px;
  }
  @media (min-width:768px){
    #logo{
      width:100px;
    }
  }
  @media (min-width: 992px){
  #logo{
    width: 150px;
  }
}
.nav-container .navbar a:hover{
  font-size: 180%!important;

}
  .homeHead{
    font-family: 'Stalemate', cursive;
    font-size: 3vh;
    padding-top: 30vh;
    text-justify: auto;
    
  }
  @media (min-width:768px){
  .homeHead{
    font-family: 'Stalemate', cursive;
    font-size: 6vh;
    padding-top: 30vh;
    
  }
}
  @media (min-width: 992px){
  .homeHead{
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 5vh;
    padding-top: 30vh;
    word-spacing: 15px;
  }
}


.homeHead2{
  font-family: 'Stalemate', cursive;
  font-size: 6vh;
  
}
@media (min-width:768px){
.homeHead2{
  font-family: 'Stalemate', cursive;
  font-size: 8vh;
  
}
}
@media (min-width: 992px){
.homeHead2{
  font-family: 'Stalemate', cursive;
  font-size: 12vh;
  
}
}
  .scrollable-menu {
    height: auto;
    max-height: 200px;
    max-width:5px;
    overflow-x:hidden;
}
.dropdown-item{
  background-color: rgba(0, 0, 0, 0)!important;
  color: rgb(236, 227, 227)!important;
}
.dropdown-menu{
  background-color: rgba(0, 0, 0, 0.6)!important;
}
a.dropdown-item:hover{
  font-size: 120%;
}
.login{
  
  font-size:15px !important;
  color:rgb(236, 227, 227)  !important;
  background-color: transparent !important;
  border: 2px solid rgb(236, 227, 227) !important;
  font-family: "cursive" !important;
}
.login:hover{
  font-size: 120%!important;
}




}
@keyframes spin {
  0% { content:"Arts"; }
  10% { content:"Festivals"; }
  20% { content:"Waterfalls"; }
  30% { content:"Hills"; }
  40% { content:"Rivers"; }
  50% { content: "Greenery"; }
  60% { content: "Ayurveda"; }
  70% { content: "Backwaters"; }
  80% { content: "Heritage"; }
  90% { content: "Beauty"; }
}
/* ----------------about page------------------------------------------------------------ */
.informations{
background-image:url("https://img.onmanorama.com/content/dam/mm/en/travel/hourglass/images/2019/11/19/kerala-map.jpg");
height: 80%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.aboutKerala{
  color: rgb(8, 8, 8);
  padding-top: 1rem;
  padding-bottom: 1rem;
  background-color: rgba(1000,1000,1000,0.3);
  font-family: cursive;
  
}
.visitDetails{

  background: rgb(10,92,111);
background: linear-gradient(90deg, rgba(10,92,111,1) 0%, rgba(4,73,131,1) 25%, rgba(4,7,9,1) 50%, rgba(32,105,157,1) 75%, rgba(4,52,69,1) 100%, rgba(0,212,255,1) 100%);
  
  text-align: center;
  height: 8vh;
  color:white;
  font-size: smaller;
}

section .container .row p{
  margin-top: 1.1rem;
}

.containerImage {
  position: relative;
  width: 100%;
}

.containerImage .image {
  display: block!important;
  width: 100%!important;
  height: 8rem!important;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color:rgba(0, 0, 0, 0.6);
  overflow: hidden;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: .3s ease;
  transition: .3s ease;
}

.containerImage:hover .overlay {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}


.dist{
  background-image:url("https://img.onmanorama.com/content/dam/mm/en/travel/hourglass/images/2019/11/19/kerala-map.jpg");
height: 80%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
/* -----------------footer----------------------- */
.footer{
  position: sticky;
}
.footer .container{
  background-color: rgba(0, 0, 0, 0.11);
  color:rgb(8, 0, 0);
}
.footer a{
  text-decoration: none;
  color:rgb(0, 0, 0);
}
.footer a:hover{
  color:white

}
.copyright{
  background-color: rgba(0,0,0,0.8);
  color:rgb(235, 231, 231);
  width: 100%!important;
  height: 5rem;
  text-align: center;
  vertical-align: middle;
  padding-top: 2rem;
}
/* ------------------------Districts------------------- */
.background{
  background: rgba(203, 219, 211, 0.993);
background: linear-gradient(90deg, rgb(86, 104, 101) 0%, rgb(97, 158, 123) 30%, rgb(164, 224, 224) 50%, rgb(112, 145, 134) 69%, rgb(150, 199, 209) 100%);
  
}
div.card{
  background-color: rgba(0,100,100,0.6)!important;
}


    /* ----------dist----- */
    .reg:hover{
      font-size: 110%!important;
      }
/* -------carousel------------ */

html {
  scroll-behavior: smooth;
}

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

* {
  box-sizing: border-box;
}


.carousel{
    display: flex;
    width: 90vw;
    
}
.panel{
    position: relative;
    background-size:cover;
    background-position:center;
    background-repeat: no-repeat;
    height: 90vh;
    margin: .7em;
    border-radius: 50px;
    flex: 0.5;
    cursor: pointer;   
    transition: flex .7s ease-in;
}

.panel.active{
    flex: 5;
}
.panel h3{
    font-size: 20px;
    color: #fff;
    position: absolute;
    bottom: 10px;
    left: 20px;
    opacity: 0;
    transition: opacity .8s ease-in;
}
.panel.active h3{
    opacity: 1;
}

@media (max-width: 650px) {
    .carousel {
      width: 100vw;
    }
  
    .panel:nth-of-type(4),
    .panel:nth-of-type(5) {
      display: none;
    }
  }
  }
  .hom{background-image: url("/images/tourism5.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  }