@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');

html {
    scroll-behavior: smooth;
  }

body{
    font-family: 'Lato', sans-serif;
}

p{
    margin: 0px;
    font-size: 16px;
}

@media (max-width:576px){
    p{
        font-size: 14px;
    }
}

*{
    padding: 0;
    margin: 0;
}

.sider{
    padding: 0px 70px;
    margin-top: 50px;
}

.header-banner{
    background-image: url('../images/header-img.png');
    height: 700px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding-top: 15px;
}

.header-logo{
    margin-top: 30px;
    padding: 0px 70px;
}
.header-logo img{
    width: 170px !important;
}

.header-logo a{
    color: #f8a723 !important;
    font-size: 23px !important;
    margin-top: 20px !important;
}



.header-banner h1 {
    text-align: center;
    font-size: 60px;
    margin-top: 80px;
}

.number-link{
    font-size: 22px;
    margin-top: 10px;
}

.manage{
    text-align: center;
    background-color: #f8a723;
    width: 300px;
    font-size: 30px;
    color: white;
    margin: auto;
    margin-top: 30px;
    padding: 12px;
    border-radius: 35px;
    cursor: pointer;
}

.manage:hover{
    background-color:#fabe5e;
}

.header-banner a{
    text-decoration: none;
}

.header-banner a:hover{
    text-decoration: none;
}

.header-banner img{
    width: 100%;
    margin-top: -8px;
}

.why-choose-us{
    padding: 50px 0px;
    margin-top: 50px;
}

.why-choose-us h3{
    font-size: 40px;
    text-align: center;
      text-transform: uppercase;
      font-weight: 600;
      word-spacing: 2px;
}

.why-choose-us h3::before{
    position: absolute;
    content: '';
    height: 4px;
    background-color: #319aa2;
    /* top: 40%; */
    margin-top: 60px;
    /* left: 0; */
    /* margin: auto; */
    border-radius: 10px;
    width: 15%;
    transition: width 0.5s ease;
}

.why-choose-us h3:hover::before {
    width: 30%;
  }

  @media (max-width:576px){
    .why-choose-us {
        padding: 35px 0px;
    }
  }

.tlt-wrd{
    font-size: 40px;
    text-align: center;
      text-transform: uppercase;
      font-weight: 600;
      word-spacing: 2px;
}

/* .tlt-wrd::before{
    position: absolute;
    content: '';
    height: 4px;
    background-color: #319aa2;
    width: 170px;
    margin-top: 50px;
    transition: width 0.5s ease;
}

.tlt-wrd::before:hover{
    width: 100%;
} */

.underline{
    background-color: #319aa2;
    height: 2px;
    width: 100px;
}

.underline2{
    background-color: #319aa2;
    height: 2px;
    width: 100%;
    margin-top: 10px;
}

.why-content{
    padding: 0px 70px;
    margin-top: 30px;
}

.why-content h6{
        font-size: 25px;
    text-transform: uppercase;
}

.why-content h6::before{
    position: absolute;
    content: '';
    height: 4px;
    background-color: #319aa2;
    /* top: 35%; */
    /* left: 0; */
    /* margin: auto; */
    margin-top: 40px;
    width: 30%;
    border-radius: 10px;
    transition: width 0.5s ease;
}

.why-content h6:hover::before {
    width: 75%;
  }

.why-content img{
    width: 100%;
}

.why-content p{
    margin-top: 20px;
}

.mt-50{
    margin-top: 50px;
}

.with-u{
    text-align: center;
    color: #f8a723;
    margin-top: 50px;
    font-size: 40px;
    font-weight: 700;
}

.about-box{
    /* border: 8px solid #319aa2; */
    /* padding: 50px; */
    /* border-radius: 80px; */
    margin-top: 30px;

}

.about-box h1{
    font-size: 60px;
}


.about-box p{
    font-size: 20px;
    text-align: justify;
    font-weight: 100;
}

.leadership{
    /* padding: 50px 0px; */
    background-image: url('../images/header-img.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding-top: 1px;
    padding-bottom: 50px;
    margin-top: 40px;
}

.left-lead h3{
    font-size: 45px;
    /* margin-top: 30px; */
    font-weight: 600;
}


.left-lead h3::before{
    position: absolute;
    content: '';
    height: 4px;
    background-color: #319aa2;
    /* top: 40%; */
    margin-top: 60px;
    /* left: 0; */
    /* margin: auto; */
    border-radius: 10px;
    width: 13%;
    transition: width 0.5s ease;
}

.left-lead h3:hover::before {
    width: 35%;
  }

.left-lead h5{
    font-size: 35px;
    margin-top: 60px;
}

.left-lead h6{
        font-size: 24px;
    font-weight: 100;
}

.left-lead p{
    font-size: 20px;
    margin-top: 15px;
    font-weight: 300;
    text-align: justify;
}

.left-lead h2::before{
    content: '';
    background-color: #319aa2;
    height: 4px;
    width: 100px;
    margin-top: 60px;
    position: absolute;
    border-radius: 10px;
}

.left-lead img{
    /* width: 100%; */
    position: inherit;
}

.left-lead p i{
    color: white;
    background-color: #319aa2;
    margin-right: 10px;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
}

.right-lead{
    margin-top: 50px;
}

.right-lead h2{
    font-size: 45px;
    margin-top: 30px;
    text-align: right;
}

.right-lead h5{
    font-size: 35px;
    margin-top: 60px;
    text-align: right;
}

.right-lead h6{
        font-size: 24px;
    font-weight: 100;
    text-align: right;
}

.right-lead p{
    font-size: 20px;
    margin-top: 15px;
    text-align: right;
    font-weight: 300;
}

.right-lead p i{
    color: white;
    background-color: #319aa2;
    margin-right: 10px;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
}

/* .right-lead h2::before{
    content: '';
    background-color: #319aa2;
    height: 3px;
    width: 100px;
    margin-top: 53px;
    position: absolute;
    border-radius: 10px;
} */

.right-lead img{
    /* width: 100%; */
    /* float: right; */
    position: relative;
}

.team{
    padding-top: 50px;
}

.team h2{
    font-size: 45px;
    text-align: center;
}

.team h2::before{
    content: '';
    position: absolute;
    height: 4px;
    background-color: #319aa2;
    /* top: 40%; */
    margin-top: 60px;
    /* left: 0; */
    /* margin: auto; */
    border-radius: 10px;
    width: 10%;
    transition: width 0.5s ease;
}

.team h2:hover::before {
    width: 20%;
  }

/* .team img{
    width: 159px;
   
    border: 1px solid black;
} */


.team ul{
    margin-bottom: -6px;
    margin-top: 50px;
}

.team ul li{
    list-style: none;
    display: inline-flex;
    margin-left: -4px;
    margin-top: -7px;
}

.about-banner{
    /* background-image: url('../images/header-img.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover; */
    padding:50px 0px;
}

.about-content img{
    /* position: absolute;
    width: 100% !important;
    margin-top: 85px;
    right: 100px; */
    /* width: 100% !important; */
    /* margin-top: 95px; */
    /* right: 44px; */
    position: inherit;
    /* margin-left: -87px; */
}

.contact-banner{
    /*background-image: url('../images/faq-banner.png');*/
    /* height: 400px; */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    /* padding-top:50px ; */
}

.contact-content{
    margin-top: 50px;
}

.contact-content h1{
    font-size: 60px;
}

.contact-content p{
    font-size: 20px;
    font-weight: 100;
}

.contact-content input{
    width: 100%;
    border: 2px solid #319aa2;
    border-radius: 15px;
    padding: 15px;
    background-color: transparent;
    /* outline: #d84949; */
}

contact-content input:invalid { 
    border:solid red;
    }

.contact-content textarea{
    width: 100%;
    border: 2px solid #319aa2;
    border-radius: 15px;
    padding: 15px;
    background-color: transparent;
}

.contact-content label{
    font-size: 30px;
    margin: 0px;
}

.contact-content button{
        background-color: #319aa2;
    color: white;
    border: none;
    font-size: 25px;
    margin-top: 20px;
    padding: 10px 25px;
    font-weight: 600;
    border-radius: 35px;
}

.contact-content img{
    width: 100%;
    margin-top: 50px;
    position: inherit;
}

.phone-screen{
    padding-top:50px;
    /* background-color: #edf6fc; */
    height: none;
    background-image: url('../images/proper.png');
    height: 1075px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.phone-screen h3{
    font-size: 40px;
    text-align: center;
      text-transform: uppercase;
      font-weight: 600;
      word-spacing: 2px;
}

.phone-screen h3::before{
    position: absolute;
    content: '';
    height: 4px;
    background-color: #319aa2;
    /* top: 40%; */
    margin-top: 60px;
    /* left: 0; */
    /* margin: auto; */
    border-radius: 10px;
    width: 25%;
    transition: width 0.5s ease;
}

.phone-screen h3:hover::before {
    width: 80%;
  }

.phone-screen p{
    text-align: center;
    font-size: 22px;
    margin-top: 20px;
}

.phone-screen img{
    margin-top: 55px;
    width: 100%;

    position: inherit;
}

.phone-screen h5{
    font-size: 35px;
    text-align: center;
    margin-top: 210px;
    margin-bottom: 30px;
}

.get_started{
    background: #319aa2;
    color: white;
    padding: 15px 30px;
    border-radius: 30px;
    letter-spacing: 1px;
    font-size: 18px;
}

.get_started:hover{
    text-decoration: none !important;
    background-color: #1a7a77;
}


.everything {
    padding-bottom: 50px;
}

.everything h6{
    font-size: 28px;
    text-transform: uppercase;
}

.everything p{
    font-size: 16px;
}
.everything img{
    width: 100%;
}

.everything h3{
    font-size: 40px;
    text-align: right;
      text-transform: uppercase;
      font-weight: 600;
      margin-top: 50px;
      word-spacing: 2px;
}

.everything h3::before{
    position: absolute;
    content: '';
    height: 4px;
    background-color: #319aa2;
    width: 184px;
    margin-top: 60px;
    /* margin-left: 130px; */
    border-radius: 10px;

    height: 4px;
    /* top: 40%; */
    /* left: 0; */
    /* margin: auto; */
    width: 15%;
    transition: width 0.5s ease;
}

.everything h3:hover::before {
    width: 50%;
  }

.everything h5{
    text-align: center;
    margin-top: 70px;
    color: #319aa2;
    font-size: 28px;
    cursor: pointer;
}

.everything h5:hover{
    color: #1a7a77 !important;
}

.everything a{
    text-decoration: none;
}

.everything a:hover{
    text-decoration: none;
}

.everything span{
    font-size: 35px;
    font-weight: 900;
}

.everything span img{
    width: 50px !important;
    margin-left: 5px;
}

.ever-p{
    text-align: right !important;
    font-size: 22px !important;
    margin-top: 20px !important;
    margin-top: 95px !important;
}

.simplest{
    background-image: url('../images/header-img.png');
    /* height: 800px; */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 20px;
}

.simplest h3{
    font-size: 40px;
    text-align: center;
      text-transform: uppercase;
      font-weight: 600;
      word-spacing: 2px;
}

.simplest h3::before{
    position: absolute;
    content: '';
    height: 4px;
    background-color: #319aa2;
    width: 220px;
    margin-top: 60px;
    border-radius: 10px;

    height: 4px;
    /* top: 40%; */
    /* left: 0; */
    /* margin: auto; */
    width: 15%;
    transition: width 0.5s ease;
}

.simplest h3:hover::before {
    width: 33%;
  }

.simplest p{
    text-align: center;
    font-size: 22px;
    margin-top: 20px;
    margin-bottom: 20px;
}

/* .simplest img{
    margin-top: 50px;
    box-shadow: 1px 1px 20px 10px lightgrey;
    border-radius: 45px;
    width: 100%;
} */

.simplest h6{
    text-align: center;
    font-size: 25px;
    margin-top: 40px;
    font-weight: 600;
}

.customers {
    padding-bottom: 50px;
}

.customers h3{
    font-size: 40px;
    text-align: center;
      text-transform: uppercase;
      font-weight: 600;
      word-spacing: 2px;
}

.customers h3::before{
    position: absolute;
    content: '';
    height: 4px;
    background-color: #319aa2;
    width: 220px;
    margin-top: 60px;
    border-radius: 10px;

    /* top: 95%; */
  /* left: 0; */
  /* margin: auto; */
  width: 15%;
  transition: width 0.5s ease;

}

.customers h3:hover::before {
    width: 40%;
  }

.slider-box{
    background-color: white;
    box-shadow: 1px 1px 10px lightgray;
    padding: 20px;
    /* height: 300px; */
    margin-top: 20px;
    
}

.developers{
    padding-bottom: 50px;
}

.developers h3{
    font-size: 40px;
    text-align: left;
      text-transform: uppercase;
      font-weight: 600;
      word-spacing: 2px;
}

.developers h3::before{
    position: absolute;
    content: '';
    height: 4px;
    background-color: #319aa2;
    /* top: 12%; */
    /* left: 0; */
    /* margin: auto; */
    width: 50%;
    border-radius: 10px;
    margin-top: 60px;
    transition: width 0.5s ease;
    
}

.developers h3:hover::before {
    width: 67%;
  }

.developers p{
        font-size: 22px;
        margin: 40px 10px !important;

}

.developers img{
    width: 100%;
    transition: transform 1.1s;
}

.developers img:hover {
    -ms-transform: scale(1.2); /* IE 9 */
    -webkit-transform: scale(1.2); /* Safari 3-8 */
    transform: scale(1.2); 
  } 

.developers h6{
    position: absolute;
    right: 90px;
    font-size: 40px;
    font-weight: 600;
    margin-top: 55px;
    color: #319aa2;
}

.partners{
    padding-bottom: 50px;
}

.partners h3{
    font-size: 40px;
    text-align: center;
      text-transform: uppercase;
      font-weight: 600;
      word-spacing: 2px;
}

.partners h3::before{
    position: absolute;
    content: '';
    height: 4px;
    background-color: #319aa2;
    /* top: 50%; */
  /* left: 0; */
  /* margin: auto; */
  margin-top: 60px;
  width: 25%;
  border-radius: 10px;
  transition: width 0.5s ease;
}

.partners h3:hover::before {
    width: 42%;
  }

.partners p{
    text-align: center;
    font-size: 22px;
    margin-top: 20px;
}

.support{
    /* padding-bottom: 50px; */

    background-image: url('../images/header-img.png');
    /* height: 700px; */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding-top: 50px;
}

.support h3{
    font-size: 40px;
    text-align: center;
      text-transform: uppercase;
      font-weight: 600;
      word-spacing: 2px;
}

.support h3::before{
    position: absolute;
    content: '';
    height: 4px;
    background-color: #319aa2;
    /* top: 90%; */
    /* left: 0; */
    /* margin: auto; */
    border-radius: 10px;
    margin-top: 60px;
    width: 25%;
    transition: width 0.5s ease;
}

.support h3:hover::before {
    width: 40%;
  }

.support img{
    width: 100%;
    position: inherit;
}

.support ul{
    margin-top: 130px;
}

.support ul li{
    margin-top: 20px;
    /* list-style: circle; */
    font-size: 50px;
    list-style: none;
    /* font-weight: 600; */
    /* color: #319aa2; */
    list-style-image: url('../images/list-circle.png');
}

.support ul li h6{
    font-size: 35px;
    font-weight: 600;
    color: #000000;
    margin-left: 7px;
}

.support ul li p{
    font-size: 25px;
    color: #000000;
    font-weight: 300;
    margin-left: 7px;
}

.footer{
    background-color: #000000;
    /* height: 100px; */
    padding-bottom: 30px;
    padding-top: 30px;
}

.footer img {
    width: 130px;
}

.contact-footer{
    margin-top: 170px;
}

.contact-footer img{
    width: 30px;
}

.contact-footer h6{
    color: #ffff;
    font-size: 20px;
    font-weight: 600;
}

.contact-footer p{
    color: #ffff;
    font-size: 16px;
    padding-left: 40px;
}

.contact-footer p a{
    color: white;
}

.contact-footer p a:hover{
    color: white;
    text-decoration: none;
}

.reach-footer{
    /* margin-top: 230px; */
}

.reach-footer img{
    width: 30px;
}

.reach-footer h6{
    color: #ffff;
    font-size: 20px;
    font-weight: 600;
}

.reach-footer p{
    color: #ffff;
    font-size: 16px;
    padding-left: 40px;
}

.reach-footer p a{
    color: white;
}

.reach-footer p a:hover{
    color: white;
    text-decoration: none;
}

.resource-footer{
    margin-top: 150px;
    width: 290px;
    margin-left: 135px;
}

.resource-footer img{
    width: 30px;
}

.resource-footer h6{
    color: #ffff;
    font-size: 20px;
    font-weight: 600;
}

.resource-footer p{
    color: #ffff;
    font-size: 16px;
    padding-left: 40px;
}
.resource-footer p a{
    color: white;
}


.resource-footer p a:hover{
    color: white;
    text-decoration: none;
}

.get-footer{
    margin-top: 190px;
    width: 200px;
}

.get-footer img{
    width: 30px;
}

.get-footer h6{
    color: #ffff;
    font-size: 20px;
    font-weight: 600;
}

.get-footer p{
    color: #ffff;
    font-size: 16px;
    padding-left: 40px;
}

.get-footer i{
    width: 30px;
    height: 30px;
    background-color: #ffff;
    color: black;
    padding: 8px;
    margin-right: 6px;
    text-align: center;
    border-radius: 50%;
    font-size: 14px;
}

.footer-button{
    margin-top: 180px;
}

.footer-button a{
    text-decoration: none;
}

.footer-button a:hover{
    text-decoration: none;
}

.footer-button p{
    text-align: center;
    background: white;
    width: 200px;
    margin: auto;
    color: black;
    font-weight: 600;
    padding: 15px;
    border-radius: 35px;
    margin-top: 20px;
}


/*---------------------------------------------*/
/* .mySlides {display: none} */

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
/* .prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
} */

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */


/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

.top-box{
    background-color: #319aa2;
    height: 100px;
    width: 55px;
    margin-top: -20px;
    margin-left: 20px;
    border-radius: 0px 0px 50px 50px;
    position: absolute;
}

.slider-box p{
    font-size: 20px;
}

.photo-box{
    background-color: lightgray;
    width: 130px;
    height: 130px;
    margin: auto;
    border-radius: 50%;
    margin-top: 5px;
}

.curent{
    padding-bottom: 50px;
}

.curent h3{
    font-size: 40px;
    text-align: center;
      text-transform: uppercase;
      font-weight: 600;
      
}

.curent h3::before{
    position: absolute;
    content: '';
    height: 4px;
    background-color: #319aa2;
    margin-top: 60px;
    /* left: 0; */
    /* margin: auto; */
    border-radius: 10px;
    width: 25%;
    transition: width 0.5s ease;
}

.curent h3:hover::before {
    width: 60%;
  }

.hear{
    padding-bottom: 50px;
}

.hear h3{
    font-size: 40px;
    text-align: center;
      text-transform: uppercase;
      font-weight: 600;
      
}

.hear h3::before{
    position: absolute;
    content: '';
    height: 4px;
    background-color: #319aa2;
    /* top: 40%; */
    margin-top: 60px;
    /* left: 0; */
    /* margin: auto; */
    border-radius: 10px;
    width: 25%;
    transition: width 0.5s ease;
}

.hear h3:hover::before {
    width: 62%;
  }

.light-blue{
    background-color: #edf6fc;
    padding: 40px;
    height: 200px;
    margin-top: 30px;
    text-align: center;
}

.dark-blue{
    background-color: #319aa2;
    padding: 40px;
    margin-top: 10px;
    height: 200px;
}

.dark-blue p{
    color: #ffff;
    text-align: center;
}

.dark-img{
        width: 90px;
    margin-top: -20px;
}

.cust-name h6{
        text-align: center;
    font-size: 20px;
    margin-top: 20px;
    margin-bottom: 0px;
}

.cust-name p{
    text-align: center;
}


.faq-banner{
    /* background-image: url('../images/faq-banner.png'); */
    /* height: 400px; */
    /* background-repeat: no-repeat; */
    /* background-position: center; */
    /* background-size: cover; */
    /* padding:50px 0px; */
    /* padding-bottom: 50px; */
}

.faq-content{
    margin-top: 50px;
}

.faq-content h1{
    font-size: 60px;
    margin-top: 50px;
    position: absolute;
}

.faq-content img{
    width: 310px;
}

.faq-content p{
    font-size: 20px;
    margin-top: 145px;
    font-weight: 100;
}

.fq-content{
   background-image: url('../images/faq-banner.png');
    /* height: 400px; */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding:1px 0px;
    padding-bottom: 50px;
}

.fq-content h2{
    font-size: 40px;
    font-weight: 600;
}

.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
  }



.footer2{
    background-color: #000000;
    /* height: 100px; */
    padding: 50px 0px;
}

.footer2 img{
    width: 100%;
}

.hide{
    display: none;
}

.show1{
    display: block;
}

.sign-btn{
    text-align: center !important;
    background-color: #319aa2 !important;
    width: 160px !important;
    font-size: 22px !important;
    color: white !important;
    margin: auto !important;
    /* margin-top: 37px; */
    padding: 7px !important;
    border-radius: 35px !important;
}

.mumbai-box{
    /* border: 8px solid #319aa2; */
    /* padding: 50px; */
    /* border-radius: 80px; */
    margin-top: 50px;

}

.mumbai-box h1{
    font-size: 45px;
    text-align: center;
}

.mumbai-box h1 span{
    font-size: 65px;
    font-weight: 600;
}

/* .mumbai-box p{
    background-color: #319aa2;
    color: white;
    text-align: center;
    width: 275px;
    padding: 10px;
    font-size: 20px;
    margin-top: 55px;
    border-radius: 35px;
} */

.mumbai-box p {
    text-align: center;
    margin-top: 20px;
    font-size: 20px;
    font-weight: 100;
}

.mumbai-box a{
    text-decoration: none;
}

.mumbai-box a:hover{
    text-decoration: none;
}


.location-box{
    /* border: 1px solid black; */
    box-shadow: 1px 1px 10px lightgray;
    height: 200px;
    margin-top: 50px;
}



.location-boxp a{
      text-decoration: none;
}

.location-boxp a:hover{
      text-decoration: none;
}

.prop-user-name a{
      text-decoration: none;
}

.prop-user-name a:hover{
      text-decoration: none;
}



.rent{
    background-color: #319aa2;
    width: 200px;
    height: 200px;
}

.carousel-inner {
    position: initial;
    width: 100%;
    overflow: hidden;
    padding: 10px;
}

.rent {
    background-color: #319aa2;
    width: 100px;
    height: 55px;
    border-radius: 0px 35px 35px 0px;
}

.rent p {
    color: white;
    padding: 3px 3px 3px 10px;
    font-size: 16px;
}

.carousel-item{
    padding: 10px;
}

.navbar img{
    width: 60px;
}

.nav-link{
    color: #f8a723 !important;
    font-weight: 600;
}

.nav-link:hover{
    color: #f8a623cb !important;
}

.nav-item{
margin-right: 26px;
}

.footer-address-link{
    text-decoration: none;
}

.footer-address-link:hover{
    text-decoration: none;
}


.gap{
    padding: 0px 70px;
}

.nav-item p{
    background: #f8a723;
    width: 100px;
    text-align: center;
    color: white !important;
    border-radius: 30px;
    padding: 8px;
    margin-top: -9px;
    cursor: pointer;
}

.nav-item p:hover{
    background-color: #fcbd58;
}

.boy-section img{
    /* width: 100%; */
}

.boy-section h1 {
    text-align: center;
    font-size: 60px;
    margin-top: 80px;
}



.boy-section p{
    text-align: center;
    margin-top: 20px;
    font-size: 20px;
    font-weight: 100;
}

.boy-section a{
    text-decoration: none;
}

.boy-section a:hover{
    text-decoration: none;
}

.boy-section p span{
    color: #f8a723;
    font-weight: 600;
}

@media (max-width:576px){
    .boy-section h1 {
        font-size: 40px;
        margin-top: 40px;
    }

    .boy-section p {
        font-size: 18px;
    }
}

.circle{
    background-color: #ffd90000;
    width: 100px;
    border-radius: 50%;
    height: 100px;
    position: absolute;
    margin-left: 80px;
    z-index: -1;
    animation-name: floating1;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes floating1 {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }   
}

/* .circle:hover{
     -ms-transform: scale(1.5); 
  -webkit-transform: scale(1.5); 
  transform: scale(1.5);  
 
} */

.rectangle{
    background-color: #e51a7b;
    width: 100px;
    height: 145px;
    position: absolute;
    margin-top: 185px;
    z-index: -2;
    margin-left: 24px;
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }   
}

.square1{
    border: 3px solid #00e4ea;
    width: 40px;
    height: 40px;
    position: absolute;
    margin-top: 95px;
    transition: 0.70s;
   
}

.square1:hover{
    -webkit-transition: 0.70s;
    -moz-transition: 0.70s;
    -ms-transition: 0.70s;
    -o-transition: 0.70s;
    -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.square{
    border: 3px solid #e51a7b;
    width: 40px;
    height: 40px;
    position: absolute;
    /* margin-top: 145px; */
    transition: 0.70s;
    right: 100px;
    top: 128px;
   
}

.square:hover{
    -webkit-transition: 0.70s;
    -moz-transition: 0.70s;
    -ms-transition: 0.70s;
    -o-transition: 0.70s;
    -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
  /* border: 3px solid #e51a7b; */
}

.triangle {
	width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 90px solid transparent;
    border-top: 108px solid #00e4ea;
    position: absolute;
    right: 55px;
    top: 190px;
    z-index: -2;
    
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;

    animation-name: floating;
  -moz-animation-name: floating;
}


@keyframes bounce1 {
	0%, 100%, 20%, 50%, 80% {
		-webkit-transform: translateY(0);
		-ms-transform:     translateY(0);
		transform:         translateY(0)
	}
	40% {
		-webkit-transform: translateY(-20px);
		-ms-transform:     translateY(-20px);
		transform:         translateY(-20px)
	}
	60% {
		-webkit-transform: translateY(-10px);
		-ms-transform:     translateY(-10px);
		transform:         translateY(-10px)
	}
}

.subscribe{
    padding: 50px 0px;
}

.subscribe h3{
    font-size: 40px;
    text-align: center;
      text-transform: uppercase;
      font-weight: 600;
      word-spacing: 2px;
}

.subscribe h3::before{
    position: absolute;
    content: '';
    height: 4px;
    background-color: #319aa2;
    /* top: 45%; */
  /* left: 0; */
  /* margin: auto; */
  border-radius: 10px;
  width: 25%;
  margin-top: 60px;
  transition: width 0.5s ease;
}

.subscribe h3:hover::before {
    width: 52%;
  }

.subscribe p {
    text-align: center;
    font-size: 22px;
    margin-top: 30px;
}

.subscribe input{
    border: 1px solid #303030;
    padding: 10px;
    width: 100%;
    margin-top: 40px;
    outline: none !important;
    border-radius: 15px;
}

.subscribe button{
    border: none;
    background: #319aa2;
    color: white;
    padding: 7px 20px;
    position: absolute;
    margin-top: 44px;
    margin-left: -112px;
    border-radius: 12px;
    outline: none !important;
}

.subscribe button:hover{
    background: #1a7a77;
}
.partners img{
    width: 100%;
    margin-top: 20px;
}

/* tlt-wrda {
    text-decoration: none;
    position: relative;
  } */

  .tlt-wrd {
      text-decoration: none;
      color: black;
  }

  .tlt-wrd {
    text-decoration: none;
    color: black;
}

  .tlt-wrd ::before {
    content: '';
    position: absolute;
    background: #319aa2;
    height: 4px;
    background-color: #319aa2;
    /* top: 35%; */
    /* left: 0; */
    /* margin: auto; */
    margin-top: 40px;
    width: 30%;
    border-radius: 10px;
    transition: width 0.5s ease;
  }
  .tlt-wrd :hover::before {
    width: 30%;
  }


  .easy{
    text-decoration: none;
    color: black;
}

.easy:hover{
  text-decoration: none;
  color: black;
}

.easy::before {
  content: '';
  position: absolute;
  background: #319aa2;
  height: 4px;
  top: 40%;
  /* left: 0; */
  margin: auto;
  width: 25%;
  transition: width 0.5s ease;
}
.easy:hover::before {
  width: 80%;
}





/* .flip-card {
    background-color: transparent;
    width: 300px;
    height: 300px;
    perspective: 1000px;
  } */
  
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  }
  
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }
  
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  .flip-card-front {
    background-color: #bbb;
    color: black;
  }
  
  .flip-card-back {
    background-color: #2980b9;
    color: white;
    transform: rotateY(180deg);
  }

  .zoom-hover{
    overflow: hidden;
    /* height: 285px; */
    margin-top: 50px;
    border-radius: 45px;
    box-shadow: 1px 1px 20px 10px none;

  }
  
  .zoom-hover img{
    transition: transform 1.1s;
    width: 100%;
  }

  .zoom-hover img:hover {
    -ms-transform: scale(1.1); /* IE 9 */
    -webkit-transform: scale(1.1); /* Safari 3-8 */
    transform: scale(1.1); 
  } 

  .circle1{
    background-color: #ffd900;
    width: 130px;
    border-radius: 50%;
    height: 130px;
    position: absolute;
    /* margin-left: 80px; */
    /* z-index: -1; */
    animation-name: floating1;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    right: 85px;
    top: 150px;
}

@keyframes floating1 {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }   
}




.slick-slide {
    margin: 0px 30px;
}

.slick-slide img {
    width: 100%;
}

.slick-slider
{
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;
    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;
    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}


.float-circle{
    width: 130px !important;
    height: 130px !important;
    position: absolute !important;
    top: 425px !important;
    right: 55px !important;

    animation-name: floating2;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes floating2 {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }   
}


.triangle3 {
    width: 0;
    height: 0;
    border-left: 110px solid transparent;
    border-right: 90px solid transparent;
    border-top: 160px solid #00e4ea;
    position: absolute;
    top: 100px;
    left: 70px;
    /* z-index: -1; */
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-name: floating;
    -moz-animation-name: floating;
}


@keyframes bounce1 {
	0%, 100%, 20%, 50%, 80% {
		-webkit-transform: translateY(0);
		-ms-transform:     translateY(0);
		transform:         translateY(0)
	}
	40% {
		-webkit-transform: translateY(-20px);
		-ms-transform:     translateY(-20px);
		transform:         translateY(-20px)
	}
	60% {
		-webkit-transform: translateY(-10px);
		-ms-transform:     translateY(-10px);
		transform:         translateY(-10px)
	}
}

.rectangle3{
        /* background-color: #e51a7b; */
        width: 100px;
        height: 145px;
        position: absolute;
        /* margin-top: 185px; */
        /* z-index: -2; */
        right: 47px;
        /* margin-left: 35px; */
        animation-name: floating;
        border: 4px solid #e51a7b;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        top: 190px;
}

@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }   
}

#myBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: #319aa2;
    color: white;
    cursor: pointer;
    padding: 10px;
    border-radius: 4px;
  }
  
  #myBtn:hover {
    background-color: #1a7a77 ;
  }

  #myBtn img{
    width: 30px;
  }



  .triangle10 {
    width: 0;
    height: 0;
    border-left: 110px solid transparent;
    border-right: 90px solid transparent;
    border-top: 130px solid #00e4ea;
    position: absolute;
    top: 260px;
    left: 10px;
    /* z-index: -1; */
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-name: floating;
    -moz-animation-name: floating;
}


@keyframes bounce1 {
	0%, 100%, 20%, 50%, 80% {
		-webkit-transform: translateY(0);
		-ms-transform:     translateY(0);
		transform:         translateY(0)
	}
	40% {
		-webkit-transform: translateY(-20px);
		-ms-transform:     translateY(-20px);
		transform:         translateY(-20px)
	}
	60% {
		-webkit-transform: translateY(-10px);
		-ms-transform:     translateY(-10px);
		transform:         translateY(-10px)
	}
}

.mt-1, .my-1 {
    margin-top: 0.7rem!important;
}


.carousel-item h5{
    font-weight: 600;
    margin-top: 20px;
    font-size: 18px;
    margin-bottom: 0;
}

.carousel-item h6{
    font-weight: 600;
    margin-top: 10px;
    font-size: 16px;
}

.about-square{
    border: 3px solid #00e4ea;
    width: 40px;
    height: 40px;
    position: absolute;
    /* margin-top: 95px; */
    transition: 0.70s;
    top: -60px;
    left: 185px;
   
}

.about-square:hover{
    -webkit-transition: 0.70s;
    -moz-transition: 0.70s;
    -ms-transition: 0.70s;
    -o-transition: 0.70s;
    -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.about-circle{
    background-color: #e51a7b;
    width: 100px;
    border-radius: 50%;
    height: 100px;
    left: 55px;
    position: absolute;
    /* margin-left: 80px; */
    z-index: -1;
    animation-name: floating1;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes floating1 {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }   
}


.about-rectangle{
    background-color: #ffb200;
    width: 160px;
    height: 139px;
    position: absolute;
    /* margin-top: 185px; */
    z-index: -2;
    /* margin-left: 24px; */
    right: 90px;
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }   
}

.about-triangle {
	width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 90px solid transparent;
    border-top: 108px solid #00e4ea;
    position: absolute;
    right: 35px;
    top: 240px;
    z-index: -2;
    
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;

    animation-name: floating;
  -moz-animation-name: floating;
}

.circle-border{
    border: 3px solid #e51a7b;
    width: 40px;
    height: 40px;
    position: absolute;
    /* margin-top: 95px; */
    transition: 0.70s;
    bottom: -35px;
    border-radius: 50%;
    left: 315px;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-name: floating;
    -moz-animation-name: floating;
}


@keyframes bounce1 {
	0%, 100%, 20%, 50%, 80% {
		-webkit-transform: translateY(0);
		-ms-transform:     translateY(0);
		transform:         translateY(0)
	}
	40% {
		-webkit-transform: translateY(-20px);
		-ms-transform:     translateY(-20px);
		transform:         translateY(-20px)
	}
	60% {
		-webkit-transform: translateY(-10px);
		-ms-transform:     translateY(-10px);
		transform:         translateY(-10px)
	}
}

.triangle-deep {
	width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 90px solid transparent;
    border-top: 108px solid #00e4ea;
    position: absolute;
    right: 55px;
    top: 190px;
    /* z-index: -2; */
    
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;

    animation-name: floating;
  -moz-animation-name: floating;
}

.rectangle-deep{
    background-color: #e51a7b;
    width: 100px;
    height: 145px;
    position: absolute;
    margin-top: 185px;
    /* z-index: -2; */
    /* margin-left: 24px; */
    animation-name: floating;
    left: 0;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }   
}

.mumbai-square{
    border: 3px solid #ffb200;
    width: 40px;
    height: 40px;
    position: absolute;
    /* margin-top: 95px; */
    transition: 0.70s;
    /* top: -60px; */
    bottom: -35px;
    left: 253px;
    /* margin: auto;*/
   
}

.mumbai-square:hover{
    -webkit-transition: 0.70s;
    -moz-transition: 0.70s;
    -ms-transition: 0.70s;
    -o-transition: 0.70s;
    -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.mumbai-circle{
    background-color: #e51a7b;
    width: 100px;
    border-radius: 50%;
    height: 100px;
    position: absolute;
    /* margin-left: 80px; */
    z-index: -1;
    bottom: 30px;
    animation-name: floating1;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes floating1 {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }   
}


.mumbai-rectangle{
    background-color: #ffb200;
    width: 160px;
    height: 139px;
    position: absolute;
    /* margin-top: 185px; */
    z-index: -2;
    /* margin-left: 24px; */
    left: 165px;
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }   
}

.mumbai-triangle {
	width: 0;
    height: 0;
    border-left: 1px solid transparent;
    border-right: 90px solid transparent;
    border-top: 115px solid #00e4ea;
    position: absolute;
    right: 90px;
    top: 216px;
    z-index: -2;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-name: floating;
    -moz-animation-name: floating;
}

.mumbai-border{
    border: 3px solid #e51a7b;
    width: 40px;
    height: 40px;
    position: absolute;
    /* margin-top: 95px; */
    transition: 0.70s;
    bottom: -35px;
    border-radius: 50%;
    /* left: 260px; */
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-name: floating;
    -moz-animation-name: floating;
    top: 55px;
    right: 115px;
}


@keyframes bounce1 {
	0%, 100%, 20%, 50%, 80% {
		-webkit-transform: translateY(0);
		-ms-transform:     translateY(0);
		transform:         translateY(0)
	}
	40% {
		-webkit-transform: translateY(-20px);
		-ms-transform:     translateY(-20px);
		transform:         translateY(-20px)
	}
	60% {
		-webkit-transform: translateY(-10px);
		-ms-transform:     translateY(-10px);
		transform:         translateY(-10px)
	}
}

/*---------------------------------------------------------*/
.gurgaon-square{
    border: 3px solid #ffb200;
    width: 40px;
    height: 40px;
    position: absolute;
    /* margin-top: 95px; */
    transition: 0.70s;
    top: 55px;
    /* bottom: -35px; */
    /* left: 281px; */
    /* margin: auto; */
    right: 150px;
    z-index: 1;
   
}

 .gurgaon-square:hover{
    -webkit-transition: 0.70s;
    -moz-transition: 0.70s;
    -ms-transition: 0.70s;
    -o-transition: 0.70s;
    -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
} 

.gurgaon-circle{
    background-color: #e51a7b;
    width: 100px;
    border-radius: 50%;
    height: 100px;
    position: absolute;
    /* margin-left: 80px; */
    z-index: -1;
    bottom: 100px;
    right: 110px;
    animation-name: floating1;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes floating1 {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }   
}


.gurgaon-rectangle{
    background-color: #ffb200;
    width: 160px;
    height: 139px;
    position: absolute;
    /* margin-top: 185px; */
    z-index: -2;
    /* margin-left: 24px; */
    /* left: 165px; */
    animation-name: floating;
    animation-duration: 3s;
    bottom: 23px;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }   
}

.gurgaon-triangle {
	width: 0;
    height: 0;
    border-left: 70px solid transparent;
    border-right: 95px solid transparent;
    border-top: 115px solid #00e4ea;
    position: absolute;
    /* right: 113px; */
    left: 199px;
    /* top: 216px; */
    z-index: -2;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-name: floating;
    -moz-animation-name: floating;
}

.gurgaon-border{
    border: 3px solid #e51a7b;
    width: 40px;
    height: 40px;
    position: absolute;
    /* margin-top: 95px; */
    transition: 0.70s;
    bottom: -35px;
    border-radius: 50%;
    left: -15px;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-name: floating;
    -moz-animation-name: floating;
    top: 55px;
    /* right: 115px;*/
}


@keyframes bounce1 {
	0%, 100%, 20%, 50%, 80% {
		-webkit-transform: translateY(0);
		-ms-transform:     translateY(0);
		transform:         translateY(0)
	}
	40% {
		-webkit-transform: translateY(-20px);
		-ms-transform:     translateY(-20px);
		transform:         translateY(-20px)
	}
	60% {
		-webkit-transform: translateY(-10px);
		-ms-transform:     translateY(-10px);
		transform:         translateY(-10px)
	}
}

.rectangle-contact{
    background-color: #00e4ea;
    width: 100px;
    height: 145px;
    position: absolute;
    margin-top: 215px;
    /* z-index: -2; */
    /* margin-left: 24px; */
    animation-name: floating;
    left: 32px;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }   
}

.circle-contact{
    background-color: #e51a7b;
    width: 150px;
    border-radius: 50%;
    height: 150px;
    position: absolute;
    margin-left: 80px;
    /* z-index: -1; */
    animation-name: floating1;
    animation-duration: 4s;
    bottom: 21px;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    right: 183px;
}

@keyframes floating1 {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }   
}

.triangle-contact {
	width: 0;
    height: 0;
    border-left: 80px solid transparent;
    border-right: 114px solid transparent;
    border-top: 167px solid #ffda00;
    position: absolute;
    right: 215px;
    top: 363px;
    /* z-index: -2; */
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-name: floating;
    -moz-animation-name: floating;
}

.square-contact{
    border: 3px solid #e51a7b;
    width: 40px;
    height: 40px;
    position: absolute;
    /* margin-top: 145px; */
    transition: 0.70s;
    right: 205px;
    top: 213px;
   
}

.square-contact:hover{
    -webkit-transition: 0.70s;
    -moz-transition: 0.70s;
    -ms-transition: 0.70s;
    -o-transition: 0.70s;
    -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
  /* border: 3px solid #e51a7b; */
}

.circle-deep{
    background-color: #ffd900;
    width: 100px;
    border-radius: 50%;
    height: 100px;
    position: absolute;
    margin-left: 55px;
    /* z-index: -1; */
    top: -20px;
    animation-name: floating1;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}



@keyframes floating1 {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }   
}

.rectangle-gaur{
    background-color: #00e4ea;
    width: 75px;
    height: 126px;
    position: absolute;
    margin-top: 120px;
    /* z-index: -2; */
    /* margin-left: 24px; */
    animation-name: floating;
    left: 200px;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}


@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }   
}


.triangle-gaur {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 90px solid transparent;
    border-top: 108px solid #ffb200;
    position: absolute;
    /* right: 55px; */
    top: 265px;
    left: 26px;
    /* z-index: -2; */
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-name: floating;
    -moz-animation-name: floating;
}


.square-gaur{
    left: 73px;
    border: 3px solid #e51a7b;
    width: 40px;
    height: 40px;
    position: absolute;
    /* margin-top: 145px; */
    transition: 0.70s;
    /* right: 100px; */
    top: 169px;
    webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-name: floating;
    -moz-animation-name: floating;
   
}

.square-gaur:hover{
    -webkit-transition: 0.70s;
    -moz-transition: 0.70s;
    -ms-transition: 0.70s;
    -o-transition: 0.70s;
    -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
  /* border: 3px solid #e51a7b; */
}


.square-gaur1{
    border: 3px solid #00e4ea;
    width: 30px;
    height: 30px;
    position: absolute;
    margin-top: 85px;
    border-radius: 50%;
    transition: 0.70s;
    left: 104px;
}

.square-gaur1:hover{
    -webkit-transition: 0.70s;
    -moz-transition: 0.70s;
    -ms-transition: 0.70s;
    -o-transition: 0.70s;
    -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}


.square-deep{
    border: 3px solid #e51a7b;
    width: 30px;
    height: 30px;
    position: absolute;
    /* margin-top: 145px; */
    transition: 0.70s;
    right: 77px;
    border-radius: 50%;
    top: 265px;
   
}

.square-deep:hover{
    -webkit-transition: 0.70s;
    -moz-transition: 0.70s;
    -ms-transition: 0.70s;
    -o-transition: 0.70s;
    -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
  /* border: 3px solid #e51a7b; */
}

.square1-deep{
    border: 3px solid #00e4ea;
    width: 40px;
    height: 40px;
    position: absolute;
    margin-top: 95px;
    transition: 0.70s;
    right: 115px;
   z-index: 1;
}

.square1-deep:hover{
    -webkit-transition: 0.70s;
    -moz-transition: 0.70s;
    -ms-transition: 0.70s;
    -o-transition: 0.70s;
    -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.side-tri img{
    top: 90px;
    position: absolute;
    z-index: 1;
    transition: 0.70s;
}

.side-tri img:hover{
    -webkit-transition: 0.70s;
    -moz-transition: 0.70s;
    -ms-transition: 0.70s;
    -o-transition: 0.70s;
    -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.side-tri1 img{
    top: 90px;
    position: absolute;
    z-index: 1;
    transition: 0.70s;
    right: 100px;
    top: 155px;
}

.side-tri1 img:hover{
    -webkit-transition: 0.70s;
    -moz-transition: 0.70s;
    -ms-transition: 0.70s;
    -o-transition: 0.70s;
    -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.circle-gaur{
    background-color: #e51a7b;
    width: 100px;
    border-radius: 50%;
    height: 100px;
    position: absolute;
    /* margin-left: 80px; */
    /* z-index: -1; */
    animation-name: floating1;
    animation-duration: 4s;
    bottom: 60px;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    right: 90px;
}

@keyframes floating1 {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }   
}


/*---------------------*/
/* #examples {
    display: flex;
    flex-flow: column;
    max-width: 100%;
    width: 960px;
    background-color: white;
    opacity: 0.95;
    padding: 15px 30px;
    margin: 0 auto 30px;
} */
/* #examples h1 {
    font-size: 48px;
    text-align: center;
    margin: 30px 15px 60px;
} */
#examples .example {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    margin: 0 0 30px;
}

/* .example span::before {
height: 4px ;
background-color: #319aa2;
width: 100px;
margin: 5px 0 0;
} */
#examples .example .hover {
    font-size: 40px;
    text-align: center;
    margin: 0 auto;
    padding: 0;
    transition: all 0.5s ease-in-out;
    position: relative;
    text-transform: uppercase;
      font-weight: 600;
      word-spacing: 2px;
}
#examples .example .hover:before, #examples .example .hover:after {
    content: "";
    position: absolute;
    bottom: -10px;
    width: 170px;
    height: 4px;
    margin: 5px 0 0;
    transition: all 0.5s ;
    transition-duration: 0.75s;
    opacity: 1;
    background-color: #f8a723;
    border-radius: 35px;
}
#examples .example .hover.hover-1:before, #examples .example .hover.hover-1:after {
    left: 0;
    width: 170px;
}

#examples .example:hover {
    /* cursor: pointer; */
}
#examples .example:hover .hover:before, #examples .example:hover .hover:after {
    width: 100%;
    opacity: 1;
}
/* #examples .example:hover .hover.hover-3:before, #examples .example:hover .hover.hover-4:before, #examples .example:hover .hover.hover-3:after, #examples .example:hover .hover.hover-4:after {
    width: 50%;
} */

#examples .example .hover.hover-2:before, #examples .example .hover.hover-2:after {
    right: 0;
}

@media (max-width:576px){
    #examples .example .hover {
        font-size: 25px;
    }
    
    #examples1 .example1 .hover1 {
        font-size: 19px;
    }
}

.side-tri-con img{
    top: 250px;
    position: absolute;
    z-index: 1;
    width: 35px;
    transition: 0.70s;
    left: 75px;
}

.side-tri-con img:hover{
    -webkit-transition: 0.70s;
    -moz-transition: 0.70s;
    -ms-transition: 0.70s;
    -o-transition: 0.70s;
    -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

/***----------------------------------------------------------------***/
#examples1 .example1 {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    margin: 0 0 0px;
}

/* .example span::before {
height: 4px ;
background-color: #319aa2;
width: 100px;
margin: 5px 0 0;
} */
#examples1 .example1 .hover1{
    font-size: 25px;
    text-transform: uppercase;
    /* margin: 0 auto; */
    padding: 0;
    transition: all 0.5s ease-in-out;
    position: relative;
    text-transform: uppercase;
      word-spacing: 2px;
}
#examples1 .example1 .hover1:before, #examples1 .example1 .hover1:after {
    content: "";
    position: absolute;
    bottom: -10px;
    width: 170px;
    height: 4px;
    margin: 5px 0 0;
    transition: all 0.5s ;
    transition-duration: 0.75s;
    opacity: 1;
    background-color: #319aa2;
    border-radius: 35px ;
}
#examples1 .example1 .hover1.hover-11:before, #examples1 .example1 .hover1.hover-11:after {
    left: 0;
    width: 70px;
}

#examples1 .example1:hover {
    /* cursor: pointer; */
}
#examples1 .example1:hover .hover1:before, #examples1 .example1:hover .hover1:after {
    width: 100%;
    opacity: 1;
}
/* #examples .example:hover .hover.hover-3:before, #examples .example:hover .hover.hover-4:before, #examples .example:hover .hover.hover-3:after, #examples .example:hover .hover.hover-4:after {
    width: 50%;
} */

/*-----------------------*/
#exampless .examples {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    margin: 0 0 30px;
    float: right;
}

/* .example span::before {
height: 4px ;
background-color: #319aa2;
width: 100px;
margin: 5px 0 0;
} */
#exampless .examples .hovers {
    font-size: 40px;
    text-align: right;
    /* margin: 0 auto; */
    padding: 0;
    transition: all 0.5s ease-in-out;
    position: relative;
    text-transform: uppercase;
      font-weight: 600;
      word-spacing: 2px;
}
#exampless .examples .hovers:before, #exampless .examples .hovers:after {
    content: "";
    position: absolute;
    bottom: -10px;
    width: 170px;
    height: 4px;
    margin: 5px 0 0;
    transition: all 0.5s ;
    transition-duration: 0.75s;
    opacity: 1;
    background-color: #319aa2;
    border-radius: 35px;
}
#exampless .examples .hovers.hover-1s:before, #exampless .examples .hovers.hover-1s:after {
    left: 0;
    width: 170px;
}

#exampless .examples:hover {
    /* cursor: pointer; */
}
#exampless .examples:hover .hovers:before, #exampless .examples:hover .hovers:after {
    width: 100%;
    opacity: 1;
}
/* #examples .example:hover .hover.hover-3:before, #examples .example:hover .hover.hover-4:before, #examples .example:hover .hover.hover-3:after, #examples .example:hover .hover.hover-4:after {
    width: 50%;
} */

#exampless .examples .hovers.hover-2s:before, #exampless .examples .hovers.hover-2s:after {
    right: 0;
}

.rectangle-faq{
    background-color: #ffd900;
    width: 80px;
    height: 145px;
    position: absolute;
    margin-top: 185px;
    z-index: -2;
    /* margin-left: 24px; */
    animation-name: floating;
    left: 131px;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }   
}

.triangle-faq {
	width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 105px solid #00e4ea;
    position: absolute;
    /* right: 55px; */
    top: 343px;
    left: 91px;z-index: -2;
    
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;

    animation-name: floating;
  -moz-animation-name: floating;
}

.circle-faq{
    background-color: #e51a7b;
    width: 100px;
    border-radius: 50%;
    height: 100px;
    position: absolute;
    /* margin-left: 55px; */
    z-index: -1;
    top: 364px;
    right: 70px;animation-name: floating1;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}



@keyframes floating1 {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }   
}

.faq-tri img{
    position: absolute;
    z-index: 1;
    transition: 0.70s;
    width: 40px;
    right: 80px;
    top: 165px;
}

.faq-tri img:hover{
    -webkit-transition: 0.70s;
    -moz-transition: 0.70s;
    -ms-transition: 0.70s;
    -o-transition: 0.70s;
    -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.myGallery {
    display: grid;
    grid-gap: 0px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  
  .myGallery img {
    width: 100%;
    border: 1px solid black;
  }
  

  .mobile-grid img{
width: 100%;
border: 1px solid black;
  }

  .testing-box{
      width: 90px;
      height: 90px;
      /* border: 1px solid; */
      border-radius: 50%;
      margin: auto;
      margin-top: -20px;
      overflow: hidden;
  }

  .testing-box img{
      width: 100%;
  }

  .testing-box-hc{
    width: 130px;
    height: 130px;
    /* border: 1px solid; */
    border-radius: 50%;
    margin: auto;
    margin-top: 14px;
    overflow: hidden;
  }

  .testing-box-hc img{
      width: 100%;
  }