*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
:root {
	--main-color: #37CAEC ;
 } 
body{
  font-family: "Niramit", sans-serif;
	font-size: 16px;
	font-weight: 400;
}
.h-full-76{
  height: calc(100% + 70px);

}
.lato {
  font-family: "Lato", sans-serif;
}
.fugaz {
  font-family: "Fugaz One", sans-serif;
}
.niramit {
  font-family: "Niramit", sans-serif;
}
.josefin{
  font-family: "Josefin Slab", serif;
}
@media  (max-width: 640px) {
  .h-100vw{
    height: calc(100vw - 56px);
  }
}
.primary-text{
	color:var(--main-color);
}
.primary-bg{
	background-color:var(--main-color);
}
.p-text{
  color: #606060;
}
.header {
    position: relative;
    z-index: 1000; 
    width: 100%;
    transition: background-color 0.3s ease; /
}

.sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #ffffffc5; /* Default background color */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional: Add shadow for a raised effect */
    transition: background-color 0.3s ease; /* Smooth transition for background color */
}

.toggled  i{
display: none;
}
/* mobilescreen menu */
.m-menu-slide {
	transition: transform 0.3s ease;
  }
  .m-menu-open {
	transform: translatey(0%);
  }
  .m-menu-closed {
	transform: translatey(-100%);
  }

.count-bg{
  background: transparent linear-gradient(270deg, #9D65FC 0%, #792BFC 100%) 0% 0% no-repeat padding-box;
}
.countbg{
  background: transparent linear-gradient(270deg, #3DD9D6 0%, #37CAEC 100%) 0% 0% no-repeat padding-box;

}

 /* close icon */
  .closetoggle{
	position: relative;
  color: #ffffff;
	width: 83px; 
	height: 22px; 
	border-radius:50%;
  left: 0px;

  }
  
  /* give the span element and related pseudo-elements the appearance of white lines */
  .close_icon,
  .close_icon::before,
  .close_icon::after {
	position: absolute;
	width: 25px; 
	height: 3px;
	border-radius: 4px;
	background-color:#ffffff;
  }
  .close_icon{
    width: 21px; 

  }
  
  /* center the span element in the middle of its containing button */
  .close_icon {
	top: calc(50% - 3px);
	left: 0px;
  margin: 2px 0px;

  }
  
  /* position the two pseudo-elements to the very left */
  .close_icon::before {
	content: "";
  left: 0px;

  }
 
  .close_icon::after {
	content: "";
  left: 0px;

  }
  
  /* this is the top dash of the close*/
  .close_icon::before {
	bottom: 8px;
  }
  
  /* this is the bottom dash of the close*/
  .close_icon::after {
	top: 8px;
  }
  
  /* TOGGLE STYLES FOR THE BUTTON */
  
  /* rotate middle dash of close*/
  .toggled .close_icon {
	height: 3px;
	width: 34px;
	left: 5px;
	top: calc(50% - 2px);
	transform: rotate(-45deg);
	background-color: #ffffff;
  }
  
  /* rotate bottom dash of closecounter clockwise */
  .toggled .close_icon::after {
	width: 34px;
	height: 3px;
	top: 0px;
	left: 0px;
	transform: rotate(-270deg);
	background-color: #ffffff;
  }
  
  /* hide the top dash by scaling it to 0 */
  .toggled .close_icon::before {
	transform: scale(0);
  }
  
  /* TRANSITION */
  /* adjust duration to see it happen slower */
  .close_icon, .close_icon::after {
	transition: all 0.3s linear;
  }
  footer .activemenu{
    color: #2DB3D2;

  } 
  .nav-link{
    position: relative;
  }
  .navbar > ul li .nav-link::before  {
    background: #2DB3D2 none repeat scroll 0 0;
    bottom: -18px;
    content: "";
    height: 11px;
    left: 0;
    margin: auto;
    border-radius: 100%;
    right: 0;
    position: absolute;
    width: 0%;
    transition: 0.5s;
}
.navbar > ul li .nav-link:hover::before
	{
		width: 11px; 
}
.navbar > ul li .submenu .nav-link:hover::before
	{
		width: 0px; 
}

.navbar a.activemenu.nav-link::before {
    width: 11px; 
}
  /* slider */
.banner-gradient{
    background: transparent linear-gradient(353deg, #3DD9D6 0%, #37CAEC 100%) 0% 0% no-repeat padding-box;
}
.button-gradient:hover{
  background: transparent linear-gradient(180deg, #3DD9D6 0%, #37CAEC 100%) 0% 0% no-repeat padding-box;
}
.slides {
    transition: transform 0.8s ease-in-out;
}

.slide {
    min-width: 100%;
    box-sizing: border-box;
}

.slide img {
    width: 100%;
}

.slider-button {
    transform: translateY(-50%);    
  }




/* product slider */
.submenu,
.m-submenu {
    display: none;
}

.submenu.active,
.m-submenu.active {
    display: block;
}

.arrow-btn {
    background: none;
    border: none;
    cursor: pointer;

  display: inline-block;
  transition: transform 0.3s ease-in-out;
  transform-origin: center;
}

.arrow-btn.rotate {
  transform: rotate(180deg); /* Rotate 180 degrees to point upwards */
}

.owl-carousel .owl-prev {
  background: url('../images/home/arrow2.svg')  center no-repeat !important;
  position: absolute;
  bottom: -80px;
  transform: translateY(-50%);
  background-color: #f5f5f500!important; 
  color: rgba(255, 255, 255, 0)!important; /* Change arrow color */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  border: 1px solid #3DD9D6!important;
  font-size: 200px;
  transition: all ease 800ms;

}

/* Style for the next button */
.owl-carousel .owl-next {
  background: url('../images/home/arrow1.svg')  center no-repeat !important;
  position: absolute;
  bottom: -80px;
  transform: translateY(-50%);
  background-color: #f5f5f500!important; 
  color: rgba(255, 255, 255, 0)!important; /* Change arrow color */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 200px;
  border-radius: 100%;
  border: 1px solid #3DD9D6!important;
  z-index: 999;
  right:0px;
  transition: all ease 800ms;
}

/* Optional: Hover effect for buttons */
.owl-carousel .owl-prev:hover{
    background: url('../images/home/arrow-hover2.svg')  center no-repeat !important;
  background-color: #37CAEC!important;
  background-size: 40%!important; /* Adjust this value as needed for smaller screens */


}
.owl-carousel .owl-next:hover {
  background: url('../images/home/arrow-hover1.svg')  center no-repeat !important;
  background-color: #37CAEC!important;
  background-size: 40%!important; /* Adjust this value as needed for smaller screens */


}

/* Hide default text (if needed) */
.owl-prev i, .owl-next i {
  font-family: "FontAwesome";
}



@media (min-width:  1536px) {
   .owl-carousel .owl-prev{
    right: 60px; 
    width: 48px;
    height: 48px;
    background-size: 40%!important; /* Adjust this value as needed for smaller screens */

   }
   .owl-carousel .owl-next{
    width: 48px;
    height: 48px;
    background-size: 40%!important; /* Adjust this value as needed for smaller screens */

   }
 }
 @media (min-width: 1280px) and (max-width: 1536px) {
     .owl-carousel .owl-prev{
      right: 60px; 
      width: 48px;
    height: 48px;
    background-size: 40%!important; /* Adjust this value as needed for smaller screens */

     }
     .owl-carousel .owl-next{
      width: 48px;
    height: 48px;
    background-size: 40%!important; /* Adjust this value as needed for smaller screens */

     }
 }
 @media (min-width: 1024px) and (max-width: 1280px) {
     .owl-carousel .owl-prev{
      right: 50px; 
      bottom: -70px;
      width: 36px;
      height: 36px;
    background-size: 40%!important;  /* Adjust this value as needed for smaller screens */

     }
     .owl-carousel .owl-next{
    width: 36px;
    bottom: -70px;
    height: 36px;
    background-size: 40%!important;  /* Adjust this value as needed for smaller screens */
    }
 }

  @media (max-width: 1024px) {
    .owl-carousel .owl-prev{
      right: 50px; 
    bottom: -60px;
    width: 36px;
    height: 36px;
  background-size: 40%!important; /* Adjust this value as needed for smaller screens */
  
     }
     .owl-carousel .owl-next{
      width: 36px;
      bottom: -60px;
      height: 36px;
      background-size: 40%!important; /* Adjust this value as needed for smaller screens */
    }
  }
 
  @media (min-width: 768px) and (max-width: 1024px) {
    .owl-carousel .owl-prev{
      bottom: -70px;    
     }
     .owl-carousel .owl-next{
      bottom: -70px;
    }
  }
.box {
  position: relative;
  overflow: hidden;
  transition: transform 1s ease-in-out;
}

.box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:var(--main-color);
  color: #ffffff!important;
  transform: scaleX(0);
  transform-origin: bottom;
  transition: transform 1s ease-in-out;
  z-index: 0;
}

.box:hover::before{
  transform: scaleX(1);
}

.box a {
  position: relative;
  z-index: 1;
}
.box span {

  position: relative;
  z-index: 1;
}
.box:hover a {
  color: #ffffff!important;

  position: relative;
  z-index: 1;
}
      

.testimonial-gradient{
  background: transparent linear-gradient(180deg, #3DD9D6 0%, #37CAEC 100%) 0% 0% no-repeat padding-box;
}

.popup-overlay, .imgpopup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.why-gradient{
  background: transparent linear-gradient(233deg, #EE090F 0%, #A41418 100%) 0% 0% no-repeat padding-box;
}
.contact-btn-gradient{
  background: transparent linear-gradient(180deg, #0095CD 0%, #0468AB 100%) 0% 0% no-repeat padding-box;
}
/* blog */
/* 
    /* Ensure carousel adjusts height based on content */
    #teamSlides > div {
      min-width: 100%;
  }

  /* Adjust width for medium and large screens */
  .linebefore{
    position: relative;
    padding-left: 58px;
  }
  .linebefore::before {
    content: '';
    width: 50px;
    height: 1.5px;
    background-color: #37CAEC;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0px;
}
  @media (min-width: 640px) {
      #teamSlides > div {
          min-width: 50%;
      }
      .linebefore{
        position: relative;
        padding-left: 40px;
      }
      .linebefore::before {
        content: '';
        width: 34px;
        height: 1.5px;
        background-color: #37CAEC;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0px;
    }
  }

  @media (min-width: 1024px) {
      #teamSlides > div {
          min-width: 33.33%;
      }
      
  }
  @media (min-width: 600px) and (max-width: 639px) {
    .mobile-padding{
      padding-bottom: 42%;
    }
  }
  @media (min-width: 500px) and (max-width: 599px) {
    .mobile-padding{
      padding-bottom: 55%;
    }
  }
  @media (min-width: 450px) and (max-width: 499px) {
    .mobile-padding{
      padding-bottom: 70%;
    }
  }
  @media (min-width: 400px) and (max-width: 449px) {
    .mobile-padding{
      padding-bottom: 96%;
    }
  }
  @media (min-width: 350px) and (max-width: 399px) {
    .mobile-padding{
      padding-bottom: 112%;
    }
  }
  @media  (max-width: 349px) {
    .mobile-padding{
      padding-bottom: 140%;
    }
  }
  @media  (max-width: 639px) {
    .linebefore{
      position: relative;
      padding-left: 30px;
    }
    .linebefore::before {
      content: '';
      width: 24px;
      height: 1.5px;
      background-color: #37CAEC;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 0px;
  }
  }
  .active-tab {
    background-color: #37CAEC;
    color: white;
  }