/* ============================
Theme Name: Banner Power
Version: 1.0
Description: Banner Power - Advanced Electrical Services for Modern Needs
Author: Edwin
First Update: 19/10/2025
Last Update: 24/02/2026
License: GNU General Public License v2 or later
============================*/

/* ============================
# VARIABLES
============================*/
:root {
	--font-family-base: "DM Sans", sans-serif;
	--font-family-heading: "DM Sans", sans-serif;
	--color-body: #000000;
	--color-heading: #000000;
	--color-primary: #FF4F13;
	--color-secondary: #000000;
	--color-light: #F5F5F6;
	--color-white: #FFFFFF;
	--color-black: #000000;
	--heading-h1: clamp(38px, 4vw, 46px);
	--heading-h2: clamp(32px, 3vw, 38px);
	--heading-h3: clamp(24px, 2.4vw, 26px);
	--border-radius-base: 0.75rem;
	--border-color-light: #D5D5D5;
	--section-padding-y: clamp(70px, 5vw, 100px);
}

/* ============================
# RESET STYLES
============================*/
html {
	scroll-behavior: smooth;
}
body {
	font-family: var(--font-family-base);
	font-size: 16px;
	color: var(--color);
}
a,
a:hover,
a:focus {
	text-decoration: none;
	outline: none;
}

h1,
h2,
h3,
h4,
h5 {
	font-family: var(--font-family-heading);
	font-weight: 600;
	color: var(--color-heading);
}

h1 {
	font-size: var(--heading-h1);
}
h2 {
	font-size: var(--heading-h2);
}
h3 {
	font-size: var(--heading-h3);
}
h5 {
	font-size: 1.125rem;
	font-weight: 700;
}

p,
ul li,
ol li {
	font-size: clamp(1rem, 1.5vw, 1.125rem);
	color: var(--color-body);
	line-height: 1.6;
}
p {
	margin-bottom: 1.25rem;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}
::selection {
	background-color: var(--color-primary);
	color: var(--color-white);
}
::-moz-selection {
	background-color: var(--color-primary);
	color: var(--color-white);
}


/* ============================
# RESET
============================*/
/* =====[CONTAINER]===== */
.container, 
.container-fluid {
	--bs-gutter-x: 2.5rem;
}

/* =====[BUTTON]===== */
.btn {
	--bs-btn-padding-x: 1.625rem;
	--bs-btn-padding-y: 0.625rem;
	--bs-btn-font-family: var(--font-family-base);
	--bs-btn-border-radius: 0.375rem;
}
.btn-primary {
	--bs-btn-color: var(--color-white);
	--bs-btn-bg: var(--color-primary);
	--bs-btn-border-color: var(--color-primary);
	--bs-btn-hover-color: var(--color-white);
	--bs-btn-hover-bg: var(--color-secondary);
	--bs-btn-hover-border-color: var(--color-secondary);
	--bs-btn-active-color: var(--color-white);
	--bs-btn-active-bg: var(--color-secondary);
	--bs-btn-active-border-color: var(--color-secondary);
	--bs-btn-disabled-color: var(--color-white);
	--bs-btn-disabled-bg: var(--color-primary);
	--bs-btn-disabled-border-color: var(--color-primary);
}

/* =====[FORMS]===== */
.form-group {
	margin-bottom: 1rem;
	position: relative;
}
.form-label {
   font-family: var(--font-family-base);
   font-size: 1rem;
   margin-bottom: 0.375rem;
}
.form-control {
   font-family: var(--font-family-base);
   color: var(--color-body);
   border-color: var(--border-color-light);
   border-radius: 0.5rem;
   padding: 0.625rem 1.25rem;
}
.form-control:focus {
   color: var(--color-body);
   border-color: var(--color-primary);
   box-shadow: 0 0 0 .25rem rgba(255, 79, 19, .25);
}

/* =====[HEADING BLOCK]===== */
.heading-block {
	position: relative;
	margin-bottom: clamp(36px, calc(1.5vw + 28px), 50px);
}
.heading-block.over-text { margin-bottom: clamp(30px, calc(1.2vw + 24px), 44px); }
.heading-block legend {
	font-size: 0.875rem;
	font-weight: 500;
	color: #434347;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
	display: block;
	letter-spacing: 0.8px;
}
.heading-block h2 { margin-bottom: 0; }
.heading-block h2 span { color: var(--color-primary); }

/* ============================
# HEADER
============================*/
.site-header {
	background: var(--color-white);
	position: relative;
	box-shadow: var(--bs-box-shadow-sm);
	z-index: 1000;
}

/* =====[TOP HEADER]===== */
.top-header {
   color: var(--color-white);
   padding: 0.25rem 0;
   background: var(--color-black);
}
.top-header-block { position: relative; }
.top-header-block a {
   color: var(--color-white);
   display: inline-flex;
   align-items: center;
   gap: 0.75rem;
   transition: all .20s ease-in-out;
}
.top-header-block a:hover {
   color: var(--color-primary);
   text-decoration: underline;
}
.top-header-block a svg {
   width: 20px;
   height: 20px;
}
.top-header-block.middle { display: flex; align-items: center; gap: 1rem; }
.top-header-block.middle .divider { color: var(--color-white); }

@media (max-width: 1399px) {
	.top-header-block.middle .description { display: none; }
	.top-header-block.middle .divider { display: none; }
}
/* =====[MAIN HEADER]===== */
.main-header {
	position: relative;
	padding: 0.875rem 0;
}
.main-header .container {
	display: flex;
	align-items: center;
	gap: 16px;
}
.site-branding {
	display: flex;
	align-items: center;
}
.site-branding a { display: block; }
.site-branding .site-description-alt {
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -1px;
	margin-bottom: 0;
	width: 170px;
	line-height: 1.05;
	margin-left: 20px;
	padding-left: 20px;
	border-left: 1px solid #C5C5C5;
}
.site-branding .custom-logo {
	display: block;
	width: auto;
	height: 46px
}
.site-branding .custom-logo img {
	display: block;
}
.site-branding .site-title,
.site-branding .site-description {
	display: none
}
.main-navigation { flex: 1 }
.menubar {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}
.menu {
	list-style: none;
	margin: 0 0 0 auto;
	padding: 0;
	display: flex;
	gap: 0 1.75rem;
	align-items: center;
}
.menu .menu-item { position: relative; }
.menu .menu-item a {
	font-size: 1rem;
	font-weight: 500;
	color: var(--color-body);
	text-decoration: none;
	text-align: center;
	display: block;
	letter-spacing: -0.4px;
	transition: all .30s ease-in-out;
}
.menu .menu-item > a { padding: 0.75rem 0; }
.menu .menu-item:hover > a,
.menu .menu-item.current-menu-item > a {
	color: var(--color-primary);
}
.menu .menu-item.menu-item-has-children { position: relative; }
.menu .menu-item.menu-item-has-children > a {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}
.menu .menu-item.menu-item-has-children > a::after {
	content: '';
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 1.125rem;
	background-position: center;
	display: inline-block;
	width: 1rem;
	height: 1rem;
	position: relative;
	top: 1px;
	transition: all .18s ease-in-out;
}
.menu .menu-item.menu-item-has-children:hover a::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FF4F13' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E");
}
.menu .menu-item .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0.75rem 0.75rem;
	position: absolute;
	left: 0;
	top: 100%;
	min-width: 220px;
	background: var(--color-white);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
	border-radius: var(--border-radius-base);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: all .20s ease-in-out;
	z-index: 50;
}
.menu .menu-item.menu-item-has-children:hover>.sub-menu,
.menu .menu-item.menu-item-has-children:focus-within>.sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0px);
}
.menu .menu-item .sub-menu .menu-item:not(:last-child) { margin-bottom: 0.25rem; }
.menu .menu-item .sub-menu .menu-item a {
	text-align: left;
	padding: 0.75rem 0.75rem;
	white-space: nowrap;
	border-radius: var(--border-radius-base);
}
.menu .menu-item .sub-menu .menu-item a:hover,
.menu .menu-item .sub-menu .menu-item.current-menu-item a {
	color: var(--color-white);
	background: var(--color-primary);
}
.main-nav-header {
	display: none;
	align-items: center;
	justify-content: end;
	margin-bottom: 0.25rem;
}
.menu-toggle,
.main-nav-header .menu-close {
	color: var(--color-body);
	background: var(--color-white);
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--border-color-light);
	padding: 0.5rem 0.75rem;
	border-radius: var(--border-radius-base);
	margin-left: auto;
	transition: all .30s ease-in-out;
}
.menu-toggle { display: none; }
.menu-toggle:hover,
.main-nav-header .menu-close:hover {
	color: var(--color-white);
	background: var(--color-primary);
	border-color: var(--color-primary);
}
.menu-toggle svg,
.main-nav-header .menu-close svg {
	width: 24px;
	height: 24px;
}
.main-nav-footer {
   background: var(--color-light);
   border: 1px solid var(--border-color-light);
   padding: 1rem 1rem;
   border-radius: 0.375rem;
   margin-top: 1.25rem;
   display: none;
}
.main-nav-footer hr {
   border-top-color: var(--border-color-light);
   margin-block: 0.75rem;
   opacity: 1;
}
.main-nav-footer .footer-block h5 {
   font-size: 0.875rem;
   margin-bottom: 0.25rem;
}
.main-nav-footer .footer-block a {
   color: var(--color-body);
   display: inline-block;
}
.main-nav-footer .footer-block a:hover {
   color: var(--color-primary);
   text-decoration: underline;
}

@media (max-width: 1199px) {
	.site-branding .custom-logo { height: 40px; }
	.site-branding .site-description-alt {
		font-size: 18px;
		width: 160px;
		margin-left: 15px;
		padding-left: 15px;
	}
}
@media (max-width: 991px) {
	.main-navigation {
		position: fixed;
		top: 0;
		right: 0;
		padding: 1rem 1rem;
		background: var(--color-white);
		width: 100%;
		height: 100%;
		max-width: 360px;
		opacity: 0;
		transform: translateX(100%);
		transition: all .30s ease-in-out;
		z-index: 100;
	}
	.main-navigation.show {
		opacity: 1;
		transform: translateX(0);
	}
	.menubar {
		flex-direction: column;
		width: 100%;
		gap: 1.25rem;
	}
	.menubar .btn-primary { width: 100%; }
	.menu {
		width: 100%;
		flex-direction: column;
		margin: 0;
	}
	.menu .menu-item { width: 100%; }
	.menu > .menu-item { border-bottom: 1px solid var(--border-color-light); }
	.menu .menu-item a { text-align: left; }
	.menu .menu-item.menu-item-has-children > a { justify-content: space-between; }
	.menu .menu-item .sub-menu {
		border-left: 3px solid var(--color-primary);
		margin: 0 0 1rem 0;
		padding: 0.5rem 0.75rem;
		position: relative;
		top: 0;
		min-width: 220px;
		background: var(--color-white);
		box-shadow: none;
		border-radius: 0;
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		display: none;
	}
	.menu .menu-item .sub-menu.show { display: block; }
	.menu .menu-item .sub-menu .menu-item:not(:last-child) { margin-bottom: 0.125rem; }
	.menu .menu-item .sub-menu .menu-item a {
		padding: 0.5rem 0;
		border-radius: 0;
	}
	.menu .menu-item .sub-menu .menu-item a:hover, 
	.menu .menu-item .sub-menu .menu-item.current-menu-item a {
		color: var(--color-primary);
		background: var(--color-white);
	}
	.main-nav-header { display: flex; }
	.menu-toggle { display: flex; }
	.main-nav-footer { display: block; }
}
@media (max-width: 767px) {
	.site-branding .custom-logo { height: 36px; }
	.site-branding .site-description-alt {
		font-size: 16px;
		width: 140px;
		margin-left: 12px;
		padding-left: 13px;
	}
}


/* ============================
# HOME PAGE
============================*/
/* =====[SECTION HERO MAIN]===== */
.section-hero-main { position: relative; }
.carousel-hero .hero-media {
	height: 80vh;
	min-height: 480px;
	position: relative;
}
.carousel-hero .hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.hero-main-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.9) 100%);
	display: flex;
	align-items: end;
	padding-block: 40px;
	overflow: hidden;
	z-index: 100;
}
.hero-main-overlay .hero-tagline {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-white);
	text-transform: uppercase;
	position: relative;
	letter-spacing: 1px;
	padding-left: 1.5rem;
	margin-bottom: 2.5rem;
}
.hero-main-overlay .hero-tagline svg {
	position: absolute;
	top: 2px;
	left: 0;
}
.hero-main-overlay .hero-heading,
.hero-main-overlay h1 {
	color: var(--color-white);
	margin-bottom: 0;
	line-height: 1;
}
.hero-main-overlay .hero-heading span,
.hero-main-overlay h1 strong { 
	font-weight: 600;
	color: var(--color-primary);
}
.hero-main-overlay p {
	color: var(--color-white);
	margin-bottom: 0;
}
.hero-main-overlay .button-group {
	margin-top: 1.75rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}

@media (max-width: 1199px) {
	.hero-main-overlay .hero-tagline { margin-bottom: 1.5rem; }
}
@media (max-width: 991px) {
	.carousel-hero .hero-media {
		height: auto;
		min-height: unset;
		aspect-ratio: 16/9;
	}
	.hero-main-overlay {
		position: relative;
		background: var(--color-black);
	}
	.hero-main-overlay .hero-heading { margin-bottom: 1.25rem; }
}
@media (max-width: 767px) {
	.carousel-hero .hero-media { aspect-ratio: 16/10; }
}

/* =====[CUSTOMER CAROUSEL]===== */
.section-customer-carousel {
	padding: 24px 0 10px 0;
	border-bottom: 1px solid var(--border-color-light);
}
.section-customer-carousel h4 {
	font-size: 0.875rem;
	font-weight: 500;
	color: #434347;
	margin-bottom: 1rem;
}
.section-customer-carousel h4 span { color: var(--color-primary); }
.carousel-customer .cc-media-block { padding: 1.25rem 1.25rem; }

@media (max-width: 575px) {
	.section-customer-carousel { padding: 24px 0 26px 0; }
	.section-customer-carousel h4 { margin-bottom: 1.25rem; }
	.carousel-customer .cc-media-block {
		border: 1px solid #F0F0F0;
		padding: 1rem 1.25rem;
		margin-block: 1px;
		background: #F5F5F5;
	}
}

/* =====[SECTION HOME MAIN]===== */
.section-home-main { padding-block: var(--section-padding-y); }
.section-home-main .divider-block hr {
	border-top-color: var(--border-color-light);
	margin: clamp(40px, calc(1vw + 36px), 50px) 0;
	opacity: 1;
}
.about-min-block .content-block p:last-child { margin-bottom: 0; }
.features-min-block h3 { margin-bottom: 1rem; }
.features-min-block .card {
	border: none;
	border-radius: var(--border-radius-base);
	height: 100%;;
}
.features-min-block .card .card-body {
	background-color: var(--color-light);
	border-radius: var(--border-radius-base);
	padding: 30px 20px;
}
.features-min-block .card .card-body svg {
	display: block;
	width: 1.25rem;
	height: 1.25rem;
}
.features-min-block .card .card-body h5 {
	font-size: 1.125rem;
	font-weight: 700;
	margin-top: 0.75rem;
	margin-bottom: 0.5rem;
	letter-spacing: -0.5px;
}
.features-min-block .card .card-body p { margin: 0; }



/* =====[SECTION SERVICE MIN]===== */
.section-service-min {
	background: var(--color-light);
	padding-block: var(--section-padding-y);
}
.service-card {
	background: #FFFFFF;
	border: none;
	border-radius: var(--border-radius-base);
	padding: 20px 20px;
}
.service-card .card-media { height: 100%; }
.service-card .card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: var(--border-radius-base);
}
.service-card .card-body { padding: 20px 20px 20px 40px; }
.service-card .flex-row-reverse .card-body { padding: 20px 40px 20px 20px; }
.service-card .card-body h2 { margin-bottom: clamp(20px, 2vw, 28px); }
.service-card .card-body h5 { 
	margin-bottom: clamp(24px, 2.2vw, 30px); 
	line-height: 1.4;
}
.service-card .card-body p { margin-bottom: 1.5rem; }
.service-card .card-body .button-group {
	margin-top: 2rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}
.col-service-cards .service-card:not(:last-child) {
	margin-bottom: clamp(28px, calc(1.8vw + 21px), 46px);
}

@media (max-width: 991px) {
	.service-card .card-body,
	.service-card .flex-row-reverse .card-body { 
		padding: 30px 20px 20px 20px; 
	}
}
@media (max-width: 767px) {
	.service-card .card-body,
	.service-card .flex-row-reverse .card-body { padding: 24px 0 0 0; }
}
@media (max-width: 575px) {
	.service-card .card-body .button-group { flex-direction: column; }
}

/* =====[SECTION BANNER MAIN]===== */
.section-banner-main { background: #4F1200; }
.section-banner-main .col-12 {
	background-color: transparent;
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: center right;
}
.section-banner-main .content-block {
	padding-block: var(--section-padding-y);
	width: 100%;
	max-width: 460px;
	position: relative;
}
.section-banner-main .content-block h2 {
	color: #FFFFFF;
	margin-bottom: 0.75rem;
}
.section-banner-main .content-block p {
	color: #FFFFFF;
	margin-bottom: 2rem;
}

@media (max-width: 991px) {
	.section-banner-main .col-12 { background-image: none!important; }
	.section-banner-main .content-block { max-width: 100%; }
}

/* ============================
# FOOTER
============================*/
.site-footer {
	background: #171717;
	color: var(--color-white);
}
.site-footer p { color: var(--color-white); }
.footer-main { padding-block: 65px; }
.footer-main .content-block { padding-right: 80px; }
.footer-main .content-block img {
	display: block;
	width: 156px;
	margin-bottom: 28px;
}
.footer-social-icons {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin-top: 28px;
}
.footer-social-icons a {
	color: var(--color-white);
	display: inline-block;
	transition: all .30s ease-in-out;
}
.footer-social-icons a:hover { color: var(--color-primary); }
.footer-social-icons a svg {
	width: 20px;
	height: 20px;
}
.footer-nav-block h5,
.footer-address-block h5 {
	font-weight: 600;
	color: var(--color-white);
	margin-bottom: 1.5rem;
}
.footer-nav-block .footer-nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.footer-nav-block .footer-nav ul li { margin-bottom: 0.75rem; }
.footer-nav-block .footer-nav ul li:last-child { margin-bottom: 0; }
.footer-nav-block .footer-nav ul li a {
	font-size: 1rem;
	color: var(--color-white);
	display: inline-block;
	transition: all .30s ease-in-out;
}
.footer-nav-block .footer-nav ul li a:hover {
	color: var(--color-primary);
	text-decoration: underline;
}
.footer-address-block p {
	font-size: 1rem;
	margin-bottom: 0.75rem;
}
.footer-address-block p:last-child { margin-bottom: 0; }
.footer-address-block p a {
	color: var(--color-white);
	display: inline-block;
	transition: all .30s ease-in-out;
}
.footer-address-block p a:hover {
	color: var(--color-primary);
	text-decoration: underline;
}
.footer-bottom {
	background: var(--color-black);
	padding: 1.5rem 0;;
}
.footer-nav-min ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}
.footer-nav-min ul li + li::before {
	content: "|";
	color: var(--color-white);
	margin-right: 1rem;
}
.footer-nav-min ul li a {
	font-size: 0.875rem;
	color: var(--color-white);
	display: inline-block;
	transition: all .30s ease-in-out;
}
.footer-nav-min ul li a:hover {
	color: var(--color-primary);
	text-decoration: underline;
}
.footer-cr-txt {
	font-size: 0.875rem;
	color: var(--color-white);
	margin-bottom: 0;
	text-align: right;
}

@media (max-width: 991px) {
	.footer-nav-block,
	.footer-address-block {
		margin-top: 3rem;
	}
	.footer-nav-min { margin-bottom: 0.75rem; }
	.footer-nav-min ul {
		justify-content: center;
		gap: 0.5rem;
	}
	.footer-nav-min ul li + li::before { margin-right: 0.5rem; }
	.footer-cr-txt { text-align: center; }
}
@media (max-width: 767px) {
	.footer-main { padding-block: 55px; }
	.footer-main .content-block { padding-right: 0; }
	.footer-main .content-block img {
		width: 140px;
		margin-bottom: 24px;
	}
	.footer-nav-block, 
	.footer-address-block {
		margin-top: 2.5rem;
	}
	.footer-nav-block h5,
	.footer-address-block h5 {
		margin-bottom: 1.25rem;
	}
	.footer-nav-block .footer-nav ul li { margin-bottom: 0.5rem; }
	.footer-address-block p { margin-bottom: 0.5rem; }
}


/* ============================
# INNER PAGES
============================*/
/* =====[PAGE BANNER]===== */
.page-banner { position: relative; }
.page-banner-block {
	position: relative;
	overflow: hidden;
}
.page-banner-media {
	position: relative;
	height: clamp(240px, calc(10.9375vw + 205px), 380px);
}
.page-banner-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.page-banner-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: end;
	padding: clamp(30px, 2.5vw, 40px) 0;
	background: linear-gradient(to bottom, rgba(0,0,0,0) 30%,rgba(0,0,0,0.85) 100%);
	z-index: 100;
}
.page-banner-overlay h1 {
	color: var(--color-white);
	margin-bottom: 0;
}

/* =====[SECTION ABOUT MAIN]===== */
.section-about-main {
	padding-block: var(--section-padding-y);
	border-bottom: 1px solid var(--border-color-light);
}
.section-about-main .content-block p:last-child { margin-bottom: 0; }

/* =====[SECTION FEATURE TAB]===== */
.section-feature-tab { padding-block: var(--section-padding-y); }
.feature-tab-content .media {
	overflow: hidden;
	border-radius: var(--border-radius-base);
}
.feature-tab-content .media img { width: 100%; }
.feature-nav-tabs .nav-item { width: 100%; }
.feature-nav-tabs .nav-item .nav-link {
	display: block;
	text-align: left;
	padding: 30px 0;
	position: relative;
}
.feature-nav-tabs .nav-item .nav-link .progress {
	--bs-progress-height: 0.25rem;
	--bs-progress-bg: #ECEEF2;
	--bs-progress-border-radius: var(--border-radius-base);
	--bs-progress-box-shadow: none;
	--bs-progress-bar-bg: var(--color-primary);
	border: 1px solid #ECEEF2;
	position: absolute;
	left: 60px;
	bottom: -0.125rem;
	width: calc(100% - 60px);
}
.feature-nav-tabs .nav-item .nav-link .progress .progress-bar {
	width: 0%;
	background-color: transparent;
}
.feature-nav-tabs .nav-item .nav-link.active .progress .progress-bar {
	width: 60%;
	background-color: var(--bs-progress-bar-bg);
}
.feature-nav-tabs .nav-item-content {
	position: relative;
	padding-left: 60px;
}
.feature-nav-tabs .nav-item-content img {
	width: 40px;
	height: 40px;
	position: absolute;
	top: 0;
	left: 0;
}
.feature-nav-tabs .nav-item-content h3 { letter-spacing: -1px; }
.feature-nav-tabs .nav-item-content p {
	color: #3A4252;
	margin-bottom: 0;
}

@media (min-width: 992px) {
	.row-feature-tab {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem;
	}
	.row-feature-tab > [class*="col-"] { width: auto; }
	.feature-nav-tabs .nav-item:first-child .nav-link { padding-top: 0; }
}
@media (min-width: 1200px) {
	.row-feature-tab { gap: 2.5rem; }
}

/* =====[SECTION SERVICE MAIN]===== */
.section-service-main { padding-block: var(--section-padding-y); }
.section-service-main .content-block .button-group { margin-top: 2rem; }

/* =====[SECTION SERVICE CAROUSEL]===== */
.section-service-carousel {
	background: var(--color-light);
	padding-block: var(--section-padding-y);
}
.carousel-service-single { width: 100%; }
.carousel-service-single .swiper-wrapper { align-items: end; }
.carousel-service-single .swiper-navigation {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 2rem;
}
.carousel-service-single .ss-swiper-button-prev,
.carousel-service-single .ss-swiper-button-next {
	color: var(--color-black);
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 100%;
	transition: all .30s ease-in-out;
}
.carousel-service-single .ss-swiper-button-prev svg,
.carousel-service-single .ss-swiper-button-next svg {
	width: 24px;
	height: 24px;
}
.carousel-service-single .ss-swiper-button-prev:hover,
.carousel-service-single .ss-swiper-button-next:hover {
	color: var(--color-white);
	background: var(--color-primary);
}
.carousel-service-single .media-block { overflow: hidden; }
.carousel-service-single .media-block img { width: 100%; }

@media (min-width: 992px) {
	.section-service-carousel > .container-fluid {
		padding-left: 30px;
		padding-right: 30px;
	}
}
@media (max-width: 767px) {
	.section-service-carousel > .container-fluid { margin-bottom: -10px;}
	.carousel-service-single .swiper-navigation { margin-top: 1rem;}
}

/* =====[SECTION SERVICE POINTS]===== */
.section-service-points { padding-block: var(--section-padding-y); }
.section-service-points .media {
	overflow: hidden;
	border-radius: var(--border-radius-base);
}
.section-service-points .media img { width: 100%; }
.section-service-points .button-group { margin-top: 2.5rem; }
.service-points {
	list-style: none;
	padding: 0 1rem 0 0;
	margin: 0 0 2rem 0;
}
.service-points li {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-circle-check'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0' /%3E%3Cpath d='M9 12l2 2l4 -4' /%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 26px;
	padding-left: 44px;
	background-position: left 3px;
}
.service-points li:not(:last-child) { margin-bottom: 2rem; }
.service-points li h3 { margin-bottom: 0.75rem; }
.service-points li p { margin-bottom: 0; }

@media (max-width: 1199px) {
	.service-points { padding: 0; }
}
@media (max-width: 767px) {
	.section-service-points .button-group { margin-top: 2rem; }
	.service-points li {
		background-size: 24px;
		padding-left: 40px;
	}
	.service-points li:not(:last-child) { margin-bottom: 1.5rem; }
}

/* =====[SECTION CONTACT MAIN]===== */
.section-contact-main {
	padding-block: var(--section-padding-y);
}
.section-contact-main .content-block h3 {
	margin-bottom: clamp(1rem, 0.6087rem + 1.7391vw, 2rem);
}
.section-contact-main .content-block p:last-child {
	margin-bottom: 0;
}

/* =====[SECTION CONTACT FORMS]===== */
.section-contact-forms { padding-block: var(--section-padding-y); }
.form-block form .form-group p { margin-bottom: 0; }
.contact-detail-block {
   color: var(--color-body);
   border: 1px solid var(--border-color-light);
   border-radius: var(--border-radius-base);
   position: relative;
   display: flex;
   align-items: start;
   gap: 1rem;
   padding: 1.25rem;
   margin-bottom: 1.25rem;
}
.contact-detail-icon { flex: 0 0 48px; }
.contact-detail-icon img { width: 100%; }
.contact-detail-content { flex: 1 }
.contact-detail-content h5 {
   letter-spacing: -0.4px;
   margin-bottom: 0.5rem;
}
.contact-detail-content p {
   line-height: 1.2;
   margin-bottom: 0;
}
.contact-detail-block:hover { background: var(--color-light); }
.contact-detail-block:hover p {
   color: var(--color-primary);
   text-decoration: underline;
}

@media (max-width: 767px) {
   .contact-detail-block {
      padding: 1rem;
      margin-bottom: 1rem;
   }
   .contact-detail-icon { flex: 0 0 40px; }
   .contact-detail-content h5 {
      font-size: 1rem;
      margin-bottom: 0.25rem;
   }
}

/* =====[SECTION REQUEST MAIN]===== */
.section-request-main {
	padding-block: var(--section-padding-y);
}
.section-request-main .content-block h3 {
	/* margin-bottom: clamp(1rem, 0.6087rem + 1.7391vw, 2rem); */
	margin-bottom: 1rem;
}
.section-request-main .content-block p:last-child {
	margin-bottom: 0;
}

/* =====[SECTION REQUEST FORMS]===== */
.section-request-forms {
	padding-block: var(--section-padding-y);
}

/* =====[CONTACT FORM 7]===== */
.wpcf7-not-valid-tip {
   font-family: var(--font-family-base);
   font-size: 0.875rem;
}
.wpcf7 form .wpcf7-response-output {
   margin: 1.25em 0 1rem 0;
   padding: 0.75rem 1.25rem;
   border-radius: 0.5rem;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
   color: var(--bs-warning-text-emphasis);
   background: var(--bs-warning-bg-subtle);
   border-color: var(--bs-warning-border-subtle);
}
.wpcf7 form.sent .wpcf7-response-output {
   color: var(--bs-success-text-emphasis);
   background: var(--bs-success-bg-subtle);
   border-color: var(--bs-success-border-subtle);
}

/* ============================
# COPYRIGHT PAGE
============================*/
.section-copyright {
   padding-top: clamp(5rem, 4.712rem + 1.282vw, 6.25rem);
   padding-bottom: clamp(3.125rem, 2.692rem + 1.923vw, 5rem);
}
.copyright-block h1 { margin-bottom: 1rem; }
.copyright-block h2 {
   margin-top: clamp(2.5rem, 2.212rem + 1.282vw, 3.75rem);
   margin-bottom: 20px;
}
.copyright-block a { color: var(--color-primary); }
.copyright-block a:hover {
   color: var(--color-primary);
   text-decoration: underline;
}

/* ============================
# 404 PAGE
============================*/
.section-padding-y { padding-block: var(--section-padding-y); }
.error-404 .error-code {
	font-size: clamp(80px, 15vw, 150px);
	font-weight: 800;
	color: var(--color-primary);
	line-height: 1;
	margin-bottom: 1rem;
	opacity: 0.15;
}
.error-404 .page-title {
	margin-bottom: 1.5rem;
	font-weight: 700;
}
.error-404 p {
	font-size: 1.25rem;
	max-width: 600px;
	margin-inline: auto;
	color: #666;
}

@media (max-width: 767px) {
	.error-404 .error-code {
		font-size: 100px;
	}
}