html{
  scroll-behavior: smooth;
}
a {
  color: inherit;
  text-decoration: none;
  background-color: transparent;
}
body{
  background-color: #ffffff; 
  
}
/* Navigation bar & home Headline text css */
.custom_nav-container .navbar-nav .nav-item .nav-link {
  padding: 5px 20px;
  color:  #ffffff;
  font-weight: 900;
  text-align: center;
  text-transform:capitalize;
  border-radius: 5px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  font-size: 16px;
  text-shadow: 0 0 2px rgba(5, 19, 1, 0.897);
  font-family: Mochiy Pop P One;
  letter-spacing:1px;
  
}
.custom_nav-container .navbar-nav .nav-item .nav-link:hover{
  transition: transform 0.3s ease-in-out;
  transform: scale(1.2);

}
.custom_nav-container .navbar-toggler span{
  background-color:#ffffff ;

}
.slider_section{
  padding-top: 0px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content:center;
}
.slider_section .detail-box h1 , .slider_section .detail-box p.heading-para{

  font-size: 56px;
  font-family: Bubblegum Sans ,Sans-serif;    
  text-transform: capitalize;
  font-weight: 600;
  letter-spacing: 1px;
  color: #ffffff ;
  text-align: center;
  text-shadow:0 0 4px #133d12db;
  line-height: 110%;
}
.slider_section .detail-box p{
  padding-top: 10px;
  font-size: 20px;
  font-family:poetsen one; 
  text-transform: capitalize;
  font-weight: 400;
  letter-spacing: 0px;
  color: #ffffff ;
  text-align: center;

  text-shadow:0 0 2px rgb(0, 0, 0);
}
/* sections heading fonts*/
h2{
  font-size: 2.5rem;  
}
#about .row h2 , #gallery .row h2 , #services h2 , #reviews h2 , #contact h2{  
  font-family:Bubblegum Sans ,Sans-serif;   
  font-weight:600;
  color:#ffda46;
  text-shadow: 0 0 3px rgb(0, 0, 0);
  text-transform:inherit;
  letter-spacing: 1px; 
 }
 #reviews h2{
  color:#99e1ae;
 }
 #services h2 , #reviews h2 {
   font-weight: 400;
 }
 @media(min-width:0px)and(max-width:367px){
  #about .row h2 , #gallery .row h2 , #services h2 , #reviews h2 , #contact h2{
    font-size: 32px;
  }
}
 @media(min-width:368px){
  #about .row h2 , #gallery .row h2 , #services h2 , #reviews h2 , #contact h2{
    font-size: 44px;
  }
}
@media(min-width:576px){
  #about .row h2 , #gallery .row h2 , #services h2 , #reviews h2 , #contact h2{
    font-size: 48px;
  }
}
@media(min-width:768px){
  #about .row h2 , #gallery .row h2 , #services h2 , #reviews h2 , #contact h2{
    font-size: 56px;
  }
}
@media(min-width:992px){
  #about .row h2 , #gallery .row h2 , #services h2 , #reviews h2 , #contact h2{
    font-size: 66px;
  }
}
@media(min-width:1200px){
  #about .row h2 , #gallery .row h2 , #services h2 , #reviews h2 , #contact h2{
    font-size: 72px;
  }
}
/* ---   About Section Css -----*/

 #about{
   
  border-top-left-radius: 250px;
  border-top-right-radius: 250px;
  border-bottom-left-radius: 250px;
  border-bottom-right-radius: 250px;  
  margin-top:50px;
  margin-bottom: 50px;
  padding: 10px;
  padding-bottom: 120px; 

  color: rgb(58, 57, 50); 
  font-weight: 600;
  
  background-image: url('../images/back_about.png');
  background-size: cover;
  margin-left: 1%;
  margin-right: 1%;
  background-color: #72c7be;
 }
 @media(min-width:576px){
   #about{
    margin-left: 2%;
    margin-right:2%;
   }
 }
 @media(min-width:768px){
  #about{
    margin-left: 3%;
    margin-right:3%;    
   }  
 }
 @media(min-width:992px){
  #about{
    margin-left: 4%;
    margin-right:4%;
    padding-left: 25px;
    padding-right: 25px;
   }
 }
 @media(min-width:1200px){
  #about{
    margin-left: 5%;
    margin-right:5%;
    padding-left: 30px;
    padding-right: 30px;
   }
 }
 @media(min-width:1400px){
  #about{
    margin-left: 10%;
    margin-right:10%;
    padding-left: 30px;
    padding-right: 30px;
   }
 }
 #about .row h2{
  margin-top: 50px;
 }
 #about .box{
 
   padding:5px;
   border-radius: 15px;
   background-color: #fffdbd;
   box-shadow: 1px 2px 4px #d19b11a1;

 }
 /*------- Services Section css -----*/

 #services h3{
 font-size: 1.35rem;
 font-weight: 800;
 text-transform:capitalize;
}
#services{
  background-image: linear-gradient(to bottom, #ffffff, #fff6ad, #ffffff);
}
 #services .box{
  padding: 5px;
  border-radius: 15px;
  background-color: #ffffff;
  box-shadow: 1px 1px 5px #b1ffc6;
 }
 #services .box .img-box{
    width: 90px;
    height: 90px;
    margin-bottom: 15px;
    background-color: #ffffff00;
    border-radius: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
 }
  #services .box .img-box img{
    max-width: 75px;
    max-height: 75px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
 #services .row{
  justify-content: center;
  
 }
 /* ---- Gallery Css ------ */

 #gallery{    
    
  background: linear-gradient(to bottom,rgba(255,255,255,.8),#e8ffcef1,rgba(255,255,255,.75)),url('../images/back_gallery.jpg');
  background-size: cover;
  background-position: center center;
  background-clip: border-box;
  padding-bottom: 70px;
  padding-top:70px;   
}
#gallery .gallery-img-box{
  background-color: #ffffff;
  padding:8px;
  margin: 10px;
  border-radius: 10px;
  box-shadow: 0 0 2px 0px #2f3130e5;
  
}
#gallery .gallery-img-box img{
  border-radius: 8px;
  width: 100%;    
}
#gallery [class^="col"]{
  padding:0;
  
}
#gallery .gallery-row{
  justify-content: center;
  align-items: center;
}
#gallery .gallery-img-box:hover{  
  cursor: pointer;
  box-shadow: 0 0 10px 0px #29bd5a;
  background-image: linear-gradient(45deg,#fffd93,#79ffba);

  transform:scale(1.005);
}
/* ---   Overlay Div for gallery ---  */

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height:100%;
  background-color: rgba(0, 0, 0, 0.96);
  display: block; 
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease-in;
  overflow: hidden;
  z-index:50001;
}
.overlay.show {
  visibility: visible;
  opacity: 1; 
}
.overlay-image-box{
  width:100%;
  height:92%;
  border-radius: 6px;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.overlay-image {
  max-width:100%;
  max-height:100%; 
}
.overlay-nav-bar{
 
  height:8%;
  width: 100%;
  background-color: rgba(0, 0, 0, 1);
  font-size: 100%;
  color: white;
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.close-btn, .prev, .next {   
  color: white;    
  cursor: pointer;
}
.close-btn {  
  position: absolute;
  top: 4%;
  right:6% ;
  text-shadow: 0 0 5px#000000;
  font-size:calc( 7*( ( 1vh + 1vw )/2 ) );
  z-index:100;
}
.prev , .next{
  font-size: calc( 5.2*( ( 1vh + 1vw )/2 ) );
}

.close-btn:hover ,.next:hover ,.prev:hover {
  
  transition: transform 0.2s ease-in-out;
  transform: scale(1.1);
}

/*-------  Reviews Section Css  ----------*/

#reviews {

  padding:50px 0;
  background-color: #ffffff;
  background-size: cover;  
  background-position: top left;
  
} 
@media(max-width:576px){
  #reviews{
    background-image: url('../images/back_reviews2.png');    
  }
}
@media(min-width:576px){
  #reviews{
    background-image: url('../images/back_reviews.png');   
  }
}
@media(min-width:1600px){
  #reviews{
    background-image: url('../images/back_reviews3.png');    
  }
}
#reviews .box{
  
  box-shadow: 0 0 4px #22ca60;
  padding: 4px;
 

}
#reviews .box img{
  border-radius: 5px;
}
@media (pointer:fine) {
  #reviews .box:hover{
    transition:all 0.5s ease-in-out;
    transform: scale(1.03);
  }
  
}
#reviews .heading_container h5{
 color: #2a2626;
}
#googleReview{
  display:flex;
  align-items: center;
  justify-content: center;
  margin-top:50px;
}
#googleReview button{
  width: 160px;
  border-radius: 20px;
  background-color: #ffffff;
  border:solid 1px #b9d3be;
}
#googleReview button:hover{
  box-shadow: 0 0 5px 0 #6ecf77;  
}
#googleReview button img {
  max-width: 80%;
}

/*-------Contact section ------*/

#contact{
  padding:50px 0;
}
#contact .container .row [class ^="col"] .map_container{
 border:solid 2px #bfbfbf;
 border-radius: 4px;
}
#contact .container .row h3{
  color :rgb(39, 44, 42);
  font-weight: 100;
  font-family: Mochiy pop p one;
  font-size: 24px;
}
#contact a:hover{
  text-decoration:solid underline;  
}

/* ----   Footer Section --- */
.footer_section h4{
  font-family: Mochiy Pop P One;
  font-weight: normal;
}
.footer_section{
  background-color: inherit;
  background-image: url('../images/back_footer.png');
  background-size:cover;
  background-repeat: no-repeat;
  padding-top: 100px;
}
.footer_section , 
.footer_section .footer-info p,
.footer_section .footer_links a ,
.footer_section .footer_social a ,
.footer_section .footer_contact .contact_link_box a
{
  color:#5f4e4e;
}
.footer_section a:hover,
.footer_section .footer-info p a:hover,
.footer_section .footer_links a:hover,
.footer_section .footer_social a:hover,
.footer_section .footer_contact .contact_link_box a:hover{

  color:#287150;
  font-weight: 900;
  transform:scale(1.02);
  text-decoration:underline;
}

/* --------- Call Button & Call Popup  CSS--------------*/

.call_button .fa.fa-phone{

  color: #ed002d;
  font-size: 60px;
}

.call_button{

  
  position: fixed;
  right:5px;
  bottom:20px;
  width:80px;
  height:80px;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;

  outline-style: solid; 
  outline-width: 10px;
  background-color:  rgba(237, 25, 92, .2);;
  border-radius:50%;
  animation: call_button_rings;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction:normal;
  animation-timing-function:cubic-bezier(0, 0.77, 0, 1.46);
  animation-direction: normal;


  z-index: 10000 !important;
  /* important properties for animation do not touch */
  transform-origin: bottom right 0px;  
  transition: all 0.5s ease-in;
  transform: scale(0);
  visibility: hidden; 
}

.call_menu_popup{
  position: fixed;
  right:0px;
  bottom:0px;
  width:250px;
  height: 250px;
  background-color: rgb(44, 141, 139,0.97);
  box-shadow: 0 0 5px 0px rgba(255, 0, 125, 0.65);
  
  border-top-right-radius: 70%;
  border-top-left-radius:70% ;
  border-bottom-left-radius:70%;
  
  
  padding-top:20px ;
  padding-bottom:20px;
  padding-left:20px ;  
  padding-right: 20px;

  display:flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;

  font-size: 18px;
  color: white;
  
  z-index:10001;

  transform-origin: bottom right 0px;  
  transition: all 0.7s ease-in;
  transform: scale(0);
  visibility: hidden;
  
}

.call_button.active{
 visibility: visible;
 transform: scale(1);
}

.call_menu_popup.active{

  visibility: visible;
 transform: scale(1);
}

.call_button.active:hover{
  cursor: pointer;
  transform: scale(1.05);
}
.menu_cancel_button:hover{
  cursor: pointer;
  transform: scale(1.05);
  background-color: rgba(227, 199, 199, 0.389);
}

@keyframes call_button_rings {
  from{    
     
     outline-color: rgba(8, 46, 98 ,0.6);     
     background-color:rgba(8, 46, 98, 0.6); 
     outline-width: 0px;
  }
  to{    
    
    outline-color:rgba(8, 46, 98,0.1); 
    background-color:rgba(8, 46, 98,0.1);  
    outline-width:50px;
  }
}
/* -- End -- Call Button & Call Popup  CSS */


/*
Mochiy Pop P One  - For home navigation menu 
Poetsen One  -      for home sub heading para
bubblegum sans  -   for home main heading h1
*/