html{
    scroll-behavior: smooth;
    padding: 0;
    margin: 0;
}

::-webkit-scrollbar {
    width: 7px;
}


::-webkit-scrollbar-track {
    background: #fff7f1;
}


::-webkit-scrollbar-thumb {
    background-color: #333333;
    border-radius: 6px;
}

body{
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    padding: 0.8vw 0;
    align-items: center;
    background-color: #fff7f1;
}

.age{
    width: 97%;
    border-radius: 1vw;
    padding: 0.5vw;
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.6) 0 0.3vw 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1.5vw;
}

.age img{
    width: 2.6vw;
    margin: 0;
}

.age p{
    font-size: 0.9vw;
    font-weight: 500;
    color: black;
    margin: 0;
}

.age a{
    color: #f00ef8;
}

.age a:hover{
    color: darkgreen;
}

.mainSection{
    padding: 5vw 0 1vw 0;
    align-self: center;
    width: 87%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.mainSection h1{
    font-size: 2.4vw;
    font-weight: 700;
    color: black;
    text-transform: uppercase;
    margin: 0;
}

.mainSection h1 span{
    color: #f00ef8;
    font-weight: 700;
}

.mainSection p{
    font-size: 1.2vw;
    font-weight: 500;
    color: black;
}

.buf{
    width: 96.5%;
    border-radius: 1vw;
    background-color: #d312ec;
    box-shadow: #6b6b6b 0 0.3vw 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0.45vw 2vw;
    margin: 2vw 0 0 0;
}

.minIMG{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.75vw;
}

.minIMG img{
    width: 2vw;
    margin: 0;
}

.minIMG p{
    font-size: 1vw;
    font-weight: 500;
    color: white;
    margin: 0;
}

.groupIMG{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0;
    gap: 0.78vw;
}

.groupIMG img{
    width: 2.9vw;
}

.offers{
    width: 100%;
    padding: 2.4vw 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: center;
    align-items: flex-start;
}

.ofr{
    width: 100%;
    border-radius: 1.45vw;
    background-color: white;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 1.7vw;
    padding: 0;
    height: 10vw;
    transition: 0.3s;
    padding-right: 1vw;
}

.ofr:hover{
    transform: scale(1.05) translateY(-0.5vw);
}

.ofr img{
    object-fit: cover;
    border-top-left-radius: 1.45vw;
    border-bottom-left-radius: 1.45vw;
    background-color: #333333;
    height: 100%;
    max-width: 15vw;
}

.ofrColumn{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.7vw;
    width: 16vw;
}

.ofrColumn h1{
    font-size: 1.4vw;
    font-weight: 700;
    color: #f00ef8;
    text-align: center;
    margin: 0;
}

.ofrColumn p{
    margin: 0;
    font-size: 1vw;
    font-weight: 500;
    color: #333333;
}

.ofrColumn h3{
    font-size: 1vw;
    font-weight: 600;
    color: #333333;
    align-self: center;
}

.ofrColumn a{
    font-size: 1.3vw;
    font-weight: 700;
    color: white;
    background-color: #f00ef8;
    padding: 0.35vw 1.1vw;
    border-radius: 0.7vw;
    margin: 0;
    text-align: center;
    text-decoration: none;
    transition: 0.3s;
}

.ofrColumn a:hover{
    background-color: #f00ef8;
}

.starRating{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.45vw;
    margin: 0;
    align-self: center;
}

.starRating i{
    font-size: 1.2vw;
    font-weight: 700;
    color: #f00ef8;
    margin: 0;
}

.minIMG{
    align-self: center;
}

.minIMG img{
    width: 1.5vw;
    background-color: transparent !important;
}

.offers h5{
    font-size: 1.2vw;
    font-weight: 600;
    color: #333333;
}

.respSection{
    width: 87%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.respSection h1{
    font-size: 1.8vw;
    font-weight: 600;
    color: black;
}

.respSection p{
    font-size: 1.3vw;
    font-weight: 500;
    color: #333333;
    width: 100%;
}

.respSection a{
    color: #f00ef8;
}

.respSection a:hover{
    color: darkgreen;
}

.carefulROW{
    width: 70%;
    border-radius: 1vw;
    background-color: #333333;
    box-shadow: #6b6b6b 0 0.3vw 0;
    display: flex;
    gap: 2vw;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0.45vw 2vw;
    margin: 2vw 0 0 0;
}

.carefulROW img{
    width: 9vw;
    margin: 0;
}

.img1{
    width: 12vw !important;
}

.img2{
    width: 6vw !important;
    background-color: transparent !important;
    border-radius: 0 !important;
}

.img3{
    width: 4.7vw !important;
    background-color: transparent !important;
    border-radius: 0 !important;
}

.img4{
    width: 7.5vw !important;
    background-color: transparent !important;
    border-radius: 0 !important;
}

.img5{
    width: 17vw !important;
}

.respROW{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 3.5vw;
    padding: 2vw 0;
}

.respCOL{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.respCOL h3{
    font-size: 2.6vw;
    margin: 0;
    font-weight: 700;
    color: #333333;
    margin-left: 4.3vw;
}

.awards{
    border-radius: 2vw;
    padding: 1vw;
    background-color: #333333;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 2vw;
    width: 20vw;
    justify-items: center;
}

.awardColumn{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5vw;
}

.awardColumn h5{
    font-size: 1.6vw;
    font-weight: 700;
    color: #fff7f1;
    margin: 0;
    text-align: center;
}

.awardColumn h4{
    text-align: center;
    font-size: 1vw;
    font-weight: 600;
    color: #b0b0b0;
    margin: 0;
}

.respROW p{
    font-size: 1.12vw;
    font-weight: 500;
    color: #333333;
    margin-top: 3.6vw;
    align-self: flex-start;
}

.texts {
    width: 87%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: center;
}

.texts h1{
    font-size: 2.5vw;
    font-weight: 700;
    color: #333333;
}

.txt87{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.txt87 h2{
    font-size: 1.4vw;
    font-weight: 700;
    color: #6b6b6b;
    margin: 1vw 0;
}

.txtColumn{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.75vw;
    width: 87%;
    margin: 0.8vw 0;
}

.txtColumn h3{
    font-size: 1.8vw;
    font-weight: 700;
    color: black;
    margin: 0;
}

.txtColumn p{
    font-size: 1.3vw;
    font-weight: 500;
    color: #333333;
    margin: 0;
}

.ftIMG{
    width: 95%;
    padding: 0.4vw;
    background-color: #e30bff;
    border-radius: 2vw;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1.4vw;
}

.ftIMG a{
    font-size: 1.3vw;
    font-weight: 600;
    color: #fff7f1;
    margin: 0;
    text-decoration: none;
}

.ftIMG a:hover{
    text-decoration: underline;
}

.ftIMG img{
    width: 4vw;
    background-color: #b0b0b0;
    border-radius: 50%;
    padding: 0.2vw;
}

.texts h6{
    font-size: 0.9vw;
    font-weight: 600;
    color: black;
    width: 87%;
    text-align: center;
}

.textttaaaa{
    width: 80%;
    align-self: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.textttaaaa h1{
    font-size: 2.4vw;
    font-weight: 700;
    color: black;
}

.textttaaaa p{
    font-size: 1.3vw;
    font-weight: 500;
    color: #333333;
}

.textttaaaa h2{
    font-size: 1.98vw;
    font-weight: 700;
    color: black;
}

@media (max-width: 786px) {

    .age img {
        width: 6.6vw;
        margin: 0;
    }

    .age p {
        font-size: 2.8vw;
        font-weight: 500;
        color: black;
        margin: 0;
    }

    .mainSection h1 {
        font-size: 5.4vw;
        font-weight: 700;
        color: black;
        text-transform: uppercase;
        margin: 0;
    }

    .mainSection p {
        font-size: 3.5vw;
        font-weight: 500;
        color: black;
    }

    .minIMG img {
        width: 6vw;
        background-color: transparent !important;
    }

    .minIMG p {
        font-size: 2.8vw;
        font-weight: 500;
        color: white;
        margin: 0;
    }

    .groupIMG img {
        width: 6.9vw;
    }

    .ofr img {
        object-fit: cover;
        border-top-left-radius: 1.45vw;
        border-bottom-left-radius: 1.45vw;
        background-color: #333333;
        height: 103%;
        max-width: 65vw;
    }

    .ofrColumn {
        display: flex
    ;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 0.7vw;
        width: 90%;
    }

    .ofrColumn h1 {
        font-size: 3.9vw;
        font-weight: 700;
        color: #f00ef8;
        text-align: center;
        margin: 0;
    }

    .ofrColumn p {
        margin: 0;
        font-size: 2.8vw;
        font-weight: 500;
        color: #333333;
    }

    .starRating i {
        font-size: 3.9vw;
        font-weight: 700;
        color: #f00ef8;
        margin: 0;
    }

    .ofrColumn h3 {
        font-size: 2.4vw;
        font-weight: 600;
        color: #333333;
        align-self: center;
    }

    .ofrColumn a {
        font-size: 4.3vw;
        font-weight: 700;
        color: white;
        background-color: #f00ef8;
        padding: 1.2vw 2.4vw;
        border-radius: 0.7vw;
        margin: 0;
        text-align: center;
        align-self: center;
        text-decoration: none;
        transition: 0.3s;
    }

    .ofr {
        width: 75%;
        border-radius: 1.45vw;
        background-color: white;
        display: flex
    ;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 1.7vw;
        padding: 0;
        height: 97vw;
        transition: 0.3s;
        align-self: center;
        padding-right: 1vw;
    }

    .offers h5 {
        font-size: 3.5vw;
        font-weight: 600;
        color: #333333;
    }

    .respSection h1 {
        font-size: 4.2vw;
        font-weight: 600;
        color: black;
    }

    .respSection p {
        font-size: 3vw;
        font-weight: 500;
        color: #333333;
        width: 100%;
    }

    .img1 {
        width: 28vw !important;
    }

    .img2 {
        width: 13vw !important;
        background-color: transparent !important;
        border-radius: 0 !important;
    }

    .img3 {
        width: 11.7vw !important;
        background-color: transparent !important;
        border-radius: 0 !important;
    }

    .img4 {
        width: 19.5vw !important;
        background-color: transparent !important;
        border-radius: 0 !important;
    }

    .img5 {
        width: 36vw !important;
    }

    .carefulROW {
        width: 63%;
        border-radius: 1vw;
        background-color: #333333;
        box-shadow: #6b6b6b 0 0.3vw 0;
        display: flex
    ;
        gap: 2vw;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 3vw 2vw;
        margin: 2vw 0 0 0;
    }

    .respROW {
        display: flex
    ;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        gap: 3.5vw;
        padding: 2vw 0;
    }

    .respCOL h3 {
        font-size: 5.6vw;
        margin: 0;
        font-weight: 700;
        color: #333333;
        margin-left: 4.3vw;
    }

    .awards {
        border-radius: 2vw;
        padding: 1vw;
        background-color: #333333;
        display: grid
    ;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 2vw;
        width: 44vw;
        justify-items: center;
        align-self: center;
    }

    .awardColumn h5 {
        font-size: 3.6vw;
        font-weight: 700;
        color: #fff7f1;
        margin: 0;
        text-align: center;
    }

    .awardColumn h4 {
        text-align: center;
        font-size: 2.6vw;
        font-weight: 600;
        color: #b0b0b0;
        margin: 0;
    }

    .respROW p {
        font-size: 3vw;
        font-weight: 500;
        color: #333333;
        margin-top: 3.6vw;
        align-self: flex-start;
    }

    .texts h1 {
        font-size: 4.5vw;
        font-weight: 700;
        color: #333333;
    }

    .txt87 h2 {
        font-size: 3.2vw;
        font-weight: 700;
        color: #6b6b6b;
        margin: 1vw 0;
    }

    .txtColumn h3 {
        font-size: 3.3vw;
        font-weight: 700;
        color: black;
        margin: 0;
    }

    .txtColumn p {
        font-size: 3vw;
        font-weight: 500;
        color: #333333;
        margin: 0;
    }

    .ftIMG {
        width: 63%;
        padding: 0.4vw;
        background-color: #333333;
        border-radius: 2vw;
        display: flex
    ;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1.4vw;
    }

    .ftIMG a {
        font-size: 3.4vw;
        font-weight: 600;
        color: #fff7f1;
        margin: 0;
        text-decoration: none;
    }

    .ftIMG img {
        width: 9vw;
        background-color: #b0b0b0;
        border-radius: 50%;
        padding: 0.2vw;
    }

    .texts h6 {
        font-size: 3vw;
        font-weight: 600;
        color: black;
        width: 111%;
        text-align: center;
    }

    .textttaaaa h1 {
        font-size: 5vw;
        font-weight: 700;
        color: black;
    }

    .textttaaaa h2 {
        font-size: 3.6vw;
        font-weight: 700;
        color: black;
    }

    .textttaaaa p {
        font-size: 3.1vw;
        color: #333333;
    }
























}