@font-face {
    font-family: 'PlusJakartaSans';
    src: url('../vendor/afd8d40251565c1e5be3dc92.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'PlusJakartaSans';
    src: url('../vendor/53ac11a690da637feb92f86c.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'PlusJakartaSans';
    src: url('./fonts/PlusJakartaSans-Semibold.ttf') format('truetype'); 
    font-weight: 600;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'PlusJakartaSans';
    src: url('../vendor/66500898875ed9c6b244293e.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
  }

  @font-face {
    font-family: 'PlusJakartaSans';
    src: url('../vendor/142976011a7dd15134636b54.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
  }  

  
  @media screen and (min-width: 576px) {
    .container {
      padding-left: 0;
      padding-right: 0;
    }
  }
  
  @media screen and (min-width: 1800px) {
    .container {
      max-width: 1600px;
    }
  }
  
  
  .primaryBtn,
  .whiteBtn {
    font-family: var(--font-family);
    font-size: var(--font-18);
    font-style: normal;
    font-weight: 400;
    line-height: 1.22;
    display: flex;
    padding: var(--gap-10) var(--gap-20) var(--gap-12);
    justify-content: center;
    align-items: center;
    gap: var(--gap-10);
    border-radius: 50px;
    background:#5B4E3F;
    border: 1px solid #5B4E3F;
    box-sizing: border-box;
    transition: all 0.3s ease;
    cursor: pointer;
    width: fit-content;
  }
  
  .primaryBtn {
    color: #FFF;
    background: var(--color-primary);
  }
  
  .primaryBtn:hover {
    background: #FF8026;
  }
  
  .whiteBtn {
    background: #FFF;
    color: var(--color-primary);
  }
  
  .primaryBtn:hover,
  .whiteBtn:hover {
    gap: var(--gap-10);
  }
  
  
  .no-position.swiper-button-prev,
  .no-position.swiper-button-next {
    position: unset !important;
    margin: 0 !important;
    transform: none !important;
  }
  
  .swiper-button-prev,
  .swiper-button-next {
    width: 60px !important;
    height: 60px !important;
    /* border: 1px solid #FFF !important; */
    background: none !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease;
  }
  
  .swiper-button-prev:after,
  .swiper-button-next:after {
    font-size: 23px !important;
    font-weight: 700 !important;
    color: #FFF !important;
    transition: all 0.3s ease;
  }
  
  .swiper-button-prev:hover,
  .swiper-button-next:hover,
  .swiper-button-prev.active,
  .swiper-button-next.active {
    /* border-color: #EEE !important; */
    /* background: #FFF !important; */
  }
  
  .swiper-button-prev:hover:after,
  .swiper-button-next:hover:after,
  .swiper-button-prev.active:after,
  .swiper-button-next.active:after {
    color: var(--color-primary) !important;
  }
  
  .swiper-button-prev.swiper-button-disabled,
  .swiper-button-next.swiper-button-disabled {
    opacity: 1 !important;
  }
  
  .swiper-button-prev.swiper-button-disabled:after,
  .swiper-button-next.swiper-button-disabled:after {
    color: #D9D9D9 !important;
  }
  
  .swiper-button-prev.swiper-button-disabled:hover,
  .swiper-button-next.swiper-button-disabled:hover {
    cursor: not-allowed !important;
    background: #fff !important;
  }
  

  
  .bootstrap-select .dropdown-toggle:focus,
  .bootstrap-select>select.mobile-device:focus+.dropdown-toggle {
    outline-offset: -30px !important;
  }
  
  :root {
    --title-font-family: 'PlusJakartaSans', sans-serif;
    --font-family: 'PlusJakartaSans', sans-serif;
    --font-270: 270px;
    --font-100: 100px;
    --font-80: 80px;
    --font-70: 70px;
    --font-76: 76px;
    --font-72: 72px;
    --font-64: 64px;
    --font-60: 60px;
    --font-56: 56px;
    --font-50: 50px;
    --font-48: 48px;
    --font-46: 46px;
    --font-42: 42px;
    --font-40: 40px;
    --font-38: 38px;
    --font-36: 36px;
    --font-30: 30px;
    --font-32: 32px;
    --font-28: 28px;
    --font-26: 26px;
    --font-24: 24px;
    --font-22: 22px;
    --font-20: 20px;
    --font-18: 18px;
    --font-16: 16px;
    --font-14: 14px;
  
    --component-gap: 120px;
    --gap-175: 175px;
    --gap-140: 140px;
    --gap-100: 100px;
    --gap-90: 90px;
    --gap-80: 80px;
    --gap-72: 72px;
    --gap-70: 70px;
    --gap-60: 60px;
    --gap-50: 50px;
    --gap-40: 40px;
    --gap-30: 30px;
    --gap-25: 25px;
    --gap-24: 24px;
    --gap-22: 22px;
    --gap-20: 20px;
    --gap-14: 14px;
    --gap-12: 12px;
    --gap-10: 10px;
  
    --page-padding: max(15px, calc((100vw - 1600px) / 2));
  }
  
  @media (max-width: 1800px) {
    :root {
      --font-270: 220px;
    }
  }
  
  @media (max-width: 1500px) {
  
    .primaryBtn,
    .whiteBtn {
      padding: 12px 20px;
    }
  
    :root {
      --font-270: 180px;
      --font-100: 90px;
      --font-80: 72px;
      --font-76: 68px;
      --font-70: 65px;
      --font-64: 60px;
      --font-60: 56px;
      --font-56: 52px;
      --font-50: 46px;
      --font-48: 44px;
      --font-46: 42px;
      --font-42: 40px;
      --font-40: 38px;
      --font-36: 34px;
      --font-32: 30px;
      --font-30: 28px;
      --font-28: 26px;
      --font-26: 24px;
      --font-24: 22px;
      --font-22: 20px;
      --font-20: 16px;
      --font-18: 18px;
      --font-16: 16px;
      --font-14: 14px;
  
      --component-gap: 100px;
      --gap-175: 150px;
      --gap-140: 140px;
      --gap-100: 90px;
      --gap-90: 80px;
      --gap-80: 70px;
      --gap-72: 65px;
      --gap-70: 60px;
      --gap-60: 50px;
      --gap-50: 44px;
      --gap-40: 34px;
      --gap-30: 28px;
      --gap-25: 24px;
      --gap-24: 24px;
      --gap-22: 22px;
      --gap-20: 20px;
      --gap-10: 10px;
      --gap-14: 12px;
      --gap-12: 10px;
  
      --page-padding: max(15px, calc((100vw - 1200px) / 2));
    }
  
    .swiper-button-prev,
    .swiper-button-next {
      width: 50px !important;
      height: 50px !important;
    }
  }
  
  @media (max-width: 1280px) {
  
    .primaryBtn,
    .whiteBtn {
      padding: 16px 24px;
    }
  
    :root {
      --font-270: 170px;
      --gap-140: 110px;
      --font-100: 80px;
      --font-80: 70px;
      --font-76: 50px;
      --font-70: 60px;
      --font-64: 56px;
      --font-60: 52px;
      --font-56: 48px;
      --font-50: 44px;
      --font-48: 40px;
      --font-46: 40px;
      --font-42: 38px;
      --font-40: 36px;
      --font-38: 34px;
      --font-36: 26px;
      --font-32: 26px;
      --font-30: 26px;
      --font-28: 24px;
      --font-26: 22px;
      --font-24: 22px;
      --font-22: 20px;
      --font-20: 14px;
      --font-18: 18px;
      --font-16: 15px;
      --font-14: 14px;
  
      --component-gap: 90px;
      --gap-175: 120px;
      --gap-100: 80px;
      --gap-90: 75px;
      --gap-80: 65px;
      --gap-72: 55px;
      --gap-70: 50px;
      --gap-60: 45px;
      --gap-50: 40px;
      --gap-40: 30px;
      --gap-30: 25px;
      --gap-25: 24px;
      --gap-24: 24px;
      --gap-22: 22px;
      --gap-14: 10px;
      --gap-12: 8px;
  
      --page-padding: max(15px, calc((100vw - 1100px) / 2));
    }
  
    .swiper-button-prev,
    .swiper-button-next {
      width: 42px !important;
      height: 42px !important;
    }
  
    .swiper-button-prev:after,
    .swiper-button-next:after {
      font-size: 18px !important;
    }
  
  }
  
  @media (max-width: 1200px) {
    :root {
      --font-270: 148px;
      --page-padding: max(15px, calc((100vw - 930px) / 2));
    }
  
    .swiper-button-prev,
    .swiper-button-next {
      width: 40px !important;
      height: 40px !important;
    }
  
    .swiper-button-prev:after,
    .swiper-button-next:after {
      font-size: 16px !important;
    }
    .yingfang-button-prev,
    .yingfang-button-next{
      width: 45px;
      height: 45px;
    }
  }
  
  @media (max-width: 992px) {
  
    .primaryBtn,
    .whiteBtn {
      padding: 14px 30px;
    }
  
    :root {
      --font-270: 110px;
      --font-100: 60px;
      --font-80: 60px;
      --font-76: 30px;
      --font-70: 50px;
      --font-64: 48px;
      --font-60: 44px;
      --font-56: 40px;
      --font-50: 36px;
      --font-48: 34px;
      --font-46: 34px;
      --font-42: 32px;
      --font-40: 32px;
      --font-38: 30px;
      --font-36: 18px;
      --font-32: 24px;
      --font-30: 24px;
      --font-28: 22px;
      --font-26: 20px;
      --font-24: 20px;
      --font-22: 18px;
      --font-20: 14px;
      --font-18: 16px;
      --font-16: 14px;
      --font-14: 13px;
  
      --component-gap: 70px;
      --gap-175: 100px;
      --gap-140: 100px;
      --gap-100: 70px;
      --gap-90: 60px;
      --gap-80: 60px;
      --gap-72: 55px;
      --gap-70: 40px;
      --gap-60: 35px;
      --gap-50: 30px;
      --gap-40: 20px;
      --gap-30: 20px;
      --gap-25: 20px;
      --gap-24: 20px;
      --gap-22: 20px;
      --gap-20: 15px;
      --gap-10: 8px;
      --gap-14: 8px;
      --gap-12: 6px;
      --page-padding: max(15px, calc((100vw - 720px) / 2) + 15px);
    }
  
  }
  
  @media (max-width: 768px) {
  
    .primaryBtn,
    .whiteBtn {
      padding: 12px 24px;
    }
  
    :root {
      --font-270: 82px;
      --font-100: 46px;
      --font-80: 50px;
      --font-76: 36px;
      --font-70: 42px;
      --font-64: 40px;
      --font-60: 36px;
      --font-56: 28px;
      --font-50: 28px;
      --font-48: 26px;
      --font-46: 24px;
      --font-42: 22px;
      --font-40: 22px;
      --font-38: 24px;
      --font-36: 20px;
      --font-32: 20px;
      --font-30: 19px;
      --font-28: 18px;
      --font-26: 18px;
      --font-24: 18px;
      --font-22: 16px;
      --font-20: 14px;
      --font-18: 14px;
      --font-16: 13px;
      --font-14: 12px;
  
      --component-gap: 45px;
      --gap-175: 70px;
      --gap-140: 60px;
      --gap-100: 60px;
      --gap-90: 35px;
      --gap-80: 32px;
      --gap-70: 30px;
      --gap-72: 35px;
      --gap-60: 25px;
      --gap-50: 20px;
      --gap-40: 18px;
      --gap-30: 15px;
      --gap-25: 18px;
      --gap-24: 18px;
      --gap-22: 18px;
      --gap-20: 12px;
      --gap-14: 6px;
      --gap-12: 4px;
  
      --page-padding: max(15px, calc((100vw - 540px) / 2) + 15px);
    }
  
    .swiper-button-prev,
    .swiper-button-next {
      width: 32px !important;
      height: 32px !important;
    }
  
    .swiper-button-prev:after,
    .swiper-button-next:after {
      font-size: 14px !important;
    }
  }
  
  @media (max-width: 576px) {
    :root {
      --font-270: 54px;
      --font-100: 32px;
      --font-80: 40px;
      --font-76: 36px;
      --font-70: 34px;
      --font-64: 32px;
      --font-60: 28px;
      --font-56: 26px;
      --font-50: 24px;
      --font-48: 22px;
      --font-46: 22px;
      --font-42: 20px;
      --font-40: 20px;
      --font-36: 18px;
      --font-30: 17px;
      --font-28: 16px;
      --font-26: 16px;
      --font-24: 16px;
      --font-22: 14px;
      --font-20: 12px;
      --font-18: 13px;
      --font-16: 12px;
      --font-14: 12px;
  
      --component-gap: 25px;
      --gap-175: 60px;
      --gap-140: 40px;
      --gap-100: 40px;
      --gap-90: 20px;
      --gap-80: 28px;
      --gap-72: 25px;
      --gap-70: 14px;
      --gap-60: 16px;
      --gap-50: 15px;
      --gap-40: 12px;
      --gap-30: 10px;
      --gap-25: 12px;
      --gap-24: 12px;
      --gap-22: 12px;
      --gap-20: 8px;
      --gap-10: 6px;
      --gap-14: 4px;
      --gap-12: 3px;
  
      --page-padding: max(15px, calc((100vw - 450px) / 2));
    }
  
    .primaryBtn,
    .whiteBtn {
      padding: 8px 16px;
    }
  
    .primaryBtn:hover svg,
    .whiteBtn:hover svg {
      width: 13px;
    }
  
    .swiper-button-prev,
    .swiper-button-next {
      width: 28px !important;
      height: 28px !important;
    }
  
    .swiper-button-prev:after,
    .swiper-button-next:after {
      font-size: 11px !important;
    }
  }
  
  @media screen and (max-width: 480px) {
    :root {
      --page-padding: calc((100vw - 360px) / 2 + 15px);
    }
  
    .container {
      max-width: 360px;
    }
  }