@font-face {
font-family: "Kanit-Black";
src: url('./../assets/kanit/Kanit-Black.ttf') format('truetype');
}
@font-face {
font-family: "Kanit-Bold";
src: url('./../assets/kanit/Kanit-Bold.ttf') format('truetype');
}
@font-face {
font-family: "Kanit-Light";
src: url('./../assets/kanit/Kanit-Light.ttf') format('truetype');
}
* {
	margin:0;
	padding:0;
	box-sizing: border-box; 
}
body {
	font-family: "Kanit-Light", serif;
	min-height: 75rem;
}

.navbar {
	background:#000000;
	box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
}
.navbar .navbar-brand img {
	max-width: 160px;
}
.navbar .navbar-nav .nav-link {
	color: #ffffff;
}
.navbar-toggler-icon{
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 40, 0, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
.navbar .contact-info p,
.navbar .contact-info a {
	font-size: 1em;
	padding-right: 1em;
	color: #FFFFFF;
}
.navbar .contact-info a {
  padding-right: 0;
}
.navbar .megamenu{
	padding: 1rem;
}
.navbar .has-megamenu{
	position:static!important;
}
.navbar .megamenu{
	left:0; 
	right:0;
	width:100%;
	margin-top:8px;
	box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
}
.navbar .megamenu .headermenu{
	display: flex;
	flex-direction :row;
	align-items: center;
}
.navbar .megamenu .headermenu svg{
	fill: #FF2800;
	width: 50px;
	height: 50px;
}
.navbar .megamenu .headermenu span{
	margin-left: 10px;
	font-size: 2em;
	font-weight:bold;
}
.navbar .megamenu .col-megamenu .submenu-link{
	display: flex;
	flex-direction :row;
	align-items: center;
	margin-bottom: 25px;
	
}
.navbar .megamenu .col-megamenu .submenu-link .menu-icons svg{
	fill: #FF2800;
	stroke:#ff2800;
	width: 48px;
	height: 48px;
}
.navbar .megamenu .col-megamenu .submenu-link .menu-links{
	margin-left:15px;
}
.navbar .megamenu .col-megamenu .submenu-link .menu-links a{
	text-decoration: none;
}
.navbar .megamenu .col-megamenu .submenu-link .menu-links .menu-link-tile{
	font-size: 1.2em;
	font-weight:bold;
}
.navbar .megamenu .col-megamenu .submenu-link .menu-links .menu-link-content{
	font-size: 1em;
}
.navbar .megamenu .col-megamenu .menu-view{
	display: flex;
	flex-direction: column;
}

@media screen and (min-width: 1024px) {
  .navbar {
    letter-spacing: 0.1em;
  }
  .navbar .navbar-nav .nav-link {
    padding: 0.5em 1em;
  }
}
@media screen and (min-width: 768px) {
  .navbar .navbar-brand img {
    max-width: 7em;
  }
  .navbar .navbar-collapse {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
  }
}

header{
  /* position:relative; */
	height:400px;
	overflow: hidden;
	border-radius:0 0 50% 50%;
	background: rgba(0, 0, 0, 1);
	background: -webkit-linear-gradient(to top, rgba(255, 40, 0, 1), rgba(0, 0, 0, 1));
	background: linear-gradient(to top, rgba(255, 40, 0, 1), rgba(0, 0, 0, 1));
	box-shadow:
		rgba(255, 40, 0, 1) 0px 20px,
		rgba(255, 40, 0, 0.3) 0px 40px,
		rgba(255, 40, 0, 0.2) 0px 60px,
		rgba(255, 40, 0, 0.1) 0px 80px;
	margin-bottom:100px;
}
header .main{
	text-align: center;
	padding: 120px 8px;
	color:#FFFFFF;
}
header .main span{
	font-size:1.2rem;
}
footer{
	margin-top:50px;
	padding: 2% 5%;
	text-align:center;
	font-size:1.1rem;
	color: white;
	border-radius: 50% 50% 0 0;
  	background: rgba(0, 0, 0, 1);
	background: -webkit-linear-gradient(to top, rgba(0, 0, 0, 1), rgba(255, 40, 0, 1));
	background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(255, 40, 0, 1));
	box-shadow:
		rgba(255, 40, 0, 0.1) 0 -40px ,
		rgba(255, 40, 0, 0.2) 0 -30px,
		rgba(255, 40, 0, 0.3) 0 -20px,
		rgba(255, 40, 0, 1) 0 -10px ;
}
/*** 
* Card Footer Header
*/
#header-footer{
	background:#212121;
}
#header-footer .card{
	/* width: 190px; */
	height: 254px;
	border-radius: 20px;
	padding: 2.5px;
	background: linear-gradient(-45deg, rgba(255, 40, 0, 1) 0%, rgba(247, 186, 43, 1) 100%);
	box-shadow: rgba(255, 40, 0, 0.2) 0 15px 30px -5px;
}

#header-footer .card-content{
	padding: 10px 2px;
	display: flex;
	flex-direction: column;
	/* justify-content: center; */
	align-content : flex-start;
	align-items: center;
	
	background: rgba(65, 73, 79, 1);
	border-radius: 17px;
	width: 100%;
	height: 100%;
}
#header-footer .card .card-content .card-logo img{
	max-width:140px;
}

#header-footer .card .card-content .card-title{
	font-size:0.95em;
	font-weight: bold;
	letter-spacing: .1em;
	color:#FFFFFF;
}
#header-footer .card-description{
	font-size:0.85em;
	color:#FFFFFF;
}
/*Hover*/
#header-footer .card:hover::after {
 opacity: 0;
}

#header-footer .card:hover .card-info {
 color: #f7ba2b;
 transition: color 1s;
}

/***
*  Abort us section
*/
#abort_us{
	padding:20px 20px 0 20px;
	background:#ffffff;
	/* background:#dee7ff; */
}
#abort_us h3{
  text-transform: capitalize;
  color: rgba(42, 40, 44, 1);/* #2a282c */
}
#abort_us .subtitle{
	font-size: .85em;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 4px;
	line-height: 3em;
	padding-left: 0.25em;
	color: rgba(42, 40, 44, 1);/* #2a282c */
	/* padding-bottom: 10px; */
}
#abort_us .subtitle::after {
	content: "";
	margin: 0;
	display: block;
	width: 310px;
	height: 6px;
	border-radius: 2px;
	background: linear-gradient(-45deg, rgba(255, 40, 0, 1) 0%, rgba(247, 186, 43, 1) 100%);
}

/***
* Abourt us Left column
* Timeline 
*/
.timeline {
	 position: relative;
	 margin-top:25px;
}
 .timeline::before {
	 content: '';
	 background: #ff2800;
	 width: 5px;
	 height: 95%;
	 position: absolute;
	 left: 50%;
	 transform: translateX(-50%);
}
 .timeline-item {
	 width: 100%;
	 margin-bottom: 70px;
}
 .timeline-item:nth-child(even) .timeline-content {
	 float: right;
}
 .timeline-item:nth-child(even) .timeline-content::after {
	 content: '';
	 position: absolute;
	 border-style: solid;
	 width: 0;
	 height: 0;
	 top: 30px;
	 left: -15px;
	 border-width: 10px 15px 10px 0;
	 border-color: transparent #e7e7e7 transparent transparent;
}
 .timeline-item::after {
	 content: '';
	 display: block;
	 clear: both;
}
 .timeline-content {
	 position: relative;
	 width: 45%;
	 padding: 10px 30px;
	 border-radius: 4px;
	 background: #e7e7e7;
	 box-shadow: 0 20px 25px -15px rgba(0, 0, 0, .3);
}
 .timeline-content::after {
	 content: '';
	 position: absolute;
	 border-style: solid;
	 width: 0;
	 height: 0;
	 top: 30px;
	 right: -15px;
	 border-width: 10px 0 10px 15px;
	 border-color: transparent transparent transparent #e7e7e7;
}
.timeline-content span::after{
	content: "";
	margin: 4px 0;
	display: block;
	height: 4px;
	border-radius: 2px;
	background: linear-gradient(-45deg, rgba(255, 40, 0, 1) 0%, rgba(247, 186, 43, 1) 100%);
}
 .timeline-img {
 	 content: url('../images/icon/easynet_icon_32x32.png');
	 width: 50px;
	 height: 50px;
	 background: #ffffff;
	 border: 2px solid #ff2800;
	 border-radius: 50%;
	 position: absolute;
	 left: 50%;
	 padding:4px;
	 margin-top: 25px;
	 margin-left: -25px;
}
 .timeline-img-header h3 {
	 color: #fff;
	 position: absolute;
	 bottom: 5px;
	 left: 20px;
}

 @media screen and (max-width: 768px) {
	 .timeline::before {
		 left: 30px;
	}
	 .timeline .timeline-img {
		 left: 30px;
	}
	 .timeline .timeline-content {
		 max-width: 100%;
		 width: auto;
		 margin-left: 70px;
	}
	 .timeline .timeline-item:nth-child(even) .timeline-content {
		 float: none;
	}
	 .timeline .timeline-item:nth-child(odd) .timeline-content::after {
		 content: '';
		 position: absolute;
		 border-style: solid;
		 width: 0;
		 height: 0;
		 top: 30px;
		 left: -15px;
		 border-width: 10px 15px 10px 0;
		 border-color: transparent #f5f5f5 transparent transparent;
	}
	
	footer{
		font-size:0.9rem;
	}
}

/***
* Abourt us right column
* Detail 
*/
.abortus-easynet ol{
	list-style-type: none;
	margin:0;
}
.abortus-easynet li{
	color: #212121;
	font-size:1.1em;
	letter-spacing: 2px;
	list-style-type: none;
}
 .abortus-easynet li{
	list-style-type: none;
	position: relative;
	margin: 30px 0;
	line-height: 32px;
	padding-left: 50px;
}
 .abortus-easynet li:before{
	content: url('../images/icon/easynet_icon_32x32.png');
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	padding:2px;
	border: 2px solid #ff2800;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	text-align: center;
	margin-top:0;
}

/****
* hr
***/
.hr {
  background: linear-gradient(-45deg, rgba(255, 40, 0, 1) 0%, rgba(247, 186, 43, 1) 100%);
  height: 3px;
  border: 0;
}

/***
* Our Customer
*/
#our-customer{
	margin-top:20px;
}
#our-customer h1{
  text-transform: capitalize;
  text-align:center;
}
#our-customer .header-customer{
	text-align:center;
}
#our-customer .subtitle{
	font-size: .85em;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 4px;
	line-height: 3em;
	/* padding-left: 0.25em; */
	color: rgba(42, 40, 44, 1);/* #2a282c */
	/* padding-bottom: 10px; */
}
#our-customer .subtitle::after{
	content: "";
	display: block;
	position: absolute;
	top: 10;
	left: 50%;
	margin-left:-160px;
	width: 320px;
	height: 6px;
	border-radius: 2px;
	background: linear-gradient(-45deg, rgba(255, 40, 0, 1) 0%, rgba(247, 186, 43, 1) 100%);
}

/***
* marquee our-customer
*/
:root{
  --color-text:#000;
  --colog-bg:#000;
  --color-border-color:#dedede;
  --size:clamp(10rem, 1rem + 40vmin,20rem);
  --gap:calc(var(--size) / 20);
  --duration:90s;
  --scroll-start:0;
  --scroll-end:calc(-100% - var(--gap));
}
.marquee{
  display: flex;
  overflow: hidden;
  user-select: none;
  gap:var(--gap);
}
.marquee_group{
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap:var(--gap);
  min-width: 100%;
  animation: scroll-x var(--duration) linear infinite;
}
.marquee-reverse .marquee_group{
  animation-direction: reverse;
  animation-delay: -3s;
}
@keyframes scroll-x{
  from{
  	transform: translateX(var(--scroll-start));
  }
  to{
  	transform: translateX(var(--scroll-end));
  }
}
.marquee .slide{
	display: grid;
	place-items:center;
	width: var(--size);
	fill: var(--color-text);
	border: 2px solid var(--color-border-color);
	aspect-ratio:19/9;
	padding: calc(var(--size) / 30);
	border-radius: 0.5rem;
}
.marquee .slide img{
	max-width: calc(var(--size)/1.8);
	max-height: calc(var(--size)/3);
}
.our-customer-logo{
	display: flex;
	flex-direction: column;
	gap:var(--gap);
	margin: 40px 0 50px 0;
	max-width: 100vw;
}

/****
our partners
*/
.our-partners-logo{
 	display: flex;
	flex-direction: row; 
	gap:var(--gap);
	margin: 40px 0 60px 0;
	padding-bottom:10px;
	max-width: 100vw;
	justify-content: space-around;
}

.partners-list{
	padding: .5vw;
	display: flex;
	flex-direction: row; 
	flex-wrap:wrap;
	justify-content: space-around;
	gap:6px;
}

.partners-slide{
	display: grid;
	place-items:center;
	width: var(--size);
	fill: var(--color-text);
	border: 2px solid var(--color-border-color);
	aspect-ratio:19/9;
	padding: calc(var(--size) / 30);
	border-radius: 0.5rem;
	background:#fff;
	cursor: pointer;
}
.partners-list .partners-slide img{ 
	max-width: calc(var(--size)/1.8);
	max-height: calc(var(--size)/3);
}

/****
* card counter building & use login
******/
.card-count{
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	box-shadow: 2px 2px 10px #DADADA;
	margin: 5px;
	padding: 20px 10px;
	background-color: #fff;
	height: 100px;
	border-radius: 5px;
	transition: .3s linear all;
}
.card-count svg{
	max-width:85px;
 	opacity: 0.8;
}
.card-count.blue{
	background-color: #007bff;
    color: #FFF;
}
.card-count.purple{
	background-color: #990099;
    color: #FFF;
}
.card-count.orange{
	background-color: #ff8000;
    color: #FFF;
}
.card-count.green{
	background-color: #009933;
    color: #FFF;
}
.card-count .count-numbers{
	text-align:center;
	font-size: 2em;
}
.card-count .count-name{
    font-style: italic;
    text-transform: capitalize;
    opacity: 0.8;
    font-size: 1em;
  }