#app {
    width: 100%;
    min-height: calc(100vh - 5.2rem);
}

/* header strat */
header {
    height: 2.75rem;
    padding: 0 .6875rem;
}

header .logo::before {
    content: '';
    position: absolute;
    width: 16.875rem;
    height: .0625rem;
    background: linear-gradient(90deg, #AD8E72 0%, rgba(173, 142, 114, 0) 100%);
    bottom: .3125rem;
    left: 50%;
    transform: translateX(-50%);
}

.menu_pannel header .logo::before {
    display: none;
}

header>div:nth-child(1) {
    width: 2.6875rem;
}

header>div:nth-child(3) {
    width: 2.6875rem;
    gap: .6875rem;
}

header .back {
    width: 2rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

header .back img {
    width: 1.125rem;
    height: 1.125rem;
}

header .search {
    width: 1rem;
    height: 1rem;
}

header .menu {
    width: 1.125rem;
    height: 1.125rem;
}

header .logo {
    position: relative;
}

header .logo img {
    width: 6.5625rem;
    height: 1.125rem;
}

/* header end */

.top {
    background: #DAD6CA;
}

.random {
    padding: 0 1.875rem 1.25rem;
}

.random .title-1,
.random .title-2 {
    font-family: 'Playfair Display SC 400', sans-serif;
    font-size: 1.875rem;
    color: #5C4C42;
    position: relative;
    z-index: 1;
}

.random .news_img {
    border-radius: 6.25rem 6.25rem 0px 0px;
    width: 12.5rem;
    height: 16.5rem;
    margin: -1.5rem auto 1.875rem;
    display: block;
}

.random .title {
    font-family: 'Roboto 400', sans-serif;
    font-size: .875rem;
    font-weight: normal;
    line-height: 140%;
    letter-spacing: 0em;
    color: #5C4C42;
    margin-bottom: .625rem;
}

.random .desc {
    font-family: 'Roboto 400', sans-serif;
    font-size: .75rem;
    font-weight: normal;
    line-height: 140%;
    letter-spacing: 0em;
    color: #AD8E72;
}

.category-title {
    font-family: 'Playfair Display SC 400', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0em;
    color: #5C4C42;
    margin: 1.7813rem auto .625rem;
    text-align: center;
}

.category-box {
    gap: .375rem;
    width: 100%;
    padding: 0 .6188rem;
}

.category-box .arrow {
    width: .3237rem;
    height: .5981rem;
}

.category {
    overflow-x: scroll;
    overflow-y: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 20.75rem;
    height: 4.9688rem;
    gap: .25rem;
}

.category_div {
    width: 4.8438rem;
    height: 4.9688rem;
    flex-shrink: 0;
    position: relative;
}

.category_div img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.category_div .cat_name_div {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 4.8125rem;
    min-height: 2.4063rem;
    border-radius: 4.6875rem;
    padding: .4656rem;
    background: linear-gradient(180deg, #D8D8D8 -1%, rgba(216, 216, 216, 0) 100%);
}

.category_div .cat_name {
    font-family: 'Playfair Display SC 400', sans-serif;
    /* font-family: 'Noto Sans 400',sans-serif; */
    font-size: .625rem;
    line-height: normal;
    letter-spacing: 0em;
    color: #5C4C42;
    white-space: wrap;
    text-align: center;
    text-transform: capitalize;
}

/* part one strat */
.part-one {
    width: 100%;
    margin-top: 2.9688rem;
}

.part-one .type {
    font-family: 'Playfair Display SC 400', sans-serif;
    font-size: 1.875rem;
    letter-spacing: 0em;
    color: #5C4C42;
    padding-left: 1.875rem;
    position: relative;
}

.part-one .type::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 5.1563rem;
    background: #D8D8D8;
    left: 0;
    z-index: -1;
    top: 100%;
}

.part-one .first .news_img {
    width: 9.375rem;
    height: 12.5rem;
    border-radius: 4.375rem;
    margin: -1rem auto .3125rem;
    opacity: 0.8;
}

.part-one .first .title {
    font-family: 'Roboto 400', sans-serif;
    font-size: .875rem;
    line-height: 140%;
    letter-spacing: 0em;
    color: #5C4C42;
    margin-bottom: .625rem;
    padding: 0 1.875rem;
}

.part-one .first .desc {
    font-family: 'Roboto 400', sans-serif;
    font-size: .75rem;
    line-height: 140%;
    letter-spacing: 0em;
    color: #AD8E72;
    padding: 0 1.875rem;
    margin-bottom: .9375rem;
}

.part-one .first .line {
    width: 16.875rem;
    height: .0625rem;
    margin: 0 0 0 1.875rem;
    background: linear-gradient(90deg, #AD8E72 0%, rgba(173, 142, 114, 0) 100%);
}

.part-one .news_div {
    margin: 1.1563rem auto;
    padding: 0 1.875rem;
    display: grid;
    grid-template-columns: 8.4206rem 1fr;
    gap: .7856rem;
}

.part-one .news_div .news_img {
    width: 100%;
    height: 11.25rem;
}

.part-one .news_div .title {
    font-family: 'Roboto 400', sans-serif;
    font-size: .875rem;
    font-weight: normal;
    line-height: 140%;
    letter-spacing: 0em;
    color: #5C4C42;
    margin-bottom: .625rem;
}

.part-one .news_div .desc {
    font-family: 'Roboto 400', sans-serif;
    font-size: .75rem;
    font-weight: normal;
    line-height: 140%;
    letter-spacing: 0em;
    color: #AD8E72;
    margin-bottom: .9375rem;
}

.part-one .news_div .line {
    width: 8.1681rem;
    height: .0625rem;
    background: linear-gradient(180deg, #AD8E72 0%, rgba(173, 142, 114, 0) 100%);
    margin-bottom: .6094rem;
}

.part-one .news_div .read {
    color: #AD8E72;
    font-family: 'Roboto 400', sans-serif;
    font-size: .5625rem;
    font-weight: normal;
    line-height: 140%;
    letter-spacing: 0em;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .125rem;
}

.part-one .news_div .read img {
    width: .625rem;
    height: .5613rem;
}

.part-one .more,
.part-two .more,
.part-three .more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 9.8438rem;
    height: 1.4375rem;
    background: #AD8E72;
    border-radius: 1.5625rem;
    font-family: 'Noto Sans 500', sans-serif;
    font-size: .5625rem;
    letter-spacing: 0em;
    color: #FFFFFF;
    margin: 1.4688rem auto;
}

/* part one end */
/* part two start */
.part-two {
    background: #DAD6CA;
    padding: 1.9338rem 1.875rem 1.3125rem;
    position: relative;
    margin: 2.625rem auto 2.0313rem;
}

.part-two .type {
    font-family: 'Playfair Display SC 400', sans-serif;
    font-size: 1.875rem;
    letter-spacing: 0em;
    color: #5C4C42;
    width: 11.4063rem;
    position: absolute;
    right: 0;
    top: -1.0625rem;
    z-index: 1;
}

.part-two .type::before {
    content: "";
    position: absolute;
    left: -0.375rem;
    bottom: -0.375rem;
    background-color: #DAD6CA;
    width: 100%;
    height: 80%;
    z-index: -1;
}

.part-two .first .news_img {
    width: 11.4688rem;
    height: 8.8734rem;
    margin-bottom: .9744rem;
}

.part-two .first .title {
    font-family: 'Roboto 400', sans-serif;
    font-size: .875rem;
    line-height: 140%;
    color: #5C4C42;
    margin-bottom: .575rem;
}

.part-two .first .desc {
    font-family: 'Roboto 400', sans-serif;
    font-size: .75rem;
    line-height: 140%;
    color: #AD8E72;
    margin-bottom: .925rem;
}

.part-two .first .line {
    width: 16.875rem;
    height: .0625rem;
    background: linear-gradient(90deg, #AD8E72 0%, rgba(173, 142, 114, 0) 100%);
    margin-bottom: 1.0625rem;
}

.part-two .news_div .info {
    margin-bottom: 1.0625rem;
    display: grid;
    grid-template-columns: 2.1875rem 1fr;
    align-items: flex-start;
    gap: .1875rem;
}

.part-two .news_div .order {
    font-family: 'Playfair Display SC 400', sans-serif;
    font-size: 1.5625rem;
    line-height: normal;
    color: #AD8E72;
    width: 2.1875rem;
    height: 2.4688rem;
    text-align: left;
}

.part-two .news_div .title {
    font-family: 'Roboto 400', sans-serif;
    font-size: .875rem;
    line-height: 140%;
    letter-spacing: 0em;
    color: #5C4C42;
}

/* part two end */
/* part three start */
.part-three {
    padding: 0 1.875rem;
}

.part-three .type {
    font-family: 'Playfair Display SC 400', sans-serif;
    font-size: 1.875rem;
    letter-spacing: 0em;
    color: #5C4C42;
    position: relative;
    margin-bottom: 1.875rem;
    text-align: center;
}

.part-three .type::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.3125rem;
    width: 16.875rem;
    height: .0625rem;
    background: linear-gradient(90deg, #AD8E72 0%, rgba(173, 142, 114, 0) 100%);
}

.part-three .news_div:nth-child(2n) {
    display: grid;
    grid-template-columns: 9.0625rem 9.375rem;
    gap: .3125rem;
    margin-bottom: 2.25rem;

}

.part-three .news_div:nth-child(2n+1) {
    display: grid;
    grid-template-columns: 9.375rem 9.0625rem;
    gap: .3125rem;
    margin-bottom: 2.25rem;
}

.part-three .news_img {
    width: 100%;
    height: 7.9688rem;
}

.part-three .title {
    font-family: 'Roboto 400', sans-serif;
    font-size: .875rem;
    line-height: 140%;
    letter-spacing: 0em;
    color: #5C4C42;
    margin-bottom: .4556rem;
}

.part-three .desc {
    font-family: 'Roboto 400', sans-serif;
    font-size: .75rem;
    line-height: 140%;
    letter-spacing: 0em;
    color: #AD8E72;
    margin-bottom: .9375rem;
}

.part-three .line {
    width: 127.98px;
    height: .0313rem;
    background: #AD8E72;
    margin-bottom: .75rem;
}

.part-three .news_div .read {
    color: #AD8E72;
    font-family: 'Roboto 400', sans-serif;
    font-size: .5625rem;
    font-weight: normal;
    line-height: 140%;
    letter-spacing: 0em;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .125rem;
}

.part-three .news_div .read img {
    width: .625rem;
    height: .5613rem;
}

/* part three end */