/*Animations*/
.fadeinleft {
    opacity:0;
    transform: translateX(200px);
    transition: all 1.3s ease-out;
}

.fadeinright{
    opacity: 0;
    transform: translateX(-200px);
    transition: all 0.8s ease-out;
}

.fadeindown{
    opacity: 0;
    transform: translateY(-100px);
    transition: all 1.2s ease-out;
}

.fade-in{
    opacity:0;
    transition: all 1.3s ease-in;
}

.active-left,.active,.active-right,.active-down{
    opacity:1;
    transform: translateX(0);
    transform: translateY(0);
}



.fadein{
opacity: 0;
}   
@keyframes property-dipslay {
    from {opacity: 0;transform: translateY(40px);}
    to {opacity: 1;transform: translateY(0px);}
  }
  
  
  .property-anim{
    animation-name: property-dipslay!important;
    animation-duration: 0.2s!important;
    
  }

  @keyframes property-dipslay-2 {
    from {opacity: 0;transform: translateX(-60px);}
    to {opacity: 1;transform: translateX(0px);}
  }
  
  
  .property-anim-2{
    animation-name: property-dipslay-2!important;
    animation-duration: 0.25s!important;
    
  }


  @keyframes property-dipslay-3 {
    from {opacity: 0;transform: translateX(60px);}
    to {opacity: 1;transform: translateX(0px);}
  }
  
  
  .property-anim-3{
    animation-name: property-dipslay-3!important;
    animation-duration: 0.25s!important;
    
  }

/* End Animations*/

.container-fluid{
    max-width: 90%;
}

h1,h2,h3,h4,h5,h6,p{
    font-family: 'Jost';
}


.top-bar{
    background-color: #0d263c;
}
.social-box{
    border: 1px solid rgb(192, 192, 192);
    width: 30px;
    height: 30px;
    padding: 1px 12px;
    border-radius: 50%;
    margin-right: 0.5em;
}

.navbar{
    background-color: rgba(1, 1, 2, 0.514)!important;
    color: white;
    padding: 20px 0px;


}

.navbar li {
    margin: 0em 0.3em;
}

.navbar li a{
    color: white;
    font-family: 'Jost';
    font-size: 18px;
    font-weight: 500;
}

.navbar li a.active{
    color: white!important;
}

.navbar li a:hover{
    color: #ec6325;
}

.navbar li a.active{
    color: #ec6325!important;
}

.carousel-1{
    background: url('../img/Property-Listing-04.jpg')rgba(0, 0, 0, 0.5);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: multiply;
    height: 90vh;
    
}

.carousel-2{
    background: url('../img/Property-Listing-08.jpg')rgba(0, 0, 0, 0.5);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: multiply;
    height: 90vh;
    
}

.carousel-3{
    background: url('../img/blog-image-2.jpg')rgba(0, 0, 0, 0.5);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: multiply;
    height: 90vh;
    
}

.contact-btn{
    font-family: 'Jost';
    background-color: #ec6325;
    color: white;
    padding: 15px 40px;
    border: 1px solid transparent;
}

.contact-btn:hover{
    background-color: #ffffff;
    color: #ec6325;
    transition-duration: 0.2s;
    border: 1px solid #ec6325;
}

.carousel-caption{
    bottom: 35%;
}

.about-img img{
    border-radius: 30px;
}

p{
    font-size: 17px;
}

.about-stats{
    margin: 0% 10%;
}

.house-row{
   margin-top: 10px;
   margin-left: -140px;
   padding: 20px;
   background-color: white;
   z-index: 100;
   position: relative;
   border-radius: 30px;
}

.house-row img{
    width: 93%;
    border-radius: 30px;
}

.about-img{
    display: none;
}

.about-img-active{
    display: block;
}

.thumb-img-active{
    filter: brightness(75%);
    transition-duration: 0.4s;
}

.fac-box{
    background-color: white;
    padding: 25px;
    border-radius: 30px;
}

.fac-img-box{
    background-color: #dfe7ed;
    width: fit-content;
    padding: 20px;
    border-radius: 30px;
}

.fac-box:hover{
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    transition-duration: 0.4s;
}

.fac-box:hover .fac-numb{
    color: #ec6325!important;
    transition-duration: 0.4s;
}


#floors{
    background: url('../img/Testimonial-background.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
}

.floor-title{
    background-color: white;
    
    padding: 10px 15px;
    border-radius: 10px;
}

.floor-title img{
    border-radius: 10px;
}

.floor-title:hover{
    background: rgb(255,255,255);
    background: linear-gradient(133deg, rgba(255,255,255,1) 0%, rgba(236,99,37,1) 27%);
    color: white;
    transition-duration: 0.4s;
}

.floor-title:hover h4{
    color: white!important;
    transition-duration: 0.4s;

}

.floor-img{
    display: none;

}

.floor-img-active{
    display: block;
}


.floor-thumb-active .floor-title{
    background: rgb(255,255,255);
    background: linear-gradient(133deg, rgba(255,255,255,1) 0%, rgba(236,99,37,1) 27%);
}

.floor-thumb-active .floor-title h4{
    color: white!important;
}

.floor-card{
    background-color: white;
    padding: 30px;
    border-radius: 25px;
}

.floor-card{
    display: none;

}

.floor-card-active{
    display: block;
}


#banner{
    background: url('../img/bg-section.jpg')rgba(0, 0, 0, 0.55);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    display: flex;
    align-items: center;
    height: 50vh;
}

.con-galeri img{
    border-radius: 15px;
}

.tour-btn{
    background-color: #ec6325;
    padding: 40px 30px;
    width: max-content;
    border-radius: 50%;
    border: 6px #b8420b;
    border-style: double;
}

.tour-btn:hover{
    
    scale: 0.9;
    transition-duration: 0.4s;
}

.amenity{
    background-color: white;
    padding: 20px;
    border-radius: 20px;
    text-align: center;
    
}

.amenity img{
    border-radius: 20px;
}


.house-row-mobile{
    display: none;
}

@media only screen and (max-width:1600px) {
    .house-row-mobile {
      display: block;
    }
    .house-row-desktop{
        display: none;
    }
}
@media only screen and (max-width:1100px) {
    .top-bar {
      display: none;
    }
    .navbar{
        background-color: #0d263c!important;
      }
      .carousel-caption{
        bottom: 20%;
      }
      .carousel-caption p{
        padding: 0px 10px!important;
      }
      .logoimg{

        width: 90px!important;
      }
      .house-row{
        margin-left: 0px;
      }
      .thumb-img{
        width: 98%!important;
      }
      .floor-img{
        padding: 0px!important;
        
      }
      .floor-card{
        margin: 20px;
      }
      .card-grid{
        padding: 0px!important;
      }
      #banner{
        height: auto;
        padding: 30px 0px;
      }
      .tour-btn{
        display: flex;
        justify-content: start;
      }
  }


  .tour-btn{
    display: flex;
    justify-content: end;
  }
 .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
  }