@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Noto+Sans+Thai:wght@300;400;500;600;700&display=swap');


@import "variables.css";
@import "reset.css";
@import "navbar.css";
@import "hero.css";
@import "home.css";
@import "footer.css";
@import "animation.css";
@import "products.css";
@import "admin.css";
@import "responsive.css";



/* =========================
   GLOBAL
========================= */


* {

    box-sizing:border-box;

}



html {

    scroll-behavior:smooth;

}



body {


    font-family:
    "Noto Sans Thai",
    sans-serif;


    background:#ffffff;


    color:#222;


}






/* =========================
   CONTAINER
========================= */


.container {


    width:min(90%,1200px);

    margin:auto;


}







/* =========================
   SECTION TITLE
========================= */


.section-title {


    text-align:center;

    margin-bottom:50px;


}



.section-title h2 {


    font-family:
    "Orbitron",
    sans-serif;


    color:#2e7d32;


    font-size:40px;


    font-weight:700;


}



.section-title p {


    margin-top:10px;


    color:#777;


    font-size:17px;


}








/* =========================
   FONT STYLE
========================= */



h1,
h2,
h3,
.logo,
.btn,
.admin-btn {


    font-family:
    "Orbitron",
    sans-serif;


    letter-spacing:1px;


}





p,
a,
input,
button,
select,
textarea {


    font-family:
    "Noto Sans Thai",
    sans-serif;


}








/* =========================
   BUTTON GLOBAL
========================= */



button,
.btn {


    cursor:pointer;


    transition:.3s ease;


}






button:hover,
.btn:hover {


    transform:translateY(-3px);


}








/* =========================
   IMAGE DEFAULT
========================= */


img {


    max-width:100%;


    display:block;


}








/* =========================
   PRODUCT IMAGE FIX
========================= */


.product-card img,
.admin-product-card img {


    width:100%;


    height:260px;


    object-fit:cover;


    object-position:center;


    background:#f5f5f5;


}








/* =========================
   INPUT STYLE
========================= */


input,
select,
textarea {


    outline:none;


}






input:focus,
select:focus,
textarea:focus {


    border-color:#4caf50;


}







/* =========================
   ADMIN OVERLAY
========================= */


.admin-modal {


    display:none;


    position:fixed;


    inset:0;


    background:
    rgba(0,0,0,.55);


    justify-content:center;


    align-items:center;


    z-index:9999;


    backdrop-filter:blur(5px);


}






.admin-box {


    background:white;


    width:380px;


    max-width:90%;


    padding:35px;


    border-radius:25px;


    text-align:center;


    box-shadow:
    0 20px 50px rgba(0,0,0,.2);


}






.admin-box h2 {


    color:#2e7d32;


    margin-bottom:20px;


}







.admin-box input {


    width:100%;


    padding:15px;


    border-radius:15px;


    border:1px solid #ddd;


    margin-bottom:15px;


}








.close-btn {


    margin-top:15px;


    background:#eee;


    color:#333;


}








/* =========================
   SCROLLBAR
========================= */


::-webkit-scrollbar {


    width:10px;


}



::-webkit-scrollbar-thumb {


    background:#4caf50;


    border-radius:10px;


}






/* =========================
   MOBILE
========================= */


@media(max-width:768px){



.section-title h2 {


    font-size:30px;


}



.container {


    width:92%;


}



}