@import url('https://fonts.googleapis.com/css2?family=Cabin:wght@400&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@700&display=swap'); */

@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@700&family=Ramabhadra&display=swap');


section {
  
  padding: 6rem 0;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  
}
:root {
  --main: #1b4df3;
  --secondary: #FF4500;
  --third: #FF8300;
  --fourth: #B7AC44;
  --five: #444;
  --white: #fff;
  --gray: #222;
  --black: #000;
}

.float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    z-index: 999;
    text-align: center;
    box-shadow: 2px 2px 3px #999;
}
.my-float {
    margin-top: 8px;
}

.float a {
    text-decoration: none;
    color: #fff;
}
.nav-scroller {
  display: block;
}


.bg-nav {
  background-color: var(--main);
  color: var(--white) !important;
  height: 50px;
}
.navbar {
  padding: 0 6rem;
}

.header p {
  color: #fff;
  font-size: 0.8rem;
  margin-bottom: 0.3rem;
  margin-top: 0.3rem;
  padding: 0 7.5rem;  
}
.bg-dark {
  background-color: #000 !important;
}
.text-menu {
  text-decoration: none;
  color: var(--white) !important;
  font-size: 1rem;
  font-weight: 500;
  padding: 0.6rem;
}

.text-menu:hover {
  font-weight: 600;
}

.navbar-toggler span {
  color: var(--white);
}

.navbar-light .navbar-toggler {
  color: rgba(255, 255, 255, 0.5);
  border-color: rgb(255 255 255 / 10%);
}

.slider-sec {
  margin-top: 70px;
}
.carousel-caption {
  background-color: rgba(0, 0, 0, 0.4);
}
span.carousel-control-next-icon {
  border: 2px solid #fff;
  padding: 0.7rem;
  background-color: #222;
}
span.carousel-control-prev-icon {
  border: 2px solid #fff;
  padding: 0.7rem;
  background-color: #222;
}


h1, h2, h3, h4, h5 {
 /* font-family: 'El Messiri', sans-serif; */
  font-family: 'Ramabhadra', sans-serif; 
  }


h1 {
  font-size: 4rem; 
  font-weight: 800;
  color: var(--white) !important;
}

h1 SPAN {
  color: var(--main) !important;
}

h2 {
  font-size: 2.8rem;
  font-weight: 500;
  margin-bottom: 2rem;
  color: var(--secondary);
  }
h2 span {
  color: var(--white);
}
h3 {
  font-size: 1.8rem;
  font-weight: 700;  
  color: var(--secondary); 
}
h3 span {
  color: var(--main);
}

h4 {
  font-size: 1.3rem;
  color: var(--main);
}

h5 {
  font-size: 1.5rem;
   color: var(--secondary);
}

h5 span {
  color: var(--main);
}

p {
 font-size: 1.4rem;
  font-weight: 400;
  color: var(--gray);
  font-family: 'Cabin', sans-serif;
}
p span  {
  color: #07689f;
  font-weight: 600;
}




.hero-sec {
  background: rgb(50,0,0);
background: linear-gradient(90deg, rgba(50,0,0,1) 42%, rgba(84,0,27,1) 67%, rgba(129,13,78,1) 85%, rgba(173,20,123,1) 100%);
  height: 350px;
}


.hero-sec h1 {
  margin-top: 28%;
  color: var(--white);
  margin-bottom: 2rem;
  text-align: left;
  text-shadow: 7px -3px 17px rgba(0,0,0,1);
}
 
.hero-sec .btn-outl {
  border: 1px solid var(--white) !important;
  border-radius: 0 !important;
  text-align: left;
  color: var(--white);
  padding: 0.8rem 1rem;
}

.hero-sec .btn-outbg {
  border: 1px solid var(--white) !important;
  border-radius: 0 !important;
  text-align: left;
  background-color: var(--white);
  margin-left: 1rem;
  padding: 0.8rem 2.2rem;
 
}

.hero-sec a {
  font-size: 1rem;
}

.welcome h2 {
  font-size: 4rem;
  color: #000;
}

.welcome p {
  font-size: 1.05rem;
  text-align: justify;
}



.resi-pro {
  background-color: #fff;
  
}

.comm-pro {
  background-color: #f6f6f6;
  
}

.pro-head {
  display: flex;
  justify-content: space-between;
}

.resi-pro h3, .comm-pro h3 {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--gray);
}


.resi-pro h5, .comm-pro h5 {
  font-size: 1.6rem;
  font-weight: 4    00;
  color: #888;
}

 .card p {
  font-size: 1rem;

}

.card {
  border: 1px solid var(--third);
}

.list-group-item { 
  border: 1px solid rgb(255, 131, 0, 0.5);

}
.card-header{
  font-size: 1.2rem;
  color: #fff;
  font-weight: bold;
}

.card-header h4{
  font-size: 1rem;
  color: #222;
}

.card.tour-1 {
  background-color: rgba(255, 255, 120, 0.9);
}

.card.tour-2 {
  background-color: rgba(112, 194, 241, 0.5);
}

.card.tour-3 {
  background-color: rgba(207, 248, 56, 0.685);
}

.card.tour-4 {
  background-color: rgba(120, 255, 192, 0.9);
}

.card.tour-5 {
  background-color: rgba(167, 120, 255, 0.9);
}

.card.tour-6 {
  background-color: rgba(255, 120, 248, 0.9);
}



.resi-pro .card h4 {
  font-size: 1.1rem;
  text-align: center;
  font-weight: 400;
  margin: 0.3rem 0;  
}

.comm-pro .card h4 span {
  font-size: 1.1rem;
  color: var(--fourth);
}

.comm-pro .card-header h4 {
  font-size: 1.1rem;
  text-align: center;
  margin: 1.5rem 0 0.6rem;  
}
.comm-pro .card-header p {
  font-size: 0.9rem; 
  margin-bottom: 0;   
  }

  .comm-pro .card-body p {
    margin-bottom: 0.3rem;
  }
.comm-pro .card  .btn {
  text-align: center;
  margin-bottom: 1.5rem;
}
a.btn.btn-book {
  background-color: #000 !important;
  color: #fff;
}


.comm-pro .card-footer h5 {
  font-size: 1rem;
  text-align: center;
  color: #444;
}
.comm-pro .card-footer ul li {
  font-size: 0.9rem;
}

.resi-pro .card h6, .comm-pro .card h6 {
  font-size: 1rem;
  color: #888;
}

.benefit {
background-color: #f6f6f6 ;
}

.benefit h2 {
  color: var(--secondary);
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
}

.benefit-card {
  background-color: rgba(85, 255, 184, 0.6);
  border: 1px solid var(--secondary);
  padding: 2rem;
  text-align: center;
  width: 100%;
  height: 18rem;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.benefit-card .fa {
  padding:  2rem 2rem 1rem 2rem ;
  color: var(--secondary);
  }
  .benefit-card h4 {
    font-weight: 400;
    font-size: 1.2rem;
    color: var(--secondary);
  }
.benefit-card h4 span {
  font-size: 2.5rem;
}
  .benefit-card h4 {
    font-weight: 400;
    font-size: 1.2rem;
    color: var(--secondary);
  }

.feature h3 {
  font-size: 2rem;
  color: #444;
  font-weight: 400;
}

.feature h4 {
  font-size: 1.4rem;
  color: #444;
}

.feature p {
  font-size: 1rem;
  margin-bottom: 2.5rem;
}

.book-now {
  background-color: var(--fourth);
  text-align: center;
}

.book-now h3 {
  font-size: 2.5rem;
  color: #fff;
}

.book-now h5 {
  margin: 1.5rem 0;
  color: #fff;
}

.btn-info {
  background-color: var(--secondary) !important;
}

.book-now .btn-outl{
  border: 1px solid var(--white) !important;
  border-radius: 0 !important;
  color: var(--white);
  padding: 0.8rem 1rem;
}


.banner-ab {
  background: rgb(50,0,0);
background-color: var(--third);
  }
  .site-logo {
 display: flex;
 align-items: center;
justify-content: space-around;
height: 280px;
padding: 3rem;
 }
.site-banner {
  text-align: center;
}





  .welcome-web {
    padding: 6rem 8rem;
  }

  img.web-logo {
    border-radius: 50% !important;
    width: 60px !important;
    height: 60px !important;
}

  a.web-text {
      font-size: 1.1rem;
  }


.footer-contact {
  background-color: #000;
  color: #f9f9f9;
padding: 7rem;
}

.footer-contact .btn-outl{
  border: 1px solid var(--white) !important;
  border-radius: 0 !important;
  color: var(--white);
  margin-left: 1rem;
  padding: 0.3rem 1rem;
}

.footer {
  background-color: var(--secondary);
  padding: 1rem 0;
  color: #f9f9f9;
  }

  .form-control {    
    border-radius: 0 !important;
  }

  .footer-contact h4 {
    color: var(--secondary);
    margin-bottom: 1.5rem;
    text-align: left;
  }



  .footer-contact p {
    color: var(--white);
    font-size: 1.25rem;
  }


  /*** responsive ***/

@media only screen and (min-width:1300px) {
  .container {
      max-width: 1270px
  }
}

@media only screen and (max-width:1200px) {

}

@media(max-width:992px) {

}

@media only screen and (min-width:768px) {
 
}


@media(max-width:768px) {
  .hero-sec h1 {
    margin-top: 45%;
  }
  .m-top {
    margin-top: 3rem;
  }
}

@media only screen and (max-width:576px) {
  .navbar-collapse {
    margin: 0 1rem;
    background-color: var(--fourth);
    text-align: center;   
}

.text-menu {
  text-decoration: none;
  color: var(--white) !important;
  font-size: 0.5rem;
  font-weight: 400;
  padding: 0.2rem;
}
.bg-nav {
  height: 28px;
}

.text-menu:hover {
  font-weight: 600;
}

h4 {
  text-align: left;
}
  .hero-sec h1 {
    margin-top: 65%;
    font-size: 4rem;
  }
  .m-top {
    margin-top: 3rem;
  }
  .banner-ab {
    padding: 2rem 0;
  }

  .banner-ab h1 {
    font-size: 2rem;
  }

  .site-logo {
    flex-direction: column;
    }
   .site-banner {
     text-align: center;
     display: block;
   }




  .footer-contact {     
    padding: 7rem 2rem;
    }
    .navbar {
      padding: 0 2rem;
    }

    .resi-pro, .comm-pro {
      padding: 6rem 1rem; 
    }
    .pro-head {
      flex-direction: column;
    }

    .display-3 {
      font-size: 3rem;     
  }

    .resi-pro h3, .comm-pro h3 {
      font-size: 1.6rem; 
      font-weight: 800;     
    }
    
    .resi-pro h5, .comm-pro h5 {
      font-size: 1.3rem;
      font-style: italic;
    }

    .footer-contact p {
      font-size: 1.1rem;
    }

    .btn-outbgr {
      border: 1px solid var(--main) !important;
  border-radius: 0 !important;
  text-align: left;
  background-color: var(--main);
  padding: 0.8rem 2.2rem;
  color: var(--third);
  font-weight: 600;
    }

    .contact-sec p {
      font-size: 1.1rem;
    }
    
  }
  @media only screen and (max-width:480px) {
    .footer-contact {     
    padding: 7rem 0;
    }
    .navbar {
      padding: 0;
    }

  }
  
  @media only screen and (max-width:420px) {

  }