/* @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;
}

.showAdmin .box .img {
    overflow: hidden;
    margin: auto;
    height: 12rem;
    max-width: 10rem;
    /* 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 img {}

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

.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: #0d84d2;
}

.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: #0d84d2;
}

.about-content .main-btn-border-green {
    background: transparent;
    border: 1px solid #27aae1;
    color: #27aae1;
    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: #27aae1;
    /* 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, #ffd18b 0%, #ff9900 50%, #27aae1 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: 50rem;
    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; */
   }
}