@charset "UTF-8";
.kanit-light {
  font-family: "Kanit", serif;
  font-weight: 200;
  font-style: normal;
  font-size:12pt;
}

.kanit-regular {
  font-family: "Kanit", serif;
  font-weight: 400;
  font-style: normal;
}

.kanit-medium {
  font-family: "Kanit", serif;
  font-weight: 400;
  font-style: normal;
   font-size:14pt;
}

.kanit-semibold {
  font-family: "Kanit", serif;
  font-weight: 600;
  font-style: normal;
}

html {
   font-family: "Kanit", serif;
}
a, p,
  h2,
  h3,h4,h5 {
      font-family: "Kanit", serif;
  }

a {
  color: white;
  text-decoration: none;
  
}
ul.socialmedia {
  font-family: "Kanit", serif;
  font-weight: 200;
  font-style: normal;
  font-size:11pt; 
color: #ffffff;
margin:0;
padding:0;
}

li.fb {
background:url('/assets/images/footer/facebook 2.png') 50%    50% no-repeat no-repeat;
}

li.gp {
background:url('images/googleplus_icon.png') 50% 50% no-repeat no-repeat;
padding-left: 10px;
}

li.tw {
background:url('images/twitter-icon.png') 50% 50%  no-repeat no-repeat;
padding-left: 10px;
}


 // (c) 2020-2023 by Simon Köhler
// simonkoehler.com
// Setting the font family for this example
{
  font-family: "Kanit", serif;
}

// Animation to fade in the dropdown menus
@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

// Assigning the above animation to all dropdown menus
.dropdown-menu{
    &.show{
        -webkit-animation: fadeIn 0.3s alternate; /* Safari 4.0 - 8.0 */
         animation: fadeIn 0.3s alternate;
    }
}
//***************************************************************  Mega Menu **********************************************/
// Mega Menu adjustments
.nav-item.dropdown.dropdown-mega{
    position: static;
	font-color:#0a754d;
	 font-family: "Kanit", serif;
    .dropdown-menu{
        width: 90%;
        top: auto;
        left: 5%;
    }
}

.dropdown-menu a {
	         background-image: linear-gradient(
			to right,
			#000000,
			#000000 50%,
			#000 50%
		  );
		  background-size: 200% 10%;
		  background-position: -100%;
		  display: inline-block;
		  position: relative;
		  -webkit-background-clip: text;
		  -webkit-text-fill-color: transparent;
		  transition: all 0.3s ease-in-out;
}
.dropdown-menu a:before {

		 content: '';
		  background: #000000;
		  display: block;
		  position: absolute;
		  bottom: 10px;  /*underline */
		  width: 0;
		  height: 3px;
		  transition: all 0.3s ease-in-out;
}
.dropdown-menu a:hover {
     background-position: 0;
}
.dropdown-menu a:hover::before{
  width: 100%;
}



// Complete styles for main navbar toggler and hamburger menu
.nav.navbar-nav.navbar-right li a {
    color: #0a754d;
	font-family: "Kanit", serif;
	font-size:17px;
}
.nav.navbar-nav.navbar-right a {
    color: #0a754d;
	text-decoration: none;
	font-family: "Kanit", serif;
	font-size:17px;
}
 .nav-link {
       color: #0a754d;
	    font-family: "Kanit", serif;
	   font-size:17px;
    }
//*******************************************************************************************/
.nav-item.dropdown.dropdown-mega2 a {
	         background-image: linear-gradient(
			to right,
			#54b3d6,
			#54b3d6 50%,
			#000 50%
		  );
		  background-size: 200% 100%;
		  background-position: -100%;
		  display: inline-block;
		  padding: 3px 0;
		  position: relative;
		  -webkit-background-clip: text;
		  -webkit-text-fill-color: transparent;
		  transition: all 0.3s ease-in-out;
}
.nav-item.dropdown.dropdown-mega2 a:before {

		 content: '';
		  background: #54b3d6;
		  display: block;
		  position: absolute;
		  bottom: -3px;
		  left: 0;
		  width: 0;
		  height: 3px;
		  transition: all 0.3s ease-in-out;
}
.nav-item.dropdown.dropdown-mega2 a:hover {
     background-position: 0;
}
.nav-item.dropdown.dropdown-mega2 a:hover::before{
  width: 100%;
}



// Complete styles for main navbar toggler and hamburger menu
.nav.navbar-nav.navbar-right li a {
    color: #0a754d;
	font-family: "Kanit", serif;
	font-size:17px;
}
.nav.navbar-nav.navbar-right a {
    color: #0a754d;
	text-decoration: none;
	font-family: "Kanit", serif;
	font-size:17px;
}
 .nav-link {
       color: #0a754d;
	    font-family: "Kanit", serif;
	   font-size:17px;
    }

 /* Custom styling for the hamburger icon */
        .navbar-toggler {
            border: block;
			margin-bottom:15px;
        }

        .navbar-toggler:focus {
            box-shadow: none;
        }

        .navbar-toggler-icon {
            background-image: none;
            width: 25px;
            height: 25px;
            display: flex;
           align-items: center;
            justify-content: center;
	
        }

        .navbar-toggler-icon::before {
            content: "\2630"; /* Unicode for hamburger icon */
            font-size: 18px;
            color: white; /* Change hamburger icon color */
			color: #0a754d;
        }


.icons{
  display: inline-flex;
  margin-left: auto;
  a{
    transition: all 0.2s ease-in-out;
    padding: 0.2rem 0.4rem;
    color: #ccc !important;
    text-decoration: none;
    &:hover{
      color: white;
      text-shadow: 0 0 30px white;
    }
  }
}
 .bd-mode-toggle .dropdown-menu .active .bi {
        display: block !important;
      }


     @media (max-width: 1200px) {
            .navbar-nav .dropdown-menu {
                display: none;
            }
            .navbar-nav .dropdown.show .dropdown-menu {
                display: block;
            }
        }

		 @media (max-width: 700px) {
              .navbar-toggler-icon::before {
               content: "\2630"; /* Unicode for hamburger icon */
                font-size: 18px;
				color: #0a754d;

				 #myCarousel {
					height: 600px !important;
					overflow: hidden;
				  }

				  #myCarousel .carousel-item img {
					height: 100%;
					width: auto;
					object-fit: cover;
				  }
              
          }
 @media (max-width: 500px) {
              .navbar-toggler-icon::before {
               content: "\2630"; /* Unicode for hamburger icon */
                font-size: 18px;
				color: #0a754d;

			
              
        }
        }