.head-menu {
    position: relative;
}

.head-menu .option {
    opacity: 1;
    visibility: visible;
}

.main {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1pc;
    width: 90%;
    max-width: 1400px;
    height: max-content;
    margin: 0 auto;
    margin-bottom: 2pc;
}

@keyframes loadOpacity {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.main .slider {
    position: relative;
    width: 100%;
    height: 400px;
}

.main .slider .bg {
    position: relative;
    top: 50%;
    left: 15%;
    transform: translate(-15%, -50%) rotate(0deg);
    width: 300px;
    height: 300px;
    animation: rotate 20s linear infinite;
}

.main .slider .bg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: loadOpacity 2s ease;
}

.main .slider .title-slogan {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -30%);
    width: calc(100% - 2pc);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .7pc;
}

.main .slider .title-slogan h1 {
    font-family: "Quicksand", serif;
    font-size: 2.2rem;
    font-weight: 400;
    color: var(--text-color-white);
    text-transform: lowercase;
    z-index: -1;
}

.main .slider .title-slogan h1 span {
    display: inline-block;
    font-family: "the-seasons", serif;
    font-size: 3.4rem;
    font-weight: 100;
}

.main .slider .title-slogan h1 span::first-letter {
    text-transform: uppercase;
}

.main .slider .title-slogan p {
    font-family: "Quicksand", serif;
    font-weight: 400;
    font-size: 1.2rem;
    color: var(--text-color-white);
}

.main .info-area {
    position: relative;
    width: 100%;
    height: max-content;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
    gap: 1pc;
    color: var(--text-color-white);
    animation: loadOpacity 2s ease;
}

@keyframes rotate {
    from {
        transform: translate(-15%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-15%, -50%) rotate(360deg);
    }
}

.main .info-area h2 {
    font-family: 'aristotelica-pro', serif;
    font-size: 2rem;
    font-weight: 900;
}

.main .info-area p {
    font-family: "Quicksand", serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4pc;
}

.main .info-area-cards {
    --card-button-height: 60px;
    --card-height: 500px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1pc;
    width: 100%;
    height: max-content;
    margin: 2pc 0;
}

.main .info-area-cards .cards {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, max-content);
    gap: 1pc;
    width: 100%;
    min-height: var(--card-height);
    max-height: max-content;
}

.main .info-area-cards .cards>div {
    border: 2px solid transparent;
    border-radius: 2pc;
    overflow: hidden;
    max-height: max-content;
}

.main .info-area-cards .cards .card-1 {
    grid-row: 1/4;
    grid-column: 1/2;
    border-color: rgba(255, 255, 255, .8);
}

.main .info-area-cards .cards .card-2 {
    grid-row: 1/2;
    grid-column: 2/4;
    border: none;
    background-color: white;
    height: max-content;
}

.main .info-area-cards .cards .card-2 .cnt {
    gap: 1pc;
    padding: 1.5pc;
}

.main .info-area-cards .cards .card-2 .name,
.main .info-area-cards .cards .card-3 .name {
    padding: 0 !important;
}

.main .info-area-cards .cards .card-2 .text,
.main .info-area-cards .cards .card-3 .text {
    padding: 0 !important;
}

.main .info-area-cards .cards .card-2 p,
.main .info-area-cards .cards .card-3 p {
    color: black !important;
}

.main .info-area-cards .cards .card-3 {
    grid-row: 2/4;
    grid-column: 2/3;
    border: none;
    background-color: white;
}

.main .info-area-cards .cards .card-3 .cnt {
    padding: 1.5pc;
}

.main .info-area-cards .cards .card-4 {
    grid-row: 2/4;
    grid-column: 3/4;
    border-color: rgba(255, 255, 255, .8);
    background-color: var(--onMain-color);
}

.main .info-area-cards .cards .card-4 .membership-time {
    flex: 1;
    width: 80%;
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-around;
    margin: 0 auto;
}

.main .info-area-cards .cards .card-4 .membership-time .option {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: .2pc;
    color: white;
}

.main .info-area-cards .cards .card-4 .membership-time .option .value {
    display: flex;
    align-items: end;
    justify-content: center;
}

.main .info-area-cards .cards .card-4 .membership-time .option .value p {
    font-family: "League Spartan", serif;
    font-size: 2.4rem;
    font-weight: 600;
}

.main .info-area-cards .cards .card-4 .membership-time .option .time-type {
    display: flex;
}

.main .info-area-cards .cards .card-4 .membership-time .option .time-type p {
    font-family: 'kollektif-bold', serif;
    font-size: 1rem;
    font-weight: 100;
}

.main .info-area-cards .cards>div .cnt {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 2pc;
    width: 100%;
    height: 100%;
}

.main .info-area-cards .cards>div .cnt .name {
    padding: 1.5pc 1.5pc 0 1.5pc;
}

.main .info-area-cards .cards>div .cnt .name p {
    font-family: 'aristotelica-pro', serif;
    font-weight: 600;
    font-size: 1.5rem;
    color: white;
}

.main .info-area-cards .cards>div .cnt .text {
    padding: 0 1.5pc;
}

.main .info-area-cards .cards>div .cnt .text p {
    font-family: 'kollektif-bold', serif;
    font-weight: 400;
    font-size: 1.1rem;
    color: white;
}

.main .info-area-cards .cards>div .cnt .text:nth-child(3) p {
    font-family: 'aristotelica-pro', serif;
    font-weight: 600;
    font-size: .9rem;
    line-height: 1.2pc;
    letter-spacing: .05pc;
}

.main .info-area-cards .cards>div .cnt .samples {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: row;
    width: 100%;
    border-top-left-radius: 1.5pc;
    border-top-right-radius: 1.5pc;
    overflow: hidden;
    cursor: pointer;
}

.main .info-area-cards .cards>div .cnt .samples .sample {
    position: relative;
    flex: 1;
    height: 100%;
}

.main .info-area-cards .cards>div .cnt .samples .sample img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-position: top;
    object-fit: cover;
    animation: imgAnimate 15s ease infinite;
    animation-delay: calc(var(--d) * .4s);
}

.main .info-area-cards .cards>div .cnt .samples .sample:nth-child(2) img {
    animation: imgAnimateReverse 15s ease infinite;
    object-position: bottom;
}

@keyframes imgAnimate {

    0%,
    100% {
        object-position: top;
    }

    50% {
        object-position: bottom;
    }
}

@keyframes imgAnimateReverse {

    0%,
    100% {
        object-position: bottom;
    }

    50% {
        object-position: top;
    }
}

.main .info-area-cards .cards>div .cnt .samples .effect {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(6, 1, 30, 0.3);
    z-index: 2;
}

.main .info-area-cards .cards>div .cnt .samples .router-icon {
    position: absolute;
    left: 1.7pc;
    bottom: 1.7pc;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(6, 1, 30, 0.5);
    border: 2px solid transparent;
    border-radius: 50%;
    padding: .7pc;
    z-index: 5;
    transition: .2s ease;
}

.main .info-area-cards .cards>div .cnt .samples:hover .router-icon {
    border-color: white;
}

.main .info-area-cards .cards>div .cnt .samples:active .router-icon {
    transition: .1s ease;
    transform: scale(.95);
}

.main .info-area-cards .cards>div .cnt .samples .router-icon svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: var(--text-color-white);
}

.main .info-area-cards .buttons {
    display: flex;
    flex-direction: row;
    gap: 1pc;
    width: 100%;
    height: var(--card-button-height);
}

.main .info-area-cards .buttons .button {
    flex: 1;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1.5pc;
    cursor: pointer;
    transition: .2s ease;
}

.main .info-area-cards .buttons .button:nth-child(1) {
    border: 2px solid rgba(255, 255, 255, .4);
    background-color: var(--main-color);
}

.main .info-area-cards .buttons .button:nth-child(2) {
    background-color: var(--effect-color);
}

.main .info-area-cards .buttons .button p {
    font-family: 'aristotelica-pro', serif;
    font-weight: 900;
    font-size: 1.2rem;
    color: white;
}

.main .info-area-cards .buttons .button:hover {
    transform: translateY(-5%);
    filter: brightness(120%);
}

.main .info-area-cards .buttons .button:active {
    transition: .1s ease;
    transform: translateY(0%);
}

.main .bracket {
    position: relative;
    width: 100%;
    height: max-content;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10pc 0;
}

.main .bracket svg {
    width: 4rem;
    height: 4rem;
    fill: white;
}

.main .ready-membership-cards {
    position: relative;
    width: 100%;
    height: max-content;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.main .ready-membership-cards::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 65%;
    height: 90%;
    filter: blur(30pc);
    background-color: #461969;
    border-radius: 50%;
    z-index: 1;
}

.main .ready-membership-cards .wel {
    position: relative;
    width: 100%;
    height: 40px;
    margin-bottom: 2pc;
}

.main .ready-membership-cards .wel img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.main .ready-membership-cards .cnt {
    position: relative;
    width: 100%;
    height: max-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5pc;
    gap: 2pc;
    z-index: 1;
}

.main .ready-membership-cards .cnt .name p {
    font-family: 'aristotelica-pro', serif;
    font-size: 2rem;
    font-weight: 900;
    color: var(--text-color-white);
    text-align: center;
}

.main .ready-membership-cards .cnt .text p {
    font-family: "Quicksand", serif;
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-color-white);
    line-height: 1.4pc;
}

.main .ready-membership-cards .cnt .cards {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1pc;
    width: 100%;
    height: max-content;
}

.main .ready-membership-cards .cnt .cards .card {
    flex: 1;
    min-width: 350px;
    min-height: 475px;
    height: max-content;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 2pc;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background-color: rgba(29, 31, 42, 0.24);
    border-radius: 1pc;
    padding: 2pc;
    color: var(--text-color-white) !important;
    cursor: pointer;
    transition: .2s ease;
}

.main .ready-membership-cards .cnt .cards .card:hover {
    transform: scale(1.01);
}

.main .ready-membership-cards .cnt .cards .card:active {
    transition: .1s ease;
    transform: scale(1);
}

.main .ready-membership-cards .cnt .cards .card .card-name p {
    font-family: 'aristotelica-pro', serif;
    font-size: 1.8rem;
    font-weight: 900;
}

.main .ready-membership-cards .cnt .cards .card .price {
    position: relative;
    width: 100%;
    height: max-content;
    display: flex;
    flex-direction: row;
    align-items: end;
    justify-content: start;
    gap: .5pc;
}

.main .ready-membership-cards .cnt .cards .card .price .value {
    display: flex;
}

.main .ready-membership-cards .cnt .cards .card .price .value p {
    font-family: 'aristotelica-pro', serif;
    font-size: 1.8rem;
    font-weight: 900;
    text-wrap: nowrap;
}

.main .ready-membership-cards .cnt .cards .card .price .time-type {
    display: flex;
}

.main .ready-membership-cards .cnt .cards .card .price .time-type p {
    font-family: "Montserrat", serif;
    font-weight: 400;
    font-size: .9rem;
}

.main .ready-membership-cards .cnt .cards .card .card-info {
    padding-bottom: 1pc;
    border-bottom: 2px solid rgba(255, 255, 255, 0.24);
    min-height: 100px;
    height: max-content;
}

.main .ready-membership-cards .cnt .cards .card .card-info p {
    font-family: "Montserrat", serif;
    font-size: .82rem;
    line-height: 1.2pc;
}

.main .ready-membership-cards .cnt .cards .card .card-features {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: .5pc;
}

.main .ready-membership-cards .cnt .cards .card .card-features .feature {
    position: relative;
    width: 100%;
    height: max-content;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.main .ready-membership-cards .cnt .cards .card .card-features .feature p {
    font-family: "Montserrat", serif;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.2pc;
}

.main .ready-membership-cards .cnt .cards .card .card-features .feature .icon {
    position: absolute;
    top: .2pc;
    left: -.5pc;
    transform: translate(-100%, 0%);
}

.main .ready-membership-cards .cnt .cards .card .card-features .feature .icon svg {
    width: .82rem;
    height: .82rem;
    fill: white;
}


.main .ready-membership-cards .cnt .cards .card .extra {
    position: relative;
    width: 100%;
    height: max-content;
}

.main .ready-membership-cards .cnt .cards .card .extra p {
    font-family: "Montserrat", serif;
    font-size: .82rem;
    line-height: 1.2pc;
}