@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

@font-face {
    font-family: 'Calibre';
    src: url('../fonts/Calibre-SemiBold.woff2') format('woff2'),
        url('../fonts/Calibre-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Archivo ExtraCondensed';
    src: url('../fonts/ArchivoExtraCondensed-Black.woff2') format('woff2'),
        url('../fonts/ArchivoExtraCondensed-Black.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --inter: "Inter", sans-serif;
    --archivo: "Archivo", sans-serif;
    --calibre: "Calibre", sans-serif;
    --archivoCondensed: "Archivo ExtraCondensed", sans-serif;
    --bodyfont: var(--inter);
    --headingfont: var(--calibre);


    --siteBlue: #2563eb;
    --siteBrown: #4B443A;
    --siteHeroBg: #1d2022;
    --headingcolor: #1d2022;
    --textcolor: #4B443A;
    --siteOrange: #f97316;
    --brightChrome: #F8FAFC;
    /* --ast-global-color-0: #f88d28;
    --ast-global-color-1: #ca7729; */
    --siteLightGray: #F8F8F8;
    --siteTransition: all 0.3s ease-in-out;
    --transition500: all 0.5s ease-in-out;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    font-family: var(--bodyfont);
    color: var(--siteDarkGray2);
    margin: 0;
    padding: 0;
}

h1,
h2 {
    font-family: var(--headingfont);
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

a:focus,
button:focus,
.button:focus {
    outline: none;
}

/* @media (min-width:1560px) {
    .container {
        max-width: 1440px;
    }
}

@media (min-width:1660px) {
    .container {
        max-width: 1600px;
    }
} */
.inner_container {
    max-width: 1000px;
}

/* Common */
.all_btn {
    display: inline-flex;
    justify-content: center;
    padding: 0.875rem 1.75rem;
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    line-height: 1;
    position: relative;
    color: var(--bs-black);
    border: 2px solid transparent;
    transition: all 250ms ease-in-out;
    z-index: 1;
    column-gap: 8px;
    overflow: hidden;
}

.all_btn:focus {
    color: var(--bs-white);
}

.all_btn_radius {
    border-radius: 0 4px 0 4px;
}

.blue_btn {
    background: var(--siteBlue);
    color: var(--bs-white);
    border-color: var(--siteBlue);
}

.blue_btn:hover {
    background: transparent;
    color: var(--siteBlue);
}

.blue_btn.hover_white:hover {
    border-color: var(--bs-white);
    color: var(--bs-white);
}

.brown_btn {
    background: var(--siteBrown);
    color: var(--bs-white);
    border-color: var(--bs-black);
}

.brown_btn:hover {
    background: transparent;
    border-color: var(--siteBrown);
    color: var(--siteBrown);
}

.orange_btn {
    background: var(--siteOrange);
    color: var(--bs-white);
    border-color: var(--siteOrange);
}

.orange_btn:hover {
    background: transparent;
    color: var(--siteOrange);
}

.white_btn {
    background: var(--bs-white);
    color: var(--bs-black);
    border-color: var(--bs-white);
}

.white_btn:hover {
    background: transparent;
    border-color: var(--bs-white);
    color: var(--bs-white);
}

.white_btn.outline_btn {
    background: transparent;
    color: var(--bs-white);
}

.white_btn.outline_btn:hover {
    background: var(--bs-white);
    color: var(--bs-black);
}

.black_btn {
    background: var(--bs-black);
    color: var(--bs-white);
}

.black_btn:hover {
    background: transparent;
    border-color: var(--bs-black);
    color: var(--bs-black);
}

.black_btn.outline_btn {
    background: transparent;
    color: var(--bs-black);
    border-color: var(--bs-black);
}

.black_btn.outline_btn:hover {
    background: var(--bs-black);
    color: var(--bs-white);
}

.white_btn.outline_btn {
    background: transparent;
    color: var(--bs-white);
    border-color: var(--bs-white);
}

.white_btn.outline_btn:hover {
    background: var(--bs-white);
    color: var(--siteBlue);
}

.rich_black_btn.outline_btn {
    background: transparent;
    color: #020617;
    border-color: #020617;
}

.rich_black_btn.outline_btn:hover {
    background: #020617;
    border-color: #020617;
    color: var(--bs-white);

}

.rich_black_btn.big_width_btn {
    max-width: 280px;
    width: 100%;
}


/* =================== 
    Common Style 
=================== */
[class^="text_box"] p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--textcolor);
    margin-bottom: 1.5rem;
}

[class^="text_box"] ul {
    margin: 0;
    padding-left: 1rem;
}

[class^="text_box"][class*="_sm"] :is(p, li) {
    font-size: 1rem;
    line-height: 1.65;
}

[class^="text_box"][class*="_md"] :is(p, li) {
    font-size: 1.125rem;
    line-height: 1.65;
}

[class^="text_box"][class*="_lg"] :is(p, li) {
    font-size: 1.25rem;
    line-height: 1.65;
}

[class^="text_box"][class*="_xl"] :is(p, li) {
    font-size: 1.375rem;
    line-height: 1.56;
}

[class^="text_box"][class*="_xxl"] :is(p, li) {
    font-size: 1.5rem;
    line-height: 1.56;
}


[class^="text_box"] p:last-child {
    margin-bottom: 0;
}

[class^="text_box"][class*="_light"] p {
    color: var(--bs-white);
}

[class^="text_box"] a {
    color: var(--primary);
}

[class^="text_box"] a:hover {
    text-decoration: underline;
}



.common_vertical_padding {
    padding-top: 6.25rem;
    padding-bottom: 6.25rem;
}

.common_light_bg {
    background: var(--siteLightGray);
}

.section_head h2 {
    font-size: clamp(1.65rem, 2.5vw + 0.5rem, 3rem);
    line-height: 1.2;
    font-weight: 700;
    text-transform: capitalize;
    text-wrap: balance;
}

.section_head h3 {
    font-size: clamp(1.375rem, 2.5vw + 0.5rem, 1.5rem);
    line-height: 1.4;
    font-weight: 700;
    text-wrap: balance;
}

.not_balance h2,
.not_balance h3 {
    text-wrap: unset;
}

/* .section_head_redbar h2 {
    padding-top: 15px;
    position: relative;
} */

/* .section_head_redbar h2:after {
    content: "";
    width: clamp(50px, 7vw + 0.5rem, 80px);
    height: 3px;
    background-color: var(--siteRed);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
} */

.section_head h2 :is(span, b) {
    font-weight: inherit;
    position: relative;
    z-index: 1;
    color: var(--siteOrange);
}

.section_head h3 :is(span, b) {
    color: var(--siteOrange);
}

.section_head h5 {
    font-size: clamp(1rem, 3vw + 0.5rem, 1.375em);
    line-height: 1.4;
    font-weight: normal;
    font-family: var(--headingfont);
}

.section_head p {
    font-size: 1.125em;
    line-height: 1.56;
    margin-top: 1.875rem;
}

.section_head p:last-child {
    margin-bottom: 0;
}

.section_head_small :is(h3, h4) {
    font-size: 2.12em;
    font-weight: 800;
}

.section_head_small :is(h3, h4) :is(span, b, strong) {
    font-weight: 800;
    color: var(--siteOrange);
}

.section_head_big h2 {
    font-size: clamp(2rem, 3vw + 0.5rem, 4rem);
}

.section_head h6 {
    font-size: 1rem;
    letter-spacing: clamp(4px, 1vw, 10px);
    font-weight: 700;
    color: var(--bs-black);
}


.section_head_dark :is(h2, h3, h4) {
    color: var(--bs-black);
}

.section_head_dark p {
    color: var(--bs-black);
}

.section_head_dark h4 {
    color: var(--primary);
}

.section_head_light :is(h2, h3, h4, h5, h6) {
    color: var(--bs-white);
}

.section_head_light p {
    color: var(--bs-white);
}

.section_head_light h4 {
    color: var(--primary-light);
}

.bright_chrome_bg {
    background-color: var(--brightChrome);
}


/* =================== 
    main_header
=================== */
.header_top {
    background: #0f172a;
    padding: 0.7rem 0;
}

.ht_cta a {
    color: var(--bs-white);
    font-size: 0.875rem;
    display: flex;
    column-gap: 0.5rem;
    align-items: center;
    transition: var(--siteTransition);
}

.ht_right .ht_cta {
    transition: var(--siteTransition);
}

.ht_right .ht_cta:hover a {
    color: var(--siteOrange);
}

.main_header {
    background: var(--bs-white);
    padding: 1rem 0;
}

.logo {
/*     max-width: 270px; */
	max-width: 90px;
}
.logo a{
	display: block;
}

.main_nav>ul {
    column-gap: 2.2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.main_nav>ul>li>a {
	display: block;
    font-size: 1rem;
    font-weight: 500;
    color: var(--bs-black);
    transition: var(--siteTransition);
    padding: 1rem 0;
    text-transform: uppercase;
}

.main_nav ul li a:hover {
    color: var(--siteBlue);
}

@media (min-width: 992px){
	/* Dropdown */
	.main_nav li {
		position: relative;
	}

	.has_dropdown>a {
		display: flex;
		align-items: center;
		gap: 6px;
	}

	.dropdown_icon {
		font-size: 12px;
		transition: var(--siteTransition);
	}

	.sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 240px;
		background: #ffffff;
		border-radius: 8px;
		padding: 10px 0;
		list-style: none;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
		opacity: 0;
		visibility: hidden;
		transform: translateY(10px);
		transition: all 0.3s ease;
		z-index: 99;
	}
	.menu-item-has-children:last-child .sub-menu{
		left: auto;
		right: 0;
	}

	.sub-menu li a {
		display: block;
		padding: 10px 16px !important;
		color: var(--bs-black);
		text-decoration: none;
		font-size: 1rem;
	}

	.sub-menu li a:hover {
		background: #f1f5f9;
	}

	.menu-item-has-children:hover .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.menu-item-has-children:hover .dropdown_icon {
		transform: rotate(180deg);
	}

	/* WP Menu Dropdown */

	/* Parent menu item */
	.main_menu_ul > li.menu-item-has-children > a {
		position: relative;
		padding-right: 18px;
	}

	/* Arrow */
	.main_menu_ul > li.menu-item-has-children > a::after {
		content: "\f107";
		font-family: "Font Awesome 7 Free";
		font-weight: 900;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		transition: var(--siteTransition);
	}
	.main_menu_ul > li.menu-item-has-children:hover > a::after {
		transform: translateY(-50%) rotate(-180deg);
	}
	
	.menu_expand{
		display: none;
	}
}

.mobile_toggle {
    width: 28px;
    height: 20px;
    position: relative;
    cursor: pointer;
    z-index: 1101;
}

.mobile_toggle span {
    position: absolute;
    height: 3px;
    width: 100%;
    background: #0a1b2a;
    left: 0;
    transition: 0.3s;
}

.mobile_toggle span:nth-child(1) {
    top: 0;
}

.mobile_toggle span:nth-child(2) {
    top: 8px;
}

.mobile_toggle span:nth-child(3) {
    bottom: 0;
}

/* Cross animation */
.menu_open .mobile_toggle span:nth-child(1) {
    transform: rotate(45deg);
    top: 8px;
}

.menu_open .mobile_toggle span:nth-child(2) {
    opacity: 0;
}

.menu_open .mobile_toggle span:nth-child(3) {
    transform: rotate(-45deg);
    bottom: 8px;
}

/* ---------------- OVERLAY ---------------- */
.menu_overlay {
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / 17%);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    z-index: 1099;
}

.menu_open .menu_overlay {
    opacity: 1;
    visibility: visible;
}


/* ===================
    Banner Section
=================== */
.banner_lr_content_box {
    padding: 4rem 5rem 4rem 0;
}

.home_banner_section h1,
h1 {
    font-size: clamp(2rem, 5vw + 1rem, 3.2rem);
    line-height: 1.2;
    color: var(--bs-white);
    margin-bottom: 1.5rem;
}

.home_banner_section h1 b,
h1 b {
    color: var(--siteOrange);
}

.banner_wrap {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    min-height: clamp(350px, 50vw, 85vh);
}

.banner_wrap::after {
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(1, 6, 48, 0.646);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.leftright_img_box {
    width: 50%;
    height: 100%;
}

.certificate_img li {
    max-width: 80px;
}

.certificate_img img {
    aspect-ratio: 1 / 1.1;
	object-fit: scale-down;
}

.play_button {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.play_button_outer {
    width: 76px;
    height: 76px;
    background: var(--bs-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.play_button_inner {
    width: 62px;
    height: 62px;
    background: var(--siteOrange);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.play_button_inner i {
    color: var(--bs-white);
    font-size: 28px;
}


/* ===================
    Key Points
=================== */
/* .key_points .col-lg-3:not(:last-child) {
    border-right: 1px solid #d1d5db;
} */


.key_points_icon {
    min-height: 80px;
}

.key_points_icon img {
    max-width: 80px;
}

.key_points_content h3 {
    font-size: 1.375rem;
    line-height: 1.2;
    font-weight: 600;
    color: var(--bs-black);
}

/* ===================
    Trusted Section
=================== */
.trusted_section .section_head h5 {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--siteBlue);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.trusted_content_box h2 {
    font-size: clamp(1.5rem, 3vw + 0.5rem, 2.375rem);
    line-height: 1.2;
    font-weight: 600;
    color: var(--bs-black);
}


.orange_line h2::after {
    content: "";
    width: 100px;
    height: 1px;
    background-color: var(--siteOrange);
    display: inline-block;
    margin-top: 6px;
    margin-left: 0.875rem;
}

.years_text h2 {
    font-size: 8.3rem;
    line-height: 1.2;
    font-weight: 800;
    font-family: var(--archivoCondensed);
    text-transform: uppercase;
    background-image: url("https://graylineglobal.com/supreme-coating/wp-content/uploads/2026/01/clip-mask-img.webp");
    background-size: contain;
    background-position: top;
    background-repeat: repeat;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    overflow: hidden;
    -webkit-text-stroke: 3px var(--bs-white);
    filter: drop-shadow(2px 4px 2px rgba(0, 0, 0, 0.19));
}

.trusted_img {
    border-radius: 10px;
}

.trusted_img img {
    border-radius: inherit;
    min-height: 450px;
    object-fit: cover;
}

/* ===================
    We Offer Section
=================== */

.we_offer_section {
    background-image: url(../img/we-offer-bg-2.png);
    background-color: #eaeef2;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.common_card {
    background-color: var(--bs-white);
    border-radius: 10px;
    transition: var(--siteTransition);
    padding: 1rem;
    height: 100%;
}

.common_card_img {
    display: block;
    width: 100%;
    margin-bottom: 2rem;
    border-radius: 8px;
    overflow: hidden;
}

.common_card_img img {
    aspect-ratio: 3/2;
    transition: var(--siteTransition);
    border-radius: inherit;
}

.common_card:hover .common_card_img img {
    transform: scale(1.05);
}

.we_offer_slider .swiper-slide {
    height: auto;
}



.common_card_content {
    padding: 0 1rem 1rem 1rem;
}

.common_card_content h3,
.common_card_content h3 a{
    font-size: 1.25rem;
    line-height: 1.2;
    font-weight: 600;
    color: var(--bs-black);
    margin-bottom: 1rem;
    transition: var(--siteTransition);
    display: inline-block
}
.common_card_content h3 a{
    margin-bottom: 0;
}

.common_card_content h3 a:hover{
    color: var(--siteOrange);
}

.common_card_content p {
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--bs-black);
    margin-bottom: 1rem;
}

.common_card_content a {
    font-size: 1rem;
    line-height: 1.4;
    color: var(--siteBlue);
    transition: var(--siteTransition);
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
    column-gap: 5px;
}

.common_card_content a:hover {
    color: var(--siteOrange);
}



.we_offer_pagination {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 40px;
}

.we_offer_prev,
.we_offer_next {
    width: 48px;
    height: 48px;
    border: 2px solid #111;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: transparent;
}

.we_offer_prev i,
.we_offer_next i {
    font-size: 18px;
    color: #111;
}

/* Hover effect */
.we_offer_prev:hover,
.we_offer_next:hover {
    background: #111;
}

.we_offer_prev:hover i,
.we_offer_next:hover i {
    color: #fff;
}

/* Disabled state (optional) */
.swiper-button-disabled {
    opacity: 0.4;
    pointer-events: none;
}



/* ===================
    Education Section
=================== */

.education_section {
    background-color: #0f172a;
}

.education_section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(#242b3c 2px, transparent 2px), linear-gradient(to right, #242b3c 2px, transparent 2px);
    background-size: 10px 10px;
    background-color: #0f172a;
    opacity: 0.4;
}

.education_lr_content {
    padding-right: 3rem;
    padding-top: 7rem;
    padding-bottom: 7rem;
}

.education_section h5 {
    color: var(--siteBlue);
    text-transform: uppercase;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 1px;
}

.education_list img {
    max-width: 56px;
}

.education_list ul li {
    margin-bottom: 2rem;
}

.education_list_content h4 {
    font-size: 1.25rem;
    line-height: 1.2;
    font-weight: 600;
    color: var(--bs-white);
    margin-bottom: 0.5rem;
}

.education_list_content p {
    font-size: 1rem;
    line-height: 1.4;
    color: var(--bs-white);
    margin-bottom: 0;
}


.img_label {
    background: #f7f7f5;
    padding: 1rem 2.5rem;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.img_label img {
    max-width: 50px;
}

.img_label h4 {
    font-size: 1.5rem;
    line-height: 1.2;
    font-weight: 500;
    color: var(--bs-black);
    margin-bottom: 0;
    text-transform: uppercase;
    letter-spacing: 5px;
}

.img_label h4 b {
    color: var(--siteOrange);
}

.sticker_img {
    max-width: 250px;
    position: absolute;
    top: 5%;
    left: 5%;
}

/* ===================
    Work Section
=================== */

.work_section {
    background-image: url(../img/our-work-bg-2.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 5rem 0;
}

.work_tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
}

.work_tab {
    background: none;
    border: none;
    font-weight: 600;
    padding-bottom: 8px;
    font-size: 1rem;
    position: relative;
    cursor: pointer;
    text-transform: uppercase;
}

.work_tab.active::after {
    content: "";
    width: 100%;
    height: 2px;
    background: #0d6efd;
    position: absolute;
    left: 0;
    bottom: 0;
}

.work_tab_content {
    display: none;
}

.work_tab_content.active {
    display: block;
}

.work_card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    height: 338px;
}

.work_card.large {
    height: 700px;
}

.work_card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.work_overlay {
    position: absolute;
    inset: 0;
    /* background: linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)); */
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 1;
}

.work_overlay::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(1deg, #020617fa, #0b122000);
    z-index: -1;
}

.work_overlay h4 {
    color: #fff;
    font-size: 16px;
    margin: 0;
}

.work_tag {
    color: #ff8c00;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 6px;
}

.view_btn a {
    font-size: 1rem;
    font-weight: 700;
    color: var(--siteBlue);
    text-transform: capitalize;
    transition: var(--siteTransition);
}

.view_btn a:hover {
    color: var(--siteOrange);
}

/* =====================
    Testimonial Section
=========================*/

.testimonial_section {
    background: #f8fafc;
}

.testimonial_title {
    font-weight: 700;
}

.testimonial_card {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    height: 100%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.testimonial_stars {
    color: #fbbf24;
    font-size: 18px;
    margin-bottom: 12px;
}

.testimonial_text {
    font-size: 14px;
    color: #475569;
    margin-bottom: 20px;
    font-style: italic;
}

.testimonial_user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.testimonial_user img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
}

.testimonial_user strong {
    display: block;
    font-size: 14px;
}

.testimonial_user span {
    font-size: 12px;
    color: #64748b;
}

.testimonial_link {
    color: var(--siteBlue);
    font-weight: 600;
    text-decoration: none;
    text-decoration: underline;
    transition: var(--siteTransition);
}

.testimonial_link:hover {
    color: var(--siteOrange);
}

/* =====================
    Why Choose Section
========================= */

.why_choose_section {
    background: linear-gradient(135deg, #020617, #0b1220);
    color: #fff;
}

.why_choose_heading h3 {
    text-wrap: unset;
    font-size: clamp(1.125rem, 2.5vw, 1.75rem);
}

.why_choose_list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.why_choose_list ul li {
    font-size: 1.125rem;
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    position: relative;
    padding-left: 36px;
}

.why_choose_list ul li::before {
    content: "\f00c";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    font-size: 0.75rem;
    color: #030818;
    width: 1.375rem;
    height: 1.375rem;
    background: #ff7a00;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* .why_choose_list strong {
    display: block;
    font-weight: 600;
}

.why_choose_list p {
    margin: 0;
    font-size: 14px;
    color: #cbd5e1;
} */

/* Right Card */
.service_area_card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 30px;
    border: 1px solid #ffffff3b;
}

.service_area_title {
    font-weight: 700;
    margin-bottom: 10px;
}

.service_area_desc {
    font-size: 14px;
    color: #cbd5e1;
    margin-bottom: 20px;
}

.service_area_list ul {
    list-style: none;
    padding: 0;
}

.service_area_list ul li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 8px;
    font-size: 14px;
}

.service_area_list ul li::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    background-image: url("https://graylineglobal.com/supreme-coating/wp-content/uploads/2026/01/Symbol18.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
}


.service_area_map {
    width: 100%;
    height: 150px;
    border-radius: 1rem;
    overflow: hidden;
}

.service_area_map iframe {
    width: 100%;
    height: 100%;

}


/* .service_area_map img {
    width: 100%;
    display: block;
} */


/* ===================
    Estimate Section
=================== */
.estimate_section .section_head {
    margin-bottom: 5rem;
}

.estimate_phone {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 1rem 5rem;
    background: var(--bs-white);
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 0 0 10px 10px;
    z-index: 1;
    width: 60%;
}

.estimate_phone_icon {
    color: var(--siteOrange);
    font-size: 26px;
}

.estimate_phone_number {
    font-size: 26px;
    font-weight: 700;
    color: var(--siteBlue);
    text-decoration: none;
}

.estimate_form_wrap {
    background: #f7f9fb;
    padding: 80px 60px 40px 60px;
    border-radius: 16px;
}

/* 
.estimate_input,
.estimate_textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 14px;
}

.estimate_textarea {
    min-height: 140px;
    resize: none;
}

.estimate_upload {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid #d1d5db;
    background: var(--bs-white);
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    color: #6b7280;
}

.estimate_upload svg {
    color: #111827;
}

.estimate_privacy {
    font-size: 13px;
    color: #6b7280;
}

.estimate_form_wrap select.estimate_input {
    width: 100%;
    border: 1px solid #d1d5db;
    font-size: 15px;
    color: #767676;
    background-color: var(--bs-white);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23374151' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 14px 8px;
}

.estimate_form_wrap select.estimate_input option[disabled] {
    color: #9ca3af;
}

.estimate_form_wrap select.estimate_input:focus {
    outline: none;
    border-color: var(--siteBlue);
} */

.estimate_form input,
.estimate_form textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 14px;
}

.estimate_form input.form-control,
.estimate_form textarea.form-control {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 14px;
    box-shadow: none;
}

.estimate_form input.form-control:focus,
.estimate_form textarea.form-control:focus {
    outline: none;
    box-shadow: none;
    border-color: var(--siteBlue);
}

.estimate_form select.form-control {
    width: 100%;
    border: 1px solid #d1d5db;
    font-size: 15px;
    color: #767676;
    padding: 14px 16px;
    background-color: var(--bs-white);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23374151' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 14px 8px;
}

.estimate_form label.form-control {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid #d1d5db;
    background: var(--bs-white);
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    color: #6b7280;
}

.estimate_form textarea.form-control {
    min-height: 140px;
    resize: none;
}

.estimate_sub_btn {
    position: relative ! important;
}

.estimate_sub_btn .wpcf7-spinner {
    position: absolute !important;
    top: 30% !important;
    left: 50% !important;
    transform: translate(50%, 50%);
}

.estimate_upload {
    min-height: 50px;
    position: relative;
    width: 100%;
    padding: 16px;
    border-radius: 4px;
    background: #fff;
    font-size: 14px;
    box-shadow: none;
    border: 1px solid #d1d5db;
    cursor: pointer;
    color: #6c6c6c;
}

.estimate_upload::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 0;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 4px;
    color: #3a2b2b;
    transform: translateY(50%);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'><path fill='currentColor' d='M19 15v4H5v-4H3v4a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-4z'/><path fill='currentColor' d='M11 15h2V7h3l-4-4-4 4h3z'/></svg>");

}

.estimate_upload span.wpcf7-form-control-wrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.estimate_upload input {
    padding: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
}

/* ===================
    Footer Section
=================== */
.main_footer {
    background: linear-gradient(135deg, #020617, #0b1220);
    color: #cbd5e1;
    padding: 80px 0 60px;
}

.footer_logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    color: #fff;
}

.footer_logo img {
/*     width: 48px; */
	width: 70px;
}

.footer_badges {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.footer_badges li {
    display: flex;
    align-items: center;
}

.footer_badges img {
    max-height: 50px;
    width: auto;
}

.footer_title {
    color: #fff;
    font-weight: 600;
    margin-bottom: 16px;
}

.footer_list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer_list li {
    color: var(--bs-white);
    font-size: 1rem;
    font-weight: 400;
}

.footer_list li:not(:last-child) {
    margin-bottom: 1.375rem;
}

.footer_list li i {
    margin-right: 10px;
}

.footer_list a {
    display: inline-block;
    color: var(--bs-white);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 400;
    transition: var(--siteTransition);
}

.footer_list a:hover {
    color: var(--siteOrange);
}

.footer_bottom {
    border-top: 1px solid #1e293b;
    padding-top: 20px;
    text-align: center;
}

.footer_bottom_links {
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    align-items: center;
}

.footer_bottom_links a {
    color: #94a3b8;
    font-size: 1rem;
    font-weight: 400;
    text-decoration: none;
    margin: 0 8px;
    transition: var(--siteTransition);
}

.footer_bottom_links a:hover {
    color: #fff;
}

.footer_copy {
    font-size: 14px;
    color: #64748b;
}
.footer_copy a{
	color: #64748b;
	transition: var(--siteTransition);
	text-decoration: underline;
}
.footer_copy a:hover{
	color: var(--bs-white);
}

/* ==========================
    Residential Page
=========================== */
.residential_banner_section .section_head h3 {
    font-size: 1.875rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--bs-white);
}

.residential_epoxy_section {
    background-image: url("../img/we-offer-bg-2.png");
    background-color: #eaeef2;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 80px 0 140px;
}

.epoxy_image_wrap {
    position: relative;
    max-width: 520px;
}

.epoxy_img {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
    background: #fff;
}

.epoxy_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
}

.epoxy_img_top {
    width: 80%;
    height: 480px;
}

.epoxy_img_bottom {
    width: 100%;
    max-width: 300px;
    height: 300px;
    position: absolute;
    bottom: -70px;
    right: -40px;
    z-index: 3;
    filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.2));
    border: 3px solid #fff;
}

.epoxy_dots {
    position: absolute;
    right: 12%;
    top: 10%;
    width: 235px;
    height: 470px;
    background-image: radial-gradient(#667991 2px, transparent 2px);
    background-size: 10px 10px;
    background-position: center;
    background-repeat: repeat;
    z-index: 1;
}

/* .epoxy_content h2 {
    font-size: 38px;
    margin-bottom: 30px;
} */


/*  Why Epoxy Section */
.why_epoxy_card {
    background: #f9f9f9;
    padding: 2rem 1.375rem;
    text-align: center;
    border-radius: 10px;
    height: 100%;
    transition: transform .3s ease, box-shadow .3s ease;
}

.why_epoxy_card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}

.why_epoxy_card .icon {
    margin-bottom: 18px;
}

.why_epoxy_card .icon img {
    height: 50px;
	width: auto;
}

.why_epoxy_card h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--bs-black);
}

.why_epoxy_card p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--bs-black);
    margin-bottom: 0;
}
.why_epoxy_card ul{
    padding-left: 1.5rem;
    margin: 0;
}
.why_epoxy_card ul li{
    margin-bottom: 1rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--bs-black);
    padding-left: 0.6rem;
    text-align: left;
    position: relative;
}
.why_epoxy_card ul li:last-child{
    margin-bottom: 0;
}
.why_epoxy_card ul li::before{
    content: "\f00c";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    color: var(--siteOrange);
    position: absolute;
    left: -20px;
    top: 0;
}

.why_epoxy_grid .row>[class*="col-"] {
    margin-bottom: 24px;
}


/*  */

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


/* FAQ Section */

.faq_accordion {
    max-width: 80%;
    margin: 0 auto;
}

.faq_item {
    border-bottom: 1px solid #dcdcdc;
    padding: 1rem 0;
}

.faq_item:last-child {
    border-bottom: none;
}

.faq_question {
    width: 100%;
    background: none;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    font-weight: 600;
    color: #0c1324;
    cursor: pointer;
    padding: 1rem 0;
    transition: var(--siteTransition);
}

.faq_question span:first-child {
    max-width: calc(100% - 40px);
    text-align: left;
}

.faq_icon {
    width: 12px;
    height: 12px;
    border-right: 2px solid #0c1324;
    border-bottom: 2px solid #0c1324;
    transform: rotate(45deg);
    transition: transform .3s ease;
}

.faq_item.active .faq_icon {
    transform: rotate(-135deg);
}

.faq_answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}

.faq_answer p {
    margin-top: 16px;
    font-size: 16px;
    line-height: 1.7;
    color: #555;
}

.faq_item.active .faq_answer {
    max-height: 300px;
}
.faq_answer ul{
    margin: 0;
    padding-left: 1.5rem;
}
.faq_answer ul li{
    margin-bottom: 12px;
    font-size: 16px;
    line-height: 1.4;
    color: #555;
    position: relative;
    padding-left: 0.6rem;
}
.faq_answer ul li:last-child{
    margin-bottom: 0;
}
.faq_answer ul li::before{
    content: "\f00c";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    color: var(--siteOrange);
    position: absolute;
    left: -20px;
    top: 0;
}
.faq_answer a{
    color: var(--siteHeroBg);
    transition: var(--siteTransition);
    text-decoration: underline;
}
.faq_answer a:hover{
    color: var(--siteOrange);
}
/* process_section */

.process_section {
    background: #fff;
}

.process_timeline {
    display: flex;
    justify-content: center;
}

.process_step {
    position: relative;
    width: 20%;
    text-align: center;
    z-index: 1;
}

.process_step::after {
    content: "\f063";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    color: #020617;
    position: absolute;
    bottom: -60px;
    left: 50%;
    font-size: 2rem;
    transform: translateX(-50%);
    display: none;
}

.process_step:last-child::after {
    display: none !important;
}

.process_step h4 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    color: #0c1324;
    max-width: 200px;
    margin: 0 auto;
}

.step_circle {
    width: 80px;
    height: 80px;
    background: #ff7a18;
    color: #fff;
    border-radius: 50%;
    border: 3px solid #fff;
    font-size: 26px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.step_curve {
    position: absolute;
    top: 10px;
    left: 60%;
    width: 200px;
    height: 60px;
    z-index: -1;
}

.step_curve path {
    fill: none;
    stroke: #2d3436;
    stroke-width: 4;
    stroke-dasharray: 6 8;
}

.process_step:nth-child(odd) .step_curve path {
    d: path("M0,30 Q100,80 200,30");
}

.process_step:nth-child(even) .step_curve path {
    d: path("M0,30 Q100,-20 200,30");
}

.process_step:last-child .step_curve {
    display: none;
}

.step_line {
    width: 2px;
    height: 50px;
    background: #9ca3af;
    display: block;
    margin: 0 auto 20px;
}


/* Available Area */

.available_area_btn button,
.available_area_btn a {
    font-size: 1rem;
    line-height: 1.4;
    color: var(--siteBlue);
    transition: var(--siteTransition);
}
.available_area_btn button:hover,
.available_area_btn a:hover {
    color: var(--siteOrange);
}

.available_area_map {
    width: 100%;
    border-radius: 8px;
    box-shadow: 4px 5.5px 14px 0 rgba(0, 0, 0, 0.76);
}

.available_area_map img {
    border-radius: inherit;
    aspect-ratio: 3.5 / 2;
}

.ic_map img {
    aspect-ratio: 3.5 / 2.5;
}


/* homeowners_section */
.homeowners_section {
    background: #0a1438;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    text-align: center;
    position: relative;
    z-index: 1;
}

.homeowners_section::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    opacity: 0.7;
    z-index: -1;
}

.homeowners_sec_content {
    width: 80%;
    margin: 0 auto;
}

.homeowners_title {
    font-size: 44px;
    font-weight: 700;
    margin-bottom: 20px;
}

.homeowners_section .section_head p {
    max-width: 820px;
    margin: 0 auto 60px;
    font-size: 18px;
    line-height: 1.7;
    color: #e5e7eb;
}

.homeowners_badges {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
}

.homeowners_badge img {
    max-width: 80px;
    width: 100%;
    height: 80px;
}


.quote_section {
    background-color: var(--bs-white);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}




/* ===================
    Industrial Page
/* =================== */
.we_serve_section {
    background: #f8fafc;
}

.we_serve_section .section_head h3 {
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    font-weight: 600;

}

.we_serve_section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.we_serve_section li {
    font-size: clamp(1rem, 2.5vw, 1.375rem);
    line-height: 1.4;
    color: var(--bs-black);
    font-weight: 600;
    display: flex;
    gap: 15px;
    margin-bottom: 2rem;
    position: relative;
    padding-left: 2rem;
}

.we_serve_section li:last-child {
    margin-bottom: 0;

}

.we_serve_list li::before {
    content: "\f00c";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    font-size: clamp(1rem, 2.5vw, 1.375rem);
    color: var(--siteOrange);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}



/* ===================
    Winston Page
/* =================== */


.winston_banner_section .banner_wrap::after {
    background: #101b3e;
    opacity: 0.9;
}

.professional_wrapper {
    position: relative;
    border: 1px solid #dcdcdc;
    padding: 60px 40px 40px;
    background: #fff;
}

.professional_title h3 {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bs-white);
    width: auto;
    padding: 0 25px;
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    font-weight: 700;
    color: var(--bs-black);
    text-align: center;
}

.professional_item {
    display: flex;
    gap: 15px;
}

.professional_item img {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.professional_item h4 {
    margin: 0;
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--bs-black);
    line-height: 1.4;
}

/* ===================
    About Page
/* =================== */

.what_we_do_wrapper {
    width: 90%;
    margin: 0 auto;
}

.what_we_do_card {
    background: #f9f9f9;
    padding: 2rem 1.375rem;
    text-align: center;
    border-radius: 10px;
    height: 100%;
    transition: transform .3s ease, box-shadow .3s ease;
}

.what_we_do_card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}

.what_we_do_card .icon {
    margin-bottom: 18px;
}

.what_we_do_card .icon img {
    height: 80px;
}

.what_we_do_card h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--bs-black);
}

.what_we_do_card p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--bs-black);
    margin-bottom: 0;
}


.emblem_img {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}


.we_serve_section {
    background: #f8fafc;
}

.certified_section .section_head h3 {
    font-size: clamp(1.2rem, 2.5vw, 1.875rem);
    font-weight: 600;

}

.certified_list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.certified_list li {
    font-size: clamp(1rem, 2.5vw, 1.125rem);
    line-height: 1.4;
    color: var(--bs-black);
    font-weight: 500;
    margin-bottom: 2rem;
    position: relative;
    padding-left: 3rem;
}

.certified_list li b {
    font-weight: 700;
}

.certified_list li:last-child {
    margin-bottom: 0;

}

.certified_list li::before {
    content: "";
    background-image: url(https://graylineglobal.com/supreme-coating/wp-content/uploads/2026/01/white-check-mark-orange.webp);
    background-size: contain;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===================
    Contact Page
==================*/

.main_contact_section {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1;
}

.main_contact_section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000f2d;
    opacity: 0.8;
    z-index: -1;
}

.contact_section_head h5 {
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    font-weight: 300;
    letter-spacing: 1px;
    color: var(--bs-white);
    margin-bottom: 1rem;
}

.contact_section_head p {
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    font-weight: 400;
    color: var(--bs-white);
    margin-bottom: 0;
}

.contact_form_wrap {
    padding: 0 !important;
    background: none;
}

.main_contact_section .all_btn.blue_btn:hover {
    Border: 2px solid var(--bs-white);
    color: var(--bs-white);
}

.main_contact_section .contact_form .wpcf7-response-output{
	color: red;
}

.get_in_touch_section {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #0f172a;
    z-index: 1;
}

.get_in_touch_section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0f172a;
    opacity: 0.2;
    z-index: -1;
}

.section_title {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 60px;
}

.touch_box {
    background: #ffffff0f;
    padding: 40px 30px;
    border-radius: 8px;
    text-align: center;
    height: 100%;
}

.touch_icon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    column-gap: 1rem;
}

.touch_icon i {
    font-size: 1.5rem;
    color: var(--siteOrange);
}

.touch_icon span {
    color: var(--bs-white);
    font-size: 1.375rem;
    font-weight: 500;
    letter-spacing: 1px;
}

.touch_box .text_box a {
    color: var(--bs-white);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.625rem;
    transition: var(--siteTransition);
}

.touch_box .text_box a:hover {
    color: var(--siteOrange);
}

/* why_contact_section */
.why_contact_section {
    background-color: var(--bs-white);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.wc_badge_img {
    width: 100%;
}

.wc_badge_img img {
    max-width: 130px;
    height: 140px;
    width: 100%;
}

.wc_badge_name h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--bs-black);
    margin: 0;
}


/* ===================
    FAQ Page
==================*/

.faq_banner_section .banner_wrap {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: clamp(350px, 50vw, 65vh);
}

/* Tabs Header */
.faq_tabs_wrapper {
    display: flex;
    align-items: center;
    background: #0c1324;
    border-radius: 8px;
    overflow: hidden;
}

.faq_tabs {
    background-color: #0c1324;
    padding-inline: 40px;
    border-radius: 8px;
}

.faq_tab {
    padding: 0 28px;
    min-height: 60px;
    background: transparent;
    border: none;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    max-width: 300px;
    width: auto;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.faq_tab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -1px;
    width: 1px;
    height: 50%;
    background: var(--bs-white);
    transform: translateY(-50%);
}

.faq_tab.active {
    background: #f9fbfd;
    color: var(--siteOrange);
}

.faq_tab.active::after {
    display: none;
    opacity: 0;
}

.faq_tab:first-child:after {
    display: none;
}


.faq_tab.active::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 1px;
    background: #0c1324;
}

/* Arrows */
[class*="faq_tab_arrow"] {
    cursor: pointer;
    color: var(--siteOrange);
    background: #ebebeb;
    border: none;
    width: 40px;
    height: 60px;
}

.faq_tab_arrow_left {
    border-radius: 8px 0 0 8px;
}

.faq_tab_arrow_right {
    border-radius: 0 8px 8px 0;
}


/* Content */
.faq_tabs_content {
    background: #f9fbfd;
    padding: 40px 0;
    border-radius: 0 0 12px 12px;
}

.faq_tab_content {
    display: none;
}

.faq_tab_content.active {
    display: block;
}



/* ===================
    Gallery Page
==================*/
.gallery_section .section_head h1 {
    color: var(--bs-black);
}

.filter_group_wrap {
    padding: 1rem 2rem;
}

.filter_box {
    background: #0c1324;
    color: #fff;
    border-radius: 12px;
    position: sticky;
    top: 50px;
    align-self: flex-start;
}

.filter_head {
    border-bottom: 1px solid #ffffff4f;
    padding: 2rem 2rem 1rem 2rem;
}

.filter_head h5 {
    font-weight: 600;
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
}


.filter_group:not(:last-child) {
    border-bottom: 1px solid #ffffff4f;
}

.filter_toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0;
    color: #fff;
    text-transform: uppercase;
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    font-weight: 600;
    text-decoration: none;
    position: relative;
    text-wrap: balance;
    line-height: 1.5;
    width: calc(100% - 36px);
    cursor: pointer;
    transition: var(--transition500);
}

.filter_toggle:hover {
    color: var(--siteOrange);
}

.filter_group.active .filter_toggle::after {
    transform: rotate(-135deg);
}

.filter_list {
    list-style: none;
    margin: 0;
    padding-left: 0;
    /* max-height: 0; */
    overflow: hidden;
    transition: max-height .35s ease;
}

.filter_list li {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.5rem 0;
    color: var(--bs-white);
    margin-bottom: 0.875rem;
}

.filter_list li.selected {
    border-bottom: 1px solid var(--siteOrange);
}

.filter_list li a {
    color: var(--bs-white);
}

.filter_list li.selected a {
    color: var(--siteOrange);

}

.portfolio_card {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    height: 100%;
}


.portfolio_card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 2 / 2.1;
}

.portfolio_card.large {
    height: 420px;
}

.card_overlay {
    position: absolute;
    inset: 0;
    /* background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,.2)); */
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #fff;
    z-index: 1;
}

.card_overlay::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(1deg, #020617fa, #0b122000);
    z-index: -1;
}

.portfolio_card.large .card_overlay {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.portfolio_card.large .card_overlay::after {
    bottom: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, #020617fa, #0b122000);
}

.location {
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    font-weight: 700;
    color: var(--siteOrange);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.location i {
    font-size: clamp(1rem, 2.5vw, 1.5rem);
}

.card_overlay h3 {
    font-size: clamp(0.875rem, 2.5vw, 1.2rem);
	margin-bottom: 0;
}

.portfolio_card.large .card_overlay h3 {
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    line-height: 1.3;
    width: 60%;
}

.next_btn a {
    text-decoration: none;
    color: var(--siteBlue);
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    transition: var(--siteTransition);
}

.next_btn a:hover {
    color: var(--siteOrange);
}

/* service_location_section */
.service_location_section {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.sl_img {
    border-radius: 1rem;
    position: relative;
}

.sl_img video {
    border-radius: inherit;
    aspect-ratio: 2 / 1.5;
}

.filter_group.no-children .filter_toggle::after {
    display: none;
}

/* Hide child list by default */
.filter_list {
    display: none;
}

/* Hide arrow for parents with no children */
.filter_group.no-children .filter_toggle::after {
    display: none;
}

/* Optional: show arrow only when children exist */



.clear_filter {
    display: none;
}

.filter_label input:checked+.filter_text {
    font-weight: 700;
    color: var(--siteOrange);
}

.filter_list li:has(input:checked) {
    border-bottom: 1px solid var(--siteOrange);
}

.filter_parent_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.filter_list {
    display: none;
}

.parent_toggle_btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    flex: 0 0 auto;
    margin-left: 8px;
    transition: var(--transition500);
}

.parent_toggle_btn:hover {
    background-color: var(--siteOrange);
    color: #ffffff;
}

.parent_toggle_btn i {
    color: #ffffff;
    transition: all 0.5s ease;
}

.filter_group.active .parent_toggle_btn i {
    transform: rotate(180deg);
    color: var(--siteOrange);
}

.filter_group.active .parent_toggle_btn:hover i {
    color: #ffffff;
}

.filter_list li .filter_label {
    width: 90%;
    cursor: pointer;
}

/* Pagination  */
.page_changing_arrow {
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--siteBlue);
    transition: var(--siteTransition);
    font-size: 16px;
    background-color: transparent;
    border-radius: 50%;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: 600;
    column-gap: 6px;
}

.page_changing_arrow:hover,
.page_changing_arrow:hover svg {
   color: var(--siteOrange) !important;
}

.page_changing_arrow svg {
    transition: var(--transition500);
    fill: var(--siteBlue);
    width: 20px;
    height: 20px;
}

.page_changing_arrow.disabled {
    pointer-events: none;
    opacity: 0.5;
}

.page-numbers {
    font-size: clamp(16px, 1.5vw, 20px);
    transition: var(--transition500);
}

.page-numbers:hover {
    color: var(--siteOrange);
}

.page-numbers.active {
    color: var(--siteOrange);
    transform: scale(1.2);
}

/* ===================
    Content Page
====================*/
.content_section {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1;
}

.content_section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000f2d;
    opacity: 0.8;
    z-index: -1;
}

.content_desc_section{
    background-color: #f8fafc;
}

.toc_box {
    background: linear-gradient(180deg, #0c1324 0%, #0b1b33 100%);
    border-radius: 1rem;
    padding: 1.875rem;
    position: sticky;
    top: 50px;
}

.toc_title {
    text-align: center;
    text-transform: uppercase;
    color: var(--bs-white);
    font-size: clamp(1.375rem, 2.5vw, 1.5rem);
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #ffffff69;
    padding-bottom: 1rem;
}

.toc_list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.toc_list li {
    margin-bottom: 1.5rem;
}
.toc_list li:last-child {
    margin-bottom: 0;
}

.toc_list li a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--bs-white);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    transition: var(--transition500);
}

.toc_list .dot {
    width: 8px;
    height: 8px;
    background: var(--bs-white);
    border-radius: 50%;
    flex-shrink: 0;
    transition: var(--transition500);
}

.toc_list li.active a,
.toc_list li a:hover {
    color: var(--siteOrange);
    position: relative;
}

.toc_list li.active .dot,
.toc_list li a:hover .dot {
    background: var(--siteOrange);
}

.toc_list li.active::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: var(--siteOrange);
    margin-top: 1rem;
}

.terms_privacy_content {
    padding-left: 30px;
}

.terms_privacy_block {
    margin-bottom: clamp(1.5rem, 2.5vw, 3rem);
}


.terms_privacy_block h5 {
    font-size: clamp(1.2rem, 2.5vw, 1.375rem);
    font-weight: 700;
    color: var(--bs-black);
    margin: 1.5rem 0;
}

.terms_privacy_block ul {
    list-style: none;
    padding: 0;
    margin-bottom: 1.5rem;
}

.terms_privacy_block ul li {
    font-size: 1.125rem;
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    line-height: 1.5;
    font-weight: 600;
    position: relative;
    color: var(--bs-black);
    padding-left: 36px;
}

.terms_privacy_block ul li::before {
    content: "\f00c";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    font-size: 0.75rem;
    color: var(--bs-white);
    width: 1.375rem;
    height: 1.375rem;
    background: var(--siteOrange);
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.terms_privacy_block ul li:last-child {
    margin-bottom: 0;
}

/* ================
  Feb 3rd 2026 
=================*/
.get_quote_modal{
	z-index: 99999;
}
.get_quote_modal .modal-body {
    padding-bottom: 40px;
}

.get_quote_modal .modal-header h3 {
    margin-bottom: 0;
}

.get_quote_modal :where(.modal-header, .modal-body) {
    padding: clamp(16px, 1.4vw, 24px) clamp(16px, 1.4vw, 24px);
}

.get_quote_modal .modal-header .btn-close {
    transition: all 0.3s ease;
    background-image: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
}

.get_quote_modal .modal-header .btn-close svg {
    width: 100%;
    height: 100%;
}

.get_quote_modal .modal-header .btn-close:hover {
    background-color: var(--siteBlue);
    opacity: 1;
    color: #ffffff;
}

.get_quote_modal .modal-header .btn-close:hover svg {
    fill: #ffffff;
}

.get_quote_modal .wpcf7-not-valid-tip {
    position: absolute;
    left: 0;
}

.get_quote_modal .form-control {
    height: 100%;
    min-height: 45px;
}

.available_area_btn  .available_btn {
    font-size: 1rem;
    line-height: 1.4;
    color: var(--siteBlue);
    transition: var(--siteTransition);
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
    column-gap: 5px;
    background-color: transparent;
    border: none;
}