:root {
    --color--black: rgb(20, 20, 20);

    --Yellow-Yellow---100: #E5DECF;
    --Yellow-Yellow---200: #E5CA95;
    --Yellow-Yellow---300: #F2C161;
    --Yellow-Yellow---400: #F2B030;
    --Yellow-Yellow---500: #FFA800;
    --Yellow-Yellow---600: #E59700;
    --Yellow-Yellow---700: #B27600;
    --Yellow-Yellow---800: #664300;
    --Yellow-Yellow---900: #1A1100;

}


html {
    box-sizing: border-box;
    font-family: "Forma DJR Micro", sans-serif;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    margin: 0;
    padding: 0;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 150%;
    background-color: var(--Yellow-Yellow---100);
    color: var(--Yellow-Yellow---900);
}

a {
    text-decoration: none;
    color: var(--Yellow-Yellow---900);
}

.navigation__link:hover {
    color: var(--Yellow-Yellow---800);
    background-color: var(--Yellow-Yellow---200);
    padding: .5rem 1rem;
    border-radius: 1rem;
    border: none;
}

h1 {
    color: var(--Yellow-Yellow---900);
    text-decoration: none;
    font-family: "bungee", sans-serif;
    font-size: 1.375rem;
}

h2 {
    font-family: "bungee", sans-serif;
    font-size: 3rem;
    line-height: 115%;
    /* 3.45rem */
    font-weight: normal;
    color: var(--Yellow-Yellow---900);
}

h3 {
    font-family: "bungee", sans-serif;
    font-size: 1.25rem;
    font-weight: normal;
    color: var(--Yellow-Yellow---900);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;

    white-space: nowrap;
    clip-path: inset(100%);
    clip: rect(0 0 0 0);
    overflow: hidden;
}










.container {
    max-width: 80rem;
    height: auto;
    margin: 0 auto;
}

.header {
    background-image: url(../assets/bg_items/Header_bg.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
}

.navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background-color: var(--Yellow-Yellow---400);
    border-radius: 1rem;
    border: 4px solid var(--Yellow-Yellow---900, #1A1100);
    transform: translateY(+1rem);
}

.navigation__logo>a:hover {
    background-color: var(--Yellow-Yellow---400);
    padding: 0;
    border: none;
}

.navigation__logo>a {
    display: flex;
    align-items: center;
}

.logo {
    margin-right: 1rem;
}

.navigation__ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right: 5rem;
}

.navigation__item {
    list-style: none;
    margin: 0 1rem;
}

.navigation__link {
    text-decoration: none;
    padding: .5rem 1rem;
}

.navigation__link--active {
    border-bottom: 4px solid var(--Yellow-Yellow---900);
}

.header__content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header__content__side {
    max-width: 50%;
    margin: 7rem 0;
}

.subtitle {
    font-family: "bungee", sans-serif;
    font-size: 1.375rem;
    margin-top: 0.25rem;
}

.header__content__text__p {
    margin-top: 1.25rem;
}

.p--highlight {
    font-weight: 700;
}

.button {
    border-radius: 1rem;
    cursor: pointer;
    border-radius: 2rem;
    border: 4px solid var(--Yellow-Yellow---900);
    background: linear-gradient(96deg, #FFA800 73%, #FF5C00 73.01%);
    font-family: "bungee", sans-serif;
    display: inline-flex;
    padding: 0.5rem 1rem;
    margin: 4rem 0;
    justify-content: center;
    align-items: center;
}

.button:hover {
    border-radius: 1rem;
    cursor: pointer;
    border-radius: 2rem;
    border: 4px solid var(--Yellow-Yellow---900);
    background: linear-gradient(96deg, #FFA800 -4.02%, #FF5C00 -4.01%);
    font-family: "bungee", sans-serif;
    display: inline-flex;
    padding: 0.5rem 1rem;
    justify-content: center;
    align-items: center;
    color: var(--Yellow-Yellow---900);
}

.header__content__image {
    margin: 0 auto;
}

.header__content__image__pill {
    position: absolute;
    transform: translate(-40%, -17.5%);
}

.reviews {
    background-color: var(--Yellow-Yellow---200);
    background-image: url(../assets/bg_items/Review_bg.svg);
    position: relative;
    border-top: 4px solid var(--Yellow-Yellow---900);
    border-bottom: 4px solid var(--Yellow-Yellow---900);
    overflow: hidden;
}

.revieuws__overlay {
    position: absolute;
    width: 245px;
    height: 566.2spx;
    top: 0;
    z-index: 2;
}

.revieuws__overlay--left {
    left: 0;
}

.revieuws__overlay--right {
    right: 0;
}

.revieuws__content {
    padding: 4rem 0;
}

.revieuws__title {
    display: flex;
    justify-content: center;
}

.reviews__collection {
    display: flex;
    margin-top: 3rem;
    width: 100%;
    width: calc((32rem + 2.5rem) * 5*2);
    transition: transform 0.5s ease-in-out;
    position: relative;
    /* width: 220rem; */
    transform: translateX(+21.5rem);
    overflow: hidden;
}

.revieuws__card {
    background-color: var(--Yellow-Yellow---400);
    border-radius: 2.125rem;
    border: 4px solid var(--Yellow-Yellow---900);
    margin: 0 2.5rem;
    padding: 1.125rem;
    width: 32rem;
    flex: 0 0 auto;
    height: auto;
}

.revieuws__card__top {
    display: flex;
    align-items: center;
}

.revieuws__card__title {
    display: flex;
    padding: 0.75rem;
    background-color: var(--Yellow-Yellow---100);
    border-radius: 1rem;
    border: 4px solid var(--Yellow-Yellow---900);
    width: 100%;
}

.revieuws__card__title__text {
    margin-left: 0.375rem;
}

.revieuws__card__img {
    padding: 0.75rem;
    background-color: var(--Yellow-Yellow---100);
    border-radius: 1rem;
    border: 4px solid var(--Yellow-Yellow---900);
    display: flex;
    align-content: center;
    justify-content: center;
    margin-left: 1rem;

}

.revieuws__card__text {
    padding: 0.75rem;
    background-color: var(--Yellow-Yellow---100);
    border-radius: 1rem;
    border: 4px solid var(--Yellow-Yellow---900);
    margin-top: 1rem;
}

.revieuws__card__text__title {
    color: rgba(0, 0, 0, 0.70);
    font-weight: 700;
    font-size: 1.25rem;
}

.revieuws__card__text>p {
    color: rgba(0, 0, 0, 0.60);
    font-family: "Forma DJR Micro";
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.review__carousel__nav {
    text-align: center;
    margin-top: 3rem;
}

.review__carousel__indicator {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: none;
    background-color: var(--Yellow-Yellow---100);
    margin: 0 .375rem;
    cursor: pointer;
}

.review__carousel__indicator:hover {
    background-color: var(--Yellow-Yellow---300);
}

.review__carousel__indicator.current-slide {
    background-color: var(--Yellow-Yellow---600);
}

.quiz {
    background-image: url(../assets/bg_items/Question_bg.svg);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    z-index: +10;
}

.quiz__content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.quiz__content__side {
    max-width: 50%;
    margin: 7rem 0;
}

.quiz__content__text__p {
    margin-top: 1.25rem;
}

.products {
    background-image: url(../assets/bg_items/products_bg.svg);
    border-top: 4px solid var(--Yellow-Yellow---900);
    border-bottom: 4px solid var(--Yellow-Yellow---900);
}

.products__content {
    padding: 4rem 0;
}

.products__title {
    display: flex;
    justify-content: center;
}

.products__collection {
    display: flex;
    justify-content: space-evenly;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.product__card {
    background-color: var(--Yellow-Yellow---400);
    border-radius: 2.125rem;
    border: 4px solid var(--Yellow-Yellow---900);
    margin: 0 2.5rem;
    padding: 1.125rem;
    filter: drop-shadow(4px 4px 0px #1A1100);
}

.product__card__img {
    background-color: var(--Yellow-Yellow---100);
    border-radius: 1rem;

    width: 18.65rem;
    height: 18.65rem;
}

.product__card__img img {
    transform: translate(-0.05%, -15.8%);
    width: 18.75rem;
    height: auto;
    position: absolute;
}

.product__card__title {
    color: var(--Yellow-Yellow---900, #1A1100);
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    margin-top: 0.25rem;
}

.product__card__description {
    color: rgba(26, 17, 0, 0.80);
    font-family: "Forma DJR Micro";
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.product__card__price {
    color: rgba(26, 17, 0, 0.70);
    font-family: "Bungee";
    font-size: 2rem;
    font-style: normal;
    font-weight: normal;
    padding-top: .5rem;

}

.product__card__button {
    margin-top: 0.75rem;
    margin-bottom: 0rem;
}

.button--buy {
    margin: 0rem;
    font-size: 2.25rem;
    color: rgb(26, 17, 0, 0.9);
    position: absolute;
    transform: translate(+195%, -25%);
    filter: drop-shadow(2px 2px 0px #1A1100);
}

.footer__bg {
    background-color: var(--Yellow-Yellow---900);
    padding: 1.25rem 0;
}

.footer {
    padding: 0.75rem;
    background-color: var(--Yellow-Yellow---400);
    border-radius: 2.125rem;
    border: 4px solid var(--Yellow-Yellow---900, #1A1100);
    display: flex;
}

.footer__left {
    width: 95%;
    margin-right: 1rem;
}

.footer__nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background-color: var(--Yellow-Yellow---100);
    border-radius: 1rem;
    border: 4px solid var(--Yellow-Yellow---900, #1A1100);
}

.footer__nav>a {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer__nav>a:hover {
    background-color: var(--Yellow-Yellow---100);
    padding: 0;
    border: none;
}

.footer__bottom {
    display: flex;
    justify-content: stretch;
    margin-top: 1rem;
    gap: 1rem;
}

.footer__list {
    padding: 0.75rem;
    background-color: var(--Yellow-Yellow---100);
    border-radius: 1rem;
    border: 4px solid var(--Yellow-Yellow---900, #1A1100);
    width: 33%;
}

.footer__list>ul {
    margin: auto 0;
    height: 100%;

}

.footer__list__link {
    text-decoration: underline;
    padding: 0;
    margin: 0;
}

.footer__list__link:hover {
    color: var(--Yellow-Yellow---700);
}

.footer__list__item {
    margin: 1rem 0;
    text-decoration: underline;
}

.footer__social__icons {
    padding: 0.75rem;
    background-color: var(--Yellow-Yellow---100);
    border-radius: 1rem;
    border: 4px solid var(--Yellow-Yellow---900, #1A1100);
}

.footer__social__icons li {
    width: 3.4375rem;
    height: 3.4375rem;
    margin-bottom: .5rem;
}

.footer__social__icons li:hover {
    background-color: var(--Yellow-Yellow---200);
    border-radius: 50%;
}

.social__icon {
    fill: var(--Yellow-Yellow---900);
}