:root {
  --h0-font-size:calc(var(--title-scale) * 90px);
  --h0-line-height:calc(var(--title-scale) * 106%);

  --h1-font-size:calc(var(--title-scale) * 50px);
  --h1-line-height:calc(var(--title-scale) * 54px);

  --h2-font-size:calc(var(--title-scale) * 46px);
  --h2-line-height:calc(var(--title-scale) * 50px);

  --h3-font-size:calc(var(--title-scale) * 34px);
  --h3-line-height:calc(var(--title-scale) * 38px);

  --h4-font-size:calc(var(--title-scale) * 26px);
  --h4-line-height:calc(var(--title-scale) * 32px);

  --h5-font-size:calc(var(--title-scale) * 22px);
  --h5-line-height:calc(var(--title-scale) * 26px);

  --h6-font-size:calc(var(--title-scale) * 18px);
  --h6-line-height:calc(var(--title-scale) * 22px);

  --text-1-font-size:calc(var(--body-scale) * 18px);
  --text-1-line-height:calc(var(--body-scale) * 22px);

  --text-2-font-size:calc(var(--body-scale) * 14px);
  --text-2-line-height:calc(var(--body-scale) * 18px);

  --text-3-font-size:calc(var(--body-scale) * 16px);
  --text-3-line-height:calc(var(--body-scale) * 18px);

  --text-4-font-size:calc(var(--body-scale) * 12px);
  --text-4-line-height:calc(var(--body-scale) * 16px);

  --text-5-font-size:calc(var(--body-scale) * 10px);
  --text-5-line-height:calc(var(--body-scale) * 14px);

  --text-price-1-font-size:calc(var(--body-scale) * 32px);
  --text-price-1-line-height:calc(var(--body-scale) * 32px);

  --text-price-2-font-size:calc(var(--body-scale) * 18px);
  --text-price-2-line-height:calc(var(--body-scale) * 18px);

  --text-button-1-font-size:calc(var(--body-scale) * 14px);
  --text-button-1-line-height:calc(var(--body-scale) * 14px);

  --text-button-2-font-size:calc(var(--body-scale) * 16px);
  --text-button-2-line-height:calc(var(--body-scale) * 16px);

  --page-padding:40px;
}

html,
body{
  font-family: var(--body-font);
  font-size:var(--text-3-font-size);
  line-height:var(--text-3-line-height);
}

h1,h2,h3,h4,h5,h6,p{
  margin:0;
  font-weight:400;
}

h1,h2,h3,h4,h5,h6,
.font-h0,.font-h1,.font-h2,.font-h3,.font-h4,.font-h5,.font-h6{
  text-transform: var(--title-transform);
}

.font-h0{
  font-size:var(--h0-font-size);
  line-height:var(--h0-line-height);
  font-family: var(--title-font);
}

h1,.font-h1{
  font-size:var(--h1-font-size);
  line-height:var(--h1-line-height);
  font-family: var(--title-font);
  font-weight: 600;
}

h2,.font-h2{
  font-size:var(--h2-font-size);
  line-height:var(--h2-line-height);
  font-family: var(--title-font);
  font-weight: 600;
}

h3,.font-h3{
  font-size:var(--h3-font-size);
  line-height:var(--h3-line-height);
  font-family: var(--title-font);
  font-weight: 600;
}

h4,.font-h4{
  font-size:var(--h4-font-size);
  line-height:var(--h4-line-height);
  font-family: var(--title-font);
  font-weight: 600;
}

h5,.font-h5{
  font-size:var(--h5-font-size);
  line-height:var(--h5-line-height);
  font-family: var(--title-font);
  font-weight: 600;
}

h6,.font-h6{
  font-size:var(--h6-font-size);
  line-height:var(--h6-line-height);
  font-family: var(--title-font);
  font-weight: 600;
}

.font-text-1{
  font-size:var(--text-1-font-size);
  line-height:var(--text-1-line-height);
  font-family: var(--body-font);
  font-weight: 500;
}

.font-text-2{
  font-size:var(--text-2-font-size);
  line-height:var(--text-2-line-height);
  font-family: var(--body-font);
  font-weight: 500;
}

.font-text-3{
  font-size:var(--text-3-font-size);
  line-height:var(--text-3-line-height);
  font-family: var(--body-font);
  font-weight: 500;
}

.font-text-3-2{
  font-size:var(--text-3-font-size);
  line-height:var(--text-3-line-height);
  font-family: var(--body-font);
  font-weight: 600;
}

.font-text-4{
  font-size:var(--text-4-font-size);
  line-height:var(--text-4-line-height);
  font-family: var(--body-font);
  font-weight: 500;
}

.font-text-5{
  font-size:var(--text-5-font-size);
  line-height:var(--text-5-line-height);
  font-family: var(--body-font);
  font-weight: 500;
}

.font-price-1{
  font-size:var(--text-price-1-font-size);
  line-height:var(--text-price-1-line-height);
  font-family: var(--body-font);
  font-weight: 600;
}

.font-price-2{
  font-size:var(--text-price-2-font-size);
  line-height:var(--text-price-2-line-height);
  font-family: var(--body-font);
  font-weight: 600;
}

button,
.button{
  font-family: var(--button-font);
  font-size:var(--text-button-1-font-size);
  line-height:var(--text-button-1-line-height);
  text-transform: var(--button-transform);
  font-weight: 500;
  cursor: pointer;
}

.v-button{
  font-family: var(--button-font);
  font-size:var(--text-button-1-font-size);
  line-height:var(--text-button-1-line-height);
  text-transform: var(--button-transform);
  font-weight: 500;
  padding:15px 24px;
  color: rgb(var(--color-button-text));
  box-shadow: inset 0 0 0 var(--button-border-width, 1px) rgb(var(--color-button-border),0.3);
  background-color: rgb(var(--color-button-background));
  text-decoration: none;
  border: 0;
  overflow: hidden;
  display: flex;
  gap: 10px;
}

.v-button:hover,
.v-button.v-button--secondary{
  box-shadow: inset 0 0 0 var(--button-border-width, 1px) rgb(var(--color-button-secondary-border),0.3);
  color: rgb(var(--color-button-secondary-text));
  background-color: rgb(var(--color-button-secondary-background));
}

.v-button.rounded{
  border-radius:50px;
}

.v-button .button-icon{
  position: relative;
  width: 9px;
  height: 9px;
  display: inline-block;
}

.v-button .button-icon .icon-1,
.v-button .button-icon .icon-2{
  transition: all 0.3s;
}
.v-button .button-icon .icon-1{
  position: absolute;
  opacity: 0;
  transform: translateX(-32px) translateY(32px);
}
.v-button .button-icon .icon-2{
  position: absolute;
  opacity: 1;
  transform: translateX(0px) translateY(0px);
}

.v-button:hover .icon-1{
  opacity: 1;
  transform: none;
}

.v-button:hover .icon-2{
  opacity: 0;
  transform: translateX(32px) translateY(-32px);
}

.font-button-1{
  font-family: var(--button-font);
  font-size:var(--text-button-font-size);
  line-height:var(--text-button-line-height);
  text-transform: var(--button-transform);
  font-weight: 500;
}

.font-button-2{
  font-family: var(--button-font);
  font-size:var(--text-button-2-font-size);
  line-height:var(--text-button-2-line-height);
  text-transform: var(--button-transform);
  font-weight: 500;
}
.empty-image-class{
  background-color: rgba(var(--color-text), 0.05);
  width:100%;
  height:100%;
}

section{
  background-color: rgba(var(--color-background));
}

img{
  width: 100%;
  height: 100%;
  object-fit:cover;
}

.fit-contain{
  object-fit:contain;
}
.fit-fill{
  object-fit: fill;
}
.min-w-full {
  min-width: 100%;
}

.max-w-full {
  max-width: 100%;
}

.max-w-2xs {
  max-width: 365px;
}

.max-w-xs {
  max-width: 530px;
}

.max-w-sm {
  max-width: 672px;
}

.max-w-md {
  max-width: 864px;
}

.max-w-lg {
  max-width: 1024px;
}

.max-w-xl {
  max-width: 1216px;
}

.max-w-2xl {
  max-width: 1376px;
}

.font-weight-700{
  font-weight: 700;
}
.font-weight-600{
  font-weight: 600;
}
.font-weight-500{
  font-weight: 500;
}
.font-weight-400{
  font-weight: 400;
}
.font-weight-300{
  font-weight: 300;
}

.opacity-10{
  opacity: 1;
}
.opacity-9{
  opacity: 0.9;
}
.opacity-8{
  opacity: 0.8;
}
.opacity-7{
  opacity: 0.7;
}
.opacity-6{
  opacity: 0.6;
}
.opacity-5{
  opacity: 0.5;
}
.opacity-4{
  opacity: 0.5;
}
.opacity-3{
  opacity: 0.3;
}
.opacity-2{
  opacity: 0.2;
}
.opacity-1{
  opacity: 0.1;
}

.page-padding{
    padding-inline: var(--page-padding);
}

.page-width{
    width: 100%;
    max-width: var(--page-width);
    margin: auto;
}
/* @media(min-width:1440px){
  :root {
    --h0-font-size:calc(var(--title-scale) * 90px);
    --h1-font-size:calc(var(--title-scale) * 60px);
    --h2-font-size:calc(var(--title-scale) * 48px);
    --h3-font-size:calc(var(--title-scale) * 36px);
    --h4-font-size:calc(var(--title-scale) * 24px);
    --h5-font-size:calc(var(--title-scale) * 18px);

    --text-1-font-size:calc(var(--body-scale) * 20px);
    --text-2-font-size:calc(var(--body-scale) * 18px);
    --text-3-font-size:calc(var(--body-scale) * 16px);
    --text-4-font-size:calc(var(--body-scale) * 14px);
    --text-5-font-size:calc(var(--body-scale) * 12px);

    --text-price-font-size:calc(var(--body-scale) * 18px);
    --text-button-font-size:calc(var(--body-scale) * 16px);
  }
} */

/* @media (max-width: 1024px) {
  :root {
    --h0-font-size:calc(var(--title-scale) * 80px);
    --h1-font-size:calc(var(--title-scale) * 58px);
    --h2-font-size:calc(var(--title-scale) * 48px);
    --h3-font-size:calc(var(--title-scale) * 38px);
    --h4-font-size:calc(var(--title-scale) * 26px);
    --h5-font-size:calc(var(--title-scale) * 20px);

    --text-1-font-size:calc(var(--body-scale) * 22px);
    --text-2-font-size:calc(var(--body-scale) * 20px);
    --text-3-font-size:calc(var(--body-scale) * 18px);
    --text-4-font-size:calc(var(--body-scale) * 16px);
    --text-5-font-size:calc(var(--body-scale) * 14px);
    --text-price-font-size:calc(var(--body-scale) * 20px);
    --text-button-font-size:calc(var(--body-scale) * 18px);

    --page-padding:35px;
  }
} */


@media (max-width: 959px) {
    :root {
        --h0-font-size:calc(var(--title-scale) * 10.6667vw);

        --h1-font-size:calc(var(--title-scale) * 6.6667vw);
        --h1-line-height:calc(var(--title-scale) * 7.2vw);

        --h2-font-size:calc(var(--title-scale) * 5.6vw);
        --h2-line-height:calc(var(--title-scale) * 6.1333vw);

        --h3-font-size:calc(var(--title-scale) * 4.8vw);
        --h3-line-height:calc(var(--title-scale) * 5.3333vw);

        --h4-font-size:calc(var(--title-scale) * 4.2667vw);
        --h4-line-height:calc(var(--title-scale) * 4.8vw);

        --h5-font-size:calc(var(--title-scale) * 4vw);
        --h5-line-height:calc(var(--title-scale) * 4.5333vw);

        --h6-font-size:calc(var(--title-scale) * 3.7333vw);
        --h6-line-height:calc(var(--title-scale) * 4.2667vw);

        --text-1-font-size:calc(var(--body-scale) * 3.7333vw);
        --text-1-line-height:calc(var(--body-scale) * 4.2667vw);

        --text-2-font-size:calc(var(--body-scale) * 3.4667vw);
        --text-2-line-height:calc(var(--body-scale) * 4vw);

        --text-3-font-size:calc(var(--body-scale) * 3.2vw);
        --text-3-line-height:calc(var(--body-scale) * 3.7333vw);

        --text-4-font-size:calc(var(--body-scale) * 2.9333vw);
        --text-4-line-height:calc(var(--body-scale) * 3.4667vw);

        --text-5-font-size:calc(var(--body-scale) * 2.6667vw);
        --text-5-line-height:calc(var(--body-scale) * 3.2vw);

        --text-price-1-font-size:calc(var(--body-scale) * 4.5333vw);
        --text-price-1-line-height:calc(var(--body-scale) * 4.5333vw);

        --text-price-2-font-size:calc(var(--body-scale) * 3.2vw);
        --text-price-2-line-height:calc(var(--body-scale) * 3.2vw);

        --text-button-1-font-size:calc(var(--body-scale) * 3.2vw);
        --text-button-1-line-height:calc(var(--body-scale) * 3.2vw);

        --text-button-2-font-size:calc(var(--body-scale) * 4vw);
        --text-button-2-line-height:calc(var(--body-scale) * 4vw);

        --page-padding:20px;
    }

    .v-button{
        padding:2.1333vw 4vw;
    }
    .mobile-text-left{
        text-align: left;
    }
    .mobile-text-center{
        text-align: center;
    }
    .mobile-text-right{
        text-align: right;
    }
}