:root {
    --main-orange: #EF8742;
    --main-red:  #DE492E;
    --main-blue: #293b5b;
    --accent-orange: #de492e;
    --background: #ffefcd;
    --menu-buttons: #FFF7E6;
    --shadow-size: 16px;
}

@font-face {
    font-family: 'menu';
    src:  url('fonts/Candal-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    }
@font-face {
    font-family: "aboutus";
    src: url('fonts/LiberationMono-Regular.ttf') format('truetype');
    font-weight:normal;
    font-style:normal;
    } 
@font-face {
    font-family: "aboutus";
    src: url('fonts/LiberationMono-Bold.ttf') format('truetype');
    font-weight:bold;
    font-style:normal;
}
@font-face {
    font-family: 'Kanit';
    src: url('fonts/Kanit-Regular.ttf') format('truetype');
    font-weight:normal;
    font-style:normal;
}
@font-face {
    font-family: "Kanit";
    src: url('fonts/Kanit-Bold.ttf') format('truetype');
    font-weight:bold;
    font-style:normal;
}

body {
    font-size:16;
    font-family:'aboutus';
    color:var(--main-blue);
    background-color:var(--background);
}
html[lang="th"] body {
    font-family: 'Kanit';
    font-size:18;
}

.main-logo {
    width:116px;
    height:auto;
}

.flag-box {
    display:flex;
    flex-direction:column;
    width:25px;
    position: absolute;
    right:20px;
    top:20px;
    gap:8px;
}
.flag-box img{
    width:100%;
}
.split-container {
    margin-top:48px;
    display: flex;
    margin-left: 15%; margin-right: 15%;
    width: 70%;
    gap: 20px;
}

.left-side {
    flex: 6;
}
.right-side {
    flex: 4;
}

.home-page{

    .btn-bg {
        display: inline-block;
        width:100%;
        margin-top: 12px; margin-bottom:12px;
        background-size: cover;
        background-position: center;
        background-color:var(--main-red);
        background-repeat: no-repeat;
        box-shadow: 8px 8px 0px 0px var(--main-blue);
        text-decoration: none;
        position: relative;
        transition: all 0.05s ease;
       }
    .btn-big {
        height:301px;
    }
    .btn-mid {
        height:188px;
    }
    .btn-small {
        height:155px;
    }
    .mid-img-left{
        height:94px; top: 84px; left:12px;
    }
    .mid-img-right{
        height:80px; top: 92px; right:12px;
    }
    .big-img-left{
        height:104px; top:190px; left:12px;
    }
    .big-img-right{
        height:80px; top:220px; right:12px;
    }
    .btn-bg:active {
        transform: translate(8px, 8px);
        box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.3);
    }
    .btn-content {
        position:relative;
        width:auto;
        padding: 5%;
    }
    .btn-content img{
        position:absolute;
    }
    .btn-content-center {
        width:auto;
        padding-top:20px;
        display:flex;
        position:relative;
        justify-content:center;
        align-items:flex-end;
        vertical-align:text-bottom;
    }
    .btn-content-center img {
        height:132px;
    }

}

.about-page{

    .image-side {
        display:flex;
        flex:4;
    }
    .text-side {
        background-color:white;
        padding-left:6px;
        flex: 6;
        margin-left: -20px;
    }
    .text-side a{
        text-decoration: underline;
        color:inherit;
    }

}

.product-page{

}

.where-to-buy-page{
    .split-container {
        flex-direction:row;
        margin-top:94px;
        display:flex;
        width:50%;
        margin-left:25%;
        margin-right:25%;
        gap:20px;
    }
    .left-side {
        display: flex;
        flex-direction: column;
        justify-content:center;
        align-items:center;
        gap:24px;
        flex:5;
    }
    .right-side {
        display: flex;
        justify-content:center;
        flex:5;
    }
    .right-side img {
        height:100%;
        width:500px;
        object-fit:contain;
    }

    .logo {
        width:100px;
        height:100px;
    }


}

.contact-page {
    .center-container {
        display:flex;
        flex-direction:column;
        width:50%;
        margin-left:25%;
        margin-right:25%;
        margin-top:92px; 
        align-items:center;
    }

    .social-box {
        display:flex;
        flex-direction:row; 
        justify-content:center; 
        align-items:center; 
        gap:30px;`
    }
    .social-box img {
        height:64px;width:64px;

    }
    .text-box {
        width:255px;
        color:#DE492E;
        margin-top:48px;
    }
    .v-line {
        display:inline-block;
        border-left: 2px solid #DE492E;
        height: 60px;
        margin:30px;
    }

}

.menu-container {
    margin-top:24px;
    display: flex;
    justify-content:center;
}

.menu-btn-bg {
    align-items:center;
    justify-content:center;
    margin-left:2%; margin-right:2%;
    display: grid;
    text-decoration: none;
    color: var(--main-blue);
    font-weight:bold;
    font-size: 20px;
    height:100px; width: 100px;
    background-color:var(--menu-buttons);
    box-shadow: var(--shadow-size) var(--shadow-size) 0px 0px var(--main-red);
    position: relative;
    transition: all 0.05s ease;
}
.menu-btn-content {
    font-size:16px;
    position:relative;
    font-family:menu;
}

html[lang="th"] .menu-btn-content {
    font-family: 'Kanit';
}

.menu-btn-bg:active{
    transform:translate(var(--shadow-size), var(--shadow-size));
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.3);
    color:var(--main-red);
}

.page-grid {
    margin-top:48px;
    width:80%;
    margin-left:10%;
    margin-right:10%;
    display:flex;
    flex-wrap: wrap;
    justify-content:center;
}
.item {
    flex: 0 0 250px;
    margin:24px;
so for ncheck ab}
.item-box {
    background-color:white;
    margin-top:24px;
}
.highlight {
    color:var(--main-orange);
}
.rainbow-arrow {
    margin: 24px;
    width: 40px;
    height: 40px;
    filter: brightness(0) invert(1) sepia(1) saturate(10000%) hue-rotate(0deg);
    animation: rainbow-arrow 0.5s linear infinite;
}


@media (max-width: 1080px) {
    body {
        font-size:32;
    }
    html[lang="th"] body {
        font-size:36;
    }

    .home-page {
        .btn-mid {
            height:300px;
        }
        .btn-big {
            height: 600px;
        }
        .btn-small {
            height: 200px;
        }
        .mid-img-left {
            top: 125px;
            height:180px;
        }
        .mid-img-right {
            top:180px;
            height:110px;
        }
        .big-img-left {
            top:425px;
            height:180px;
        }
        .big-img-right {
            top:480px;
            height:125px;
        }

        .btn-content-center img {
         height:180px;
        }

    }
    .main-logo {
        width:200px; height: 200px;
    }
    .menu-btn-bg {
        width:200px; height:200px;
    }
    .menu-btn-content {
        font-size:32px;
    }
    .split-container {
        flex-direction: column;
        gap: 0px;
        width:90%;
        margin-left:5%; margin-right:5%;
    }
    .menu-container {
        margin-left:30%; margin-right:30%;
        width:40%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: auto;
        gap: 20px;
        align-items: start;
    }
    .item {
        flex: 0 0 500px;
    }
    .about-page{
        .text-side{
            margin-left:0px;
        }   
    }
    .where-to-buy-page{
        .split-container{
            flex-direction:column;
        }
        .left-side{
            flex-direction: row;
            margin-left:-40px;
            gap:10px;
        }
        .right-side img{
            margin-top:94px;
            width:900px;
        }
        .logo{
            width:150px;
            height:150px;
        }

    }
        .rainbow-arrow{
        width:50px;
        height:50px;
        margin-top:48px;
    }
    .contact-page {
        .center-container img {
            width:140%;
        }
        .social-box img {
            margin-top:48px;
            height:128px; width:128px;
        }
        .text-box {
            width:550px;
            margin-left:64px;
        }

    }
    .flag-box {
        width:64px;
        gap:32px;
    }
}
@media (max-width: 874px) {
    .main-logo {
        width:100px; height: 100px;
    }
    .flag-box {
        width:24px;
        gap:16px;
    }
    .menu-btn-bg {
        width:100px; height:100px;
    }
    .menu-btn-content {
        font-size:16px;
    }

}
      
@keyframes rainbow-arrow {
    0% { filter: brightness(0) invert(1) sepia(1) saturate(10000%) hue-rotate(0deg); }
    100% { filter: brightness(0) invert(1) sepia(1) saturate(10000%) hue-rotate(360deg); }
}