
:root {
     --white:#ffffff;
     --baseprimary:#DB2227;
     --basesecondary:#F0C09A;
     --basethird:#C4927C; 
     --texthighlighter:#FFE8D5;
     --litebasesecondary:#FFF2E8;
     --labelborder:#ECD3C6;
     --playbtn:#db222763;
     --lightbackground:#FCF6F1;
     --footerpatti:#EAD7CE;
     --cardinner:#F4EBE6;
     --basesecondary50:#EDCCB4;
 }
 
.texthighlighter{
    color: var(--texthighlighter);
}
.shadofilter{
    filter: drop-shadow(0 1px 2px #0005);
}

@font-face {
    font-family: 'MyCustomFont';
    src: url('../fonts/CodecPro-Regular.ttf') format('truetype'),
    url('../fonts/CodecPro-Bold.ttf') format('truetype');
}
 


h1,h2,h3,h4,h5,h6{
    font-family: 'MyCustomFont', sans-serif;
        letter-spacing: 2px;
}
body{
    font-family: 'MyCustomFont', sans-serif;
    font-size: 16px;
    overflow-x: hidden;
    color: #454444; 
    letter-spacing: 0.5px;
}
 
 
.logo{
        width: 85px;
}
   
   
.whatsapp-button { 
    position: fixed;
    bottom: 15px;
    left: 15px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-align: center;
    font-size: 24px;
    line-height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    cursor: pointer;
    transition: all 0.5s ease;
    display: none;
} 
.whatsapp {
    width: 75%;
    margin-left: -10px;
}
.visible {
    display:block;
}
 
 
 .relative{
     position:relative;
 }
 .absolute{
     position:absolute;
 }
  
.sticky{
    position:sticky!important;
}
    
.z1{
    z-index: 1;
}
.z2{
    z-index: 2;
}
.buttons{
    background: var(--red);
    color: var(--white);
    font-weight: 500;
    padding: 8px 30px;
    font-size: 16px;
    border-radius: 50px;
}
.buttons2{
    background: var(--red);
    color: var(--white);
    font-weight: 500;
    padding: 6px 30px;
    font-size: 16px;
    border-radius: 50px;
}
.fs-10  { font-size: 10px; }
.fs-12  { font-size: 12px; }
.fs-14  { font-size: 14px; }
.fs-16  { font-size: 16px; }
.fs-18  { font-size: 18px; }
.fs-20  { font-size: 20px; }
.fs-22  { font-size: 22px; }
.fs-24  { font-size: 24px; }
.fs-26  { font-size: 26px; }
.fs-28  { font-size: 28px; }
.fs-30  { font-size: 30px; }
.fs-32  { font-size: 32px; }
.fs-34  { font-size: 34px; }
.fs-36  { font-size: 36px; }
.fs-40  { font-size: 40px; }
.fs-45  { font-size: 45px; }
.fs-50  { font-size: 50px; }
.fs-55  { font-size: 55px; }
.fs-60  { font-size: 60px; }
.fs-64  { font-size: 64px; }
.fs-96  { font-size: 96px; }

.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-900 { font-weight: 900; }

a{
    text-decoration: none;
}
a:hover{
    color:#8A3942;
}
      
.jic{
    justify-items:center;
} 
.radius10{
    border-radius: 10px;
}  
.radius12{
    border-radius: 12px;
}
.radius20{
    border-radius:20px;
} 
.radius30{
    border-radius: 30px;
}
 .hearticon{
    width: 12px;
 }
 .form-control, .form-select{
    background-color: #FFF;
    color: #000;
 }
 .form-control:focus { 
    background-color: #ffffff;
    border-color: #EF3D3D50;
    box-shadow: 0 0 0 .15rem rgba(13, 110, 253, .05);
}
 
.w-40{
    width: 40%;
}
.w-80{
    width: 80%;
}
.w-90{
    width: 90%;
}

.linearch {
  position: relative;
  z-index: 1;
}

.linearch::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url('../img/linecolor.svg') no-repeat center;
  background-size: 70%;
  opacity: 0.5; /* adjust opacity here */
  z-index: 2;
  pointer-events: none; /* so it doesn't block clicks */
}       
.bghero{
    background: url('../img/herobanner2.webp')no-repeat;
    background-size: 100%  ;
    width: 100%;
    height: 100vh;
    background-position: right bottom;
}      


.modal-content{
     border:none;
 }
    .form-control{
      margin-bottom: 20px;
      border: 1px solid #ED3237;
      
    }
    .btn-clos{
      margin: 5px 5px 0 0;
      position: absolute;
      align-self: end;
      border: none;
      font-size: 24px;
      color: #ED3237;
      background: transparent;
      transition: 0.35s linear;
    }
    .btn-clos:hover{
      transition: 0.35s linear;
      font-size: 26px;
    }
    .form-control:focus {
      color: #11335a;
      background-color: #fff;
      border-color:  #ED3237;
      outline: 0;
      box-shadow: 0 0 0 .15rem #ED323766;
}
 
.whatsapp-float {
    opacity: 0;
  position: fixed;
    bottom: 80px;
    right: 15px;
    z-index: 1000;
    width: 40px;
    height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center; 
  transition: transform 0.3s ease;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.whatsapp-float:hover {
  transform: scale(1.1);
}

.whatsapp-float img {
    width: 50px;
    height: 50px;
}
.book-float{
    opacity: 0;
    position: fixed;
    bottom: 20px;
    right: 10px;
    width: 190px;
    height: 36px;
    z-index: 1000;
    border-radius: 50px; 
    color: var(--baseprimary);
    background: #ad5389;
    background: linear-gradient(0deg,#FFCAA8 0%, #FFE8D5 100%);
    display: flex;
    justify-content: center;
    align-items: center; 
    transition: transform 0.3s ease;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.book-float:hover {
    transform: scale(1.1);
}
.book-float svg {
    width: 20px;
    height: 20px;
    color: var(--baseprimary);
}
.book-float p{
       color: var(--baseprimary);
}
.visible { /* Add a new class for visibility */
    opacity: 1; /* Make the button visible on scroll */
}

.logoCurve{
    position: absolute;
    top: 0;
    left: 0;
    width: 161px;
}
.bbottom{
    border-bottom: 1px solid #fff5;
}
.bottom-26{
        margin-bottom: -26px;
}
.bottom-20{
        margin-bottom: -20px;
}
.hero{
    background-image: url('../img/alpha-project-hero.webp');
    background-size: cover;
    width: 100vw;
    height: 108vh;
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #000000c7;
    background-size: inherit;
    background-position: inherit;
    z-index: 1;
    height: 108vh;
}
.hero .row{
    z-index: 5;
    position: relative;
}

/* From Uiverse.io by adamgiebl */ 
.cssbuttons-io-button {
  display: flex;
  align-items: center;
  font-family: inherit;
  cursor: pointer;
  font-weight: 700;
  line-height: 1;
  font-size: 16px;
  padding: 0.8em 1.2em 0.8em 1.5em;
  color: var(--baseprimary);
  background: #ad5389;
  background: linear-gradient(
    0deg,
    #FFCAA8 0%,
    #FFE8D5 100%
  );
  border: none; 
/*  box-shadow: 0 0.7em 1.5em -0.5em #DEAA89;*/
  letter-spacing: 0.05em;
  border-radius: 20em;
}

.cssbuttons-io-button svg {
  margin-left: 8px;
}

.cssbuttons-io-button:hover {
  box-shadow: 0 0.5em 1.5em -0.5em #DEAA89;
}

/*.cssbuttons-io-button:active {
  box-shadow: 0 0.3em 1em -0.5em #DEAA89;
}*/

.jsc{
        justify-self: center;
}
 
.aboutlabel{
    background: var(--litebasesecondary);
    border:2px solid var(--labelborder);
    color: var(--basethird);
    width: 200px;
    border-radius: 12px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    
 }
 .floatlabel1{
    position: absolute;
    bottom: 29%;
    right: 9%;
 }
  .floatlabel2{
    position: absolute;
    bottom: 15%;
    right: 19%;
 }





.ripl{
    border: none;
    background-color: var(--playbtn);
    margin-top: -450px;
    border-radius: 50%;
    width: 135px;
    height: 135px;
}
.ripl:hover {
    color: #fff;
    background-color: #dd2618a3;
    border-color: #0a58ca00;
}
.ripl:focus {
    color: #fff;
    background-color: #dd2618a3;
    border-color: #0a58ca00;
    box-shadow: 0 0 0 0.25rem rgb(49 132 253 / 0%);
}
.playcircle{
    filter: invert(1);
}
/*.myname img{*/
/*  border-radius: 10px;*/
/*}*/

.modal-content{
    background-color: #fff0!important;
        border: none!important;
}

/*.modal-dialog{*/
/*    margin: 8% 21%;*/
/*}*/


.wrap {
  position: relative;
  margin: 0 auto;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
}

.ripl {
 
  animation: ripple 1.5s linear infinite;
  transition: all 0.7s ease;
}
.ripl:hover {
  transform: scale(1.1);
}
.ripl:focus {
  outline: none;
}

@keyframes ripple {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.3), 0 0 0 3px rgba(255, 255, 255, 0.3), 0 0 0 5px rgba(255, 255, 255, 0.3);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 4px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0), 0 0 0 30px rgba(255, 255, 255, 0);
  }
}

.btn-close{
    position: absolute;
    right: -218px;
    top: 70px;
    z-index: 1;
}
.modal-header{
    border-bottom:none;
}

@media (max-width: 767.98px) {
    .modal-body{
            width: 100%!important;
    }
    #videoModal iframe {
        width: 95vw!important;
        height: 50vh!important;
    }
    #closeBtn {
    position: absolute;
    top: 15%;
    right: 10%!important;
    cursor: pointer;
    font-size: 40px!important;
    color: #fff;
    z-index: 2;
}
}
 
.playabs{
    position: absolute;
    top: 85%;
    left: 42%;
 }


/* Add your modal styles here */
    #myModal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.85);
      justify-content: center;
      align-items: center;
      z-index:1024;
    }

    #videoModal iframe {
     width: 55vw;
    height: 65vh;
    }

    /* Style close button if needed */
    #closeBtn {
      position: absolute;
      top: 15%;
      right: 20%;
      cursor: pointer;
      font-size: 32px;
      color: #fff;
      z-index:2;
    }
/* end your modal styles here */


.colorThird{
    color: var(--basethird);
}
.basecolor{
    color: var(--baseprimary);
}

/**************************/
/*svg color changer*/
/*filter: invert(1) sepia(1) saturate(5) hue-rotate(200deg);*/
/******************************/

.abouticon{
    width: 20px;
}

.bgfika{
    background: var(--lightbackground);
}
.amenityicon img{
    height: 50px;
    position: relative;
    z-index: 3;
}
.amenityicon::after{
    content: "";
    width: 45px;
    height: 45px;
    border-radius: 50px;
    position: absolute;
    top: 0;
    right: 40%;
    background: var(--basesecondary);
    z-index: 1;


}









.section {
  padding: 30px 0;
  color: #333;
}
.section .top-side {
  text-align: center;
}
.section .top-side .title {
  font-weight: 500;
  font-size: 15px;
  display: inline-block;
}
.section .top-side .title:after {
  content: "";
  display: block;
  width: 50%;
  border-bottom: 1px solid #494949;
  margin: 8px auto;
}
.section .top-side h2 {
  font-weight: 700;
}
.section.portfolio .filters {
  text-align: center;
  margin-top: 36px;
}
.section.portfolio .filters ul {
  padding: 0;
}
.section.portfolio .filters ul li {
  list-style: none;
  display: inline-block;
  padding: 7px 20px;
  margin-left: 20px;
  cursor: pointer;
  position: relative;
  background: var(--texthighlighter);
  border-radius: 50px;
  font-weight: 700;
  color: var(--basethird);
  letter-spacing: 0.5px;
}
 
 .section.portfolio .filters ul li.active{
    background: var(--texthighlighter);
    color: var(--baseprimary);
    box-shadow: rgb(0, 0, 0, 0.4) 1px 3px 3px -1px inset, rgba(0, 0, 0, 0) 0px 0px 2px 2px inset;
    transition: 0.2s ease-in;
 }
.section.portfolio .filters-content {
  margin-top: 50px;
}
.section.portfolio .filters-content .show {
  opacity: 1;
  visibility: visible;
  transition: all 350ms;
}
.section.portfolio .filters-content .hide {
  opacity: 0;
  visibility: hidden;
  transition: all 350ms;
}
.section.portfolio .filters-content .item {
  text-align: center;
  cursor: pointer;
  margin: 15px;
}
.section.portfolio .filters-content .item .p-inner {
  padding: 20px 30px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.section.portfolio .filters-content .item .p-inner h5 {
  font-size: 15px;
}
.section.portfolio .filters-content .item .p-inner .cat {
  font-size: 13px;
}
.section.portfolio .filters-content .item img {
  width: 100%;
  height: 300px;
  border-radius: 20px;
  object-fit: cover;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}
.project-highlight li{
    line-height:2.5;
}
ul.project-highlight {
    list-style-image: url('../img/bullets.svg');
}
.footercta{
    background: var(--footerpatti);
}
.footercta .cards{
    border:2px solid var(--basesecondary50);
    background:var(--cardinner);
}
.borderLeft{
    border-left: 1px solid var(--basesecondary50);
}
.footercurve{
    background: url(../img/footercurve.svg)no-repeat;
    background-size: cover;
    width: 100vw;
    background-position: center;
    min-height:468px;
}
.footerBottom{
    background: linear-gradient(180deg, rgba(244, 231, 224, 1) 0%, rgba(255, 249, 244, 1) 100%);
}
.customInput{
    border-radius: 50px;
    border: 1px solid #fff ;
}
.lamb{
    height: 260px;
}
.priceimg {
    height: 260px;
    object-fit: cover;
}
.bgfika .card{
        min-height: 260px;
}
.arrows{
    position: absolute;
    right: 0;
    bottom: 30px;
    width: 120px;
    opacity: 0.4;

}

.vibrate-1 {
    -webkit-animation: vibrate-1 2s linear infinite alternate-reverse both;
            animation: vibrate-1 2s linear infinite alternate-reverse both;
}
/* ----------------------------------------------
 * Generated by Animista on 2026-1-5 16:2:32
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation vibrate-1
 * ----------------------------------------
 */
@-webkit-keyframes vibrate-1 {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px);
  }
  40% {
    -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px);
  }
  60% {
    -webkit-transform: translate(2px, 2px);
            transform: translate(2px, 2px);
  }
  80% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@keyframes vibrate-1 {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px);
  }
  40% {
    -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px);
  }
  60% {
    -webkit-transform: translate(2px, 2px);
            transform: translate(2px, 2px);
  }
  80% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}


.shake-horizontal {
    -webkit-animation: shake-horizontal 30s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite alternate-reverse both;
            animation: shake-horizontal 30s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite alternate-reverse both;
}
.shake-horizontal-2 {
    -webkit-animation: shake-horizontal 30s cubic-bezier(0.455, 0.030, 0.515, 0.955) 2s infinite alternate-reverse both;
            animation: shake-horizontal 30s cubic-bezier(0.455, 0.030, 0.515, 0.955) 2s infinite alternate-reverse both;
}
/* ----------------------------------------------
 * Generated by Animista on 2026-1-5 16:8:10
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation shake-horizontal
 * ----------------------------------------
 */
@-webkit-keyframes shake-horizontal {
  0%,
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
  80% {
    -webkit-transform: translateX(8px);
            transform: translateX(8px);
  }
  90% {
    -webkit-transform: translateX(-8px);
            transform: translateX(-8px);
  }
}
@keyframes shake-horizontal {
  0%,
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
  80% {
    -webkit-transform: translateX(8px);
            transform: translateX(8px);
  }
  90% {
    -webkit-transform: translateX(-8px);
            transform: translateX(-8px);
  }
}

.templat{
    grid-template-columns: 1fr 1fr 1fr;
}














/*media max-width:767.99px*/
@media (max-width: 767.98px) {
    .logo {
    width: 45px;
}
.logoCurve {
    width: 100px;
}
  
.mf-10{
    font-size: 10px;
}
.mf-12{
    font-size: 12px;
}
.mf-14{
    font-size: 14px;
}  
.mf-16{
    font-size: 16px;
}
.mf-18{
    font-size: 18px;
}
.mf-20{
    font-size: 20px;
}
.mf-22{
    font-size: 22px;
}
.mf-24{
    font-size: 24px;
}
.mf-26{
    font-size: 26px;
}
.mf-28{
    font-size: 25px;
}
.mf-30{
    font-size: 30px;
}
.mf-32{
    font-size: 32px;
}
.mf-34{
    font-size: 34px;
}
.mf-45{
    font-size: 45px;
}   

.od2{
    order: 2;
}
.jcc{
    justify-content: center!important;
}
.mjsc{
        justify-self: center;
}
 .w16{
    width: 16px!important;
 }
 .w18{
    width: 18px!important;
 }
 .hero, .hero::before{
        height: 50vh;
        background-position: center;
        margin-bottom: 100%;
 }
 .cssbuttons-io-button{
    padding: 0.5em 1.5em;
 }
 .hero::before{
        background-color: #00000000;
 }
.suraj{
        margin-top: 70%;
}
.mtextDark{
    color: #000000;
}
.mbasecolor{
    color: var(--baseprimary);
}
.hero{
    background-image: url('../img/mobile-hero.webp');
    background-size: contain;
    background-position: top;
    background-repeat: no-repeat;
}
.shadofilter{
    filter: none;
}
.ripl { 
    margin-top: -250px; 
    width: 95px;
    height: 95px;
}
.playabs { 
    top: 85%;
    left: 39%;
}
.floatlabel1 {
    position: absolute;
    bottom: 21%;
    right: 3%;
    width: 150px;
}
.floatlabel2 {
    position: absolute;
    bottom: 3%;
    right: 5%;
}
 
.filters ul{
    display: flex;
}
.templat{
    grid-template-columns: 1fr 1fr;
}
.section.portfolio .filters-content .item img {
    height: 100px;
    border-radius: 10px;
}
.section.portfolio .filters-content{
    margin-top: 20px;
}
.project-highlight li {
    line-height: 1.3;
    margin-bottom: 12px;
}
ul.project-highlight { 
    margin-top: 20px;
}
.borderLeft {
    border-top: 1px solid var(--basesecondary50);
    border-left: 0px;
}
.customInput { 
    border: 1px solid #ED3237;
}
.footercurve{
    background: #fff;
}
.mw-50{
    width: 50%;
}
.fcolumn{
    flex-direction: column;
}
.floatlabel2{
        width: 160px;
}
.modal-dialog-centered{
        margin-top: 25vh;
}
section{
    overflow-x:hidden;
}
.amenityicon::after {
    top: -4px;
    right: 35%;
}
.amenityicon img {
    height: 40px;
}
.mpadd{
    padding-top: 11px;
    padding-bottom: 12px;
}

}
/*media max-width:767.99px*/