/* =====================================================
GENERAL
===================================================== */

html {
	scroll-behavior: smooth;
}
body {
	font-family: 'Prompt', sans-serif;
	font-size: 16px;
	line-height: 1.8;
	color: #333;
	background: #ffffff;
	overflow-x: hidden;
}
a {
	text-decoration: none;
	transition: .3s;
}
img {
	max-width: 100%;
	height: auto;
	display: block;
}
section {
	padding: 90px 0;
}
.section-subtitle {
	color: #ff7a00;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.section-title {
	font-size: 40px;
	font-weight: 700;
	color: #0F172A;
	margin-top: 10px;
	margin-bottom: 20px;
}
 @media(max-width:768px) {
.section-title {
	font-size: 30px;
}
}
/* =====================================================
BUTTON
===================================================== */

.btn {
	border-radius: 50px;
	padding: 14px 32px;
	font-weight: 600;
}
.btn-warning {
	background: #ff7a00;
	border: none;
	color: #fff;
}
.btn-warning:hover {
	background: #e56700;
	color: #fff;
}
.btn-success {
	background: #06C755;
	border: none;
}
.btn-success:hover {
	background: #04aa49;
}
/* =====================================================
HEADER
===================================================== */

.header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	background: #0B245C;
	transition: .35s;
	box-shadow: 0 8px 25px rgba(0,0,0,.10);
}
.header-wrap {
	height: 88px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
/* =====================================================
LOGO
===================================================== */

.logo {
	flex-shrink: 0;
}
.logo img {
	height: 58px;
	display: block;
}
/* =====================================================
DESKTOP MENU
===================================================== */

.main-menu {
	margin: 0 auto;
}
.main-menu ul {
	display: flex;
	align-items: center;
	gap: 34px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.main-menu a {
	color: #ffffff;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: .25s;
	position: relative;
}
.main-menu a:hover,  .main-menu a.active {
	color: #ff7a00;
}
.main-menu a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -8px;
	width: 0;
	height: 3px;
	background: #ff7a00;
	transition: .25s;
}
.main-menu a:hover::after,  .main-menu a.active::after {
	width: 100%;
}
/* =====================================================
RIGHT
===================================================== */

.header-right {
	flex-shrink: 0;
}
.call-btn {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #ff7a00;
	color: #fff;
	padding: 13px 24px;
	border-radius: 50px;
	font-weight: 700;
	text-decoration: none;
	transition: .25s;
}
.call-btn:hover {
	background: #e96b00;
	color: #fff;
	transform: translateY(-2px);
}
/* =====================================================
HAMBURGER
===================================================== */

.menu-toggle {
	display: none;
	width: 46px;
	height: 46px;
	border: none;
	background: none;
	cursor: pointer;
	padding: 0;
}
.menu-toggle span {
	display: block;
	width: 28px;
	height: 3px;
	background: #ffffff;
	margin: 6px auto;
	border-radius: 10px;
	transition: .30s;
}
.menu-toggle.active span:nth-child(1) {
	transform: translateY(9px) rotate(45deg);
}
.menu-toggle.active span:nth-child(2) {
	opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
	transform: translateY(-9px) rotate(-45deg);
}
/* =====================================================
MOBILE MENU
===================================================== */

.mobile-menu {
	position: fixed;
	top: 0;
	right: -320px;
	width: 300px;
	max-width: 85%;
	height: 100vh;
	background: #ffffff;
	z-index: 1200;
	transition: .35s;
	padding: 110px 30px 40px;
	overflow-y: auto;
	box-shadow: -5px 0 25px rgba(0,0,0,.15);
}
.mobile-menu.active {
	right: 0;
}
.mobile-menu nav {
	display: flex;
	flex-direction: column;
}
.mobile-menu a {
	color: #08245C;
	text-decoration: none;
	font-size: 18px;
	font-weight: 600;
	padding: 15px 0;
	border-bottom: 1px solid #eeeeee;
}
.mobile-menu a:hover {
	color: #ff7a00;
}
.mobile-call {
	margin-top: 30px;
	background: #ff7a00;
	color: #fff !important;
	border-radius: 50px;
	padding: 16px;
	text-align: center;
	border: none !important;
}
/* =====================================================
OVERLAY
===================================================== */

.menu-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.45);
	opacity: 0;
	visibility: hidden;
	transition: .30s;
	z-index: 1100;
}
.menu-overlay.active {
	opacity: 1;
	visibility: visible;
}
/* =====================================================
SCROLLED
===================================================== */

.header.scrolled {
	background: #08111f;
	box-shadow: 0 10px 28px rgba(0,0,0,.18);
}

/* =====================================================
TABLET
===================================================== */

@media(max-width:1199px) {
.main-menu {
	display: none;
}
.header-right {
	display: none;
}
.menu-toggle {
	display: block;
}
}

/* =====================================================
MOBILE
===================================================== */

@media(max-width:767px) {
.header-wrap {
	height: 78px;
}
.logo img {
	height: 48px;
}
.mobile-menu {
	width: 280px;
	padding-top: 95px;
}
.mobile-menu a {
	font-size: 17px;
}
}
/* =====================================================
HERO
===================================================== */

#hero {
	position: relative;
	overflow: hidden;
	min-height: 760px;
	padding: 0;
}
/* ---------- Hero Background ---------- */

.hero-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
	z-index: 1;
}
/* ---------- White Gradient Overlay ---------- */

.hero-overlay {
	position: relative;
	z-index: 2;
	min-height: 760px;
	display: flex;
	align-items: center;
	width: 100%;
	background: linear-gradient(  90deg,  rgba(255,255,255,.98) 0%,  rgba(255,255,255,.97) 28%,  rgba(255,255,255,.90) 42%,  rgba(255,255,255,.65) 52%,  rgba(255,255,255,.25) 60%,  rgba(255,255,255,0) 72%  );
}
 @media (min-width:768px) and (max-width:991px) {
.hero-overlay {
	background: linear-gradient(  90deg,  rgba(255,255,255,.98) 0%,  rgba(255,255,255,.97) 40%,  rgba(255,255,255,.92) 55%,  rgba(255,255,255,.78) 68%,  rgba(255,255,255,.45) 80%,  rgba(255,255,255,.12) 90%,  rgba(255,255,255,0) 100%  );
}
}
 @media (min-width:768px) and (max-width:991px) {
.hero-content {
	max-width: 52%;
	padding-left: 10px;
}
}
/* ---------- Content ---------- */

.hero-content {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: 560px;
	padding-top: 120px;
	padding-bottom: 80px;
}
/* ---------- Heading ---------- */

#hero h1 {
	font-size: 60px;
	font-weight: 800;
	line-height: 1.05;
	color: #08245C;
	margin-bottom: 18px;
}
#hero h1 span {
	color: #ff6b00;
}
/* ---------- Sub Heading ---------- */

.hero-subtitle {
	font-size: 20px;
	font-weight: 700;
	color: #08245C;
	line-height: 1.5;
	margin-bottom: 25px;
}
/* ---------- Description ---------- */

#hero p {
	font-size: 18px;
	line-height: 1.5;
	color: #4f5d75;
	margin-bottom: 35px;
}
/* ---------- Features ---------- */

.hero-features {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	margin-top: 40px;
	margin-bottom: 40px;
	max-width: 620px;
}
.hero-feature {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 0px 22px;
	background: rgba(255,255,255,.50);
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(0,0,0,.08);
	backdrop-filter: blur(8px);
}
.hero-feature i {
	font-size: 28px;
	color: #ff7a00;
}
.hero-feature span {
	font-size: 16px;
	font-weight: 600;
	color: #08245C;
}
 @media (max-width:767px) {
.hero-features {
	grid-template-columns: 1fr;
	gap: 14px;
}
}
/* =======================================
Hero Buttons
======================================= */

.hero-buttons {
	display: flex;
	gap: 18px;
	margin-top: 38px;
	margin-bottom: 42px;
	flex-wrap: wrap;
}
.btn-primary-hero {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-width: 260px;
	height: 62px;
	padding: 0 34px;
	border-radius: 999px;
	background: #ff7a00;
	color: #fff;
	text-decoration: none;
	font-size: 18px;
	font-weight: 700;
	line-height: 22px;
	box-shadow: 0 18px 35px rgba(255,122,0,.35);
	transition: .30s;
}
.btn-primary-hero:hover {
	color: #fff;
	background: #f36d00;
	transform: translateY(-4px);
	box-shadow: 0 22px 40px rgba(255,122,0,.45);
}
.btn-secondary-hero {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-width: 250px;
	height: 62px;
	padding: 0 34px;
	border-radius: 999px;
	background: #06C755;
	border: 2px solid #06C755;
	color: #ffffff;
	text-decoration: none;
	font-size: 18px;
	font-weight: 700;
	line-height: 22px;
	box-shadow: 0 18px 35px rgba(6,199,85,.30);
	transition: .30s;
}
.btn-secondary-hero:hover {
	background: #05b84d;
	border-color: #05b84d;
	color: #ffffff;
	transform: translateY(-4px);
	box-shadow: 0 22px 40px rgba(6,199,85,.40);
}
.btn-secondary-hero i {
	font-size: 22px;
}
 @media (max-width:767px) {
.hero-buttons {
	flex-direction: column;
	gap: 16px;
}
.btn-primary-hero, .btn-secondary-hero {
	width: 100%;
	min-width: 100%;
}
}
/* =====================================================
HERO IMAGE
===================================================== */

#hero img {
	border-radius: 0;
	box-shadow: none;
}


/* =====================================================
RESPONSIVE
===================================================== */

@media(max-width:991px) {
#hero {
	min-height: 650px;
}
.hero-overlay {
	min-height: 650px;
}
.hero-content {
	width: 100%;
	max-width: 100%;
	text-align: center;
	/*padding:0;*/
	padding-top: 20;
}
#hero h1 {
	font-size: 56px;
}
.hero-subtitle {
	font-size: 22px;
}
}
 @media(max-width:767px) {
#hero {
	min-height: 580px;
}
.hero-overlay {
	min-height: 580px;
	background: rgba(255,255,255,.85);
}
.hero-content {
	text-align: center;
	padding-top: 110px;
	padding-bottom: 60px;
}
#hero h1 {
	font-size: 42px;
}
.hero-subtitle {
	font-size: 20px;
}
#hero p {
	font-size: 17px;
}
.hero-feature {
	grid-template-columns: 1fr;
	gap: 14px;
}
.hero-buttons {
	flex-direction: column;
}
.hero-buttons a {
	width: 100%;
	margin: 5px 5px 5px 5px;
}
}
/* =====================================================
BADGE
===================================================== */

.badge {
	padding: 12px 22px;
	border-radius: 50px;
	font-size: 15px;
}
/* ==========================================
WHY US
========================================== */

#why-us {
	background: #07245b;
	padding: 70px 0;
}
.why-title {
	text-align: center;
	margin-bottom: 55px;
}
.why-title h2 {
	color: #fff;
	font-size: 32px;
	font-weight: 700;
}
.why-title span {
	color: #ff7a00;
}
.why-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
}
.why-item {
	text-align: center;
	padding: 0 18px;
	border-right: 1px solid rgba(255,255,255,.25);
}
.why-item:last-child {
	border-right: none;
}
.why-item i {
	font-size: 54px;
	color: #ff7a00;
	margin-bottom: 18px;
}
.why-item h3 {
	color: #fff;
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 12px;
}
.why-item p {
	color: rgba(255,255,255,.75);
	line-height: 1.7;
	margin: 0;
	font-size: 15px;
}
 @media (max-width:991px) {
.why-grid {
	grid-template-columns: repeat(3, 1fr);
	row-gap: 50px;
}
.why-item {
	border-right: none;
}
}
 @media (max-width:767px) {
#why-us {
	padding: 60px 0;
}
.why-title h2 {
	font-size: 24px;
}
.why-grid {
	grid-template-columns: repeat(2, 1fr);
	gap: 35px 20px;
}
.why-item {
	padding: 0;
}
.why-item i {
	font-size: 42px;
}
.why-item h3 {
	font-size: 18px;
}
.why-item p {
	font-size: 14px;
}
}
/* =====================================================
SERVICES
===================================================== */

#services {
	padding: 90px 0;
	background: #f6f8fb;
}
.section-header {
	text-align: center;
	margin-bottom: 55px;
}
.section-header h2 {
	position: relative;
	display: inline-block;
	color: #08245C;
	font-size: 42px;
	font-weight: 700;
	margin: 0;
}
.section-header h2::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -14px;
	transform: translateX(-50%);
	width: 72px;
	height: 4px;
	border-radius: 10px;
	background: #ff7a00;
}
/* ====================================== */

.services-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}
/* ====================================== */

.service-item {
	display: block;
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	text-decoration: none;
	box-shadow: 0 5px 16px rgba(0,0,0,.08);
	transition: .30s;
}
.service-item:hover {
	transform: translateY(-6px);
	box-shadow: 0 14px 28px rgba(0,0,0,.15);
}
/* ====================================== */

.service-photo {
	position: relative;
	overflow: hidden;
	height: 230px;
}
.service-photo img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
 @media (max-width:991px) {
.service-photo {
	height: 200px;
}
}
 @media (max-width:767px) {
.service-photo {
	height: 220px;
}
}
 @media (max-width:420px) {
.service-photo {
	height: 190px;
}
}
.service-item:hover img {
	transform: scale(1.05);
}
/* ====================================== */

.service-info {
	position: relative;
	display: flex;
	align-items: center;
	height: 72px;
	background: #fff;
	padding-left: 88px;
	padding-right: 20px;
}
/* ====================================== */

.service-icon {
	position: absolute;
	left: 18px;
	top: -18px;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: #ffffff;
	border: 2px solid #eef2f7;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 20px rgba(0,0,0,.10);
	transition: .35s;
	z-index: 5;
}
.service-icon i {
	font-size: 24px;
	color: #ff7a00;
	transition: .35s;
}
.service-item:hover .service-icon {
	background: #ff7a00;
	border-color: #ff7a00;
	transform: translateY(-3px);
}
.service-item:hover .service-icon i {
	color: #fff;
}
/* ====================================== */

.service-info h3 {
	margin: 0;
	color: #08245C;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
}

/* =====================================================
SERVICES RESPONSIVE
===================================================== */

/* -------------------------------
Large Desktop
-------------------------------- */

@media (min-width:1400px) {
.services-grid {
	gap: 22px;
}
}

/* -------------------------------
Tablet
-------------------------------- */

@media (max-width:991px) {
#services {
	padding: 70px 0;
}
.section-header {
	margin-bottom: 45px;
}
.section-header h2 {
	font-size: 38px;
}
.services-grid {
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
}
.service-photo {
	height: 180px;
}
.service-info {
	height: 68px;
	padding-left: 82px;
}
.service-icon {
	width: 64px;
	height: 64px;
	left: 16px;
	top: -18px;
}
.service-icon i {
	font-size: 26px;
}
.service-info h3 {
	font-size: 20px;
}
}

/* -------------------------------
Mobile
-------------------------------- */

@media (max-width:767px) {
#services {
	padding: 60px 0;
}
.section-header {
	margin-bottom: 35px;
}
.section-header h2 {
	font-size: 30px;
}
.services-grid {
	grid-template-columns: 1fr;
	gap: 18px;
}
.service-photo {
	height: 220px;
}
.service-info {
	height: 70px;
	padding-left: 84px;
	padding-right: 18px;
}
.service-icon {
	width: 62px;
	height: 62px;
	left: 16px;
	top: -18px;
}
.service-icon i {
	font-size: 24px;
}
.service-info h3 {
	font-size: 18px;
	line-height: 1.35;
}
}

/* -------------------------------
Small Mobile
-------------------------------- */

@media (max-width:420px) {
.service-photo {
	height: 190px;
}
.service-info {
	height: 66px;
	padding-left: 76px;
}
.service-icon {
	width: 56px;
	height: 56px;
}
.service-icon i {
	font-size: 22px;
}
.service-info h3 {
	font-size: 17px;
}
}
/* =====================================================
CTA
===================================================== */

.cta-section {
	background: #0F172A;
	color: #ffffff;
	padding: 90px 0;
}
.cta-section h2 {
	font-size: 40px;
	font-weight: 700;
	margin-bottom: 20px;
}
.cta-section p {
	color: #d9d9d9;
	margin-bottom: 35px;
}
.cta-section .btn {
	min-width: 220px;
}
/* =====================================================
SECTION SPACING
===================================================== */

#about, #why, #services {
	scroll-margin-top: 90px;
}


/* =====================================================
TABLET
===================================================== */

@media (max-width:991px) {
.service-box img {
	height: 220px;
}
.cta-section h2 {
	font-size: 34px;
}
}


/* =====================================================
MOBILE
===================================================== */

@media (max-width:767px) {
#about {
	text-align: center;
}
.why-box {
	padding: 30px 22px;
}
.service-box img {
	height: 220px;
}
.service-box h4 {
	font-size: 20px;
}
.cta-section {
	padding: 70px 20px;
}
.cta-section h2 {
	font-size: 28px;
}
.cta-section .btn {
	width: 100%;
	margin-bottom: 15px;
}
}
/* ===============================
   Portfolio
================================== */

.portfolio-section {
	padding: 90px 0;
	background: linear-gradient(135deg, #07255d, #0a2f72);
	position: relative;
}
.section-title {
	text-align: center;
	margin-bottom: 45px;
}
.section-title h2 {
	color: #fff;
	font-size: 42px;
	font-weight: 700;
	margin-bottom: -30px;
}
.section-title span {
	display: inline-block;
	width: 70px;
	height: 4px;
	background: #ff7a00;
	border-radius: 30px;
}
.portfolio-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
}
.portfolio-item {
	overflow: hidden;
	border-radius: 10px;
	display: block;
	background: #fff;
	box-shadow: 0 10px 25px rgba(0,0,0,.25);
}
.portfolio-item img {
	width: 100%;
	display: block;
	aspect-ratio: 4/3;
	object-fit: cover;
	transition: .4s;
}
.portfolio-item:hover img {
	transform: scale(1.08);
}
.btn-gallery {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #ff7a00;
	color: #fff;
	padding: 14px 32px;
	border-radius: 40px;
	font-size: 18px;
	font-weight: 600;
	text-decoration: none;
	transition: .3s;
}
.btn-gallery:hover {
	background: #ff8f1f;
	color: #fff;
	transform: translateY(-3px);
}
 @media(max-width:991px) {
.portfolio-grid {
	grid-template-columns: repeat(3, 1fr);
}
.section-title h2 {
	font-size: 38px;
}
}
 @media(max-width:576px) {
.portfolio-grid {
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}
.section-title h2 {
	font-size: 30px;
}
.btn-gallery {
	width: 100%;
	justify-content: center;
}
}
.portfolio-cta {
	text-align: center;
	margin-top: 50px;
}
.portfolio-cta h3 {
	color: #fff;
	font-size: 34px;
	font-weight: 700;
	margin-bottom: 15px;
}
.portfolio-cta p {
	color: rgba(255,255,255,.85);
	font-size: 18px;
	max-width: 700px;
	margin: 0 auto 30px;
	line-height: 1.8;
}
.btn-portfolio-cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: #ff7a00;
	color: #fff;
	text-decoration: none;
	padding: 16px 38px;
	border-radius: 50px;
	font-size: 18px;
	font-weight: 600;
	transition: .3s;
	box-shadow: 0 15px 35px rgba(255,122,0,.35);
}
.btn-portfolio-cta:hover {
	background: #ff9124;
	color: #fff;
	transform: translateY(-4px);
	box-shadow: 0 20px 40px rgba(255,122,0,.45);
}
/*==================================
  PROCESS
==================================*/

.process-section {
	padding: 90px 0;
	background: #fff;
}
.process-section .section-title h2 {
	color: #0a2f72 !important;
	font-size: 42px;
}
.process-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 10px;
}
.process-item {
	width: 18%;
	text-align: center;
	position: relative;
}
.process-number {
	width: 36px;
	height: 36px;
	background: #0a2f72;
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto -18px;
	font-weight: 700;
	font-size: 16px;
	position: relative;
	z-index: 3;
}
.process-icon {
	width: 90px;
	height: 90px;
	border: 2px solid #8fa7d8;
	border-radius: 50%;
	margin: 0 auto 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ff7a00;
	font-size: 42px;
	background: #fff;
}
.process-item h4 {
	font-size: 22px;
	color: #0a2f72;
	font-weight: 700;
	margin-bottom: 10px;
}
.process-item p {
	color: #555;
	line-height: 1.7;
	font-size: 16px;
}
.process-arrow {
	flex: 1;
	height: 2px;
	border-top: 2px dashed #1c3d84;
	position: relative;
	margin-top: 45px;
	max-width: 70px;
}
.process-arrow::after {
	content: "";
	position: absolute;
	right: -2px;
	top: -5px;
	border-left: 8px solid #1c3d84;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
}
 @media (max-width:991px) {
.process-wrapper {
	flex-wrap: wrap;
	justify-content: center;
	gap: 35px;
}
.process-section .section-title h2 {
	color: #0a2f72 !important;
	font-size: 38px;
}
.process-item {
	width: 45%;
}
.process-arrow {
	display: none;
}
}
 @media (max-width:576px) {
.process-item {
	width: 100%;
}
.process-section .section-title h2 {
	color: #0a2f72 !important;
	font-size: 30px;
}
.process-icon {
	width: 80px;
	height: 80px;
	font-size: 34px;
}
.process-item h4 {
	font-size: 20px;
}
}
/*==================================================
SERVICE AREA
Desktop
==================================================*/

.service-area {
	position: relative;
	padding: 90px 0;
	background: #ffffff;
}
/*==================================
Full Banner
==================================*/

.service-banner {
	position: relative;
	width: 100%;
	min-height: 430px;
	overflow: hidden;
	background-image: url("../images/service-area-desktop.jpg");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: cover;
}
/*==================================
Gradient
==================================*/

.service-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(  90deg,  rgba(255,255,255,0) 12%,  rgba(255,255,255,.15) 22%,  rgba(255,255,255,.45) 32%,  rgba(255,255,255,.80) 42%,  rgba(255,255,255,.96) 52%,  #ffffff 60%  );
	z-index: 1;
}
/*==================================
Desktop ใช้ Background
ซ่อน Picture
==================================*/

.service-picture {
	display: none;
}
/*==================================
Content
==================================*/

.service-content {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	min-height: 430px;
	padding-top: 60px;
	padding-bottom: 50px;
}
/*==================================
Left
==================================*/

.service-left {
	flex: 0 0 42%;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding-top: 0;
}
.service-title {
	margin: 0;
	color: #0a2f72;
	font-size: clamp(42px, 3vw, 62px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -1px;
}
/*==================================
Right
==================================*/

.service-right {
	flex: 0 0 56%;
	padding-left: 20px;
	padding-top: 10px;
}
.service-subtitle {
	margin: 0 0 30px;
	text-align: center;
	color: #0a2f72;
	font-size: 34px;
	font-weight: 700;
	line-height: 1.25;
}
/*==================================
List
==================================*/

.service-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}
.service-list ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.service-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
	color: #0a2f72;
	font-size: 20px;
	font-weight: 500;
	transition: .25s;
}
.service-list li:last-child {
	margin-bottom: 0;
}
.service-list li:hover {
	transform: translateX(6px);
}
.service-list i {
	flex: 0 0 18px;
	color: #ff7a00;
	font-size: 18px;
}
/*==================================
Bottom Text
==================================*/

.service-note {
	margin-top: 28px;
	text-align: center;
	color: #0a2f72;
	font-size: 24px;
	font-weight: 700;
}
/*==================================
Desktop Hover
==================================*/

.service-banner:hover .service-overlay {
	background: linear-gradient(  90deg,  rgba(255,255,255,0) 12%,  rgba(255,255,255,.15) 22%,  rgba(255,255,255,.45) 32%,  rgba(255,255,255,.80) 42%,  rgba(255,255,255,.96) 52%,  #ffffff 60%  );
	transition: .4s;
}
/*==================================
Prevent Image Selection
==================================*/

.service-banner img {
	user-select: none;
	-webkit-user-drag: none;
}

/*==================================================
SERVICE AREA
TABLET
768px - 991.98px
==================================================*/

@media (max-width:991.98px) {
.service-area {
	padding: 70px 0;
}
/*------------------------------
Desktop Banner OFF
------------------------------*/

.service-banner {
	background: none;
	min-height: auto;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 18px 45px rgba(0,0,0,.10);
}
.service-overlay {
	display: none;
}
/*------------------------------
Picture
------------------------------*/

.service-picture {
	display: block;
	width: 100%;
}
.service-mobile-banner {
	display: block;
	width: 100%;
	height: auto;
}
/*------------------------------
Content
------------------------------*/

.service-content {
	display: block;
	min-height: auto;
	background: #ffffff;
	padding: 40px 35px;
}
/*------------------------------
Heading
------------------------------*/

.service-left {
	width: 100%;
	display: block;
	padding: 0;
	margin-bottom: 25px;
	text-align: center;
}
.service-title {
	font-size: 44px;
}
/*------------------------------
Right
------------------------------*/

.service-right {
	width: 100%;
	padding: 0;
}
.service-subtitle {
	font-size: 30px;
	margin-bottom: 30px;
}
/*------------------------------
List
------------------------------*/

.service-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 25px;
}
.service-list li {
	font-size: 18px;
	margin-bottom: 16px;
}
/*------------------------------
Bottom
------------------------------*/

.service-note {
	margin-top: 30px;
	font-size: 20px;
}
/*------------------------------
Hover OFF
------------------------------*/

.service-list li:hover {
	transform: none;
}
}

/*==================================================
SERVICE AREA
MOBILE
0 - 767.98px
==================================================*/

@media (max-width:767.98px) {
.service-area {
	padding: 50px 0;
}
/*--------------------------------
Banner
--------------------------------*/

.service-banner {
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 12px 30px rgba(0,0,0,.10);
}
/*--------------------------------
Picture
--------------------------------*/

.service-picture {
	display: block;
	width: 100%;
	line-height: 0;
}
.service-mobile-banner {
	display: block;
	width: 100%;
	height: auto;
}
/*--------------------------------
Content Card
--------------------------------*/

.service-content {
	display: block;
	background: #ffffff;
	padding: 30px 22px;
}
/*--------------------------------
Heading
--------------------------------*/

.service-left {
	margin: 0 0 20px;
	text-align: center;
}
.service-title {
	font-size: 34px;
	line-height: 1.2;
	letter-spacing: 0;
}
.service-right {
	padding: 0;
}
.service-subtitle {
	margin: 0 0 25px;
	font-size: 22px;
	line-height: 1.45;
	text-align: center;
}
/*--------------------------------
Service List
--------------------------------*/

.service-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px 18px;
}
/*--------------------------------
UL
--------------------------------*/

.service-list ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
/*--------------------------------
Item
--------------------------------*/

.service-list li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	padding: 8px 0;
	font-size: 16px;
	line-height: 1.45;
	font-weight: 500;
	color: #0a2f72;
}
.service-list i {
	margin-top: 3px;
	font-size: 15px;
	color: #ff7a00;
	flex-shrink: 0;
}
/*--------------------------------
Bottom Note
--------------------------------*/

.service-note {
	margin-top: 24px;
	text-align: center;
	font-size: 18px;
	font-weight: 700;
	color: #0a2f72;
}
/*--------------------------------
Disable Hover
--------------------------------*/

.service-list li:hover {
	transform: none;
}

/*--------------------------------
Very Small Phone
320-380px
--------------------------------*/

@media (max-width:380px) {
 .service-content {
 padding:24px 18px;
}
 .service-title {
 font-size:30px;
}
 .service-subtitle {
 font-size:20px;
}
 .service-list {
 grid-template-columns:1fr;
 gap:6px;
}
 .service-list li {
 font-size:15px;
}
 .service-note {
 font-size:17px;
}
}
}
/*==================================================
SERVICE AREA
PART 5
Fine Tune
==================================================*/

/*==================================
Smooth Transition
==================================*/

.service-banner, .service-content, .service-title, .service-subtitle, .service-list li, .service-note, .service-overlay {
	transition: all .35s ease;
}
/*==================================
Better Shadow
==================================*/

.service-banner {
	box-shadow: 0 12px 35px rgba(0,0,0,.08),  0 30px 80px rgba(0,0,0,.10);
}

/*==================================
Desktop Hover
==================================*/

@media (min-width:992px) {
.service-banner:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 45px rgba(0,0,0,.10),  0 40px 100px rgba(0,0,0,.15);
}
.service-banner:hover .service-title {
	letter-spacing: .5px;
}
.service-banner:hover .service-subtitle {
	color: #08306f;
}
.service-banner:hover .service-note {
	color: #ff7a00;
}
.service-list li:hover {
	color: #ff7a00;
}
.service-list li:hover i {
	transform: scale(1.15);
}
.service-list i {
	transition: .3s;
}
}
/*==================================
Image
==================================*/

.service-picture img, .service-mobile-banner {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/*==================================
Desktop Background
==================================*/

@media (min-width:992px) {
.service-banner {
	background-size: cover;
	background-position: center center;
}
}
/*==================================
Typography
==================================*/

.service-title {
	text-wrap: balance;
}
.service-subtitle {
	text-wrap: balance;
}
.service-note {
	text-wrap: balance;
}
/*==================================
List
==================================*/

.service-list li {
	line-height: 1.6;
}
.service-list i {
	min-width: 18px;
	text-align: center;
}

/*==================================
Accessibility
==================================*/

.service-list li:focus-within {
 outline:2px solid #ff7a00;
 outline-offset:3px;
}
/*==================================
Selection
==================================*/

.service-area ::selection {
	background: #ff7a00;
	color: #fff;
}
/*==================================
GPU
==================================*/

.service-banner, .service-overlay, .service-list li {
	backface-visibility: hidden;
	transform-style: preserve-3d;
}
/*==================================
Scroll Animation
==================================*/

.service-area {
	opacity: 0;
	transform: translateY(40px);
	animation: serviceFadeUp .8s ease forwards;
}
 @keyframes serviceFadeUp {
 from {
 opacity:0;
 transform:translateY(40px);
}
to {
	opacity: 1;
	transform: translateY(0);
}
}

/*==================================
Large Desktop
==================================*/

@media (min-width:1600px) {
.service-banner {
	min-height: 500px;
}
.service-content {
	min-height: 500px;
}
.service-title {
	font-size: 68px;
}
.service-subtitle {
	font-size: 40px;
}
.service-list li {
	font-size: 22px;
}
.service-note {
	font-size: 28px;
}
}

/*==================================
Ultra Wide
==================================*/

@media (min-width:1920px) {
.service-banner {
	max-width: 1920px;
	margin: auto;
	border-radius: 24px;
}
}

/*==================================
Reduce Motion
==================================*/

@media (prefers-reduced-motion:reduce) {
.service-area, .service-banner, .service-list li, .service-overlay {
	animation: none !important;
	transition: none !important;
}
}
/*==================================================
REVIEW & FAQ
Desktop
==================================================*/

.review-faq {
	padding: 90px 0;
	/*background:#f8f9fb;*/
	background: #ffffff;
}
.review-faq-grid {
	display: grid;
	grid-template-columns: 60% 40%;
	gap: 45px;
	align-items: start;
}
/*==========================
Heading
==========================*/

.review-faq .section-title {
	margin-bottom: 35px;
	text-align: center;
	color: #0a2f72;
	font-size: 42px;
	font-weight: 800;
}
/*==========================
Review
==========================*/

.review-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}
.review-card {
	background: #fff;
	border-radius: 18px;
	padding: 25px;
	text-align: center;
	box-shadow: 0 8px 24px rgba(0,0,0,.06);
	transition: .35s;
}
.review-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px rgba(0,0,0,.10);
}
/*==========================
Stars
==========================*/

.review-star {
	color: #ff9800;
	font-size: 20px;
	letter-spacing: 2px;
	margin-bottom: 18px;
}
/*==========================
Text
==========================*/

.review-text {
	min-height: 88px;
	margin-bottom: 25px;
	color: #555;
	font-size: 16px;
	line-height: 1.7;
}
/*==========================
User
==========================*/

.review-user {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 14px;
}
.review-user img {
	width: 58px;
	height: 58px;
	border-radius: 50%;
	object-fit: cover;
}
.review-user h4 {
	margin: 0;
	color: #0a2f72;
	font-size: 18px;
	font-weight: 700;
}
.review-user span {
	color: #777;
	font-size: 14px;
}
/*==========================
FAQ
==========================*/

.faq-section {
	width: 100%;
}
/*==========================
Accordion
==========================*/

#faqAccordion {
	background: #fff;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
#faqAccordion .accordion-item {
	border: none;
	border-bottom: 1px solid #ececec;
}
#faqAccordion .accordion-item:last-child {
	border-bottom: none;
}
/*==========================
Button
==========================*/

#faqAccordion .accordion-button {
	background: #fff;
	color: #0a2f72;
	font-size: 18px;
	font-weight: 600;
	padding: 22px 24px;
	box-shadow: none;
}
#faqAccordion .accordion-button:not(.collapsed) {
	background: #fff;
	color: #0a2f72;
	box-shadow: none;
}
/*==========================
Plus Icon
==========================*/

#faqAccordion .accordion-button::after {
	background-image: none;
	content: "+";
	width: auto;
	height: auto;
	font-size: 28px;
	font-weight: 400;
	color: #0a2f72;
	transform: none;
}
#faqAccordion .accordion-button:not(.collapsed)::after {
	content: "−";
}
/*==========================
Body
==========================*/

#faqAccordion .accordion-body {
	padding: 0 24px 24px;
	color: #666;
	line-height: 1.8;
	font-size: 16px;
}
.review-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	align-items: stretch;
}
.review-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.review-text {
	flex: 1;
}

/*==================================================
REVIEW & FAQ
TABLET
==================================================*/

@media (max-width:991.98px) {
.review-faq {
	padding: 70px 0;
}
.review-faq-grid {
	grid-template-columns: 1fr;
	gap: 50px;
}
/*------------------------
Heading
------------------------*/

.review-faq .section-title {
	font-size: 38px;
	margin-bottom: 30px;
}
/*------------------------
Review
------------------------*/

.review-list {
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}
.review-card {
	padding: 22px 18px;
	border-radius: 16px;
}
.review-star {
	font-size: 18px;
}
.review-text {
	min-height: 95px;
	font-size: 15px;
	line-height: 1.7;
}
.review-user {
	gap: 12px;
}
.review-user img {
	width: 54px;
	height: 54px;
}
.review-user h4 {
	font-size: 17px;
}
.review-user span {
	font-size: 13px;
}
.review-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	align-items: stretch;
}
.review-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.review-text {
	flex: 1;
}
/*------------------------
FAQ
------------------------*/

#faqAccordion {
	border-radius: 16px;
}
#faqAccordion .accordion-button {
	padding: 20px;
	font-size: 17px;
}
#faqAccordion .accordion-button::after {
	font-size: 26px;
}
#faqAccordion .accordion-body {
	font-size: 15px;
	padding: 0 20px 20px;
}
}

/*==================================================
REVIEW & FAQ
MOBILE
==================================================*/

@media (max-width:767.98px) {
.review-faq {
	padding: 55px 0;
}
.review-faq-grid {
	grid-template-columns: 1fr;
	gap: 40px;
}
/*------------------------
Heading
------------------------*/

.review-faq .section-title {
	font-size: 30px;
	margin-bottom: 25px;
}
/*------------------------
Review
------------------------*/

.review-list {
	grid-template-columns: 1fr;
	gap: 18px;
}
.review-card {
	padding: 24px 20px;
	border-radius: 15px;
}
.review-star {
	font-size: 18px;
}
.review-text {
	min-height: auto;
	margin-bottom: 20px;
	font-size: 15px;
}
.review-user {
	justify-content: flex-start;
}
.review-user img {
	width: 56px;
	height: 56px;
}
.review-user h4 {
	font-size: 17px;
}
.review-user span {
	font-size: 14px;
}
/*------------------------
FAQ
------------------------*/

#faqAccordion {
	border-radius: 15px;
}
#faqAccordion .accordion-button {
	padding: 18px;
	font-size: 16px;
	line-height: 1.5;
}
#faqAccordion .accordion-button::after {
	font-size: 24px;
}
#faqAccordion .accordion-body {
	padding: 0 18px 18px;
	font-size: 15px;
	line-height: 1.8;
}
}
 @media (max-width:480px) {
.review-faq {
	padding: 45px 0;
}
.review-faq .section-title {
	font-size: 26px;
}
.review-card {
	padding: 20px 16px;
}
.review-star {
	font-size: 16px;
}
.review-text {
	font-size: 14px;
}
.review-user img {
	width: 50px;
	height: 50px;
}
.review-user h4 {
	font-size: 16px;
}
.review-user span {
	font-size: 13px;
}
#faqAccordion .accordion-button {
	padding: 16px;
	font-size: 15px;
}
#faqAccordion .accordion-body {
	font-size: 14px;
}
}
/*==================================================
BOTTOM CTA
Desktop
==================================================*/

.bottom-cta {
	padding: 0;
	margin: 90px 0 0;
}
.bottom-cta-bg {
	background: #082a67;
	border-radius: 70px 70px 0 0;
	overflow: hidden;
}
.bottom-cta-wrapper {
	background: transparent;
	border-radius: 0;
	padding: 18px 30px;
	display: grid;
	grid-template-columns: 1.3fr auto auto;
	align-items: center;
	gap: 24px;
	box-shadow: 0 -4px 20px rgba(0,0,0,.08);
}
/*==============================
LEFT
==============================*/

.bottom-cta-text {
	color: #fff;
}
.bottom-cta-text h2 {
	margin: 0;
	font-size: 36px;
	font-weight: 800;
	line-height: 1.15;
}
.bottom-cta-text p {
	margin: 6px 0 0;
	font-size: 20px;
	font-weight: 500;
}
.bottom-cta-text span {
	color: #ff7a00;
	font-weight: 700;
}
/*==============================
BUTTON
==============================*/

.cta-phone, .cta-line {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	min-height: 82px;
	border-radius: 18px;
	text-decoration: none;
	color: #fff;
	transition: .3s;
	width: 270px;
}
/*==============================
PHONE
==============================*/

.cta-phone {
	background: linear-gradient(  180deg,  #ff8a2a,  #ff6200  );
}
/*==============================
LINE
==============================*/

.cta-line {
	background: linear-gradient(  180deg,  #19c200,  #08a600  );
}
/*==============================
ICON
==============================*/

.cta-icon {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
}
.cta-phone .cta-icon {
	color: #ff6200;
}
.cta-line .cta-icon {
	color: #06b000;
}
.cta-icon i {
	font-size: 28px;
}
/*==============================
TEXT
==============================*/

.cta-detail {
	display: flex;
	flex-direction: column;
}
.cta-detail strong {
	font-size: 24px;
	line-height: 1;
	font-weight: 800;
}
.cta-detail span {
	margin-top: 6px;
	font-size: 20px;
	font-weight: 600;
}
/*==============================
HOVER
==============================*/

.cta-phone:hover, .cta-line:hover {
	color: #fff;
	transform: translateY(-4px);
	box-shadow: 0 15px 35px rgba(0,0,0,.18);
}
.cta-phone:hover {
	background: linear-gradient(  180deg,  #ff9d45,  #ff6d00  );
}
.cta-line:hover {
	background: linear-gradient(  180deg,  #23d60a,  #0bb100  );
}

/*==================================================
BOTTOM CTA
TABLET
==================================================*/

@media (max-width:991.98px) {
.bottom-cta {
	margin-top: 70px;
}
.bottom-cta-wrapper {
	grid-template-columns: 1fr;
	gap: 20px;
	padding: 30px;
	border-radius: 35px 35px 0 0;
	text-align: center;
}
.bottom-cta-text {
	text-align: center;
}
.bottom-cta-text h2 {
	font-size: 34px;
}
.bottom-cta-text p {
	font-size: 18px;
	margin-top: 8px;
}
/*----------------------------------
Buttons
----------------------------------*/

.cta-phone, .cta-line {
	width: 100%;
	max-width: 420px;
	margin: auto;
	min-height: 68px;
}
.cta-detail strong {
	font-size: 22px;
}
.cta-detail span {
	font-size: 18px;
}
}

/*==================================================
BOTTOM CTA
MOBILE
==================================================*/

@media (max-width:767.98px) {
.bottom-cta {
	margin-top: 55px;
}
.bottom-cta-bg {
	border-radius: 28px 28px 0 0;
}
.bottom-cta-wrapper {
	padding: 24px 18px;
	gap: 16px;
	border-radius: 0;
}
.bottom-cta-text h2 {
	font-size: 28px;
	line-height: 1.2;
}
.bottom-cta-text p {
	margin-top: 6px;
	font-size: 16px;
	line-height: 1.5;
}
/*----------------------------------
Buttons
----------------------------------*/

.cta-phone, .cta-line {
	width: 100%;
	min-height: 64px;
	border-radius: 14px;
	gap: 14px;
}
.cta-icon {
	width: 46px;
	height: 46px;
}
.cta-icon i {
	font-size: 22px;
}
.cta-detail {
	align-items: flex-start;
	text-align: left;
}
.cta-detail strong {
	font-size: 20px;
}
.cta-detail span {
	margin-top: 3px;
	font-size: 16px;
}
}
 @media (max-width:480px) {
.bottom-cta-wrapper {
	padding: 20px 15px;
}
.bottom-cta-text h2 {
	font-size: 24px;
}
.bottom-cta-text p {
	font-size: 15px;
}
.cta-phone, .cta-line {
	min-height: 58px;
}
.cta-icon {
	width: 40px;
	height: 40px;
}
.cta-icon i {
	font-size: 20px;
}
.cta-detail strong {
	font-size: 18px;
}
.cta-detail span {
	font-size: 14px;
}
}
/*==================================================
FOOTER
Desktop
==================================================*/

.footer {
	background: #082a67;
	color: #ffffff;
	padding: 45px 0 18px;
}
/*==============================
Grid
==============================*/

.footer-grid {
	display: grid;
	grid-template-columns: 2.6fr 1.2fr 1.6fr 1fr;
	gap: 50px;
	align-items: start;
}
/*==============================
Logo
==============================*/

.footer-logo {
	display: inline-block;
	margin-bottom: 20px;
}
.footer-logo img {
	max-width: 260px;
	width: 100%;
	height: auto;
}
/*==============================
Company
==============================*/

.footer-company p {
	margin: 0 0 8px;
	color: rgba(255,255,255,.72);
	font-size: 16px;
	line-height: 1.8;
}
/*==============================
Heading
==============================*/

.footer h3 {
	margin: 0 0 20px;
	color: #ffffff;
	font-size: 22px;
	font-weight: 700;
}
/*==============================
List
==============================*/

.footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.footer li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 12px;
	color: rgba(255,255,255,.90);
	font-size: 16px;
	line-height: 1.7;
}
/*==============================
Links
==============================*/

.footer a {
	color: #ffffff;
	text-decoration: none;
	transition: .25s;
}
.footer a:hover {
	color: #ff7a00;
}
/*==============================
Icons
==============================*/

.footer-contact i {
	width: 18px;
	margin-top: 4px;
	flex-shrink: 0;
}
.footer-contact .fa-phone {
	color: #ff7a00;
}
.footer-contact .fa-line {
	color: #19c400;
}
/*==============================
Service
==============================*/

.footer-service li::before {
	content: "•";
	color: #ffffff;
	margin-right: 8px;
}
.footer-service li {
	display: block;
}
/*==============================
Area
==============================*/

.footer-area li::before {
	content: "•";
	color: #ffffff;
	margin-right: 8px;
}
.footer-area li {
	display: block;
}
/*==============================
Bottom
==============================*/

.footer-bottom {
	margin-top: 40px;
	padding-top: 22px;
	border-top: 1px solid rgba(255,255,255,.15);
	text-align: center;
	color: rgba(255,255,255,.65);
	font-size: 14px;
}
/*==============================
Hover
==============================*/

.footer-logo img {
	transition: .3s;
}
.footer-logo:hover img {
	transform: scale(1.03);
}
.footer-service li, .footer-area li {
	transition: .25s;
}
.footer-service li:hover, .footer-area li:hover {
	color: #ff7a00;
	padding-left: 5px;
}

/*==================================================
FOOTER
TABLET
==================================================*/

@media (max-width:991.98px) {
.footer {
	padding: 50px 0 20px;
}
.footer-grid {
	grid-template-columns: repeat(2, 1fr);
	gap: 40px 35px;
}
.footer-company {
	grid-column: 1 / -1;
	text-align: center;
}
.footer-logo {
	display: block;
}
.footer-logo img {
	max-width: 240px;
	margin: auto;
}
.footer-company p {
	font-size: 15px;
}
.footer h3 {
	font-size: 20px;
	margin-bottom: 18px;
}
.footer li {
	font-size: 15px;
	margin-bottom: 10px;
}
.footer-bottom {
	margin-top: 35px;
	font-size: 13px;
}
}

/*==================================================
FOOTER
MOBILE
==================================================*/

@media (max-width:767.98px) {
.footer {
	padding: 40px 0 18px;
}
.footer-grid {
	display: block;
}
.footer-company, .footer-contact, .footer-service, .footer-area {
	padding-bottom: 24px;
	margin-bottom: 24px;
	border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer-area {
	border-bottom: none;
	margin-bottom: 0;
}
.footer-company {
	text-align: center;
}
.footer-logo {
	display: block;
	margin-bottom: 18px;
}
.footer-logo img {
	max-width: 210px;
	margin: auto;
}
.footer-company p {
	font-size: 15px;
	line-height: 1.8;
}
.footer h3 {
	font-size: 20px;
	margin-bottom: 16px;
}
.footer li {
	font-size: 15px;
	line-height: 1.7;
}
.footer-contact li {
	align-items: center;
}
.footer-contact i {
	width: 22px;
	margin-top: 0;
}
.footer-bottom {
	margin-top: 28px;
	padding-top: 18px;
	font-size: 13px;
	line-height: 1.7;
}
}
 @media (max-width:480px) {
.footer {
	padding: 35px 0 16px;
}
.footer-logo img {
	max-width: 180px;
}
.footer h3 {
	font-size: 18px;
}
.footer-company p {
	font-size: 14px;
}
.footer li {
	font-size: 14px;
}
.footer-bottom {
	font-size: 12px;
}
}
/* =====================================================
FLOATING BUTTONS
===================================================== */

.floating-contact {
	position: fixed;
	right: 25px;
	bottom: 25px;
	display: flex;
	flex-direction: column;
	gap: 15px;
	z-index: 999;
}
.floating-btn {
	width: 60px;
	height: 60px;
	border: none;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #ffffff;
	font-size: 24px;
	cursor: pointer;
	transition: .3s;
	text-decoration: none;
	box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.floating-btn:hover {
	color: #ffffff;
	transform: translateY(-5px);
}
.floating-phone {
	background: #ff7a00;
}
.floating-line {
	background: #06C755;
}
.floating-top {
	background: #0F172A;
}
/* =====================================================
BACK TO TOP
===================================================== */

#backToTop {
	opacity: 0;
	visibility: hidden;
	transition: .3s;
}
#backToTop.show {
	opacity: 1;
	visibility: visible;
}
/* =====================================================
IMAGE EFFECT
===================================================== */

img {
	transition: .35s;
}
/* =====================================================
SECTION OFFSET
===================================================== */

section {
	scroll-margin-top: 90px;
}
/* =====================================================
TEXT SELECTION
===================================================== */

::selection {
	background: #ff7a00;
	color: #ffffff;
}


/* =====================================================
SCROLLBAR
===================================================== */

::-webkit-scrollbar {
 width:10px;
}

::-webkit-scrollbar-thumb {
 background:#ff7a00;
 border-radius:10px;
}

::-webkit-scrollbar-track {
 background:#eeeeee;
}


/* =====================================================
RESPONSIVE
===================================================== */

@media (max-width:991px) {
.cta-bottom h2 {
	font-size: 34px;
}
.footer {
	text-align: center;
}
.footer .col-lg-3, .footer .col-lg-4, .footer .col-lg-5 {
	margin-bottom: 35px;
}
}
 @media (max-width:767px) {
.floating-contact {
	right: 15px;
	bottom: 15px;
}
.floating-btn {
	width: 55px;
	height: 55px;
	font-size: 22px;
}
.cta-bottom {
	padding: 70px 20px;
}
.cta-bottom h2 {
	font-size: 28px;
}
.cta-bottom p {
	font-size: 16px;
}
.cta-bottom .btn {
	width: 100%;
	margin-bottom: 15px;
}
.accordion-button {
	font-size: 16px;
	padding: 18px;
}
.footer {
	text-align: center;
}
}

/* =====================================================
TABLET
===================================================== */

@media (max-width:991px) {
.navbar-custom {
	flex-wrap: wrap;
	height: auto;
	padding: 15px 0;
}
.menu {
	width: 100%;
	justify-content: center;
	flex-wrap: wrap;
	gap: 15px;
	margin-top: 15px;
	order: 3;
}
.call-btn {
	padding: 10px 20px;
	font-size: 14px;
}
}
/* Navbar เมื่อ Scroll */

.navbar-scrolled {
	background: #08111f !important;
	padding: 10px 0;
	box-shadow: 0 8px 25px rgba(0,0,0,.20);
}

/* =====================================================
END
===================================================== */