@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@100;200;300;400;500;600;700;800&display=swap');

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


:root{
    --bg-gradient: linear-gradient(180deg, #fff, #e1e4e7);
    --bg-body:#FFFFFF;
    --bg-body-rgb:245, 247, 249;
    --rounded:70px 0 70px 0 ;
    --bs-white: #ffffff;
    --bs-warning: rgb(255, 157, 0);
    --bs-warning-rgb: 255, 157, 0;
    --bs-body-bg-rgb: 255, 255, 255 ; 
    
}
[data-bs-theme=dark]
{
    --bg-body:#162029;
    --bs-white: #000000;
    --bs-light: rgb(48, 61, 73);
    --bs-light-rgb: 48, 61, 73;
    --bs-body-bg-rgb: 0, 0, 0;
}

.btn-success, .btn-outline-success {
    --bs-btn-border-color: rgb(92, 160, 41);
    --bs-btn-hover-bg: rgb(74, 135, 27);
    --bs-btn-hover-border-color: rgb(74, 135, 27);
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
}
/* .theme-rounded{border-radius: var(--rounded);} */

html{
    scrollbar-width: thin;
    -webkit-scrollbar-width: thin;}
body {
    font-family: "Kanit", sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 26px;
    background-color: var(--bg-body);
    position: relative;
    top: 0 !important;
}
/* body::before{position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; content: ""; background: var(--bg-gradient);} */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
    text-transform: capitalize;
}
    .text-lg-start p, p.text-lg-start, div:not(.text-center, .text-start) p{text-align: justify;} 

@media screen and (max-width: 992px) {
    .text-center.text-lg-start p{text-align: center;}
}
* p:last-child{margin-bottom: 0;}

.display-1,.display-2,.display-3,.display-4,.display-5{line-height: 1.1;}
/* .container{max-width: 1280px;} */
/* header .min-vh-100{min-height: calc(100vh - 62px)!important;} */
a,
a:hover {
    transition: all 0.2s ease-in 0s;
    text-decoration: none;
    cursor: pointer!important;
}

a:not(.btn , .nav-link, .dropdown-item) {
    color: var(--bs-info);
}
a:hover {
    color: var(--bs-warning);
}
a,
button {
    color: inherit;
    outline: none;
    border: none;
}

[routerLink] {
    cursor: pointer;
}

.text-default{color: var(--bs-default);}

button:focus {
    outline: none;
    box-shadow: none!important;
}

ul,
ul li {
    list-style: none;
    padding-left: 0;
}

[class^="bi-"]::before,
[class*=" bi-"]::before {
    vertical-align: middle;
}

.bi {
    line-height: 1
}

.bi-x {
    font-size: 100%
}

.bi-2x {
    font-size: 150%
}

.bi-3x {
    font-size: 200%
}

.bi-4x {
    font-size: 250%
}

.bi-5x {
    font-size: 300%
}

.text-1x {
    font-size: 100%
}

.text-2x {
    font-size: 125%
}

.text-3x {
    font-size: 150%
}

.text-4x {
    font-size: 200%
}

.zi-0,
.zi-1,
.zi-2,
.zi-3,
.zi-4,
.zi-5 {
    position: relative;
}

.zi-0 {
    z-index: 0
}

.zi-1 {
    z-index: 1
}

.zi-2 {
    z-index: 25
}

.zi-3 {
    z-index: 50
}

.zi-4 {
    z-index: 75
}

.zi-5 {
    z-index: 99
}

.op-1 {
    opacity: 0.1!important
}

.op-2 {
    opacity: 0.2!important
}

.op-3 {
    opacity: 0.3!important
}

.op-4 {
    opacity: 0.4!important
}

.op-5 {
    opacity: 0.5!important
}

.op-6 {
    opacity: 0.6!important
}

.op-7 {
    opacity: 0.7!important
}

.op-8 {
    opacity: 0.8!important
}

.op-9 {
    opacity: 0.9!important
}

.op-x {
    opacity: 1!important
}

.fw-1 {
    font-weight: 100!important
}

.fw-2 {
    font-weight: 200!important
}

.fw-3 {
    font-weight: 300!important
}

.fw-4 {
    font-weight: 400!important
}

.fw-5 {
    font-weight: 500!important
}

.fw-6 {
    font-weight: 600!important
}

.fw-7 {
    font-weight: 700!important
}

.fw-8 {
    font-weight: 800!important
}

.max-line-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.max-line-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.max-line-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.max-line-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.max-line-5 {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-shadow {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.obj-p-end{object-position: 75%;}
.obj-p-center{object-position: center;}
.obj-p-start{object-position: left;}

.container,
.container-fluid,
.container-fluid,
.container-fluid px-lg-5 px-md-4,
.container-md,
.container-sm {
    position: relative;
    z-index: 2
}
.text-justify{text-align:justify}

.wrapper {
    /* max-width: 1800px; */
    margin: 0 auto;
    z-index: 1;
    min-height: 100vh;
    /* box-shadow: 0 0 36px rgba(43, 27, 58, 0.2); */
    /* outline: solid 1px rgba(68, 63, 44, 0.4); */
    position: relative;
    background-color: var(--bg-body);
    overflow: hidden;
}

.bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    object-fit: cover;
    overflow: hidden;
}

.bg-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.op-top{object-position:top}

.h-30 {
    max-height: 35%;
}

.h-40 {
    max-height: 45%;
}

.h-50 {
    max-height: 55%;
}

.h-60 {
    max-height: 65%;
}

.h-70 {
    max-height: 75%;
}

.h-80 {
    max-height: 85%;
}

.h-90 {
    max-height: 95%;
}

.bg-blur {
    filter: blur(70px);
}
.bg-blur-1{filter: blur(5px);}
.bg-blur-2{filter: blur(15px);}
.bg-blur-3{filter: blur(25px);}
.bg-blur-4{filter: blur(50px);}
.pg-header .bg-img {
    z-index: 0;
}

.bg-black{background-color: #000;}

header,
section {
    position: relative;
}

header>.container,
section>.container {
    position: relative;
    z-index: 4;
}

.section {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.min-vh-25 {
    min-height: 25vh;
}

.min-vh-50 {
    min-height: 50vh;
}

.min-vh-75 {
    min-height: 75vh;
}

.navbar {
    /* max-width: 1800px; */
    /* margin: 0 auto;
    transition: all 0.3s ease-in 0s;
    background-color: var(--nav-color);
    backdrop-filter: blur(26px); */
}

.navbar.fixed-top {
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% + 1px);
}

.navbar-brand img {
    width:100%;
    max-width: 150px;
    max-height: 72px;
    display: block;
    object-fit: cover;
    object-position: left;
}
.navbar-nav .nav-link{padding: 8px 12px!important;}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {--bs-navbar-active-color: var(--bs-warning);}

.navbar .dropdown-menu .dropdown-item, .navbar .dropdown-menu .dropdown-item{padding-top:.5rem; display:block; padding-bottom:.5rem; min-width:200px; --bs-dropdown-link-active-bg: var(--bs-info)}
@media screen and (min-width: 992px) {
    .navbar .dropdown:hover > .dropdown-menu {
            display: block;
            -webkit-animation: slide-up .25s ease-in-out;
            animation: slide-up .25s ease-in-out;
            visibility:visible;
            opacity:1;
            overflow:hidden
        }
}

@-webkit-keyframes slide-up {
        from {
            transform: translateY(0.5rem);
            opacity: 0;
            visibility:visible;
        }
        to {
            transform: translateY(0);
            opacity: 1;
            visibility:visible;
        }
    }
    
    @keyframes slide-up {
        from {
            transform: translateY(0.5rem);
            opacity: 0;
            visibility:visible;
        }
        to {
            transform: translateY(0);
            opacity: 1;
            visibility:visible;
        }
    }
    .carousel-indicators [data-bs-target]{background-color: var(--bs-secondary);}
    .carousel-indicators [data-bs-target].active{background-color: #efc82f;}

.w-100px{width: 125px;}


.img-sm,
.img-md,
.img-lg,
.img-xl,
.img-xxl {
    position: relative;
    object-fit: contain;
}

.img-sm {
    width: 36px;
    height: 36px;
}

.img-md {
    width: 48px;
    height: 48px;
}

.img-lg {
    width: 64px;
    height: 64px;
}

.img-xl {
    width: 96px;
    height: 96px;
}

.img-xxl {
    width: 128px;
    height: 128px;
}

.img-cover {
    object-fit: cover;
}

.img-contain {
    object-fit: contain;
}

.vid-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    z-index: 1;
 }
 @media (min-width: 62em) {
  .vid-bg {
     display:block;
  }
}

.mt--7{margin-top: -140px;}

.fixed-bg {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

.swiper {
    padding-bottom: 24px;
}

.swiper .swiper-pagination {
    bottom: 0;
}

.hover-up,
.card,
.card img {
    transition: all 0.3s ease-in-out 0s;
}

.hover-up:hover {
    transform: translateY(-4px);
}

.card.hover-up:hover .card-img-top img {
    transform: scale(1.1) rotate(3deg);
}

.card.hover-up:hover {
    box-shadow: 0 10px 16px rgba(25, 18, 56, 0.1)!important;
}


footer a {
    color: rgba(0, 0, 0, 1);
    transition: all .2s ease-in 0s;
}

footer a:hover {
    color: var(--bs-info)!important;
}

footer small a:hover {
    color: var(--bs-secondary);
}

.points {
    padding: 0;
    list-style: none;
}

.points.row {
    padding-left: 10px;
}

.points>li {
    position: relative;
    padding: 2px 4px 12px 24px;
}

.points>li:before {
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: var(--bs-info-text-emphasis);
    left: 4px;
    top: 10px;
    border-radius: 2px;
    content: "";
    transform: rotate(45deg);
}

.breadcrumb-item{font-weight:500; color:#999}
.breadcrumb-item.active, .breadcrumb-item a:hover{color:var(--bs-warning);}

.carousel-control-prev, .carousel-control-next{z-index: 99; max-width: 90px; filter: invert(100%);}

#loading {
    width: 40px;
    height: 20px;
    object-fit: cover;
}

.bg-rotate{animation: spin 20s linear infinite; }
@-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg); } 
}
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg); 
        transform:rotate(360deg); 
    } 
}
@-moz-keyframes bounce { 
    50% { -moz-transform: translateY(10%); } 
    0% { -moz-transform: translateY(0%); } 
}
@-webkit-keyframes bounce { 
    50% { -webkit-transform: translateY(10%); } 
    0% { -webkit-transform: translateY(0%); } 
}
@keyframes bounce { 
    50% { 
        -webkit-transform: translateY(10%); 
        transform:translateY(10%); 
    }
    0% { 
        -webkit-transform: translateY(0%); 
        transform:translateY(0%); 
    } 
}
@-moz-keyframes rl { 
    50% { -moz-transform: translateX(15%); } 
    0% { -moz-transform: translateX(0%); } 
}
@-webkit-keyframes rl { 
    50% { -webkit-transform: translateX(15%); } 
    0% { -webkit-transform: translateX(0%); } 
}
@keyframes rl { 
    50% { 
        -webkit-transform: translateX(15%); 
        transform:translateX(15%); 
    }
    0% { 
        -webkit-transform: translateX(0%); 
        transform:translateX(0%); 
    } 
}
.header{overflow-y: visible; position: relative; overflow-x: hidden; overflow: visible;}
header > div {position: relative; z-index: 4;} 

.breadcrumb-item+.breadcrumb-item::before{margin-top: 10px;}

.object-position-bottom{object-position: bottom;}

.mock{position: relative; max-width: 100%; z-index: 9; border-radius: 3vw; background-color: rgba(0, 0, 0, 0.15);
    transform:
    perspective(1000px)
    rotateX(4deg)
    rotateY(-16deg)
    rotateZ(4deg);
  box-shadow: 24px 16px 64px 0 rgba(0, 0, 0, 0.15);}
.mock .carousel{position: absolute; width: calc(100% - 9%); height: (100% - 8%); left: 6%; top: 5%; box-shadow: 0 0 30px rgba(0, 0, 0, 0.125) inset; overflow: hidden; border-radius: 2vw;}
section{position: relative; }
section > div{ position: relative; z-index: 2;}
.section{padding: 10vh 0; }
.f-item{width: 80px; margin-bottom: 1.2rem;}
.bg-white{background-color: #fff;}
.backdrop-blur{ backdrop-filter: blur(20px);}

.img-thumbnail{max-width: 100px; border: none; background-color: transparent;}
.mt-m3{margin-top: -15vh; position: relative; z-index: 99;}

.skiptranslate {display: none;}
.lang{ position: relative;}
#lang{padding-left: 30px;}
.lang:before{display: inline-block;
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: 400 !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    content: "\f658";
    position: absolute;
    left: 8px;
    top: 11px;
    z-index: 5;
    color: var(--bs-secondary);}

    .gradbg{background: linear-gradient(155deg, rgba(var(--bs-dark-rgb),5),  rgba(var(--bs-dark-rgb),.6), rgba(var(--bs-dark-rgb),.8)); backdrop-filter: blur(1rem);}
    .tbl1{height: 110px;}
    .text-last-center{text-align-last: center;}