﻿.loyalty__info-header {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.loyalty__info-header__placeholder{
    width: 100%;
    height: auto;
}
.loyalty__info-header__placeholder img{
    width: 100%;
    height: auto;
}
    .loyalty__info-header__placeholder::after {
        content: "";
        display: block;
        height: calc(100% + -8px);
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: black;
        opacity: 0.2;
    }

.loyalty__info-header h1 {
    font-size: 74px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99;
    color: black;
    text-align: center;
    font-weight: 500;
    display: none;
}

.loyalty__info__subtext{
    margin: 60px auto;
    width: 80%;
    text-align: center;
    font-weight: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    justify-content: center;
}

.loyalty__info__subtext-text{
    max-width: 700px;
    width: 100%;
}

.loyalty__info__subtext-text-text {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.loyalty__info__subtext h1 {
    font-size: 62px;
    font-weight: 400;
    line-height: 60px;
}

.loyalty__info__subtext h2{
    margin-top: 20px;
}

.loyalty__info__subtext p {
    margin-top: 16px;
    font-size: 16px;
    line-height: 30px;
}

    .loyalty__info__subtext .img-placeholder {
        max-width: 500px;
        width: 100%;
    }

    .loyalty__info__subtext .img-placeholder img{
        width: 100%;
    }


/*Container*/
.loyalty__info-container{
    width: 100%;
    margin-top: 200px;
}

.loyalty__info-wrapper{
    width: 95%;
    margin: 0 auto;
}

.loyalty__info-section{
    display: grid;
    justify-content: space-around;
    align-items: center;
    gap: 40px;
    margin-bottom: 100px;
}



    .loyalty__info-section:nth-child(odd) {
/*        border: 1px solid black;*/
        grid-template-areas: "loyaltyText loyaltyImage";
        grid-template-columns: minmax(300px, 900px) 400px;
        transition: 0.3s all ease;
    }


    .loyalty__info-section:nth-child(even) {
        display: grid;
        grid-template-areas: "loyaltyImage loyaltyText";
        grid-template-columns: 400px minmax(300px, 900px);
    }


.loyalty__info-images {
    position: relative;
    width: 100%;
    max-width: 400px;
    grid-area: loyaltyImage
}

    .loyalty__info-images img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
    }

.loyalty__info-section:nth-child(even) .loyalty__info-image-placeholder-1 {
    left: 40px;
}

.loyalty__info-section:nth-child(odd)  .loyalty__info-text{
    padding-right: 50px;
}

.loyalty__info-section:nth-child(even) .loyalty__info-text {
    padding-left: 50px;
    display: grid;
    justify-content: end;
}

.loyalty__info-image-placeholder-1 {
    position: absolute;
    left: -40px;
    top: -40px;
    width: 400px;
    height: 400px;
    /*    aspect-ratio: 1;*/
}

.loyalty__info-image-placeholder-2 {
    position: relative;
    width: 400px;
    height: 400px;
}

.loyalty__info-text{
    grid-area: loyaltyText;
}

    .loyalty__info-text h1 {
        font-size: 62px;
        line-height: 64px;
        font-weight: 400;
        margin-bottom: 16px;
    }

    .loyalty__info-text h2 {
        font-size: 28px;
        line-height: 64px;
        font-weight: 400;
        margin-bottom: 4px;
    }

.loyalty__info-text p {
    font-size: 16px;
    line-height: 28px;
    font-weight: 300;
    margin-bottom: 16px;
}

.loyalty__info-text ul{
    list-style: none;
        margin-left: 0px;
        margin-top: 0;
}

.loyalty__info-text ul li{
    font-weight: 300;
}

.loyalty__steps__container {
    text-align: center;
    width: 95%;
    margin: 0 auto;
}

    .loyalty__steps__container .steps-container__heading {
        font-size: 62px;
        line-height: 78px;
        font-weight: 400;
        display: flex;
        flex-direction: column;
    }

        .loyalty__steps__container .steps-container__heading span:first-child {
            font-size: 40px;
            line-height: 28px;
        }

.loyalty__step{
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 16px
}

.loyalty__steps__container .steps-container__text {
    font-size: 16px;
    margin-bottom: 40px;
    font-weight: 300;
}

    .loyalty__steps__container .steps-heading{
        font-weight: 500;
        font-size: 24px;
    }

.loyalty__steps {
    display: grid;
    grid-template-columns: 300px 300px 300px;
    justify-content: center;
    gap: 40px;
    max-width: 95%;
    margin: 0 auto;
}

.loyalty__disclaimer {
    width: fit-content;
    margin: 0 auto;
    background-color: #eeeeee;
    /* box-shadow: 0 10px 10px rgb(253 225 0 / 18%); */
    /* border: 1px solid #b1b1b1; */
    padding: 8px;
    border-radius: 4px;
}
.heading__number{

}
.heading__number h3 {
    font-size: 80px;
    color: gray;
    line-height: 60px;
}
.loyalty__step p{
    position: relative;
    z-index: 9;

}
/*.loyalty__disclaimer .u-bold{
    G
}*/
.loyalty__steps {
    margin-top: 40px
}
.loyalty__step img {
    width: 100px;
    height: 100px;
    border-radius: 1000px;
    background-color: gray;
}

.loyalty__disclaimer {
    margin-top: 60px;
    margin-bottom: 60px;
}


/*loyalty__info-benefits*/
.loyalty__info-benefits {
    padding: 40px 16px;
    text-align: center;
    border-top: 1px solid #0000003b;
    /*    min-height: 60vh;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;*/
}

.loyalty__info-benefits-text{
    max-width: 900px;
    margin: 0 auto;
    font-weight: 300;
    display: flex;
    flex-direction: column;
    gap: 12px;
}



.loyalty__info-benefits-content h1 {
    font-size: 62px;
    font-weight: 400;
}


.benefits-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 300px));
    gap: 20px;
    justify-content: center;
    margin-top: 40px;
}


.benefits-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

    .benefits-item p{
        font-weight: 300;
    }

    .benefits-img__placeholder {
        width: 100px;
        height: 170px;
        display: flex;
        align-items: center;
        border-radius: 100%;
        /*background-color: gray;*/
    }

/*        .benefits-img__placeholder img{
            width: 100%;
        }
*/


.benefits-item:nth-child(1) .benefits-img__placeholder  {
    width: 100px;
}
.benefits-item:nth-child(2) .benefits-img__placeholder {
    width: 80px;
   
}
.benefits-item:nth-child(3) .benefits-img__placeholder {
    width: 80px;
    transform: rotate(4deg)
}


.benefits-item:nth-child(1) img{
    width: 100%
}
.benefits-item:nth-child(2) img {
    width: 100%
}

.benefits-item:nth-child(3) img {
    width: 100%
}



.loyalty-value__levels-container {
    margin-top: 100px;
    width: 95%;
    margin-inline: auto;
}

.loyalty-value__heading{
    font-size: 62px;
    font-weight: 400;
    line-height: 60px;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.loyalty-value__heading span:nth-child(2){
    font-size: 40px;
}

.loyalty-value__levels-container p{
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    font-weight: 300;
}

.loyalty-level__footext {
    /*    display: none;*/
    margin-top: 40px;
    margin-bottom: 100px;
/*    border-top: 1px solid #0000003d;*/
    
/*    border-bottom: 1px solid #0000003d;*/
    
    width: fit-content;
    margin-inline:  auto;
    padding: 20px
}

.loyalty-level__footext-heading {
    font-size: 16px;
    font-family: 'CFModGrotesk', sans-serif !important;
    font-weight: 300;
    text-align: center;
    line-height: 20px;
    max-width: 900px;
    margin: 0 auto;
}


.loyalty-levels__content {
    margin-top: 80px;
    margin-bottom: 80px;
    display: grid;
    grid-template-columns: repeat(auto-fit, 320px);
    justify-content: center;
    gap: 40px;
    transition: 0.3s all ease;
}

.loyalty__package {
    border: 1px solid #0000001f;
    position: relative;
    padding: 20px 16px;
    border-radius: 4px;
    box-shadow: 0 10px 10px rgba(0,0,0,0.1)
}

.loyalty__package__lvl {
    width: 100%;
    text-align: left;
    /*    padding: 4px 12px;*/
    /*    border-radius: 8px;*/
    margin-bottom: 12px;
    background-color: white;
    border-bottom: 1px solid #00000054;
}

    .loyalty__package__lvl p {
        font-family: 'CF Ifigeneia', serif !important;
        font-size: 40px;
        text-align: left;
        font-weight: 400;
    }

    .loyalty__package__info-item {
        text-align: left;
        padding-bottom: 4px;
    }

.loyalty__package__info-item p{
    text-align: left;
    font-weight: 400;
}

.loyalty__package__info-item ul{
    margin-top: 0;
    margin-bottom: 16px;
   
    display: flex;
    flex-direction: column;
    gap: 4px;

    font-weight: 300;
}
.loyalty__package.gold {
/*    background-color: #040400;*/
/*    color: white;*/
}

.loyalty__package.basic .loyalty__package__lvl {
    background-color: #f0f0f0;
    border-bottom: 0;
    text-align: center;
    padding: 0px 12px;
    border-radius: 4px;
}
.loyalty__package.silver .loyalty__package__lvl {
    background-color: #fff7b494;
    border-bottom: 0;
    text-align: center;
    padding: 0px 12px;
    border-radius: 4px;
}

.loyalty__package.gold .loyalty__package__lvl {
    background-color: #fde1008f;
    border-bottom: 0;
    text-align: center;
    padding: 0px 12px;
    border-radius: 4px;
    /*        color: #FDE100;*/
}

.loyalty__package.platinum .loyalty__package__lvl {
    background-color: #FDE100;
    border-bottom: 0;
    text-align: center;
    padding: 0px 12px;
    border-radius: 4px;
    white-space: nowrap;
    /*        color: #FDE100;*/
}
        .loyalty__package.gold .loyalty__package__lvl p{

        }

        .loyalty__package__info-item ul li {
            /*    margin-left: 16px;*/
            /*    list-style: disc;*/
        }



/* .loyalty__package.gold{
    transform: scale(1.1);
} */

    .loyalty__package.gold .loyalty__package__lvl {
/*        background-color: #FDE100;
        border: 0px solid #FDE100;
        box-shadow: 0 2px 6px rgb(199 177 0 / 40%);*/
    }


@media(max-width: 1070px) {
    .loyalty__steps {
        grid-template-columns: 1fr;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .heading__number{
        text-align: center;
    }
    .loyalty__step p{
        text-align: center;
    }
    .loyalty__step {
        width: fit-content;
        margin: 0 auto;
        max-width: 300px;
    }

    .loyalty-levels__content {
        grid-template-columns: repeat(1, 300px);
    }

    .loyalty__package.gold {
        transform: scale(1);
    }


    .loyalty__info-header h1, .loyalty__info__subtext h1, .loyalty__info-text h1, .loyalty__info-text h1, .loyalty__steps__container .steps-container__heading, .loyalty__info-benefits-content h1 {
        font-size: 44px;
        line-height: 44px;
    }
    .loyalty__info-image-placeholder-1 {
        width: 90vw;
        max-width: 400px;
        height: 90vw;
        max-height: 400px;
    }
    .loyalty__info-image-placeholder-2 {
        width: 90vw;
        max-width: 400px;
        height: 90vw;
        max-height: 400px;
    }
    .loyalty__info-text{
        text-align: left;
    }
    .loyalty__info-section:nth-child(odd) .loyalty__info-text{
        padding-inline: 16px;
    }
    .loyalty__info-text ul{
        margin-left: 16px;
    }
    .loyalty__info-text h2{
        font-size: 28px;
        line-height: 36px;
    }
    .loyalty__info-section:nth-child(even) .loyalty__info-text{
        padding-inline: 16px;
    }

    .loyalty-value__heading span:nth-child(2) {
        line-height: 40px;
        margin-top: 16px;
        margin-bottom: 16px;
    }


    .loyalty-level__footext-heading {
        font-size: 16px;
        margin-bottom: 40px;
        font-weight: 300;
    }

    .loyalty__disclaimer{
        margin-inline: auto;
    }


}

    @media(max-width: 920px) {
        .loyalty__info-section:nth-child(odd) {
            grid-template-columns: 1fr;
            grid-template-areas: "loyaltyImage""loyaltyText";
            transition: 0.3s all ease;
        }

        .loyalty__info-section:nth-child(even) {
            grid-template-columns: 1fr;
            grid-template-areas: "loyaltyImage""loyaltyText";
        }

        .loyalty__info-images {
            position: relative;
            width: 100%;
            
            display: flex;
            justify-content: center;
            width: fit-content;
            margin: 0 auto;
        }
        .loyalty__info-section:nth-child(even) .loyalty__info-image-placeholder-1{
            left: -30px;
        }
    }



.loyalty__info-text ul .second-ul {
    list-style: circle;
        margin-left: 40px;
}

.u-bold{
    font-weight: 400;
}

.x-bold{
    font-weight: 500;
}


.unique-headings{
    display: flex;
    flex-direction: column;
    line-height: 48px;
    font-weight: 500;
}
    .unique-headings .big-heading {
        font-size: 62px;
        font-weight:400;
    }
    .unique-headings .smaller-heading {
        font-size: 40px;
    }


.loyalty-unique__disclaimer {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.loyalty-unique__disclaimer p{
    display: flex;
    flex-direction: column;
}

.seperate-line {
    width: 1px;
    height: 60px;
    background-color: #b9b9b9;
}

.loyalty__steps__container__unique {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .loyalty__steps__container__unique .steps-container__heading{
        display: flex;
        flex-direction: column;
        text-align: center;
        line-height: 40px;
    }

.loyalty__steps__container__unique .steps-container__heading span:first-child{
    font-size: 40px;
    font-weight: 500;
}

        .loyalty__steps__container__unique .steps-container__heading span:nth-child(2) {
            font-size: 40px;
            font-weight: 500;
        }


.loyalty__disclaimer__unique {
    padding: 4px 24px;
    background-color: #feee70;
    border-radius: 4px;
    text-align: center;
    margin-top: 20px;
}

.links-loyalty{
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}


.app-links__container__loyalty{
    margin-top: 40px;
}

    .app-links__container__loyalty li {
        list-style: none;
        font-family: 'CF Ifigeneia', serif !important;
        font-size: 28px;
        font-weight: 500;
    }


.links-loyalty i{
    color: gray;
}
/*    .loyalty-unique__disclaimer p:nth-child(1)::after {
        content: "";
        display: block;
        position: relative;
        background-color: black;
        width: 2px;
        height: 100%;
    }*/

@media(max-width: 1070px) {
    .loyalty-value__heading {
        font-size: 44px;
        line-height: 44px;
    }

        .loyalty-value__heading span:nth-child(2) {
            line-height: 24px;
            margin-top: 16px;
            margin-bottom: 16px;
        }


.loyalty-value__heading span:nth-child(2) {
    font-size: 24px;
}


.unique-headings .big-heading {
    font-size: 44px;
    font-weight: 400;
}
.unique-headings .smaller-heading {
    font-size: 24px;
    line-height: 24px;
    margin-bottom: 12px;
}

.loyalty__steps__container__unique {
    width: 95%;
}

    .loyalty__steps__container__unique .steps-container__heading span:first-child, .loyalty__steps__container__unique .steps-container__heading span:nth-child(2) {
        font-size: 24px;
        line-height: 28px;
    }
.steps-container__text{
    text-align: center;
}


}