body { background: #fff; color: #666; font-size:14px; font-family: "Noto Sans Thai UI", sans-serif; } a { color: #383838;  transition: 0.5s; } a:hover, a:active, a:focus { color: #ca2826; outline: none; text-decoration: none; } p { padding: 0; margin: 0 0 15px 0; } h1, h2, h3, h4, h5, h6 { font-family: "Noto Sans Thai UI", sans-serif; font-weight: 400; margin: 0 0 20px 0; padding: 0; } /* Back to top button */ .back-to-top { position: fixed; display: none; background: #007bff; color: #fff; width: 44px; height: 44px; text-align: center; line-height: 1; font-size: 16px; border-radius: 50%; right: 15px; bottom: 15px; transition: background 0.5s; z-index: 11; } .back-to-top i { padding-top: 12px; color: #fff; } /* Prelaoder */ #preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; overflow: hidden; background: #fff; } #preloader:before { content: ""; position: fixed; top: calc(50% - 30px); left: calc(50% - 30px); border: 6px solid #f2f2f2; border-top: 6px solid #ffee05; border-radius: 50%; width: 60px; height: 60px; -webkit-animation: animate-preloader 1s linear infinite; animation: animate-preloader 1s linear infinite; } @-webkit-keyframes animate-preloader { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes animate-preloader { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /*--------------------------------------------------------------
 # Header
 --------------------------------------------------------------*/ .top-header { background-color: #ca2826; text-align: right; height: 30px; color: #FFF; padding-top :5px; padding-right: 15px; } .text-top { text-align:right; padding-left: 25px; padding-right: 10px; } .top-header > .text-social >a { color: #FFF; } .text-social { 	text-align:right; padding-left: 15px; padding-right: 5px; } .fixed-top-new{ 	position: fixed; right: 0; left: 0; } .social-link{ max-height: 28px; } .social-link-footer{ max-height: 45px; } #header { height: 80px; transition: all 0.5s; z-index: 997; transition: all 0.5s; padding: 10px 0; padding-top:20px; background: #ffee05; background-image: linear-gradient(to top, #ffee05 , #fffa4e); box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.3); font-size: 16px; font-weight: 500; } #header .logo img { padding: 0; margin: -20px 0; max-height: 80px; transition: ease all 0.3s; } #header.header-scrolled .logo img { padding: 0; margin: -10px 0; max-height: 60px; transition: ease all 0.3s;  } #header.header-scrolled, #header.header-pages { height: 60px; position: fixed; top: 0; padding-top:10px; /* font-size: 15px; */ font-weight: normal; } #header .logo h1 { font-size: 36px; margin: 0; padding: 0; line-height: 1; font-weight: 400; letter-spacing: 3px; text-transform: uppercase; } #header .logo h1 a, #header .logo h1 a:hover { color: #00366f; text-decoration: none; } .main-pages { margin-top: 60px; } /*--------------------------------------------------------------
 # Intro Section
 --------------------------------------------------------------*/ #intro { width: 100%; position: relative; background: url("../img/intro-bg.png") center bottom no-repeat; background-size: cover; padding: 200px 0 200px 0; } #intro .intro-img { width: 50%; float: right; } #intro .intro-info { width: 50%; float: left; } #intro .intro-info h2 { color: #fff; margin-bottom: 40px; font-size: 48px; font-weight: 700; } #intro .intro-info h2 span { color: #74b5fc; text-decoration: underline; } #intro .intro-info .btn-get-started, #intro .intro-info .btn-services { font-family: "Noto Sans Thai UI", sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 1px; display: inline-block; padding: 10px 32px; border-radius: 50px; transition: 0.5s; margin: 0 20px 20px 0; color: #fff; } #intro .intro-info .btn-get-started { background: #007bff; border: 2px solid #007bff; color: #fff; } #intro .intro-info .btn-get-started:hover { background: none; border-color: #fff; color: #fff; } #intro .intro-info .btn-services { border: 2px solid #fff; } #intro .intro-info .btn-services:hover { background: #007bff; border-color: #007bff; color: #fff; } /*--------------------------------------------------------------
 # Navigation Menu
 --------------------------------------------------------------*/ /* Desktop Navigation */ .main-nav { /* Drop Down */ /* Deep Drop Down */ } .main-nav, .main-nav * { margin: 0; padding: 0; list-style: none; } .main-nav > ul > li { position: relative; white-space: nowrap; float: left; } .main-nav a { display: block; position: relative; color: #930c0a; padding: 8px 11px; transition: 0.3s; font-family: "Noto Sans Thai UI", sans-serif; } .main-nav a:hover, .main-nav .active > a, .main-nav li:hover > a { color: #ca2826; text-decoration: none;     } .main-nav .drop-down ul { display: block; position: absolute; left: 0; top: calc(100% + 30px); z-index: 99; opacity: 0; visibility: hidden; padding: 10px 0; background: #fff; box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25); transition: ease all 0.3s; } .main-nav .drop-down:hover > ul { opacity: 1; top: 100%; visibility: visible; } .main-nav .drop-down li { min-width: 180px; position: relative; } .main-nav .drop-down ul a { padding: 10px 20px; font-size: 16px; color: #930c0a; } .main-nav .drop-down ul a:hover, .main-nav .drop-down ul .active > a, .main-nav .drop-down ul li:hover > a { color: #ca2826; } .main-nav .drop-down > a:after { content: "\f107"; font-family: FontAwesome; padding-left: 10px; } .main-nav .drop-down .drop-down ul { top: 0; left: calc(100% - 30px); } .main-nav .drop-down .drop-down:hover > ul { opacity: 1; top: 0; left: 100%; } .main-nav .drop-down .drop-down > a { padding-right: 35px; } .main-nav .drop-down .drop-down > a:after { content: "\f105"; position: absolute; right: 15px; } /* Mobile Navigation */ .mobile-nav { position: fixed; top: 0; bottom: 0; z-index: 9999; overflow-y: auto; left: -260px; width: 260px; padding-top: 18px; background: rgba(255, 238, 5, 0.9); transition: 0.4s; } .mobile-nav * { margin: 0; padding: 0; list-style: none; } .mobile-nav a { display: block; position: relative; color: #930c0a; padding: 10px 20px; font-weight: 500; } .mobile-nav a:hover, .mobile-nav .active > a, .mobile-nav li:hover > a { color: #ca2826; text-decoration: none; } .mobile-nav .drop-down > a:after { content: "\f078"; font-family: FontAwesome; padding-left: 10px; position: absolute; right: 15px; } .mobile-nav .active.drop-down > a:after { content: "\f077"; } .mobile-nav .drop-down > a { padding-right: 35px; } .mobile-nav .drop-down ul { display: none; overflow: hidden; } .mobile-nav .drop-down li { padding-left: 20px; } .mobile-nav-toggle { position: fixed; right: 0; top: 0; z-index: 9998; border: 0; background: none; font-size: 34px; transition: all 0.4s; outline: none !important; line-height: 1; cursor: pointer; text-align: right; } .mobile-nav-toggle-scrolled { position: fixed; right: 0; top: 0; z-index: 9998; border: 0; background: none; font-size: 24px; transition: all 0.4s; outline: none !important; line-height: 1; cursor: pointer; text-align: right; } .mobile-nav-toggle i { margin: 18px 18px 0 0; color: #930c0a; } .mobile-nav-overly { width: 100%; height: 100%; z-index: 9997; top: 0; left: 0; position: fixed; background: rgba(19, 39, 57, 0.8); overflow: hidden; display: none; } .mobile-nav-active { overflow: hidden; } .mobile-nav-active .mobile-nav { left: 0; } .mobile-nav-active .mobile-nav-toggle i { color: #fff; } /*--------------------------------------------------------------
 # Sections
 --------------------------------------------------------------*/ /* Sections Header
 --------------------------------*/ .section-header h3 { font-size: 2.2rem; color: #004a99; text-align: center; font-weight: 600; position: relative; margin-bottom: 25px; }.section-header h3::after { content: ""; height: 3px; width: 200px; background-color: #CCC; position: absolute; bottom: -.2em; left: 50%; transform: translate(-50%); } @media only screen and (min-width:768px) { 	.section-header h3 { font-size: 3.2rem; color: #004a99; text-align: center; font-weight: 600; position: relative; letter-spacing: 2px;	margin-bottom: 50px; 	}.section-header h3::after { content: ""; height: 3px; width: 200px; background-color: #CCC; position: absolute; bottom: -.2em; left: 50%; transform: translate(-50%); 	} } .section-headerx h3 { font-size: 1.5rem; color: #004a99; text-align: center; font-weight: 600; position: relative; margin-bottom: 25px; } @media only screen and (min-width:768px) { 	.section-headerx h3 { font-size: 3.2rem; color: #004a99; text-align: center; font-weight: 600; position: relative; letter-spacing: 2px;	margin-bottom: 50px; 	} } .section-header p { text-align: center; margin: auto; font-size: 15px; padding-bottom: 30px; color: #556877; width: 50%; } /* Section with background
 --------------------------------*/ .section-bg { background: #ecf5ff; } /* About Us Section
 --------------------------------*/ #about { background: #fff; padding: 60px 0; } #about .about-container .background { margin: 20px 0; } #about .about-container .content { background: #fff; } #about .about-container .title { color: #333; font-weight: 700; font-size: 32px; } #about .about-container p { line-height: 26px; } #about .about-container p:last-child { margin-bottom: 0; } #about .about-container .icon-box { background: #fff; background-size: cover; padding: 0 0 30px 0; } #about .about-container .icon-box .icon { float: left; background: #fff; width: 64px; height: 64px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; text-align: center; border-radius: 50%; border: 2px solid #007bff; transition: all 0.3s ease-in-out; } #about .about-container .icon-box .icon i { color: #007bff; font-size: 24px; } #about .about-container .icon-box:hover .icon { background: #007bff; } #about .about-container .icon-box:hover .icon i { color: #fff; } #about .about-container .icon-box .title { margin-left: 80px; font-weight: 600; margin-bottom: 5px; font-size: 18px; } #about .about-container .icon-box .title a { color: #283d50; } #about .about-container .icon-box .description { margin-left: 80px; line-height: 24px; font-size: 14px; } #about .about-extra { padding-top: 40px; } #about .about-extra h4 { font-weight: 600; font-size: 24px; } /* Services Section
 --------------------------------*/ #services { padding: 20px 0 20px 0; box-shadow: inset 0px 0px 12px 0px rgba(0, 0, 0, 0.1); } @media only screen and (min-width:768px) { 	#services { padding: 40px 0 40px 0; box-shadow: inset 0px 0px 12px 0px rgba(0, 0, 0, 0.1); 	} } #services .box { padding: 30px; position: relative; overflow: hidden; border-radius: 0px; margin: 0 0px 40px 0px;transition: all 0.3s ease-in-out; } /* #services .box:hover { -webkit-transform: translateY(-5px); transform: translateY(-5px); } */ #services .icon { position: absolute;  /*  left: -10px; */ left: 20px; top: calc(50% - 32px); } #services .icon i { font-size: 64px; line-height: 1; transition: 0.5s; } #services .title { margin-left: 40px; font-weight: 700; margin-bottom: 15px; font-size: 16px; } #services .title a { color: #111; } #services .box:hover .title a { color: #007bff; } #services .topdetail { font-size: 22px; line-height: 32px; margin-bottom: 0; letter-spacing:2px; color: #444; } #services .topdetailx { font-size: 18px; line-height: 32px; margin-bottom: 0; letter-spacing:2px; color: #444; } @media only screen and (min-width:768px) { 	#services .topdetailx { font-size: 32px; line-height: 42px; margin-bottom: 0; letter-spacing:2px; color: #444; 	} } #services .description { font-size: 18px; margin-left: 40px; line-height: 24px; margin-bottom: 0; color: #444; } #services h4 { font-size: 20px; color: #444; letter-spacing:1px; } #why-us { padding: 20px 0; background: #004a99; } @media only screen and (min-width:768px) { 	#why-us { padding: 40px 0; background: #004a99; 	} } #why-us .section-header h3, #why-us .section-header p { color: #fff; } #why-us .card { background: #00458f; border-color: #00458f; border-radius: 10px; margin: 0 15px; padding: 15px 0; text-align: center; color: #fff; transition: 0.3s ease-in-out; height: 100%; } #why-us .card:hover { background: #003b7a; border-color: #003b7a; } #why-us .card i { font-size: 48px; padding-top: 15px; color: #bfddfe; } #why-us .card h5 { font-size: 22px; font-weight: 600; } #why-us .card p { font-size: 15px; color: #d8eafe; } #why-us .card .readmore { color: #fff; font-weight: 600; display: inline-block; transition: 0.3s ease-in-out; border-bottom: #00458f solid 2px; } #why-us .card .readmore:hover { border-bottom: #fff solid 2px; } #why-us .counters { padding-top: 40px; } #why-us .counters span { font-family: "Noto Sans Thai UI", sans-serif; font-weight: bold; font-size: 48px; display: block; color: #000000; } #why-us .counters p { padding: 0; margin: 0 0 20px 0; font-family: "Noto Sans Thai UI", sans-serif; font-size: 14px; color: #FFF; } /* Portfolio Section
 --------------------------------*/ #portfolio { padding: 40px 0; box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1); } @media only screen and (min-width:768px) { 	#portfolio { padding: 60px 0; box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1); 	} } #portfolio #portfolio-flters { padding: 0; margin: 5px 0 35px 0; list-style: none; text-align: center; } #portfolio #portfolio-flters li { cursor: pointer; margin: 15px 15px 15px 0; display: inline-block; padding: 6px 20px; font-size: 12px; line-height: 20px; color: #007bff; border-radius: 50px; text-transform: uppercase; background: #ecf5ff; margin-bottom: 5px; transition: all 0.3s ease-in-out; } #portfolio #portfolio-flters li:hover, #portfolio #portfolio-flters li.filter-active { background: #007bff; color: #fff; } #portfolio #portfolio-flters li:last-child { margin-right: 0; } #portfolio .portfolio-item { position: relative; margin-bottom: 30px; } #portfolio .portfolio-item .portfolio-wrap { overflow: hidden; position: relative; border-radius: 6px; margin: 0; } #portfolio .portfolio-item .portfolio-wrap:hover img { opacity: 0.6; transition: 0.3s; } #portfolio .portfolio-item .portfolio-wrap .portfolio-info { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; text-align: center; opacity: 0; transition: 0.2s linear; } #portfolio .portfolio-item .portfolio-wrap .portfolio-info h4 { font-size: 22px; line-height: 1px; font-weight: 700; margin-bottom: 14px; padding-bottom: 0; } #portfolio .portfolio-item .portfolio-wrap .portfolio-info h4 a { color: #fff; } #portfolio .portfolio-item .portfolio-wrap .portfolio-info h4 a:hover { color: #007bff; } #portfolio .portfolio-item .portfolio-wrap .portfolio-info p { padding: 0; margin: 0; color: #e2effe; font-weight: 500; font-size: 14px; text-transform: uppercase; } #portfolio .portfolio-item .portfolio-wrap .portfolio-info .link-preview, #portfolio .portfolio-item .portfolio-wrap .portfolio-info .link-details { display: inline-block; line-height: 1; text-align: center; width: 36px; height: 36px; background: #007bff; border-radius: 50%; margin: 10px 4px 0 4px; } #portfolio .portfolio-item .portfolio-wrap .portfolio-info .link-preview i, #portfolio .portfolio-item .portfolio-wrap .portfolio-info .link-details i { padding-top: 6px; font-size: 22px; color: #fff; } #portfolio .portfolio-item .portfolio-wrap .portfolio-info .link-preview:hover, #portfolio .portfolio-item .portfolio-wrap .portfolio-info .link-details:hover { background: #3395ff; } #portfolio .portfolio-item .portfolio-wrap .portfolio-info .link-preview:hover i, #portfolio .portfolio-item .portfolio-wrap .portfolio-info .link-details:hover i { color: #fff; } #portfolio .portfolio-item .portfolio-wrap:hover { background: #b77717; } #portfolio .portfolio-item .portfolio-wrap:hover .portfolio-info { opacity: 1; } /*news*/ .card-news{height: 100%; background: #ffe100;border: #ffe100 4px solid; overflow: hidden; position: relative; box-shadow: 0px 0px 5px 1px rgba(204,204,204,0.46);border-radius:0px; }.card-news2{height: 100%; background: #FFF; overflow: hidden; position: relative; box-shadow: 0px 0px 5px 1px rgba(204,204,204,0.46);border-radius:0px; } .card-news2:hover{box-shadow: 0px 0px 5px 1px #CCC;} .card-news:hover{box-shadow: 0px 0px 5px 1px #ffe100;} .news-title{padding:10px;} .news-link-box{ background: linear-gradient(to right, #383838,#383838); -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: 0.5s; } .news-link-box:hover,.news-link-box:active,.news-link-box:focus{ background: linear-gradient(to right, #ca2826,red); -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: 0.5s; } /* Testimonials Section
 --------------------------------*/ #testimonials { padding: 60px 0; box-shadow: inset 0px 0px 12px 0px rgba(0, 0, 0, 0.1); } #testimonials .section-header { margin-bottom: 40px; } #testimonials .testimonial-item .testimonial-img { width: 120px; border-radius: 50%; border: 4px solid #fff; float: left; } #testimonials .testimonial-item h3 { font-size: 20px; font-weight: bold; margin: 10px 0 5px 0; color: #111; margin-left: 140px; } #testimonials .testimonial-item h4 { font-size: 14px; color: #999; margin: 0 0 15px 0; margin-left: 140px; } #testimonials .testimonial-item p { font-style: italic; margin: 0 0 15px 140px; } #testimonials .owl-nav, #testimonials .owl-dots { margin-top: 5px; text-align: center; } #testimonials .owl-dot { display: inline-block; margin: 0 5px; width: 12px; height: 12px; border-radius: 50%; background-color: #ddd; } #testimonials .owl-dot.active { background-color: #ca2826; } /* Team Section
 --------------------------------*/ #team { background: #fff; padding: 60px 0; box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1); } #team .member { text-align: center; margin-bottom: 20px; position: relative; border-radius: 50%; overflow: hidden; } #team .member .member-info { opacity: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; position: absolute; bottom: 0; top: 0; left: 0; right: 0; transition: 0.2s; } #team .member .member-info-content { margin-top: 50px; transition: margin 0.2s; } #team .member:hover .member-info { background: rgba(0, 62, 128, 0.7); opacity: 1; transition: 0.4s; } #team .member:hover .member-info-content { margin-top: 0; transition: margin 0.4s; } #team .member h4 { font-weight: 700; margin-bottom: 2px; font-size: 18px; color: #fff; } #team .member span { font-style: italic; display: block; font-size: 13px; color: #fff; } #team .member .social { margin-top: 15px; } #team .member .social a { transition: none; color: #fff; } #team .member .social a:hover { color: #007bff; } #team .member .social i { font-size: 18px; margin: 0 2px; } /* Clients Section
 --------------------------------*/ #clients { padding: 60px 0; box-shadow: inset 0px 0px 12px 0px rgba(0, 0, 0, 0.1); } #clients .clients-wrap { border-top: 1px solid #d6eaff; border-left: 1px solid #d6eaff; margin-bottom: 30px; } #clients .client-logo { padding: 20px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; border-right: 1px solid #d6eaff; border-bottom: 1px solid #d6eaff; overflow: hidden; background: #fff;  /*  height: 168px; */ } #clients .client-logo:hover img { -webkit-transform: scale(1.1); transform: scale(1.1); } 
 #clients .client-logo2 { padding: 20px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; overflow: hidden; /*  height: 168px; */ } 
 #clients .client-logo2:hover img { -webkit-transform: scale(1.1); transform: scale(1.1); } 
 #clients img { transition: all 0.4s ease-in-out; } /* Contact Section
 --------------------------------*/ #contact { box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1); padding: 60px 0; overflow: hidden; } #contact .section-header { padding-bottom: 30px; } #contact .contact-about h3 { font-size: 36px; margin: 0 0 10px 0; padding: 0; line-height: 1; font-family: "Noto Sans Thai UI", sans-serif; font-weight: 300; letter-spacing: 3px; text-transform: uppercase; color: #007bff; } #contact .contact-about p { font-size: 14px; line-height: 24px; font-family: "Noto Sans Thai UI", sans-serif; color: #888; } #contact .social-links { padding-bottom: 20px; } #contact .social-links a { font-size: 18px; display: inline-block; background: #fff; color: #007bff; line-height: 1; padding: 8px 0; margin-right: 4px; border-radius: 50%; text-align: center; width: 36px; height: 36px; transition: 0.3s; border: 1px solid #007bff; } #contact .social-links a:hover { background: #007bff; color: #fff; } #contact .info { color: #283d50; } #contact .info i { font-size: 24px; color: #007bff; float: left; margin-left:10px; margin-right:5px; } #contact .info p { padding: 5px 0 0px 24px; line-height: 28px; font-size: 14px; } #contact .form #sendmessage { color: #007bff; border: 1px solid #007bff; display: none; text-align: center; padding: 15px; font-weight: 600; margin-bottom: 15px; } #contact .form #errormessage { color: red; display: none; border: 1px solid red; text-align: center; padding: 15px; font-weight: 600; margin-bottom: 15px; } #contact .form #sendmessage.show, #contact .form #errormessage.show, #contact .form .show { display: block; } #contact .form .validation { color: red; display: none; margin: 0 0 20px; font-weight: 400; font-size: 13px; } #contact .form input, #contact .form textarea { border-radius: 0; box-shadow: none; font-size: 14px; } #contact .form button[type="submit"] { background: #007bff; border: 0; border-radius: 20px; padding: 8px 30px; color: #fff; transition: 0.3s; } #contact .form button[type="submit"]:hover { background: #0067d5; cursor: pointer; } /*--------------------------------------------------------------
 # Footer
 --------------------------------------------------------------*/ #footer { background: #ffee05; padding: 0 0 15px 0; color: #888; font-size: 14px; } #footer .footer-top { background: #202020; padding: 60px 0 30px 0; } #footer .footer-top .footer-info { margin-bottom: 30px; } #footer .footer-top .footer-info h3 { font-size: 34px; margin: 0 0 20px 0; padding: 2px 0 2px 0; line-height: 1; font-family: "Noto Sans Thai UI", sans-serif; color: #b77717; font-weight: 400; letter-spacing: 3px; text-transform: uppercase; } #footer .footer-top .footer-info p { font-size: 13px; line-height: 24px; margin-bottom: 0; font-family: "Noto Sans Thai UI", sans-serif; } #footer .footer-top .social-links a { font-size: 18px; display: inline-block; background: #007bff; color: #fff; line-height: 1; padding: 8px 0; margin-right: 4px; border-radius: 50%; text-align: center; width: 36px; height: 36px; transition: 0.3s; } #footer .footer-top .social-links a:hover { background: #0067d5; color: #fff; } #footer .footer-top h4 { font-size: 18px; font-weight: bold; color: #b77717; text-transform: uppercase; position: relative; padding-bottom: 10px; } #footer .footer-top .footer-links { margin-bottom: 30px; } #footer .footer-top .footer-links ul { list-style: none; padding: 0; margin: 0; } #footer .footer-top .footer-links ul li { padding: 8px 0; } #footer .footer-top .footer-links ul li:first-child { padding-top: 0; } #footer .footer-top .footer-links ul a { color: #ecf5ff; } #footer .footer-top .footer-links ul a:hover { color: #ffee05; } #footer .footer-top .footer-contact { margin-bottom: 30px; } #footer .footer-top .footer-contact p { line-height: 26px; } #footer .footer-top .footer-newsletter { margin-bottom: 30px; } #footer .footer-top .footer-newsletter input[type="email"] { border: 0; padding: 6px 8px; width: 65%; } #footer .footer-top .footer-newsletter input[type="submit"] { background: #007bff; border: 0; width: 35%; padding: 6px 0; text-align: center; color: #fff; transition: 0.3s; cursor: pointer; } #footer .footer-top .footer-newsletter input[type="submit"]:hover { background: #0062cc; } #footer .copyright { text-align: center; padding-top: 16px;
 color: #930c0a; } #footer .credits { text-align: center; font-size: 14px; color: #930c0a; } #footer .credits a { color: #bfddfe; } #footer .credits a:hover { color: #f1f7ff; } /*--------------------------------------------------------------
 # Responsive Media Queries
 --------------------------------------------------------------*/ @media (min-width: 992px) { #testimonials .testimonial-item p { width: 80%; } } @media (max-width: 991px) { #header { height: 80px; padding: 10px 0; } 	#header .logo img { padding: 0; margin: -10px 0; max-height: 80px; 	} #header .logo h1 { font-size: 28px; padding: 8px 0; } #intro { padding: 140px 0 60px 0; } #intro .intro-img { width: 80%; float: none; margin: 0 auto 25px auto; } #intro .intro-info { width: 80%; float: none; margin: auto; text-align: center; } #why-us .card { margin: 0; } } @media (max-width: 768px) { .back-to-top { bottom: 15px; } } @media (max-width: 767px) { #intro .intro-info { width: 100%; } #intro .intro-info h2 { font-size: 34px; margin-bottom: 30px; } .section-header p { width: 100%; } #testimonials .testimonial-item { text-align: center; } #testimonials .testimonial-item .testimonial-img { float: none; margin: auto; } #testimonials .testimonial-item h3, #testimonials .testimonial-item h4, #testimonials .testimonial-item p { margin-left: 0; } } @media (max-width: 574px) { #intro { padding: 100px 0 20px 0; } }
 /* Validation */
 label.error {
 color: #cc5965;
 display: inline-block;
 margin-left: 5px;
 }
 .req {
 color: red;
 }
 .form-control.error {
 border: 1px dotted #cc5965;
 } .scrollto{ 	font-size: 1.2rem; } #highligth { padding-top: 43px; } @media (min-width: 768px) { #highligth { padding-top: 67px; } } @media (min-width: 992px) { #highligth { padding-top: 75px; } } @media (min-width: 1200px) { #highligth { padding-top: 70px; } } @media (min-width: 1400px) { #highligth { padding-top: 90px; } } #highligth #carousel_highligth { height: 100%; } #highligth #carousel_highligth .item { position: relative; width: 100%; height: 100%; } @media (min-width: 1200px) { #highligth #carousel_highligth .item > img { display: none; } } #highligth #carousel_highligth .item .img_bg { width: 100%; height: 100%; display: none; background-position: center center; background-size: cover; } @media (min-width: 1200px) { #highligth #carousel_highligth .item .img_bg { display: block; } } #highligth #carousel_highligth .item .content { position: absolute; top: 5%; left: 3.125%; background: rgba(255, 255, 255, 0.8); padding: 10px; width: 210px; } @media (min-width: 768px) { #highligth #carousel_highligth .item .content { width: 400px; padding: 24px; font-size: 20px; } } @media (min-width: 1200px) { #highligth #carousel_highligth .item .content { left: 50%; margin-left: -585px; font-size: 23px; line-height: 1em; } } #highligth #carousel_highligth .item .content h3 { margin: 0; padding: 0; text-transform: uppercase; color: #fdbc00; margin-bottom: 0.2em; font-family: 'db_heaventbold'; position: relative; padding-bottom: 0.2em; } #highligth #carousel_highligth .item .content h3:after { content: "_"; position: absolute; bottom: 0; left: 0; right: auto; } @media (min-width: 768px) { #highligth #carousel_highligth .item .content h3 { font-size: 53px; line-height: 0.8em; } } #highligth #carousel_highligth .item .content h3 a { text-decoration: none; color: #fdbc00; } #highligth #carousel_highligth .item .content .btn { background-color: #000b38; color: #ffffff; text-transform: uppercase; padding-left: 20px; padding-right: 20px; position: relative; line-heigth: 1em; } #highligth #carousel_highligth .item .content .btn:after { content: ""; position: absolute; top: 10px; left: 10px; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 5px; border-color: transparent transparent transparent #ffffff; } #highligth #carousel_highligth .owl-controls { position: absolute; bottom: 5px; left: 0; width: 100%; text-align: center; } @media (min-width: 768px) { #highligth #carousel_highligth .owl-controls { bottom: 10px; } } @media (min-width: 1200px) { #highligth #carousel_highligth .owl-controls { bottom: 20px; } } #highligth #carousel_highligth .owl-controls .owl-dots .owl-dot { display: inline-block; background: #b8b8b8; width: 6px; height: 6px; margin: 0 1px; border-bottom-left-radius: 6px; border-top-left-radius: 6px; border-bottom-right-radius: 6px; border-top-right-radius: 6px; } @media (min-width: 768px) { #highligth #carousel_highligth .owl-controls .owl-dots .owl-dot { width: 9.6px; height: 9.6px; border-bottom-left-radius: 9.6px; border-top-left-radius: 9.6px; border-bottom-right-radius: 9.6px; border-top-right-radius: 9.6px; } } #highligth #carousel_highligth .owl-controls .owl-dots .owl-dot.active { background: #fdbc00; } /* 2D TRANSITIONS */ /* Grow */ .grow { display: inline-block; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; -webkit-transition-property: transform; transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .grow:hover, .grow:focus, .grow:active { -webkit-transform: scale(1.05); transform: scale(1.05); } hr.style11 { border: 0;  height: 1px;  background-image: -webkit-linear-gradient(left, #f0f0f0, #cacaca, #f0f0f0); background-image: -moz-linear-gradient(left, #f0f0f0, #cacaca, #f0f0f0); background-image: -ms-linear-gradient(left, #f0f0f0, #cacaca, #f0f0f0); background-image: -o-linear-gradient(left, #f0f0f0, #cacaca, #f0f0f0);  } .breadcrumb-new{ 	background-color: #333;margin-bottom:50px; } .breadcrumb-new  .breadcrumb-item.active { 	color: #c8c8c8; } .breadcrumb-new  a { color: #ecf5ff; } .breadcrumb-new a:hover { color: #ffee05; } header.masthead {  background:no-repeat center center;  background-color:#868e96;  background-attachment:scroll;  position:relative;  background-size:cover } header.masthead .overlay {  position:absolute;  top:0;  left:0;  height:100%;  width:100%;  background-color:#212529;  opacity:.6 } header.masthead .page-heading, header.masthead .post-heading, header.masthead .site-heading {  padding:100px 0 150px;  color:#fff } @media only screen and (min-width:768px) {  header.masthead .page-heading,  header.masthead .post-heading,  header.masthead .site-heading { padding:160px 0  } } header.masthead .page-heading, header.masthead .site-heading {  text-align:center } header.masthead .page-heading h1, header.masthead .site-heading h1 {  font-size:50px;  margin-top:0 } header.masthead .page-heading .subheading, header.masthead .site-heading .subheading {  font-size:24px;  font-weight:300;  line-height:1.1;  display:block;  margin:10px 0 0;  font-family:"Noto Sans Thai UI", sans-serif; } @media only screen and (min-width:768px) {  header.masthead .page-heading h1,  header.masthead .site-heading h1 { font-size:80px  } } header.masthead .post-heading h1 {  font-size:35px } header.masthead .post-heading .meta, header.masthead .post-heading .subheading {  line-height:1.1;  display:block } header.masthead .post-heading .subheading {  font-size:24px;  font-weight:600;  margin:10px 0 30px;  font-family:"Noto Sans Thai UI", sans-serif; } header.masthead .post-heading .meta {  font-size:20px;  font-weight:300;  font-style:italic;  font-family:"Noto Sans Thai UI", sans-serif; } header.masthead .post-heading .meta a {  color:#fff } @media only screen and (min-width:768px) {  header.masthead .post-heading h1 { font-size:65px  }  header.masthead .post-heading .subheading { font-size:30px  } } .post-preview>a {  color:#212529 } .post-preview>a:focus, .post-preview>a:hover {  text-decoration:none;  color:#0085a1 } .post-preview>a>.post-title {  font-size:30px;  margin-top:30px;  margin-bottom:10px } .post-preview>a>.post-subtitle {  font-weight:300;  margin:0 0 10px } .post-preview>.post-meta {  font-size:18px;  font-style:italic;  margin-top:0;  color:#868e96 } .post-preview>.post-meta>a {  text-decoration:none;  color:#212529 } .post-preview>.post-meta>a:focus, .post-preview>.post-meta>a:hover {  text-decoration:underline;  color:#0085a1 } @media only screen and (min-width:768px) {  .post-preview>a>.post-title { font-size:36px  } } .news-detail > p{ 	font-size:16px; } .more:hover > strong{ 	color:#b77717; } .pdinglf20{ 	padding-left:20px; } hr.blue { border-top: 2px dashed #666; } .navbar .nav-menu li a img {  width:30px;  -webkit-transition:all .4s;  -moz-transition:all .4s;  -o-transition:all .4s;  transition:all .4s;  -ms-transition:all .4s } .navbar .nav-menu li a:hover img {  width:45px } .navbar{position:fixed;z-index:999;top:50%;right:10px;transform:translateY(-50%)} .navbar .nav-menu{margin:0;padding:0;list-style-type:none} .navbar .nav-menu li{position:relative;min-width:200px;text-align:right;min-height:30px} .navbar .nav-menu li .scroll{display:block;color:#fff;padding:5px 0} .navbar .nav-menu li .scroll::after{width:15px;height:15px;border:2px solid #004A99;right:-4px;transform:translateY(-50%) scale(0)} .navbar .nav-menu li .scroll.active::before,.navbar .nav-menu li:hover .scroll::before{background:#004A99;border-color:#004A99} .navbar .nav-menu li .scroll.active::after,.navbar .nav-menu li:hover .scroll::after{transform:translateY(-50%) scale(1);} .navbar .nav-menu li .scroll span{display:inline-block;opacity:0;font-size:14px;text-transform:capitalize;background-color:#004A99;padding:2px 20px;border-radius:3px;margin-right:30px;transform:translateX(20px);transition:all .3s ease} .navbar .nav-menu li .scroll span::before{display:block;position:absolute;content:'';border-left:7px solid #004A99;border-top:7px solid transparent;border-bottom:7px solid transparent;top:50%;transform:translate(5px,-50%);right:0;transition:all .3s ease} .navbar .nav-menu li .scroll.active span,.navbar .nav-menu li:hover .scroll span{transform:translateX(0px);opacity:1}