@import url('https://fonts.googleapis.com/css2?family=Kanit&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Kanit", sans-serif;
    font-weight: 400;
    font-style: normal;
}

:root {
    --color-primary: #213448;
    --color-secon: #FFDF88;
    --color-bg: #fefefe;
}

.bg-main {
    background-color: var(--color-primary);
}

.text-main {
    color: var(--color-primary);
}

.text-secon {
    color: var(--color-secon);
}

.mt-custom {
    margin-top: 7rem;
}

.mobile {
    display: none;
}

@media screen and (max-width: 768px) {
    .desktop {
        display: none;
    }

    .mobile {
        display: contents;
    }
}

/* navbar-start */

.bg-body-custom {
    background-color: var(--color-primary);
}

.navbar-font {
    font-size: 1.25rem;
}

.navbar-toggler {
    border: none;
}

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

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23FFDF88' stroke-width='2' d='M4 7h22M4 15h22M4 23h22' /%3e%3c/svg%3e");
}

.nav-link,
.navbar-brand {
    color: var(--color-secon);
}

.navbar-brand:hover {
    color: var(--color-secon);
    text-decoration: underline;
}

.navbar-brand:focus {
    color: var(--color-secon);
}

.nav-link:hover {
    background-color: var(--color-secon);
    color: var(--color-primary);
    border-radius: 5px;
}

.nav-link {
    border-radius: 5px;
}

.active {
    background-color: var(--color-secon);
    color: var(--color-primary) !important;
    border-radius: 5px;
}

.dropdown-item:hover {
    color: var(--color-secon);
    background-color: var(--color-primary);
}

@media screen and (max-width: 768px) {
    .navbar-font {
        font-size: .9rem;
    }
}

/* navbar-end */


/* home-content-start */

.card {
    overflow: hidden;
}

.image-home-news {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: inherit;
    position: relative;
    transition: .5s;
}

.text-home-news {
    position: absolute;
    z-index: 1;
    color: var(--color-primary);
    background-color: var(--color-bg);
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    padding: 5px 15px;
    border-radius: .25rem;
    opacity: 0;
    pointer-events: none;
}

.image-home-news:hover {
    transform: scale(1.1);
    transition: .5s;
}

.image-home-news:hover+.text-home-news {
    opacity: 1;
    transition: .5s;
    pointer-events: none;
}

.bg-main {
    background-color: var(--color-primary);
    color: var(--color-secon);
}

.border-left {
    border-left: 1px solid var(--color-secon);
}

.btn-home-news {
    color: var(--color-secon) !important;
}


@media screen and (max-width: 768px) {
    .image-home-news {
        height: 550px;
    }

    .border-left {
        border-top: 1px solid var(--color-secon);
        border-left: none;
    }
}

/* home-content-end */


/* person-content-start */

.text-person {
    color: var(--color-primary);
    text-decoration: none;
    transition: .5s;
}

.text-person:hover .card {
    color: var(--color-secon);
    background-color: var(--color-primary);
    transition: .5s;
}

.image-person {
    width: 100%;
    height: 270px;
    object-fit: cover;
}

.card-person-hover:hover {
    box-shadow: 0px 0px 10px rgba(33, 52, 72, .5);
    transition: .3s;
}

@media screen and (max-width: 768px) {
    .text-person h6 {
        font-size: .75rem !important;
    }
}

/* person-content-end */



/* department-content-start */

.border-dep-bottom {
    border-bottom: 5px solid var(--color-primary);
}

.image-depart {
    width: 100%;
    height: 650px;
    object-fit: cover;
    border-radius: .25rem;
}

.btn-main {
    background-color: var(--color-primary);
    color: var(--color-secon);
    padding: 5px 25px;
    transition: .5s;
}

.btn-main:hover {
    background-color: var(--color-primary);
    color: var(--color-secon);
    letter-spacing: 3px;
    transition: .5s;
}

.btn-secon {
    background-color: var(--color-secon);
    color: var(--color-primary);
    padding: 5px 25px;
    transition: .5s;
}

.btn-secon:hover {
    background-color: var(--color-secon);
    color: var(--color-primary);
    letter-spacing: 3px;
    transition: .5s;
}


/* department-content-end */


/* contact-content-start */

.map-contact {
    width: 100%;
    height: 450px;
}

.image-contact {
    width: 100%;
    height: 450px;
    object-fit: cover;
    border-radius: .25rem;
}

@media screen and (max-width: 768px) {
    .map-contact {
        height: 350px;
    }

    .image-contact {
        height: 600px;
    }
}

/* contact-content-end */



/* services-content-start */

.image-services {
    width: 85%;
    height: 230px;
    object-fit: cover;
    border-radius: .25rem;
}

.card-services-hight {
    height: 380px;
}

@media screen and (max-width: 768px) {
    .card-services-hight {
        height: 100%;
    }
}

/* services-content-end */


/* admin-home-start */

.pagination .page-link {
    color: var(--color-secon);
    background-color: var(--color-primary);
}

.card-admin-hover {
    transition: .5S;
}

.card-admin-hover:hover {
    background-color: rgba(33, 52, 72, .1);
    transition: .5S;
}

.btn-admin-main {
    background-color: var(--color-primary);
    color: var(--color-secon);
    transition: .5s;
}

.btn-admin-main:hover {
    background-color: var(--color-primary);
    color: var(--color-secon);
    letter-spacing: 1px;
    transition: .5s;
}

.image-admin-home {
    width: 100%;
    height: 100%;
    border-radius: .25rem;
}

.iframe-map {
    width: 100%;
    height: 450px;
    border-radius: .25rem;
}

/* admin-home-end */