@font-face {
	font-family: "Font-1";
	src: url("../Fonts/Cairo-Medium.ttf");
  }
  @font-face {
    font-family: "Font-bold";
    src: url("../Fonts/Cairo-Bold.ttf");
    }
    @font-face {
      font-family: "Font-light";
      src: url("../Fonts/Cairo-Regular.ttf");
    }
    /*-- Margin Top --*/
.mt-5 {
    margin-top: 5px;
  }
  
  .mt-10 {
    margin-top: 10px;
  }
  
  .mt-15 {
    margin-top: 15px;
  }
  
  .mt-20 {
    margin-top: 20px;
  }
  
  .mt-25 {
    margin-top: 25px;
  }
  
  .mt-30 {
    margin-top: 30px;
  }
  
  .mt-35 {
    margin-top: 35px;
  }
  
  .mt-40 {
    margin-top: 40px;
  }
  
  .mt-45 {
    margin-top: 45px;
  }
  
  .mt-50 {
    margin-top: 50px;
  }
  
  .mt-55 {
    margin-top: 55px;
  }
  
  .mt-60 {
    margin-top: 60px;
  }
  
  .mt-65 {
    margin-top: 65px;
  }
  
  .mt-70 {
    margin-top: 70px;
  }
  
  .mt-75 {
    margin-top: 75px;
  }
  
  .mt-80 {
    margin-top: 80px;
  }
  
  .mt-85 {
    margin-top: 85px;
  }
  
  .mt-90 {
    margin-top: 90px;
  }
  
  .mt-95 {
    margin-top: 95px;
  }
  
  .mt-100 {
    margin-top: 100px;
  }
  
  .mt-105 {
    margin-top: 105px;
  }
  
  .mt-110 {
    margin-top: 110px;
  }
  
  .mt-115 {
    margin-top: 115px;
  }
  
  .mt-120 {
    margin-top: 120px;
  }
  
  .mt-125 {
    margin-top: 125px;
  }
  
  .mt-130 {
    margin-top: 130px;
  }
  
  .mt-135 {
    margin-top: 135px;
  }
  
  .mt-140 {
    margin-top: 140px;
  }
  
  .mt-145 {
    margin-top: 145px;
  }
  
  .mt-150 {
    margin-top: 150px;
  }
  
  /*-- Margin Bottom --*/
  .mb-5 {
    margin-bottom: 5px;
  }
  
  .mb-10 {
    margin-bottom: 10px;
  }
  
  .mb-15 {
    margin-bottom: 15px;
  }
  
  .mb-20 {
    margin-bottom: 20px;
  }
  
  .mb-25 {
    margin-bottom: 25px;
  }
  
  .mb-30 {
    margin-bottom: 30px;
  }
  
  .mb-35 {
    margin-bottom: 35px;
  }
  
  .mb-40 {
    margin-bottom: 40px;
  }
  
  .mb-45 {
    margin-bottom: 45px;
  }
  
  .mb-50 {
    margin-bottom: 50px;
  }
  
  .mb-55 {
    margin-bottom: 55px;
  }
  
  .mb-60 {
    margin-bottom: 60px;
  }
  
  .mb-65 {
    margin-bottom: 65px;
  }
  
  .mb-70 {
    margin-bottom: 70px;
  }
  
  .mb-75 {
    margin-bottom: 75px;
  }
  
  .mb-80 {
    margin-bottom: 80px;
  }
  
  .mb-85 {
    margin-bottom: 85px;
  }
  
  .mb-90 {
    margin-bottom: 90px;
  }
  
  .mb-95 {
    margin-bottom: 95px;
  }
  
  .mb-100 {
    margin-bottom: 100px;
  }
  
  .mb-105 {
    margin-bottom: 105px;
  }
  
  .mb-110 {
    margin-bottom: 110px;
  }
  
  .mb-115 {
    margin-bottom: 115px;
  }
  
  .mb-120 {
    margin-bottom: 120px;
  }
  
  .mb-125 {
    margin-bottom: 125px;
  }
  
  .mb-130 {
    margin-bottom: 130px;
  }
  
  .mb-135 {
    margin-bottom: 135px;
  }
  
  .mb-140 {
    margin-bottom: 140px;
  }
  
  .mb-145 {
    margin-bottom: 145px;
  }
  
  .mb-150 {
    margin-bottom: 150px;
  }
  
  /*-- Margin Left --*/
  .ml-5 {
    margin-left: 5px;
  }
  
  .ml-10 {
    margin-left: 10px;
  }
  
  .ml-15 {
    margin-left: 15px;
  }
  
  .ml-20 {
    margin-left: 20px;
  }
  
  .ml-25 {
    margin-left: 25px;
  }
  
  .ml-30 {
    margin-left: 30px;
  }
  
  .ml-35 {
    margin-left: 35px;
  }
  
  .ml-40 {
    margin-left: 40px;
  }
  
  .ml-45 {
    margin-left: 45px;
  }
  
  .ml-50 {
    margin-left: 50px;
  }
  
  .ml-55 {
    margin-left: 55px;
  }
  
  .ml-60 {
    margin-left: 60px;
  }
  
  .ml-65 {
    margin-left: 65px;
  }
  
  .ml-70 {
    margin-left: 70px;
  }
  
  .ml-75 {
    margin-left: 75px;
  }
  
  .ml-80 {
    margin-left: 80px;
  }
  
  .ml-85 {
    margin-left: 85px;
  }
  
  .ml-90 {
    margin-left: 90px;
  }
  
  .ml-95 {
    margin-left: 95px;
  }
  
  .ml-100 {
    margin-left: 100px;
  }
  
  .ml-105 {
    margin-left: 105px;
  }
  
  .ml-110 {
    margin-left: 110px;
  }
  
  .ml-115 {
    margin-left: 115px;
  }
  
  .ml-120 {
    margin-left: 120px;
  }
  
  .ml-125 {
    margin-left: 125px;
  }
  
  .ml-130 {
    margin-left: 130px;
  }
  
  .ml-135 {
    margin-left: 135px;
  }
  
  .ml-140 {
    margin-left: 140px;
  }
  
  .ml-145 {
    margin-left: 145px;
  }
  
  .ml-150 {
    margin-left: 150px;
  }
  
  /*-- Margin Right --*/
  .mr-5 {
    margin-right: 5px;
  }
  
  .mr-10 {
    margin-right: 10px;
  }
  
  .mr-15 {
    margin-right: 15px;
  }
  
  .mr-20 {
    margin-right: 20px;
  }
  
  .mr-25 {
    margin-right: 25px;
  }
  
  .mr-30 {
    margin-right: 30px;
  }
  
  .mr-35 {
    margin-right: 35px;
  }
  
  .mr-40 {
    margin-right: 40px;
  }
  
  .mr-45 {
    margin-right: 45px;
  }
  
  .mr-50 {
    margin-right: 50px;
  }
  
  .mr-55 {
    margin-right: 55px;
  }
  
  .mr-60 {
    margin-right: 60px;
  }
  
  .mr-65 {
    margin-right: 65px;
  }
  
  .mr-70 {
    margin-right: 70px;
  }
  
  .mr-75 {
    margin-right: 75px;
  }
  
  .mr-80 {
    margin-right: 80px;
  }
  
  .mr-85 {
    margin-right: 85px;
  }
  
  .mr-90 {
    margin-right: 90px;
  }
  
  .mr-95 {
    margin-right: 95px;
  }
  
  .mr-100 {
    margin-right: 100px;
  }
  
  .mr-105 {
    margin-right: 105px;
  }
  
  .mr-110 {
    margin-right: 110px;
  }
  
  .mr-115 {
    margin-right: 115px;
  }
  
  .mr-120 {
    margin-right: 120px;
  }
  
  .mr-125 {
    margin-right: 125px;
  }
  
  .mr-130 {
    margin-right: 130px;
  }
  
  .mr-135 {
    margin-right: 135px;
  }
  
  .mr-140 {
    margin-right: 140px;
  }
  
  .mr-145 {
    margin-right: 145px;
  }
  
  .mr-150 {
    margin-right: 150px;
  }
  
  /*-- Padding Top --*/
  .pt-5 {
    padding-top: 5px;
  }
  
  .pt-10 {
    padding-top: 10px;
  }
  
  .pt-15 {
    padding-top: 15px;
  }
  
  .pt-20 {
    padding-top: 20px;
  }
  
  .pt-25 {
    padding-top: 25px;
  }
  
  .pt-30 {
    padding-top: 30px;
  }
  
  .pt-35 {
    padding-top: 35px;
  }
  
  .pt-40 {
    padding-top: 40px;
  }
  
  .pt-45 {
    padding-top: 45px;
  }
  
  .pt-50 {
    padding-top: 50px;
  }
  
  .pt-55 {
    padding-top: 55px;
  }
  
  .pt-60 {
    padding-top: 60px;
  }
  
  .pt-65 {
    padding-top: 65px;
  }
  
  .pt-70 {
    padding-top: 70px;
  }
  
  .pt-75 {
    padding-top: 75px;
  }
  
  .pt-80 {
    padding-top: 80px;
  }
  
  .pt-85 {
    padding-top: 85px;
  }
  
  .pt-90 {
    padding-top: 90px;
  }
  
  .pt-95 {
    padding-top: 95px;
  }
  
  .pt-100 {
    padding-top: 100px;
  }
  
  .pt-105 {
    padding-top: 105px;
  }
  
  .pt-110 {
    padding-top: 110px;
  }
  
  .pt-115 {
    padding-top: 115px;
  }
  
  .pt-120 {
    padding-top: 120px;
  }
  
  .pt-125 {
    padding-top: 125px;
  }
  
  .pt-130 {
    padding-top: 130px;
  }
  
  .pt-135 {
    padding-top: 135px;
  }
  
  .pt-140 {
    padding-top: 140px;
  }
  
  .pt-145 {
    padding-top: 145px;
  }
  
  .pt-150 {
    padding-top: 150px;
  }
  
  /*-- Padding Bottom --*/
  .pb-5 {
    padding-bottom: 5px;
  }
  
  .pb-10 {
    padding-bottom: 10px;
  }
  
  .pb-15 {
    padding-bottom: 15px;
  }
  
  .pb-20 {
    padding-bottom: 20px;
  }
  
  .pb-25 {
    padding-bottom: 25px;
  }
  
  .pb-30 {
    padding-bottom: 30px;
  }
  
  .pb-35 {
    padding-bottom: 35px;
  }
  
  .pb-40 {
    padding-bottom: 40px;
  }
  
  .pb-45 {
    padding-bottom: 45px;
  }
  
  .pb-50 {
    padding-bottom: 50px;
  }
  
  .pb-55 {
    padding-bottom: 55px;
  }
  
  .pb-60 {
    padding-bottom: 60px;
  }
  
  .pb-65 {
    padding-bottom: 65px;
  }
  
  .pb-70 {
    padding-bottom: 70px;
  }
  
  .pb-75 {
    padding-bottom: 75px;
  }
  
  .pb-80 {
    padding-bottom: 80px;
  }
  
  .pb-85 {
    padding-bottom: 85px;
  }
  
  .pb-90 {
    padding-bottom: 90px;
  }
  
  .pb-95 {
    padding-bottom: 95px;
  }
  
  .pb-100 {
    padding-bottom: 100px;
  }
  
  .pb-105 {
    padding-bottom: 105px;
  }
  
  .pb-110 {
    padding-bottom: 110px;
  }
  
  .pb-115 {
    padding-bottom: 115px;
  }
  
  .pb-120 {
    padding-bottom: 120px;
  }
  
  .pb-125 {
    padding-bottom: 125px;
  }
  
  .pb-130 {
    padding-bottom: 130px;
  }
  
  .pb-135 {
    padding-bottom: 135px;
  }
  
  .pb-140 {
    padding-bottom: 140px;
  }
  
  .pb-145 {
    padding-bottom: 145px;
  }
  
  .pb-150 {
    padding-bottom: 150px;
  }
  
  /*-- Padding Left --*/
  .pl-5 {
    padding-left: 5px;
  }
  
  .pl-10 {
    padding-left: 10px;
  }
  
  .pl-15 {
    padding-left: 15px;
  }
  
  .pl-20 {
    padding-left: 20px;
  }
  
  .pl-25 {
    padding-left: 25px;
  }
  
  .pl-30 {
    padding-left: 30px;
  }
  
  .pl-35 {
    padding-left: 35px;
  }
  
  .pl-40 {
    padding-left: 40px;
  }
  
  .pl-45 {
    padding-left: 45px;
  }
  
  .pl-50 {
    padding-left: 50px;
  }
  
  .pl-55 {
    padding-left: 55px;
  }
  
  .pl-60 {
    padding-left: 60px;
  }
  
  .pl-65 {
    padding-left: 65px;
  }
  
  .pl-70 {
    padding-left: 70px;
  }
  
  .pl-75 {
    padding-left: 75px;
  }
  
  .pl-80 {
    padding-left: 80px;
  }
  
  .pl-85 {
    padding-left: 85px;
  }
  
  .pl-90 {
    padding-left: 90px;
  }
  
  .pl-95 {
    padding-left: 95px;
  }
  
  .pl-100 {
    padding-left: 100px;
  }
  
  .pl-105 {
    padding-left: 105px;
  }
  
  .pl-110 {
    padding-left: 110px;
  }
  
  .pl-115 {
    padding-left: 115px;
  }
  
  .pl-120 {
    padding-left: 120px;
  }
  
  .pl-125 {
    padding-left: 125px;
  }
  
  .pl-130 {
    padding-left: 130px;
  }
  
  .pl-135 {
    padding-left: 135px;
  }
  
  .pl-140 {
    padding-left: 140px;
  }
  
  .pl-145 {
    padding-left: 145px;
  }
  
  .pl-150 {
    padding-left: 150px;
  }
  
  /*-- Padding Right --*/
  .pr-5 {
    padding-right: 5px;
  }
  
  .pr-10 {
    padding-right: 10px;
  }
  
  .pr-15 {
    padding-right: 15px;
  }
  
  .pr-20 {
    padding-right: 20px;
  }
  
  .pr-25 {
    padding-right: 25px;
  }
  
  .pr-30 {
    padding-right: 30px;
  }
  
  .pr-35 {
    padding-right: 35px;
  }
  
  .pr-40 {
    padding-right: 40px;
  }
  
  .pr-45 {
    padding-right: 45px;
  }
  
  .pr-50 {
    padding-right: 50px;
  }
  
  .pr-55 {
    padding-right: 55px;
  }
  
  .pr-60 {
    padding-right: 60px;
  }
  
  .pr-65 {
    padding-right: 65px;
  }
  
  .pr-70 {
    padding-right: 70px;
  }
  
  .pr-75 {
    padding-right: 75px;
  }
  
  .pr-80 {
    padding-right: 80px;
  }
  
  .pr-85 {
    padding-right: 85px;
  }
  
  .pr-90 {
    padding-right: 90px;
  }
  
  .pr-95 {
    padding-right: 95px;
  }
  
  .pr-100 {
    padding-right: 100px;
  }
  
  .pr-105 {
    padding-right: 105px;
  }
  
  .pr-110 {
    padding-right: 110px;
  }
  
  .pr-115 {
    padding-right: 115px;
  }
  
  .pr-120 {
    padding-right: 120px;
  }
  
  .pr-125 {
    padding-right: 125px;
  }
  
  .pr-130 {
    padding-right: 130px;
  }
  
  .pr-135 {
    padding-right: 135px;
  }
  
  .pr-140 {
    padding-right: 140px;
  }
  
  .pr-145 {
    padding-right: 145px;
  }
  
  .pr-150 {
    padding-right: 150px;
  }
  
  .pr-155 {
    padding-right: 155px;
  }
  
  .pr-160 {
    padding-right: 160px;
  }
  
  .pr-165 {
    padding-right: 165px;
  }
  
  .pr-170 {
    padding-right: 170px;
  }
  
  .pr-175 {
    padding-right: 175px;
  }
  
  .pr-180 {
    padding-right: 180px;
  }
  
  .pr-185 {
    padding-right: 185px;
  }
  
  .pr-190 {
    padding-right: 190px;
  }
  
  .pr-195 {
    padding-right: 195px;
  }
  
  .pr-200 {
    padding-right: 200px;
  }
  
  *,
  *:before,
  *:after {
    padding: 0;
    margin: 0;
    box-sizing: inherit;
  }
  
  html {
    box-sizing: border-box;
    font-size: 100%;
  }
  
  html,
  body {
    min-height: 100%;
  }
  
  h1 a,
  h2 a,
  h3 a,
  h4 a,
  h5 a,
  h6 a {
    color: inherit;
  }
  
  ul {
    margin: 0;
    padding: 0;
  }
  
  ul li {
    list-style: none;
  }
  
  img {
    max-width: 100%;
    height: auto;
  }
  
  i {
    font-style: normal;
  }
  
  figure {
    margin: 0;
    padding: 0;
  }
  
  .clearfix:after {
    content: "";
    clear: both;
    display: table;
  }
  
  a,
  a:active,
  a:focus {
    text-decoration: none;
    outline: none;
    border: none;
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
  }
  label {
    color: #666;
    cursor: pointer;
    font-size: 14px;
    font-weight: normal;
  }
  
  a:focus,
  input:focus,
  textarea:focus,
  button:focus {
    outline: 0 solid;
  }
  
  body {
    font-family: "Font-1";
    color: #666666;
    font-size: 1rem;
  }
  
  p {
    line-height: 1.75;
  }
  
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: "Font-1";
    color: #000;
  }
  
  button {
    cursor: pointer;
  }
  
  button.button {
    background: transparent;
    border: 0px;
    transition: 0.3s;
  }
  
  ::-moz-selection {
    background: #313131;
    color: #fff;
    text-shadow: none;
  }
  
  ::selection {
    background: #313131;
    color: #fff;
    text-shadow: none;
  }
  
  h1 {
    font-size: calc(1.55rem + 3.6vw);
  }
  
  @media (min-width: 1200px) {
    h1 {
      font-size: 4.25rem;
    }
  }
  
  h2 {
    font-size: calc(1.46875rem + 2.625vw);
  }
  
  @media (min-width: 1200px) {
    h2 {
      font-size: 3.4375rem;
    }
  }
  
  h3 {
    font-size: calc(1.40625rem + 1.875vw);
  }
  
  @media (min-width: 1200px) {
    h3 {
      font-size: 2.8125rem;
    }
  }
  
  h4 {
    font-size: calc(1.35625rem + 1.275vw);
  }
  
  @media (min-width: 1200px) {
    h4 {
      font-size: 2.3125rem;
    }
  }
  
  h5 {
    font-size: calc(1.31875rem + 0.825vw);
  }
  
  @media (min-width: 1200px) {
    h5 {
      font-size: 1.9375rem;
    }
  }
  
  h6 {
    font-size: calc(1.275rem + 0.3vw);
  }
  
  @media (min-width: 1200px) {
    h6 {
      font-size: 1.5rem;
    }
  }
  
  .bgPrimary {
    background: #c7a400;
  }
  
  .bgSecondary {
    background: #0c7e37;
  }
  
  .shadeBg {
    background-color: #ffefec;
  }
  .fontPrimary {
    font-family: "Font-1";
  }
  
  .wh-100 {
    width: 100%;
    height: 100%;
  }
  
  .after-before {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
  }
  
  .hidden-transition {
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
  }
  
  .visible-transition {
    opacity: 1;
    visibility: visible;
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
  }
  
  .letter--spacing05 {
    letter-spacing: 0.05em;
  }
  
  .bg-centerized {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  .vertical-align-center {
    display: flex;
    align-items: center;
  }
  
  svg,
  path,
  .icon {
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
  }
  
  .border-top {
    border-top: 1px solid rgba(136, 146, 165, 0.25);
  }
  
  .container {
    max-width: 1314px;
  }
  
  .container--custom {
    max-width: 1320px;
  }
  
  .bbb, .review__box {
    background: #fff;
    border: 1px solid #f1f1f1;
    box-shadow: 0px 10px 15px rgba(221, 221, 221, 0.15);
  }

.mask--about {
    position: absolute;
    top: 0;
    z-index: -1;
    left: -11px;
    padding: 1px;
  }
  
  @media (max-width: 1199px) {
    .mask--about {
      left: -30%;
    }
  }
  
  @media (max-width: 991px) {
    .mask--about {
      display: none;
    }
  }
  
  .mask--about .mask__overlay {
    position: absolute;
    left: 2px;
    top: -1px;
  }
  .mask--review .mask__overlay {
    position: absolute;
    left: -3px;
    top: -1px;
    transform: scale(1.007);
  }
  
  @media (max-width: 1199px) {
    .mask--review {
      display: none;
    }
  }
  
  .mask-aboutBack {
    position: absolute;
    left: 0;
    top: 66%;
    z-index: -11;
  }
  
  @media (max-width: 1199px) {
    .mask-aboutBack {
      left: -30%;
    }
  }
  
  @media (max-width: 991px) {
    .mask-aboutBack {
      display: none;
    }
  }
  
  .color-title {
    color: #0d0d0d;
  }
  
  @-webkit-keyframes toBottomFromTop {
    49% {
      transform: translateY(-100%);
    }
    50% {
      opacity: 0;
      transform: translateY(100%);
    }
    51% {
      opacity: 1;
    }
  }
  
  @keyframes toBottomFromTop {
    49% {
      transform: translateY(-100%);
    }
    50% {
      opacity: 0;
      transform: translateY(100%);
    }
    51% {
      opacity: 1;
    }
  }
  
  .tag {
    background-color: #c7a400;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    padding: 2.5px 11px;
  }
  
  .gx-35 {
    --bs-gutter-x: 2.188rem;
  }
  
  @media (max-width: 1666px) {
    .gx-35 {
      --bs-gutter-x: 1.5rem;
    }
  }
  
  .gx-50 {
    --bs-gutter-x: 3.125rem;
  }
  
  @media (max-width: 1666px) {
    .gx-50 {
      --bs-gutter-x: 1.5rem;
    }
  }
  
  .swiper-slide:focus-visible {
    outline: none;
  }
  
  .gray-bg {
    background: #f7f7f7;
  }
  
  .sectionButton--right {
    text-align: right;
  }
  
  @media (max-width: 991px) {
    .sectionButton--right {
      text-align: left;
    }
  }
  
  .sectionShape {
    position: absolute;
    z-index: 1;
    display: flex;
    right: 0;
    left: 0;
    width: 100%;
  }
  
  .sectionShape--top {
    top: 0;
  }
  
  .sectionShape--bottom {
    bottom: 0;
  }
  
  .innerWrapper {
    padding: 24px;
    border: 1px solid #f4f4f4;
    background-color: #fff;
  }
  
  .innerWrapperSidebar {
    padding: 35px;
    border: 1px solid #f4f4f4;
    background-color: #fff;
  }
  
  @media (max-width: 991px) {
    .innerWrapperSidebar {
      padding: 15px;
    }
  }
  
  .image-saturation {
    filter: saturate(0);
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
  }
  
  .hoverStyle:hover .image-saturation {
    transform: scale(1.1);
    filter: saturate(1);
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
  }
  
  .ourHr {
    background-color: #f1f1f1;
    opacity: 1;
  }
  
  .mb-24 {
    margin-bottom: 24px;
  }

  
  /*---------------------------------------------------*/
  /*	mouse cursor animation
  /*---------------------------------------------------*/
  .mouseCursor {
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: none;
    border-radius: 50%;
    transform: translateZ(0);
    visibility: hidden;
  }
  
  .cursor-inner {
    margin-left: -3px;
    margin-top: -3px;
    width: 6px;
    height: 6px;
    z-index: 10000001;
    background-color: #c7a400;
    transition: width 0.3s ease-in-out, height 0.3s ease-in-out,
   margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
  }
.cursor-inner.cursor-hover {
    margin-left: -30px;
    margin-top: -30px;
    width: 60px;
    height: 60px;
    background-color: #c7a400;
    opacity: 0.2;
  }
  
  .cursor-outer {
    margin-left: -15px;
    margin-top: -15px;
    width: 30px;
    height: 30px;
    border: 2px solid #c7a400;
    box-sizing: border-box;
    z-index: 10000000;
    opacity: 0.5;
    transition: all 0.08s ease-out;
  }
  
  .cursor-outer.cursor-hover {
    opacity: 0;
  }
  
  .mim_tm_all_wrap[data-magic-cursor="hide"] .mouseCursor {
    display: none;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    z-index: -1111;
  }
  
  @-webkit-keyframes slide-down {
    0% {
      opacity: 0;
      transform: translateY(-100%);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes slide-down {
    0% {
      opacity: 0;
      transform: translateY(-100%);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @media (min-width: 576px) {
    .progress-wrap.active-progress {
      opacity: 1;
    }
  }
  
  .progress-wrap {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    width: 2.3rem;
    height: 2.3rem;
    cursor: pointer;
    display: block;
    border-radius: 100%;
    box-shadow: inset 0 0 0 0.1rem rgba(128, 130, 134, 0.25);
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.75rem);
    transition: all 200ms linear, margin-right 0ms;
  }
  
  @media (prefers-reduced-motion: reduce) {
    .progress-wrap {
      transition: none;
    }
  }
  
  .progress-wrap.active-progress {
    visibility: visible;
    transform: translateY(0);
    opacity: 1;
  }
  
  .progress-wrap:after {
    position: absolute;
    content: "\f062";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    text-align: center;
    line-height: 2.3rem;
    font-size: 14px;
    color: #c7a400;
    left: 0;
    top: 0;
    height: 2.3rem;
    width: 2.3rem;
    cursor: pointer;
    display: block;
    z-index: 1;
    transition: all 200ms linear;
  }
  
  @media (prefers-reduced-motion: reduce) {
    .progress-wrap:after {
      transition: none;
    }
  }
  
  .progress-wrap svg path {
    fill: none;
  }
  
  .progress-wrap svg.progress-circle path {
    stroke: #c7a400;
    stroke-width: 4;
    box-sizing: border-box;
    transition: all 200ms linear;
  }
  
  @media (prefers-reduced-motion: reduce) {
    .progress-wrap svg.progress-circle path {
      transition: none;
    }
  }
  
  .review--layout2 {
    padding-bottom: 95px;
  }
  
  #preloader {
    background: #fff;
    height: 100%;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-size: cover;
    background-position: center;
  }
  
  #preloader .loading {
    display: flex;
  }
  
  #preloader .ctn-preloader {
    padding-left: 15px;
    padding-right: 15px;
  }
  
  #preloader .spinner {
    -webkit-animation: spinner 3s infinite linear;
    animation: spinner 3s infinite linear;
    border-radius: 50%;
    border: 3px solid #f1f6f8;
    border-left-color: #c7a400;
    border-top-color: #c7a400;
    margin: 0 auto 0em auto;
    position: absolute;
    left: -40px;
    right: -40px;
    bottom: -40px;
    top: -40px;
  }
  
  #preloader .spinner:before {
    content: "";
    width: 20px;
    height: 20px;
    border: 6px solid #fff;
    box-shadow: 0 0 20px 0 rgba(4, 46, 56, 0.2);
    background: #c7a400;
    position: absolute;
    right: 31px;
    top: 41px;
    border-radius: 50%;
  }
  
  @media (max-width: 576px) {
    #preloader .spinner:before {
      top: 18px;
    }
  }
  
  #preloader .round_spinner {
    border-width: 1px;
    border-color: #eef3f4;
    border-style: solid;
    border-radius: 50%;
    background-color: #fdfdfd;
    box-shadow: 0 0 100px 0 rgba(4, 46, 56, 0.14);
    width: 248px;
    height: 248px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 40px auto 80px;
  }
  
  @media (max-width: 576px) {
    #preloader .round_spinner {
      width: 155px;
      height: 155px;
    }
  }
  
  #preloader .round_spinner h4 {
    font-size: 30px;
    font-weight: 400;
    margin-bottom: 0;
    color: white;
  }
  
  #preloader .round_spinner h4 span {
    font-weight: 700;
  }
  
  #preloader .head {
    display: block;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    margin: 5% 0 1% 0;
    padding: 0;
    z-index: 99;
    position: relative;
  }
  
  #preloader p {
    color: #6b707f;
    display: block;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    border: none;
    margin: 0;
    padding: 0;
  }
  
  @-webkit-keyframes spinner {
    to {
      transform: rotateZ(360deg);
    }
  }
  
  @keyframes spinner {
    to {
      transform: rotateZ(360deg);
    }
  }
  
  /***************************
  
  page marcup
  
  ***************************/
  html {
    scroll-behavior: smooth;
  }
  
  ::-webkit-scrollbar {
    width: 8px;
  }
  
  ::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
  
  ::-webkit-scrollbar-thumb {
    background: #a8a8a8;
    border-radius: 5px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    filter: brightness(120%);
  }
.main--wrapper4 {
    z-index: 2;
    position: relative;
    background-color: #fff;
  }
  
  .mainMenu > ul {
    display: flex;
    gap: 30px;
  }
  
  @media (max-width: 1199px) {
    .mainMenu > ul {
      gap: 15px;
      justify-content: center;
    }
  }
  
  .mainMenu > ul > li {
    position: relative;
    padding: 30px 0;
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
  }
  
  .sticky-on.sticky .mainMenu > ul > li {
    padding: 40px 0;
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
  }
  
  .mainMenu > ul > li > a {
    font-size: 13px;
    color: #1313139c;
    position: relative;
    font-family: "Font-1" ;
  }
  
  .header__menu--style2 .mainMenu > ul > li > a {
    color: #fff;
  }
  
  .sticky-on.sticky .header__menu--style2 .mainMenu > ul > li > a {
    color: #000;
  }
  
  .mainMenu > ul > li:hover > a,
  .mainMenu > ul > li.active > a {
    color: #171722;
    font-weight: 600;
  }
  
  .mainMenu > ul > li:hover > a::before {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    transition: all 0.8s cubic-bezier(0.52, 1.64, 0.37, 0.66) 0s;
  }
  
  .dropdown .dropdown_menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 190px;
    perspective: 1000px;
    z-index: 999;
    transform: translateY(-30px);
  }
  
  .dropdown .dropdown_menu > li {
    display: none;
    background-color: #fff;
    opacity: 0;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  }
  
  .dropdown .dropdown_menu > li > a {
    color: #0d0d0d;
    font-size: 14px;
    font-weight: 500;
    display: block;
    padding: 15px 20px;
    border-top: 1px solid #f1f1f1;
  }
  
  .dropdown .dropdown_menu > li:hover > a {
    color: #c7a400;
  }
  
  .dropdown .dropdown_menu > li:first-child a {
    border-top: 0;
  }
  
  .dropdown:hover .dropdown_menu li {
    display: block;
  }
  
  .dropdown:hover .dropdown_menu li.dropdown_item-1 {
    transform-origin: top center;
    -webkit-animation: rotateX 300ms 60ms ease-in-out forwards;
            animation: rotateX 300ms 60ms ease-in-out forwards;
  }
  
  .dropdown:hover .dropdown_menu li.dropdown_item-2 {
    transform-origin: top center;
    -webkit-animation: rotateX 300ms 120ms ease-in-out forwards;
            animation: rotateX 300ms 120ms ease-in-out forwards;
  }
  .dropdown:hover .dropdown_menu li.dropdown_item-3 {
    transform-origin: top center;
    -webkit-animation: rotateX 300ms 180ms ease-in-out forwards;
            animation: rotateX 300ms 180ms ease-in-out forwards;
  }
  
  .dropdown:hover .dropdown_menu li.dropdown_item-4 {
    transform-origin: top center;
    -webkit-animation: rotateX 300ms 240ms ease-in-out forwards;
            animation: rotateX 300ms 240ms ease-in-out forwards;
  }
  
  .dropdown:hover .dropdown_menu li.dropdown_item-5 {
    transform-origin: top center;
    -webkit-animation: rotateX 300ms 300ms ease-in-out forwards;
            animation: rotateX 300ms 300ms ease-in-out forwards;
  }
  
  @-webkit-keyframes rotateX {
    0% {
      opacity: 0;
      transform: rotateX(-90deg);
    }
    50% {
      transform: rotateX(-20deg);
    }
    100% {
      opacity: 1;
      transform: rotateX(0deg);
    }
  }
  
  @keyframes rotateX {
    0% {
      opacity: 0;
      transform: rotateX(-90deg);
    }
    50% {
      transform: rotateX(-20deg);
    }
    100% {
      opacity: 1;
      transform: rotateX(0deg);
    }
  }
  
  .headerBurgerMenu__button {
    background-color: transparent;
    border: 1px solid transparent;
  }
  
  .headerBurgerMenu__button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    padding: 0;
  }
  
  .headerBurgerMenu .line {
    fill: none;
    stroke: black;
    stroke-width: 3;
    transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .headerBurgerMenu .line1 {
    stroke-dasharray: 60 207;
    stroke-width: 3;
  }
  
  .headerBurgerMenu .line2 {
    stroke-dasharray: 40 60;
    stroke-width: 3;
  }
  
  .headerBurgerMenu .line3 {
    stroke-dasharray: 60 207;
    stroke-width: 3;
  }
  
  .headerBurgerMenu .menu-status-close .line1,
  .headerBurgerMenu .sidebarBtn.opened .line1 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 3;
  }
  
  .headerBurgerMenu .menu-status-close .line2,
  .headerBurgerMenu .sidebarBtn.opened .line2 {
    stroke-dasharray: 1 60;
    stroke-dashoffset: -30;
    stroke-width: 3;
  }
  
  .headerBurgerMenu .menu-status-close .line3,
  .headerBurgerMenu .sidebarBtn.opened .line3 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 3;
  }
  
  .offscreen-navigation .sub-menu {
    padding-left: 20px;
    padding-top: 8px;
    padding-bottom: 8px;
    display: none;
  }
  
  .offscreen-navigation li > a {
    display: block;
    position: relative;
    color: black;
    font-size: 16px;
    font-weight: 500;
  }
  
  .offscreen-navigation .sub-menu li > a {
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    padding: 5.5px 0px;
    color: #7d7d7e;
  }
  
  .offscreen-navigation .sub-menu li > a:hover {
    color: #c7a400;
  }
  
  .offscreen-navigation .menu > li {
    padding-bottom: 8px;
  }
  
  .offscreen-navigation .menu > li a.animation.opened {
    color: #c7a400;
  }
  
  .offscreen-navigation li.menu-item-has-children > a:after {
    content: "\f067";
    display: inline-block;
    font-family: "Font Awesome 5 Free";
    transition: 0.1s;
    left: 0;
    position: absolute;
    font-size: 13px;
    font-weight: 700;
  }
  
  .offscreen-navigation li.menu-item-has-children > a.opened:after {
    content: "\f068";
  }
  
  .cc--slideNav {
    position: fixed;
    background: #fff;
    width: 100%;
    left: 0;
    padding: 30px;
    height: 100%;
    overflow-y: auto;
    box-shadow: 0 0 10px 0 #0000001c;
    top: 0;
    z-index: 999;
    transform: translateX(-100%);
    transition: all 1s;
    max-width: 320px;
    -ms-overflow-style: none;
    /* Internet Explorer 10+ */
    scrollbar-width: none;
    /* Firefox */
    overflow-y: auto;
    min-height: 100vh;
  }
  
  .cc--slideNav::-webkit-scrollbar {
    display: none;
    /* Safari and Chrome */
  }
  
  .cc--slideNav.show {
    transform: translateX(0%);
    display: none;
  }
  
  @media (max-width: 991px) {
    .cc--slideNav.show {
      display: block;
    }
  }
  
  @media (max-width: 767px) {
    .cc--slideNav {
      max-width: 270px;
      padding: 20px;
    }
  }
  
  .cc-header-menu {
    padding: 21px 15px 21px;
    z-index: 99;
    background: #fff;
    display: none;
  }
  
  @media (max-width: 991px) {
    .cc-header-menu {
      display: block;
    }
  }
  
  .mean-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 41px;
  }
  
  .mean-bar__logo {
      max-width: 300px;
      width: 199px;
      height: auto;
  }
  
  .header {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 99;
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
  }
  
  @media (max-width: 991px) {
    .header {
      display: none;
    }
  }
  
  .header__wrapper {
    display: flex;
    align-items: center;
    gap: 124px;
  }
  
  @media (max-width: 1666px) {
    .header__wrapper {
      gap: 40px;
    }
  }
  
  @media (max-width: 1199px) {
    .header__wrapper {
      gap: 20px;
    }
  }
  
  .header__menu {
    flex-grow: 1;
    text-align: center;
    display: flex;
    justify-content: center;
  }
  
  .header__right {
    display: flex;
    align-items: center;
    gap: 103px;
  }
  
  @media (max-width: 1666px) {
    .header__right {
      gap: 40px;
    }
  }
  .header__actions ul {
    display: inline-flex;
    align-items: center;
    gap: 13px;
  }
  .header__actions ul li a {
    position: relative;
    background: #F6F6F6;
    border-radius: 50%;
    padding: 4px 12px;
  }
  .header__actions ul li a span{
    background: #AC7330;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 9px;
    right: 12px;
  }
  .header__actions ul li a i {
    fill: #1313139e;
    color: #1313139e;
    font-size: 17px;
  }
  
  @media (max-width: 1199px) {
    .header__actions {
      display: none;
    }
  }
  
  .header.sticky-on.sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    box-shadow: 0px 7px 65px 0px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    background-color: #fff;
  }
  
  @media (max-width: 991px) {
    .header--mobile {
      display: block;
      padding-left: 15px;
    }
  }
  @media (max-width: 991px) {
    .header--mobile .header__actions {
      display: block;
    }
  }
  
  .header--mobile .header__actions ul {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  
  @media (max-width: 767px) {
    .header--mobile .header__actions ul {
      gap: 10px;
    }
  }
  .header__logo__image{
    padding-right: 20px;
  }
  
  .btn--styleOne {
    border-radius: 8px;
    font-size: 13px;
    padding: 11px 24px;
    margin-left: 14px;
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    box-shadow: none;
    border: 1px solid #27283D;
    color: #27283D;
  }
  
  .btn--styleTwo {
    border-radius: 8px;
    font-size: 13px;
    padding: 11px 28px;
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    box-shadow: none;
    border: 1px solid #27283D;
    color: #fff;
    background: #27283D;
  } 
  .btn--styleTwo:hover{
    color: #fff;
  }
  
  .btn--icon {
    background: #fff;
    border: 1px solid #f1f1f1;
    box-sizing: border-box;
    box-shadow: 0px 10px 15px rgba(221, 221, 221, 0.24);
    border-radius: 50%;
    overflow: hidden;
    padding: 0;
    width: 85px;
    height:85px;
    place-content: center;
  }
  
  .btn--icon .btn__icon {
    color: #60646b;
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
  }
  
  .btn--icon .btn__icon path {
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
  }
  
  .btn--icon:hover {
    border-color: transparent;
  }
  
  .btn--icon:hover .btn__icon {
    color: #fff;
  }
  
  .btn--icon:hover .btn__icon path {
    fill: #fff;
  }
  .it-btn {
    z-index: 1;
    transition: color 0.5s;
    position: relative;
  }
  
  .it-btn__inner {
    z-index: -1;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #c7a400;
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
  }
  
  .btn--secondary .it-btn__inner {
    background-color: #0c7e37;
  }
  
  .btn--black .it-btn__inner {
    background-color: #000;
  }
  
  .btn--icon .it-btn__inner {
    background: transparent;
  }
  .it-btn__blobs {
    position: relative;
    display: block;
    height: 100%;
    filter: url("#goo");
  }
  
  .it-btn__blob {
    position: absolute;
    width: 25%;
    height: 100%;
    background: #0c7e37;
    border-radius: 100%;
    transform: translate3d(0, 150%, 0) scale(1.7);
    transition: transform 0.65s;
  }
  
  .btn--secondary .it-btn__blob {
    background-color: #c7a400;
  }
  
  .btn--black .it-btn__blob {
    background-color: #c7a400;
  }
  
  .btn--icon .it-btn__blob {
    background: #c7a400;
  }
  @supports (filter: url("#goo")) {
    .it-btn__blob {
      transform: translate3d(0, 150%, 0) scale(1.4);
    }
  }
  
  .it-btn__blob:nth-child(1) {
    left: 0%;
    transition-delay: 0s;
  }
  
  .it-btn__blob:nth-child(2) {
    left: 30%;
    transition-delay: 0.09s;
  }
  
  .it-btn__blob:nth-child(3) {
    left: 60%;
    transition-delay: 0.18s;
  }
  
  .it-btn__blob:nth-child(4) {
    left: 90%;
    transition-delay: 0.27s;
  }
  
  .it-btn:hover .it-btn__blob {
    transform: translateZ(0) scale(1.7);
  }
  
  @supports (filter: url("#goo")) {
    .it-btn:hover .it-btn__blob {
      transform: translateZ(0) scale(1.4);
    }
  }
  
  .it-btn__animation {
    position: absolute;
    bottom: 0;
    height: 100%;
    right: 0;
    width: 100%;
  }
  /* =====================Home-banner================ */
  .home-banner{
    height:500px;
    background:url('../image/background/brand-bg\ 1.png')
    center/cover no-repeat;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
  }
  
.home-banner .banner-text{
  position: relative;
  padding-top: 80px;
  width: 70%;
  text-align: center;
  margin: auto;
}
.home-banner .banner-text h1{
  font-size: 24px;
  margin: 30px 0;
  font-family: "Font-bold";
  color: #131313;
}
.home-banner .banner-text h1 span{
  color: #AC7330;
}
.home-banner .banner-text p{
  font-size: 16px;
  color: #13131380;
  width: 92%;
  margin: auto;
  padding-bottom: 40px;
}
.home-banner .search-box{
    position:relative;
    z-index:2;
    background:#fff;
    width:88%;
    max-width:100%;
    border-radius:16px;
    padding:6px 16px 10px;
    display:flex;
    gap:15px;
    align-items:end;
    box-shadow:0 10px 30px rgba(0,0,0,0.2);
    flex-wrap:wrap;
    margin: auto;
  }

  .home-banner .field{
    flex:1;
    min-width:180px;
    display:flex;
    flex-direction:column;
    gap:0;
    border-left: 1px solid rgba(19, 19, 19, 0.1);
  }
  .home-banner .field:last-child{
    border-left: none !important;
  }

  .home-banner .field label{
    font-size: 13px;
    color: #979797;
    font-family: "Font-1";
    font-weight: 500;
  }

  .home-banner .field select,
  .home-banner .field input{
    height: 32px;
    padding: 0 0px 0 15px;
    font-size: 14px;
    outline: none;
    float: right;
    text-align: right;
    border: none;
    background: none;
    box-shadow: none;
    font-family: "Font-1";
    color: #131313;
  }

  .home-banner .search-btn{
    width:46px;
    height:42px;
    border:none;
    border-radius:12px;
    background:#27283D;
    color:#fff;
    cursor:pointer;
    font-size:15px;
    transition:0.3s;
  }

  .home-banner .search-btn:hover{
    background:#1e293b;
  }

  @media(max-width:768px){
    .home-banner .search-box{
      flex-direction:column;
      align-items:stretch;
    }

    .home-banner .search-btn{
      width:100%;
    }
  }
  /*=================Login Home button ================*/
  .modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.5);
  
    display:none;
  
    justify-content:center;
    align-items:center;
  
    padding:20px;
    z-index: 999;
  }
  .modal-overlay.active{
    display:flex;
  }
  .login-modal{
    width:100%;
    max-width:520px;
    height: 550px;
    background:#fff;
    border-radius:24px;
    padding:15px 25px;
    position:relative;
    z-index: 99999;
    overflow-x: hidden;
    overflow-y: scroll;
  }
  .close-btn{
    position:absolute;
    top:15px;
    left:15px;
    width:31px;
    height:31px;
    line-height: 29px;
    border:none;
    border-radius:50%;
    background:#fff;
    cursor:pointer;
    font-size:15px;
    color: #131313;
    border: 1px solid #ddd;
  }
  .modal-header{
    margin-bottom:5px;
    display: block;
    padding-right: 3px;
    padding-top: 5px;
    padding-bottom: 5px;
  }
  .modal-header h2{
    margin-bottom:10px;
    font-size: 18px;
    font-family: "Font-1";
  }
  .modal-header p{
    font-size: 14px;
    font-family: "Font-light";
  }
  
  .input-group{
    margin-bottom:15px;
    display: block;
    padding-top: 15px;
  }
  
  .input-group label{
    display:block;
    margin-bottom:8px;
    color: #6E6B7B;
  }
  
  .input-group input{
    width:100%;
    height:50px;
    border:1px solid #ddd;
    border-radius:12px;
    padding:0 15px;
  }
  
  .options{
    display:flex;
    justify-content:space-between;
    margin-bottom:20px;
  }
  
  .login-btn{
    width:100%;
    height:48px;
    line-height: 45px;
    border:none;
    border-radius:10px;
    background:#27283D;
    color:#fff;
    cursor:pointer;
  }
  .phone-input{
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 8px !important;
    overflow: hidden;
    height: 55px;
    background: #fff;
    padding: 9px 0;
  }
  .country-code{
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 15px;
    border-left:1px solid #eee;
    height:100%;
    background:#fff;
  }
  .country-code img{
    width:24px;
    height:18px;
    object-fit:cover;
    border-radius:3px;
  }
  .country-code span{
    font-size: 16px;
    color: #B9B9C3;
    font-weight: 500;
  }
  .login-modal input::placeholder{
    color: #B9B9C3;
    font-size: 14px;
  }
  .phone-input{
    border-radius: 8px;
  }
  .phone-input input{
    flex:1;
    height:100%;
    border:none;
    outline:none;
    padding:0 15px 0 15px;
    font-size:15px;
  }  
  .phone-icon,.password-icon{
    position:absolute;
    left:15px;
    color:#B9B9C3;
    font-size:16px;
  }
.remember{
  color: #6E6B7B;
  font-size: 15px;
}
.remember input{
  padding-left: 10px;
  margin-left: 10px;
  width: 20px;
  height: 17px;
  border: 1px solid #D8D6DE;
  color: #D8D6DE;
  line-height: 21px;
  vertical-align: middle;
}
.login-modal .forgot{
  color:#24344D;
  font-size: 15px;
  font-family: "Font-bold";
}
/* Divider */

.divider{
  display:flex;
  align-items:center;
  gap:15px;
  margin:20px 0;
}

.divider::before,
.divider::after{
  content:"";
  flex:1;
  height:1px;
  background:rgba(19, 19, 19, 0.05);
}

.divider span{
  color:#131313;
  font-size:14px;
  font-weight:600;
}
.social-login{
  display:flex;
  flex-direction:column;
  gap:15px;
}
.social-btn{
  width:100%;
  height:90px;
  border:1px solid rgba(19, 19, 19, 0.1);
  border-radius:12px;
  background:#fff;
  display:grid;
  gap:12px;
  cursor:pointer;
  font-size:15px;
  font-weight:500;
  padding:15px 0 ;
  transition:0.3s;
  color: #131313;
}
.social-btn:hover{
  background:#f9fafb;
}
.social-btn svg{
  width: 1.25rem;
  height: 1.25rem;
  margin: auto;
}
.social-btn i{
  font-size: 22px;
  color: #131313;
}
.register-text{
  margin-top:25px;
  text-align:center;
  font-size:14px;
  color:#131313;
}
.register-text a{
  color:#27283D;
  text-decoration:underline;
  font-family: "Font-bold";
}
/* ====================== password-reset ==================== */
.forgot-body{
  margin-top:10px;
}
#forgotModal .forgot-image{
  display:flex;
  justify-content:center;
  margin-bottom:10px;
}
#forgotModal .forgot-image img{
  width:150px;
}
#forgotModal .choose-title{
  font-size:15px;
  line-height:1.7;
  color:#131313;
  margin-bottom:25px;
}
#forgotModal .reset-option{
  border:1px solid #E5E7EB;
  border-radius:16px;
  padding:18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:15px;
  cursor:pointer;
  transition:0.3s;
  background:#fff;
}
#forgotModal .reset-option.active-option{
  border-color:#AC7330;
  background: rgba(172, 115, 48, 0.05);
}
.option-right{
  display:flex;
  align-items:center;
  gap:15px;
}
#forgotModal .option-icon{
  width:55px;
  height:55px;
  border-radius:12px;
  background:#F3F4F6;
  display:flex;
  justify-content:center;
  align-items:center;
}
#forgotModal .reset-option.active-option .option-icon{
  background: rgba(172, 115, 48, 0.1);
}
.option-icon i{
  font-size:20px;
  color:#4A5565;
}
#forgotModal .reset-option.active-option .option-icon i{
  color:#AC7330
}
.option-text h4{
  font-size:16px;
  margin-bottom:6px;
  color:#27283D;
}
.option-text p{
  font-size:14px;
  color:#6B7280;
}
.select-circle{
  width:22px;
  height:22px;
  border-radius:20px;
  border:2px solid #D1D5DC;
  display:flex;
  justify-content:center;
  align-items:center;
}
.circle-inner{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#111827;
  display: none;
}
.reset-option.active-option .select-circle{
  border:2px solid #AC7330;
}
.reset-option.active-option .circle-inner{
  display:block;
  background: #AC7330;
}
/* ========================= confirmation model ======================= */
.verify-modal,.Done-modal{
  width:100%;
  max-width:420px;
  height: 230px;
  background:#fff;
  border-radius:16px;
  padding:20px 10px;
  text-align:center;
  position: relative;
}
.Done-modal{
  max-width: 460px;
  height: 300px;
  padding: 20px 30px;
}
.verify-icon ,.Done-icon{
  width:50px;
  height:50px;
  margin:auto auto 25px;
  border-radius:50%;
  background:rgba(172, 115, 48, 0.1);
  display:flex;
  justify-content:center;
  align-items:center;
}
.Done-icon{
  width: 80px;
  height: 80px;
}
.verify-icon i{
  font-size:20px;
  color:#AC7330;
}
.verify-modal h2,.Done-modal h2{
  font-size:16px;
  line-height:1.6;
  color:#131313;
  margin-bottom:5px;
}
.Done-modal h2{
  font-size: 17px;
  font-weight: 600;
}
.verify-modal p,.Done-modal p{
  font-size:13px;
  line-height:1.8;
  color:#7D848D;
  margin-bottom:15px;
}
.Done-modal p{
  font-size: 15px;
}
/* =============================== otp model ========================= */
.otp-logo{
  margin-top: 30px;
  display:flex;
  justify-content:center;
  margin-bottom:20px;
}
.otp-logo img{
  width:90px;
}
.otp-title{
  text-align:center;
  font-size:18px;
  font-family: "Font-bold";
  color:#131313;
  margin-bottom:15px;
}
.otp-description{
  text-align:center;
  font-size:13px;
  line-height:1.9;
  color:rgba(19, 19, 19, 0.5);
  margin-bottom:12px;
}
.otp-phone{
  text-align:center;
  font-size:16px;
  color:rgba(19, 19, 19, 0.75);
  margin-bottom:30px;
}
.otp-inputs{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-bottom:20px;
}

.otp-inputs input{
  width:55px;
  height:58px;
  border:1px solid #D1D5DC;
  border-radius:5px;
  text-align:center;
  font-size:22px;
  outline:none;
  transition:0.3s;
}
.otp-inputs input:focus{
  border-color:#111827;
}
.otp-note{
  font-size:13px;
  color:#131313;
  margin-bottom:15px;
}
.resend-code{
  text-align:center;
  margin-top:22px;
}
.resend-code a{
  text-decoration:none;
  color:#131313;
  font-size:14px;
}
/* ========================================== New account model ====================================== */
.signup-modal{
  width:100%;
  max-width:720px;
  height: 550px;
  background:#fff;
  border-radius:24px;
  padding:15px 25px;
  position:relative;
  z-index: 99999;
  overflow-x: hidden;
  overflow-y: hidden;
}
.modal-header h2{
  margin-bottom:10px;
  font-size: 16px;
  font-family: "Font-bold";
  color: #131313;
}

.signup-header p{
  color:#898989;
  line-height:1.7;
  font-size: 12px;
  font-family: "Font-light";
}
.signup-modal .input-group{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding-top: 5px;
  padding-bottom: 10px;
  margin-bottom: 0px;
}
.signup-modal .input-group label{
  color: #6E6B7B;
  font-size: 12px;
}
.signup-modal .input-group input{
  border-radius: 8px;
  border: 1px solid #D1D5DC;
  font-size: 13px;
  height: 40px;
}
.signup-modal .input-group .phone-input{height: 41px;}
.signup-modal .input-group .phone-input input{
  border: none;
  height: 40px;
}
.signup-modal .input-group input::placeholder{
  color:#B9B9C3;
  text-align: right;
}
.input-group.full{
  width:100%;
}

.input-icon{
  position:relative;
  display:flex;
  align-items:center;
}

.input-icon i{
  position:absolute;
  left:12px;
  color:#9ca3af;
}

.input-icon input{
  width:100%;
  height:50px;
  padding:0 15px 0 40px;
  border:1px solid #ddd;
  border-radius:12px;
}
.terms{
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: #364153;
  margin: 15px 0 28px;
  line-height: 15px; 
}
.terms input{
  padding-left: 10px;
  margin-left: 2px;
  width: 20px;
  height: 17px;
  border: 1px solid #D8D6DE;
  color: #D8D6DE;
  vertical-align: middle;
}
.switch-link{
  text-align:center;
  margin-top:15px;
  font-size:14px;
  color:#4A5565;
}

.switch-link a{
  color:#27283D;
  text-decoration:none;
}
/* ================================ Home-New-Places ===================================== */
.popular-section,.daily-section,
.Bayout-section,.available-section,.jeddah-section{
  padding:60px 5% 0px;
}
.Bayout-section{
  background: rgba(246, 246, 246, 0.5);
}
.section-top{
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:20px;
  gap:20px;
  position: relative;
}
.section-heading h2{
  font-size:20px;
  margin-bottom:8px;
  color:#131313;
  font-family: "Font-bold";
}

.section-heading p{
  color:#131313;
  font-size: 15px;
  line-height:1.8;
}
.slider-buttons{
  display:flex;
  gap:12px;
  position: absolute;
  left: 10px;
  top: 0px;
}
.slider-btn{
  width:38px;
  height:38px;
  border:none;
  border-radius:50%;
  background:rgba(39, 40, 61, 0.05);
  color:#131313;
  cursor:pointer;
  font-size:16px;
  transition:0.3s;
}
.slider-btn:hover{
  background:#131313;
  color: #fff;
}
.cities-slider,.daily-slider,.bayout-slider,
.available-slider,.jeddah-slider{
  display:flex;
  gap:25px;
  overflow-x:auto;
  scroll-behavior:smooth;
  scrollbar-width:none;
}
.cities-slider::-webkit-scrollbar,.daily-slider::-webkit-scrollbar,
.bayout-slider::-webkit-scrollbar,.available-slider::-webkit-scrollbar,
.jeddah-slider::-webkit-scrollbar{
  display:none;
}
.city-card{
  min-width:120px;
  text-align:center;
}
.city-card img{
  width:120px;
  height:120px;
  border-radius:50%;
  object-fit:cover;
  margin-bottom:15px;
  transition:0.3s;
}
.city-card img:hover{
  transform:scale(1.05);
}
.city-card h4{
  font-size:18px;
  color:#131313;
}
.available-bayout-section{
  display: block;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 60px 5% 0;
}
.slider-column{
  display:flex;
  flex-direction:column;
  gap:20px;
  flex-shrink:0;
}
.available-button{
  text-align:center;
}
.more-units-btn{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 12px 16px;
  background: #27283D;
  color: #fff;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: 0.3s;
  margin-bottom: 20px;
}
.more-units-btn:hover{
  background:rgba(17,24,39,0.9);
}
.btn-icon{
  width:16px;
  height:16px;
}
/* =============================================== Home-daily-offers ======================================== */
.property-card{
  width: 100%;
  max-width: 265px;
  overflow: hidden;
  background: #fff;
  position: relative;
  flex-shrink:0;
  border-radius:12px;
  border:1px solid #f3f4f6;
  transition:0.3s;
  margin-bottom: 30px;
}
.property-card .card-box {
  position:relative;
  height:160px;
  background:#f3f4f6;
  overflow:hidden;
}
.property-card .card-box img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.property-card .card-box .heart-btn{
  position:absolute;
  top:8px;
  left:8px;
  width:28px;
  height:28px;
  border-radius:50%;
  background:rgba(255, 255, 255, 0.5);
  backdrop-filter:blur(4px);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:0.3s;
  border: none;
}
.property-card .card-box .heart-btn svg{
  width: 20px;
  height: 15px;
}
.property-card .card-box-text{
  padding: 10px 5px 10px;
  position: relative;
  display: block;
}
.property-card .card-box-text h3{
  color: #131313;
  font-family: "Font-1";
  margin-bottom: 5px;
  font-size: 15px;
}
.property-card .card-box-text p{
  font-size:10px;
  color:#747474;
  margin-bottom:8px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.property-card .rate{
  position:absolute;
  top:8px;
  left:8px;
  display:flex;
  align-items:center;
  gap:4px;
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(4px);
  border-radius:999px;
  padding:2px 8px;
}
.property-card .rate svg{
  width:16px;
  height:14px;
  color:#FD8E1F;
}
.property-card .rate span{
  font-size:12px;
  font-family:"Font-1";
  font-weight:600;
  color: #131313;
}
.property-card .card-box-detail{
  display:flex;
  align-items:center;
  gap:12px;

  font-size:8px;
  color:rgba(0, 0, 0, 0.6);
  margin-bottom:12px;
}
.property-card .card-box-detail span{
  display:flex;
  align-items:center;
  gap:4px;
  color: #A1A1A1;
  font-size: 12px;
}
.property-card .card-box-detail span svg{
  fill: #A1A1A1;
}
.property-card .card-box-price{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.property-card .card-box-price .old-price{
  font-size:11px;
  text-decoration:line-through;
  color: #BDBDBD;
}
.property-card .card-box-price .new-price{
  color: #131313;
  font-size:13px;
  font-weight:600;
  padding-right: 8px;
}
.property-card .card-box-price .slach{
  font-size:14px;
  color:rgb(19 19 19 / 44%);
}
.property-card .card-box-price .time{
  font-size:12px;
  color:#616161;
}
.card:hover{
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
}
.property-card:hover img {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

.property-card img {
  transition: transform 0.3s ease;
}
/* ============================================= Download-app-Home ================================== */
.app-section{
  padding: 36px 5% 0px;
    position: relative;
    background-image: url(../image/background/app-background.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 24px;
    margin: 45px 5%;
}
.app-section .app-details{
  padding: 0px;
  position: relative;
  height: auto;
  width: 100%;
  overflow: hidden;
  margin-bottom: 80px;
}
.app-heading{
  position: relative;
  text-align: center;
  margin-bottom: 40px;
  padding-top: 15px;
  display: block;
}
.app-heading h2{
  font-size:32px;
  font-weight:700;
  margin-bottom:12px;
  color:#131313;
}
.app-heading p{
  font-size: 18px;
  line-height: 1.8;
  color: #676767;
  width: 42%;
  margin: auto;
}
.store-buttons{
  display: flex;
 justify-content: center;
 align-items: center;
 gap: 28px;
 margin-bottom: 50px;
}
.store-btn{
  display: flex;
  align-items: center;
  gap: 12px;
  background: #000;
  color: #fff;
  padding: 5px 28px;
  border-radius: 5px;
  text-decoration: none;
  transition: 0.3s;
}
.store-text{
  text-align: left;
}
.store-icon{
 font-size: 35px;
}
.small-text{
  font-size:12px;
  line-height:11px;
  padding-top: 9px;
  margin-bottom: 0;
}
.big-text{
  font-size: 20px;
  font-family: "Font-1";
  margin-bottom: 0;
}
.phones-wrapper{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:24px;
  position: relative;
}
/* ===================================================== page-banner ======================================== */
.page-banner{
  height: 350px;
}
.page-banner .banner-text h1{
  margin: 6px 0 8px;
}
.page-banner .banner-text p{
  width: 77%;
}
/* ==================================================== profile-page ======================================== */
.profile-page{
  padding: 80px 0;
  position: relative;
}
.profile-page .profile-details{
  background:linear-gradient(to bottom, #27283D, #38395C);
  border-radius: 16px;
  height: auto;
  width: 100%;
  position: relative;
  padding:40px 20px;
}
.profile-page .personal-details{
  background: #fff;
  border-radius: 16px;
  position: relative;
  box-shadow: 0px 0px 2px rgba(19, 19, 19, 0.25);
  padding: 0 20px;
  margin-bottom: 20px;
}
.profile-page .profile-details .profile-card{
  width:320px;
  background:#fff;
  border-radius:24px;
  padding:30px 24px;
  box-shadow:
  0 10px 30px rgba(0,0,0,0.08);
  text-align:center;
}
.profile-page .profile-details .profile-image{
  width:80px;
  height:80px;
  margin:auto auto 18px;
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.profile-page .profile-details .profile-image svg{
  width:35px;
  height:35px;
  color: #AC7330;
  border-radius:50%;
  margin-bottom: 10px;
}
.profile-page .profile-details .user-name{
  font-size:16px;
  color:#fff;
  margin-bottom:8px;
  text-align: center;
}
.profile-page .profile-details .user-email{
  color:#fff;
  font-size:12px;
  margin-bottom:18px;
  text-align: center;
}
.stats-title{
  text-align:right;
  font-size:14px;
  color:#fff;
  margin-bottom:20px;
}
.stats-row{
  display:flex;
  gap:14px;
  margin-bottom:20px;
}
.stat-box,
.favorite-box{
  flex: 1;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 10px 0;
  text-align: center;
}
.stat-box h3,
.favorite-box h3{
  font-size:24px;
  color:#fff;
  margin-bottom:6px;
}
.stat-box p,
.favorite-box p{
  font-size:14px;
  color:rgba(255, 255, 255, 0.8);
  margin-bottom: 0px;
}
.favorite-box{
  margin-bottom:24px;
}
.divider{
  width:100%;
  height:1px;
  background:rgba(229, 231, 235, 0.1);
  margin-bottom:20px;
}
.member-title{
  color:#fff;
  font-size:14px;
  font-family: "Font-light";
}
.member-title i{
  padding-left: 7px;
}
.member-date{
  color:#fff;
  font-size:14px;
  font-family: "Font-light";
}
.profile-page .personal-details .card-header{
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  margin-bottom: 30px;
  color: #111827;
  padding: 25px 0px 15px;
  border: none;
}
.profile-page .update-details .card-header{
  display: block;
  margin-bottom: 0;
}
.profile-page .personal-details .card-header h3{
  font-size: 17px;
  color: #101828;
  margin-bottom: 0;
}
.profile-page .update-details p{
  color: #4A5565;
  font-size: 13px;
  margin-top: 15px;
}
.profile-page .personal-details .card-header svg{
  color: #27283D;
  width: 20px;
  height: 20px;
}
.profile-page .personal-details .info-box{
  margin-bottom: 40px;
}
.profile-page .personal-details .info-box label{
  display:block;
  font-size:12px;
  color:#4A5565;
  margin-bottom:3px;
}
.profile-page .personal-details .info-content{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px 0px 0;
  color: #101828;
}
.profile-page .personal-details .info-content i{
  color:#99A1AF;
}
.profile-page .personal-details .info-content span{
  font-size:15px;
  font-weight:500;
}
.profile-page .available-button{
  float: left;
}
.profile-page .available-button a:hover{
  color: #fff;
}
/* ==========================================   update-profile-page ======================================== */
.profile-page .update-details input,
.profile-page .update-details .phone-input{
  height: 38px;
  border-radius: 8px;
}
.profile-page .update-details input::placeholder{
  font-size: 12px;
  color: #B9B9C3;
}
.profile-page .cancel-btn{
  border: 1px solid #D1D5DC;
  border-radius: 10px;
  display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #fff;
    color: #364153;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: 0.3s;
    margin-bottom: 20px;
    margin-left: 20px;
}
.profile-page .cancel-btn:hover{
  color: #364153 !important;
}
  

/* ======================================= Footer ============================= */
.footer {
  position: relative;
}

.footer__shape {
  position: absolute;
  top: -1px;
  width: 100%;
}

.footer--bg {
  background:#F6F6F6;
}

.footer__social {
  text-align: left;
  margin-top: 20px;
}

.footer__logo {
  margin-bottom: 50px;
}

.footer__line {
  margin: 0;
  opacity: 1;
  background-color: #303030;
}

.footer__heading {
  margin-top: 22px;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 25px;
color:rgba(19, 19, 19, 0.8);;
}
.footer__widget img{
  margin-bottom: 20px;
  margin-top: 22px;
}
.footer__widget p{
  color:rgba(19, 19, 19, 0.8);
  font-size: 15px;
  line-height: 27px;
  width: 85%;
}

.footer__widget ul li a {
  font-size: 15px;
  color: rgba(19, 19, 19, 0.8);
  line-height: 35px;
  padding-right: 6px;
}
.footer__menu ul li {
  margin-bottom: 10px;
}

.footer__menu ul li a {
  font-size: 15px;
  color: rgba(19, 19, 19, 0.8);
  display: block;
  line-height: 1.8;
  padding-right: 0;
}

.footer__menu ul li:last-child {
  margin-bottom: 0;
}

.footer__menu ul li:hover a {
  color: #eb9309;
}

.footer__copyright__text {
  color: #131313;
  font-size: 0.9375rem;
}

.heading--tertiary {
  font-size: 20px;
  font-weight: 700;
  color: #eb9309;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.footer-nav__list {
  display: flex;
}
.itSocial ul {
  display: inline-flex;
  gap: 8px;
}

.itSocial ul li a {
  height: 40px;
  width: 40px;
  display: grid;
  place-content: center;
  border: 1px solid rgba(247, 247, 247, 0.15);
  border-radius: 50%;
  font-size: 14px;
  color: #fff;
  transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  background: #27283D;
}

/* ================================================================
   SEARCH PAGE
   ================================================================ */

.filter-bar {
  background: #fff;
  border-radius: 14px;
  padding: 20px 24px;
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
  margin-bottom: 24px;
}

.filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

.filter-group label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  display: block;
  margin-bottom: 4px;
}

.filter-group input,
.filter-group select {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  color: #1f2937;
  background: #f9fafb;
}

.filter-group input:focus,
.filter-group select:focus {
  outline: none;
  border-color: var(--brand-color, #1e1b4b);
  box-shadow: 0 0 0 3px rgba(30,27,75,.08);
}

.filter-apply-btn,
.filter-clear-btn {
  padding: 9px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background .2s;
}

.filter-apply-btn {
  background: var(--brand-color, #1e1b4b);
  color: #fff;
}

.filter-apply-btn:hover { background: #2d2a6e; }

.filter-clear-btn {
  background: #f3f4f6;
  color: #374151;
}

.filter-clear-btn:hover { background: #e5e7eb; }

.amenity-filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 0;
}

.amenity-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid #e5e7eb;
  background: #f9fafb;
  font-size: 13px;
  color: #374151;
  cursor: pointer;
  transition: all .15s;
}

.amenity-chip input[type="checkbox"] { display: none; }

.amenity-chip.active,
.amenity-chip:has(input:checked) {
  border-color: var(--brand-color, #1e1b4b);
  background: var(--brand-color, #1e1b4b);
  color: #fff;
}

.results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
}

.results-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
}

.map-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1.5px solid var(--brand-color, #1e1b4b);
  color: var(--brand-color, #1e1b4b);
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}

.map-toggle-btn:hover {
  background: var(--brand-color, #1e1b4b);
  color: #fff;
}

.units-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.pagination-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1.5px solid #e5e7eb;
  background: #fff;
  color: #374151;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all .2s;
}

.page-btn:hover,
.page-btn.active {
  background: var(--brand-color, #1e1b4b);
  border-color: var(--brand-color, #1e1b4b);
  color: #fff;
}

.page-btn.disabled {
  opacity: .4;
  pointer-events: none;
}

/* ================================================================
   EMPTY SEARCH STATE
   ================================================================ */

.empty-search {
  text-align: center;
  padding: 60px 20px;
}

.empty-search-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
  border-radius: 50%;
  font-size: 32px;
  color: #9ca3af;
}

.empty-search h3 {
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 8px;
}

.empty-search p {
  color: #6b7280;
  margin-bottom: 20px;
}

/* ================================================================
   PROPERTY DETAIL PAGE
   ================================================================ */

.unit-gallery { margin-bottom: 28px; }

.gallery-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 8px;
  border-radius: 16px;
  overflow: hidden;
}

.gallery-main img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  display: block;
}

.gallery-thumbs {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  gap: 8px;
}

.gallery-thumbs img {
  width: 100%;
  height: 186px;
  object-fit: cover;
  display: block;
}

.thumb-more {
  position: relative;
  cursor: pointer;
}

.thumb-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
}

.gallery-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.gallery-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1.5px solid #e5e7eb;
  background: #fff;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
  transition: all .2s;
}

.gallery-action-btn:hover {
  border-color: var(--brand-color, #1e1b4b);
  color: var(--brand-color, #1e1b4b);
}

.unit-header { margin-bottom: 20px; }

.unit-header h1 {
  font-size: 26px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 6px;
}

.unit-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0;
}

.spec-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: #f3f4f6;
  border-radius: 20px;
  font-size: 14px;
  color: #374151;
}

.unit-section { margin-bottom: 32px; }

.unit-section-title {
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid #f3f4f6;
}

.amenities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

.policy-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  background: #f3f4f6;
  color: #374151;
}

.read-more-btn {
  background: none;
  border: none;
  color: var(--brand-color, #1e1b4b);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  margin-top: 8px;
}

/* Booking sidebar */
.booking-card.sticky-card {
  position: sticky;
  top: 80px;
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 24px rgba(0,0,0,.10);
}

.booking-price {
  font-size: 24px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 16px;
}

.booking-price span {
  font-size: 14px;
  font-weight: 400;
  color: #6b7280;
}

.booking-dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
}

.date-field {
  padding: 10px 14px;
}

.date-field:first-child { border-left: 1.5px solid #e5e7eb; }

.date-field label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  color: #6b7280;
  display: block;
}

.date-field input {
  border: none;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  width: 100%;
  background: transparent;
}

.booking-guests {
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 16px;
}

.booking-guests label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  color: #6b7280;
  display: block;
}

.price-breakdown { margin: 16px 0; }

.price-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 14px;
  color: #374151;
}

.price-row.total {
  font-weight: 700;
  font-size: 16px;
  color: #1f2937;
  border-top: 2px solid #f3f4f6;
  padding-top: 10px;
  margin-top: 4px;
}

.book-btn {
  width: 100%;
  padding: 14px;
  background: var(--brand-color, #1e1b4b);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s;
  text-align: center;
  display: block;
  margin-bottom: 10px;
}

.book-btn:hover { background: #2d2a6e; }

.inquiry-btn {
  width: 100%;
  padding: 12px;
  border: 1.5px solid var(--brand-color, #1e1b4b);
  color: var(--brand-color, #1e1b4b);
  background: transparent;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  text-align: center;
  display: block;
}

.inquiry-btn:hover {
  background: var(--brand-color, #1e1b4b);
  color: #fff;
}

.similar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 16px;
}

/* ================================================================
   REVIEWS
   ================================================================ */

.reviews-summary {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.overall-score {
  text-align: center;
  min-width: 100px;
}

.overall-score .score-number {
  font-size: 48px;
  font-weight: 700;
  color: #1f2937;
  line-height: 1;
}

.overall-score .score-stars {
  color: #f59e0b;
  font-size: 18px;
  margin: 4px 0;
}

.overall-score .score-count {
  font-size: 13px;
  color: #6b7280;
}

.criteria-bars { flex: 1; min-width: 220px; }

.criteria-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.criteria-row span:first-child {
  min-width: 90px;
  font-size: 13px;
  color: #374151;
  text-align: right;
}

.criteria-bar {
  flex: 1;
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  overflow: hidden;
}

.criteria-fill {
  height: 100%;
  background: var(--brand-color, #1e1b4b);
  border-radius: 3px;
  transition: width .4s ease;
}

.criteria-row .criteria-score {
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
  min-width: 28px;
}

.reviews-list { display: flex; flex-direction: column; gap: 20px; }

.review-card {
  background: #f9fafb;
  border-radius: 12px;
  padding: 18px 20px;
}

.reviewer-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--brand-color, #1e1b4b);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}

.review-comment {
  font-size: 14px;
  color: #374151;
  line-height: 1.7;
  margin-top: 10px;
}

/* ================================================================
   ACCOUNT PAGES
   ================================================================ */

.account-nav {
  background: #fff;
  border-radius: 14px;
  padding: 8px 0;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

.account-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  font-size: 15px;
  color: #374151;
  text-decoration: none;
  transition: all .15s;
  border-right: 3px solid transparent;
}

.account-nav-link:hover,
.account-nav-link.active {
  background: #f3f4f6;
  color: var(--brand-color, #1e1b4b);
  border-right-color: var(--brand-color, #1e1b4b);
}

.account-nav-link i { width: 18px; text-align: center; }

/* Booking tabs */
.booking-tabs {
  display: flex;
  gap: 4px;
  background: #f3f4f6;
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 20px;
}

.booking-tab {
  flex: 1;
  padding: 9px 12px;
  border-radius: 7px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  text-decoration: none;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.booking-tab.active {
  background: #fff;
  color: var(--brand-color, #1e1b4b);
  box-shadow: 0 1px 6px rgba(0,0,0,.08);
}

.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: var(--brand-color, #1e1b4b);
  color: #fff;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
}

/* Booking cards */
.booking-card-item {
  display: flex;
  gap: 16px;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.07);
  margin-bottom: 16px;
  transition: box-shadow .2s;
}

.booking-card-item:hover { box-shadow: 0 4px 20px rgba(0,0,0,.12); }

.booking-card-img {
  width: 130px;
  flex-shrink: 0;
  object-fit: cover;
}

.booking-card-body {
  flex: 1;
  padding: 16px 16px 16px 0;
}

.booking-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}

.booking-card-right { text-align: left; }

.booking-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

/* Status badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}

.status-confirmed    { background: #d1fae5; color: #065f46; }
.status-completed    { background: #dbeafe; color: #1e40af; }
.status-cancelled    { background: #fee2e2; color: #991b1b; }
.status-pendingpayment { background: #fef3c7; color: #92400e; }
.status-pendingreview  { background: #ede9fe; color: #5b21b6; }

/* Empty account state */
.empty-account {
  text-align: center;
  padding: 48px 20px;
  color: #9ca3af;
}

.empty-account i { font-size: 40px; margin-bottom: 12px; display: block; }
.empty-account p { font-size: 16px; margin-bottom: 16px; }

/* Conversations */
.conversations-list { display: flex; flex-direction: column; }

.conversation-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid #f3f4f6;
  text-decoration: none;
  transition: background .15s;
  color: inherit;
}

.conversation-item:hover { background: #f9fafb; }

.conv-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--brand-color, #1e1b4b);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}

.conv-body { flex: 1; min-width: 0; }

.conv-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
}

.conv-name { font-weight: 700; font-size: 15px; color: #1f2937; }

.conv-time { font-size: 12px; color: #9ca3af; }

.conv-preview {
  font-size: 13px;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.conv-unread {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: var(--brand-color, #1e1b4b);
  color: #fff;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Chat */
.chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid #f3f4f6;
  background: #fff;
  border-radius: 14px 14px 0 0;
}

.chat-back {
  color: #374151;
  font-size: 18px;
  text-decoration: none;
}

.chat-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand-color, #1e1b4b);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
}

.chat-messages {
  height: 380px;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #f9fafb;
}

.chat-bubble-wrap {
  display: flex;
}

.chat-bubble-wrap.mine { justify-content: flex-start; }
.chat-bubble-wrap.theirs { justify-content: flex-end; }

.chat-bubble {
  max-width: 70%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
}

.bubble-mine {
  background: var(--brand-color, #1e1b4b);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.bubble-theirs {
  background: #fff;
  color: #1f2937;
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

.bubble-time {
  font-size: 11px;
  opacity: .65;
  margin-top: 4px;
  text-align: left;
}

.chat-input-wrap {
  padding: 12px 16px;
  border-top: 1px solid #f3f4f6;
  background: #fff;
  border-radius: 0 0 14px 14px;
}

.chat-input-form {
  display: flex;
  gap: 10px;
  align-items: center;
}

.chat-input-form input {
  flex: 1;
  border: 1.5px solid #e5e7eb;
  border-radius: 24px;
  padding: 10px 18px;
  font-size: 14px;
  outline: none;
}

.chat-input-form input:focus { border-color: var(--brand-color, #1e1b4b); }

.chat-send-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--brand-color, #1e1b4b);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background .2s;
}

.chat-send-btn:hover { background: #2d2a6e; }

/* Notifications */
.notifications-list { display: flex; flex-direction: column; gap: 0; }

.notification-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  border-bottom: 1px solid #f3f4f6;
  transition: background .15s;
}

.notification-item.unread { background: #f5f3ff; }

.notification-item:hover { background: #f9fafb; }

.notif-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #6b7280;
  flex-shrink: 0;
}

.notif-icon--active {
  background: #ede9fe;
  color: var(--brand-color, #1e1b4b);
}

.notif-body { flex: 1; }

.notif-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.notif-text { font-size: 13px; color: #6b7280; margin: 0; }

.notif-time { font-size: 12px; color: #9ca3af; }

.notif-badge {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--brand-color, #1e1b4b);
  padding: 2px 8px;
  border-radius: 10px;
  align-self: flex-start;
  flex-shrink: 0;
}

/* Points */
.points-balance-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: linear-gradient(135deg, var(--brand-color, #1e1b4b) 0%, #2d2a6e 100%);
  border-radius: 16px;
  padding: 28px 32px;
  color: #fff;
  margin-bottom: 4px;
}

.points-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}

.points-info { flex: 1; }

.points-number {
  display: block;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
}

.points-label {
  font-size: 15px;
  opacity: .85;
}

.points-hint { font-size: 13px; opacity: .75; }
.points-hint p { margin: 2px 0; }

.points-table { margin-top: 12px; }

.points-table-head,
.points-table-row {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr 1fr;
  gap: 8px;
  padding: 10px 14px;
  font-size: 14px;
}

.points-table-head {
  background: #f3f4f6;
  border-radius: 8px 8px 0 0;
  font-weight: 700;
  color: #374151;
}

.points-table-row {
  border-bottom: 1px solid #f3f4f6;
  color: #374151;
}

.points-table-row:last-child { border-bottom: none; }

/* ================================================================
   CHECKOUT PAGES
   ================================================================ */

.checkout-countdown {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 10px;
  margin-bottom: 24px;
  font-size: 14px;
  color: #92400e;
}

.checkout-countdown i { font-size: 18px; }

.checkout-property-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
  flex-wrap: wrap;
}

.checkout-property-img {
  width: 90px;
  height: 70px;
  object-fit: cover;
  border-radius: 10px;
  flex-shrink: 0;
}

.checkout-property-info { flex: 1; }

.checkout-property-info h4 {
  font-size: 17px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 4px;
}

.checkout-property-info p {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 4px;
}

.checkout-ref { font-size: 13px; color: #9ca3af; }

.checkout-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--brand-color, #1e1b4b);
  text-decoration: none;
  font-weight: 600;
}

.checkout-back-link:hover { text-decoration: underline; }

.stay-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 16px;
}

.stay-detail-item { display: flex; flex-direction: column; gap: 2px; }

.stay-detail-label { font-size: 12px; color: #9ca3af; font-weight: 600; }

.stay-detail-value { font-size: 15px; font-weight: 700; color: #1f2937; }

.stay-special-request {
  padding: 12px 16px;
  border-top: 1px solid #f3f4f6;
}

.price-breakdown-list { padding: 16px; }

.price-breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 14px;
  color: #374151;
}

.price-breakdown-total {
  font-weight: 700;
  font-size: 16px;
  color: #1f2937;
  border-top: 2px solid #f3f4f6;
  padding-top: 12px;
  margin-top: 4px;
}

.checkout-sidebar {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,.08);
  position: sticky;
  top: 80px;
  overflow: hidden;
}

.checkout-sidebar-section {
  padding: 20px 24px;
  border-bottom: 1px solid #f3f4f6;
}

.checkout-sidebar-section:last-child { border-bottom: none; }

.checkout-sidebar-section h5 {
  font-size: 15px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 12px;
}

.checkout-code-form {
  display: flex;
  gap: 8px;
}

.checkout-code-form input {
  flex: 1;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  outline: none;
}

.checkout-code-form input:focus { border-color: var(--brand-color, #1e1b4b); }

.checkout-code-form button {
  padding: 8px 16px;
  background: var(--brand-color, #1e1b4b);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.checkout-code-form button:hover { background: #2d2a6e; }

.checkout-feedback {
  font-size: 13px;
  margin-top: 6px;
}

.checkout-discount-applied {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 12px;
  background: #d1fae5;
  color: #065f46;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
}

.checkout-points-balance {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 10px;
}

.checkout-total-label {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 4px;
}

.checkout-total-amount {
  font-size: 28px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 12px;
}

.checkout-secure-note {
  font-size: 12px;
  color: #9ca3af;
  margin-bottom: 14px;
}

.checkout-proceed-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  font-size: 16px;
}

/* Gateway selector */
.gateway-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px;
}

.gateway-option {
  padding: 10px 18px;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gateway-option:hover { border-color: var(--brand-color, #1e1b4b); }

.gateway-option.selected { border-color: var(--brand-color, #1e1b4b); }

.gateway-option img { height: 28px; object-fit: contain; }

.pay-now-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  margin-top: 8px;
}

/* Success & Failed pages */
.checkout-success-card,
.checkout-failed-card {
  text-align: center;
  background: #fff;
  border-radius: 16px;
  padding: 48px 32px;
  box-shadow: 0 4px 24px rgba(0,0,0,.08);
  margin: 24px 0 40px;
}

.checkout-success-icon {
  font-size: 64px;
  color: #10b981;
  margin-bottom: 20px;
}

.checkout-failed-icon {
  font-size: 64px;
  color: #ef4444;
  margin-bottom: 20px;
}

.checkout-success-card h2,
.checkout-failed-card h2 {
  font-size: 26px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 10px;
}

.checkout-success-card p,
.checkout-failed-card p {
  color: #6b7280;
  margin-bottom: 8px;
}

.checkout-failed-note {
  font-size: 13px;
  color: #9ca3af;
  margin-bottom: 24px !important;
}

.checkout-ref-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: #f3f4f6;
  border-radius: 12px;
  padding: 16px 24px;
  margin: 20px 0;
}

.checkout-ref-label { font-size: 13px; color: #9ca3af; }

.checkout-ref-number {
  font-size: 22px;
  font-weight: 700;
  color: var(--brand-color, #1e1b4b);
  letter-spacing: .5px;
}

.checkout-success-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

/* ================================================================
   RESPONSIVE ADJUSTMENTS
   ================================================================ */

@media (max-width: 768px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-thumbs { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .gallery-thumbs img { height: 120px; }
  .gallery-main img { height: 240px; }
  .booking-card-item { flex-direction: column; }
  .booking-card-img { width: 100%; height: 160px; }
  .booking-card-body { padding: 14px; }
  .points-balance-card { flex-direction: column; text-align: center; }
  .points-table-head,
  .points-table-row { grid-template-columns: 1fr 1fr; }
  .chat-messages { height: 280px; }
  .checkout-property-card { flex-direction: column; align-items: flex-start; }
  .stay-details-grid { grid-template-columns: 1fr; }
  .checkout-sidebar { position: static; }
}






/* ============================================================
   Design Additions — June-8 (filter pills, modals, map, tourist, empty)
   ============================================================ */
/* ======================================= page-banner ====================================== */
.units-banner{
  height: 450px;
}
.page-banner .search-box-card{
  display: flex;
    gap: 15px;
    align-items: end;
}
.page-banner .search-box{
    position: relative;
    z-index: 2;
    background: #fff;
    width: 77%;
    max-width: 100%;
    border-radius: 16px;
    padding: 6px 16px 10px;
    display: flex;
    gap: 15px;
    align-items: end;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    margin: 0 30px 0 15px;
  }
.page-banner .field{
  flex: 1;
    min-width: 180px;
    display: flex;
    flex-direction: row;
    gap: 9px;
    border-left: 1px solid rgba(19, 19, 19, 0.1);
}
.page-banner .field label{
  margin-top: 5px;
}
.page-banner .field label i{
  color:#131313;
}
.page-banner .field span{
  height: 32px;
  padding: 4px 0px 0 15px;
  font-size: 14px;
  outline: none;
  float: right;
  text-align: right;
  border: none;
  background: none;
  box-shadow: none;
  font-family: "Font-1";
  color: #131313;
}
.page-banner .search-box-card .showonmap{
  line-height: 33px;
  background: #27283D;
  color: #fff;
  border-radius: 16px;
  padding: 6px 14px 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  height: 47px;
  width: 180px;
}
.page-banner .search-box-card .showonmap span{
  font-size: 14px;
  padding-right: 8px;
}
.page-banner .top-search{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width: 100%;
  margin-bottom:0px;
}
.page-banner .filters-box{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 28px 30px;
}
.page-banner .filter-item{
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 8px;
  padding: 0 11px;
  height: 42px;
  position: relative;
}
.page-banner .filter-item i,
.page-banner .filter-item svg{
  color:#AC7330;
  font-size:14px;
}
.filter-item select{
  border:none;
  background:transparent;
  font-size:14px;
  color:#111827;
  outline:none;
  cursor:pointer;
}
.filter-item span{
  padding-left: 16px; 
  color: #131313;
  font-size: 14px;
}
.filter-item i.fa-chevron-down::before{
  display: none;
}
.filter-item i.fa-chevron-down{
  border-bottom: 2px solid #999;
  border-right: 2px solid #999;
  content: '';
  display: block;
  height: 5px;
  margin-top: -4px;
  pointer-events: none;
  position: absolute;
  right: auto;
  left: 12px;
  top: 50%;
  -webkit-transform-origin: 66% 66%;
  -ms-transform-origin: 66% 66%;
  transform-origin: 66% 66%;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  width: 5px;
}
/* ======properties-grid ============ */
.properties-section{
  padding:80px 0;
  background:#fff;
}
.properties-section .property-card{
  max-width: 300px;
}
.tourist-section{
  padding:80px 0;
  background:#fff;
}
.tourist-card{
  position:relative;
  height:280px;
  border-radius:16px;
  overflow:hidden;
  display:block;
}
.tourist-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:0.5s;
}
.tourist-card:hover img{
  transform:scale(1.05);
}
.overlay{
  position:absolute;
  inset:0;
  background:
  linear-gradient(
    to bottom,
    rgba(0,0,0,0.7),
    rgba(0,0,0,0.2),
    transparent
  );
}
.card-content{
  position:absolute;
  right:16px;
  bottom:16px;
  color:#fff;
}
.card-content h3{
  font-size:22px;
  color: #fff;
  margin-bottom:0px;
}
.card-content p{
  font-size:14px;
  color: rgba(255, 255, 255, 0.9);
}
/* ======================================= empty-search-page ============================= */
.empty-section{
  position: relative;
  padding: 80px 0;
}
.empty-section .empty-search-card{
  width: 35%;
  margin: auto;
  display: block;
  align-items: center;
}
.empty-section .empty-search-card img{
  text-align: center;
  width: 443px;
  margin: auto;
  margin-bottom: 28px;
}
.empty-section .empty-search-card h4{
  color: #131313;
  font-size: 24px;
  padding-bottom: 0px;
  text-align: center;
}
.empty-section .empty-search-card p{
  color: rgba(94, 97, 102, 0.8);
  font-size: 15px;
  padding-bottom: 20px;
  text-align: center;
}
#Search-city .login-modal,#holidayHomesModal .login-modal,
#districtModal .login-modal{
    width: 100%;
    max-width: 420px;
    position: absolute;
    top: 50%;
    right: 58px;
    overflow: hidden;
    border-radius: 16px;
    height: 250px;
}
#Search-city .field{
    flex:1;
    min-width:180px;
    display:flex;
    flex-direction:column;
    gap:0;
    margin-top: 10px;
}
#Search-city .field label{
  font-size: 14px;
  color: #979797;
  font-family: "Font-1";
  font-weight: 500;
  margin-bottom: 10px;
}
#Search-city .field select{
  height: 32px;
  padding: 0 0px 0 15px;
  font-size: 14px;
  outline: none;
  float: right;
  text-align: right;
  border: none;
  background: none;
  box-shadow: none;
  font-family: "Font-1";
  color: #131313;
}
#Search-city .field .nice-select{
  border: 1px solid rgba(19, 19, 19, 0.05);
  height: 45px;
  border-radius: 8px;
  padding: 7px 10px;
  color: #B5B5B5;
}
#Search-city .field .nice-select::placeholder{
  color: #B5B5B5;
}
#Search-city .search-btns-action{
  margin-top: 30px;
}
#Search-city .search-city-btn,
#holidayHomesModal .apply-btn,
#districtModal .apply-btn,
#priceModal .apply-btn,
#bedroomsModal .apply-btn,
#ratingModal .apply-btn,
#distanceModal .apply-btn,
#arrangeModal .apply-btn,
#filterModal .apply-btn{
  background: #27283D;
  color: #fff;
  border-radius: 12px;
  width: 170px;
  padding: 10px;
  box-shadow: none;
  border: none;
  margin-left: 20px;
}
#Search-city .reset-btn,
#holidayHomesModal .reset-btn,
#districtModal .reset-btn,
#priceModal .reset-btn,
#bedroomsModal .reset-btn,
#ratingModal .reset-btn,
#distanceModal .reset-btn,
#arrangeModal .reset-btn,
#filterModal .reset-btn{
  border: 1px solid #E0E0E0;
  color: #131313;
  width: 165px;
  padding: 10px;
  box-shadow: none;
  border-radius: 12px;
  background: #fff;
}
#holidayHomesModal .apply-btn{
  margin-left: 10px;
  width: 160px;
}
#holidayHomesModal .login-modal{
  width: 100%;
  max-width: 420px;
  top: 40%;
  height: 320px;
  background:#fff;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding: 8px 15px;
}
#districtModal .login-modal{
  right: 18%;
  height: 320px;
  background:#fff;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding: 8px 15px;
}
#priceModal .login-modal{
  top: 20%;
  right: -80px;
  height: 293px;
  max-width: 520px;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 8px 15px;
  margin-bottom: 20px;
}
#distanceModal .login-modal{
  top: 20%;
  right: 20%;
  height: 293px;
  max-width: 520px;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 8px 15px;
  margin-bottom: 20px;
}
#arrangeModal .login-modal{
  top: 20%;
  right: 22%;
  height: 293px;
  max-width: 520px;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 8px 15px;
  margin-bottom: 20px;
}
#bedroomsModal .login-modal{
  top: 20%;
  right: -40px;
  height: 293px;
  max-width: 500px;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 8px 10px;
  margin-bottom: 20px;
}
#ratingModal .login-modal{
  top: 20%;
  right: -40px;
  height: 400px;
  max-width: 500px;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 8px 10px;
  margin-bottom: 20px;
}
#filterModal .login-modal{
  top: 20%;
  right: 25%;
  height: 400px;
  max-width: 495px;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 8px 10px;
  margin-bottom: 20px;
}
.modal-title{
  font-size:16px;
  margin-bottom:5px;
  color: #131313;
}
.modal-hint{
  font-size:14px;
  color:#898989;
  margin-bottom:20px;
}
.holiday-options{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  overflow-y:auto;
}
.holiday-option{
  padding:8px 20px;
  border:1px solid #e5e7eb;
  border-radius:8px;
  background:#fff;
  cursor:pointer;
  transition:.3s;
  margin-bottom: 10px;
  font-size: 14px;
}
.holiday-option:hover{
  border-color:#d4af37;
}
.holiday-option.active{
  background:#d4af37;
  color:#fff;
  border-color:#d4af37;
}
#holidayHomesModal .modal-footer,
#districtModal .modal-footer,
#bedroomsModal .modal-footer,
#filterModal .modal-footer{
  flex-shrink:0;
  display:flex;
  flex-wrap: nowrap;
  gap:12px;
  padding:5px 10px;
  border-top:1px solid #e5e7eb;
  background:#fff;
}

.district-search{
  flex-shrink:0;
  margin:10px 15px;
  height:45px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  display:flex;
  align-items:center;
  padding:0 16px;
  gap:10px;
}

.district-search i{
  color:#9ca3af;
}

.district-search input{
  flex:1;
  border:none;
  outline:none;
  font-size:14px;
}
.district-list{
  flex:1;
  overflow-y:auto;
  padding:0 20px;
}
.district-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 0;
  cursor:pointer;
  border-bottom:1px solid #f3f4f6;
}

.district-item:last-child{
  border-bottom:none;
}
.district-item input{
  width:18px;
  height:18px;

  cursor:pointer;
}
.district-item span{
  font-size:15px;
  color:#111827;
}
.price-body{
  padding:10px 10px;
}

.price-range{
  position:relative;
  height:42px;
  margin-bottom:0px;
}

.slider-track{
  position:absolute;
  top:50%;
  left:0;
  right:0;
  height:4px;
  background:#F6F6F6;
  border-radius:999px;
  transform:translateY(-50%);
}
.slider-range{
  position:absolute;
  top:50%;
  height:6px;
  background:#AC7330;
  border-radius:999px;
  transform:translateY(-50%);
}
.price-range input[type="range"]{
  position:absolute;
  width:100%;
  top:50%;
  transform:translateY(-50%);
  background:none;
  pointer-events:none;
  appearance:none;
}

.price-range input[type="range"]::-webkit-slider-thumb{
  appearance:none;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#AC7330;
  cursor:pointer;
  pointer-events:auto;
}
.price-values{
  display:flex;
  justify-content:space-between;
  margin-bottom:25px;
}
.price-values span{
  font-size: 12px;
  color: #131313;
}
.price-inputs{
  display:flex;
  align-items:center;
  gap:12px;
}

.price-inputs input{
  flex:1;
  height:47px;
  width: 120px;
  border:1px solid #e5e7eb;
  border-radius:8px;
  padding:0 16px;
  outline:none;
  text-align: center;
}
#priceModal .modal-footer button{
  margin-left: 10px;
}
#bedroomsModal h4,#ratingModal h4{
  font-size: 16px;
  color: #131313;
  margin-bottom: 25px;
}
.bedrooms-options{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.bedroom-option{
  min-width:45px;
  height:45px;
  border:1px solid #e5e7eb;
  border-radius:8px;
  background:#fff;
  font-size:13px;
  cursor:pointer;
  transition:.3s;
  color: #131313;
}

.bedroom-option:hover{
  border-color:#AC7330;
}
.bedroom-option.active{
  background:#AC7330;
  color:#fff;
  border-color:#AC7330;
}

.comments-title{
  margin-top:28px;
}

.rating-options{
  display:flex;
  gap:12px;

  margin-bottom:10px;
}

.rating-option{
  flex:1;

  height:56px;

  border:1px solid #e5e7eb;
  border-radius:14px;

  background:#fff;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  transition:.3s;
}

.rating-option i{
  color:#FD8E1F;
}

.rating-option.active{
  background:#AC7330;
  color:#fff;
  border-color:#AC7330;
}

.rating-option.active i{
  color:#fff;
}
.comment-options{
  display:flex;
  gap:12px;
}

.comment-option{
  flex:1;
  height:56px;
  border:1px solid #e5e7eb;
  border-radius:14px;
  background:#fff;
  cursor:pointer;
  transition:.3s;
}

.comment-option.active{
  background:#AC7330;
  color:#fff;
  border-color:#AC7330;
}
.filter-section{
  margin-bottom: 25px;
}
.filter-section h4{
  margin-bottom:10px;
  font-size:14px;
}

.hint{
  color:#888;
  font-size:13px;
  margin-bottom:15px;
}
#filterModal .modal-body{
  overflow-y: auto;
}
.price-slider{
  position:relative;
  height:40px;
}
.slider-track{
  position:absolute;
  top:50%;
  width:100%;
  height:4px;
  background:#e5e5e5;
  transform:translateY(-50%);
}

.slider-range{
  position:absolute;
  top:50%;
  height:4px;
  background:#AC7330;
  transform:translateY(-50%);
}

.price-slider input[type="range"]{
  position:absolute;
  width:100%;
  background:none;
  pointer-events:none;
  appearance:none;
}

.price-slider input[type="range"]::-webkit-slider-thumb{
  appearance:none;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#AC7330;
  pointer-events:auto;
  cursor:pointer;
}
.toggle-item{
  display:flex;
  justify-content:space-between;
  align-items:center;

  margin-bottom:25px;
}
.toggle-item svg{
  width: 16px;
  height: 15px;
}
.toggle-item h5{
  margin-bottom:5px;
  font-size: 16px;
}

.toggle-item p{
  font-size:12px;
  color:#888;
}
.switch{
  position:relative;

  width:46px;
  height:26px;
}

.switch input{
  display:none;
}

.slider{
  position:absolute;
  inset:0;
  background:#ddd;
  border-radius:30px;
}

.slider::before{
  content:"";
  position:absolute;
  width:20px;
  height:20px;
  right:3px;
  top:3px;
  background:#fff;
  border-radius:50%;
  transition:.3s;
}

.switch input:checked + .slider{
  background:#b67a2b;
}

.switch input:checked + .slider::before{
  transform:translateX(-20px);
}
.type-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.type-btn{
  height:48px;
  border:1px solid #F6F6F6;
  background:#FDFDFD;
  border-radius:8px;
  cursor:pointer;
}

.type-btn.active{
  background:#b67a2b;
  color:#fff;
  border-color:#b67a2b;
}
.type-btn .fa-star{
  color: #FD8E1F;
}
.type-grid.marafeq .type-btn span{
  font-size: 14px;
  padding-right: 6px;
}

.type-grid.marafeq .type-btn svg{
  width: 16px;
  height: 16px;
}
body.modal-open{
  overflow:hidden;
}
/* ======================================= view-on-map ========================== */
.map-section{
  position:relative;
  width:100%;
  height:880px;
  overflow:hidden;
}
.map-bg{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border:none;
  z-index:1;
}
.map-tabs,
.map-properties-card{
  position:relative;
  z-index:2;
}
.map-section .place-details-compact-container{
  display: none !important;
}
.map-section .map-tabs{
  position:absolute;
  top:24px;
  left:24px;
  display:flex;
  gap:10px;
  z-index:10;
  border-radius:14px;
  height: 53px;
  background: rgba(39, 40, 61, 0.3);
}

.map-section .tab-btn{
  height:45px;
  padding:0 20px;
  border:none;
  background:none;
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
}

.map-section .tab-btn.active{
  margin-top: 3px;
    margin-left: 6px;
    background: #262845;
    color: #fff;
    border-radius: 10px;
}

.map-section .map-pin{
  position:absolute;
  font-size:40px;
  color:#AC7330;
  cursor:pointer;
  z-index: 98;
}
.map-pin{
  position:absolute;
  width:50px;
  height:60px;
  background:url("../image/icon/🦆\ icon\ _map\ marker_.svg") no-repeat center;
  background-size:contain;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding-top:7px;
}

.map-pin img{
  width: 29px;
  height: 31px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid #fff;
}
.map-section .pin-1{
  top:20%;
  left:9%;
}

.map-section .pin-2{
  top:35%;
  left:45%;
}

.map-section .pin-3{
  top:60%;
  left:23%;
}

.map-section .pin-4{
  top:75%;
  left:35%;
}
.map-section .pin-5{
  top:75%;
  left:15%;
}
.map-section .pin-6{
  top:25%;
  left:25%;
}
.map-section .pin-7{
  top:55%;
  left:30%;
}
.map-section .pin-8{
  top:85%;
  left:55%;
}
.map-section .map-properties-card{
  position:absolute;
  top:20px;
  right:20px;
  width:440px;
  height:820px;
  background:#fff;
  border-radius:12px;
  display:flex;
  flex-direction:column;
  z-index:98;
}

.map-section .card-header{
  height:55px;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background: #fff !important;
  border-bottom:1px solid #eee;
  border-radius: 12px;
}
.map-section .card-header h3{
  font-size: 15px;
  color: #131313;
}
.map-section .close-btn{
  background:none;
  border:none;
  top: 12px;
  font-size:16px;
  cursor:pointer;
  color: #8C94A3;
}
.map-section .properties-list{
  flex:1;
  overflow-y:auto;
  padding:20px;
}
.map-section .properties-list .property-card{
  width: 400px;
  max-width: 390px;
}
.map-section .card-footer{
  padding:20px;
  border-top:1px solid #eee;
  display:flex;
  gap:12px;
}
.map-section .card-footer button{
  flex:1;
  height:54px;
  border-radius:14px;
  cursor:pointer;
}
.map-section .card-footer button svg{
  margin-left: 6px;
}
.map-section .list-btn{
  background:#fff;
  border:1px solid #ddd;
}

.map-section .filter-btn{
  background:#262845;
  color:#fff;
  border:none;
}