:root {
    --main-color: rgb(252, 222, 59);
    --secondary-color: rgb(83, 240, 184);
    --text-color: rgb(166, 166, 166);
}

body,html {
    font-family: "Bayon", sans-serif;
    font-weight: auto;
    font-style: normal;
    background-color: rgb(7, 9, 21);
    overflow-x: hidden;
}

.bestvalue {
  position: absolute;
  background-color: var(--secondary-color);
  padding: 4px 8px;
  font-size: 16px;
  color: black;
  top: 4px;
  right: 4px;
}

.logolanding {
    position: absolute;
    top: 20px;
    max-width: 320px;
    left: 20%;
    transform: translateX(-20%);
}

.hero-title {
    font-size: 4.5rem;
    font-weight: 400;
    color: white;
    line-height: 4.7rem;
}

.attention-text{
    color: var(--secondary-color);
    font-size: 1.25rem;
    font-weight: 400;
}

.section-title {
    font-size: 4.1rem;
    font-weight: 400;
    color: white;
    line-height: 4.2rem;
}

.sp {
    padding-top: 10vh;
    padding-bottom: 5vh;
}

.desc-text {

}

.main-button {
    background-color: var(--main-color);
    color: black;
    padding: 12px 20px;
    font-size: 24px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.main-button:hover {
    background-color: var(--secondary-color);
    color: black;
}

.secondary-button {
    border: 2px solid var(--main-color);
    color: var(--main-color);
    padding: 12px 16px;
    font-size: 24px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.secondary-button:hover {
    background-color: var(--main-color);
    color: black;
}


#heroSection {
    background-image: url('hero3.jpg');
    background-size: cover;
    background-position: center;
    height: 90vh;
    padding-top: 40vh;
}

.date-stuff {
    font-family: "Urbanist", sans-serif;
    font-size: 32px;
    font-weight: 400;
    color: white;
}

.scroller {
    background-color: var(--secondary-color);
    height: auto;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    padding: 10px 0; /* Optional: Add some padding */
}

.scrolling-text {
    display: inline-block;
    white-space: nowrap;
    animation: scroll-left 20s linear infinite;
    font-size: 2rem; /* Adjust font size as needed */
    color: black; /* Adjust text color as needed */
}

@keyframes scroll-left {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

.info-text {
    color: rgba(255, 255, 255, 0.4);
    font-size: 150px;
    text-align: center;
    font-weight: 400;
}

.overText {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--main-color);
    font-size: 2rem;
    text-align: center;
    background-color: rgba(7, 9, 21, 0.8);
    padding: 4px 8px;
}

.details-text {
    font-family: "Urbanist", sans-serif;
    color: rgb(166, 166, 166);
    font-size: 20px;
}

.semi-title {
    font-size: 32px;
    color: white;
    font-weight: 400;
    line-height: 41px!important;
}

.details-img {
    width: 48px;
    height: auto;
}

.ol-number {
    font-size: 42px;
    color: rgba(255, 255, 255, 0.4);
}

.ol-card {
    border: 2px solid rgba(255, 255, 255, 0.2);
    padding: 30px 25px;
}

.ol-card:hover {
    border: 2px solid var(--secondary-color);
}

#prices {
    background-image: url('https://framerusercontent.com/images/PXxHXP1qRtPDGoA5pBGdzgHlCg4.png');
    background-size: cover;
    background-position: center;
    min-height: 40vh;
}

.perks {
    background-color: rgb(7, 9, 21);
    border-left: 8px solid var(--main-color);
    padding: 10px 30px;
}

.perks p {
    font-size: 20px;
    line-height: 22px;
    color: white;
}

.perks div {
    margin-bottom: 10px;
}

.perks img {
    width: 18px;
}

.price-card {
    border: 1px solid var(--secondary-color);
    padding: 20px 30px;
    background-color: rgb(7, 9, 21);
}

.price-card h3 {
    font-size: 24px;
    color: var(--secondary-color);
}

.price-card h2 {
    font-size: 32px;
    color: var(--main-color);
}

.price-card h4 {
    font-size: 18px;
    color: white;
    font-family: "Urbanist", sans-serif;
    font-weight: 600;
}

.price-card hr {
    color: var(--secondary-color);
}

.pricer {
    margin-bottom: 10px;
}

.pricer img {
    width: 22px;
}

.pricer p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    font-family: "Urbanist", sans-serif;
}

.legend-card {
    padding: 20px 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.legend-card:hover {
    border: 1px solid var(--secondary-color);
}

.legend-card h3{
    color: white;
    font-size: 20px;
}

.legend-card p {
    font-family: "Urbanist", sans-serif;
    font-size: 16px;
    color: var(--secondary-color);
}

.more-details {
    font-family: "Urbanist", sans-serif;
    font-size: 16px;
    color: var(--secondary-color);
    font-style: italic;
}

@media (max-width: 900px) {
    #heroSection {
        background-image: url('mobile.jpg');
        background-size: cover;
        background-position: center;
        padding-bottom: 5vh;
        height: 70vh;
        padding-top: 35vh;
    }

    .hero-title {
        font-size: 2.2rem;
        line-height: 3rem;
    }

    .date-stuff {
        font-family: "Urbanist", sans-serif;
        font-size: 24px;
        font-weight: 400;
        color: white;
    }

    .main-button {
        font-size: 20px;
        padding: 10px 16px;
    }

    .secondary-button {
        padding: 10px 16px;
        font-size: 20px;
    }

    .scrolling-text {
        font-size: 1.3rem;
    }

    .info-text {
        font-size: 100px;
    }

    .overText {
        font-size: 1.2rem;
    }

    .section-title {
        font-size: 32px;
        line-height: 32px;
    }

    .details-text {
        font-size: 18px;
    }

    .semi-title {
        font-size: 24px;
        line-height: 20px;
    }

    .details-img {
        font-size: 24px;
    }

    .logolanding {
        position: absolute;
        top: 20px;
        max-width: 240px;
        left: 50%;
        transform: translateX(-50%);
    }
}