.kozuka{
    font-family: kozuka Mincho Pro !important;
}
.grey{
    color: grey;
}
 .SpinnerLoading {
      color: #ffcb08;
  }



  @keyframes SpinnerLoading {
      0% {
          color: #000000;
          transform: rotate(0deg);
      }

      50% {
          color: #ffcb08;
      }

      100% {
          color: #000000;
          transform: rotate(360deg);
      }
  }




  @supports(animation-timeline: view()) {

      .LogoLoading {
          opacity: 1;
          animation: LogoLoading 4s ease-in-out;
          animation-iteration-count: infinite;
      }

      .SpinnerLoading {
          opacity: 1;
          animation: SpinnerLoading 1s linear;
          animation-iteration-count: infinite;
      }


  }

  .nav-item:hover>.nav-link {
      color: #ffcb08;
  }

  #HomeSlider {
      margin-top: 0rem;
  }

  #HomeSlider .carousel { 
      max-height: 21.875rem;
      overflow: hidden;
  }

  #InPageSlider {
      margin-top: 0rem;
  }

  #InPageSlider .carousel {
      max-height: 220px;
      overflow: hidden;
  }

  .item img {
      position: absolute;
      top: 0;
      left: 0;
      max-height: 350px;
  }

  .container-fluid {
      --bs-gutter-x: 0rem;
  }

  .fs-6 {
      font-size: 0.8rem !important;
  }

  section {
      margin-top: 3.2rem;
  }
  .Browse-Sale{ 
    margin-top: 0rem;
  }
  .BrowseListing .card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
  }
  .BrowseListing .card-title{ 
    margin-bottom: 0;
    height: 3rem;
    overflow: hidden;
  }

  .SmallCirclex {
      --bs-aspect-ratio: 50%;
  }

  .lg-rounded-circle {
      border-radius: 0%;
  }

  @media (min-width: 992px) {

      .SmallCirclex {
          --bs-aspect-ratio: 100%;
      }

      .lg-rounded-circle {
          border-radius: 50%;
      }
  }

  @media (max-width: 768px) {
      section {
          margin-top: 2rem;
      }
  }

  :root {
      --HHyellow: #ffcb08;
      --HHorange: #fe6000;
  }

  .border-HHyellow {
      transition: ease-in-out 0.3s;
      border-color: var(--HHyellow) !important;
  }

  .featprop:hover .border-HHyellow {

      border-color: var(--HHorange) !important;
  }

  #HotProp {
      min-width: 10vw;
  }

  #HotProp .card {
      background: none;
  }

  #HotProp .card-body {
      padding: 2rem 2rem !important;
  }


  #HotProp .card-title {
      font-size: 1rem !important;
      /* font-size: 1.5rem !important; */
      text-align: center;
      font-weight: bold;
      min-height: 100%;
      max-height: 100%;
      overflow: hidden;
  }
.SCholder{
    margin-left:-3.5rem;
}
  @media (max-width: 988px) {

    .SCholder{
        margin-left:auto;
    }

  }
  @media (min-width: 988px) {

      #HotProp .card-body {
          padding: 1.0rem 1rem !important;
      }

      #HotProp .card-title {
          font-size: 1rem !important;
      }
  }

  @media (min-width: 1024px) and (max-width: 1324px) {

    #HotProp .card-body {
        padding: 1.6rem 1rem !important;
    }

    #HotProp .card-title {
        font-size: 1rem !important;
    }
}

@media (min-width: 1324px) {

    #HotProp .card-body {
        padding: 2.0rem 2rem !important;
    } 
}

  #HotProp .card-text {
      /* padding-top: 0.5vh; */
      font-size: 1rem !important;
      text-align: center;
      color: #000;
      transition: ease-in-out 0.4s;
  }

  .featprop:hover .card-text {

      color: var(--HHorange) !important;
  }




  #HotProp .carousel-control-next,
  #HotProp .carousel-control-prev {
      color: var(--HHyellow) !important;
      top: auto !important;
      background: none !important;
      width: 10%;
      top: 22rem !important;
  }

  #HotProp .carousel-control-next {
      right: auto !important;
      left: 15%;
  }

  #HotProp .carousel-control-prev {
      left: 5%;
  }

  .SmallCircle {
      width: 18rem;
      height: 18rem;
  }

  .BigCircle {
      width: 22rem;
      height: 22rem;
  }

  #MiddleSearch .BigCircleDiv {

      position: relative;
  }

  .btn-circle.btn-xl {
      background-color: var(--HHyellow);
      border-color: var(--HHyellow);
      color: #000;
  }

  .btn-circle.btn-xl:hover:NOT(.active) {
      color: var(--HHyellow);
      background-color: #000;
      border-color: #000;
      opacity: 1;
  }

  .btn-xl {
      opacity: 0.7;
  }

  .btn-xl.active {
      opacity: 1;
  }

  .btn-circle.btn-xl { 
    width: 7.1rem;
    height: 7.1rem;
    padding: 1rem 1rem;
    border-radius: 10rem;
    font-size: 1rem;
    text-align: center;
    line-height: 1rem;
    font-weight: bold;


  }

  #FeaturedPropery li {

      max-height: 5rem;
      overflow: hidden;
  }

  #FeaturedPropery li:has(.active) {

      max-height: 17rem;
      overflow: hidden;
  }

  #FeaturedPropery .nav-tabs {
      border: none;
  }

  .midBubble {
      position: relative;
      top: -3.1rem;
      color: var(--HHyellow);
  }

  #HappyHomeTopNav .nav-link {
      font-size: 0.8em !important;
      color: var(--HHyellow);
      letter-spacing: 0.1rem;
  }

  #HappyHomeTopNav .nav-link i {
      color: #999999;
  }

  #HappyHomeTopNav .nav-link:hover {
      color: #000;
  }


  #HappyHomeNav .nav-item {
      padding-left: 0rem;
      padding-right: 0rem;
      vertical-align: text-top;
      text-align: auto;
  }

  #HappyHomeNav .nav-link {
      font-size: 1.1rem !important;
      color: #0e0e0e;
      letter-spacing: 0.05rem;
  }

  #HappyHomeNav .nav-item:not(:last-child) .nav-link::after {
      content: "|";
  }


  #HappyHomeNav .nav-item span {
      padding-top: 0.7rem;
      font-size: 1em !important;
      color: #0e0e0e;
      letter-spacing: 0.05rem;
      vertical-align: bottom;
      display: inline-flex;
  }

  #HappyHomeNav .nav-link:hover {
      color: var(--HHyellow);
  }


  .search-title {
      color: var(--HHyellow);
      text-transform: uppercase;
      font-size: 2.4rem; 
      font-weight: 100;
      line-height: 3rem;;
  }

  .search-title i {
      font-size: 2rem;
      line-height: 3rem;
      color: #e7e7e7;
  }


  .search-subtitle {
      color: #e7e7e7;
      text-transform: capitalize;
      font-size: 1.8rem;
  }

  .search-subtitle i {
      font-size: 1.8rem;
      color: #e7e7e7;
      background-color: var(--HHyellow);
      padding: 0.25rem;
      width: 2rem;
      height: 2rem;

  }

  @media (max-width: 988px) {

      #HappyHomeNav .nav-item:not(:last-child) .nav-link::after {
          content: "";
      }

      #HappyHomeNav .nav-link {
          font-size: 1.2em !important;
          color: #0e0e0e;
          letter-spacing: 0.05rem;
          text-align: left !important;
      }

      .search-title {
          font-size: 1.4rem; 
          font-weight: 100;
          padding: 0rem;
      }

      .search-title i {
          font-size: 1.4rem;
      }

      .search-subtitle {
          font-size: 1.3rem;
          font-weight: 100;
          padding: 0rem;
      }

      .search-subtitle i {
          font-size: 0.8rem;
          color: #e7e7e7;
          background-color: var(--HHyellow);
          padding: 0.19rem;
          width: 1rem;
          height: 1rem;
          font-weight: 100;

      }
  }


  .search-inputs-tabs label {
      border-right: 1px solid #000;
      background-color: #e7e7e7;
      padding: 0.5rem 0.5rem;
  }

  .search-inputs-tabs .active {
      background-color: var(--HHyellow);
  }

  .search-inputs-btabs label {
      border-right: 1px solid #000;
      background-color: #e7e7e7;
      padding: 0.5rem 0.5rem;
  }

  .search-inputs-btabs .active {
      background-color: var(--HHyellow);
  }

  .dealtype,
  .clienttype {
      visibility: hidden;
  }

  #TopBubble {
      margin-top: -5rem;
      z-index: 10;
      position: relative;
  }

  #TopBubble a {
      color: #000 !important;
  }

  .mutedbubble {
    height: 5rem;
    width: 7.15rem;
      overflow: hidden;
  }

  .activebubble {
    height: 5rem;
    width: 7.15rem;
  }

  .TopBubbleRow {
      display: flex !important;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-end;
  }

  .SlidBubble {
      background-color: var(--HHyellow);
      width: 229px;
      height: 229px;
      margin-right: 50px;
      vertical-align: middle;
      position: relative;
  }

  .SlidBubble p {
      padding: 4rem 0.5rem;
      text-transform: uppercase;
      font-size: 2rem;
      font-weight: 700;
      line-height: 2.5rem;
  }

  .Boxes-Line .search-inputs-tabs {
      font-size: 1rem;
  }
 
  #FilteredLocation div{
      text-align: left;
  }
  #FilteredLocation label{
      background-color: transparent; 
      border: 0px;
      padding: 0px;
  } 


  @media (max-width: 3300px) {


      .Boxes-Line .search-inputs-tabs {
          font-size: 1rem;
          padding: 0px;
      }

      .SlidBubble {
          background-color: var(--HHyellow);
          width: 7.1rem;
          height: 7.1rem;
          margin-right: 0.5rem;
          vertical-align: middle;
          position: relative;
      }

      .SlidBubble p {
          padding: 1rem;
          text-transform: uppercase;
          font-size: 1rem;
          font-weight: bold;
          line-height: 1rem;
      } 
  }

  @media (max-width: 988px) {

      .Boxes-Line .search-inputs-tabs {
          font-size: 1rem;
      }
 
      .TopBubbleRow {
          justify-content: center;
      }

      #hhllowtab {
          scale: 0.9;
      }

      .midBubble {
          scale: 0.9;
      }
 
      #HotProp .carousel-control-next,
      #HotProp .carousel-control-prev {
          top: 0rem !important;
      }

      #MiddleSearch .BigCircleDiv {
          left: 0;
      }

      .SmallCircle {
          width: 20rem;
          height: 20rem;
      }

      .BigCircle {
          width: 20rem;
          height: 20rem;
      }

      #TopBubble {
          margin-top: 0vw;
          margin-bottom: 0vw;
      }
 
      .SlidBubble {
          background-color: var(--HHyellow);
          width: 12vw;
          height: 12vw;
          margin-right: 0.5vw;
          vertical-align: middle;
          position: relative;
      }

      .SlidBubble p {
          padding: 2.48vw 0.5vw;
          text-transform: uppercase;
          font-size: 2vw;
          font-weight: 700;
          line-height: 1.9vw;
      }
  }

  .search-inputs-tabs .row {
      --bs-gutter-x: 0.5rem
  }

  .search-inputs-btabs .row {
      --bs-gutter-x: 0.5rem
  }


  .Boxes {
      border-color: var(--HHyellow);
  }



  .Boxes-Bullet {
      color: var(--HHyellow);
      font-size: 0.7rem;
      text-align: start;
      vertical-align: middle;
  }

  .Boxes-Line {
      font-size: 1rem;
      text-align: start;
      vertical-align: middle;
  }

  #HotPropWidget {
      margin-bottom: 3rem;
  }

  #HotPropWidget .carousel-control-next,
  #HotPropWidget .carousel-control-prev {
      color: var(--HHyellow) !important;
      align-items: end;
      width: 76% !important;
      bottom: -3rem;
      height: 2rem;
      top: auto;
      padding: 0;
      margin: 0;
  }

  #HotPropMobileWidget {
    margin-bottom: 3rem;
}

#HotPropMobileWidget .carousel-control-next,
#HotPropMobileWidget .carousel-control-prev {
    color: var(--HHyellow) !important;
    align-items: end;
    width: 76% !important;
    bottom: -3rem;
    height: 2rem;
    top: auto;
    padding: 0;
    margin: 0;
}
  .contactinfo h5,
  .contactform h5 {
      background-color: #e7e7e7;
  }

  .propoverview h5 {
      background-color: #e7e7e7;
      text-transform: uppercase;
      font-weight: normal;
      font-size: 0.9rem;
      padding: 0.5rem 0.2rem;
  }

  .pagetitle h1 {
      font-size: 1.8rem;
      font-weight: bold;
  }

  .listsep {
      border-color: #fff;
  }

  .ListInfoRow {
      position: relative;
  }

  .ListInfoAction {
      position: absolute;
      bottom: 0;
      width: 100%;
  }

  .page-link {
      color: #000;
      ;
      border-color: var(--HHyellow)
  }

  .active>.page-link,
  .page-link.active {
      color: var(--HHyellow);
      background-color: #000;
      border-color: var(--bs-pagination-active-border-color);
  }


  .card-img-top-home {

      height: 250px;
      object-fit: cover;
      width: 100%;
  }

   
.btn-xl-noopacity{
    opacity: 1;
}