/* @import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Noto+Sans+Thai:wght@100;200;300;400;500;600;700;800;900&family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); */
html,
body {
    font-family: 'Noto Sans Thai', 'Kanit', sans-serif;
}

.TxtLogoFooter {
    line-height: 1.3;
}

.TxtLogoFooter .title {
    font-size: 1.4rem;
}

.TxtLogoFooter .subtitle {
    font-size: 1.2rem;
}

.showAdmin .box {
    /* text-align: center; */
    /* display: flex; */
    /* gap: 10px; */
    /* align-items: anchor-center; */
}

.showAdmin .box .img {
    overflow: hidden;
    /* margin: auto; */
    height: 8rem;
    max-width: 8rem;
    border-radius: 51%;
    border: 5px solid #fff;
    box-shadow: rgb(100 100 111 / 20%) 0px 7px 29px 0px;
    margin-bottom: 1rem;
    /* border-bottom: 2rem solid #fff; */
}

.showAdmin .box .img {}

.showAdmin .box .infoName {}

.showAdmin .box .name {
    font-weight: 600;
    font-size: 1.1rem;
    color: #822699;
}

.showAdmin .box .position {
    font-size: .85rem;
}

.about .textAbout {
    text-align: center;
    font-size: 1.35rem;
}

.about .textAbout strong {
    color: #234167;
}

.about .subtextAbout {
    text-align: center;
    margin-top: .5rem;
}

.textAbount25 {
    background-color: #fff;
    padding: 1rem;
    border-radius: 1rem;
    box-shadow: rgb(19 19 19 / 65%) 0px 8px 24px;
}


.page-area {
    position: relative;
    z-index: 5;
}

.page-shape-1 {
    position: absolute;
    top: 0;
    right: 0;
    width: 35%;
    height: 100%;
    z-index: -1;
}

.page-shape-1 img {
    width: 100%;
}

@media (max-width: 767px) {
    .page-shape-1 {
        display: none;
    }
}

.page-shape-2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 35%;
    height: 100%;
    z-index: -1;
}

.page-shape-2 img {
    width: 100%;
}

@media (max-width: 767px) {
    .page-shape-2 {
        display: none;
    }
}


/*===========================
	ABOUT css 
===========================*/

.about-area {
    position: relative;
    z-index: 5;
}

.about-shape-1 {
    position: absolute;
    top: 0;
    right: 0;
    width: 35%;
    height: 100%;
    z-index: -1;
}

.about-shape-1 img {
    width: 100%;
}

@media (max-width: 767px) {
    .about-shape-1 {
        display: none;
    }
}

.about-shape-2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 35%;
    height: 100%;
    z-index: -1;
}

.about-shape-2 img {
    width: 100%;
}

@media (max-width: 767px) {
    .about-shape-2 {
        display: none;
    }
}

.about-content {
    /* max-width: 520px; */
}

.about-content .text {
    margin-top: 0;
    text-indent: 2.5em;
    color: #6d6d6d;
}

.about-content .main-btn {
    /* background: -webkit-gradient(linear, left top, right top, from(#62a507), color-stop(50%, #fe6e9a), to(#62a507)); */
    /* background: linear-gradient(to right, #8dc63f 0%, #6fa724 50%, #8dc63f 100%); */
    background-size: 200%;
    height: 50px;
    line-height: 50px;
    padding: 0 35px;
    margin-top: 40px;
}

.about-content .main-btn:hover {
    background-position: right center;
}

.boxAboutGreen {
    padding-top: 70px;
    color: #fff;
    margin-top: 7rem;
    padding-bottom: 6rem;
    /* background-color: #8dc63f; */
    box-shadow: rgb(99 99 99 / 20%) 0px 2px 8px 0px;
    border-top: 15px solid #fff;
    border-bottom: 15px solid #fff;
    border-radius: 0.5rem;
    /* background-image: url(/assets/images/header/banner-bg.png); */
}

.boxAboutGreen .section-title .title {
    color: #fff;
}

.boxAboutGreen .about-content .text {
    color: #fff;
}

.about-content .main-btn-border-white {
    background: transparent;
    border: 1px solid;
    background-size: 200%;
    height: 50px;
    line-height: 50px;
    padding: 0 35px;
    margin-top: 40px;
    margin-left: 1rem;
}

.about-content .main-btn-border-white:hover {
    background-position: right center;
    background-color: #822699;
}

.about-content .main-btn-border-green {
    background: transparent;
    border: 1px solid #71a926;
    color: #71a926;
    background-size: 200%;
    height: 50px;
    line-height: 50px;
    padding: 0 35px;
    margin-top: 40px;
    margin-left: 1rem;
}

.about-content .main-btn-border-green:hover {
    background-position: right center;
    background-color: #71a926;
    color: #fff;
}

.about-content .main-btn-border-white {
    background: transparent;
    border: 1px solid;
    background-size: 200%;
    height: 50px;
    line-height: 50px;
    padding: 0 35px;
    margin-top: 40px;
    margin-left: 1rem;
}

.about-content .main-btn-border-white:hover {
    background-position: right center;
    background-color: #822699;
}

.about-content .main-btn-border-green {
    background: transparent;
    border: 1px solid #822699;
    color: #822699;
    background-size: 200%;
    height: 50px;
    line-height: 50px;
    padding: 0 35px;
    margin-top: 0;
    margin-left: 1rem;
    transition: all .5s;
}

.about-content .main-btn-border-green:hover {
    background-position: right center;
    /* background-color: #822699; */
    background: linear-gradient(to right, #c771dc 0%, #a44cba 50%, #812599 100% 100%);
    /* background: linear-gradient(to right, #33c8c1 0%, #119bd2 50%, #33c8c1 100%); */
    color: #fff;
    /* transition: all .5s; */
}


.about-content .main-btn {
    /* background: -webkit-gradient(linear, left top, right top, from(#62a507), color-stop(50%, #fe6e9a), to(#62a507)); */
    /* background: linear-gradient(to right, #8dc63f 0%, #6fa724 50%, #8dc63f 100%); */
    background-size: 200%;
    height: 50px;
    line-height: 50px;
    padding: 0 35px;
    margin-top: 0;
}

.about-content .main-btn:hover {
    background-position: right center;
}


/*===== All Button Style =====*/

.main-btn-border-green,
.main-btn-border-white,
.main-btn {
    display: inline-block;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 0 25px;
    font-size: 16px;
    line-height: 48px;
    border-radius: 8px;
    border: 0;
    color: #fff;
    cursor: pointer;
    z-index: 5;
    -webkit-transition: all 0.4s ease-out 0s;
    transition: all 0.4s ease-out 0s;
    background: -webkit-gradient(linear, left top, right top, from(#33c8c1), color-stop(50%, #119bd2), to(#33c8c1));
    background: linear-gradient(to right, #9dd2e3 0%, #822699 50%, #822699 100%);
    background: linear-gradient(to right, #c771dc 0%, #a44cba 50%, #812599 100% 100%);
    /* background: linear-gradient(to right, #59a500 0%, #5a9e03 50%, #83c13a 100%); */
    background-size: 200%;
}

.main-btn-border-green:hover,
.main-btn-border-white:hover,
.main-btn:hover {
    color: #fff;
    background-position: right center;
}

@media (max-width: 767px) {
    /* .container {
        padding-left: 20px;
        padding-right: 20px;
    } */
}

.section-title.show {
    margin-bottom: 0rem;
    padding-bottom: 0;
}

.showImgPreviewOnModal {
    border-radius: 5px;
    /* box-shadow: 0px 5px 30px 0px rgba(167, 167, 167, 0.16); */
    cursor: pointer;
    width: 100%;
}

.page-area img {
    /* width: 100%; */
}

.imgShowMini {
    display: flex;
    height: 7rem;
    overflow: hidden;
    background-color: #fff;
    padding: 8px 8px 19px 8px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.imgShowMini img {
    transition: all 2s;
}

.imgShowMini img:hover {
    scale: 1.2;
    transition: all 2s;
}

.modal-content {
    background-color: transparent;
    border: none;
}

.modal-header {
    background-color: transparent;
}

.modal-title {
    color: #fff;
}

.modal-header .btn-close {
    color: #fff;
    width: 1.5rem;
    background-color: #fff;
    opacity: 1;
    height: 1.5rem;
    margin-right: -15px;
}

.modal-body {
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.modalBGFullScreenCustom {
    /* display: block; */
    background-color: #00000038;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.imgCoverHome {
    /* max-width: 40rem; */
    margin: auto;
}

.transformM-5 {
    transform: rotate(-5deg);
}

.transformMM-9 {
    transform: rotate(4deg);
}

.transformMM-8 {
    transform: rotate(-5deg);
}

.transformMM-7 {
    transform: rotate(5deg);
}

.transformMM-6 {
    transform: rotate(-5deg);
}

.transformMM-5 {
    transform: rotate(-2deg);
}

.transformMM-4 {
    transform: rotate(4deg);
}

.transformMM-3 {
    transform: rotate(-5deg);
}

.transformMM-2 {
    transform: rotate(5deg);
}

.transformMM-1 {
    transform: rotate(-5deg);
}

.transformP-5 {
    transform: rotate(5deg);
}

.transformPP-13 {
    transform: rotate(-6deg);
}

.transformPP-12 {
    transform: rotate(5deg);
}

.transformPP-11 {
    transform: rotate(-1deg);
}

.transformPP-10 {
    transform: rotate(3deg);
}

.transformPP-9 {
    transform: rotate(-6deg);
}

.transformPP-8 {
    transform: rotate(5deg);
}

.transformPP-7 {
    transform: rotate(-1deg);
}

.transformPP-6 {
    transform: rotate(3deg);
}

.transformPP-5 {
    transform: rotate(2deg);
}

.transformPP-4 {
    transform: rotate(-1.5deg);
}

.transformPP-3 {
    transform: rotate(5deg);
}

.transformPP-2 {
    transform: rotate(-4.5deg);
}

.page-area .about-image {
    /* border: 1rem solid #fff;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    background-color: #fff; */
}

.boxImgCard {
    background-color: #fff;
    padding: .5rem;
    padding-bottom: 1rem;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.section-bgCustom2 {
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
}

.showLogoCerdit {
    display: flex;
    gap: 15px;
    align-items: center;
    margin: auto;
    max-width: 21rem;
    justify-content: space-evenly;
    background-color: #fff;
    padding: 1rem;
    border-radius: 1rem;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    text-align: center;
}




@media (max-width: 767px) {
    .imgCoverHome {
        margin-top: 2rem;
    }

    .about-content .main-btn-border-green {
        margin-left: 0;
        /* margin-top: 1rem; */
    }
}