.landing-container {
    position: relative;
    display: flex;
    width: 100%;
    height: calc(var(--dimension-ratio) * 723px);
    background-color: var(--main-background-color);
    overflow: hidden;
}

.landing-background-image {
    position: absolute;
    bottom: calc(var(--dimension-ratio) * 5px);
    inset-inline-start: 0;
    width: calc(var(--dimension-ratio) * 400px); 
    height: calc(var(--dimension-ratio) * 414px);
    object-fit: cover;
    z-index: 1;
}

.landing-content{
    flex: 0 0 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: calc(var(--dimension-ratio) * 20px);
    padding-inline-start: calc(var(--dimension-ratio) * 100px);
    z-index: 2;
}

.landing-content h1{
    color: var(--secondary-color);
    width: calc(var(--dimension-ratio) * 1000px);
    font-size: var(--font-size-48);
    font-weight: 500;
    line-height: calc(var(--dimension-ratio) * 59.76px);
    letter-spacing: 0.17249999940395355px;
    text-align: start;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}

.landing-content p{
    color: var(--sub-secondary-color);
    width: calc(var(--dimension-ratio) * 958px);
    font-size: var(--font-size-28);
    font-weight: 500;
    line-height: calc(var(--dimension-ratio) * 42px);
    letter-spacing: 0.17249999940395355px;
    text-align: start;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}

.landing-buttons{
    padding-top: calc(var(--dimension-ratio) * 60px);
    gap: calc(var(--dimension-ratio) * 30px);
    display: flex;
    justify-content: center;
}

.landing-buttons button{
    background-color: var(--main-color);
    color: var(--button-text-color);
    width: calc(var(--dimension-ratio) * 350px);
    height: calc(var(--dimension-ratio) * 64px);
    border-radius: calc(var(--dimension-ratio) * 12px);
    border: none;
    font-size: var(--font-size-28);
    font-weight: 500;
    line-height: calc(var(--dimension-ratio) * 36px);
    letter-spacing: 0.17249999940395355px;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}


.landing-buttons a img {
    width: calc(var(--dimension-ratio) * 25px);
    /* height: calc(var(--dimension-ratio) * 16.25px); */
}

.landing-image{
    flex: 0 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.landing-image-head {
    background-color: #A2567A;
    height:  calc(var(--dimension-ratio) * 100px);
    width: calc(var(--dimension-ratio) * 493px);
} 

.landing-image-container {
    background-color: #A2567A;
    height:  calc(var(--dimension-ratio) * 550px);
    width: calc(var(--dimension-ratio) * 493px);
    border-radius: 0 0 50% 50%;
    position: relative;
} 

.landing-image-container .landing-image {
    width: calc(var(--dimension-ratio) * 404px);
    height: calc(var(--dimension-ratio) * 404px);
    position: absolute;
    inset-inline-start: 7%;
}

.landing-image-container .landing-back {
    width: calc(var(--dimension-ratio) * 172px);
    height: calc(var(--dimension-ratio) * 153px);
    position: absolute;
    top: calc(var(--dimension-ratio) * 255px);
    inset-inline-start: 57%;
}

@media (max-width: 635px) {
    .landing-container{
      height: 270px !important;
    }   
    .landing-image{
        display: none !important;
    }
    .landing-content h1{
      width: 285px !important;
      font-size: 21px !important;
      line-height: 24px !important;
    }
    .landing-buttons button {
      width: 155px !important;
      height: 30px !important;
      border-radius: 6px !important;
      font-size: 15px !important;
    }
    .landing-buttons a {
      width: 130px !important;
      height: 27px !important;
      font-size: 10px !important;
      gap: 5px !important;
    }
    .landing-buttons a img {
      width: 10px !important;
    }
  }