@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&family=Varela&display=swap');

/* font-family: 'Kanit', sans-serif;
font-family: 'Varela', sans-serif; */

* { color: #081c2d; line-height: 21px; font-weight: 400; margin: 0;padding: 0;box-sizing: border-box; font-family: 'Varela', sans-serif; }
body {font-size: 16px;line-height: 24px;color: #081c2d;font-family: emoji;}
a {color: #081c2d;text-decoration: none;transition: 0.5s all;}
a:hover {color: #081c2d;}
img {max-width: 100%;}
h1, h2, h3, h4, h5, h6 {color: #081c2d;margin: 0;padding: 0;font-family: 'Kanit', sans-serif;}
ul, li, ol {list-style: none;margin: 0; padding: 0;}

.pt-70 {padding-top: 70px;}
.pb-70 {padding-bottom: 70px;}
.py-70 {padding-top: 70px; padding-bottom: 70px;}

.container {max-width: 1140px; }
.bg-img {background-size: cover; background-position: center;background-repeat: no-repeat;}


.read-btn {font-weight: 600 !important;border: 0;text-transform: capitalize;cursor: pointer;display: inline-block !important;transition: all 0.4s;z-index: 1;border-radius: 50px;color: #fff !important;background: #89000e;overflow: hidden;position: relative;min-width: 150px;text-align: center;padding: 12px 0;}
.read-btn:after {content: "";position: absolute;top: 10px;left: 0;width: 300px;height: 200px;background-color: #333;border-color: transparent;border-radius: 50%;transform: translate(-40px, -80px) scale(0.1);opacity: 0;z-index: -2;transition: transform 0.5s, opacity 0.5s, background-color 0.5s;}
.read-btn:hover:after {opacity: .3;transform-origin: 100px 100px;transform: scale(1) translate(-10px, -70px);}

button.slick-arrow {position: absolute; top: 50%;transform: translateY(-50%);right: 25px;}
button.slick-prev.slick-arrow {right: auto;left: 25px;}

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

/* header */
header {position: relative;padding: 20px 0;}
.logo img {width: 310px;}
ul.main-menu {display: flex;align-items: center;flex-wrap: wrap;    justify-content: flex-end;}
ul.main-menu li {position: relative;}
ul.main-menu li a {padding: 10px 15px;display: inline-block;font-weight: 600;}
ul.main-menu ul.submenu {position: absolute;z-index: 999;width: 200px;border-top: 3px solid #89000e;background-color: #121212;top: 100%;opacity: 0;left: 0;}
ul.main-menu ul.submenu a {width: 100%;display: block;color: #fff;font-weight: 400;border-bottom: 1px solid rgb(255 255 255 / 20%);transition: 0.4s all;}
ul.main-menu ul.submenu a:hover {background: #89000e;}
ul.main-menu li:hover ul.submenu {opacity: 1;}

/*==============================================================
	banner Style start
==============================================================*/
.banner-wrap{height: auto;position: relative;overflow: hidden; border-top: 3px solid #89000e; }
.shape{position: absolute;bottom: 0;left: 0;width: 100%;}
.shape svg{width: 100%;}
.banner-slider{height: 100%;}
.banner-slider > .banner-slide{display: none;}
.banner-slider > .banner-slide:first-child{display: block;}
.slick-initialized .banner-slide{position: relative;height: auto;padding-bottom: 300px;display:-webkit-flex !important;display:flex !important;-webkit-align-items:center;align-items:center;}
.banner-slider .slick-arrow{font-size: 0;background: #ffffff;border: 0;width: 50px;height: 50px;z-index: 12;cursor: pointer;border-radius: 100%;box-shadow: 0 0 15px rgba(0,0,0,0.12);}
.banner-slider .slick-arrow:before{font-family: "boxicons";font-size: 30px;text-align: center;line-height: 50px;color: rgba(0,33,71,1);}
.banner-slider .slick-arrow.slick-prev:before{content: "\ea9b";}
.banner-slider .slick-arrow.slick-next:before{content: "\eb1c";}
.hero-image{position: absolute;left: 0;top: 0;height: 100%;width: 100%;background-size: cover;background-position: center center;}
.banner-wrap .container{position: relative;z-index: 12;}
.hero-overlay{background: #081c2d;position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity: .5;}
.hero-content{	color: #ffffff;}
.hero-content p{font-size: 20px;line-height: 32px;max-width: 600px;color: rgba(255,255,255,0.9);letter-spacing: 0.010em;}
.blog-detail-banner .hero-content{max-width: 900px;}
.blog-detail-banner .hero-content h1{font-size: 53px;}
.hero-content h3{font-size: 16px;color: rgba(255,255,255,.6);text-transform: uppercase;letter-spacing: 3px;position: relative;font-weight: 500;margin-top: 0;margin-bottom: 12px;margin-left: 6px;}
.hero-content h1{font-size: 32px;line-height: 1.333;margin-bottom: 18px;color: #e6e8f6;font-weight: 400;max-width: 760px;}
.hero-content .cta-btn{padding-top: 30px;}
.hero-content .cta-btn .cta-link.cta-outline-white:hover{background: #ffffff;color: rgba(0,33,71,1);}

.hero-image {position: relative;width: 100%;height: auto;}
.slick-initialized .banner-slide {padding-bottom: 0;}
.hero-content h1 {font-size: 32px;}
.hero-image img {width: 100%;}
.banner-slider {height: auto;}
.slick-initialized .banner-slide {display: block !important;}
.banner-wrap .container {position: absolute;top: 40%;left: 100px;transform: translateY(-50%);}
/*==============================================================
	banner Style end
==============================================================*/



/* quality-section */
.quality-section .d-table {padding-left: 30px;}
.quality-section .content {max-width: 936px;margin-left: auto;margin-right: auto;}
.shape-one:after {width: 0;height: 0;border-bottom: 25px solid #0a1947;border-right: 27px solid transparent;content: "";position: absolute;top: -24px;right: -1px;}	
.quality-section .bg-primary {background: #0a1947 !important;}
.quality-section .bg-secondary {background: #89000e !important;}


/* about section */
.about-section .pr-72 {padding-right: 72px;}
.about-section .left-side {position: relative;}
.about-section .left-side img {border-radius: 0 50px 0 0;}
.about-section .left-side .skill-tag {position: absolute;content: '';right: -50px;top: 50%;width: 150px;height: 150px;transform: translateY(-50%);border: 5px solid #ffffff;font-size: 16px;padding: 46px 20px;line-height: 24px;border-radius: 100%;text-align: center;background: #043d72;color: #ffffff;font-weight: 600;}
.about-section .left-side .skill-tag span {font-size: 30px;font-weight: 700;color: #fff;}
.about-section .left-side .left-pattern {position: absolute;content: '';left: -170px;top: 50%;transform: translateY(-50%);z-index: -1;border-radius: 0;}
.sec-title {position: relative;margin-bottom: 30px;}
.sec-title .sub-title {color: #89000e;text-transform: uppercase;font-size: 22px;font-weight: 500;margin-bottom: 14px;}
.sec-title h2 {font-size: 40px;line-height: 50px;font-weight: 700;color: #0a1947;margin-bottom: 26px;}
.sec-title .left-line-v {border-left: 4px solid #f00;padding-left: 20px;}
.about-section .pattern-img .left-pattern {position: absolute;content: '';top: 20px;right: 0;z-index: -1;}
ul.services li {font-weight: 500;color: #454545;margin-bottom: 18px;transition: all 0.3s ease;display: inline-block;}
ul.services li i {margin-right: 10px;}
ul.services li i:before {color: #043d72;font-size: 16px;font-weight: 700;}
ul.services {margin-bottom: 40px;}

/* product section */
.product-section {background-image: url(../images/blog-bg.jpg);}
.prd-list .single-list {margin-bottom: 30px;}
.prd-list .content {overflow: hidden;border-radius: 5px;}
.prd-list .content .overlay {position: absolute;right: 0;left: 0;top: 0;    bottom: -100px;display: flex;flex-wrap: wrap;align-items: flex-end;background: rgb(0 0 0 / 50%);padding: 30px; transition: 0.4s all; opacity: 0; }
.prd-list .content:hover .overlay {opacity: 1; bottom: 0;}
.prd-list .content .overlay h3 {color: #fff;display: block;width: 100%;font-size: 24px;margin-bottom: 20px;}
.prd-list .content .overlay a {width: 50px;height: 50px;background: #0a1947;color: #fff;border-radius: 100%;display: flex;align-items: center;justify-content: center;}
.prd-list .content .overlay a i {color: #fff;}
.prd-list .animation {position: absolute;left: 0;right: 0;width: 300%;height: 5px;background: #89000e;top: 0;}
.prd-list .animation span {background: #89000e;width: 30px;height: 5px;display: block;position: absolute;left: 50%;transform: translateX(-50%);}
.prd-list .animation span:after {height: 0; border-left: 15px solid transparent;border-right: 15px solid transparent;    border-top: 15px solid #89000e;content: '';display: block;}

/* inquiry section */
.inquiry-section {background-image: url(../images/inquiry-bg.png);}
.inquiry-section .map-area iframe {width: 100%;height: 400px;}
.contact-form {position: relative;}
.contact-form .from-control, .contact-form .from-control:focus {outline: none; color: #0a0a0a;border-color: #F1F1F1;background-color: #F1F1F1;padding: 17px 17px 17px 17px;border-style: solid;border-width: 0;width: 100%;max-width: 100%;opacity: 1;border-bottom: 2px solid #0a1947;}
.contact-form .mb-30 {margin-bottom: 30px;}
.contact-form .mb-35 {margin-bottom: 35px;}

/* footer */
.footer-top {background: #121212;}

.footer-top h3.title {font-size: 20px;line-height: 30px;font-weight: 600;color: #ffffff;letter-spacing: 0;position: relative;margin-bottom: 30px;text-transform: uppercase;padding-bottom: 14px;}
.footer-top h3.title:after {content: "";width: 50px;height: 4px;background: #89000e;position: absolute;bottom: -4px;right: 0;left: 0;margin-left: 0;border-radius: 0;-webkit-transition: all .3s ease;transition: all .3s ease;z-index: 0;}
.footer-top p, .footer-top a, .footer-top ul li {color: #fff;}

ul.social-link {margin-top: 20px;display: flex;flex-wrap: wrap;}

ul.social-link li {margin-right: 10px;}

ul.social-link a {width: 40px;height: 40px;border-radius: 3px;background: #081c2d;display: flex;align-items: center;justify-content: center;color: #fff;}

ul.social-link a i {color: #fff;}

.footer-top .usefull-link li {margin-bottom: 24px;}

.copyright-footer {background: #081c2d;padding: 20px 0;}
.footer-top .contact-info li {margin-bottom: 30px;display: flex;align-items: flex-start;}
.footer-top .contact-info .icon {width: 40px;color: #fff;}
.footer-top .contact-info .info {color: #fff;width: calc(100% - 40px);padding-left: 10px;}
.footer-top .contact-info .icon i {color: #fff;font-size: 18px;}

.copyright-footer .text-center, .copyright-footer .text-center a {color: #fff;font-size: 18px;}
#button {position: fixed;right: 15px;opacity: 0;bottom: 15px;z-index: 99;display: flex;align-items: center;justify-content: center;background: #89000e;color: #fff;border-radius: 100%;width: 50px;height: 50px; cursor: pointer; }
#button::after {content: "\f077";font-family: FontAwesome;font-weight: normal;font-style: normal;font-size: 16px;line-height: 50px;color: #fff;}
#button.show {opacity: 1;}
.inquiry-btn {position: fixed;top: 40%;right: 0; font-family: 'Kanit', sans-serif !important; z-index: 99;text-transform: uppercase; padding: 16px; display: none; background-color: #043d72; border-color: #043d72; }
.inquiry-btn.show {display: inline-block;}

.animated {
	animation-duration: 2.5s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;
}


.linesDraw {-webkit-animation-name: linesDraw;animation-name: linesDraw;}
.flash {-webkit-animation-name: flash;animation-name: flash;}

.other-page-banner {
    min-height: 350px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.other-page-banner:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgb(0 0 0 / 60%);
}

.other-page-banner > div {
    width: 100%;
    padding: 15px;
	position: relative;
	z-index: 1;
}

.other-page-banner h3 {
    font-size: 42px;
	color: #fff;
}

.other-page-section {
    padding: 70px 0;
}

.contact-table td {
    line-height: 38px;
}
.prd-list .img-wrapper {
    position: relative;
    border: 1px solid #000;
    border-radius: 5px;
    overflow: hidden;
}

.prd-list .single-item {
    margin-bottom: 30px;
}


@-webkit-keyframes flash {
	from, 20%, to {
	  opacity: 1;
	}
  
	25%, 75% {
	  opacity: 0;
	}
  }
  
@keyframes flash {
	from, 50%, to {
		opacity: 1;
	}

	25%, 75% {
		opacity: 0;
	}
}


  
@keyframes linesDraw {
	0% {
	   margin-left: 0px;
	}
	100% {
	   margin-left: -200%;
	}
   
}
   
   
   
@-webkit-keyframes linesDraw {
	0% {
	  margin-left: 0px;
	}
	100% {
	  margin-left: -200%;
	}
   
}
  

@media only screen and (max-width: 767px) {
	ul.main-menu {display: none;position: absolute;width: 100%;left: 0;right: 0;background: #fff;z-index: 99;top: 100%;text-align: center;}
	.toggle-icon {    width: fit-content; margin-left: auto; }
}