
:root {
    --red: #EA3B3D;;
    --green: #50B848;
    --orange: #FF4D00;
    --orange2: #FF8000;
    --yellow: #FFBF00;
    --brown: #514039;
    --blue: #2921A5;

}




html{
    scroll-behavior: smooth;
}
body{
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    color: #231F20;
    font-weight: 400;
}



a{-webkit-transition: all 0.32s ease-out; -moz-transition: all 0.32s ease-out; -o-transition: all 0.32s ease-out; -ms-transition:  all 0.32s ease-out; transition: all 0.32s ease-out; text-decoration:none;}
a:hover{color: var(--red); text-decoration: none;}

::placeholder { color: 000; opacity: 1; }
:-ms-input-placeholder { color: 000;}
::-ms-input-placeholder { color: 000;}

/*COMMOM STYLES*/
.ff-mo{font-family: 'Montserrat';}

.fw-bl{font-weight: 900;}
.fw-xb{font-weight: 800;}
b,.fw-bo{font-weight: 700;}
.fw-sb{font-weight: 600;}
.fw-me{font-weight: 500;}
.fw-re{font-weight: 400;}
.fw-li{font-weight: 300;}
.fw-xl{font-weight: 200;}
.fw-th{font-weight: 100;}

.fs-153{font-size: 153px;}
.fs-95{font-size: 95px;}
.fs-60{font-size: 60px;}
.fs-50{font-size: 50px;}
.fs-40{font-size: 40px;}
.fs-30{font-size: 30px;}
.fs-24{font-size: 24px;}
.fs-14{font-size: 14px;}

.ls-1{letter-spacing: 1px;}
.ls-2{letter-spacing: 2px;}
.ls-4{letter-spacing: 4px;}
.ls-8{letter-spacing: 8px;}
.ls-40{letter-spacing: 40px;}

.lh-2{line-height: 2;}
.lh-15{line-height: 1.25;}

@media screen and (max-width:1199px) {
    .fs-50{font-size: 36px;}
    .fs-40{font-size: 32px;}
    .fs-30{font-size: 24px;}

}

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

    .fs-50{font-size: 36px;}
    .fs-40{font-size: 32px;}
    .fs-30{font-size: 22px;}

}

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

    .fs-60{font-size: 40px;}
    .fs-50{font-size: 36px;}
    .fs-40{font-size: 30px;}
    .fs-30{font-size: 22px;}
    .fs-14{font-size: 14px;}

    .ls-40{letter-spacing: 20px;}
}

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

    .fs-60{font-size: 40px;}
    .fs-50{font-size: 36px;}
    .fs-40{font-size: 30px;}
    .fs-30{font-size: 23px;}
    .fs-14{font-size: 14px;}

    .ls-40{letter-spacing: 10px;}
}

.bg-grey{background-color: #484c4c!important; }
.bg-brand{background-color: #da1f31;}
.bg-red  {background-color: var(--red)}
.bg-yellow  {background-color: var(--yellow)}
.bg-orange  {background-color: var(--orange)}
.bg-orange2  {background-color: var(--orange2)}
.bg-brown  {background-color: var(--brown)}
.bg-blue  {background-color: var(--blue)}



.text-brand{color:#da1f31!important;}
.text-red   {color:var(--red)}
.text-blue {color:var(--blue)}
.text-yellow {color:var(--yellow)}
.text-orange {color:var(--orange)}
.text-orange2 {color:var(--orange2)}
.text-brown {color:var(--brown)}
.text-726B6B {color:#726B6B!important;}
.text-2F2F2F {color:#2F2F2F!important;}
.text-343131 {color:#343131!important;}


.btn-brand{border:none; display: inline-block;  transition: all 0.32s ease-out; color: #FFF; font-weight: 700; font-size: 28px; padding: 15px 25px ; letter-spacing: 1.5px;  border-radius: 40px;}
.btn-brand:hover{background-color:var(--red); color: #FFF!important;}



.has-bg{background-position: center; background-size: cover; }


.img-linked{
    -webkit-transition: all 0.32s ease-out;
    -moz-transition: all 0.32s ease-out;
    -o-transition: all 0.32s ease-out;
    -ms-transition:  all 0.32s ease-out;
    transition: all 0.32s ease-out;
}
.img-linked:hover{
    transform: scale(.95);
    cursor: pointer;
}

.text-linked{color: inherit;}
.text-linked:hover{color: inherit; text-decoration: underline;}
.mhv-50{min-height: 50vh;}

@media screen and (max-width:767px) {
    .fs-153{font-size: 81px;}
    .fs-95{font-size: 72px;}
    .fs-60{font-size: 50px;}
}

@media screen and (max-width:576px) {
    .fs-153{font-size: 54px;}
    .fs-95{font-size: 45px;}
    .fs-60{font-size: 36px;}
}


.top-bar{
    width: 100%; 
    display: flex;
    align-items: center;
    height: 70px;
    text-align: center;
    font-size: 40px;
    font-weight: 700;
}

.hero-block{
    width: 100%;
     height: calc(100vh - 70px);
    display: flex;
}
.row-wrapper{height: 100%;}


@media screen and (max-width:767px) {
    .top-bar{font-size: 24px; height: 45px;}
    .hero-block{height: auto; top: 45px;}
    .btn-brand{font-size: 16px;}

    .row-wrapper{height: auto;}
    .v-scroller{overflow: hidden; height: 350px;}

    .date-box{width: 100%; text-align: center; position: relative!important;}
}


#heroCarousel .carousel-item{width: 100%; height: 100vh; background-position: center; background-size: cover; transition: opacity 0.35s ease-in-out; }
.img-flash-sale{position: absolute; left: 0; top: 0; z-index: 9;}
.showMore{
    position: absolute;
    bottom: 20px;
    text-align: center;
    left: 49%;
    z-index: 15;
     -webkit-animation: bounce 2s infinite ease-in-out;
    -o-animation: bounce 2s infinite ease-in-out;
    -ms-animation: bounce 2s infinite ease-in-out; 
    -moz-animation: bounce 2s infinite ease-in-out; 
    animation: bounce 2s infinite ease-in-out;
}



@-webkit-keyframes bounce {
    0% { transform: translateY(-15px)  }
    50% { transform: translateY(20px) }
    100% { transform: translateY(-15px) }
}

@keyframes bounce {
    0% { transform: translateY(-15px)  }
    50% { transform: translateY(20px) }
    100% { transform: translateY(-15px) }
}

.date-box{
    background-color: var(--yellow);
   -webkit-animation: date-box .5s infinite ease-in-out;
    -o-animation: date-box .5s infinite ease-in-out;
    -ms-animation: date-box .5s infinite ease-in-out; 
    -moz-animation: date-box .5s infinite ease-in-out; 
    animation: date-box .5s infinite ease-in-out;
    background-image: url('../images/amp.png');
    background-position: 80% center;
    background-repeat: no-repeat;
}


@-webkit-keyframes date-box {
    0% {  background-color: var(--yellow);  color: var(--brown); }
    50% {  background-color: var(--orange);  color: #FFF; }
    100% {  background-color: var(--yellow);  color: var(--brown); }
}

@keyframes date-box {
    0% {  background-color: var(--yellow);  color: var(--brown); }
    50% {  background-color: var(--orange);  color: #FFF;}
    100% {  background-color: var(--yellow);  color: var(--brown); }
}

@media screen and (min-width: 1199px) {
    #registrationForm {padding: 5px 50px;}   
}

#registrationForm .form-control{border-radius: 0; border: none; margin-bottom: 27px;}
#registrationForm .form-control::placeholder { color: #B2B2B2; opacity: 1; }
#registrationForm .form-control:-ms-input-placeholder { color: #B2B2B2;}
#registrationForm .form-control::-ms-input-placeholder { color: #B2B2B2;}
#registrationForm .form-control:focus {  outline: 0!important; border: none; box-shadow: none;}
#registrationForm  select {
    display: block;
   line-height: 1.3;
    margin: 0;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='17' viewBox='0 0 26 17' fill='none'%3E%3Cpath d='M12.5735 16.7608L0 4.19019L4.19315 0L12.5735 8.38038L20.9539 0L25.1471 4.19019L12.5735 16.7608Z' fill='%23001F2E'/%3E%3C/svg%3E");
    background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: 18px;
    color: rgba(0,0,0,.5);
    width: 100%;
    font-weight: 600;
}

#registrationForm .form-check-input:checked[type=checkbox]{
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22ZM12 20C14.1217 20 16.1566 19.1571 17.6569 17.6569C19.1571 16.1566 20 14.1217 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 14.1217 4.84285 16.1566 6.34315 17.6569C7.84344 19.1571 9.87827 20 12 20ZM12 17C10.6739 17 9.40215 16.4732 8.46447 15.5355C7.52678 14.5979 7 13.3261 7 12C7 10.6739 7.52678 9.40215 8.46447 8.46447C9.40215 7.52678 10.6739 7 12 7C13.3261 7 14.5979 7.52678 15.5355 8.46447C16.4732 9.40215 17 10.6739 17 12C17 13.3261 16.4732 14.5979 15.5355 15.5355C14.5979 16.4732 13.3261 17 12 17Z' fill='%23231F20'/%3E%3C/svg%3E");
    background-color: transparent;
    border-color: transparent;
}
#registrationForm  .form-check .form-check-input{
    border-radius: 50%;
}

#registrationForm .btn-home-location{
    color: rgba(0,0,0,.5);
    width: 100%;
    font-weight: 600;
    margin-bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='17' viewBox='0 0 26 17' fill='none'%3E%3Cpath d='M12.5735 16.7608L0 4.19019L4.19315 0L12.5735 8.38038L20.9539 0L25.1471 4.19019L12.5735 16.7608Z' fill='%23001F2E'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 98% center;
     background-size: 18px;
    padding-top: 1.25rem;
    }
#registrationForm .home-location-options{
    background-color: #FFF; 
    padding-left: 13px;
    padding-bottom: 27px;
}
#registrationForm .home-location-options .form-check-inline{
    margin-bottom: 9px;

}



/* <div class="scrollImg">
                    <div class='icon-scroll'><div>
                </div> */
.scrollImg{position: absolute;width: 100%; left: 0; bottom: 0; z-index: 10;  height: 100px; }
.icon-scroll,
.icon-scroll:before{
  position: absolute;
  left: 50%;
}

.icon-scroll{
  width: 40px;
  height: 70px;
  margin-left: -20px;
  top: 50%;
  margin-top: -35px;
  box-shadow: inset 0 0 0 2px  var(--yellow);
  border-radius: 25px;
  background-color: rgba(255,255,255,.5);
}

.icon-scroll:before
{
  content: '';
  width: 8px;
  height: 8px;
  background: var(--blue);
  margin-left: -4px;
  top: 8px;
  border-radius: 4px;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-name: scroll;
}

.v-scroll-wrapper{
    height: 50vh;
    overflow: hidden;
}
.v-scroll-inner{
    display: flex;
    flex-direction: column;
    animation: v-scroll-up 12s linear infinite;
}
.v-scroll-inner:hover{
    animation-play-state: paused;
}
.v-scroll-content{
    flex-shrink: 0;
    line-height: 1.5;
}
@keyframes v-scroll-up{
    0%{ transform: translateY(0); }
    100%{ transform: translateY(-50%); }
}

@keyframes scroll{
  0%{opacity: 1;}
  100%{opacity: 0; transform: translateY(46px);}
}

.home-wrapper{border-left: 1px solid var(--brown); border-right: 1px solid var(--brown);}

/* Home card features (bedrooms, bathrooms, parking) */
.home-features{color: #000;}
.home-features__row{display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 1.5rem;}
.home-features__row--center{justify-content: center; margin-top: 0.5rem;}
.home-features__item{display: inline-flex; align-items: center; gap: 0.5rem;}
.home-features__icon{display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0;}
.home-features__icon svg,
.home-features__icon img{width: 100%; height: 100%; object-fit: contain;}
.home-features__text{font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.02em;}

/* Footer: light blue + orange bands, then white content, gray border */
.footer-band{width: 100%; height: 0; border: none; margin: 0;}
.footer-band--blue{height: 6px; background-color: #7EB8DA;}
.footer-band--orange{height: 10px; background-color: var(--orange);}
.footer-main{border-bottom: 4px solid #7EB8DA; border-left: 1px solid #ddd; border-right: 1px solid #ddd;}
.footer-link{color: inherit; text-decoration: none;}
.footer-link:hover{text-decoration: underline;}

.property-card {
border: none;
border-radius: 18px;
overflow: hidden;
background: #fff;
transition: all 0.35s ease;
box-shadow:
0 10px 20px rgba(0, 0, 0, 0.08),
0 30px 60px rgba(0, 0, 0, 0.06);
position: relative;
}


.property-card::after {
content: "";
position: absolute;
inset: 0;
border-radius: 18px;
background: linear-gradient(120deg, rgba(37,99,235,0.12), rgba(99,102,241,0.08));
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}


.property-card:hover::after {
opacity: 1;
}
.property-image {
height: 230px;
object-fit: cover;
transition: transform 0.5s ease;
}

.price-now {
font-size: 24px;
font-weight: 700;
background: linear-gradient(135deg, #2921A5, #6366f1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}


.price-was {
font-size: 24px;
color: #9ca3af;
margin-left: 12px;
}

.price-was-line-through {
  text-decoration: line-through;
  text-decoration-color: var(--red);
}



.location {
font-size: 20px;
color: #6b7280;
}

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

    #heroCarousel .carousel-item{height: 75vh;}
    .img-flash-sale{width: 25%;}
    #registrationForm .btn-home-location { padding-top: .5rem;}

    .scrollImg{display: none;}
    
}