*{

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

    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 1vw;
    font-weight: 400;
    font-style: normal;
    
    /* border: solid 1px red; */
    
}

.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: -1;
    background-color: var(--w1);
    width: 100%;
    /* background-color: #d8d8d8; */
}
body{

    background-color: var(--w1);
    overflow-x: hidden;
}

section{
    
    background-color: var(--w1);
    min-height: 100dvh;
    max-width: 100dvw;
}
a {
  color: inherit;
  text-decoration: none; /* optional */
}
.pad{
    padding: 0px 8vw;
}
.cent { align-items: center;align-self: center; align-content: center; text-align: center;}
.hero {
  /* width: 100%;
  height: 100vh; */
  background-image: url('../img/BG1.png');
  background-size:cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  /* background-size: 110%; */
}
.fp{
  /* width: 100%;
  height: 100vh; */
  background-image: url('../img/FP1.jpg');
  background-size:cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  /* background-size: 110%; */
}
.title {font-family: 'Kaisei Decol', sans-serif;
font-size: 3vw;}
.title-sub{font-family: 'Hanken Grotesk', sans-serif;
}
.title-p{font-family: 'Hanken Grotesk', sans-serif; font-size: 1.5vw;}
.title-tag{font-size: 1vw;color: var(--c1);font-family: 'Hanken Grotesk', sans-serif;}
.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;
    
}
.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;
    /* height: 100%; */
}
.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: black;
    padding: 0.5vw 1vw;
    font-weight: 400;
    font-size: 1vw;
    justify-content: center;
}
.ctainfo {
font-weight: 200;
font-size: 1.2vw;
}
/* Apply transitions and initial hidden state to the arrow */
.aro {
    opacity: 0; /* Start hidden */
    transform: scale(0.8); /* Optional: Start slightly smaller for a subtle zoom effect */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Smooth transition for both properties */
}
.arow {opacity: 1};
/* When the parent row is hovered, target the .aro inside it */
.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;}
.uline {
        border-bottom: var(--c2) 1px solid;
}
.pp1 {background-image: 
    linear-gradient(rgba(252, 252, 252, 0.1), rgba(0, 0, 0, 0.5)),
    url('../img/PP1.jpg');
}
.pp2 {background-image: 
    linear-gradient(rgba(252, 252, 252, 0.1), rgba(0, 0, 0, 0.5)),
    url('../img/PP2.jpg');
}
.pp3 {background-image: 
    linear-gradient(rgba(252, 252, 252, 0.1), rgba(0, 0, 0, 0.5)),
    url('../img/PP3.jpg');
}
.pp4 {background-image: 
    linear-gradient(rgba(252, 252, 252, 0.1), rgba(0, 0, 0, 0.5)),
    url('../img/PP4.jpg');
}
.pp5 {background-image: 
    linear-gradient(rgba(252, 252, 252, 0.1), rgba(0, 0, 0, 0.5)),
    url('../img/PP5.jpg');
}
.pp6 {background-image: 
    linear-gradient(rgba(252, 252, 252, 0.1), rgba(0, 0, 0, 0.5)),
    url('../img/PP6.jpg');
}
.jvimg{
    width: 60vw; /* As per your original style */
    height: auto; /* Maintain aspect ratio normally */
    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;
}
.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: 1.3vw;
    /* 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: white;
    cursor: pointer;
    position: relative;
    /* top: 0.1vw; */
}
input[type="radio"]:checked {
    background-color: rgb(0, 0, 0);
}
.bqf { font-size: 1.2vw;}
/* MOBILE VIEW */
@media only screen and  (min-width: 200px) and (max-width: 600px) {
    * {font-size: 3vw;}
    .hero { border: green solid 0;  }
    .cent { align-items: center;align-self: center; align-content: center; text-align: center;}
    .hlogo {        max-width:  100%;align-self: center;      }
    .title {font-size: 8vw !important;}
    .title-sub{font-size: 12vw;}
    .title-p{font-size: 4vw;font-family: 'Hanken Grotesk', sans-serif;letter-spacing: 1.5px;}
    .title-tag{font-size: 3vw;color: var(--c1);font-family: 'Hanken Grotesk', sans-serif;}
    .pill {font-size: 3vw; padding: 1vw 2.5vw ; }
    .ctainfo {font-size: 3vw; font-weight: 200; padding: 0 0; margin-bottom: 3vh;}
    .flogo {max-width: 100%; align-self: center;}
    .bi {        width: auto;        height: auto;    }
    /* .form-control {padding: 3vw 3vw;} */
    .wtxt {font-size: 5vw;}
    .ctxt {font-size: 3vw; padding: 0 0;margin: 0 0;}
    .small {padding: 3vw 0;font-size: 3vw;}
    .cpw {text-align: center; font-size: 3vw;}
    .cpw a {font-size: 3vw;}
    .br {display: block;}
    .brbig {display: none;}
    .bqf { font-size: 3vw;}
    .jvimg{width: 100%;   /* Make it fill the width of its parent column */
        height: 100%;}
        .tshade {font-size: 3vw;}
  }