* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Roboto";
    color: white;
    letter-spacing: 0%;
}

.header__top {
    width: 100%;
    height: 93px;
    background-color: rgba(181, 0, 20, 1);
    display: flex;
    border-bottom: 2px solid black;
    justify-content: space-around;
    align-items: center;
    font-weight: 700;
    font-size: 16px;
}

.header__nav-list {
    display: flex;
    flex-direction: row;
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: center;
    gap: 40px;
}

.header__nav-list li:first-child {
    margin-top: 85px;
}

.header__nav-list li:last-child {
    height: 28px;
    display: flex;
    align-items: center;
    text-align: center;
    gap: 5px;
}

.header__bottom {
    width: 100%;
    height: 30px;
    background-color: rgba(37, 37, 37, 1);
    display: flex;
    justify-content: space-around;
    font-size: 14px;
    text-align: center;
    align-items: center;
}

.header__bottom__content-box {
    width: 1319px;
    display: flex;
    justify-content: right;
}

.header__open {
    font-weight: 700;
}

.header__open-time {
    font-weight: 400;
}

.hero {
    display: flex;
    width: 1938px;
    height: 679px;
    left: -18px;
    top: 123px;
    background: url("img/dude.jpg");
    background-repeat: no-repeat;
    align-items: center;
    justify-content: left;
}

.hero__content-box {
    display: flex;
    align-items: center;
    justify-content: right;
    width: 629px;
    height: 348px;
    background-color: rgba(0, 0, 0, 0.3);
}

.hero__text-box {
    display: flex;
    flex-direction: column;
    margin-right: 56px;
    gap: 25px;
}

.hero__title-box {
    width: 242px;
    height: 90px;
}

.hero__subtitle-box {
    width: 275px;
    height: 134px;
}

.hero__title {
    font-family: "Roboto Condensed";
    font-weight: 700;
    font-size: 38px;
}

.hero__subtitle {
    font-size: 16px;
    font-weight: 200;
    line-height: 24px;
}

.dry-aged {
    display: flex;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.94);
    height: 712px;
    align-items: center;
    justify-content: center;
}

.dry-aged__container {
    display: flex;
    justify-content: space-between;
    width: 1089px;
    height: 508px;
    margin-top: 12px;
}

.dry-aged__text-box {
    display: flex;
    flex-direction: column;
    width: 427px;
}

.dry-aged__title-box {
    width: 128px;
    height: 42px;
    line-height: 42px;
    padding-top: 46px;
}

.dry-aged__title {
    font-weight: 700;
    font-size: 32px;
}

.dry-aged__subtitle-box {
    width: 198px;
    height: 26px;
    padding-top: 46px;
}

.dry-aged__subtitle {
    font-weight: 700;
    font-size: 22px;
    line-height: 100%;
}

.dry-aged__desc-box {
    width: 427px;
    height: 219px;
    padding-top: 66px;
    margin-bottom: 143px;
}

.dry-aged__desc {
    font-weight: 200;
    font-size: 16px;
    line-height: 24px;
}

.dry-aged__extra-space {
    display: inline-block;
    margin-top: 25px;
}

.dry-aged__button-box {
    display: flex;
    width: 364px;
    gap: 16px;
}

.button {
    border-radius: 40px;
    font-size: 16px;
    font-weight: 300;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s;
    width: 174px;
    height: 47px;
}

.button--red {
    background: rgba(166, 33, 32, 1);
    border: 1px solid white;
    line-height: 47px;
    color: white;
}

.button--red:hover {
    background-color: rgb(150, 20, 20);
}

.dry-aged__image-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 12px;
}

.dry-aged__thumb-list {
    display: flex;
    flex-direction: row;
    gap: 18px;
    list-style: none;
}

.grill-course {
    display: flex;
    width: 100%;
    height: 642px;
}

.grill-course__button-box button {
    margin-top: 47px;
}

.grill-course__text-box {
    display: flex;
    width: 50%;
    height: 642px;
    align-items: center;
    justify-content: center;
    background-color: rgba(166, 33, 32, 1);
}

.grill-course__content {
    display: flex;
    height: 340px;
    width: 300px;
    flex-direction: column;
    align-items: left;
    justify-content: center;
    padding-left: 88px;
    padding-bottom: 23px;
}

.grill-course__title {
    width: 231px;
    height: 92px;
    font-weight: 700;
    font-size: 32px;
    line-height: 52px;
    margin-bottom: 39px;
}

.grill-course__list-box {
    width: 300px;
    height: 125px;
}

.grill-course__list {
    font-size: 16px;
    font-weight: 200;
    line-height: 24px;
    list-style: none;
    padding-left: 0;
}

.grill-course__list-item {
    margin-bottom: 12px;
    position: relative;
    padding-left: 10px;
}

.grill-course__list-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 11px;
    width: 5px;
    height: 5px;
    background: white;
    border-radius: 50%;
    display: inline-block;
}

.button--white {
    background: white;
    border-radius: 40px;
    border: 1px solid red;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    text-align: center;
    color: rgba(37, 37, 37, 1);
    cursor: pointer;
    transition: background 0.2s;
    width: 174px;
    height: 47px;
}

.button--white:hover {
    background-color: rgb(233, 218, 218);
}

.handwerk {
    display: flex;
    width: 100%;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.94);
    align-items: center;
    height: 1186px;
}

.handwerk__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 652px;
    height: 533px;
    margin-bottom: 82px;
}

.handwerk__title {
    font-size: 32px;
    font-weight: 700;
    line-height: 26px;
    text-align: center;
    margin-bottom: 16px;
    margin-top: 119px;
}

.handwerk__subtitle {
    font-size: 22px;
    font-weight: 700;
    line-height: 100%;
    text-align: center;
    margin-bottom: 65px;
}

.handwerk__desc {
    font-size: 16px;
    font-weight: 200;
    line-height: 24px;
    text-align: center;
    margin-bottom: 48px;
}

.handwerk__desc span {
    display: inline-block;
    margin-top: 10px;
}

#handwerk__line {
    margin-bottom: 46px;
}

.handwerk__meat-pictures {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.handwerk__meat-list {
    display: flex;
    flex-direction: row;
    list-style: none;
    gap: 16px;
}

.spices {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 705px;
    background-color: rgba(166, 33, 32, 1);
}

.spices__box {
    display: flex;
    width: 50%;
    height: 705px;
    align-items: center;
}

.spices__text-box {
    display: flex;
    width: 432px;
    height: 344px;
    flex-direction: column;
    margin-left: 124px;
}

.spices__title {
    width: 432px;
    height: 42px;
    font-weight: 700;
    line-height: 42px;
    margin-bottom: 8px;
    font-size: 32px;
}

.spices__subtitle {
    width: 402px;
    height: 42px;
    font-weight: 700;
    line-height: 29px;
    font-size: 22px;
    margin-bottom: 33px;
}

.spices__desc {
    width: 431px;
    height: 219px;
    font-weight: 200;
    line-height: 24px;
    font-size: 16px;
}

.spices__desc span {
    display: inline-block;
    margin-top: 10px;
}

.meats {
    width: 100%;
    height: 540px;
    border-top: 3px solid rgba(0, 0, 0, 0.94);
}

.meats__background-box {
    display: flex;
    width: 100%;
    height: 537px;
    background: url("img/meats.jpg") no-repeat center center;
    background-color: rgba(0, 0, 0, 0.94);
    align-items: center;
    justify-content: center;
}

.meats__text-box {
    display: flex;
    width: 218px;
    height: 113px;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.meats__title {
    width: 218px;
    height: 26px;
    text-align: center;
    color: white;
    font-size: 32px;
    font-weight: 700;
    line-height: 26px;
}

.awards {
    display: flex;
    width: 100%;
    height: 1909px;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.94);
    align-items: center;
}

.awards__container {
    display: flex;
    width: 1035px;
    height: 202px;
    margin-top: 127px;
    justify-content: space-between;
    margin-bottom: 127px;
}

.awards__desc {
    display: flex;
    flex-direction: column;
    width: 409px;
    height: 202px;
}

.awards__desc span {
    display: inline-block;
    font-weight: 600;
    font-size: 32px;
    line-height: 50px;
    margin-top: 40px;
    margin-bottom: 32px;
}

.awards__box {
    display: flex;
    width: 1075px;
    height: 181px;
    margin-top: 127px;
    justify-content: space-between;
    margin-bottom: 136px;
}

.awards__title {
    display: flex;
    width: 240px;
    height: 181px;
    font-weight: 600;
    align-items: center;
    font-size: 32px;
    line-height: 50px;
}

.awards__picture-text-box {
    display: flex;
    width: 757px;
    height: 181px;
}

.awards__picture-text-box div {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-weight: 200;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.51);
    line-height: 29px;
    font-family: "Roboto";
    height: 181px;
}

.awards__picture-text-box div:nth-child(1) {
    width: 176px;
    margin-right: 71px;
    gap: 14px;
}

.awards__picture-text-box div:nth-child(2) {
    width: 120px;
    margin-right: 71px;
    margin-top: 7px;
    gap: 22px;
}

.awards__picture-text-box div:nth-child(3) {
    width: 126px;
    margin-right: 75px;
    margin-top: 1px;
    gap: 15px;
}

.awards__picture-text-box div:nth-child(4) {
    width: 121px;
    gap: 15px;
}

.reviews {
    display: flex;
    width: 100%;
    height: 902px;
    flex-direction: column;
    align-items: center;
}

.reviews__title {
    display: inline-block;
    font-size: 18px;
    font-weight: 600;
    line-height: 100%;
    margin-top: 42px;
    margin-bottom: 30px;
    color: rgb(124, 124, 124);
}

.title__text {
    display: inline-block;
    width: 468px;
    height: 85px;
    font-size: 32px;
    text-align: center;
    font-weight: 600;
    margin-bottom: 15px;
}

.reviews__container {
    flex: 1;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 91px;
}

.review__button {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    outline: none;
    z-index: 2;
}

.reviews__container-wrapper {
    position: relative;
    width: 1095px;
    margin-left: 395px;
    margin-right: 395px;
    display: flex;
    align-items: center;
}

.reviews__container__black-box {
    display: flex;
    width: 317px;
    height: 257px;
    flex-direction: column;
    background-color: rgb(28, 28, 28);
    align-items: center;
    margin-top: 15px;
    justify-content: center;
}

.reviews__container__black-box :first-child {
    width: 249px;
    height: 73px;
    text-align: center;
    font-weight: 200;
    font-size: 12px;
    line-height: 18px;
    margin-top: 60px;
    margin-bottom: 23px;
}

.reviews__container__black-box :last-child {
    color: rgb(134, 134, 134);
    font-size: 12px;
    line-height: 100%;
}

.reviews__container__grey-box {
    display: flex;
    width: 429px;
    height: 414px;
    flex-direction: column;
    font-size: 16px;
    align-items: center;
    font-weight: 200;
    line-height: 24px;
    background-color: rgb(44, 44, 44);
    text-align: center;
    border: 1px solid black;
}

.reviews__container__grey-box :nth-child(1) {
    margin-top: 36px;
}

.reviews__container__grey-box :nth-child(2) {
    margin-top: 14px;
}

.reviews__container__grey-box :nth-child(3) {
    width: 342px;
    margin-top: 24px;
}

.reviews__container__grey-box :nth-child(4) {
    width: 101px;
    height: 19px;
    font-weight: 300;
    margin-top: 45px;
}

.reviews__container__grey-box :nth-child(5) {
    width: 36px;
    height: 19px;
    margin-top: 7px;
}

.reviews__container__grey-box :nth-child(6) {
    margin-left: 368px;
}

/* Add classes for active state */
.reviews__container__black-box.active {
    width: 429px;
    height: 414px;
}

.reviews__container__grey-box.active {
    width: 429px;
    height: 414px;
}

.reviews__container__black-box.side {
    width: 317px;
    height: 257px;
}

.reviews__container__grey-box.side {
    width: 317px;
    height: 257px;
}

.footer {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 174px;
}

.footer__top {
    display: flex;
    width: 100%;
    height: 147px;
    background: rgba(181, 0, 20, 1);
    align-items: center;
    justify-content: space-around;
}

.footer__top-container {
    width: 1323px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.footer__logo {
    margin-left: 132px;
}

.footer__top__text-box {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.footer__top-desc {
    width: 192px;
    height: 112px;
    font-weight: 400;
    font-size: 16px;
    line-height: 30px;
}

.footer__media {
    display: flex;
    flex-direction: row;
    align-items: center;
    list-style: none;
    gap: 9px;
}

.footer__media:first-child {
    margin-right: 6px;
}

.footer__bottom {
    display: flex;
    width: 100%;
    height: 28px;
    background: rgba(102, 0, 11, 1);
    justify-content: space-around;
    font-weight: 200;
    font-size: 12px;
    line-height: 28px;
}

.footer__bottom ul {
    display: flex;
    flex-direction: row;
    list-style: none;
    justify-content: space-between;
    width: 1323px;
    height: 25px;
}

.footer__bottom li {
    color: rgba(255, 255, 255, 0.5);
}