:root {
    --font-art: "Kaiti SC", "STKaiti", "KaiTi", "楷体", "FangSong", "STFangsong", serif;
    --font-elegant: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", "Microsoft YaHei", serif;
}

body{
    margin:0; padding:0; 
    font-family: var(--font-elegant);
    color:#3a2b20;
    background-color: #fcf7f4;
    font-size: 14px;
}

h1,
h2,
h3,
.sub-title,
.title,
nav a,
button {
    font-family: var(--font-art);
    letter-spacing: 0.04em;
}

input,
textarea,
select {
    font-family: var(--font-elegant);
}

* {
    box-sizing:border-box;
    border:0;
    margin:0;
}
.hero{padding:80px;text-align:center}
button{padding:12px 24px;border:none;background:#5b3b2a;color:#fff;border-radius:8px}

.social-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
}
.icons,
.social-link {
    display: inline-block;
    width: 80px;
    height: 80px;
    background-image: url('../images/icon3.png');
    background-repeat: no-repeat;
    background-size: 1536px 1024px;
    margin-left: -20px;
    transform: scale(0.5);
}
.icons.turn-right {
    background-position: -200px -550px;
    margin-right: -30px;
    transform: scale(0.25);
}
.icons.add {
    background-position: -950px -550px;
    margin-right: -25px;
    transform: scale(0.4);
}
.view-all-link {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.social-link {
    margin-left: -20px;
}

.social-link2.viber,
.social-link2.telegram {
    width: 80px;
    height: 80px;
    background: #fff url('../images/telegram.png') no-repeat;
    background-size: 100% 100%;
    transform: scale(0.5);
    margin-left: -20px;
}

.social-link2.viber {
    background-image: url('../images/viber.png');
}
.social-link:hover,
.social-link2:hover {
    transform: scale(0.7);
}

.social-link.instagram {
    background-position: -500px -380px;
}

.social-link.facebook {
    background-position: -1090px -380px;
}

.social-link.tiktok {
    background-position: -650px -380px;
}

.social-link.whatsapp {
    background-position: -800px -380px;
}

.banner-image {
    width: 100%;
}
.teas-type-list {
    margin-top: 20px;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
}
.teas-type-list li {
    font-size: 18px;
    color: #5b3b2a;
    width: 15%;
    height: 120px;
    background-color: #f9efe7;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

form {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 580px;
    margin: 50px auto;
}

form label {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: end;
}
form input,
form textarea {
    line-height: 40px;
    border: 1px solid #5b3b2a;
    border-radius: 4px;
    margin-left: 16px;
    width: 400px;
    padding-left: 8px;
    height: 45px;
}
form textarea {
    height: 80px;
}
form .required {
    color: red;
    margin-left: 4px;
}
.submit-btn {
    padding: 0 48px;
    font-size: 16px;
    height: 40px;
    margin-top: 20px;
    cursor: pointer;
}
.footer-container {
    padding-top: 40px;
    background-color: #fff;
    box-shadow: 0 -2px 12px rgba(91, 59, 42, 0.08);
}
.footer-txt {
    text-align: center;
    font-size: 14px;
    color: #5b3b2a;
    margin-top: 40px;
    padding-bottom: 40px;
}
.footer-since {
    display: inline-block;
    margin-top: 6px;
    color: #9a7d6c;
    font-size: 12px;
    letter-spacing: 1px;
}
.footer-box {
    display: flex;
    justify-content: center;
    gap: 48px;
    align-items: center;
}
.contant-txt {
    line-height: 1.8;
    border-left: 3px solid #f0e6de;
    padding-left: 32px;
}
.contant-txt .title {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 8px;
}