/* bootstrap icons */

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

/* root styling */

:root {
    /* color theme */
    --gold: #F7C447;
    --green: #5A9766;
    --white: #FFFFFF;
}


/* base styling */

* {
    margin: 0;
    padding: 0;
    transition: all .5s ease-in;
}

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

html,
body {
    width: 100%;
    overflow-x: hidden;
}

body {
    font-family: 'Rajdhani', sans-serif !important;
    font-style: normal;
    font-weight: 500;
    /* padding: 1rem 20vw; */
    background: var(--green);
}

section {
    background: var(--white);
    padding: 5%;
}

a {
    text-decoration: none;
}

.btn {
    background: transparent;
    padding: .5rem;
    margin-top: .5rem;
    font-weight: 500;
    color: var(--white);
    letter-spacing: 2px;
    border: 2px solid var(--gold);
    width: fit-content;
    width: -moz-fit-content;
    text-transform: capitalize;
}

.btn:hover {
    background: transparent;
    border: 2px solid var(--green);
    color: var(--white);
}

.heading {
    margin-bottom: 3%;
    letter-spacing: .5rem;
    width: max-content;
}

.heading h2 {
    font-weight: 600;
}

.heading_line {
    width: 80%;
    height: .3rem;
    background: var(--gold);
}


/* header navigation */

nav.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1rem 15vw;
    /* background: var(--gold); */
    z-index: 100;
}

nav.navbar .navbar-brand {
    /* font-family: 'Comforter', cursive; */
    font-weight: 600;
    letter-spacing: 3px;
    color: var(--white) !important;
}

nav.navbar .navbar-toggler {
    border: none;
}

nav.navbar i {
    color: var(--white);
    font-size: 2rem;
}

nav.navbar .nav-link {
    color: var(--white) !important;
    font-weight: 600;
    /* font-size: 1rem; */
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: .5rem 1rem;
}

nav.navbar .nav-link:hover,
nav.navbar .nav-link.active {
    color: var(--green) !important;
}

nav.scolor {
    background: rgba(0, 0, 0, .8);
    padding: 1rem 20vw;
}


/* ----- home page section ----- */

section.home {
    position: relative;
    width: 100%;
    height: 100vh;
    /* background: url(../img/logo_02.jpeg);
    background-repeat: no-repeat;
    background-size: cover; */
    color: var(--white) !important;
    /* font-family: 'IBM Plex Sans Thai Looped', sans-serif; */
    letter-spacing: 2px;
    text-transform: uppercase;
    background: transparent;
    padding: 0;
}

section.home #homeimg {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: -1;
}

section.home .content {
    position: relative;
    width: 100vw;
    height: 100vh;
    padding: 0 15vw;
    margin: 0;
    background: rgba(0, 0, 0, .8);
}

section.home .home_box {
    width: fit-content;
    width: -moz-fit-content;
    padding: 5%;
}

section.home .home_box {
    width: fit-content;
    width: -moz-fit-content;
    padding: 5%;
}

section.home .home_text {
    font-weight: 600;
    letter-spacing: 1px;
}

section.home h6 {
    color: var(--green);
}

section.home .home_box img {
    max-width: 15rem;
}


/* ----- product section ----- */

section.products {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 5% 20vw;
    background: var(--white);
}

section.products .product_block {
    width: fit-content;
    width: -moz-fit-content;
    margin: 1rem;
    padding: 1rem;
}

section.products .product_block .img_block {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 1);
}

section.products .product_block img {
    border: 2px solid var(--green);
    width: 15rem;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

section.products .product_block h6 {
    text-align: center;
    padding: .5rem;
    margin: .5rem;
    width: 100%;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--green);
    border-radius: 10px;
    background: var(--gold);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}

section.products .product_block:hover h6 {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}


/* ----- about section ----- */

section.about {
    background: var(--green);
}

section.about img {
    position: absolute;
    max-width: 50%;
    z-index: -1;
}

section.about .row {
    width: 100%;
}

section.about .box {
    width: 20rem;
    height: 25rem;
    text-align: left;
    margin: 1rem;
    padding: 0;
    border: 1px solid var(--gold);
}

section.about .about-text {
    width: 100%;
    height: 100%;
    padding: 2%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: end;
    background: rgba(0, 0, 0, .5);
}

section.about h3 {
    width: fit-content;
    width: -moz-fit-content;
    padding: 1% 2%;
    font-weight: 600;
    color: var(--green);
    /* background: var(--gold); */
    /* border: 2px solid var(--gold); */
}

section.about h3,
section.about p,
section.about button {
    margin: .2rem 1rem;
}

section.about .about_des {
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
}

.wrap {
    border: 2px solid var(--gold);
    border-radius: 10px;
    padding: 2%;
}

section.about .box:hover .about_des {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

section.about .box:hover .about-text {
    background: rgba(0, 0, 0, .7);
}

section.about .aim {
    background: url(../images/about/about_01.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

section.about .vision {
    background: url(../images/about/about_03.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

section.about .mission {
    background: url(../images/about/about_05.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

section.about .box img {
    position: absolute;
}

section.about .box .about-text {
    padding: 3% 0;
    color: var(--white);
}

section.about btn {
    z-index: 10;
}


/* ----- aim slide section ----- */

section.aim,
section.vision,
section.mission {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    padding: 5%;
    background: var(--green);
    border: .5rem solid var(--green);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    z-index: 9999;
}

section.aim.active,
section.vision.active,
section.mission.active {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

section.aim .aim-container,
section.vision .vision-container,
section.mission .mission-container {
    background: var(--green);
    padding: 2%;
    border-radius: 5px;
}

section.aim .aim-container #aim-close,
section.vision .vision-container #vision-close,
section.mission .mission-container #mission-close {
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    padding: 1rem 1.5rem;
    font-size: 2rem;
    color: var(--gold);
}

section.aim .aim-container img,
section.vision .vision-container img,
section.mission .mission-container img {
    padding: 5%;
    width: 300px;
}

section.aim .aim-container h2,
section.vision .vision-container h2,
section.mission .mission-container h2 {
    margin: 3%;
    font-weight: 600;
    color: var(--white);
}

section.aim .aim-container ul,
section.vision .vision-container ul,
section.mission .mission-container ul {
    margin: 0;
    padding: 0;
}

section.aim .aim-container li,
section.vision .vision-container li,
section.mission .mission-container li {
    list-style-type: none;
    color: var(--white);
    font-weight: 500;
    margin: 2%;
}


/* ----- client section ----- */

section.client {
    padding: 5% 20vw;
}

section.client .container {
    width: fit-content;
    color: var(--green);
    letter-spacing: .1rem;
}

section.client .container-fluid .row {
    width: 100%;
}

section.client .heading {
    font-weight: 700;
}

section.client .row .client_img {
    max-width: 10rem;
    position: relative;
    padding: 1rem;
    z-index: 9;
}

section.client .row .client_img:hover {
    filter: invert(1);
    transform: scale(1.2);
}

section.client a {
    position: relative;
    margin: 1rem;
    width: fit-content;
}

section.client .container:nth-child(2) img {
    padding: 5%;
    width: 15rem;
}


/* ----- footer navigation ----- */

footer {
    padding: 1%;
    margin: 0;
    background: rgba(0, 0, 0, .5);
}

footer .row {
    width: 100%;
}

@media (max-width: 766px) {
    footer {
        padding: 5%;
    }
    footer .row {
        justify-content: center !important;
        align-items: center !important;
    }
}

footer .box {
    width: 20rem;
    margin: 2%;
    color: var(--white);
}

footer .box h3 {
    padding: 3% 0;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
}

footer .box p {
    width: 100%;
    font-weight: 500;
    letter-spacing: 1px;
}

footer .box a {
    text-decoration: none;
    color: var(--white);
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 1px;
    padding: 2%;
}

footer .box a:hover {
    color: var(--green);
}

footer.social {
    background: rgba(0, 0, 0, .5);
    padding: 1rem;
}

footer .socials {
    margin: 0 2%;
    color: var(--white);
    font-size: 1.2rem;
    width: fit-content;
}

footer .socials h6 {
    width: fit-content;
}


/* contact.html */

section.contact {
    position: relative;
    width: 100%;
    height: auto;
    padding: 5rem 0;
    background: var(--green);
}

section.contact .heading {
    padding: 2%;
}

section.contact form,
section.contact .map_box {
    padding: 0%;
    margin: 1rem;
    width: 40%;
}

section.contact form p {
    font-weight: 500;
    font-size: 1.25rem;
    color: var(--white);
    letter-spacing: 2px;
}

section.contact form .input_box input {
    width: 45%;
}

section.contact form .input_box input,
section.contact form textarea {
    padding: .8rem 1rem;
    margin: 1rem .5rem;
    border-radius: 5px;
    border: 1px solid var(--gold);
    background: #FFF;
    text-transform: none;
    color: #333;
    font-size: 1rem;
}

section.contact .map_box iframe {
    width: 100%;
    height: 20rem;
    margin: 1rem 0;
    border-radius: 10px;
}

section.contact .map_box a {
    color: var(--white);
    margin: 1rem 0;
}


/* -----media query -----*/

@media all {
    @media (min-width: 992px) {
        #aim-btn, #vision-btn, #mission-btn {
            display: none;
        }
    }
    @media (max-width: 991px) {
        /* header navigation */
        nav.navbar {
            padding: 1rem;
        }
        nav.navbar .navbar-nav {
            background: var(--gold);
        }
        /* home section */
        section.home .content {
            padding: 0;
        }
        /* service section */
        section.products .product_block h6 {
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        }
        /* about us */
        section.about .about_des {
            display: none;
        }
        #aim-btn,
        #vision-btn,
        #mission-btn {
            display: initial;
        }
        /* client section */
        section.client {
            padding: 5% 0;
        }
        section.client {
            flex-direction: column;
        }
        section.client .heading {
            padding: 5% 0;
        }
        section.client .text-container {
            width: 100%;
            flex-direction: row !important;
        }
        section.client .num-one,
        section.client .num-two {
            margin: 0 1%;
        }
        .client_slide {
            filter: 1;
            flex-direction: column;
        }
        section.client .client_line {
            width: 8rem;
        }
        section.client .row .client_img {
            padding: 0;
            margin: .5rem;
            max-width: 6rem;
        }
        /* contact html */
        section.contact .container-fluid {
            flex-direction: column !important;
        }
        section.contact form,
        section.contact .map_box {
            padding: 5%;
            width: 100%;
        }
    }
    @media (max-width: 780px) {
        /* footer socials */
        footer .socials {
            margin: 0 5%;
        }
        footer.social .socials h6 {
            display: none;
        }
    }
    @media (max-width: 600px) {
        /* client section */
        section.client .num-one h2 {
            font-size: 8rem;
        }
    }
    @media (max-width: 500px) {
        /* client section */
        section.client .num-one h2 {
            font-size: 5rem;
        }
        section.client .text-container img {
            max-width: 10rem;
        }
        section.client .num-two h2 {
            font-size: 1rem;
            font-weight: 600;
            letter-spacing: .1rem;
        }
    }
    @media (max-width: 480px) {
        /* about section */
        section.aim,
        section.vision,
        section.mission {
            border: .5rem solid var(--green);
        }
        section.aim .aim-container img,
        section.vision .vision-container img,
        section.mission .mission-container img {
            display: none;
        }
        section.aim .aim-container li,
        section.vision .vision-container li,
        section.mission .mission-container li {
            margin: 0;
        }
        section.aim .aim-container,
        section.vision .vision-container,
        section.mission .mission-container {
            border-radius: 1rem;
            border: .5rem;
        }
        section.aim .aim-container #aim-close,
        section.vision .vision-container #vision-close,
        section.mission .mission-container #mission-close {
            padding: 0;
            margin: 0 1%;
        }
        /* contact html */
        section.contact form .input_box input {
            width: 100%;
        }
    }
}