*,
h1,
h2,
h3,
h4,
h5,
h6,
p {
    font-family: 'Sarabun', sans-serif;
}

body {
    background-color: #FFF6F3;
    margin: 0;
    padding: 0;
}


/* multi-uses */


/* red background color and white font */

.color-bg-font {
    background-color: #ED1C24;
    color: white;
}

hr,
footer hr {
    background-color: #E2DFDF;
}

hr {
    margin: 0;
}


/* Navbar */

#header-navbar .navbar-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.brand-img {
    width: 200px;
}

.navbar {
    padding: 20px 0 10px 0;
    background-color: #FFF6F3;
    border-bottom: 1px solid #ECEDFD;
}

.navbar-cs-menu>ul {
    display: flex;
}

.navbar-cs-menu>ul li a {
    color: black;
}

.has-cs-dropdown {
    position: relative;
    padding-right: 20px;
}

.arrow {
    position: absolute;
}

.dropdown-menu {
    display: none;
}

.dropdown-menu ul li:hover {
    background-color: #ebe4e1;
}

.active {
    display: block;
}


/* Breadcrumb */

#breadcrumb {
    padding-top: 50px;
    padding-bottom: 50px;
}

#breadcrumb li a {
    color: #BB8378;
}

#breadcrumb nav ul li.is-active {
    margin-top: 0;
}

#breadcrumb nav ul li a {
    padding-left: 0;
    padding-right: 0;
}


/* Header Carousel */

#header-text {
    font-size: 25px;
}

#header-carousel .owl-stage {
    background-color: #ECEDFD;
}

#header-carousel div img {
    position: relative;
}

#header-carousel .owl-dots {
    position: absolute;
    bottom: 30px;
    width: 100%;
    margin: 0 auto;
}

#header-carousel button.owl-dot {
    background-color: rgba(0, 0, 0, 0.3);
}

#header-carousel .owl-dots .owl-dot.active span {
    background-color: black;
}


/* Header group text */

.header-group,
#contact-banner {
    background-color: #ECEDFD;
    padding-top: 20px;
    padding-bottom: 20px;
}

.header-group {
    padding-right: 60px;
    padding-left: 60px;
}

.header-group-text,
.header-group-text h3 {
    color: #BB8378;
}

.divider {
    display: inline-block;
    height: 50px;
    border-left: 1px solid #BDBECA;
    border-right: 1px solid #BDBECA;
}


/* Welcome Section */

.welcome-text {
    padding: 0 100px;
}

.welcome-text h1 {
    margin-bottom: 30px;
}

.welcome-text p span {
    display: block;
}


/* Product Categories Section */

#product-cate a {
    color: black;
}

.products-group p {
    text-align: center;
    font-weight: 200;
}

#product-cate {
    padding-top: 0;
    margin-top: 0;
}


/* Contact Banner Section */

#contact-banner {
    padding: 10px 0;
}

#contact-banner p {
    color: #BB8378;
}


/* Review Section */

#review-section,
#review-section h3 {
    color: #BB8378;
}

#review-section div.item {
    padding: 10px 50px;
}

#review-carousel .owl-dots {
    margin-top: 30px;
}

.review-header h3 {
    margin: 20px 0;
}


/* Ask Expert */

#expert {
    background-color: #ECEDFD;
}

.expert-pics {
    text-align: right;
}

.expert-pics img {
    width: 300px;
    display: inline-block;
    margin-right: 100px;
}


/* footer */

#footer {
    background-color: #ED1C24;
    color: white;
    font-size: 20px;
    padding: 70px 0 50px 0;
}

#footer-nav .content {
    display: flex;
    flex-direction: column;
    padding: 0 60px 0 55px;
}

#footer-nav .content a {
    color: white;
}

.footer-address p span {
    display: block;
}

.footer-line-image p a {
    color: white;
    margin-left: 5px;
}

.copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}


/* contact.php */

#contact {
    padding-top: 0;
}

#contact h1 {
    margin-bottom: 50px;
}

#contact .columns {
    margin-top: 50px;
}


/* service.php */

#company-service {
    padding-top: 0;
}

.second-service-columns {
    flex-direction: row-reverse;
}


/* about.php */

#about-company {
    padding-top: 0;
    text-align: center;
}


/* Recruitment.php */

#recruitment {
    padding-top: 0;
}

#recruitment h2 {
    margin-bottom: 50px;
}

#recruitment h6 {
    margin-bottom: 5px;
}

#recruitment .welfare {
    margin-bottom: 0;
}


/* Responsive Section */


/* Responsive min-width: 320px - max-width 768px */

@media only screen and (min-width: 320px) and (max-width: 768px) {
    /* Header and Navbar Section */
    .navbar-brand {
        padding: 0 40px;
    }
    .header-group {
        display: none;
    }
    #header-carousel .owl-dots {
        display: none;
    }
    /* Breadcrumb */
    #breadcrumb {
        display: none;
    }
    /* #breadcrumb nav ul {
        margin-left: 0;
        padding-left: 20px;
    } */
    /* Welcome Section */
    #welcome {
        padding: 20px;
    }
    .welcome-text {
        padding: 0;
    }
    .welcome-text h1 {
        padding: 0;
        line-height: 1.5;
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .welcome-text h1 span,
    .welcome-text p span {
        display: block;
    }
    /* Products Categories Section */
    #product-cate {
        padding-top: 20px;
    }
    .products-group {
        padding: 0 10px;
    }
    .products-group .column {
        padding-left: 25px;
        padding-right: 25px;
    }
    .products-group span {
        display: block;
    }
    /* Contact Banner */
    #contact-banner {
        padding: 30px 0 20px 0;
        text-align: center;
    }
    #contact-banner p {
        text-align: center;
    }
    #contact-banner img {
        width: 350px;
    }
    #contact-banner .contact-banner-text {
        padding-left: 24px;
        padding-right: 24px;
    }
    /* Promotion */
    #promotion img,
    #new-product img {
        width: 500px;
    }
    /* Ask Expert Section*/
    #expert {
        display: none;
    }
    #review-section div.item {
        padding-left: 20px;
        padding-right: 20px;
    }
    /* footer */
    #footer {
        padding: 30px 0 50px 0;
    }
    #footer-nav .content {
        align-items: center;
    }
    .footer-address {
        text-align: center;
        padding: 30px 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.3);
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    }
    .footer-line-group {
        padding-top: 30px;
    }
    .footer-line-image .line-icon,
    .footer-line-image p {
        display: inline-block;
    }
    .footer-line-image .line-icon {
        width: 50px;
        margin-right: 10px;
        border-radius: 10px;
    }
    .footer-line-image p {
        margin-top: 10px;
    }
    .footer-line-image p span {
        display: none;
    }
    .footer-line-image {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .footer-line-image .line-qr-code-img {
        display: none;
    }
    /* Contact.php */
    #contact {
        padding-top: 48px;
    }
    #contact .contact-detail {
        text-align: center;
    }
    /* service.php */
    #company-service {
        padding-top: 48px;
        padding-left: 40px;
        padding-right: 40px;
    }
    #company-service h1 {
        text-align: center;
    }
    /* about.php */
    #about-company {
        padding-left: 30px;
        padding-right: 30px;
    }
    /* recruitment.php */
    #recruitment h2 span {
        display: inline-block;
    }
    .recruitment-first-section,
    .recruitment-second-section {
        padding-left: 20px;
    }
}


/* Responsive for name in about.php */

@media only screen and (min-width: 320px) and (max-width: 429px) {
    #about-company p span {
        display: block;
    }
}

@media only screen and (min-width: 946px) {
    #about-company .technician {
        display: block;
    }
}


/* Responsive 769px - 1023px */

@media only screen and (min-width: 769px) and (max-width: 1023px) {
    /* Header and Navbar Section */
    .navbar-brand {
        padding: 0 40px;
    }
    .header-group-text {
        padding: 0;
    }
    .header-group {
        display: none;
    }
    /* Breadcrumb */
    #breadcrumb nav ul {
        margin-left: 0;
        padding-left: 12px;
    }
    /* Welcome Section */
    .welcome-text {
        padding: 0 20px;
    }
    /* Contact Banner */
    #contact-banner {
        padding: 30px;
    }
    /* Footer */
    #footer-nav .content {
        padding: 0 40px;
    }
    .footer-line-group .footer-line-image p span {
        display: inline;
    }
    .line-icon {
        display: none;
    }
    /* Contact.php */
    #contact {
        padding-left: 40px;
        padding-right: 40px;
    }
    #contact .contact-line {
        text-align: right;
    }
    /* service.php */
    #company-service {
        padding-left: 40px;
        padding-right: 40px;
    }
    /* about.php */
    #about-company {
        padding-left: 45px;
        padding-right: 45px;
    }
    /* recruitment.php */
    #recruitment .recruitment-first-section {
        padding-left: 40px;
    }
}


/* Responsive 1024 up */

@media only screen and (min-width: 1024px) {
    /* Navbar */
    .navbar-menu a,
    .navbar-end p {
        font-size: 18px;
    }
    .navbar-brand {
        padding: 0 20px;
    }
    .navbar-menu {
        margin-left: 30px;
    }
    /* Breadcrumb */
    #breadcrumb nav {
        padding-left: 30px;
    }
    /* Product Categories */
    .products-group .column,
    #promotion .columns .column,
    #new-product .columns .column {
        padding-left: 60px;
        padding-right: 60px;
    }
    #promotion,
    #review-section,
    #new-product {
        margin: 20px 0;
    }
    #expert {
        margin-top: 20px;
    }
    /* Contact Bannner */
    #contact-banner .columns .column {
        padding-left: 60px;
        padding-right: 60px;
    }
    #contact-banner img {
        width: 400px;
    }
    .contact-banner-pic {
        text-align: right;
        padding-top: 10px;
    }
    /* footer */
    .footer-line-group .footer-line-image p span {
        display: inline;
    }
    .line-icon {
        display: none;
    }
    /* Service.php */
    #company-service .columns,
    #contact .column,
    #contact iframe {
        padding-left: 60px;
        padding-right: 60px;
    }
    /* contact.php */
    #contact .contact-line {
        text-align: right;
    }
    /* about.php */
    #about-company {
        padding-left: 90px;
        padding-right: 90px;
    }
    /* recruitment.php */
    #recruitment .recruitment-first-section {
        padding-left: 70px;
    }
    #recruitment .recruitment-second-section {
        padding-right: 70px;
    }
}


/* Responsive 1216 up */

@media only screen and (min-width: 1216px) {
    .brand-img {
        margin-left: 10px;
    }
    .navbar-menu {
        margin-left: 100px;
    }
    #contact-banner .columns .column span {
        display: block;
    }
    #about-company p {
        padding-left: 100px;
        padding-right: 100px;
    }
}


/* Responsive 1408 up */

@media only screen and (min-width: 1408px) {
    .navbar-menu {
        margin-left: 190px;
    }
    #about-company p {
        padding-left: 200px;
        padding-right: 200px;
    }
}


/* Navbar Responsive section */


/* Responsive below 1024px */

@media only screen and (max-width: 1023px) {
    #header-navbar .container {
        padding-bottom: 0;
    }
    .navbar-brand {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }
    #header-navbar .navbar-group,
    .navbar-cs-menu ul {
        flex-direction: column;
    }
    .navbar-cs-menu {
        width: 100%;
        display: none;
    }
    .navbar-cs-menu>ul li {
        border-bottom: 1px solid rgba(0, 0, 0, 0.090);
        width: 100%;
        padding: 15px 20px;
    }
    .mobile {
        display: none;
    }
    .dropdown-menu {
        width: 100%;
        position: relative;
    }
    .dropdown-menu .last-pd {
        border-bottom: none;
        padding-bottom: 0;
    }
    .arrow {
        position: absolute;
        right: 60px;
        transform: rotate(90deg);
    }
    .arrow.arrow-up {
        position: absolute;
        right: 60px;
        transform: rotate(270deg);
    }
}


/* Responsive above 1024px */

@media only screen and (min-width: 1024px) {
    .navbar-cs-menu>ul li {
        margin: 0 15px;
    }
    .dropdown-menu ul li {
        padding: 10px 0;
    }
    .navbar-cs-menu .has-cs-dropdown:hover .dropdown-menu {
        display: block;
        position: absolute;
        background-color: #FFF6F3;
        width: 350px;
        box-shadow: 2px 2px 8px 4px rgba(0, 0, 0, 0.1);
        padding: 20px 0;
    }
    .arrow {
        position: absolute;
        right: 5px;
        top: 3px;
        transform: rotate(90deg);
        font-size: 15px;
    }
}