@import url('https://fonts.googleapis.com/css2?family=Abel&family=Varela+Round&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Abel&family=Sniglet&family=Varela+Round&display=swap');  
@import url('https://fonts.googleapis.com/css2?family=Abel&family=Cinzel&family=Sniglet&family=Varela+Round&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Laila:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Laila:wght@500&family=Merienda+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Laila:wght@500&family=Merienda+One&family=Miriam+Libre&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Laila:wght@500&family=Merienda+One&family=Miriam+Libre:wght@700&family=Tenali+Ramakrishna&family=Volkhov&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mukta+Malar:wght@200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');
a{
    text-decoration: none;
}

 
h1
{
  position: relative;
  font-family: 'Laila', serif !important;
    text-transform: uppercase;
    font-size: 2.5em;
    font-weight: 900;
    letter-spacing: 4px;
    overflow: hidden;
    background: linear-gradient(90deg, rgb(247, 49, 49), #ffe70f, rgb(189, 42, 42));
    background-repeat: no-repeat;
    background-size: 80%;
    animation: animate 5s linear infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(255, 255, 255, 0);
    text-align: center;
    margin-top: 0%;
  }
  @keyframes animate {
    0% {
      background-position: -500%;
    }
    100% {
      background-position: 500%;
    }
  }
.ladies h4{
    
    font-weight: lighter;    
    text-align:left ;
    text-decoration: none;
    font-family: 'Varela Round', sans-serif !important; 
    text-shadow: 2px 2px 4px #000000;
    font-size:45px;
    text-decoration: none;
  
   /* Chrome, Safari, Opera */
   -webkit-animation: more 5s infinite; 
  
   /* Internet Explorer */
   -ms-animation: more 5s infinite;
   
   /* Standar Syntax */
   animation: more 5s infinite;
     margin-top: 20px;
     margin-bottom: 20px;
    margin-top: 50px;
    margin-bottom: 30px;
    margin-left:150px ;
}
.basic h4{
    
    font-weight: lighter;    
    text-align:right ;
    text-decoration: none;
    font-family: 'Varela Round', sans-serif !important; 
    text-shadow: 2px 2px 4px #000000;
    font-size:45px;
   /* Chrome, Safari, Opera */
   -webkit-animation: more 5s infinite; 
  
   /* Internet Explorer */
   -ms-animation: more 5s infinite;
   
   /* Standar Syntax */
   animation: more 5s infinite;
     margin-top: 20px;
     margin-bottom: 20px;
    margin-top: 50px;
    margin-bottom: 30px;
    margin-right: 150px;
    cursor: pointer;
}
.lap h4{
    
    font-weight: lighter;    
    text-align:center ;
    text-decoration: none;
    font-family: 'Varela Round', sans-serif !important; 
    text-shadow: 2px 2px 4px #000000;
    font-size:45px;
  
    /* Chrome, Safari, Opera */
  -webkit-animation: more 5s infinite; 
  
  /* Internet Explorer */
  -ms-animation: more 5s infinite;
  
  /* Standar Syntax */
  animation: more 5s infinite;
    margin-top: 20px;
    margin-bottom: 20px;
    
}
.hour h4{
    
    font-weight: lighter;    
    text-align:center ;
    text-decoration: none;
    font-family: 'Varela Round', sans-serif !important; 
    text-shadow: 2px 2px 4px #000000;
    font-size:45px;
  
   /* Chrome, Safari, Opera */
   -webkit-animation: more 5s infinite; 
  
   /* Internet Explorer */
   -ms-animation: more 5s infinite;
   
   /* Standar Syntax */
   animation: more 5s infinite;
     margin-top: 20px;
     margin-bottom: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.call p{
    
  
  font-weight: lighter;    
  text-align:center ;
  text-decoration: none;
  font-family: 'Laila', serif !important;
  text-shadow: 2px 2px 4px #000000;
  font-size:45px;

 /* Chrome, Safari, Opera */
 -webkit-animation: more 5s infinite; 
  
 /* Internet Explorer */
 -ms-animation: more 5s infinite;
 
 /* Standar Syntax */
 animation: more 5s infinite;
  margin-top: 20px;
  
}
.call1 p{
    
  
  font-weight: lighter;    
  text-align:center ;
  text-decoration: none;
  font-family: 'Laila', serif !important;
  text-shadow: 2px 2px 4px #000000;
  font-size:45px;

 /* Chrome, Safari, Opera */
 -webkit-animation: more 5s infinite; 
  
 /* Internet Explorer */
 -ms-animation: more 5s infinite;
 
 /* Standar Syntax */
 animation: more 5s infinite;
   

  
}
.call p:hover{
    
  font-weight: lighter;    
  text-align:center ;
  text-decoration: none;
  font-family: 'Laila', serif !important;
  text-shadow: 2px 2px 4px #000000;
  font-size:45px;
  color: whitesmoke;
  animation: none;
}
.call1 p:hover{
    
  font-weight: lighter;    
  text-align:center ;
  text-decoration: none;
  font-family: 'Laila', serif !important;
  text-shadow: 2px 2px 4px #000000;
  font-size:45px;
  color: whitesmoke;
  animation: none;
}
.location p{
    
    font-weight: lighter;    
    text-align:center ;
    text-decoration: none;
    font-family: 'Varela Round', sans-serif !important; 
    text-shadow: 2px 2px 4px #000000;
    font-size:45px;
  
  /* Chrome, Safari, Opera */
  -webkit-animation: more 5s infinite; 
  
  /* Internet Explorer */
  -ms-animation: more 5s infinite;
  
  /* Standar Syntax */
  animation: more 5s infinite;
    margin-top: 20px;
    margin-bottom: 20px;
}
.more h4{
    
    font-weight: lighter;    
    text-align:center ;
    text-decoration: none;
    font-family: 'Varela Round', sans-serif !important; 
    text-shadow: 2px 2px 4px #000000;
    font-size:45px;
  
   /* Chrome, Safari, Opera */
  -webkit-animation: more 5s infinite; 
  
  /* Internet Explorer */
  -ms-animation: more 5s infinite;
  
  /* Standar Syntax */
  animation: more 5s infinite;
    margin-top: 20px;
    margin-bottom: 20px;
}
@-webkit-keyframes rainbow{
    0%{color: orange;}	
    10%{color: purple;}	
      20%{color: red;}
    30%{color: CadetBlue;}
      40%{color: yellow;}
    50%{color: coral;}
      60%{color: green;}
    70%{color: cyan;}
    80%{color: DeepPink;}
    90%{color: DodgerBlue;}
      100%{color: orange;}
  }
  
  @-ms-keyframes rainbow{
    0%{color: orange;}	
   10%{color: purple;}	
     20%{color: red;}
   30%{color: CadetBlue;}
     40%{color: yellow;}
   50%{color: coral;}
     60%{color: green;}
   70%{color: cyan;}
   80%{color: DeepPink;}
   90%{color: DodgerBlue;}
     100%{color: orange;}
 }
 
 /* Standar Syntax */
 @keyframes rainbow{
     0%{color: orange;}	
   10%{color: purple;}	
     20%{color: red;}
   30%{color: CadetBlue;}
     40%{color: yellow;}
   50%{color: coral;}
     60%{color: green;}
   70%{color: cyan;}
   80%{color: DeepPink;}
   90%{color: DodgerBlue;}
     100%{color: orange;}
 }
 @-webkit-keyframes more{
  0%{color: yellow;}	
  50%{color: rgb(103, 255, 89);}
  70%{color: red;}
    100%{color: cyan;}
}

@-ms-keyframes more{
  0%{color: yellow;;}	
  50%{color: rgb(103, 255, 89);}
  70%{color: red;}
  100%{color: cyan;}
}

/* Standar Syntax */
@keyframes more{
  0%{color: yellow;}	
  50%{color: rgb(103, 255, 89);}
  70%{color: red;}
    100%{color: cyan;}
}
 @keyframes blink{
  0%{opacity: 0;}
  50%{opacity: .5;}
  100%{opacity: 1;}
 }

#pool-types{
    
  padding-bottom: 40px;
  padding-top: 10px;
  color: cornsilk;
}

.about-title{
  font-size: 30px;background-image: linear-gradient(to right, #868f96 0%, #596164 100%);
  font-weight: 300;
  margin-top: 5px;
}

.slider2
{
  max-width: 500px;
  margin:10px auto;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 7px  rgba(0,0,0, 0.3);
  background: #FFF;
  border-top: 10px solid #fff;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #fff;
  transform: translate(0, 1px);
}

.slider2 .left-slide,.slider2 .right-slide
{
  position: absolute;
  height: 40px;
  width: 40px;
  background-color: #444444;
  border-radius: 50px;
  color: #ffffff;
  font-size: 20px;
  top: 50%;
  cursor: pointer;
  margin-top: -20px;
  text-align: center;
  line-height: 40px;
  transition: all .5s ease;
}

.slider2 .left-slide:hover,.slider2 .right-slide:hover
{
  box-shadow:0px 0px 10px black ;
  background-color: #02efef;
}


.slider2 .left-slide
{
  left: 10px;
}


.slider2 .right-slide
{
  right: 10px;
}

.slider2 .slider2-items .item2 img
{
  max-width:100%;
  display:block ;
  animation:zoom 1s ease;
}

@keyframes zoom
{
  0%{transform: scale(2);opacity:0}
  50%{transform: scale(2);}
  100%{transform: scale(1);opacity:1}
}

.slider2 .slider2-items .item2
{
  display: none;
  position: relative;
}

.slider2 .slider2-items .item2 .caption
{
  position: relative;
  width: 100%;
  height: 15%;
  bottom: 0px;
  left: 0px;
  background-color: rgba(0,0,0,.2);
  text-align: center;
  color:black ;
  font-size: 20px;  
}

.slider2 .slider2-items .item2.active
{
  display: block;
}

/*------------footer section------------*/

.links p,h5
{
  font-size: 12px;
    font-weight: lighter;    
    text-align:center ;
    text-decoration: none;
    font-family: 'Varela Round', sans-serif !important; 
    text-shadow: 2px 2px 4px #000000; 
    margin-bottom: 20px;
    color: rgb(255, 0, 234);
}

h5
{
  color: #FFF;
}
.hero-text  {
  text-align: left;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: black;
  font-family: 'Fredoka One', cursive;
  font-weight: 900;
  letter-spacing: 0.5px;  
}

.hero-text1 button {
  text-align: center;
  border: none;
  position: absolute;
  top: 100%;
  left: 50%;
  outline: 0;
  display: inline-block;
  color: black;
  padding: 2px 30px 2px 30px;
  background-color: rgb(14, 219, 247);
  font-family: 'Patua One', cursive;
  cursor: pointer;
  border-radius: 50px;
  font-size: 20px;
  box-shadow:-5px -5px 5px  rgba(0, 0, 0, 0.164);
}

.hero-text1 button:hover {
  background-color: rgb(14, 191, 245);
  color: white;
}
@media only screen and (max-width: 850px)
{
  .hero-text h2 {
   
    color: black;
    font-family: 'Fredoka One', cursive;
    font-size: 15px;
    font-weight: bolder;
    position: relative;
    top: 50%;
    right:30%;
  }
  
  .hero-text1 button {
    border: none;
    outline: 0;
    display: inline-block;
    padding: 2px 20px 2px 20px;
    color: black;
    background-color: rgb(14, 219, 247);
    text-align: center;
    cursor: pointer;
    font-weight: bolder;
  border-radius: 50px;
  font-size: 15px;
  }
  
  .hero-text1 button:hover {
    background-color: rgb(14, 191, 245);
    color: white;
  }
}