@font-face {
font-family: BR Firma;
src: url(../font/BRFirmaMedium.otf);
}

@font-face {
font-family: squad-regular;
src: url("../font/Fontfabric - Squad Regular.ttf");
}
@font-face {
font-family: FSLucas;
src: url("../font/Penumbra Sans Std Bold.otf");
}
@font-face {
font-family: Rossanova;
src: url("../font/Rossanova-Bold.otf");
}
body{font-family: "BR Firma", sans-serif;}

h1, h2, h3, h4, h5, h6{font-family: squad-regular;}
p{margin-bottom: 0;font-size: 14px;}
img{width: 100%;}
.space, .space-top{padding-top: 50px;}
.space, .space-bottom{padding-bottom: 50px;}
.background-colors{background: #c9e7f4;}

.header-section{background: #c9e7f4;width: 100%;}
.fixed-header{position: fixed;width: 100%;top: 0;z-index: 9;}
.nav-item a{font-weight: 550;font-size: 16px;}
.nav-end{justify-content: end;}
.navbar-brand img{width: 100px;}

.bck-img{background-image: url(../img/background-img.webp);}

.project-highlights{overflow: hidden;}
.sub-heading h3{font-weight: 600;font-size: 40px;}
.sub-heading span{font-size: 24px;}
.ph-con h5{font-weight: 600;margin-bottom: 0;font-size: 25px;}
.ph-con{padding-left: 20px;}
.project-content{display: flex;align-items: center;margin: 40px 0 10px;}
.project-content img{border: 2px solid #000;border-radius: 7px;padding: 7px;width: 65px;}
.title-content{height: 100%;position: relative;}
.title{rotate: -90deg;position: absolute;top: 90px;left: -10px;font-family: FSLucas;color: #008dd2;}
.title h2{ font-size: 50px;font-family: FSLucas;}
.title p{ text-align: end;font-size: 20px;}

.contant-top{background: #c9e7f4;padding: 20px 0; text-align: center;}
.contant-top h2{color: #008dd2; font-family: Rossanova;font-weight: 600;font-size: 40px;}
.contant-top h4{font-weight: 600;font-family: FSLucas;font-size: 25px;}

.contants p{font-weight: 550; line-height: 30px; text-align: center;font-size: 14px;color: grey;font-family: BR Firma;}
.master-img, .floor-img{display: flex;align-items: center;justify-content: center;position: relative;}
.floor-img{background: #c9e7f4; border: 1px solid #008dd2; border-radius: 7px; cursor: pointer;}
.master-img img{cursor:pointer}
.master-img .overlay, .floor-img .overlay {
position: absolute;
overflow: hidden;
width: 46%;
height: auto;
left: 27%;
top: 43%;
border-bottom: 1px solid #fff;
border-top: 1px solid #fff;
-webkit-transition: opacity .35s, -webkit-transform .35s;
transition: opacity .35s, transform .35s;
-webkit-transform: scale(0, 1);
-ms-transform: scale(0, 1);
transform: scale(0, 1);
}
.master-img:hover .overlay, .floor-img:hover .overlay {
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.overlay h3 {
text-align: center;
color: #fff;
display: block;
font-size: 55px;
font-weight: 600;
line-height: 78px;
font-family: squad-regular;
}
.overlay h4 {
text-align: center;
color: #fff;
display: block;
font-weight: 600;
line-height: 30px;
font-family: squad-regular;
}
.master-img:hover img, .floor-img:hover img {
filter: brightness(.7);
-webkit-filter: brightness(.7);
}
.floor-img img{margin: 20px 0;}
.fl-btn{margin: 10px !important;border: 1px solid #008dd2 !important;border-radius: 5px 5px 0px 0px !important;}
.sub-negh-title{    color: #008dd2;font-family: Rossanova;font-weight: 600;font-size: 35px;}
.neighbourhood-list{list-style: none;}
.neighbourhood-list li{position: relative;padding-left: 25px; padding-top: 10px;padding-bottom: 5px;}
.neighbourhood-list li::before{position: absolute;content: ""; background-image: url(../img/arrow.png);background-repeat: no-repeat;top: 14px;left: 0;width: 100%;height: 100%;}
.accordion-button:not(.collapsed) {
color: #008dd2 !important;
background-color: transparent !important;
box-shadow: none !important;
}
.accordion-button{background: transparent !important; font-size: 17px; font-weight: 600;}
.accordion-item{background: transparent !important;}
.accordion-body{font-size: 15px;color: grey;}
.loc-map{width: 100%; height: 400px;}

.border{position: relative;}
.border::before{content: "";
position: absolute;
background-image: linear-gradient(to right, #eeaf83, #df6e55, #eeaf83, #df6e55);
width: 100%;
top: 0;
z-index: 1;
height: 5px}
.border::after{content: "";
position: absolute;
background-image: linear-gradient(to right, #eeaf83, #df6e55, #eeaf83, #df6e55);
width: 100%;
bottom: 0;
z-index: 1;
height: 5px}
.v-mob{display: none;}

.price-breakup {
    text-align: center;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    padding: 20px 20px;
    background: #fff;
    margin-bottom: 20px;
}
.rw-flex{display: flex; align-items: center; justify-content: center;}

.price-breakup h4 {
    background: #008dd2;
    color: #fff;
    border-radius: 7px;
}
.price-breakup .onwards {
    font-size: 20px;
    font-weight: 550;
}
.price-breakup .launch {
    color: #008dd2;
    font-weight: 600;
}
.btn-enq {
    margin-top: 30px;
}
.btn-enq a {
    padding: 10px 15px;
    background: #3e87a6;
    color: #fff;
    text-decoration: none;
    font-weight: 550;
    transition: 0.3s ease-in-out;
}
.btn-enq a:hover {
    background: #c9e7f4;
    color: #000;
}
.title-heading p{padding: 0px 0 20px;}
.shake {
    animation: shake 2s ease-in-out;
}

@keyframes shake {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }
    
    10%, 30%, 50%, 70%, 90% {
        transform: translate3d(-10px, 0, 0);
    }
    20%, 40%, 60%, 80% {
        transform: translate3d(10px, 0, 0);
    }
}

.form-control {
    border: none !important;
    border-bottom: 1px solid #ccc !important;
    border-radius: 0 !important;
    margin-bottom: 20px;
}
.flat-type {
    width: 100%;
    border: none;
    padding: 10px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
}
.sbt-btn button {
    width: 100%;
    background: #c9e7f4;
    border: none;
    padding: 10px;
    border-radius: 25px;
    color: #000;
    font-weight: 550;
    transition: 0.3s ease-in-out;
}

.modal-header {
    background-color: #c9e7f4;
    color: #000;
}

.modal-title {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: squad-regular;
}
.btn-primary-lv{background: #c9e7f4;color: #000;font-family: squad-regular; transition: 0.3s ease-in-out; font-weight: 600; font-size: 18px; border: 1px solid #008dd2;margin-top: 30px;}
.btn-primary-lv:hover{background: #008dd2; color: #fff;}
.bck-img-des .background-img {
    position: absolute;
    bottom: 5px;
    left: 0;
    z-index: 5;
    width: 215px;
}
.bck-img-des, .banner-section{position: relative;}

.banner-content{position: absolute;
    top: 40px;
    left: 25px;
    background: #fff;
    width: 350px;
    /* border-radius: 7px; */
    text-align: center;
    z-index: 5;
    padding-bottom: 30px;
    }
    .banner-co{
        position: relative;
        z-index: 2;
        line-height: 35px;
    }
    /* .banner-co::before{    position: absolute;
        content: "";
        bottom: 18px;
        left: 36px;
        background: #f78828bf;
        width: 80%;
        height: 68%;
        z-index: -1;
        rotate: 225deg;animation: rotate 8s infinite;} */

        .banner-list{list-style: none;  
            /* background: #f789289e; */
          padding: 15px 0;}
      .banner-list li{font-weight: 600;}
      .banner-content h3{background:linear-gradient(to right, #72c8ed, #3e87a6); color: #fff;padding: 15px 0px;width: 100%;text-align: center;border-radius: 0px;font-weight: 600;}
      .old-md{background:linear-gradient(to right, #72c8ed, #3e87a6);color: #fff;padding: 10px 0;border-radius: 0px;margin: 0; font-weight: 550;}
      .gallery-img{
        width: 200px !important;
        margin: 15px 10px;}
        /* .gallery-img img, .slider-for img{filter: blur(8px);} */
.footer-section{color: grey;background:#c9e7f4; line-height: 27px;}
.open-form {
    background-color: #fff;
    padding: 20px 0px 10px;
    border-radius: 80px;
    position: relative;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    text-align: center;
}

.form-align {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.flat-type-open {
    width: 165px;
    border: none;
    padding: 10px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 26px;
}
.thank-you{height: 80vh;}
section{overflow:hidden}
.title-banner h2, .title-banner h4{font-weight: 600;}


.phone-call {
    width: 50px;
    height: 50px;
    right: 20px;
    bottom: 20px;
    background: #10b418;
    position: fixed;
    text-align: center;
    color: #ffffff;
    cursor: pointer;
    border-radius: 50%;
    z-index: 99;
  display: inline-block;
  line-height: 65px;
      display: flex;
    align-items: center;
    justify-content: center;
}

.phone-call:before {
    position: absolute;
    content: " ";
    z-index: -1;
    top: -15px;
    right: -15px;
    background-color: #10b418;
    width: 80px;
    height: 80px;
    border-radius: 100%;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
    opacity: 0.6;
    -webkit-animation: pulse 1s ease-out;
    animation: pulse 1.8s ease-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    
}


.whatsapp {
    width: 50px;
    height: 50px;
    left: 20px;
    bottom: 20px;
    background: #10b418;
    position: fixed;
    text-align: center;
    color: #ffffff;
    cursor: pointer;
    border-radius: 50%;
    z-index: 99;
  display: inline-block;
  line-height: 65px;
      display: flex;
    align-items: center;
    justify-content: center;
}

.whatsapp:before {
    position: absolute;
    content: " ";
    z-index: -1;
    top: -15px;
    right: -15px;
    background-color: #10b418;
    width: 80px;
    height: 80px;
    border-radius: 100%;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
    opacity: 0.6;
    -webkit-animation: pulse 1s ease-out;
    animation: pulse 1.8s ease-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.whatsapp img, .phone-call img{width: 35px;
    padding: 0px;}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(0);
        opacity: 0;
    }
    25% {
        -webkit-transform: scale(0.3);
        opacity: 1;
    }
    50% {
        -webkit-transform: scale(0.6);
        opacity: .6;
    }
    75% {
        -webkit-transform: scale(0.9);
        opacity: .3;
    }
    100% {
        -webkit-transform: scale(1);
        opacity: 0;
    }
}

@keyframes pulse {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    25% {
        transform: scale(0.3);
        opacity: 1;
    }
    50% {
        transform: scale(0.6);
        opacity: .6;
    }
    75% {
        transform: scale(0.9);
        opacity: .3;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}