*{

    --c1: #CEA947;
    --c2: #DAC07B;
    --c3: #ECDBDB;
    --d1: #272727;
    --w1: #EEEAE7;

    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 1vw;
    font-weight: 300;
    font-style: normal;
    
    /* border: solid 1px red; */
    
}
.btest{border: solid 1px red;}
/* .container {
    margin: 0px;
} */
.dtxt{color: black;}
.dtxt::placeholder{
    color: #000;
}
.ctxt{color: var(--c1);}
.wtxt{color: white;}.wtxt::placeholder{
    color: #fff;
}.wtxt:focus{
    color: #fff;
}
.dbg{background-color: #000;}
.wbg{background-color: #fff;}
.cbg{background-color: #DAC07B;}
.cbg2{
    background-color: var(--w1);}
html{
    z-index: 0;
    background-color: var(--w1);
    width: 100%;
    /* background-color: #d8d8d8; */
    overflow-x: hidden;
}
body{
    /* display: block; */
    overflow-x: hidden;
    background-color: var(--w1);
    
}

section{
    
    background-color: var(--w1);
    /* min-height: 100dvh; */
    /* width: 100dvw; */
}
a {
  color: #000;
  text-decoration: none; /* optional */
}
.pad{
    padding: 0px 8vw;
}
#hero {
    position: relative;
    height: 100vh;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden; /* Prevent scroll caused by overflow */
    display: flex;
    flex-direction: column;
    
  }
  
  #basicCarousel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Background */
   
  }
  .carousel-control-prev,
.carousel-control-next,
.carousel-indicators {
  z-index: 20 !important;
}

.carousel-control-prev, .carousel-control-next {
  /* pointer-events: all !important; */
}
  #basicCarousel .carousel-inner, 
  #basicCarousel .carousel-item, 
  #basicCarousel .carousel-item img {
    height: 100vh;
    object-fit: cover; /* Cover full background */
    /* z-index: -100; */
    
  }

  
  /* This is the key part that creates the overlay */
  .gradient-overlay::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0));
  }
#hero > .stat {
    position: relative;
    z-index: 9;
    padding-top: 70px; /* To avoid overlap with fixed navbar height */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: white;
  }
/* .im1 {background-image: url('../img/hero/i1.jpg');}
.im2 {background-image: url('../img/hero/i2.jpg');}
.im3 {background-image: url('../img/hero/i3.jpg');}
.im4 {background-image: url('../img/hero/i4.jpg');} */
.cent { align-items: center;align-self: center; align-content: center; text-align: center;}
.hero {
  /* width: 100%;
  height: 100vh; */
  /* background-image: url('../img/hero/i1.jpg'); */
  background-size:cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  /* background-size: 110%; */
}
.abthero {
    /* width: 100%;
    height: 100vh; */
    background-image: url('../img/hero/abt.png');
    background-size:cover;
    background-position: 70% 0;
    background-repeat: no-repeat;
    /* background-size: 110%; */
  }
.jvhero {
/* width: 100%;
height: 100vh; */
background-image: url('../img/hero/jv.png');
background-size:cover;
background-position: top;
background-repeat: no-repeat;
/* background-size: 110%; */
}
.fp{
  /* width: 100%;
  height: 100vh; */
  min-width: 100dvw;
  background-image: url('../img/FP1.jpg');
  background-size:cover;
  background-position: top;
  background-repeat: no-repeat;
  /* background-size: 110%; */
}
.ctahero {
/* width: 100%;
  height: 100vh; */
  background-image: url('../img/hero/cta.png');
  background-size:cover;
  background-position: top;
  background-repeat: no-repeat;
  /* background-size: 110%; */
}
.lineheightmore { line-height: 1.1 !important; }
.herotxt {font-size: 6vh;}
.title {font-family: 'Kaisei Decol', sans-serif; line-height:95%; }
.welcome {font-size: 6vh;}
.txt0{font-size: 9vh;}
.txt1{font-size: 6vh;}
.txt2{font-size: 3.5vh;}
.txt3{font-size: 2.5vh;}
.txt4{font-size: 2vh;}
.txt5 {font-size: 2vh;}
.ovtxt1 {font-size:3vh;}
.ovtxt2 {font-size:2.2vh; margin-top: 1vh;}
.ovtxt3 {font-size:1.8vh; }
.title-sub{font-family: 'Hanken Grotesk', sans-serif;}
.test {font-size: 6vh; line-height:120%;margin-top: 2vh; margin-bottom: 3vh;}
.title-p{font-family: 'Hanken Grotesk', sans-serif; font-size: 2vh;}
.jv-p{font-family: 'Hanken Grotesk', sans-serif; font-size: 1.6vh;}
.jv-p2{font-family: 'Hanken Grotesk', sans-serif; font-size: 1.2vw;}
.title-tag{font-size: 2.5vh;color: var(--c1);font-family: 'Hanken Grotesk', sans-serif;}
.abt3ico {font-size: 5vh; line-height: 1.2; }
.abt3it{font-size: 1.25rem;}
.jvpt {font-size: 1.65vh; }

.jvp {font-size: 3vh; } /* jv page points*/
.jvpp {font-size: 1.3rem; font-weight: 300;}/* jv page points body*/
.jvft {font-size: 2.2vh;} /* jv page form title*/
.pdv {font-size: 2vh; font-weight: 600;}
.PDbody {font-size: 2.3vh; font-weight: 300}
.ctaT{font-size: 5.1vh;}
.abtp{font-size: 1.25rem;}



.zoom {transform: scale(1); }
.zoom:hover {transform: scale(0.9);transition: transform 0.3s ease-in-out;}
.br {
    display: none;
}
.brbig {
    display: block;
}
.hlogo {
    max-width:  25vw;
    
} icon-bar {
        color: #fff; /* Example: Change to black */
    }
  
/* Make dropdown show on hover */
.dropdown{
    display:block; 
    margin-top: 0;
    z-index: 1;
    border: none;
    border-radius: 0; 
  }
 
  /* Optional: removes annoying "flash" caused by JS toggling */
  /* .dropdown-menu {
    display: none;
  } */
.dropdown-item { border-bottom: 1px solid #eee; scale: 0.9;color: #888; }
.dropdown-item:last-child{ border: none;}
.dropdown-item:hover {border: #CEA947 solid 0px;  border-radius: 20px; color: #CEA947; background-color: #fff;}
.dropdown-item:focus {background-color: white; border-radius: 0px;color: #CEA947;}
.flogo {
    max-width: 20vw;
}
.bi {
    width: 4vh;
    height: 4vh;
}
.bi:hover {
    /* border: var(--c1) solid 5px;
    border-radius: 50%; */
    color: #CEA947;
}
.cpw {
    /* position: absolute; */
    text-wrap:nowrap;
    text-align: center;
    
    /* height: 100%; */
}
.cpw a {color: #fff;}
.flink {
    font-weight: 100;
}
.flink:hover {
    font-weight: 300;
}
.form-control {
    background-color: rgba(255, 255, 255, 0);
    color: white;
    border-radius: 0;
    border:  rgba(255, 255, 255, 0);
    padding: 1vw 0vw;
    /* border-bottom:  white 1px solid; */
}
.form-control:focus {
    background-color: rgba(255, 255, 255, 0);
    /* color: white; */
    box-shadow: none;
    border-color: rgba(255, 255, 255, 0);
}
.form-control::placeholder {
    /* color: white; */
    opacity: 1;
    font-weight: 100;
}
.form-control2 {
    background-color: rgba(255, 255, 255, 0);
    color: black;
    border-radius: 0;
    border:  rgba(255, 255, 255, 0);
    padding: 1vw 0vw;
    /* border-bottom:  white 1px solid; */
}
.form-control2::placeholder {
    color: black;
    opacity: 1;
    font-weight: 300;
}
.pill {
    /* min-width: 100px; */
    border-radius: 10vw;
    width: fit-content;
    /* color: white; */
    padding: 0.5vw 1.5vw;
    font-weight: 400;
    font-size: 1vw;
    justify-content: center;
}
.pill:hover {
  filter: brightness(85%);
}
.lpill {
  color: white;
}
.lpill:hover {
  color: #000;
}
.dpill {
  color: black;
}
.dpill:hover {
  color: white;
}
.SClist-wrapper {
overflow-y:hidden;
overflow-x:hidden;
  height: 80vh;
  scrollbar-width: none;
}
.SClist {
  display: flex;
  gap: 8px;
  padding: 0px;
  list-style: none;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
   /* Hide scrollbar in Firefox */
  scrollbar-width: none;

  /* Hide scrollbar in IE and Edge */
  -ms-overflow-style: none;
}
.SClist::-webkit-scrollbar {
  display: none;
}
.SCitem {
  flex-shrink: 0;
  width: 80%;
  height: 80vh;

  background-color: #FFF;

  scroll-snap-align: bottom;
}

.SCcontent {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;

  font-family: sans-serif;
  font-size: 64px;
  font-weight: bold;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  /* object-position: bottom; */
}

.scbtn1 {
  /* display: block; */
  z-index: 15;
  position: relative;
  border: red solid 1px;
  width:  20dvh;
  height: 80dvh;
  /* top:-84dvh; */
  float: left;
  background-color: rgba(0, 0, 0, 0);
}
.scbtn2 {
  /* display: ; */
  z-index: 15;
  position: relative;
  border: red solid 1px;
  width:  20dvh;
  height: 80dvh;
  /* top:-84dvh; */
  float: right;
  background-color: rgba(0, 0, 0, 0);
}
.is1 {  background-image: url('../img/is1.png');}
.is2 {  background-image: url('../img/is2.png');}
.is3 {  background-image: url('../img/is3.png');}
.is4 {  background-image: url('../img/is4.png');}
.is5 {  background-image: url('../img/is5.png');}
.is6 {  background-image: url('../img/is6.png');}

/*  PP1 SC */
.pp1sc1 {  background-image: url('../img/pp/pp1/SC1.png');}
.pp1sc2 {  background-image: url('../img/pp/pp1/SC2.png');}
.pp1sc3 {  background-image: url('../img/pp/pp1/SC3.png');}
.pp1sc4 {  background-image: url('../img/pp/pp1/SC4.png');}
.pp1sc5 {  background-image: url('../img/pp/pp1/SC5.png');}
.pp1sc6 {  background-image: url('../img/pp/pp1/SC6.png');}
.pp1sc7 {  background-image: url('../img/pp/pp1/SC7.png');}
.pp1sc8 {  background-image: url('../img/pp/pp1/SC8.png');}

/* PP4 SC */
.pp4sc1 {  background-image: url('../img/pp/pp4/SC1.png');}
.pp4sc2 {  background-image: url('../img/pp/pp4/SC2.png');}
.pp4sc3 {  background-image: url('../img/pp/pp4/SC3.png');}
.pp4sc4 {  background-image: url('../img/pp/pp4/SC4.png');}
.pp4sc5 {  background-image: url('../img/pp/pp4/SC5.png');}
.pp4sc6 {  background-image: url('../img/pp/pp4/SC6.png');}
footer {color: white; width: 100%;}
.ctainfo {
font-weight: 200;
font-size: 1.2vw;
}
/* Apply transitions and initial hidden state to the arrow */
.aro {
    opacity: 1; /* Start hidden */
    transform: scale(1.2); /* Optional: Start slightly smaller for a subtle zoom effect */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Smooth transition for both properties */
}
.jvtab { margin: 0.5vh 0;}
.jvtab:hover .arow{opacity: 1;}
.arow {opacity: 0;};
.row.uline:hover .aro { /* Target the .aro when its parent .row.uline is hovered */
    opacity: 1; /* Make it visible */
    transform: scale(1.5); /* Scale it to its normal size (or whatever desired final size) */
}

/* Optional: If you want the arrow to scale further or have a different effect on hover of the arrow itself */
/* .aro:hover {
    transform: scale(1.2);
} */
 .hbold:hover { color: #000; font-weight: 900;}
.uline {
        border-bottom: var(--c2) 1px solid;
}
.pp{
    /* width: 100%;
  height: 100vh; */
  background-image: linear-gradient(rgba(252, 252, 252, 0), rgba(0, 0, 0, 0.5)),url('../img/hero/pp.png');
  /* background-image: url('../img/new/Propertypage.png'); */
  background-size:cover;
  background-position: top;
  background-repeat: no-repeat;
  /* background-size: 110%; */
}
.pp1 {background-image: 
    linear-gradient(rgba(252, 252, 252, 0), rgba(0, 0, 0, 0.5)),
    url('../img/hero/pp1.png');background-repeat: no-repeat;background-size:cover;background-position: top;
}
.pp2 {background-image: 
    linear-gradient(rgba(252, 252, 252, 0), rgba(0, 0, 0, 0.5)),
    url('../img/hero/pp2.png');background-repeat: no-repeat;background-size:cover;background-position: top;
}
.pp3 {background-image: 
    linear-gradient(rgba(252, 252, 252, 0), rgba(0, 0, 0, 0.5)),
    url('../img/hero/pp3.png');background-repeat: no-repeat;background-size:cover;background-position: top;
}
.pp4 {background-image: 
    linear-gradient(rgba(252, 252, 252, 0), rgba(0, 0, 0, 0.5)),
    url('../img/hero/pp4.png');background-repeat: no-repeat;background-size:cover;background-position: top;
}
.pp5 {background-image: 
    linear-gradient(rgba(252, 252, 252, 0), rgba(0, 0, 0, 0.5)),
    url('../img/hero/pp5.png');background-repeat: no-repeat;background-size:cover;background-position: top;
}
.pp6 {background-image: 
    linear-gradient(rgba(252, 252, 252, 0), rgba(0, 0, 0, 0.5)),
    url('../img/hero/pp6.png');background-repeat: no-repeat;background-size:cover;background-position: top;
}
.jvimg{
    /* width: 60vw;  */
    /* height: 100vh;  */
    display: block; /* Remove any inline-block spacing issues */
    margin: 0 auto; /* Center the image if its width is less than container */
}
.nav-item{
    margin: 0.5vw;
    /* border-bottom:var(--c1) solid 2px;    */
    
}
.nav-link{
    color: #fff;
    font-size: 2vh;
    /* font-weight: 500; */
}
.nav-link:hover {
    color: var(--c1);
    font-weight: 600;
}
.carousel {
    background: #EEE;
  }
  
  .carousel-cell {
    margin-right: 20px;
    overflow: hidden;
  }
  
  .carousel-cell img {
    display: block;
    height: 200px;
  }
  
  @media screen and ( min-width: 768px ) {
    .carousel-cell img {
      height: 400px;
    }
  }
  .tshade {
    font-size: 1vw;
    /* text-shadow: 2px 3px rgba(8, 8, 8, 0.226) */
  }
  .radiobtn {
    color: black;
    border-color: #000;
    background-color: black;
  }
  input[type="radio"] {
    appearance: none;
    width: 2vh;
    height: 2vh;
    border: 0.5vh solid black;
    border-radius: 50%;
    /* outline: none; */
    background-color: black;
    cursor: pointer;
    position: relative;
    /* top: 0.1vw; */
}
input[type="radio"]:checked {
    background-color: rgb(255, 255, 255);
    border: 0.5vh solid var(--c1);
}
.bqf { font-size: 1.2vw;}

.menubox {
    transition: background-color 0.3s ease;
    background-color: transparent;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 25;

    
  }
  
  .menubox .nav-link {
    color: white; /* default color */
    transition: color 0.3s ease;
    
  }
  
  .menubox.scrolled {
    background-color: white;
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */
  }
  
  .menubox.scrolled .nav-link {
    color: black;
  }
.title-fp{  font-size: 8vh;  font-family:'Kaisei Decol', sans-serif ;}
.title-fpsub{  font-size: 3vh;}

/* MOBILE VIEW */
@media only screen and  (min-width: 200px) and (max-width: 600px) {
    * {font-size: 2vh;}
    .menubox {
    /* transition: background-color 0.3s ease; */
    background-color: #fff;color: #000;
  }
  .menubox .nav-link {color: #000;}
    .hero { border: green solid 0;  }
    .herotxt {font-size: 3.5vh;}
    .cent { align-items: center;align-self: center; align-content: center; text-align: center;}
    .hlogo {        max-width:  50%;align-self: center;      }
    .pill {font-size: 1.6vh; padding: 1vh 2vh ; }
    .ctainfo {font-size: 2vh; font-weight: 200; padding: 0; }
    .ql {font-size: 1.1vh;}
    .flogo {max-width: 80%; align-self: center;}
    .bi {        width: auto;        height: auto;    }
    /* .form-control {padding: 3vw 3vw;} */
    .wtxt {font-size: 3vh;}
    .ctxt {font-size: 2.5vh; padding: 0 0;margin: 0 0;}
    .small {padding: 2vw 0;font-size: 1.8vh;} /*  footer address*/
    .cpw {text-align: start; font-size: 1.5vh;margin: 0vh 1vh ; }
    .cpw a {font-size: 1.5vh; text-align: start; color: #fff;}
    .br {display: block;}
    .brbig {display: none;}
    .bqf { font-size: 3vh;}
    .jvimg{width: 100%;   /* Make it fill the width of its parent column */    height: 100%;}
    .tshade {font-size: 1.7vh;}
    .title {}
    .title-sub{font-size: 4vh;}
    .title-p{font-size: 1.8vh;font-family: 'Hanken Grotesk', sans-serif;letter-spacing: 1}
    .title-tag{font-size: 2.2vh;color: var(--c1);font-family: 'Hanken Grotesk', sans-serif;}
    .welcome {font-size: 4vh;}
    .txt0{font-size: 9vh;}
    .txt1{font-size: 4vh;}
    .txt2{font-size: 3.5vh;}
    .txt3{font-size: 2.5vh;}
    .txt4{font-size: 1.5vh;}
    .txt5 {font-size: 1.2vh;}
    /* .txt1{font-size: 5vh;}
    .txt2 {font-size: 5vh;}
    .txt3 {font-size: 3vh;}
    .txt4 {font-size: 2vh;}
    .txt5 {font-size: 1.5vh;} */
    .fp1{background-position: 57% ; background-position-y: bottom; background-size: auto;min-height: 225dvw;
    background-image: url('../img/fpm.png');
    background-size:cover;
    background-position: top;
    background-repeat: no-repeat;}
    .title-fp{  font-size: 4vh;}
    .title-fpsub{  font-size: 1.9vh; font-weight: 600;}
    .cpw-line {border-top: #aaa 1px solid; }
    .ovtxt1 {font-size:3vh;}
    .ovtxt2 {font-size:2.2vh; }
    .ovtxt3 {font-size:1.8vh;}
    .test {font-size: 3.8vh;}
    .is1m {  background-image: url('../img/is1m.png');}
    .is2m {  background-image: url('../img/is2m.png');}
    .is3m {  background-image: url('../img/is3m.png');}
    .is4m {  background-image: url('../img/is4m.png');}
    .is5m {  background-image: url('../img/is5m.png');}
    .is6m {  background-image: url('../img/is6m.png');}
    .abthero {background-image: url('../img/hero/abtm.png');}
    .jvhero {background-image: url('../img/hero/jvm.png');}
    .ctahero {background-image: url('../img/hero/ctam.png');}
    .pp {background-image: url('../img/hero/ppm.png');}
    .pp1 {background-image: url('../img/hero/pp1m.png');}
    .pp2 {background-image: url('../img/hero/pp2m.png');}
    .pp3 {background-image: url('../img/hero/pp3m.png');}
    .pp4 {background-image: url('../img/hero/pp4m.png');}
    .pp5 {background-image: url('../img/hero/pp5m.png');}
    .pp6 {background-image: url('../img/hero/pp6m.png');}
    .form-check-label {font-size: 1.5vh;}
    .pp4sc1 {  background-image: url('../img/pp/pp4/SC1M.png');}
    .pp4sc2 {  background-image: url('../img/pp/pp4/SC2M.png');}
    .pp4sc3 {  background-image: url('../img/pp/pp4/SC3M.png');}
    .pp4sc4 {  background-image: url('../img/pp/pp4/SC4M.png');}
    .pp4sc5 {  background-image: url('../img/pp/pp4/SC5M.png');}
    .pp4sc6 {  background-image: url('../img/pp/pp4/SC6M.png');}
    
    .pp1sc1 {  background-image: url('../img/pp/pp1/SC1M.png');}
    .pp1sc2 {  background-image: url('../img/pp/pp1/SC2M.png');}
    .pp1sc3 {  background-image: url('../img/pp/pp1/SC3M.png');}
    .pp1sc4 {  background-image: url('../img/pp/pp1/SC4M.png');}
    .pp1sc5 {  background-image: url('../img/pp/pp1/SC5M.png');}
    .pp1sc6 {  background-image: url('../img/pp/pp1/SC6M.png');}
    .pp1sc7 {  background-image: url('../img/pp/pp1/SC7M.png');}
    .jvp {font-size: 2.5vh; margin-bottom: 2vh;}
    .jvpp {font-size: 1.6vh; }
    .jvft {font-size: 1.6vh;}
    .jvpt {font-size: 1.8vh;}
    .pdv {font-size: 2vh; font-weight: 600;}
    .PDbody {font-size: 1.6vh; ;}
    .abtp{font-size: 1.9vh;}
    .jv-p{font-family: 'Hanken Grotesk', sans-serif; font-size: 1.9vh;}
    .abt3ico {font-size: 5vh;}
    .abt3it{font-size: 1.9vh;}
    /* .pp1sc8 {  background-image: url('../img/pp/pp4/SC8M.png');} */
    /* .im1 { src: url('img/hero/im1.png');}
    .im2 {src: url('img/hero/im2.png');}
    .im3 {src: url('img/hero/im3.png');}
    .im4 {src: url('img/hero/im4.png');} */
  }