/* icon */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

/* font */
@import url('https://fonts.googleapis.com/css2?family=Doppio+One&family=Noto+Sans+Thai+Looped:wght@100;200;300;400;500;600;700;800;900&family=Noto+Serif+Thai:wght@100..900&family=Pridi:wght@200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Doppio+One&family=Mitr:wght@200;300;400;500;600;700&family=Noto+Sans+Thai+Looped:wght@100;200;300;400;500;600;700;800;900&family=Noto+Serif+Thai:wght@100..900&family=Pridi:wght@200;300;400;500;600;700&display=swap');
* {
    font-family: "Mitr", sans-serif;
    font-weight: 200;
    font-style: normal;
}

html {
    scroll-behavior: smooth;
}

.text-bold {
    font-family: "Mitr", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.text-eng-bold {
    font-family: "Doppio One", sans-serif;
    font-weight: 600;
    font-style: normal;
}

/* background */
.bg-cip {
    background-color: #003366;
}

/* navbar */
.social-nav {
    padding: 10px;
}

/* section home */
.home-1 {
    height: 100vh;
    background-image: url(../assets/image/home_01.webp);
    background-repeat: no-repeat;
    background-position: center center;
    
}

.home-1-text p {
    text-shadow: 6px 4px 6px #003366;
    filter: contrast(150%);
}

.home-2 {
    background-image: url(../assets/image/home_02.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
}

.home-2-text {
    height: auto;
    padding: 100px 0px 100px 0px;
    background-image: linear-gradient(to left, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 80%);
}

.home-3 {
    background-image: url(../assets/image/home_03.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
}

.home-3-text {
    height: auto;
    padding: 100px 0px 100px 0px;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 80%);
}


/* footer */
footer {
    background-color: #003366;
}

.product-footer-a {
    padding-left: 10px;
}

.product-footer-a p {
    margin-top: -10px;
}

.product-footer-a p a {
    text-decoration: none;
    color: aliceblue;
}