@font-face {
    font-family: 'Bubblegum';
    src: url('./fonts/BubblegumSans-Regular.ttf') format('truetype');
    font-style: normal;
}
@font-face {
    font-family: 'roboto_medium';
    src: url('./fonts/Roboto-Medium.ttf') format('truetype');
    font-style: normal;
}
@font-face {
    font-family: 'roboto_regular';
    src: url('./fonts/Roboto-Regular.ttf') format('truetype');
    font-style: normal;
}


:root {
    --font-78: 78px;
    --font-68: 68px;
    --font-64: 64px;
    --font-60: 60px;
    --font-58: 58px;
    --font-50: 50px;
    --font-46: 46px;
    --font-38: 38px;
    --font-36: 36px;
    --font-32: 32px;
    --font-30: 30px;
    --font-28: 28px;
    --font-24: 24px;
    --font-22: 22px;
    --font-20: 20px;
    --font-18: 18px;
    --font-16: 16px;
    --font-14: 14px;

    --container-gap: 140px;
    --component-gap: 120px;
    --gap-90: 90px;
    --gap-80: 80px;
    --gap-60: 60px;
    --gap-50: 50px;
    --gap-40: 40px;
    --gap-30: 30px;
    --gap-25: 25px;
    --gap-20: 20px;
    --gap-10: 10px;

    --primary-color: #F4C3C1;
    --second-color: #FBE9D0;
    --text-color: #4B2423;

    --font-primary-family: 'Bubblegum', sans-serif;
    --font-middle-family: 'roboto_medium', sans-serif;
    --font-text-family: 'roboto_regular', sans-serif;

}


.pingshang-large-title{
    color: var(--text-color);
    font-family: var(--font-primary-family);
    font-size: var(--font-68);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: capitalize;
}
.pingshang-small-title{
    color: var(--text-color);
    font-family: var(--font-primary-family);
    font-size: var(--font-28);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: capitalize;
}
.pingshang-text{
    color: #EB715A;
    font-family: var(--font-primary-family);
    font-size: var(--font-18);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: capitalize;
}

/* button */
.pingshang-button{
    display: inline-block;
    color: var(--text-color);
    font-family: var(--font-middle-family);
    font-size: var(--font-18);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
    padding: 22px 58px;
    border-radius: 100px;
    background: var(--primary-color);
    transition: all 0.5s;
}
.pingshang-button:hover,
.pingshang-button:active{
    background: #4B2423;
    color: #fff;
}





@media screen and (max-width: 1500px) {
    :root{
        --font-78: 60px;
    }
    .pingshang-button{
        padding: 10px 20px;
    }
}
@media (max-width: 1280px) {
  :root {
    --font-78: 50px;
    --font-68: 60px;
    --font-64: 56px;
    --font-60: 52px;
    --font-58: 48px;
    --font-50: 44px;
    --font-46: 40px;
    --font-38: 36px;
    --font-36: 32px;
    --font-32: 28px;
    --font-30: 26px;
    --font-28: 24px;
    --font-24: 22px;
    --font-22: 18px;
    --font-20: 20px;
    --font-18: 18px;
    --font-16: 15px;
    --font-14: 14px;

    --container-gap: 100px;
    --component-gap: 90px;
    --gap-90: 75px;
    --gap-80: 65px;
    --gap-60: 45px;
    --gap-50: 40px;
    --gap-40: 30px;
    --gap-30: 25px;
  }
}
@media (max-width: 992px) {
  :root {
    --font-78: 40px;
    --font-68: 50px;
    --font-64: 48px;
    --font-60: 44px;
    --font-58: 40px;
    --font-50: 36px;
    --font-46: 34px;
    --font-38: 32px;
    --font-36: 28px;
    --font-32: 24px;
    --font-30: 24px;
    --font-28: 22px;
    --font-24: 20px;
    --font-22: 14px;
    --font-20: 14px;
    --font-18: 16px;
    --font-16: 14px;
    --font-14: 13px;

    --container-gap: 80px;
    --component-gap: 70px;
    --gap-90: 60px;
    --gap-80: 50px;
    --gap-60: 35px;
    --gap-50: 30px;
    --gap-40: 20px;
    --gap-30: 20px;
    --gap-20: 15px;
    --gap-25: 20px;
    --gap-10: 8px;
  }
  .haiwode-title-box{
    gap: 10px;
  }
}
@media (max-width: 768px) {
  :root {
    --font-78: 30px;
    --font-68: 42px;
    --font-64: 40px;
    --font-60: 36px;
    --font-58: 32px;
    --font-50: 28px;
    --font-46: 24px;
    --font-38: 22px;
    --font-36: 20px;
    --font-32: 18px;
    --font-30: 19px;
    --font-28: 18px;
    --font-24: 18px;
    --font-22: 16px;
    --font-20: 16px;
    --font-18: 14px;
    --font-16: 13px;
    --font-14: 12px;

    --container-gap: 50px;
    --component-gap: 45px;
    --gap-90: 35px;
    --gap-80: 30px;
    --gap-60: 25px;
    --gap-50: 20px;
    --gap-40: 18px;
    --gap-30: 15px;
    --gap-20: 12px;
  }
  .haiwode-title-box{
    gap: 5px;
  }
}
@media (max-width: 576px) {
  :root {
    --font-78: 20px;
    --font-68: 34px;
    --font-64: 32px;
    --font-60: 28px;
    --font-58: 26px;
    --font-50: 24px;
    --font-46: 22px;
    --font-38: 20px;
    --font-36: 18px;
    --font-32: 16px;
    --font-30: 17px;
    --font-28: 16px;
    --font-24: 16px;
    --font-22: 12px;
    --font-20: 14px;
    --font-18: 13px;
    --font-16: 12px;
    --font-14: 12px;

    --container-gap: 30px;
    --component-gap: 25px;
    --gap-90: 20px;
    --gap-80: 18px;
    --gap-60: 16px;
    --gap-50: 15px;
    --gap-40: 12px;
    --gap-30: 10px;
    --gap-20: 8px;
    --gap-25: 15px;
    --gap-10: 6px;
  }
}


@media screen and (min-width: 1500px) {
    .container{
        max-width: 1400px;
        padding: 0;
    }
}