/* --------------------------------------------- */
/* Import Fonts & All CSS */
@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@400;500;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Sarabun&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Mali:wght@400;500;600&display=swap');

@import url("classy-nav.css");
@import url("iconstyle.css");



/* -----------------------------------
		     Reboot CSS
----------------------------------- */
* {
  	margin: 0;
  	padding: 0; 
}

body {
  	font-size: 18px;
  	color: #4d4d4d;
  	position: relative;
  	z-index: auto;
	background-color: white;
}

a,
a:active,
a:hover {
  	color: #00ffff;
  	text-decoration: none;
  	-webkit-transition-duration: 500ms;
  	-o-transition-duration: 500ms;
  	transition-duration: 500ms;
  	outline: none;
}

p {
	line-height: 1.7;
	word-wrap: break-word;
}

img {
  	max-width: 100%;
  	height: auto;
}

ul,
ul li {
  	margin: 0;
  	padding: 0; 
}

input,
select,
textarea {
	font-family: "Sarabun" !important;
}



/* -----------------------------------
		     Core CSS
----------------------------------- */
.eng { font-family: "Source Sans Pro" !important; }
.thai { font-family: "Kanit" !important; }
.-sarabun { font-family: "Sarabun" !important; }

.blue-text { color: #2569d9 !important; }
.lightblue-text { color: #00aeef !important; }
.green-text { color: #39b54a !important; }
.green-text-title { color: #009245 !important; }
.orange-text { color: #ff931e !important; }
.red-text { color: red !important; }
.darkred-text { color: #c1272d !important; }
.grey-text { color: grey !important; }
.-text  { color: #666 !important; }
.yellow-text { color: yellow !important; }
.base-text { color: #343a40 !important; }

.ti-3 { text-indent: 30px !important; }

.fs-xsmall { font-size: 14px !important; }
.fs-small { font-size: 16px !important; }
.fs-normal, .fs-base { font-size: 18px !important; }
.fs-large { font-size: 20px !important; }
.fs-larger { font-size: 24px !important; }

.lh-normal { line-height: normal !important; }
.lh-xxl { line-height: 30px !important; }

.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }

.mr-3 { margin-right: 15px !important; }
.mb-7 { margin-bottom: 60px !important; }
.mb-10 { margin-bottom: 100px !important; }
.ml-purchased { margin-left: 8%; }

.no-margin { margin: 0 !important; }
.no-padding { padding: 0 !important; }

.has-border { border: 1px solid #ccc; }
.no-border { border: none !important; }

.has-box-shadow { box-shadow: rgba(0, 0, 0, 0.26) 0px 1px 5px; }
.no-box-shadow  { box-shadow: none !important; }

i.-icon {
	margin: 0 10px;
}

.flt-left { float: left; }
.flt-right { float: right; }
.flt-inherit { float: inherit; }
.flt-none { float: none; }

/* Orange Button Link */
.btn-outline-link {
	display: block !important;
	color: #ff931e !important;
	padding: 10px 25px !important;
	border: 2px solid #ff931e !important;
	border-radius: 50px !important;
}
.btn-outline-link:focus,
.btn-outline-link:hover {
	background-color: #ff931e;
	color: white !important;
	outline: none;
}
.btn-outline-link:after {
	content: "\f30b";
	font-family: "Font Awesome 6 Free";
	font-size: 16px;
	display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	padding-left: 6px;
	font-weight: 900;
}
@media (max-width: 767px){
	.btn-outline-link {
		margin: 30px auto !important;
	}
}



/* -----------------------------------
		     BG CSS
----------------------------------- */
.no-bg { background: none !important; }

.bg-white { background-color: white !important; }
.bg-lightgreen { background-color: #fbffef !important; }

.bg-overlay {
  	position: relative;
  	z-index: 1; 
}
.bg-overlay:after {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    background-color: rgba(0, 0, 0, 0.65); 
}

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

.jarallax {
	position: relative;
  	z-index: 0; 
}
.jarallax > .jarallax-img {
    position: absolute;
    object-fit: cover;
    font-family: 'object-fit: cover';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  	color: white;
  	right: 20px;
  	text-align: center;
  	padding-right: 0;
  	position: fixed;
  	top: 20px;
  	width: 30px;
  	background: #1c66de;
  	height: 30px;
  	line-height: 30px; 
}

button.mfp-close,
button.mfp-arrow {
  background: #1c66de; 
}

.mfp-bottom-bar { display: none !important; }

.mfp-bg { background-color: #000000; }

.bg-transparent { background-color: transparent !important; }

.bg-gray { background-color: #e8f1f8 !important; }

.bg-lightblue { background-color: #e8f8fc !important; }

textarea:focus,
input:focus {
	outline: none;
}

.border { border-color: #ebebeb; }

.mfp-arrow-left:after { border-right-color: transparent; }

.mfp-arrow-left:before { border-right-color: white; }

.mfp-arrow-right:after { border-left-color: transparent; }

.mfp-arrow-right:before { border-left-color: white; }



/* -----------------------------------
		     Spacing CSS
----------------------------------- */
.no-margin { margin: 0 !important; }
.no-padding { padding: 0 !important; }

.mt-15 { margin-top: 15px; }
.mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px; }
.mt-50 { margin-top: 50px; }
.mt-70 { margin-top: 70px; }
.mt-80 { margin-top: 80px; }
.mt-100 { margin-top: 100px; }
.mt-150 { margin-top: 150px; }

.mr-7  { margin-right: 7px; }
.mr-15 { margin-right: 15px; }
.mr-30 { margin-right: 30px; }
.mr-50 { margin-right: 50px; }
.mr-100 { margin-right: 100px; }

.mb-15 { margin-bottom: 15px; }
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; }
.mb-50 { margin-bottom: 50px; }
.mb-60 { margin-bottom: 60px; }
.mb-70 { margin-bottom: 70px; }
.mb-80 { margin-bottom: 80px; }
.mb-100 { margin-bottom: 100px; }

.ml-15 { margin-left: 15px; }
.ml-30 { margin-left: 30px; }
.ml-50 { margin-left: 50px; }
.ml-100 { margin-left: 100px; }

.pt-50 { padding-top: 50px !important; }
.pr-0 { padding-right: 0px !important; }

.section-padding-15 {
	padding-top: 15px;
  	padding-bottom: 15px; 
}

.section-padding-30 {
	padding-top: 30px;
  	padding-bottom: 30px; 
}

.section-padding-0-30 {
  	padding-top: 0;
  	padding-bottom: 30px; 
}

.section-padding-30-0 {
  	padding-top: 30px;
  	padding-bottom: 0; 
}

.section-padding-60 {
	padding-top: 60px;
  	padding-bottom: 60px; 
}

.section-padding-0-60 {
  	padding-top: 0;
  	padding-bottom: 60px; 
}

.section-padding-60-0 {
  	padding-top: 60px;
  	padding-bottom: 0; 
}


.section-padding-80 {
	padding-top: 80px;
  	padding-bottom: 80px; 
}

.section-padding-0-80 {
  	padding-top: 0;
  	padding-bottom: 80px; 
}

.section-padding-80-0 {
  	padding-top: 80px;
  	padding-bottom: 0; 
}

.section-padding-100 {
  	padding-top: 100px;
  	padding-bottom: 100px; 
}

.section-padding-0-100 {
  	padding-top: 0;
  	padding-bottom: 100px; 
}

.section-padding-100-0 {
  	padding-top: 100px;
  	padding-bottom: 0; 
}



/* -----------------------------------
		   Preloader CSS
----------------------------------- */
#preloader {
  	position: fixed;
  	width: 100%;
  	height: 100%;
  	z-index: 9999999;
  	top: 0;
  	left: 0;
  	background-color: #1c66de;
  	display: -webkit-box;
  	display: -ms-flexbox;
  	display: flex;
  	-webkit-box-align: center;
  	-ms-flex-align: center;
  	align-items: center;
  	-webkit-box-pack: center;
  	-ms-flex-pack: center;
  	justify-content: center;
  	overflow: hidden; 
}

.loader,
.loader:before,
.loader:after {
  	border-radius: 50%;
  	width: 2.5em;
  	height: 2.5em;
  	-webkit-animation-fill-mode: both;
  	animation-fill-mode: both;
  	-webkit-animation: load7 1.8s infinite ease-in-out;
  	animation: load7 1.8s infinite ease-in-out; 
}

.loader {
  	color: white;
  	font-size: 6px;
  	position: relative;
  	-webkit-transform: translateZ(0);
  	-ms-transform: translateZ(0);
  	transform: translateZ(0);
  	-webkit-animation-delay: -0.16s;
  	animation-delay: -0.16s; 
}

.loader:before,
.loader:after {
  	content: " ";
  	position: absolute;
  	top: 0; 
}

.loader:before {
  	left: -3.5em;
  	-webkit-animation-delay: -0.32s;
  	animation-delay: -0.32s; 
}

.loader:after { left: 3.5em; }

@-webkit-keyframes load7 {
  	0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em; }
  	40% { box-shadow: 0 2.5em 0 0; } 
}
@keyframes load7 {
  	0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em; }
  	40% { box-shadow: 0 2.5em 0 0; }
}



/* -----------------------------------
		    Header CSS
		 (top bar + menu)
----------------------------------- */
.header-area {
	position: relative;
  	width: 100%;
  	-webkit-transition-duration: 500ms;
  	-o-transition-duration: 500ms;
  	transition-duration: 500ms;
  	background-color: #1c66de; 
}
.header-area .top-header-area {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 50px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
}
@media (min-width: 768px) and (max-width: 991px) {
    .header-area .top-header-area {
    	z-index: 1; 
	} 
}
@media (max-width: 767px) {
	.header-area .top-header-area {
        z-index: 9; 
	} 
}
.header-area .top-header-area .top-header-content {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center; 
}
.header-area .top-header-area .top-header-content a {
	color: white;
    font-size: 15px;
    line-height: 49px;
    display: inline-block; 
	text-decoration: none;
}

.header-area .top-header-area .top-header-content a i { 
	padding-right: 5px; 
}
 @media (max-width: 991px) {
	 .header-area .top-header-area .top-header-content a:nth-child(2) > span,
	 .header-area .top-header-area .row .col-6:first-child .top-header-content a:last-child {
	  	display: none;
	}
}
@media (max-width: 767px) {
	.header-area .top-header-area .row .col-6:nth-child(2) .top-header-content a:first-child > span {
    	display: none; 
	}
	.header-area .top-header-area .top-header-content a.nothover span {
    	display: contents;
		width: auto;
		font-size: 14px;
		margin-left: 5px;
	}
}
.header-area .top-header-area .top-header-content a:hover,
.header-area .top-header-area .top-header-content a:focus {
	color: #00ffff; 
	text-decoration: none;
}
.header-area .top-header-area .top-header-content .nothover {
	cursor: default;
	color: white !important;
}
.header-area .top-header-area .top-header-content .btn {
	padding: 0;
	margin: 0;
}
.header-area .top-header-area .top-header-content .dropdown-menu.show {
 	display: block;
  	width: 67px !important;
  	top: -12px !important;
  	left: -8px !important;
	z-index: 1000001;
}
.header-area .top-header-area .top-header-content .dropdown a img {
	display: inline-block;
	width: 14px;
	margin: -2px 7px 0 0;
}
.header-area .top-header-area .top-header-content .dropdown-menu {
	margin: 0;
	min-width: auto;
	padding: .125rem 0 !important;
}
.header-area .top-header-area .top-header-content .dropdown-menu .dropdown-item {
	padding: 0 10px;
    color: #343a40;
    line-height: 35px;
	z-index: 100001;
}
.header-area .top-header-area .top-header-content .dropdown-menu .dropdown-item:hover {
	background-color: #1c66de;
    color: #00ffff;
}
.header-area .top-header-area .row .col-6:first-child .top-header-content a:first-child {
	padding-right: 30px; 
}
@media (max-width: 767px) {
	.header-area .top-header-area .row .col-6:first-child .top-header-content a:first-child {
    	padding-right: 0; 
	} 
}

.header-area .top-header-area .row .col-6:first-child .top-header-content a:last-child {
	border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding-left: 30px; 
}
@media (max-width: 767px) {
	.header-area .top-header-area .row .col-6:first-child .top-header-content a:last-child {
    	padding-left: 15px; 
	} 
}
.header-area .top-header-area .row .col-6:last-child .top-header-content {
	-webkit-box-pack: end;
    -ms-flex-pack: end;
	justify-content: flex-end; 
}
.header-area .top-header-area .row .col-6:last-child .top-header-content a:first-child {
    padding-right: 30px; 
}
@media (max-width: 767px) {
	.header-area .top-header-area .row .col-6:last-child .top-header-content a:first-child {
    	padding-right: 15px;
	} 
}
.header-area .top-header-area .row .col-6:last-child .top-header-content .dropdown {
	padding-left: 30px;
	border-left: 1px solid rgba(255, 255, 255, 0.1);
}
@media (max-width: 767px) {
	.header-area .top-header-area .row .col-6:last-child .top-header-content .dropdown {
		padding-left: 15px; 
	} 
}


.classy-nav-container {
	background-color: transparent;
  	padding: 0; 
}

.classy-nav-container .classy-navbar {
    -webkit-transition-duration: 500ms;
    -o-transition-duration: 500ms;
    transition-duration: 500ms;
    /* height: 100px; */
    padding: 0; 
}
.classy-nav-container .classy-navbar a img {
	margin-top: -10px;
}
.classy-navbar ul#nav {
	margin-bottom: 0 !important;
}

@media (min-width: 768px) and (max-width: 991px) {
	.classy-nav-container .classy-navbar {
        height: 70px; 
	} 
}
@media (max-width: 767px) {
	.classy-nav-container .classy-navbar {
    	height: 70px; 
	} 
	.classy-nav-container .classy-navbar .nav-brand {
        max-width: 135px;
		margin: 15px 15px 0 0; 
	}
		.classy-nav-container .classy-navbar a img {
		margin-top: -24px;
	}
}

.classy-nav-container .classy-navbar .classynav ul li a,
.classy-nav-container .classy-navbar .classynav ul.dropdown li a {
	font-size: 18px;
	color: white;
	padding: 0 20px;
}
.classy-nav-container .classy-navbar .classynav ul.dropdown li a {
	color: gray;
}
@media (min-width: 992px) and (max-width: 1199px) {
	.classy-nav-container .classy-navbar .classynav ul li a,
	.classy-nav-container .classy-navbar .classynav ul.dropdown li a {
		font-size: 15px; 
	} 
}
@media (max-width: 991px) {
	.classy-nav-container .classy-navbar .classynav ul li a {
    	font-size: 17px;
		color: currentColor; 
	}
	.classy-nav-container .classy-navbar .classynav ul li a:hover,
	.classy-nav-container .classy-navbar .classynav ul li a:focus,
	.classynav ul li.cn-dropdown-item.active a {
    	color: #00ffff;
		background-color: #1c66de;
	}
	
}

.classy-nav-container .classy-navbar .classynav ul li a:focus,
.classy-nav-container .classy-navbar .classynav ul li a:hover {
	color: #00ffff;
}

.classy-nav-container .classy-navbar .classynav ul li.cn-dropdown-item ul li a,
.classy-nav-container .classy-navbar .classynav ul li.megamenu-item ul li a {
	font-size: 16px;
    height: 42px;
    line-height: 42px;
    padding: 0 30px;
    color: #999; 
}

.classy-nav-container .classy-navbar .classynav ul li.cn-dropdown-item ul li a:focus,
.classy-nav-container .classy-navbar .classynav ul li.cn-dropdown-item ul li a:hover,
.classy-nav-container .classy-navbar .classynav ul li.megamenu-item ul li a:focus,
.classy-nav-container .classy-navbar .classynav ul li.megamenu-item ul li a:hover {
    color: #00ffff;
	background-color: #1c66de;
}

.classynav ul li.active a {
	position: relative;
  	z-index: 1;
	color: #00ffff !important;
}

.classynav ul li.active a:before {
    width: 80%;
    height: 2px;
    background-color: #00ffff;
    position: absolute;
    bottom: 0;
    left: 10%;
    z-index: 1;
    content: " "; 
}
@media (min-width: 768px) and (max-width: 991px) {
    .classynav ul li.active a:before {
		display: none; 
	} 
}
@media (max-width: 767px) {
    .classynav ul li.active a:before {
        display: none; 
	} 
}

.classynav ul li.has-down > a:after,
.classynav ul li.has-down.active > a:after,
.classynav ul li.megamenu-item > a:after {
	color: white; 
}

.breakpoint-off .classynav ul li .dropdown,
.breakpoint-off .classynav ul li .megamenu {
  	width: 225px;
  	-webkit-box-shadow: 0 2px 40px 8px rgba(15, 15, 15, 0.15);
  	box-shadow: 0 2px 40px 8px rgba(15, 15, 15, 0.15);
  	border-radius: 6px;
}

.breakpoint-off .classynav ul li .megamenu {
  	width: 100%; 
}

.classy-navbar-toggler .navbarToggler span {
  	background-color: white; 
}



/* -----------------------------------
		  Breadcrumbs CSS
----------------------------------- */
.breadcrumbs {
  	list-style: none;
  	margin: 15px 0 60px 0;
  	padding: 15px 0;
  	-webkit-backface-vibisility: hidden;
     -moz-backface-vibisility: hidden;
      -ms-backface-vibisility: hidden;
          backface-vibisility: hidden;
}
.breadcrumbs li {
  	list-style: none;
  	margin: 0;
  	padding: 0;
  	display: block;
  	float: left;
  	font-size: 16px;
  	letter-spacing: normal;
  	line-height: 8px;
	color: black;
}
.breadcrumbs li i {
	margin-right: 8px;
	display: inline-block;
	line-height: 8px;
}
.breadcrumbs li a {
  	display: block;
  	padding: 0 40px 0 0;
  	color: #999;
  	text-decoration: none;
  	height: 10px;
  	position: relative;
  	perspective: 700px;
}
.breadcrumbs li a.eng,
.breadcrumbs li.eng {
	font-weight: 600 !important;
}
.breadcrumbs li a:after {
  	content: " ";
  	width: 10px;
  	height: 10px;
  	border-color: #333;
  	border-style: solid;
  	border-width: 1px 1px 0 0;
  	-webkit-backface-visibility: hidden;
  	outline: 1px solid transparent;
  	position: absolute;
  	right: 20px;
  	-webkit-transition: all .15s ease;
     -moz-transition: all .15s ease;
      -ms-transition: all .15s ease;
          transition: all .15s ease;
  	-webkit-transform: rotateZ(45deg) skew(10deg, 10deg);
     -moz-transform: rotateZ(45deg) skew(10deg, 10deg);
      -ms-transform: rotateZ(45deg) skew(10deg, 10deg);
          transform: rotateZ(45deg) skew(10deg, 10deg);
}
.breadcrumbs li a:hover:after {
  	right: 15px;
  	-webkit-transform: rotateZ(45deg) skew(-10deg, -10deg);
     -moz-transform: rotateZ(45deg) skew(-10deg, -10deg);
      -ms-transform: rotateZ(45deg) skew(-10deg, -10deg);
          transform: rotateZ(45deg) skew(-10deg, -10deg);
}
.breadcrumbs li a:hover {
	color: black;
}
@media (max-width: 767px){
	.breadcrumbs li {
		font-size: 14px;
	}
	.breadcrumbs li a {
  		padding: 0 35px 0 0;
	}
	.breadcrumbs li a::after {
		right: 15px;
	}
}
@media (max-width: 991px){
	.breadcrumbs {
		margin: 15px 0 0 0;
	}
}



/* -----------------------------------
		   Back to top CSS
----------------------------------- */
#btn-back-to-top {
  	position: fixed;
  	bottom: 30px;
  	right: 30px;
	border: 3px solid #ff931e;
  	color: #ff931e;
  	display: none;
	border-radius: 50%;
	z-index: 999;
}
.btn-outline-warning:focus,
.btn-outline-warning:hover {
	color: white !important;
	background-color: #ff931e !important;
	outline: 0;
	clear: both;
}



/* -----------------------------------
		    Banner Area CSS
----------------------------------- */
.banner-area {
	margin: 0 auto 60px auto;
	display: block;
}
.banner-area .gif-ads {
	margin-top: 15px;
	padding: 10px;
	border: 1px solid #ccc;
}
.banner-ads {
	padding: 60px 0;
}
.gif-ads img,
.gif-ads .img-fluid {
	width: 100% !important;
}

@media (max-width: 767px){
	.banner-area .col-md-6 {
		padding: 0 !important;
	}
	.banner-ads {
		padding: 30px 0;
	}
}



/* -----------------------------------
		   Check Domain CSS
----------------------------------- */
.find-domain-area {
  	position: relative;
  	
}
.find-domain-area span,
.find-domain-area p {
	display: inline-block;
	color: #ff931e;
	font-size: 22px;
}
.find-domain-area p {
	font-size: 17px;
	margin-bottom: 30px;
}
.domain-text {
	margin-bottom: 70px;
}
.domain-text h2 {
  	font-size: 42px;
	font-weight: 600;
	margin: 0;
}
@media (min-width: 992px) and (max-width: 1199px) {
    .domain-text h2 {
    	font-size: 32px; 
	} 
}
@media (min-width: 768px) and (max-width: 991px) {
	.domain-text {
		margin-bottom: 15px;
	}
    .domain-text h2 {
      	font-size: 34px;
		text-align: center; 
	} 
}
@media (max-width: 767px) {
	.find-domain-area {
		margin-top: 25px;
	}
	.domain-text {
		margin-bottom: 10px;
	}
    .domain-text h2 {
      	font-size: 25px;
		text-align: center;
	} 
}

.domain-check-form {
  	position: relative;
}

.domain-check-form form {
    position: relative;
    border-radius: 35px;
    box-shadow: 0 5px 15px -2px rgba(0, 0, 0, 0.15); 
}

.domain-check-form form input {
	-webkit-box-flex: 0;
    -ms-flex: 0 0 450px;
	flex: 0 0 450px;
	max-width: 450px;
	width: 450px !important;
    height: 60px;
    font-size: 18px;
    border: 1px solid #ebebeb;
    border-radius: 35px 0 0 35px;
    padding: 0 30px; 
}
.domain-check-form .modal .modal-body label,
.domain-check-form .modal .modal-body input {
	font-weight: 600;
	letter-spacing: .3px
}
.domain-check-form .modal .modal-body label.col-3 {
	text-align: end;
    padding-right: 0;
}
.domain-check-form .modal .modal-body .col-9 {
	margin-left: 0;
}
.domain-check-form .modal .modal-body .col-9 input {
	color: #2569d9;
}
.domain-check-form .modal .modal-body .col-9 input:first-child {
	padding-bottom: 0;
}

@media (min-width: 1367px) {
	.domain-check-form form input {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 580px;
		flex: 0 0 580px;
		max-width: 580px;
		width: 580px !important;
	}
}
@media (min-width: 768px) and (max-width: 991px) {
	.domain-check-form form input {
    	-webkit-box-flex: 0;
        -ms-flex: 0 0 calc(100% - 260px);
        flex: 0 0 calc(100% - 260px);
        max-width: calc(100% - 260px);
        width: calc(100% - 260px);
	} 
}
@media (max-width: 767px) {
	.domain-check-form form input {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 170px;
		flex: 0 0 170px;
		max-width: 170px;
		height: 50px;
		font-size: 15px;
		padding: 0 17px;
	}
	.domain-check-form .input-group > .form-select {
		font-size: 18px;
		padding: 0 7px;
	}
}

.domain-check-form .form-control:placeholder {
	color: #999;
}

.domain-check-form form input:focus {
	box-shadow: none;
}

.domain-check-form form select {
    background-color: whitesmoke;
	color: #343a40;
}
  
.domain-check-form form button {
	-webkit-box-flex: 0;
    -ms-flex: 0 0 160px;
    flex: 0 0 160px;
    max-width: 160px;
    width: 1600px;
    height: 60px;
    font-size: 18px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    border-radius: 0 35px 35px 0;
    -webkit-transition-duration: 500ms;
    -o-transition-duration: 500ms;
    transition-duration: 500ms; 
}
@media (min-width: 768px) and (max-width: 991px) {
	.domain-check-form form button {
    	-webkit-box-flex: 0;
        -ms-flex: 0 0 130px;
        flex: 0 0 130px;
        max-width: 130px;
        width: 130px;
	} 
}
@media (max-width: 767px) {
	.domain-check-form form button {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 80px;
        flex: 0 0 80px;
        max-width: 80px;
        width: 80px;
        height: 50px;
        font-size: 16px; 
	} 
}

.domain-check-form form button:hover, 
.domain-check-form form button:focus {
	background-color: #ff931e;
	color: white; 
}

.help-details {
	display: block;
	margin: 15px 30px 0 30px;
}
@media (max-width: 991px){
	.help-details {
		margin: 15px 30px 30px 30px;
	}
}
.help-details span,
.help-details p {
	font-size: 18px;
}
.help-details p {
	font-size: 16px;
	margin: 0;
}



/* -----------------------------------
		   About us CSS
----------------------------------- */
.about-area {
  	position: relative;
  	z-index: 1;
	padding: 60px 0 150px 0;
}
.about-title,
.about-title span,
.about-details p,
.about-details ul,
.about-photo {
	display: block;
	font-size: 18px;
}
.about-title span:first-child,
.about-title span:last-child {
	font-size: 26px;
	color: #2569d9;
}
.about-title span:last-child {
	font-size: 40px;
	padding: 0 0 20px 0;
	margin-bottom: 30px;
	line-height: 40px;
	position: relative;
}
.about-title span:last-child:after {
	content: "";
	height: 3px;
	width: 80px;
	background-color: #2569d9;
	position: absolute;
	left: 0;
	bottom: 0;
}
.about-details span,
.about-details ul li > a {
	display: inline-block;
}
.about-details li span:hover { 
	text-decoration: underline;
}
.about-details p {
	margin: 0;
}
.about-details ul {
	margin: 20px 0;
	padding-left: 20px;
	list-style: none;
}
.about-details ul li {
	margin-bottom: 5px;
}
.about-details ul li:before {
	content: "\f0a9";
	font-family: "Font Awesome 6 Free";
	font-size: 16px;
	display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	padding-right: 10px;
	font-weight: 900;
}
.about-photo {
	margin: 50px 0 !important;
	display: block;
}
@media (max-width: 767px) {
	.about-area {
		padding: 30px 0;
	}
	.about-title,
	.about-title span {
		width: 100%;
		text-align: center;
	}
	.about-title {
		margin-top: 30px;
		text-align: center;
	}
	.about-title span:last-child:after {
		left: 40%;
	}
}
@media (max-width: 991px) {
	.about-photo {
	  	margin: 30px 0 60px 0 !important;
	}
	.about-title {
		margin: 30px 0 0 0;
	}
	/* .about-area .row {
		flex-direction: column-reverse;
	} */
}
@media (min-width: 768px) and (max-width: 991px) {
	.about-area {
		padding: 60px 0;
	}
}



/* -----------------------------------
	      Title Section CSS
----------------------------------- */
.section-heading {
  	position: relative;
  	margin: 0 0 30px 0; 
}
.section-heading h2 {
    font-size: 36px;
    text-transform: capitalize;
    display: block;
}
.section-heading img {
	width: auto;
	height: 27px;
	display: block;
	margin: 0 auto!important;
}
.section-heading p {
    font-size: 18px;
    margin: 30px 0;
	color: #343a40;
	word-wrap: break-word;
}

@media (max-width: 991px){
	.section-heading {
		margin: 30px 0; 
	}
}
@media (min-width: 992px) and (max-width: 1199px) {
	.section-heading h2 { 
		font-size: 34px; 
	} 
}



/* -----------------------------------
		  Why choose us CSS
----------------------------------- */
.why-choose-us-area {
	padding: 0 0 60px 0;
}
.wcu-details {
	height: 359px;
	padding: 15px;
  	border-radius: 6px;
  	border: 1px solid #ebebeb;
  	box-shadow: 0 8px 8px -1px rgba(0, 0, 0, 0.15);
}
@media (max-width: 767px) {
	.wcu-details {
	  height: auto;
	  padding: 15px 15px 35px 15px;
	}
}
.wcu-details img {
	display: block;
	margin: 20px auto !important;
}
.wcu-details span,
.wcu-details p {
	font-size: 20px;
	display: block;
}
.wcu-details p {
	font-size: 16px;
	font-family: "Sarabun";
	color: grey;
}
.wcu-details p > span {
	display: inline-block;
}



/* -----------------------------------
	         Partners CSS
----------------------------------- */
.partner-area {
	position: relative;
	background: url("../images/bg-img/bg-partners.jpg") top center no-repeat;
	background-size: cover;
}
.partners,
.partners img {
	display: block;
}
.partners img {
	margin: 15px auto;
}



/* -----------------------------------
	      Testimonials CSS
----------------------------------- */
.testimonial-area {
	background-image: url("../images/bg-img/bg-testimonials.jpg");
	background-position: top center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	height: auto;
}
.bg-blend-mode {
	background-color: #444;
	background-blend-mode: multiply;
}

.testimonial_wrapper {
	padding: 30px 0;
}
.testimonial {
    border-left: 3px solid darkorange;
    padding: 100px 0 100px 275px;
    position: relative
}
.testimonial::before,
.testimonial::after {
    content: "";
    width: 320px;
    height: 55px;
    border-right: 3px solid darkorange;
    position: absolute;
    left: 0;
}

.testimonial::before {
    border-top: 3px solid darkorange;
    top: 0;
}

.testimonial::after {
    border-bottom: 3px solid darkorange;
    bottom: 0;
}

.testimonial .photo {
    width: 110px;
    height: 125px;
    position: absolute;
    top: 100px;
    left: 100px;
}

.testimonial .photo img {
    width: 100%;
    height: auto;
}

.testimonial .description {
    font-size: 18px;
	line-height: normal;
    color: white;
    position: relative;
	margin-bottom: 20px;
}

.testimonial .description::before {
    content: "\f10d";
    font-family: "Font Awesome 6 Free";
    position: absolute;
    top: -66px;
    left: 0;
    font-size: 24px;
    color: darkorange;
	font-weight: 900;
}
.testimonial a {
	text-decoration: none;
	border: none;
}
.testimonial .ctm-name {
    font-size: 18px;
    font-weight: 500;
    color: darkorange;
}
.testimonial .ctm-position {
    display: block;
    font-size: 16px;
    color : white;
	font-weight: normal;
}
.testimonial .ctm-name:hover,
.testimonial .ctm-position:hover {
	text-decoration: underline;
	text-decoration-color: darkorange;
}
.testimonial_wrapper .owl-carousel {
	display: block;
	overflow: hidden;
}
.testimonial_wrapper .owl-carousel .owl-nav {
	display: block !important;
    text-align: right;
}
.testimonial_wrapper .owl-carousel .owl-nav > div {
    opacity: 0.65 !important;
	padding: 0;
	font-size: 0;
	display: inline-block;
}
.testimonial_wrapper .owl-carousel .owl-nav div:hover {
    opacity: 1 !important;
}
.testimonial_wrapper .owl-carousel .owl-prev::before,
.testimonial_wrapper .owl-carousel .owl-next::before {
	display: inline-block;
	font-family: "Font Awesome 6 Free";
    color: darkorange;
	font-size: 30px;
	font-weight: 900;
}
.testimonial_wrapper .owl-carousel .owl-prev::before { 
	content: "\f359";
	margin-right: 7px;
}
.testimonial_wrapper .owl-carousel .owl-next::before { 
	content: "\f35a"; 
}

@media (max-width: 767px) {
    .testimonial {
        padding: 0;
        border: none;
    }
    .testimonial::before,
    .testimonial::after {
        border: none;
    }
    .testimonial .photo {
        position: relative;
        top: 0;
        left: 35%;
    }
    .testimonial .description {
        margin-top: 15px;
    }
	.testimonial .ctm-name,
	.testimonial .ctm-position {
		text-align: center;
	}
    .testimonial .description::before {
        content: "";
    }
	.testimonial_wrapper .owl-carousel .owl-nav {
  		text-align: center;
		margin-top: 15px;
	}
}



/* -----------------------------------
		  Service Type CSS
----------------------------------- */
.service-type {
	background: url("../images/bg-img/bg-servicetype.jpg") center center no-repeat;
	background-size: cover !important;
	margin: 15px 0 0 0;
}
.service-type span {
	font-size: 22px;
	color: white;
	text-align: center;
	display: block;
}
.service-type img {
	display: block;
}
.ordered .card,
.renew .card {
	background-color: transparent;
	border: none;
}
.ordered .card:hover,
.renew .card:hover { 
	border: 1px solid steelblue; 
}
.renew {
	background-image: url("../images/core-img/border-blue-line.png");
	background-position: left center;
	background-repeat: no-repeat;
}
.ordered a,
.renew a { 
	text-decoration: none; 
}
.ordered h5,
.renew h5 { 
	color: yellow;
	margin: 20px 0 0 0;
	letter-spacing: 1px;
}
.ordered p,
.renew p { 
	color: white;
	margin: 0;
}

@media (max-width: 767px) {
	.service-type {
		margin: 0;
		background: url("../images/bg-img/bg-servicetype.jpg") right center no-repeat;
	}
	.service-type .col-lg-3 img {
		display: none;
	}
	.ordered .card .col-8,
	.renew .card .col-8 {
		width: 50% !important;
	}
	.ordered .card .col-4,
	.renew .card .col-4 {
		width: 37% !important;
	}
	.renew {
		background-image: none;
	}
}
@media (min-width: 768px) and (max-width: 991px) {
	.service-type .col-lg-3 {
		display: none;
	}
}



/* -----------------------------------
	      Contacts CSS
----------------------------------- */
.contact-details {
	margin-top: 30px;
	padding: 15px 30px;
}
.contact-details img {
	display: block;
	margin: 0 auto !important;
}
.contact-details .col-md-8,
.contact-details .col-md-9,
.contact-details .col-md-10 {
	padding-left: 0;
}
.contact-details span {
	font-size: 18px;
}
.contact-details p,
.contact-details h3 {
	font-size: 16px;
	color: #808080;
	margin: 0;
	line-height: 19px;
	text-decoration: none;
}
.contact-details h3 {
	font-size: 30px;
	font-family: "Source Sans Pro";
	font-weight: 300;
	margin-top: 7px;
}
.contact-details font {
	color: #666;
	font-weight: 600;
}
@media (max-width: 767px) {
	.contact-details .col-md-8, 
	.contact-details .col-md-9, 
	.contact-details .col-md-10 {
		padding-left: 15px;
		border-bottom: 1px dashed #00a99d;
		padding-bottom: 18px;
	}
	.contact-details .card-block {
		margin-top: 10px;
		text-align: center;
	}
}


.contact {
	margin: 0;
}
.contact .php-email-form {
  	padding: 30px 30px 15px 30px;
}

.contact .form-control:placeholder,
.contactform-area .form-control:placeholder {
  	color: #999 !important;
  	opacity: 0.7;
  	font-size: 14px;
}

.contact .php-email-form .validate,
.contactform-area .php-email-form .validate {
  	display: none;
  	color: red;
  	margin: 0 0 15px 0;
  	font-weight: 400;
  	font-size: 13px;
}

.contact .php-email-form .error-message,
.contactform-area .php-email-form .error-message {
  	display: none;
  	color: #fff;
  	background: #ed3c0d;
  	text-align: left;
  	padding: 15px;
  	font-weight: 600;
}

.contact .php-email-form .error-message br + br,
.contactform-area .php-email-form .error-message br + br {
  	margin-top: 25px;
}

.contact .php-email-form .sent-message,
.contactform-area .php-email-form .sent-message {
  	display: none;
  	color: #fff;
  	background: #18d26e;
  	text-align: center;
  	padding: 15px;
  	font-weight: 600;
}

.contact .php-email-form .loading,
.contactform-area .php-email-form .loading {
  	display: none;
  	background: #fff;
  	text-align: center;
  	padding: 15px;
}

.contact .php-email-form .loading::before,
.contactform-area .php-email-form .loading::before {
  	content: "";
  	display: inline-block;
  	border-radius: 50%;
  	width: 24px;
  	height: 24px;
  	margin: 0 10px -6px 0;
  	border: 3px solid #18d26e;
  	border-top-color: #eee;
  	-webkit-animation: animate-loading 1s linear infinite;
  	animation: animate-loading 1s linear infinite;
}

.contact .form-group,
.contactform-area .form-group {
    margin-bottom: 1rem;
}
.contact .form-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -5px;
    margin-left: -5px;
}
.contact .form-row > .col, 
.form-row > [class*="col"] {
    padding-right: 5px;
    padding-left: 5px;
}
@media (max-width: 767px){
	.contact .form-row > .col, 
	.form-row > [class*="col"] {
		width: 100% !important;
	}
	.contact .php-email-form {
	  	padding: 15px;
	}
}
.contact .php-email-form input, 
.contact .php-email-form textarea {
  	border-radius: 0;
  	box-shadow: none;
  	font-size: 15px;
	font-family: "Sarabun";
}

.contact .php-email-form input:focus, 
.contact .php-email-form textarea:focus {
  	border-color: #1f71e4;
}

.contact .php-email-form input,
.contact .php-email-form textarea {
  	padding: 12px 15px;
}

.contact .php-email-form button[type="submit"],
.contactform-area .php-email-form button[type="submit"],
.php-order-form .btn-gardient,
.confirm-form .btn-gardient,
.wcag-form button[type="submit"] {
	background: rgb(253,76,125);
    background: linear-gradient(45deg, rgba(253,76,125,1) 0%, rgba(253,104,96,1) 100%);
  	padding: 10px 30px;
  	color: #fff;
  	transition: 0.4s;
  	border-radius: 7px;
    float: right;
	font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.65px;
    border: none;
	margin-bottom: 15px;
	font-family: "Source Sans Pro";
}
/*.confirm-form .btn-gardient {
	margin-top: 5px;
	margin-left: 9px;
	width: 49% !important;
}*/

.contact .php-email-form button[type="submit"]:hover,
.contactform-area .php-email-form button[type="submit"]:hover,
.php-order-form .btn-gardient:hover,
.confirm-form .btn-gardient:hover,
.wcag-form button[type="submit"]:hover {
  	color: darkred;
}
.contact .php-email-form .btn-reset,
.php-order-form .btn-reset,
.confirm-form .btn-reset,
.wcag-form .btn-reset {
	padding: 10px 25px;
	background-color: #eaeaea;
	border-radius: 7px;
  	border: none;
	font-size: 18px;
  	font-weight: 600;
  	letter-spacing: 0.65px;
	color: #666;
	margin-bottom: 15px;
	font-family: "Source Sans Pro";
}
.contact .php-email-form .btn-reset:hover,
.php-order-form .btn-reset:hover,
.confirm-form .btn-reset:hover,
.wcag-form .btn-reset:hover {
	color: black;
	background-color: #ccc;
}

@-webkit-keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}



/* -----------------------------------
		    Corner Ads CSS
----------------------------------- */
.corner-ads {
	margin: 0;
	border: 1px solid #eaeaea;
	width: 195px;
	position: fixed;
	z-index: 9;
	bottom: 15px;
	left: 15px;
}
.corner-ads a {
	text-decoration: none;
	cursor: pointer;
}
.close {
  	cursor: pointer;
  	position: absolute;
  	top: -0.5%;
	right: -18%;
	padding: 0 5px;
	color: #ff931e;
	border: 1px solid #ff931e;
	font-size: 30px;
}
.close:hover { 
  	color: white;
  	background-color: #ff931e; 
}



/* -----------------------------------
	      Footer CSS
----------------------------------- */
.footer-area {
	background: url("../images/core-img/support-pattern.png") top center no-repeat;
	background-size: auto;
	padding-top: 135px;
	height: 200px;
}
.footer-area .copyright,
.footer-area .design-by {
	color: white;
	text-align: left;
	font-size: 18px;
}
.footer-area .design-by span {
	float: right;
}
.footer-area .design-by a { 
	text-decoration: none;
	color: lime !important;
}
.footer-area .design-by a:hover { 
	text-decoration: underline; 
}
@media (max-width: 767px) {
	.footer-area .copyright,
	.footer-area .design-by {
		font-size: 14px;
	}
}
@media (max-width: 992px) {
	.footer-area {
		padding-top: 125px;
	}
	.footer-area .copyright,
	.footer-area .design-by {
		text-align: center;
	}
	.footer-area .design-by span {
  		float: none;
	}
}



/* -----------------------------------
	      Bottom Line CSS
----------------------------------- */
.bottom-line {
  	margin: 20px 0 50px 0;
  	height: 7px;
  	background-image: url("../images/core-img/bottom-shadow.png");
  	background-repeat: no-repeat;
  	background-position: bottom;
	background-size: contain;
}
@media (max-width: 767px){
	.bottom-line {
		display: none;
	}
}



/* -----------------------------------
		   Bank Caution CSS
----------------------------------- */
.caution {
	padding: 90px 0;
	background-color: rgba(0, 0, 0, .75);
	background-image: url("../images/bg-img/bg-colornetwork.jpg");
	background-position: center;
	background-blend-mode: multiply;
	background-repeat: no-repeat;
	background-size: cover;
}
.caution h1 {
	text-align: center;
	color: orangered;
}
.caution a { text-decoration: none; }
.caution .link-confirmpage {
	background: none !important;
}



/* -----------------------------------
		  Animation IMG CSS
----------------------------------- */
.img-popup-top {
	-webkit-animation: img-popup-top 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite alternate-reverse both;
	        animation: img-popup-top 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite alternate-reverse both;
}
@-webkit-keyframes img-popup-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: none;
  }
  100% {
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
  }
}
@keyframes img-popup-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: none;
  }
  100% {
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
  }
}