* {
    --diff: calc(var(--max-size) - var(--min-size));
    --responsive: calc((var(--min-size) * 1px) + var(--diff) * ((100vw - 320px) / (2000 - 320)));
}

h3 {
    --max-size: 60;
    --min-size: 25;
    font-size: var(--responsive) !important;
}
h4, .recognitions-title a {
    --max-size: 35;
    --min-size: 20;
    font-size: var(--responsive) !important;
}
.recognitions-title a {
  font-weight: 500;
}


h5 {
    --max-size: 24;
    --min-size: 18;
    line-height: normal;
    font-size: var(--responsive) !important;
}
h6 {
    --max-size: 18;
    --min-size: 14;
    font-size: var(--responsive) !important;
}
p, .p-dec {
    --max-size: 18;
    --min-size: 14;
    font-size: var(--responsive) !important;
}
a {
    --max-size: 16;
    --min-size: 13;
    font-size: var(--responsive) !important;
    transition: all .5s;
    text-decoration: none;
}
.font-w-400 {font-weight: 400;}
.font-w-500 {font-weight: 500;}
.font-w-800 {font-weight: 800;}
.font-w-900 {font-weight: 900;}

.big-title {
    font-size: 240px;
}


.primary-color {color: #121212;}
.primary-bg {background: #121212;}
.dec-color {color: #555;}
.dec-color-two {color: #999;}
.font-family, body {font-family: 'Kanit', sans-serif;}

section {padding-top: 7%; padding-bottom: 7%;}

img {width: 100%;}

.overlay-before:before, 
.overlay-after:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    transition: all .5s;
}
.down-arrow-d a{
    border: 1px solid #00a685;
    padding: 25px 8px;
    border-radius: 30px;
    width: 40px;
    animation: jumpInfinite 1.5s infinite;
    color: #4f2764 !important;
}
.down-arrow {
    height: 25px;
    border: 1px solid;
}
.down-arrow:after {
    top: 36px;
    left: 13px;
    width: 13px;
    height: 13px;
    border-bottom: 2px solid;
    border-right: 2px solid;
    transform: rotateZ(45deg);
    animation: jumpInfinite 1.5s infinite;
}

  @keyframes jumpInfinite {
    0% {
      margin-top: 0;
    }
    50% {
      margin-top: 20px;
    }
    100% {
      margin-top: 0;
    }
  }

/*--cursor-pointer--*/
.cursor-pointer-big {
    position: fixed;
    width: 40px;
    height: 40px;
    border: 1px solid #c9f31d;
    border-radius: 50%;
    left: 0;
    top: 0;
    pointer-events: none;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: 0.15s;
    transition: 0.15s;
    z-index: 999;
    mix-blend-mode: difference;
}
.cursor-pointer-small {
    position: fixed;
    width: 8px;
    height: 8px;
    background-color: #c9f31d;
    border-radius: 50%;
    left: 0;
    top: 0;
    pointer-events: none;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: 0.2s;
    transition: 0.2s;
    z-index: 999;
    mix-blend-mode: difference;
}
.cursor-pointer-big, .cursor-pointer-small {
    border-top: 1px solid #c9f31d;
    border-bottom: 1px solid #c9f31d;
    border-left: 1px solid #c9f31d;
    border-right: 1px solid #c9f31d;
}
/*--cursor-pointer--*/

.global-btn a{
    background-color: transparent;
    border: 1px solid #4f2764;
    width: 170px;
    height: 170px;
    color: #ffffff;
     font-size: 16px !important;
   
}
.team-section-drsg-slide .global-btn a{
    text-align: center;
}
.team-section-drsg-slide .global-btn a i {
    position: relative;
    left: -20px;
}
.global-btn a:hover {
    background-color: white;
    color: #fff !important;
    border: 1px solid #4f2764;
}
.global-btn .global-btn-s {
    background-color: #4f2764 !important;
}
.global-btn span {
    position: absolute;
    content: "";
    width: 20px;
    height: 20px;
    left: 0;
    top: 0;
    background-color: #c9f31d;
    z-index: -1;
    border-radius: 100%;
    -webkit-transition: all 0.7s;
    transition: all 0.7s;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
}

.global-btn a:hover span {
    width: 350px;
    height: 350px;
    opacity: 1;
}
.team-section-drsg-slide .global-btn .global-btn-s {
    background-color: #4f2764 !important;
}
.global-btn .global-btn-s {
    background-color: #fff !important;
}
.black-btn.global-btn a:hover {
    background-color: white;
    color: #4f2764 !important;
    border: 1px solid white;
}
.team-section-drsg-slide a.btn-a {
    color: #4f2764;
}
.choose-section-col .global-btn a:hover span {
    width: 750px;
    height: 750px;
}

.back-to-top-btn {
    width: 50px;
    height: 50px;
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9991;
    border-radius: 100px;
    color: #fff;
    background: #fff;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    
    mix-blend-mode: exclusion;
    border: 0;
    
}
.back-to-top-btn i{
    color: #121212;
} 
.back-to-top-btn:hover {
    color: #fff;
}


/*--header--*/
.logo.header-logo a {
    display: block;
    width: 100px;
}
/* .logo.header-logo, .menu-right-baar{
    width: 150px;
} */
.menu-baar span, .menu-baar a {
    line-height: 11px;
}
.menu-baar a {
    text-shadow: 0 16px 0 #999;
    color: #121212 !important;
}
.menu-baar a span{
    display: block;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    font-style: normal;
    -webkit-transition: -webkit-transform 0.2s ease;
    transition: -webkit-transform 0.2s ease;
    transition: transform 0.2 ease;
    transition: transform 0.2 ease, -webkit-transform 0.2 ease;
    -webkit-transform: translateY(var(--m)) translateZ(0);
    transform: translateY(var(--m)) translateZ(0);
}
.menu-baar a span:nth-child(1) {
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
}
.menu-baar a span:nth-child(2) {
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}
.menu-baar a span:nth-child(3) {
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
}
.menu-baar a span:nth-child(4) {
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}
.menu-baar a span:nth-child(5) {
    -webkit-transition-delay: 0.25s;
    transition-delay: 0.25s;
}
.menu-baar a span:nth-child(6) {
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}
.menu-baar a span:nth-child(7) {
    -webkit-transition-delay: 0.35s;
    transition-delay: 0.35s;
}
.menu-baar a span:nth-child(8) {
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
}
.menu-baar a span:nth-child(9) {
    -webkit-transition-delay: 0.45s;
    transition-delay: 0.45s;
}
.menu-baar a span:nth-child(10) {
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
}
.menu-baar a span:nth-child(11) {
    -webkit-transition-delay: 0.55s;
    transition-delay: 0.55s;
}




.menu-baar a span:nth-child(12) {
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s;
}
.menu-baar a span:nth-child(13) {
    -webkit-transition-delay: 0.65s;
    transition-delay: 0.65s;
}
.menu-baar a span:nth-child(14) {
    -webkit-transition-delay: 0.7s;
    transition-delay: 0.7s;
}
.menu-baar a span:nth-child(15) {
    -webkit-transition-delay: 0.75s;
    transition-delay: 0.75s;
}
.menu-baar a span:nth-child(16) {
    -webkit-transition-delay: 0.8s;
    transition-delay: 0.8s;
}
.menu-baar a span:nth-child(17) {
    -webkit-transition-delay: 0.85s;
    transition-delay: 0.85s;
}
.menu-baar a span:nth-child(18) {
    -webkit-transition-delay: 0.9s;
    transition-delay: 0.9s;
}
.menu-baar a span:nth-child(19) {
    -webkit-transition-delay: 0.95s;
    transition-delay: 0.95s;
}
.menu-baar a span:nth-child(20) {
    -webkit-transition-delay: 1s;
    transition-delay: 1s;
}
.menu-baar a span:nth-child(21) {
    -webkit-transition-delay: 1.5s;
    transition-delay: 1.5s;
}


header.header {
    z-index: 999;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
.menu-baar a span:nth-child(8) {
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
}
.menu-baar a:hover span {
    --m: calc(16px * -1);
}
.menu-baar a .l {
    padding-left: 3px;
}
.menu-baar a .r {
    padding-right: 3px;
}
.menu-right-baar button, .l-header.l-toogle button.menu-toggel {
    background: transparent;
    border: 0;
    padding: 0;
    font-size: 18px;
    line-height: 0px;
}

.header-search {
    position: fixed;
    width: 300px;
    right: 60px;
    top: 90px;
    padding: 15px;
    background-color: #f0f0f0;
    border-radius: 3px;
    z-index: 99991;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.header-search.open-div {
    opacity: 1;
    visibility: visible;
    top: 70px;
}
.header-search  input {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--white-2);
    border-radius: 5px;
    outline: none;
    font-size: 16px;
    font-weight: 400;
}
.menu-right-baar button.active i::before {
    content: "\f00d";
}

.menu-popup {
    background-color: var(--black-2);
    position: fixed;
    width: 100%;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    background: #121212;
    overflow: auto;
}
.menu-popup.open-div-menu {
    opacity: 1;
    visibility: visible; 
}
.menu-popup-left,
.menu-popup-center .menu-baar {
    height: 100%;
}
.menu-popup-left .logo a {
    display: block;
    width: 140px;
}
.menu-popup-left .logo a {
    display: block;
    width: 120px;
}
.menu-popup-social-media h6,
.menu-popup-cont-info h6 {
    font-size: 25px !important;
}
.menu-popup-center a {
    color: #fff !important;
}
.menu-popup-center .menu-baar a, .menu-popup-center .menu-baar span {
    font-size: 40px !important;
    line-height: 35px !important;
    text-shadow: 0 50px 0 #999;
}
.menu-popup-center .menu-baar a:hover span {
    --m: calc(55px * -1);
}
.menu-popup-center {
    width: 60%;
    border-left: 1px solid #1D1D1D;
}
.menu-popup-left {
    width: 20%;
}
.menu-popup-right {
    background: #1D1D1D;
    width: 30%;
    gap: 110px;
    padding-top: 180px !important;
}
.menu-popup-center ul {
    gap: 0px !important;
}
.menu-popup-center ul li {
    border-top: 1px solid #1D1D1D;
    border-bottom: 1px solid #1D1D1D;
    padding: 20px 50px;
}
.menu-popup-search input {
    border: 1px solid #3C3C3C;
    background: transparent !important;
    outline: none !important;
    padding: 20px 25px;
    border-radius: 100px !important;
    font-size: 15px;
    width: 100%;
    color: #fff;
}
.menu-popup-search input+i {
    position: absolute;
    color: #fff;
    right: 30px;
    top: 24px;
}
.footer-menu a{
    color:#fff !important;
} 
header#myHeader.sticky {
    border-bottom: 1px solid #efefef !important;
}
.menu-baar.header-menu a {
    font-size: 16px !important;
}
.menu-popup-right:before, .menu-popup-right:after {
    background: #555;
    width: 280px;
    height: 280px;
    top: auto;
    bottom: 30px;
    right: 30px;
    left: auto;
    border-radius: 100%;
}
.menu-popup-right:after {
    width: 150px;
    height: 150px;
    background: #1d1d1d9c;
    z-index: 0;
    bottom: 180px;
    right: 180px;
    border: 1px solid #555555;
    box-shadow: 7px 7px 48px #1d1d1d8a;
}
.menu-popup-btn-close {
    position: absolute;
    right: 50px;
    top: 50px;
    z-index: 9;
}
.menu-popup-btn-close .close-btn-m-p {
    border-radius: 100%;
    width: 50px;
    height: 50px;
    background: #121212;
    font-size: 18px;
    border: 2px solid #fff;
    color: #fff;
    transition: all .5s;
}
.menu-popup-btn-close .close-btn-m-p:hover {
    background: #fff;
    color: #121212;
}
/*--header--*/