@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

html {
    overflow-x: hidden !important;
    scroll-behavior: smooth!important;
    font-size: clamp(14px, 1vw, 19px);
}

body {
    font-family: 'Montserrat', "Poppins" !important;
    background: var(--background) !important;
    color: var(--main-text) !important;
    overflow-x: hidden !important;
}


body, main {
    zoom: 1 !important;
    transform: none !important;
}

main {
    padding-top: 5.25rem;
}

.section-full {
    padding-top: 2.875rem;
    padding-bottom: 2.875rem;
    padding-left: 4.583vw;
    padding-right: 4.583vw;
}

.section-spacing-x{
    padding-left: 1rem;
    padding-right:1rem;
}

.max-p-w {
    max-width: 38.125rem !important;
}

.max-p-w-big {
    max-width: 47.5rem !important;
}

.max-p-w-small{
    max-width: 27.1875rem;
}

.max-p-w-xsmall {
    max-width: 16rem !important;
}

.border-bottom {
    border-bottom: 0.031rem solid #7B7B7B!important;
}

/* FONT WEIGHT */
.fw-300 {
    font-weight: 300;
}

.fw-400 {
    font-weight: 400;
}

.fw-500 {
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}

.fw-700 {
    font-weight: 700;
}

.fw-800 {
    font-weight: 800;
}

.fw-900 {
    font-weight: 900;
}
/* END FONT WEIGHT */

/* FONT SIZE */
.font-size-10 {
    font-size: 0.625rem !important;
}

.font-size-12 {
    font-size: 0.75rem !important;
}

.font-size-14 {
    font-size: 0.875rem !important;
}

.font-size-16 {
    font-size: 1rem !important;
}

.font-size-18 {
    font-size: 1.125rem !important;
}

.font-size-21 {
    font-size: 1.3125rem !important;
}

.font-size-48 {
    font-size: 3rem !important;
}

.font-size-64 {
    font-size: 4rem !important;
}

.font-size-77 {
    font-size: 4.8125rem !important;
}
/* END FONT SIZE */


/* LINE HEIGHT */
.line-height-20 {
    line-height: 1.25rem;
}

.line-height-24 {
    line-height: 1.5rem;
}

.line-height-32 {
    line-height: 2rem;
}
/* END LINE HEIGHT */


/* MARGIN & PADDING */
.me-34, .me-md-34 { margin-right: 2.125rem; }
.me-40 { margin-right: 2.5rem; }

.mb-11 { margin-bottom: 0.6875rem; }
.mb-14 { margin-bottom: 0.875rem; }
.mb-20 { margin-bottom: 1.25rem !important; }
.mb-58 { margin-bottom: 3.625rem !important; }
.my-16 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.mt-14{ margin-top: 0.875rem }

.pb-14 {
    padding-bottom: 0.875rem !important;
}
.pb-20 { padding-bottom: 1.25rem !important; }
.pb-25 { padding-bottom: 1.5625rem !important; }
.pb-40 { padding-bottom: 2.5rem !important; }

.pt-34 {
    padding-top: 2.125rem !important;
}

.pt-29-rem{
    padding-top:29rem!important;
}
/* END MARGIN  & PADDING */


/* COLORS */
:root {
    --main-text: #000000;
    --gren-text: #B4F4B3;
    --dark-green: #83C182;
    --white-text: #ffffff;
    --background: #ffffff;
    --gray-bg: #F8F8F8;
    --muted-text: #F8F8F8;
    --bg-card-black: #000000BF;
    --backdrop-filter: blur(6px);
}

.main-text{
    color: var(--main-text);
}

.green-text{
    color: var(--gren-text);
}

.white-text{
    color: var(--white-text);
}

.muted-text {
    color: var(--muted-text);
}

/* END COLORS */

/* CUSTOM AOS DISTANCE*/
[data-aos="fade-up"] {
  -webkit-transform: translate3d(0, 1.25rem, 0) !important;   /* 20px */
  transform: translate3d(0, 1.25rem, 0) !important;
}
[data-aos="fade-up"].aos-animate {
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
}

[data-aos="fade-down"] {
  -webkit-transform: translate3d(0, -1.25rem, 0) !important;  /* -20px */
  transform: translate3d(0, -1.25rem, 0) !important;
}
[data-aos="fade-down"].aos-animate {
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
}

[data-aos="fade-left"] {
  -webkit-transform: translate3d(1.25rem, 0, 0) !important;   /* 20px */
  transform: translate3d(1.25rem, 0, 0) !important;
}
[data-aos="fade-left"].aos-animate {
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
}

[data-aos="fade-right"] {
  -webkit-transform: translate3d(-1.25rem, 0, 0) !important;  /* -20px */
  transform: translate3d(-1.25rem, 0, 0) !important;
}
[data-aos="fade-right"].aos-animate {
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
}

[data-aos="fade-up-right"] {
  -webkit-transform: translate3d(-1.25rem, 1.25rem, 0) !important; /* -20px, 20px */
  transform: translate3d(-1.25rem, 1.25rem, 0) !important;
}
[data-aos="fade-up-right"].aos-animate {
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
}

[data-aos="fade-up-left"] {
  -webkit-transform: translate3d(1.25rem, 1.25rem, 0) !important;  /* 20px, 20px */
  transform: translate3d(1.25rem, 1.25rem, 0) !important;
}
[data-aos="fade-up-left"].aos-animate {
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
}

[data-aos="fade-down-right"] {
  -webkit-transform: translate3d(-1.25rem, -1.25rem, 0) !important; /* -20px, -20px */
  transform: translate3d(-1.25rem, -1.25rem, 0) !important;
}
[data-aos="fade-down-right"].aos-animate {
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
}

[data-aos="fade-down-left"] {
  -webkit-transform: translate3d(1.25rem, -1.25rem, 0) !important;  /* 20px, -20px */
  transform: translate3d(1.25rem, -1.25rem, 0) !important;
}
[data-aos="fade-down-left"].aos-animate {
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
}


/* END CUSTOM AOS DISTANCE*/

/* BUTTONS */
.btn-green,
.btn-green:focus {
  font-weight: 400;
  background: var(--gren-text);
  border: none;
  text-decoration: none !important;
  color: var(--main-text);
  position: relative;
  overflow: hidden;
  font-size: 1rem;
  line-height: 100%;
  max-height: 3.4375rem;
  padding: 1rem 2.25rem;
  border-radius: 3.75rem;
  cursor: pointer;
  z-index: 1;
  transition:
    box-shadow .8s ease;
}


.btn-green::after {
  content: "";
  background: var(--dark-green);          
  position: absolute;
  z-index: -1;
  left: -20%;
  right: -20%;
  top: 0;
  bottom: 0;
  transform: skewX(-45deg) scale(0, 1);
  transition: transform .8s ease;
}

.btn-green:hover::after {
  transform: skewX(-45deg) scale(1, 1);
}

.btn-green:focus-visible {
  outline: 2px solid rgba(0,0,0,.18);
  outline-offset: 3px;
}

.dark-btn {
    font-weight: 300;
    background: var(--main-text);
    border: none;
    text-decoration: none !important;
    color: var(--white-text);
    position: relative;
    overflow: hidden;
    font-size: 0.875rem;
    line-height: 1.5rem;
    padding: .875rem 2.5625rem 1rem 2.5625rem;
    border-radius: 3.125rem;
    cursor: pointer;
    z-index: 1;
    transition: all 0.3s ease !important;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 2.8125rem;
}

.dark-btn::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(255, 255, 255, 0.2) !important;
    transition: all 0.75s ease !important;
    z-index: 1 !important;
}

.dark-btn:hover::before {
    left: 100% !important;
}

.dark-btn:hover {
    background-color: #1b1b1c !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.store-btn {
    height: 2.1875rem;
    border: 0.27px solid #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 7.4375rem;
    border-radius: .5rem;
}

.store-btn img{
    border-radius: 0.5rem;
    height: 2.1875rem;
     width: 7.4375rem;
}
/*END BUTTONS*/


/* TOPBAR */
#topbar {
    padding-left: 4.583vw;
    padding-right: 4.583vw;
    background: transparent;
    transition: background-color .3s ease;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.nav-wrapper.sticky {
    background-color: var(--gray-bg);
    box-shadow: 0 0.125rem 0.125rem rgba(155, 155, 155, 0.1);
}

.nav-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.nav-link {
    transition: color .1s ease-in-out;
    cursor: pointer;
}

#topbar .nav-link:hover,
#topbar .nav-link.active{
    font-weight:700;
    color: var(--gren-text)!important;
}

.offcanvas{
    transition: transform .75s ease-in-out;
}

.brand img {
    max-height: 2.215rem;
}
/* END TOPBAR*/


/*FOOTER */
footer {
    position: relative;
    bottom: 0;
    background-color: var(--main-text);
    top: 100%;
    padding-top: 2.5rem ;
}

.footer-spacing{
    padding-left: 7.18rem;
    padding-right: 7.18rem;
    padding-bottom: 2.18rem;
}

footer .nav-link {
    text-decoration: none;
    color: var(--muted-text);
    font-weight: 500;
    cursor: pointer;
}

footer .nav-link:hover,
footer .nav-link.active{
    font-weight:700;
    color: var(--white-text);
}


footer {
    position: relative;
    bottom: 0;
    background-color: var(--main-text);
    top: 100%;
    padding-top: 2.5rem;
}

.footer-spacing {
    padding-left: 7.18rem;
    padding-right: 7.18rem;
    padding-bottom: 2.18rem;
}


.footer-card {
    background-color: var(--gren-text);
    border-radius: 0.625rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 19.6875rem;
    margin-bottom: 1.6875rem;
    position: absolute;
    bottom: 50%;
    left: 65%;
}

.round-input {
    border: 0.043rem solid #FFFFFF;
    border-radius: 3.125rem;
    font-size: 0.75rem;
    font-weight: 300;
    line-height: 1.5rem;
    padding: 0.6875rem 1.6875rem;
    width: 100%;
    background-color: transparent;
    max-height: 2.8125rem;
}

.round-input:focus-visible{
    outline:0;
}

/*END FOOTER*/


/*  Base Card */
.colored-card {
    position: relative;
    padding: 2rem;
    border-radius: 0.9375rem;
    overflow: hidden;
    background: var(--gray-bg);
    transition: color 0.3s ease;
    z-index: 1;
}

.colored-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--gren-text);
  border-radius: 50%;
  transform: scale(0);
  transform-origin: center;
  transition: transform 1.1s ease-in-out;
  z-index: 0;
  pointer-events: none;
}


.colored-card:hover::before {
  transform: scale(2.5);
  border-radius: 50%;
}


.colored-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--gray-bg);
  border-radius: 50%;
  transform: scale(2.5);
  transform-origin: center;
  transition: transform .4s ease-in-out;
  z-index: -1;
  pointer-events: none;
}


.colored-card:hover::after {
  transform: scale(0);
}


.colored-card * {
  position: relative;
  z-index: 1;
}

.transparent-card {
    position: relative;
    padding: 2rem;
    border-radius: 0.9375rem;
    overflow: hidden;
    background: #000000BF;
    backdrop-filter: blur(6px);
    transition: color 0.3s ease;
    z-index: 1;
}

/* end  Base Card */




/*Section 1*/
.hero-section {
    position: relative;
    height: 95vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding-left: 4.583vw;
    padding-right: 4.583vw;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    border-radius: 3.5rem;
    overflow: hidden;
    z-index: 1;
    padding-left: 4.583vw;
    padding-right: 4.583vw;
}

.hero-bg-img {
    width: 100%;
    height: 85vh;
    object-fit: cover;
    border-radius: 2.5rem;
}


.hero-content {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
}


.hero-phone-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -45%) rotateY(-20deg) rotateX(5deg) scale(1.3);
    perspective: 1000px;
    transition: transform 0.6s ease;
    z-index: 6;
}

.hero-phone {
    width: 25rem;
    max-width: 100%;
    transition: transform 0.6s ease;
}

.hero-phone:hover {
    transform: rotateY(0deg) rotateX(0deg) scale(1.05);
}


.hero-text-left {
    position: absolute;
    top: 18%;
    left: 1%;
    z-index: 7;
    text-align: start;
    transform: scale(1.17);
}


.hero-text-right {
    position: absolute;
    bottom: 30%;
    right: 1%;
    z-index: 5;
    text-align: start;
    transform: scale(1.17);
}

.hero-title {
    line-height: 100%;
    font-weight:900;
}



.hero-line {
    width: 6.25rem;
    height: 3px;
    border-radius: 5px;
    position: relative;
    z-index: 9;
}

.hero-line-left {
    background-color: var(--gren-text);
}

.hero-line-right {
    background-color: var(--main-text);
}


.hero-description {
    position: absolute;
    bottom: 16%;
    left: 4%;
    max-width: 23.75rem;
    color: #000;
    margin-bottom: auto;
}

.first-green-text {
    margin-left: 14rem;
}

.second-green-text {
    padding-left: 4rem;
}

/* End Section 1 */




/* Section 2*/
.section-2 {
    will-change: transform;
}

.icon-circle-container {
    width: 3.75rem; 
    height: 3.75rem; 
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* End Section 2 */




/*Section 3*/
.section-3 {
    padding: 7.62rem;
    min-height: 100vh;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15rem;
    will-change: transform;
}

.section-3 #hill1{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    pointer-events: none;
    height:100%;
}

.card-green {
    background-color: var(--dark-green);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2.1875rem 3.4375rem;
    border-radius: 0.9375rem;
    bottom: 102%;
    position: absolute;
    z-index: 9;
    padding-bottom: 3.25rem;
    margin-bottom: auto;
}

.container-transparent-card{
    margin-top: 1rem;
}

.icon-circle-transparent {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* End Section 3 */



/* Section 4*/
.section-4 {
    min-height: 100vh;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--gray-bg);
    background-image: url('/assets/icons/web/img/section-4-bg.png');
    background-size: 62.25rem 53.125rem;
    background-position: left top;
    background-repeat: no-repeat;
    will-change: transform;
}


.section-4 .laptop-img {
    position: absolute;
    top: -8.8rem;          
    left: 50%;             
    transform: translateX(-50%)!important; 
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    width: 100%;
    pointer-events: none; 
}


.laptop-img img {
    height: 40rem;
    width: auto;
    max-width: 100%;
}


/* End Section 4*/


/*Section 5*/
.section-5 {
    margin-bottom: 9.5rem;
    will-change: transform;
}
/* End Section 5 */

@media (max-width: 1280px) {
    .hero-phone-wrapper {
        transform: translate(-50%, -45%) rotateY(-20deg) rotateX(5deg) scale(1);
        top: 45%;
    }

    .hero-text-left {
        top: 11%;
        left: 0%;
        transform: scale(1.1);
    }

    .hero-text-right {
        bottom: 27%;
        right: 1%;
    }
}

@media (max-width: 1279px) {
    .hero-phone-wrapper {
        transform: translate(-50%, -45%) rotateY(-20deg) rotateX(5deg) scale(1.4);
        top: 54%;
        left:54%;
    }

    .hero-text-left {
        top: 26%;
        left: 0%;
        transform: scale(1.2);
    }

    .hero-text-right {
        bottom: 27%;
        right: -4%;
        transform: scale(1.1);
    }
}

@media (max-width: 1210px) {
    .hero-phone-wrapper {
        position: absolute;
        top: 60%;
        left: 54%;
        perspective: 1000px;
        transition: transform 0.6s ease;
        z-index: 6;
    }

    .hero-text-left {
        position: absolute;
        top: 30%;
        left: 0%;
        z-index: 7;
        text-align: start;
        transform: scale(1.1);
    }

    .hero-text-right {
        position: absolute;
        bottom: 22%;
        right: -5%;
        z-index: 5;
        text-align: start;
        transform: scale(.95);
    }

    .hero-description {
        position: absolute;
        bottom: 11%;
        left: 4%;
        max-width: 23.75rem;
        color: #000;
        margin-bottom: auto;
    }
}

@media (max-width: 1190px) {

    .hero-phone-wrapper {
        position: absolute;
        top: 38%;
        left: 54%;
        perspective: 1000px;
        transition: transform 0.6s ease;
        z-index: 6;
        transform: translate(-50%, -50%) rotate(0deg) scale(1.1);
    }

    .hero-text-left {
        top: 10%;
        left: -1%;
        transform: scale(1.1);
    }

    .hero-text-right {
        bottom: 45%;
        right: -6%;
        transform: scale(1.01);
    }

    .hero-description {
        position: absolute;
        bottom: 17%;
        left: 4%;
        max-width: 23.75rem;
        color: #000;
        margin-bottom: auto;
    }
}

@media (max-width: 991.98px) {

    .hero-phone-wrapper {
        transform: translate(-50%, -50%) rotate(0deg) scale(.95);
        top: 35%;
    }

    .hero-text-left {
        top: 6%;
        left: -5%;
        transform: scale(.9);
    }

    .hero-text-right {
        right: -11%;
        transform: scale(.85);
        bottom: 51%;
    }

    .hero-description {
        position: absolute;
        bottom: 17%;
        left: 4%;
        max-width: 23.75rem;
        color: #000;
        margin-bottom: auto;
    }
}

@media (max-width: 850px) {
    .hero-phone-wrapper {
        transform: translate(-50%, -50%) rotate(0deg) scale(.85);
        top: 33%;
    }

    .hero-text-right {
        bottom: 52%;
        right: -16%;
        transform: scale(.75);
    }

    .hero-text-left {
        top: 6%;
        left: -12%;
        transform: scale(0.81);
    }
}

@media (max-width: 600px) {

    .hero-phone-wrapper {
        transform: translate(-50%, -50%) rotate(0deg) scale(1.1);
        top: 30%;
    }

    .hero-line {
        width: 2.5rem;
        height: 3px;
        border-radius: 5px;
        position: relative;
        z-index: 9;
    }

    .hero-text-left {
        top: 9%;
        left: -2%;
        transform: scale(1.1);
    }

    .hero-text-right {
        bottom: 60%;
        right: -7%;
        transform: scale(1.08);
    }

    .first-green-text {
        margin-left: 6rem;
    }

    .second-green-text {
        padding-left: 2rem;
    }

    .font-size-18 {
        font-size: 1rem !important;
    }

    .font-size-21 {
        font-size: 1.1rem !important;
    }

    .font-size-48 {
        font-size: 1.5rem !important;
    }

    .font-size-64 {
        font-size: 1.8rem !important;
    }

    .font-size-77 {
        font-size: 2.6rem !important;
    }

    .section-full {
        padding-top: 4.875rem;
        padding-bottom: 4.875rem;
        padding-left: 6vw;
        padding-right: 6vw;
    }

    .section-3 {
        margin-top: 25rem !important;
        padding-left: 6.583vw !important;
        padding-right: 6.583vw !important;
    }

    .laptop-img img {
        height: 20rem;
        width: auto;
        max-width: 100%;
    }

    .section-4 .laptop-img {
        top: -4.8rem;
    }

    .pt-29-rem {
        padding-top: 16rem !important;
    }
}

@media(max-width:550px) {

    .hero-text-left {
        top: 11%;
        left: -5%;
        transform: scale(1);
    }

    .hero-text-right {
        right: -9%;
        transform: scale(1);
    }

    .hero-description {
        max-width: 22.75rem;
    }
}

@media(max-width:520px) {

    .hero-text-right {
        right: -16%;
        bottom: 55%;
        transform: scale(.9);
    }

    .hero-phone-wrapper {
        transform: translate(-50%, -50%) rotate(0deg) scale(1.4);
        left: 49%;
    }
    .hero-text-left {
        top: 16%;
        left: -23%;
        transform: scale(.651);
    }
}



@media (min-width: 1400px) {
    .hero-phone-wrapper {
        top: 55%;
    }

    .hero-text-left {
        position: absolute;
        top: 19%;
        left: 3%;
        z-index: 7;
        text-align: start;
        transform: scale(1.17);
    }

    .hero-text-right {
        position: absolute;
        bottom: 28%;
        right: 4%;
        z-index: 5;
        text-align: start;
        transform: scale(1.17);
    }
}

@media (min-width: 1440px) {
    #topbar, .hero-bg {
        padding-left: 6.944vw;
        padding-right: 6.944vw;
    }
    .section-full, .section-spacing-x {
        padding-left: 8.944vw;
        padding-right: 8.944vw;
    }

    .hero-phone-wrapper {
        transform: translate(-50%, -45%) rotateY(-20deg) rotateX(5deg) scale(1.1);
        top: 50%;
    }
}

@media (min-width: 1920px) {
    .section-full, .section-spacing-x {
        padding-left: 12.944vw;
        padding-right: 12.944vw;
    }

    #topbar, .hero-bg {
        padding-left: 10.944vw;
        padding-right: 10.944vw;
    }

    .hero-description {
        left: 10%;
    }
}

@media (max-width:1250px) {
    .footer-spacing {
        padding-left: 6.18rem;
        padding-right: 6.18rem;
    }
}

@media (max-width:1199px) {
    .footer-spacing {
        padding-left: 3.18rem;
        padding-right: 3.18rem;
    }
}

@media (max-width:991.98px){
    .footer-card {
        bottom: 80%;
        left: 0; 
        right: 0;
        margin-left: auto;
        margin-right: auto;
    }

    footer {
        padding-top: 5.5rem;
    }
}

@media (max-width:600px){
    .second-part-footer {
        flex-direction: column;
        align-items: start !important;
    }

    .second-part-footer .nav-link{
        margin-bottom:.85rem;
    }

    .footer-card {
        bottom: 90%;
    }

    .section-5 {
        margin-bottom: 14rem;
    }
}

@media(min-width: 2000px) {
    html {
        font-size: clamp(14px, 1vw, 22px);
    }

    .main-logo {
        height: 2.5rem;
    }
}

@media(min-width: 2433px) {
    html {
        font-size: clamp(14px, 1vw, 26px);
    }
}


@media(min-width: 2950px) {
    html {
        font-size: clamp(14px, 1vw, 40px);
    }
}