/*
Theme Name: Plumbing Works Pro
Theme URI: 
Author: Webnotick 
Author URI: www.Webnotick.com
Description: This is PlumbingPro theme. 
Version: 0.3
Requires at least: 5.1
Requires PHP: 5.6
Tested up to: 5.9
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: the-corporate-business
Tags: translation-ready, custom-background, theme-options, custom-menu, threaded-comments, featured-images, footer-widgets, left-sidebar, editor-style, right-sidebar, full-width-template, two-columns, three-columns, custom-colors, custom-header, custom-logo

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

The Corporate Business  is based on Underscores http://underscores.me/, (C) 2012-2016 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
    ## Links
    ## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
    ## Posts and pages
    ## Comments
# Infinite scroll
# Layouts and Titles
# Media
    ## Captions
    ## Galleries
# Social Icons
# Breadcrumb List
# Homepage Sections
    ## Featured Slider Section
    ## Featured  Section
    ## Featured type_of_work Section
    ## Featured Classes Section
    ## Featured Testimonial Section
    ## Latest Posts Section
# Footer
# Responsive

--------------------------------------------------------------*/

@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: 'Roboto Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Roboto Regular'), url('assets/fonts/robotoregular.woff2') format('woff');
}

@font-face {
    font-family: 'Roboto Semi Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Roboto Semi Bold'), url('assets/fonts/roboto-semi-bold.woff2') format('woff');
}

@font-face {
    font-family: 'Roboto Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Roboto Bold'), url('assets/fonts/roboto-bold.woff2') format('woff');
}

@font-face {
    font-family: 'Aclonica Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Aclonica Regular'), url('assets/fonts/aclonica-regular.woff2') format('woff');
}

h2,
h1,
h3,
h4,
h5,
p a,
span {
    font-family: "system-ui", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

:root {
  --theme-color: #fbbf24;
}

/* Hide Chrome, Edge, Safari scrollbar */
::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}
 
/* Firefox */
html {
    scrollbar-width: none !important;
}  
 
 

 
 
/* button {
    color: var(--theme-color) !important;
    background: var(--theme-color) !important;
    border-color: var(--theme-color) !important;
} */
/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
html {
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-weight: 400;
    background-color: #000;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/** {
    outline: 2px solid red ;
}*/
/* $text-color: #333 !default; // very dark grey */

.container-fluid {
    padding: 0 0 !important;
}

#section-header .border-b-2 {
    border-bottom: 4px solid #000;
}

#content {
    position: relative;
}

#content .entry-content p {
    /*color: #000;*/
    /* margin: 30px 0px 30px;*/
}

#content .wp-block-details p {
    color: #A1A1A1;
    margin: 0px 30px;
}

.boxed-layout,
.frame-layout {
    background-color: #f6f6f6;
}

.boxed-layout #page {
    max-width: 1600px;
    width: 90%;
    margin: 0 auto;
    background-color: #fff;
}

.frame-layout #page {
    max-width: 1600px;
    width: 90%;
    margin: 50px auto;
    background-color: #1a1a1a;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
    display: block;
}

audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

[hidden],
template {
    display: none;
}

a {
    background-color: transparent;
}

abbr[title] {
    border-bottom: 1px dotted;
}

b,
strong {
    font-weight: bold;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    clear: both;
    color: #282828;
    margin: 16px 0;
    line-height: 1.3;
    font-weight: 400;
}

mark {
    background: #ff0;
    color: #111;
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

img {
    border: 0;
}

figure {
    margin: 1em 40px;
}

hr {
    box-sizing: content-box;
    height: 0;
}

pre {
    overflow: auto;
}

code,
kbd,
pre,
samp {
    font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}

button {
    overflow: visible;
}

button,
select {
    text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}

button[disabled],
html input[disabled] {
    cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

input {
    line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

legend {
    border: 0;
    padding: 0;
}

textarea {
    overflow: auto;
}

optgroup {
    font-weight: bold;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

#wp-calendar {
    display: table;
    width: 100%;
    margin-bottom: 0;
}

tbody {
    text-align: left;
}

tr {
    border: 1px solid #aaa;
}

td,
th {
    padding: 5px;
    font-weight: 400;
}

td#next {
    text-align: right;
}

.social-links a[href*="twitter.com"]:before {
    content: "\e61b";
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
textarea {
    color: #666;
    font-size: 16px;
    line-height: 28px;
    word-wrap: break-word;
}

p {
    margin: 0 0 1em;
}

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

blockquote {
    margin: 0 1.5em;
}

address {
    margin: 0 0 1.5em;
}

.md-0 {
    margin: 0 0;
}

.pd-0 {
    padding: 0 0;
}

pre {
    background: #f6f6f6;
    font-size: 15px;
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1.6em;
}

code,
kbd,
tt,
var {
    font-size: 15px;
    font-size: 0.9375rem;
}

abbr,
acronym {
    border-bottom: 1px dotted #666;
    cursor: help;
}

mark,
ins {
    background: #fff9c0;
}

big {
    font-size: 125%;
}

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
html {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

*,
*:before,
*:after {
    /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
    box-sizing: inherit;
}

body {
    background: #fff;
    /* Fallback for when there is no custom background color defined. */
    overflow-x: hidden;
    counter-reset: my-sec-counter;
}

blockquote {
    font-size: 18px;
    line-height: 35px;
    position: relative;
    margin: 0;
}

blockquote.alignright {
    padding-right: 0;
    margin-bottom: 14px;
}

hr {
    background-color: #ccc;
    border: 0;
    height: 1px;
    margin-bottom: 1.5em;
}

ul,
ol {
    margin: 0;
    padding-left: 1.5em;
}

ul {
    list-style: disc;
}

ol {
    list-style: decimal;
}

li>ul,
li>ol {
    margin-bottom: 0;
    margin-left: 0.5em;
}

dt {
    font-weight: bold;
    margin-bottom: 1em;
}

dd {
    margin: 0 1.5em 1.5em;
}

img {
    height: auto;
    /* Make sure images are scaled correctly. */
    max-width: 100%;
    /* Adhere to container width. */
    vertical-align: middle;
}

figure {
    margin: 0;
    /* Extra wide images within figure tags don't overflow the content area. */
}

table {
    margin: 0 0 1.5em;
    width: 100%;
    display: inline-block;
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    /* background: #01549a;*/
    /* box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; */
    border-radius: 0;
    /* padding: 10px 45px;*/
    /* margin: 5px 0 5px 0px; */
    text-align: center;
    position: relative;
    display: inline-block;
    transition: 0.5s;
    /* color: #fff;*/
    transition: all 0.5s ease-in-out;
    border: none;
    font-weight: 300;
    font-size: 18px;
    letter-spacing: 0.59px;
    text-transform: uppercase;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
    color: #000;
    /* background-color: #fdc401;*/
    /* border-color: #000;*/
    text-decoration: none;
}

button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
    color: #fff;
    border-color: #000;
    outline: thin dotted;
    text-decoration: none;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
    color: #000;
    border: 1px solid #01549a;
    background-color: #fff;
    padding: 12px;
    width: 100%;
}

select {
    border: 1px solid #021338;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
    color: #333;
    outline: thin dotted;
}

textarea {
    width: 100%;
}

#respond input[type="checkbox"] {
    min-height: auto;
    height: auto;
    float: left;
    margin-right: 10px;
    width: auto;
}

#respond .comment-form-cookies-consent label {
    display: table;
    margin: 0;
    line-height: 1;
}

#commentform .comment-form-cookies-consent {
    clear: both;
    display: inline-block;
    width: 100%;
    margin-top: 25px;
    margin-bottom: 0;
}

p.form-submit {
    clear: both;
    display: inline-block;
    position: relative;
}

.comment-notes {
    font-size: 14px;
    margin-top: 0;
}

#respond label {
    margin-bottom: 15px;
    display: block;
    color: #3f536d;
    font-weight: 500;
}

#respond input[type="text"],
#respond input[type="email"],
#respond input[type="url"] {
    width: 100%;
}

#commentform p {
    margin-bottom: 21px;
}

#commentform p.comment-form-comment {
    margin-bottom: 0;
}

#commentform p.form-submit {
    margin: 21px 0 0;
}

#comments {
    margin-top: 35px;
    background-color: #fff;
}

#respond {
    margin-top: 35px;
    box-shadow: 0px 3px 22px 0px #00000029;
    padding: 15px;
}

.single-service #respond,
.single-project #respond {
    display: none;
}

.logged-in-as a {
    color: #01549a;
    text-decoration: none;
}

.logged-in-as a:hover,
.logged-in-as a:focus {
    color: #fdc401;
}

.required {
    color: #ff0000;
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
a {
    color: #c42118;
    text-decoration: underline;
}

/* a:hover,
a:focus,
a:active {
    color: #000;
} */

a:focus {
    outline: thin dotted;
}

/*--------------------------------------------------------------
## Header
--------------------------------------------------------------*/
/* ///////top header/ ///////////// */
#section-header {
    width: 100%;
    height: 70px;
    /* background-color: #3f536d; */
    opacity: 1;
    /* margin-top: 1%; */
    /*margin: 0 10% 0;*/
}

/* /////// bottom header ////// */
.bottomheader {
    background-color: #FFFFFF;
    position: relative;
    /*padding: 2px 27px;
    margin: 1.7% 0 1%;*/
    box-shadow: 0px 0px 15px -2px #a3a3a3;
}

#top-bar {
    padding: 5px 0;
    background-color: #c42118;
}

#top-bar a {
    text-decoration: none;
}

#top-bar .widget {
    text-align: center;
    margin-bottom: 0;
    font-size: 16px;
}

#top-bar .widget+.widget {
    margin-top: 15px;
}

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

.widget_address_block ul li {
    display: inline-block;
}

.widget_address_block ul li i {
    margin-right: 8px;
}

#top-bar .widget_address_block ul li {
    color: #fff;
    margin-right: 30px;
}

#top-bar .widget_address_block ul li a {
    color: #fff;
}

#top-bar .widget_address_block ul li a:hover,
#top-bar .widget_address_block ul li a:focus {
    opacity: 0.8;
}

#top-bar .widget ul li:not(:last-child) {
    margin-bottom: 0;
}


/* ======================================================
   FIXED HEADER - BASE (DESKTOP)
====================================================== */
.header-fixed {
    position: fixed !important;
    top: -75px;
    left: 0;
    width: 100%;
    background: #ffffff;
    max-width: 100%;
    z-index: 99999;
    transform: translateY(70px);
    transition: transform 500ms ease, background 200ms ease;
    margin: 0 !important;
    border-bottom: 1px solid #3f536d57;
    box-shadow: 0 0 10px 0 #3F536D;
    padding: 0px 0;
    /* Un-commented and added a safe default vertical padding */
}

/* ======================================================
   TABLET (992px and below)
====================================================== */
@media (max-width: 992px) {
    .header-fixed {
        /* padding: 12px 20px;*/
        /* Add slight side padding, tighten top/bottom */
        /* If you have a smaller top-bar on tablets, you can adjust the drop here */
        top: -71px;
        /* transform: translateY(20px); */
    }
}

/* ======================================================
   MOBILE (768px and below)
====================================================== */
@media (max-width: 768px) {
    .header-fixed {
        /* Force the header flush to the very top to save screen space */
        top: -10px !important;
        transform: translateY(0) !important;
        /* padding: 10px 15px;*/
        /* Keep elements away from the very edge of the glass */
        box-shadow: 0 4px 10px rgba(63, 83, 109, 0.2);
        /* Slightly softer shadow for mobile */
    }
}

/* ======================================================
   SMALL MOBILE (480px and below)
====================================================== */
@media (max-width: 480px) {
    .header-fixed {
        /*padding: 8px 15px;*/
        /* Thinner padding to give users maximum reading room */
    }
}

/* ======================================================
   WORDPRESS ADMIN BAR FIX (Optional)
   If you are logged into WordPress, the admin bar is 46px on mobile.
====================================================== */
@media screen and (max-width: 782px) {
    .admin-bar .header-fixed {
        top: 0px !important;
        /* Pushes it exactly below the WP mobile admin bar */
    }
}

#masthead {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3000;
    width: 100%;
}

#section-header a {
    text-decoration: none;
}

.md-0 {
    padding: 0 0;
    margin: 0 0;
}

.pd-0 {
    padding: 0 0;
}

.site-logo,
#site-identity {
    display: inline-block;
    vertical-align: middle;
}

.site-description {
    color: #fff;
    font-size: 18px;
    padding: 15px 0;
    font-weight: 400;
}

#site-identity .site-title a {
    color: #000;
    font-size: 35px;
    margin: 0 0 0px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

#site-identity .site-description {
    margin: 0;
    line-height: 1.3;
    color: #000;
    padding: 10px 0px;
    letter-spacing: 0.01em;
}

#section-header .site-logo a {
    display: block;
    margin-right: 0px;
}

#section-header .site-logo img {
    width: 100%;
    height: 73.34px;
}

#section-header .header-main {
    height: 95px;
}

#section-header .content-site {
    width: 100%;
    /* padding: 6px 0;*/
}

#section-header .content-site .addicon a {
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 1px;
}

#section-header .addicon {
    margin: 14px 0;
}

#section-header .content-site i,
#section-header .content-site svg {
    /* color: #000;
    padding-right: 8px;
    font-weight: 200;
   background: #ffffff;
    box-shadow: 0px 0px 30px -5px #000;
    margin: 0px 0px 0px 0px;
    width: 20px;
    position: absolute;
    right: 0;
    height: 20px;
    font-size: 5px;
    padding: 6px;*/
}

#section-header .topheadinfo .px-2::after {
    content: '';
    border-left: 2px solid #fff;
    height: 32px;
    margin: 0px 0px 0 10px;
}

.bottomheader .navbox {
    margin: 5px auto;
}

/*-----------Header Social Icon--------------*/

#section-header .social-links a {
    display: inline-block;
    font-size: 18px;
    color: #FFFFFF;
    margin-right: 20px;
    transition: all 0.2s ease-in-out;
    font-family: "Font Awesome 5 Brands" !important;
    padding: 3px 9px;
    margin: 15px 4px;
}

#section-header .social-links a:hover {
    color: #a1a1a1;
}

.social-links a:before {
    content: "\f1d0";
}

.social-links a[href*="facebook.com"]:before,
.social-links a[href*="fb.com"]:before {
    content: "\f39e";
}

.social-links a[href*="twitter.com"]:before {
    content: "\e61b";
}

.social-links a[href*="linkedin.com"]:before {
    content: "\f0e1";
}

.social-links a[href*="plus.google.com"]:before {
    content: "\f0d5";
}

.social-links a[href*="youtube.com"]:before {
    content: "\f167";
}

.social-links a[href*="dribbble.com"]:before {
    content: "\f17d";
}

.social-links a[href*="pinterest.com"]:before {
    content: "\f231";
}

.social-links a[href*="bitbucket.org"]:before {
    content: "\f171";
}

.social-links a[href*="github.com"]:before {
    content: "\f113";
}

.social-links a[href*="codepen.io"]:before {
    content: "\f1cb";
}

.social-links a[href*="flickr.com"]:before {
    content: "\f16e";
}

.social-links a[href$="/feed/"]:before {
    content: "\f09e";
}

.social-links a[href*="foursquare.com"]:before {
    content: "\f180";
}

.social-links a[href*="instagram.com"]:before {
    content: "\f16d";
}

.social-links a[href*="tumblr.com"]:before {
    content: "\f173";
}

.social-links a[href*="reddit.com"]:before {
    content: "\f1a1";
}

.social-links a[href*="vimeo.com"]:before {
    content: "\f194";
}

.social-links a[href*="digg.com"]:before {
    content: "\f1a6";
}

.social-links a[href*="twitch.tv"]:before {
    content: "\f1e8";
}

.social-links a[href*="stumbleupon.com"]:before {
    content: "\f1a4";
}

.social-links a[href*="delicious.com"]:before {
    content: "\f1a5";
}

.social-links a[href*="mailto:"]:before {
    content: "\f0e0";
}

.social-links a[href*="soundcloud.com"]:before {
    content: "\f1be";
}

.social-links a[href*="wordpress.org"]:before {
    content: "\f19a";
}

.social-links a[href*="wordpress.com"]:before {
    content: "\f19a";
}

.social-links a[href*="jsfiddle.net"]:before {
    content: "\f1cc";
}

.social-links a[href*="tripadvisor.com"]:before {
    content: "\f262";
}

.social-links a[href*="foursquare.com"]:before {
    content: "\f180";
}

.social-links a[href*="angel.co"]:before {
    content: "\f209";
}

.social-links a[href*="slack.com"]:before {
    content: "\f198";
}

.social-links a[href*="tiktok.com"]:before {
    content: "\e07b";
}

#section-header .content-site .social-links i {
    font-size: 24px;
    color: transparent;
    margin-right: 12px;
    background: #fff;
}

/*------------------------------------------------*/
#section-header .contact-number {
    display: none;
}

#section-header .contact-number i,
#section-header .contact-number svg {
    margin-right: 5px;
}

#section-header .contact-box {
    float: right;
    background: #c42118;
    border-radius: 19px;
    margin-right: 5em;
    color: #fff;
    text-align: center;
    padding: 10px 30px;
    position: relative;
    bottom: 21px;
}

#section-header .contact-box h3 {
    margin: 0;
    color: #fff;
    font-weight: 600;
    font-size: 21px;
}

#section-header .contact-box p,
.contact-box a {
    margin: 0;
    color: #fff;
    font-weight: 500;
    font-size: 18px;
}

#section-header .contact-header h3 {
    margin: 0;
}

#section-header .contact-header {
    margin-left: 44px;
}

#section-header .contact-header a {
    font-size: 19px;
    color: #fff;
    letter-spacing: 1px;
}

#section-header .contact-header .fas.fa-phone-alt {
    margin-right: 10px;
    color: #c42118;
}

.main-navigation {
    display: block;
    position: relative;
    width: 100%;
}

.main-navigation ul.nav-menu>li>a {
    margin: 0px 3px 0 0;
    overflow: hidden;
    transition: ease-in-out;
    color: #000000;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.53px;
}

/* 1. Reset and Position the Parent */
.main-navigation ul.nav-menu>li {
    position: relative;
    display: inline-block;
}

/* 2. Create the line styling */
.main-navigation ul.nav-menu>li::after {
    content: "";
    position: absolute;
    left: 14px;
    bottom: 12px;
    width: 0;
    height: 2.3px;
    background-color: #00a8cc;
    transition: width 0.3s ease-in-out;
}

/* 3. Make it stay at 71% width for the OPEN page (EXCEPT last child) */
.main-navigation ul.nav-menu>li.current-menu-item:not(:last-child)::after,
.main-navigation ul.nav-menu>li.current-page-ancestor:not(:last-child)::after,
.main-navigation ul.nav-menu>li.current-menu-ancestor:not(:last-child)::after {
    width: 62%;
}

/* 4. Make it grow on HOVER (EXCEPT last child) */
.main-navigation ul.nav-menu>li:not(:last-child):hover::after {
    width: 62%;
}

/* 5. Ensure Active Text matches color (EXCEPT last child) */
.main-navigation ul.nav-menu>li.current-menu-item:not(:last-child)>a {
    color: #01549a !important;
}

.main-navigation .sub-menu li:hover {
    /*margin-left: 20px;*/
}
/*
.main-navigation ul.nav-menu>li>a>i,
.main-navigation ul.nav-menu>li>a>svg {
    width: 45px;
    height: 45px;
    border-radius: 45px;
    line-height: 45px;
    background-color: #a1a1a1;
    display: inline-block;
    vertical-align: middle;
    color: #283B60;
    text-align: center;
}
*/
.main-navigation ul ul {
    background-color: #d9eef6;
    text-align: left;
    padding: 0;
}

.main-navigation ul ul li a {
    padding: 12px 15px;
    background-color: #fff;
    color: #364153;
}

.main-navigation ul ul a:after {
    float: right;
}

.main-navigation ul {
    display: none;
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.main-navigation li {
    position: relative;
}

.main-navigation ul.nav-menu>li>a {
    position: relative;
    /* height: 100%;*/
}

.main-navigation ul.nav-menu>li:hover>a,
.main-navigation ul.nav-menu>li.focus>a {
    color: #f6bb19;
}

.main-navigation form.search-form input {
    background-color: #111;
    border-color: #111;
    color: #111;
    font-weight: 400;
}

.main-navigation a {
    display: block;
    font-weight: 400;
    color: #fff;
    text-transform: capitalize;
    font-size: 16px;
    line-height: 1.5;
}

.main-navigation ul ul {
    float: left;
    position: absolute;
    top: 100%;
    left: -999em;
    z-index: 99999;
}

.main-navigation ul ul ul {
    left: -999em;
    top: 0;
}

.main-navigation li li {
    display: block;
}

.main-navigation ul.nav-menu .current_page_item>a,
.main-navigation ul.nav-menu .current-menu-item>a,
.main-navigation ul.nav-menu .current_page_ancestor>a,
.main-navigation ul.nav-menu .current-menu-ancestor>a {
    color: #1e3a8a;
    /* padding: 5px 9px; */
    border-radius: 15px;
    /* margin-bottom: -6px; */
}

.main-navigation ul.nav-menu>li>a {
    padding: 5px 17px;
}


.main-navigation ul.nav-menu>li:last-child>a {
    /* padding: 5px 0px; 
    color: #fff;
    letter-spacing: 0.56px;
    font-size: 17px;
    background-color: #01549a;
    text-transform: uppercase;*/
}

.main-navigation ul.nav-menu .sub-menu .current_page_item>a,
.main-navigation ul.nav-menu .sub-menu .current-menu-item>a,
.main-navigation ul.nav-menu .sub-menu .current_page_ancestor>a,
.main-navigation ul.nav-menu .sub-menu .current-menu-ancestor>a {
    color: #fff;
    background-color: #fdc401;
    padding: 12px 20px;
    border-radius: 3px;
    margin-bottom: -6px;
}

form.search-form {
    width: 100%;
    max-width: 100%;
    position: relative;
    padding: 0px 17px 10px 0px;
    display: flex;
    justify-content: left;
    align-items: center;
}

.main-navigation form.search-form {
    min-width: 320px;
}

input.search-field {
    height: 45px;
    padding: 0 50px 0 15px;
    width: 100%;
}

.menu-toggle {
    font-size: 8px;
    margin: 0px 0;
    display: block;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 23px !important;
    right: 20px;
    box-shadow: none;
    border-radius: 0;
}

.menu-toggle svg {
    font-size: 20px;
    color: #000000;
}

.menu-toggle.active svg {
    color: #000000;
    width: 20px;
    height: 15px;
}

.menu-toggle,
.menu-toggle.active {
    border: none !important;
    background-color: transparent;
}

.menu-toggle:hover,
.menu-toggle.active:hover {
    border: none !important;
    background-color: transparent;
}

.menu-toggle .menu-icon {
    display: inline-block !important;
}

.menu-toggle .cross {
    display: none !important;
}

.menu-toggle.active .menu-icon {
    display: none !important;
}

.menu-toggle.active .cross {
    display: inline-block !important;
}

.menu-label {
    float: right;
    color: #111;
    padding: 7px 0 0 10px;
    display: none;
}

button.dropdown-toggle {
    padding: 0;
    position: absolute;
    right: 2rem;
    top: 12px;
    z-index: 2;
    background-color: #fff;
    color: #000;
    border: none;
    margin-left: 0px;
    box-shadow: none;
    width: 34px;
    height: 35px;
}

.dropdown-toggle::after {
    display: none !important;
}

button.dropdown-toggle.active i,
button.dropdown-toggle.active svg {
    transform: rotate(-180deg);
    transform-origin: center;
}

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
    margin: 0;
    overflow: hidden;
}

.nav-links .nav-previous a:before,
.nav-links .nav-next a:after,
.nav-links .nav-previous a span:before,
.nav-links .nav-next a span:after {
    content: "\f0d9";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 10px;
    font-size: 18px;
    position: relative;
    top: 1px;
    color: #fac100;
}

.nav-links .nav-previous a span:before {
    content: "";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 10px;
    font-size: 18px;
    position: relative;
    top: 1px;
    color: #fac100;
}

.nav-links .nav-next a:after {
    content: "\f0da";
    margin-left: 10px;
    margin-right: 0;
}

.nav-links .nav-next a span:after {
    content: "";
    margin-left: 10px;
    margin-right: 0;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
    float: left;
    /* width: 50%; */
    position: relative;
    text-align: left;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
    float: right;
    text-align: right;
    /* width: 50%; */
    position: relative;
}

.post-navigation a,
.posts-navigation a {
    background: #ffffff;
    padding: 0px 10px;
    width: fit-content;
    font-weight: 400;
    display: block;
    color: #000;
    text-decoration: none;
    box-shadow: rgba(0, 0, 0, 0.35) 0px -1px 10px;
}

.post-navigation a:hover,
.posts-navigation a:hover,
.post-navigation a:focus,
.posts-navigation a:focus {
    color: #fac100;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.35) 0px -1px 10px;
    transition: all 0.3s ease-in-out;
}

.post-navigation,
.posts-navigation {
    padding: 0;
    position: relative;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
}

.pagination .page-numbers,
.pagination .page-numbers.dots:hover,
.pagination .page-numbers.dots:focus {
    text-align: center;
    line-height: 35px;
    width: 35px;
    height: 35px;
    display: inline-block;
    margin-right: 5px;
    color: #000;
    background-color: #fff;
    overflow: hidden;
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover,
.pagination .page-numbers:focus {
    color: #000;
    background-color: #fff;
    border: 1px solid #a1a1a1;
    border-radius: 0.375rem;
    overflow: hidden;
}

.pagination .page-numbers.prev,
.pagination .page-numbers.next {
    margin-right: 25px;
    width: auto;
    height: auto;
    position: relative;
    top: 2px;
    background-color: transparent;
    color: #000;
}

.pagination .page-numbers.prev:hover,
.pagination .page-numbers.next:hover,
.pagination .page-numbers.prev:focus,
.pagination .page-numbers.next:focus {
    color: #000;
    background-color: #fff;
    border: 1px solid #a1a1a1;
    border-radius: 0.375rem;
}

.pagination .page-numbers.next {
    margin-left: 18px;
    margin-right: 0;
    background-color: transparent;
}

.nav-previous span {
    padding-left: 11px;
    float: left;
    text-align: left;
}

.nav-next span {
    padding-right: 11px;
    float: right;
    text-align: right;
}

.post-navigation span,
.posts-navigation span {
    display: table;
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    word-wrap: normal !important;
    /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
    /* Above WP toolbar. */
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
    outline: 0;
}

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
    display: inline;
    float: left;
    margin-right: 1.5em;
}

.alignright {
    display: inline;
    float: right;
    margin-left: 1.5em;
}

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after,
.footer-widgets-area:before,
.footer-widgets-area:after,
.wrapper:before,
.wrapper:after {
    content: "";
    display: table;
    table-layout: fixed;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after,
.footer-widgets-area:before,
.footer-widgets-area:after,
.wrapper:before,
.wrapper:after {
    clear: both;
}

/*------------------------------------------------------------
Not Found Page
--------------------------------------------------------------*/
#main .no-results {
    text-align: center;
}

#main .no-results form {
    width: 25%;
    max-width: 100%;
    position: relative;
    padding: 0px 17px 10px 0px;
    display: inline-block;
}

#main .no-results form label {
    display: block;
}

#main .no-results form .search-submit {
    height: 45px;
    line-height: 30px;
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    width: 45px;
    padding: 0;
    background: #3F536D;
    color: #fff;
}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget {
    /*margin: 0 0 2em;*/
    width: 100%;
    /*margin: 0 0 2.5em;*/
}

.widget:last-child {
    margin-bottom: 32px;
}

.widget_block h1,
.widget_block h2,
.widget_block h3,
.widget_block h4,
.widget_block h5,
.widget_block h6 {
    margin: 0 0 10px;
}

#colophon .widget.widget_text,
#colophon .secondary.widget_text {
    margin-bottom: 20px;
}

#colophon .widget_block h1,
#colophon .widget_block h2,
#colophon .widget_block h3,
#colophon .widget_block h4,
#colophon .widget_block h5,
#colophon .widget_block h6 {
    color: #fff;
}

#colophon .widget:last-child {
    margin-bottom: 0;
    padding-left: 13px;
    width: 104%;
}

#colophon .widget_block h1,
#colophon .widget_block h2,
#colophon .widget_block h3,
#colophon .widget_block h4,
#colophon .widget_block h5,
#colophon .widget_block h6 {
    color: #fff;
}

/* Widgets Start */
.widget_search,
.widget_recent_entries,
.widget_categories,
.widget_archive,
.widget_recent_comments,
.widget_tag_cloud,
.widget_nav_menu,
.widget_text {
    border: 1px solid;
    border-radius: 41px;
    border-color: whitesmoke;
    /*padding: 24px;*'
    margin-bottom: 30px;
    border-color: #01549a;
    /* padding: 15px; */
}

.widget_search,
.widget_recent_entries,
.widget_categories,
.widget_archive,
.widget_recent_comments,
.widget_tag_cloud,
.widget_nav_menu,
.widget_text {
    background-color: #fff;
}

.widget_search .search-form label {
    width: 80%;
}

.widget_search .search-form .screen-reader-text {
    display: none;
}

.widget-title,
#secondary .widget-title {
    /* padding: 12px 25px;
    background-image: linear-gradient(90deg, #3f536d, #3f3f3f5b); */
    /* background-color: #01549a;*/
    color: #1f2937;
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 0.65px;
    line-height: 29px;
    margin: 0 0 13px;
    text-transform: uppercase;
}



#primary ul li a,
#secondary ul li a {
    text-decoration: none;
    border-bottom: none;
    line-height: 40px;
    color: #959595;
    font-weight: 400;
    font-size: 16px;
}

.edit-link {
    display: none;
}

/* Widgets End */

/* Make sure select elements fit in widgets. */
.widget select {
    max-width: 100%;
    padding: 10px;
    border: none;
    width: 100%;
    max-width: 300px;
}

.widget input {
    padding: 0 15px;
    border: none;
}



/*.widget_search form.search-form button.search-submit {
    color: #fff;
    font-size: 25px;
    line-height: 1;
    height: 50px;
    padding: 0;
    background-color: #fdc401 !important;
    width: 14%;
}

.widget_search form.search-form input[type="search"]:focus {
    border-color: #c42118;
}

form.search-form {
    position: relative;
}

form.search-form input {
    width: 100%;
    padding: 0 40px 0 15px;
    font-weight: 300;
    color: #3f536d;
    font-weight: 500;
    text-transform: uppercase;
}
*/
#wp-calendar tbody td {
    text-align: center;
}

#wp-calendar caption {
    margin-bottom: 15px;
    font-weight: 600;
}

.widget-title {
    font-size: 20px !important;
    margin: 0 0 16px;
    color: #000;
}

.widget_text input {
    padding: 10px 15px;
    border: 1px solid #002434;
    width: 80%;
    margin: 0 40px 16px;
    background-color: #fff;
}

.widget_text .textwidget .wpcf7-submit {
    background-color: #01549a;
    color: #fff;
}

.widget_text .textwidget .wpcf7-submit:hover {
    background-color: #fdc401;
    color: #fff;
}

.wpcf7-spinner {
    display: none;
}

.wpcf7 form .wpcf7-response-output {
    margin: 0.5em 0.5em 1em;
}

.widget li {
    margin-bottom: 12px;
}

.widget .menu {
    width: 96%;
    padding-left: 19px;
}

.widget .menu-services-container li,
.widget .menu-our-services-container li {
    background-color: #C8DCEC;
    position: relative;
    margin-bottom: 24px;
}

#secondary .widget .menu-services-container ul li a,
#secondary .widget .menu-our-services-container ul li a {
    color: #000 !important;
    text-transform: capitalize;
}

#secondary .widget .menu-services-container ul li a:active,
#secondary .widget .menu-our-services-container ul li a:active {
    color: #fdc401 !important;
}

#secondary .widget .menu-services-container ul li a::after,
#secondary .widget .menu-our-services-container ul li a::after {
    content: '\f101';
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    position: absolute;
    right: 9px;
    background: #fff;
    color: #39494E;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 5px;
    bottom: 0;
}

#secondary .widget .menu-services-container ul li a::before,
#secondary .widget .menu-our-services-container ul li a::before {
    width: 10px;
    height: 10px;
    background-color: #01549a;
    content: '';
    transform: rotate(0deg);
    border-radius: 50%;
}

#secondary .widget .menu-projects-container ul li a:active,
#secondary .widget .menu-our-projects-container ul li a:active {
    color: #fdc401;
}

#primary ul li a:hover,
#secondary ul li a:hover,
#primary ul li a:focus,
#secondary ul li a:focus {
    border-bottom-color: #fff;
}

/*
#primary .widget ul li a::before,
#secondary .widget ul li a::before,
#primary .widget ol li a::before,
#secondary .widget ol li a::before {
    display: inline-block;
    margin-left: 1em;
    /* vertical-align: .255em; 
    content: "\f124";
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    color: #fdc401;
    transform: rotate(45deg);
    margin-right: 15px;
}*/
/*
#primary .widget ul li a::after,
#secondary .widget ul li a::after,
#primary .widget ol li a::after,
#secondary .widget ol li a::after {
    content: '. . . . . . . . . . . . .';
}
/*
.widget_contact_info ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#recent-comments-2 li span a::after {
    display: none;
}

#recent-comments-2 li span a::before {
    display: inline-block !important;
}

#recent-comments-2 li a::before {
    display: none !important;
}

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
.sticky {
    display: block;
}

.hentry {
    margin: 0;
}

.updated:not(.published) {
    display: none;
}

.single .byline,
.group-blog .byline {
    display: inline;
}

.page-content,
.entry-content,
.entry-summary {
    margin: 0;
}

.author img {
    display: block;
    text-align: center;
    /* margin: 20px auto; */
}

.page-header span.posted-on {
    margin-bottom: 12px;
    display: inline-block;
    width: 100%;
}

.page-links {
    clear: both;
    margin: 0 0 1.5em;
}

.page-header span.author-name {
    display: block;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    color: #111;
}

.page-header small {
    font-size: 12px;
    color: #c42118;
}

nav.navigation.pagination {
    margin-top: 50px;
    clear: both;
    display: inline-block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.posts-wrapper.col-3 article:nth-child(3n) {
    border-right: 1px solid #e4e4e4;
}

.post-categories a {
    color: #c42118;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: bold;
}

.archive-description {
    color: #fff;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.tags-links {
    margin-bottom: 20px;
    display: inline-block;
}

.tags-links span {
    margin: 0 8px 8px 0;
}

.tags-links span.fw-bold {
    color: #01549a;
}

.tags-links a {
    background: white;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 3px 0px;
    border-radius: 0;
    padding: 8px 10px;
    margin: 0px 0 8px 8px;
    text-align: center;
    position: relative;
    display: inline-block;
    transition: 0.5s;
    color: #01549a;
    transition: all 0.5s ease-in-out;
    border: none;
    font-weight: 400;
}

.tags-links a:hover,
.tags-links a:focus {
    border-color: #000;
    background-color: #fdc401;
    color: #fff;
}

.socialMedia {
    float: right;
}

.socialMedia ul li {
    display: inline-block;
    position: relative;
    margin-bottom: 0 !important;
    padding: 4px 10px !important;
    border: 1px solid;
    border-color: #3f536d;
    border-radius: 50%;
    margin-right: 10px;
    color: #fff;
    background-color: #01549a;
    transition: all ease 0.5s;
    font-size: 18px;
}

#primary .socialMedia ul li a.blgsmedia {
    font-size: 18px;
    color: #fff;
    line-height: 0;
}

.socialMedia ul li:hover {
    background-color: #fdc401;
    /* transform: scale(-20px); */
    transition: all ease 0.5s;
    transform: scale(1.1);
}

.single .date a:before,
.entry-meta .author a:before,
.comments-link a:before {
    content: "\f017";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 5px;
    color: #01549a;
}

.entry-meta .author a:before {
    content: "\f007";
}

.comments-link a:before {
    content: "\f086";
}

.single .date a:before {
    content: "\f017";
}

.cat-links a:before {
    content: "\f02c";
    font-weight: 600;
    font-family: 'Font Awesome 5 Free';
    color: #01549a;
    margin-right: 5px;
}

.entry-meta a,
.entry-meta span:before,
.entry-meta .author:before {
    color: #000;
    text-decoration: none;
    font-weight: 300;
}

.entry-meta a:hover,
.entry-meta a:focus {
    color: #3f536d;
}

.entry-meta {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 0;
    text-decoration: none;
    border-bottom: 1px solid #00000050;
}

.author.vcard {
    margin-left: 5px;
}

.byline {
    visibility: hidden;
}

.byline .author.vcard {
    visibility: visible;
    margin-left: -20px;
}

.single-post .site-main .comment-navigation,
.single-post .site-main .posts-navigation,
.single-post .site-main .post-navigation {
    margin-bottom: 0;
}

.navigation.post-navigation,
.navigation.posts-navigation {
    padding: 10px;
    margin-top: 35px;
}

.post-navigation .previous-article span span,
.posts-navigation .previous-article span span,
.post-navigation .next-article span span,
.posts-navigation .next-article span span {
    display: block;
}

.post-navigation span.previous-article b,
.post-navigations span.previous-article b,
.post-navigation span.next-article b,
.post-navigations span.next-article b {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 10px;
    display: inline-block;
    width: 100%;
}

.post-navigation span.previous-article,
.post-navigations span.previous-article {
    display: table;
}

/* 1. Main Container Setup */
.error-404.not-found {
    max-width: 1000px;
    margin: 5rem auto 0;
    text-align: center;
    padding: 100px 20px;
    background: #fff;
    /* Keeping it clean like your screenshot */
}

/* 2. The Big 404 Number with Animated Gradient */
.error-404.not-found .error-404title {
    /* Plumbing Pro Gradient: Deep Blue to Aqua */
    background: linear-gradient(90deg, #01549a, #00a8cc, #01549a);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    font-size: 180px;
    font-weight: 900;
    line-height: 1;
    margin: 0;
    display: block;

    /* Dual Animation: Flowing color + Gentle Floating */
    animation: flow-gradient 4s linear infinite, float-ui 3.5s ease-in-out infinite;
    filter: drop-shadow(0px 10px 20px rgba(1, 84, 154, 0.1));
}

/* 3. "OOPS! THAT PAGE CAN’T BE FOUND" Gradient Text */
.error-404.not-found .page-title {
    background: linear-gradient(90deg, #01549a 0%, #00a8cc 50%, #01549a 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    font-size: 42px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -1px;
    margin: 20px 0;
    display: inline-block;

    /* Shimmer effect for the title */
    animation: flow-gradient 3.5s linear infinite;
}

/* 4. Sub-description Styling */
.error-404.not-found .page-content p {
    color: #5a6d80;
    font-size: 16px;
    font-weight: 500;
    max-width: 650px;
    margin: 0 auto 40px auto;
    line-height: 1.8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 5. The "Back to Home" Button - Using Theme Blue */
.error-404.not-found a.btn-back-home,
.error-404.not-found .page-content .button {
    display: inline-block;
    background: #01549a;
    color: #fff !important;
    padding: 16px 40px;
    font-weight: 700;
    border-radius: 5px;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(1, 84, 154, 0.2);
}

.error-404.not-found a.btn-back-home:hover {
    background: #00a8cc;
    transform: translateY(-3px);
    box-shadow: 0 15px 25px rgba(0, 168, 204, 0.3);
}

/* --- KEYFRAMES --- */

/* Moves the gradient color from left to right */
@keyframes flow-gradient {
    to {
        background-position: 200% center;
    }
}

/* Gentle vertical floating (buoy effect) */
@keyframes float-ui {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

/* 6. Responsive Fixes */
@media (max-width: 768px) {
    .error-404.not-found .error-404title {
        font-size: 110px;
    }

    .error-404.not-found .page-title {
        font-size: 28px;
    }

    .error-404.not-found {
        padding: 60px 20px;
    }
}

/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
.comment-content a {
    word-wrap: break-word;
}

.bypostauthor {
    display: block;
}

#reply-title,
.comments-title {
    font-size: 42px;
    margin: 0;
}

.comments-title,
#reply-title {
    margin-bottom: 30px;
    font-size: 32px;
    font-weight: 600;
    color: #01549a;
}

#cancel-comment-reply-link {
    float: right;
}

ul.post-categories li:after {
    content: ",";
}

ul.post-categories li:last-child:after {
    display: none;
}

ol.comment-list {
    padding: 0;
    margin: 0 0 30px;
    list-style: none;
}

#comments ol {
    list-style: none;
    margin-left: 0;
    padding: 0;
}

#comments ol.comment-list {
    padding-top: 35px;
    position: relative;
    overflow: hidden;
}

#comments ol.children {
    margin-left: 120px;
}

.says {
    display: none;
}

.comment-meta img {
    width: 60px;
    height: 60px;
    float: left;
    margin-right: 20px;
}

#comments time:before {
    display: none;
}

.comment-body {
    position: relative;
}

.reply {
    text-align: right;
}

#comments article {
    margin-bottom: 30px;
    clear: both;
    padding: 30px;
    background-color: #f6f6f6;
    text-decoration: none;
    /* border-radius: 25px; */
    border: 1px solid #01549a;
}

#comments ol.comment-list>li {
    padding-top: 49px;
}

#comments ol.comment-list>li:first-child {
    padding-top: 0;
}

#comments ol.comment-list>li article:last-child .reply {
    border-bottom: none;
    padding-bottom: 0;
}

.reply a {
    color: #000;
    display: inline-block;
    font-weight: 400;
    padding: 7px 30px;
    position: relative;
    background-color: #C8DCEC;
    border: 2px solid #C8DCEC;
    border-radius: 50px;
    text-decoration: none;
    z-index: 1;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.reply a:hover,
.reply a:focus {
    color: #000;
    background-color: #fdc401;
    border-color: #fdc401;
}

.comment-meta .url,
.comment-meta .fn {
    display: inline-block;
    color: #01549a;
    font-size: 25px;
    text-decoration: none;
    text-transform: capitalize;
}

.comment-meta .url:hover,
.comment-meta .url:focus {
    color: #fdc401;
}

.comment-metadata a,
.comment-metadata a time {
    color: #01549a;
    text-decoration: none;
}

.comment-metadata a:hover,
.comment-metadata a:focus,
.comment-metadata a:hover time,
.comment-metadata a:focus time {
    color: #000;
}

.comment-metadata time {
    font-weight: 500;
}

.comment-metadata {
    display: block;
    margin-bottom: 15px;
}

.comment-content {
    margin-bottom: 10px;
    margin-top: 0;
    padding-left: 80px;
}

.comment-content p {
    font-weight: 400;
    margin-bottom: 1em;
    color: #A1A1A1;
    font-size: 16px;
    line-height: 1.6;
}

/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation,
/* Older / Newer Posts Navigation (always hidden) */
.infinite-scroll.neverending .site-footer {
    /* Theme Footer (when set to scrolling) */
    display: none;
}

/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
.infinity-end.neverending .site-footer {
    display: block;
}

/*--------------------------------------------------------------
# Layouts and titles
--------------------------------------------------------------*/

section {
    position: relative;
    overflow: hidden;
}

.title-section {
    /* text-align: center; */
    margin-bottom: 3em;
    display: flex;
    /* align-items: center; */
    position: relative;
    z-index: 2;
}

.title-section h1 {
    margin: 0;
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: 1px;
    color: #000000;
    border-radius: 0px;
}

.entry-content {
    margin-top: 0;
    position: relative;
    z-index: 1;
}

.main-navigation ul.nav-menu>li:last-child {
    /* box-shadow: 0px 0px 10px -5px #7b7b7b; */
    padding: 3px 10px;
    float: inline-end;


}

.wrapper {
    width: 100%;
    /* max-width: 1430px; */
    margin: 0 0rem;
    padding-left: 15px;
    padding-bottom: 5rem;
    padding-top: 0 !important;
}

.section-gap {
    padding: 5em 0 0;
}

.entry-title,
.section-title {
    font-size: 22px;
    margin: 0 0 6px;
    font-weight: 700;
    word-wrap: break-word;
}

.section-title {
    font-size: 32px;
    margin: 0 0 15px;
    color: #000;
}

.section-subtitle {
    max-width: 600px;
    margin: 0 auto;
}

.entry-title a {
    color: #1e3a8a;
    text-decoration: none;
    font-size: 33px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.entry-title a:hover,
.entry-title a:focus {
    color: #c42118;
}

.post-thumbnail-link {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.align-left {
    text-align: left;
}

.align-center {
    text-align: center;
}

.align-right {
    text-align: right;
}

.btn {
    color: #fff;
    display: inline-block;
    font-weight: 600;
    padding: 8px 25px;
    border-radius: 7px;
    font-size: 21px;
    position: relative;
    text-decoration: none;
    z-index: 1;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.btn:hover,
.btn:focus {
    color: #fff;
    background-color: #000;
    border-color: #000;
}

.btn i {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
}

.featured-image {
    position: relative;
}

.col-1 article,
.col-2 article,
.col-3 article,
.col-4 article,
.col-5 article,
.col-6 article {
    margin-bottom: 30px;
    width: 100%;
}

.col-1 article:last-child,
.col-2 article:last-child,
.col-3 article:last-child,
.col-4 article:last-child,
.col-5 article:last-child,
.col-6 article:last-child {
    margin-bottom: 0;
}

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
    border: none;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
    max-width: 100%;
}

/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.wp-caption {
    margin-bottom: 1.5em;
    max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption .wp-caption-text {
    margin: 0.8075em 0;
}

.wp-caption-text {
    text-align: center;
}

/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.type_of_work {
    margin: -4px;
}

.type_of_work-item {
    display: inline-block;
    text-align: center;
    vertical-align: top;
    width: 100%;
    padding: 4px;
}

.type_of_work-columns-2 .type_of_work-item {
    max-width: 50%;
}

.type_of_work-columns-3 .type_of_work-item {
    max-width: 33.33%;
}

.type_of_work-columns-4 .type_of_work-item {
    max-width: 25%;
}

.type_of_work-columns-5 .type_of_work-item {
    max-width: 20%;
}

.type_of_work-columns-6 .type_of_work-item {
    max-width: 16.66%;
}

.type_of_work-columns-7 .type_of_work-item {
    max-width: 14.28%;
}

.type_of_work-columns-8 .type_of_work-item {
    max-width: 12.5%;
}

.type_of_work-columns-9 .type_of_work-item {
    max-width: 11.11%;
}

.type_of_work-caption {
    display: block;
}

/*--------------------------------------------------------------
## Social Icons
--------------------------------------------------------------*/
.social-icons li {
    display: inline-block;
    height: auto;
    text-align: center;
    position: relative;
    list-style: none;
}

.footer-widgets-area .widget .social-icons li {
    display: inline-block;
    width: auto;
}

.social-icons li:not(:last-child) {
    margin-right: 5px;
}

.social-icons,
.social-icons ul {
    margin: 0;
    padding: 0;
}

.social-icons li a {
    background-color: transparent;
    width: 40px;
    height: 40px;
    line-height: 40px;
    display: block;
}

/*--------------------------------------------------------------
## Social Icons
--------------------------------------------------------------*/
ul.social-icons {
    margin: 0;
    padding: 0;
}

.social-icons li {
    width: 40px;
    height: auto;
    text-align: center;
    line-height: 40px;
    position: relative;
    list-style: none;
}

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

.social-icons li:not(:last-child) {
    margin-right: 10px;
}

.social-icons li a {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 40px;
    color: #fff;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    font-family: "Font Awesome 5 Brands";
}

.social-icons li a:hover,
.social-icons li a:focus {
    color: #fff;
    background-color: #FF3366;
}

.social-icons li a:before {
    content: "\f1d0";
}

.social-icons li a[href*="facebook.com"]:before,
.social-icons li a[href*="fb.com"]:before {
    content: "\f39e";
}

.social-icons li a[href*="twitter.com"]:before {
    content: "\e61b";
}

.social-icons li a[href*="linkedin.com"]:before {
    content: "\f0e1";
}

.social-icons li a[href*="plus.google.com"]:before {
    content: "\f0d5";
}

.social-icons li a[href*="youtube.com"]:before {
    content: "\f167";
}

.social-icons li a[href*="dribbble.com"]:before {
    content: "\f17d";
}

.social-icons li a[href*="pinterest.com"]:before {
    content: "\f231";
}

.social-icons li a[href*="bitbucket.org"]:before {
    content: "\f171";
}

.social-icons li a[href*="github.com"]:before {
    content: "\f113";
}

.social-icons li a[href*="codepen.io"]:before {
    content: "\f1cb";
}

.social-icons li a[href*="flickr.com"]:before {
    content: "\f16e";
}

.social-icons li a[href$="/feed/"]:before {
    content: "\f09e";
}

.social-icons li a[href*="foursquare.com"]:before {
    content: "\f180";
}

.social-icons li a[href*="instagram.com"]:before {
    content: "\f16d";
}

.social-icons li a[href*="tumblr.com"]:before {
    content: "\f173";
}

.social-icons li a[href*="reddit.com"]:before {
    content: "\f1a1";
}

.social-icons li a[href*="vimeo.com"]:before {
    content: "\f194";
}

.social-icons li a[href*="digg.com"]:before {
    content: "\f1a6";
}

.social-icons li a[href*="twitch.tv"]:before {
    content: "\f1e8";
}

.social-icons li a[href*="stumbleupon.com"]:before {
    content: "\f1a4";
}

.social-icons li a[href*="delicious.com"]:before {
    content: "\f1a5";
}

.social-icons li a[href*="mailto:"]:before {
    content: "\f0e0";
}

.social-icons li a[href*="soundcloud.com"]:before {
    content: "\f1be";
}

.social-icons li a[href*="wordpress.org"]:before {
    content: "\f19a";
}

.social-icons li a[href*="wordpress.com"]:before {
    content: "\f19a";
}

.social-icons li a[href*="jsfiddle.net"]:before {
    content: "\f1cc";
}

.social-icons li a[href*="tripadvisor.com"]:before {
    content: "\f262";
}

.social-icons li a[href*="foursquare.com"]:before {
    content: "\f180";
}

.social-icons li a[href*="angel.co"]:before {
    content: "\f209";
}

.social-icons li a[href*="slack.com"]:before {
    content: "\f198";
}

.social-icons li a[href*="tiktok.com"]:before {
    content: "\e07b";
}

/*--------------------------------------------------------------
## Social Icons Hover Color
--------------------------------------------------------------*/
.social-icons li a[href*="facebook.com"]:hover,
.social-icons li a[href*="fb.com"]:hover,
.social-icons li a[href*="facebook.com"]:focus,
.social-icons li a[href*="fb.com"]:focus {
    background-color: #3c5798 !important;
}

.social-icons li a[href*="twitter.com"]:hover,
.social-icons li a[href*="twitter.com"]:focus {
    background-color: #1ea0f1 !important;
}

.social-icons li a[href*="linkedin.com"]:hover,
.social-icons li a[href*="linkedin.com"]:focus {
    background-color: #0077B5 !important;
}

.social-icons li a[href*="plus.google.com"]:hover,
.social-icons li a[href*="plus.google.com"]:focus {
    background-color: #ec7161 !important;
}

.social-icons li a[href*="youtube.com"]:hover,
.social-icons li a[href*="youtube.com"]:focus {
    background-color: #cc181e !important;
}

.social-icons li a[href*="dribbble.com"]:hover,
.social-icons li a[href*="dribbble.com"]:focus {
    background-color: #f4a09c !important;
}

.social-icons li a[href*="pinterest.com"]:hover,
.social-icons li a[href*="pinterest.com"]:focus {
    background-color: #bd081b !important;
}

.social-icons li a[href*="bitbucket.org"]:hover,
.social-icons li a[href*="bitbucket.org"]:focus {
    background-color: #205081 !important;
}

.social-icons li a[href*="github.com"]:hover,
.social-icons li a[href*="github.com"]:focus {
    background-color: #323131 !important;
}

.social-icons li a[href*="codepen.io"]:hover,
.social-icons li a[href*="codepen.io"]:focus {
    background-color: #111000 !important;
}

.social-icons li a[href*="flickr.com"]:hover,
.social-icons li a[href*="flickr.com"]:focus {
    background-color: #025FDF !important;
}

.social-icons li a[href$="/feed/"]:hover,
.social-icons li a[href$="/feed/"]:focus {
    background-color: #089DE3 !important;
}

.social-icons li a[href*="foursquare.com"]:hover,
.social-icons li a[href*="foursquare.com"]:focus {
    background-color: #F94877 !important;
}

.social-icons li a[href*="instagram.com"]:hover,
.social-icons li a[href*="instagram.com"]:focus {
    background-color: #cd42e7 !important;
}

.social-icons li a[href*="tumblr.com"]:hover,
.social-icons li a[href*="tumblr.com"]:focus {
    background-color: #56BC8A !important;
}

.social-icons li a[href*="reddit.com"]:hover,
.social-icons li a[href*="reddit.com"]:focus {
    background-color: #FF4500 !important;
}

.social-icons li a[href*="vimeo.com"]:hover,
.social-icons li a[href*="vimeo.com"]:focus {
    background-color: #00ADEF !important;
}

.social-icons li a[href*="digg.com"]:hover,
.social-icons li a[href*="digg.com"]:focus {
    background-color: #00ADEF !important;
}

.social-icons li a[href*="twitch.tv"]:hover,
.social-icons li a[href*="twitch.tv"]:focus {
    background-color: #0E9DD9 !important;
}

.social-icons li a[href*="stumbleupon.com"]:hover,
.social-icons li a[href*="stumbleupon.com"]:focus {
    background-color: #EB4924 !important;
}

.social-icons li a[href*="delicious.com"]:hover,
.social-icons li a[href*="delicious.com"]:focus {
    background-color: #0076E8 !important;
}

.social-icons li a[href*="mailto:"]:hover,
.social-icons li a[href*="mailto:"]:focus {
    background-color: #4169E1 !important;
}

.social-icons li a[href*="soundcloud.com"]:hover,
.social-icons li a[href*="soundcloud.com"]:focus {
    background-color: #FF5500 !important;
}

.social-icons li a[href*="wordpress.org"]:hover,
.social-icons li a[href*="wordpress.org"]:focus {
    background-color: #0073AA !important;
}

.social-icons li a[href*="wordpress.com"]:hover,
.social-icons li a[href*="wordpress.com"]:focus {
    background-color: #00AADC !important;
}

.social-icons li a[href*="jsfiddle.net"]:hover,
.social-icons li a[href*="jsfiddle.net"]:focus {
    background-color: #396AB1 !important;
}

.social-icons li a[href*="tripadvisor.com"]:hover,
.social-icons li a[href*="tripadvisor.com"]:focus {
    background-color: #FFE090 !important;
}

.social-icons li a[href*="angel.co"]:hover,
.social-icons li a[href*="angel.co"]:focus {
    background-color: #111000 !important;
}

.social-icons li a[href*="tiktok.com"]:hover,
.social-icons li a[href*="tiktok.com"]:focus {
    background-color: #7d88e3 !important;
}

/*--------------------------------------------------------------
#  Inner Page settings
--------------------------------------------------------------*/
#main .entry-content h1 {
    font-size: 55px;
    clear: both;
    color: #000;
    margin: 16px 0;
    line-height: 1.3;
    font-weight: 700;
}

#main .entry-content p strong {
    color: #000;
}

#main .entry-content p em {
    color: #FF5B4A;
}

#main .entry-content h2 {
    font-size: 24px;
    clear: both;
    color: #000;
    margin: 0 0 12px;
    line-height: 1.3;
    font-weight: 700;
}

#main .entry-content h3 {
    font-size: 38px;
    clear: both;
    /* color: #000;*/
    margin: 16px 0;
    line-height: 1.3;
    font-weight: 700;
    /* letter-spacing: 0.59px; */
}

#main .entry-content h4 {
    font-size: 30px;
    clear: both;
    color: #000;
    margin: 16px 0;
    line-height: 1.3;
    font-weight: 700;
}

#main .entry-content h5 {
    font-size: 26px;
    clear: both;
    color: #000;
    margin: 16px 0;
    line-height: 1.3;
    font-weight: 700;
}

#main .entry-content h6 {
    font-size: 22px;
    clear: both;
    color: #000;
    margin: 16px 0;
    line-height: 1.3;
    font-weight: 700;
}

#main .entry-content ul {
    /* padding: 20px 0 20px 0; */
    list-style: none;
    font-size: 18px;
    margin: 0;
}

#main .entry-content ul li,
#main .entry-content ul li ul li {
    /*line-height: 50px;*/
    font-size: 16px;
    color: #000;
}

#main .entry-content ul li:before {
    /* content: '\f124';*/
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    margin-right: 20px;
    transform: scale(1);
    transition: all 0.5s ease 0s;
    color: #fdc401;
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    padding: 2px;
    line-height: 1;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
    transform: rotate(45deg);
    z-index: 1;
}

details {
    line-height: 2rem;
}

details p {
    margin-left: 30px;
}

.tagcloud {
    padding: 10px 8px;
}

.tagcloud a {
    color: #959595 !important;
}

#main .entry-content ul li ul {
    margin: 15px 0 0 25px;
}

#main .entry-content ul li ul li:before {
    content: "\f124";
    font-family: 'Fontawesome';
    margin-right: 10px;
    transform: scale(1);
    transition: all 0.5s ease 0s;
    color: #fdc401;
    display: inline-block;
    transform: scale(1);
    transition: all 0.5s ease 0s;
    font-size: 14px;
    transform: rotate(45deg);
}

#main .entry-content ol {
    counter-reset: li;
    list-style: none;
    /* *list-style: decimal; */
    margin: 30px 0 0;
}

#main .entry-content ol li {
    position: relative;
    padding-left: 6rem;
    min-height: 50px;
    padding-top: 0px;
    line-height: 30px;
    font-size: 18px;
    color: #000;
}

#main .entry-content ol li:before {
    content: counter(li);
    counter-increment: li;
    color: #fff;
    background: #01549a;
    border: 1px solid #a1a1a1;
    /* border-radius: 50%; */
    font-size: 16px;
    width: 30px;
    height: 30px;
    line-height: 29px;
    text-align: center;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 3rem;

}

blockquote .wp-block-quote,
.wp-block-pullquote,
.wp-block-quote,
.wp-block-quote:not(.is-large):not(.is-style-large) {
    /* border-left: none !important; */
    padding: 1em !important;
    background-color: #01549a !important;
    border: 1px solid !important;
    border-color: #002434 !important;
    /* width: 70%; */
    margin-top: 50px;
}

.wp-block-quote h1,
.wp-block-quote h2,
.wp-block-quote h3,
.wp-block-quote h4,
.wp-block-quote h5,
.wp-block-quote h6 {
    text-align: center;
    font-size: 25px !important;
    font-weight: bold !important;
    margin: 0px 0px 20px;
}

blockquote .wp-block-quote p,
.wp-block-pullquote p,
.wp-block-quote p {
    color: #fff !important;
    font-size: 16px;
    font-weight: 300;
    /* text-align: left; */
    padding: 12px 40px 0;
    letter-spacing: 0.64px;
    line-height: 30px;
}

.wp-block-quote p:before,
blockquote .wp-block-quote p:before {
    content: "\f10d";
    position: absolute;
    top: -1rem;
    left: 1.5rem;
    font-size: 60px;
    color: #fdc401;
    font-family: 'FontAwesome';
}

.wp-block-quote p:after,
blockquote .wp-block-quote p:after {
    content: "\f10e";
    position: absolute;
    bottom: -1rem;
    right: 33px;
    font-size: 60px;
    color: #fdc401;
    font-family: 'FontAwesome';
    transform: rotate(180deg) rotateY(180deg);
}

/*--------------------------------------------------------------
#  Page Site Header
--------------------------------------------------------------*/
#page-site-header {
    background-size: cover;
    position: relative;
    text-align: center;
    background-repeat: no-repeat;
    /* background-image: url(assets/images/people-railway-transport-portrait-public-transport-streetphotography-583586-pxhere1.com.png);*/
}

.page-title {
    font-size: 30px;
    color: #3f536d;
    font-weight: bold;
    margin-bottom: 10px;
}

#page-site-header .innerheader-overly1 {
    z-index: 1;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(to right, #1e3a8a, #0891b2);
    ;
}

#page-site-header .page-site-headerimg {
    background-repeat: no-repeat;
    position: relative;
    width: 100%;
    background-size: cover;
}

#page-site-header .page-title {
    color: #fff;
    font-size: 30px;
    margin: 0 0 7px -96px;
    font-weight: 300;
    text-align: left;
}

#page-site-header .innerpage-subtitle {
    color: #ffffff;
    font-size: 40px;
    font-weight: 600;
    margin-bottom: 15px;
}

#page-site-header .innerpage-description {
    color: #fff;
    font-size: 20px;
    width: 100%;
    max-width: 60%;
    margin: 0 auto;
    /* ✅ centers the block */
    text-align: center;
    /* ✅ centers the text */
}

#page-site-header .page-header {
    position: absolute;
    /* bottom: 26%; 
    left: 0;
    right: 0;*/
    display: flex;
    align-items: center;
    inset: 0;
    justify-content: center;
    top: 18rem;
    text-align: center;
    margin: 0 auto;
    z-index: 1;
}

#page-site-header .header-title {
    position: relative;
}

#page-site-header .header-title .headerdotsbox {
    width: 36px;
    height: 55px;
    position: absolute;
    left: 110px;
    bottom: 0px;
}

#page-site-header .header-title .headerdotsbox div {
    background: #a1a1a1;
    margin: 0 5px 5px 0;
    /* font-family: 'FontAwesome'; */
    border-radius: 50%;
    width: 7px;
    height: 7px;
    float: left;

}

/*--------------------------------------------------------------
## Breadcrumb
--------------------------------------------------------------*/

#page-site-header .breadcrumbbox {
    padding: 0px 0 0.5em 0%;
    text-align: left;
    /* margin-bottom: 8%; */
}

#page-site-header .breadcrumbbox .button {
    display: inline-block;
    /* / background-color: #fff; / */
    padding: 20px 22px;
    border-radius: 50px;
    text-decoration: none;
}

#page-site-header .breadcrumbbox .button .root,
#page-site-header .breadcrumbbox span {
    background-color: #fff;
    padding: 10px 17px;
    font-size: 16px;
    font-weight: 500;
    color: #01549a;
}

#page-site-header .breadcrumbbox .button .root::before {
    content: '\e3af';
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    color: #01549A;
    padding-right: 5px;
}

#page-site-header .breadcrumbbox span.treeEnd-margin {
    margin-left: -36px;
}

#page-site-header .breadcrumbbox span.treeEnd {
    background-color: #FFF;
    color: #01549a;
    /* margin: 0 3px; */
    font-size: 16px;
    font-weight: 500;
    padding: 10px 0px;
    line-height: 30px;
    /* margin-left: -53px; */
}

#page-site-header .breadcrumbbox span.bread-arrow {
    font-size: 28px;
    /* line-height: 13px; */
    position: relative;
    top: 5px;
    padding: 0px;
    color: #01549A;
    background-color: #00000000;
    font-weight: 400;
    left: -16px;
}

#page-site-header .breadcrumbbox span.spanarrow {
    font-size: 35px !important;
    padding: 0px 10px !important;
}

#page-site-header .breadcrumbbox a {
    /* color: #01549a; */
    font-weight: 500;
    text-decoration: none;
    font-size: 16px;
    line-height: 25px;
    text-transform: uppercase;
}

#page-site-header .breadcrumbbox a:hover,
#page-site-header .breadcrumbbox .treeEnd:hover {
    color: #a1a1a1;
    text-decoration: none;
    cursor: pointer;
}

/*--------------------------------------------------------------
#  Breadcrumb List
--------------------------------------------------------------*/
#breadcrumb-list {
    background-color: #222;
    padding: 20px 0;
}

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

.trail-items li {
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 14px;
}

.trail-items li a {
    color: rgba(255, 255, 255, 0.30);
}

.trail-items li a:hover,
.trail-items li a:focus {
    color: #fff;
}

.trail-items .separator {
    color: rgba(255, 255, 255, 0.30);
    padding: 0 2px;
}

/*--------------------------------------------------------------
#  Slick Slider
--------------------------------------------------------------*/
.slick-slide {
    outline: none;
}

.slick-dotted.slick-slider {
    margin-bottom: 8%;
}

.slick-next:before,
.slick-prev:before {
    opacity: 1;
    /* content: "\f105"; */
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    font-size: 26px;
    color: #c42118;
    z-index: 5;
}

.slick-prev:before {
    content: '\f104' !important;
    font-family: 'Font Awesome 5 Free' !important;
}

.slick-next:before {
    content: '\f105' !important;
    font-family: 'Font Awesome 5 Free' !important;
}

.slick-prev,
.slick-next {
    left: 0;
    z-index: 1;
    width: 84px;
    height: 45px;
    line-height: 62px;
}

.slick-prev {
    left: 0;
    border-left: 3px solid #c42118;
}

.slick-next {
    left: auto;
    right: 0;
    border-right: 3px solid #c42118;
}

.slick-prev:hover,
.slick-next:hover,
.slick-prev:focus,
.slick-next:focus {
    background-color: #000;
}

.slick-dots {
    bottom: 25px;
}

.slick-dots li {
    margin: 0 6px;
    width: auto;
    height: auto;
}

.slick-dots li button {
    background-color: #ccc;
    width: 12px;
    height: 12px;
    padding: 0;
    border-radius: 12px;
}

.slick-dots li button:focus-visible {
    outline: auto;
}

.slick-dots li button:before {
    display: none;
}

.display-block {
    display: block;
}

.display-none {
    display: none;
}

.slick-dotted.slick-slider {
    margin: 0 !important;
}

/*--------------------------------------------------------------
#  Featured Slider Section
--------------------------------------------------------------*/
#featured-slider .slick-dots {
    bottom: 3rem;
}

#featured-slider {
    position: relative;
    overflow: hidden;
    padding-bottom: 0rem;
}

#featured-slider .entry-container {
    margin-left: 2rem;
    /* width: 61%;*/
}

#featured-slider .swiper-slide {
    overflow: hidden;
    color: #fff;
}

#featured-slider .slide-inner {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
    justify-content: center;
    align-items: center;
}

#featured-slider img {
    max-width: 100%;
    width: 100%;
    height: 573px !important;
    border-radius: 40px;
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: inherit;
}

#featured-slider .sliderimg::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(270deg, #06060600, #00000096);
    opacity: 1;
}

.opbg {
    position: relative;
    width: 100%;
    height: auto;
}

#featured-slider article {
    position: relative;
    background-size: cover;
    background-position: 50%;
}

#featured-slider .featured-image {
    background-size: cover;
    background-position: 50%;
    padding: 200px 0;
    border-radius: 50px;
    margin-bottom: 50px;
}

#featured-slider .wrapper {
    position: relative;
    /* left: 14%; */
    top: 31%;
    margin: 0;
}

#featured-slider .entry-header {
    max-width: 900px;
    margin: 0px 0 0;
    height: auto;
    /* padding: 10px; */
}

#featured-slider .entry-content {
    max-width: 900px;
}

#featured-slider h2.title {
    position: relative;
    z-index: 1;
    overflow: hidden;
    color: #FFFFFF;
    font-size: 60px;
    font-weight: 700;
    letter-spacing: 1.98px;
}

#featured-slider .entry-header h3 {
    font-size: 40px;
    letter-spacing: normal;
    text-transform: capitalize;
    font-weight: 600;
    color: #fff;

}

#featured-slider h2.title small {
    font-size: 31px;
    letter-spacing: normal;
    text-transform: capitalize;
    font-weight: 400;
    color: #fff;
    margin: 0 0 0 0em;
    position: absolute;
    left: 17px;
    top: 91px;
}

#featured-slider .entry-content {
    color: #fff;
}

#featured-slider .entry-content p {
    font-size: 20px;
    letter-spacing: 0.66px;
    line-height: 30px;
    font-weight: 300;
    color: #fff;
    /* margin-right: 4rem; */
    margin-bottom: 1.5rem;
    margin-top: 1rem;
    width: 85%;
}

hr {
    border: none;
    height: 2px;
    background-color: #000;
    margin: 10px 0;
}

#featured-slider .read-more .btn {
    display: inline-block;
    font-weight: 300;
    padding: 12px 15px;
    font-size: 18px;
    text-transform: capitalize;
    background: #01549A;
    text-decoration: none;
    border-radius: 0;
    letter-spacing: 0.59px;
    transition: 0.5s;
    color: #ffffff;
    overflow: hidden;
    margin-top: 5px;
}

#featured-slider .read-more .btn:before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%) scaleY(1) scaleX(1.25);
    top: 100%;
    width: 140%;
    height: 180%;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    display: block;
    transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
    z-index: -1;
}

#featured-slider .read-more .btn:after {
    content: "";
    position: absolute;
    left: 55%;
    transform: translateX(-50%) scaleY(1) scaleX(1.45);
    top: 180%;
    width: 160%;
    height: 190%;
    background-color: #E9F5FF;
    border-radius: 50%;
    display: block;
    transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
    z-index: -1;
}

#featured-slider .read-more .btn:hover {
    color: #01549A;
    animation: pulseBig infinite 3s linear;
}

#featured-slider .read-more .btn:hover:before {
    top: -35%;
    background-color: #E9F5FF;
    transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

#featured-slider .read-more .btn:hover:after {
    top: -45%;
    background-color: #E9F5FF;
    transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

#featured-slider .borderbtn {
    border: 2px solid;
    border-color: #ffffff;
    border-radius: 50px;
    width: 65px;
    height: 65px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#featured-slider .play-btn {
    background-color: #fff;
    color: #01549A;
    padding: 10px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 20px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    animation: pulseBig infinite 3s linear;
    transition: opacity 0.3s;
}

@keyframes pulseBig {
    0% {
        box-shadow: 0 0 0 0 rgba(2, 108, 195, 0.4);
    }

    50% {
        box-shadow: 0 0 0 30px rgba(163, 182, 200, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(1, 196, 53, 0);
    }
}

#featured-slider .playbtntxt {
    color: #ffffff;
    letter-spacing: 0.66px;
    text-decoration: none;
    font-size: 20px;
}

#featured-slider .leftcontentbox {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
}

/* Slick Dot indicator */
/* //////////////// */

#featured-slider .slick-dots {
    display: none !important;
}

/* ///////// pagination slider section /////////// */
#featured-slider .slick-prev,
#featured-slider .slick-next {
    font-size: 22px;
    line-height: 0;
    position: absolute;
    bottom: 0 !important;
    top: 80%;
    width: 90px;
    height: 130px;
    padding: 0px;
    cursor: pointer;
    border-radius: 50%;
}

#featured-slider .slick-prev {
    left: 11%;
    top: 88%;
}

#featured-slider .slick-next {
    left: 13.5%;
    top: 88%;
}

#featured-slider .slick-next:before,
#featured-slider .slick-prev:before {
    position: absolute;
    background-color: #EFF8FF;
    width: 54px;
    display: none;
    height: 51px;
    opacity: 9;
    /* border: 5px solid; */
    /* border-color: #ffffff; */
    font-size: 27px;
    padding: 14px 13px;
    color: #01549A;
}

#featured-slider .slick-prev:before {
    content: '\f053';
    font-family: "Font Awesome 5 Free";
}

#featured-slider .slick-next:before {
    content: '\f054';
    font-family: "Font Awesome 5 Free";
}


/* ///////////////////// */
.icon-disable,
/*.icon-container, */
.image-disable .featured-image,
.position-disable .team-position,
.position-disable .testimonial-position,
.title-disable .entry-header,
.content-disable .entry-content,
.button-disable .read-more,
.category-disable .cat-links,
.date-disable .date,
.blog-posts-wrapper .category-disable .cat-links,
#page-site-header.page-title-disable .page-header,
#page-site-header.header-image-disable {
    display: none;
}

.title-font-weight-regular .title,
.content-font-weight-regular .entry-content,
.button-font-weight-regular .btn {
    font-weight: 400;
}

.title-font-weight-semi-bold .title,
.content-font-weight-semi-bold .entry-content,
.button-font-weight-semi-bold .btn {
    font-weight: 600;
}

.title-font-weight-bold .title,
.content-font-weight-bold .entry-content,
.button-font-weight-bold .btn {
    font-weight: bold;
}

.title-default .title,
.content-default .entry-content,
.button-default .btn {
    text-transform: none;
}

.title-uppercase .title,
.content-uppercase .entry-content,
.button-uppercase .btn {
    text-transform: uppercase;
}

.title-lowercase .title,
.content-lowercase .entry-content,
.button-lowercase .btn {
    text-transform: lowercase;
}

.title-capitalize .title,
.content-capitalize .entry-content,
.button-capitalize .btn {
    text-transform: capitalize;
}

.cloud-top {
    margin-bottom: -5px;
    position: absolute;
    bottom: 100%;
    z-index: 1;
}

.cloud-bottom {
    margin-top: -5px;
    position: absolute;
    top: 100%;
    z-index: 1;
    -webkit-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    transform: scaleY(-1);
}

/*--------------------------------------------------------------
# Inner Services – 

--------------------------------------------------------------*/
/* Grid spacing */
#main .service-inner-content {
    max-width: 1499px;
    /* prevents zoom reflow */
    width: 100%;
    margin: 0 auto;
    padding: 5rem 0 0;

}

/* Card */
#main .service-inner-content .featured-service-item {
    background: #ffffff;
    border-radius: 41px;
    overflow: hidden;
    padding: 0;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);

    height: 97%;
}

#main .service-inner-content .featured-service-item:hover {

    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
}

/* Image wrapper */
#main .service-inner-content .content-image {
    position: relative;
    height: auto !important;
    overflow: hidden;
    border-radius: 30px 30px 0 0;
}

/* Image */
#main .service-inner-content .content-image {
    overflow: hidden;
    /* 👈 Important */
    border-radius: 30px 30px 0 0;
    /* keeps rounded zoom */
}

#main .service-inner-content .content-image img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
    border-radius: 30px 30px 0 0;
    /*transition: transform 0.6s ease;*/
    /* smooth zoom */
}

#main .service-inner-content .content-image:hover img {
    transform: scale(1.1);
    transition: transform 0.6s ease;
    /* zoom amount */
}

/* Icon overlay on top-right */
#main .service-inner-content .service-icon {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #f4b400;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: transform 0.3s ease;
}

#main .service-inner-content .service-icon i,
#main .service-inner-content .service-icon svg {
    font-size: 22px;
    color: #000;
}

/* Icon scale on hover */
#main .service-inner-content .service-icon:hover {
    transform: scale(1.1);
}

/* Content Area */
#main .service-inner-content .entry-content {
    position: relative !important;
    transform: none !important;
    opacity: 1 !important;
    background: transparent !important;
    padding: 24px;
}

/* Title */
#main .service-inner-content .entry-title {
    margin: 0 0 12px;
}

#main .service-inner-content .service-title {
    color: #1e3a8a;
    font-size: 22px;
    font-weight: 700;
    text-decoration: none;
    padding: 0 !important;
}

/* Remove old arrow */
#main .service-inner-content .service-title::after {
    display: none !important;
}

/* Description */
#main .service-inner-content p {
    color: #6b7280;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 16px;
    opacity: 1 !important;
}

/* Learn More Link */
#main .service-inner-content .newsCaption-link {
    font-weight: 600;
    color: #1e3a8a;
    font-size: 15px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: 0.3s ease;
}

/* --- Card Hover: Title, Button Text, and Icon Color --- */
#main .service-inner-content .featured-service-item:hover .service-title,
#main .service-inner-content .featured-service-item:hover .service-title a {
    color: #0891b2;
    fill: #0891b2;
    transition: color 0.3s ease, fill 0.3s ease;
}

#main .service-inner-content .featured-service-item:hover .newsCaption-link,
#main .service-inner-content .featured-service-item:hover .newsCaption-link .btn-text,
/* <--- Added comma here */
#main .service-inner-content .featured-service-item:hover .newsCaption-link .btn-icon i,
#main .service-inner-content .featured-service-item:hover .newsCaption-link .btn-icon svg {
    color: #1e3a8a;
    /* Added !important to override theme defaults */
    fill: #1e3a8a;
    transition: color 0.3s ease, fill 0.3s ease;
}

/* --- Base State for Icon (Keep Padding and Transition) --- */
#main .service-inner-content .btn-icon svg,
#main .service-inner-content .btn-icon i {
    padding-left: 1rem;
    display: inline-block;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), fill 0.3s ease, color 0.3s ease;
}

/* --- KEEP ICON TRANSFORM: Triggered by Card Hover --- */
#main .service-inner-content .featured-service-item:hover .btn-icon svg,
#main .service-inner-content .featured-service-item:hover .btn-icon i {
    transform: translateX(8px);
}



/* Responsive */
@media (max-width: 1024px) {
    #main .service-inner-content {
        grid-template-columns: repeat(2, 1fr);
        padding: 5rem 2rem;
        gap: 35px;
    }
}

@media (max-width: 640px) {
    #main .service-inner-content {
        grid-template-columns: 1fr;
        padding: 5rem 0;
    }

    #main .service-inner-content .content-image img {
        height: 220px;
    }

    #main .service-inner-content .service-icon {
        width: 48px;
        height: 48px;
        top: 10px;
        right: 10px;
    }

    #main .service-inner-content .service-icon i,
    #main .service-inner-content .service-icon svg {
        font-size: 18px;
    }
}

/* Responsive */
@media (max-width: 1024px) {
    #main .service-inner-content {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    #main .service-inner-content {
        grid-template-columns: 1fr;
    }

    #main .service-inner-content .content-image img {
        height: 220px;
    }

    #main .service-inner-content .service-icon {
        width: 42px;
        height: 42px;
        top: 10px;
        right: 10px;
    }

    #main .service-inner-content .service-icon i,
    #main .service-inner-content .service-icon svg {
        font-size: 16px;
    }
}

/* --- Card Hover -> Heading Color Change --- */
#main .service-inner-content .featured-service-item:hover .service-title {
    color: #0891b2;
    /* Changes to your gold color when card is hovered */
    transition: color 0.3s ease;
}

/* If the title is a link, target the anchor tag specifically */
#main .service-inner-content .featured-service-item:hover .service-title a {
    color: #f4b400;
    transition: color 0.3s ease;
}

/* ==========================================
   INNER PAGE CTA (With Gradient BG)
========================================== */

#main .innerpage-cta-wrapper {
    margin: 60px 13px;
    padding: 48px;
    border-radius: 60px;
    text-align: center;
    color: #ffffff;
    position: relative;
    overflow: hidden;

    /* Fallback solid color */
    background-color: #1e3a8a;

    /* Gradient */
    background-image: linear-gradient(135deg,
            var(--cta-gradient-1, #1e3a8a),
            var(--cta-gradient-2, #0891b2));
}

/* Optional soft overlay glow */
#main .innerpage-cta-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.15), transparent 50%);
    pointer-events: none;
}

/* Heading */
#main .innerpage-cta-title {
    font-size: 32px !important;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 20px;
    color: #ffffff !important;
}

/* Description */
#main .innerpage-cta-description {
    font-size: 18px;
    color: #dbeafe !important;
    line-height: 1.8;
    opacity: 0.95;
    max-width: 606px;
    margin: 0 auto 32px;
}

/* Button Wrapper */
#main .innerpage-cta-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
}

/* ===============================
    PRIMARY BUTTON
================================= */

#main .innerpage-btn1.primary-btn {
    background: var(--theme-color);
    color: #000;
    padding: 16px 32px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

/* 🔥 Updated Hover - Only Scaling */
#main .innerpage-btn1.primary-btn:hover {
    /* Removed translateY to stop the floating up motion */
    transform: scale(1.08);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}



/* ===============================
    SECONDARY BUTTON
================================= */

#main .innerpage-btn.secondary-btn {
    background: #ffffff;
    color: #1e3a8a;
    padding: 16px 32px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

/* 🔥 Updated Hover - Only Scaling */
#main .innerpage-btn.secondary-btn:hover {
    /* Removed translateY to stop the floating up motion */
    transform: scale(1.08);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

/* Responsive */
@media (max-width: 768px) {

    #main .innerpage-cta-wrapper {
        padding: 60px 25px;
        border-radius: 35px;
    }

    #main .innerpage-cta-title {
        font-size: 26px;
    }

    #main .innerpage-cta-buttons {
        flex-direction: row;
        gap: 18px;
    }

    #main .innerpage-btn {
        width: 100%;
        max-width: 320px;
        justify-content: center;
    }
}


/*--------------------------------------------------------------
#  Featured projects Section
--------------------------------------------------------------*/
#featured-projects {
    position: relative;
    overflow: hidden;
    padding: 5% 5% 0;
}

#featured-projects .projectrow {
    z-index: 2;
    position: relative;
}

#featured-projects .featured-projects-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: cover;
}

/* #featured-projects .project-overly1 {
    z-index: 1;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #fff;
    opacity: 1;
    z-index: 0;
} */

#featured-projects .title-section {
    margin-bottom: 4em;
    display: block;
}

#featured-projects .entry-content3 h5 {
    font-size: 40px;
    margin: 0px 0px 1.3rem 0px;
    position: relative;
    color: #01549A;
    font-weight: 700;
}

#featured-projects .entry-content3 h5::before {
    content: '';
    display: inline-block;
    width: 35px;
    /* Adjust size based on your design */
    height: 97px;
    /* Adjust size based on your design */
    background-image: url('assets/images/flower.png');
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 10px;
    /* Space between the image and the text */
    vertical-align: middle;
    /* Align the image vertically with the text */
    position: relative;
    left: 20px;
}

#featured-projects .project-image {
    position: relative;
}

#featured-projects .project-image .image-container {
    height: 588px;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

#featured-projects .project-image .image-container:nth-child(2) {
    position: relative;
}

/**********************************************/
#featured-projects .gallery .gallery-img {
    grid-area: 1/1;
    width: 50%;
    /*control the size*/
    cursor: pointer;
    transition: .4s .1s;
}

#featured-projects .gallery .gallery-img:first-child,
#featured-projects .gallery .gallery-img:last-child {
    clip-path: none;
}

#featured-projects .gallery {
    display: flex;
    /* Use flexbox to place images side by side */
    gap: 4px;
    /* Add some spacing between images */
}

#featured-projects .gallery .gallery-img:first-child:hover,
#featured-projects .gallery .gallery-img:first-child:hover .gallery-img:last-child {
    width: 100%;
}

#featured-projects .gallery .gallery-img:last-child:hover,
#featured-projects .gallery .gallery-img:last-child:hover .gallery-img:first-child {
    width: 100%;
}

#featured-projects h1.title-section {
    margin: 24px 0;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: 0px;
    color: #fff;
    padding: 0 0px;
    text-align: left;
    line-height: 2.7rem;
}

#featured-projects .entry-content3 p.text-section {
    position: relative;
    font-size: 22px;
    line-height: 39px;
    color: #fff;
    margin: 0 0 10px;
    font-weight: 400;
    padding: 0 85px 0 0;
}

#featured-projects .featured-project-item {
    margin: 0 12px;
    transition: 0.5s;
    position: relative;
}

#featured-projects .entry-content {
    text-align: left;
    margin: 0 auto;
    padding: 20px 20px;
    height: auto;
    position: absolute;
    bottom: 0;
}

#featured-projects .entry-content .entry-title {
    background: #01549a;
    padding: 18px 35px;
    left: -7.4rem;
    /* / right: 0; / */
    position: absolute;
    bottom: 7rem;
    width: 300px;
    transform: rotateZ(270deg);
    margin: 0 7px 15px;
    transition: ease-in 0.4s;
}

/* #featured-projects .entry-container:hover .entry-content .entry-title{
    transform: rotate(360deg);
    left: 0;
    bottom: 0;
    transition: ease-in 0.4s;
} */
/* #featured-projects:nth-child(3) article .entry-container:hover .entry-content .entry-title{
    transform: rotate(360deg);
    left: 0;
    bottom: 0;
    transition: ease-in 0.4s;
} */
#featured-projects .entry-content .entry-text {
    transform: rotateZ(0deg);
    bottom: 0;
    left: 0px;
    width: 298px;
}

#featured-projects .entry-content .entry-text a {
    color: #fff;
    text-decoration: none;
    font-size: 25px;
    text-transform: capitalize;
    letter-spacing: 1.59px;
    font-weight: normal;
}

#featured-projects .entry-content .entry-text p {
    font-size: 15px;
    color: #fdc401;
    font-weight: 400;
    letter-spacing: 0.59px;
}

#featured-projects .entry-title a {
    color: #fff;
    text-decoration: none;
    font-size: 25px;
    text-transform: capitalize;
    letter-spacing: 1.39px;
    font-weight: normal;
}

#featured-projects .gallery a {
    display: grid;
}

/*--------------------------------------------------------------
#  Inner Page Project 
--------------------------------------------------------------*/
/* ===============================
   PROJECT HEADING
================================ */
#main .projectmainbox {
    max-width: 1499px;
    margin: 0 auto;
}

#main .entry-content h4.projects-heading {
    font-size: 40px;
    font-weight: 700;
    color: #01549A;
    letter-spacing: 1.2px;
    text-align: center;
    margin-bottom: 40px;
}


/* ===============================
   PROJECT GRID
================================ */
#main .projectmainbox {
    width: 100%;
}

#main .project-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 5rem 0;
}

/* ===============================
   PROJECT CARD
================================ */
#main .project-card {
    background: #fff;
    border-radius: 40px;
    overflow: hidden;
    /* This is your base shadow */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    /* Keeps the shadow transition smooth */
    transition: box-shadow 0.3s ease;
}

#main .project-card:hover {
    /* Removed transform: translateY(-8px); */

    /* This is your stronger hover shadow */
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.15);
}

/* IMAGE */
#main .project-img {
    position: relative;
    overflow: hidden;
    /* 👈 Important */
}

#main .project-img img {
    width: 100%;
    height: 356px;
    object-fit: inherit;
    transition: transform 0.5s ease;
    /* 👈 Smooth animation */
}

#main .project-img:hover img {
    transform: scale(1.1);
    /* 👈 Zoom amount */
}

/* HEADER TEXT ON IMAGE */
#main .project-tag {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--theme-color);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

/* CONTENT */
#main .project-content {
    padding: 24px;
}

#main .project-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
}

#main .project-title {
    color: #01549A;
    font-size: 24px !important;
    margin: 16px 0 !important;
    text-decoration: none;
}

#main .project-desc {
    font-size: 16px;
    color: #555;
    margin-bottom: 16px;

    line-height: 1.8;
    /* 🔥 FIX: adds breathing space */
    max-width: 500px;
    /* 🔥 FIX: controls line length */
}

/* LOCATION STYLE */
#main .project-location {
    display: flex;
    align-items: center;
    gap: 10px;
    /* ← space between icon & text */
    font-size: 15px;
    color: #0ea5e9;
    margin-bottom: 10px;
}

/* 1. The Base Icon Style */
#main .project-btn .btn-icon {
    display: inline-flex;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Smooth bouncy timing */
}

/* 2. TRIGGER: Move icon when the CARD is hovered */
#main .project-card:hover .project-btn .btn-icon {
    transform: translateX(10px);
    /* Moves the arrow forward */
}



/* TEXT STYLE */
#main .project-location .location-text {
    line-height: 1.4;
    font-size: 14px;
    color: #6a7282;
}

#main .project-time {
    display: flex;
    gap: 20px;
}

/* DATE STYLE */
#main .project-date {
    display: flex;
    align-items: center;
    gap: 10px;
    /* space between icon & text */
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
}

/* ICON */
#main .project-date .date-icon svg {
    width: 18px;
    height: 18px;
    display: block;
    flex-shrink: 0;
    color: #0891b2;
}

/* TEXT */
#main .project-date .date-text {
    line-height: 1.4;
}

/* PROJECT BUTTON */
#main .project-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    /* space between text & icon */
    font-size: 15px;
    font-weight: 600;
    color: #1e3a8a;
    text-decoration: none;
    margin-top: 15px;
    transition: 0.3s ease;
}

/* ICON SIZE */
#main .project-btn .btn-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* HOVER EFFECT */
#main .project-btn:hover {
    gap: 14px;
    color: #0f2c6b;
}

/* Title Hover Effect */
#main .project-card:hover .project-title {
    color: #0ea5e9;
    /* Or any color of your choice */
    text-decoration: none;
    /* Optional: adds extra emphasis */
}

/* ===============================
   RESPONSIVE
================================ */
@media(max-width:1024px) {
    #main .project-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 5rem 2rem;
    }
}

@media(max-width:600px) {
    #main .project-grid {
        grid-template-columns: 1fr;
        padding: 5rem 0;
    }

    #main .entry-content h4.projects-heading {
        font-size: 28px;
    }
}


/*--------------------------------------------------------------
#  Inner team Page
--------------------------------------------------------------*/
/* =====================================================
   TEAM INNER PAGE DESIGN
===================================================== */

#main .team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    padding: 80px 0;
    max-width: 1499px;
    margin: 0 auto;
}

/* Card */
#main .team-card {
    background: #fff;
    border-radius: 37px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);

}

#main .team-card:hover {

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.20);
}

/* =========================
   TEAM IMAGE WRAPPER
========================= */
#main .team-img-wrap {
    position: relative;
    overflow: hidden;

}

/* Image Zoom Effect */
#main .team-img-wrap img {
    width: 100%;
    height: 475px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

#main .team-img-wrap:hover img {
    transform: scale(1.1);
}


/* =========================
   TEAM BADGE
========================= */
#main .team-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--theme-color);
    color: #000;
    font-size: 14px;
    padding: 8px 18px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    z-index: 2;
}

/* Badge Icon */
#main .team-badge-icon svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Badge Text */
#main .team-badge-text {
    line-height: 1;
}

/* Content */
#main .team-content {
    padding: 24px;
}

/* Header */
/* =========================
   TITLE HOVER WHEN IMAGE HOVER
========================= */

/* Normal title */
#main .team-title {
    font-size: 24px;
    margin-top: 0 !important;
    font-weight: 700;
    margin-bottom: 6px !important;
    color: #1e3a8a !important;
    transition: color 0.3s ease;
}

/* Change title when hovering on IMAGE */
#main .team-card:hover .team-title,
#main .team-img-wrap:hover+.team-content .team-title {
    color: #0ea5e9 !important;
}

#main .team-designation {
    font-size: 1rem;
    color: #0891b2;
    font-weight: 600;
    display: block;
    margin-bottom: 16px;
}

/* Description */
#main .team-description {
    font-size: 14px;
    color: #4b5563;
    line-height: 1.6;
    margin-bottom: 18px;
}

/* Contact Section */
#main .team-contact-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#main .team-contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

#main .team-contact-item svg {
    color: #0891b2;
    font-size: 14px;
}

#main .team-contact-item a {
    color: #a1a1a1;
    text-decoration: none;
    transition: 0.3s;
}

#main .team-contact-item a:hover {
    color: #0ea5e9;
}


/* Responsive */

@media (max-width: 1200px) {
    #main .team-grid {
        grid-template-columns: repeat(3, 1fr);
        padding: 5rem 2rem;
    }
}

@media (max-width: 992px) {
    #main .team-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 5rem 1rem;
    }
}

@media (max-width: 576px) {
    #main .team-grid {
        grid-template-columns: 1fr;
    }
}

/*--------------------------------------------------------------
#  Featured Our Steps Section
--------------------------------------------------------------*/
#featured-steps {
    position: relative;
    overflow: hidden;
    background-color: #f3f3f3;
}

#featured-steps .featured-steps-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: cover;
}

#featured-steps .entry-content3 {
    margin-top: 52px;
}

#featured-steps .entry-content3 h5 {
    font-size: 40px;
    color: #01549a;
    letter-spacing: 1.32px;
    font-weight: bold;
    margin-bottom: 40px;
    position: relative;
}

#featured-steps .entry-content3 h5::before {
    content: '';
    display: inline-block;
    width: 32px;
    /* Adjust size based on your design */
    height: 100px;
    /* Adjust size based on your design */
    background-image: url('assets/images/flower.png');
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 10px;
    /* Space between the image and the text */
    vertical-align: middle;
    /* Align the image vertically with the text */
    position: relative;
    left: 20px;
}

#featured-steps .section-content .steps-block {
    width: 100%;
    background-color: #fff;
    margin-top: 30px;
    margin-bottom: 38px;
    padding: 0 8px 35px;
    transition: all ease-in-out 0.5s;
}

#featured-steps .section-content .steps-block:hover {
    box-shadow: 0 26px 0 -13px #fff, 0 44px 0 -22px #fff;
    transition: all ease-in-out 0.5s;
    transform: translateY(-20px);
}

#featured-steps .section-content .steps-block:nth-child(2):hover {
    box-shadow: 0 26px 0 -13px #fff, 0 44px 0 -22px #fff;
}

#featured-steps .section-content .steps-block:nth-child(2) .steps-icon {
    width: 150px;
    height: 150px;
    font-size: 50px;
}

#featured-steps .section-content .steps-block .steps-icon {
    color: #fdc401;
    font-size: 45px;
    bottom: 4rem;
    position: relative;
    background-color: #fff;
    width: 127px;
    height: 128px;
    border: 10px solid;
    border-color: #f3f3f3;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#featured-steps .section-content .steps-block h4 a {
    color: #000;
    font-size: 24px;
    letter-spacing: 0.79px;
    font-weight: 500;
    text-transform: capitalize;
}

#featured-steps .section-content .steps-block:hover h4 a {
    color: #fdc401;
}

#featured-steps .section-content .steps-block .stepsbox {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#featured-steps .section-content .steps-block .stepsbox .steps-title {
    position: relative;
    top: 0rem;
    left: 0px;
    margin-top: 20px;
}

#featured-steps .section-content .steps-block .stepsbox .steps-text {
    font-size: 17px;
    color: #707070;
    letter-spacing: 0.51px;
    padding: 19px 24px;
}

#featured-steps .section-content .steps-block .stepsbox .steps-no {
    color: #01549a;
    font-size: 30px;
    letter-spacing: 0.99px;
    font-weight: 700;
    position: relative;
}

#featured-steps .stepsbox .steps-no::before {
    content: '';
    width: 13%;
    height: 27%;
    position: absolute;
    border-bottom: 3px solid;
    border-bottom-color: #01549a;
    border-left: 3px solid;
    border-left-color: #01549a;
    bottom: 0;
    left: -1rem;
    color: linear-gradient(270deg, #01549a 15%, #01549A2E 50%);
}

#featured-steps .stepsbox .steps-no::after {
    content: '';
    width: 13%;
    height: 27%;
    position: absolute;
    border-top: 3px solid;
    border-top-color: #01549a;
    border-right: 3px solid;
    border-right-color: #01549a;
    bottom: 2rem;
}

/*--------------------------------------------------------------
#  Featured Faqs Section
--------------------------------------------------------------*/

#featured-faqs {
    position: relative;
    overflow: hidden;
}

#featured-faqs .featured-faqs-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: cover;
}

#featured-faqs .faq-margin {
    margin-left: 5rem;
}

#featured-faqs .entry-content3 h5 {
    font-size: 40px;
    color: #01549a;
    letter-spacing: 1.32px;
    font-weight: bold;
    margin-bottom: 40px;
}

#featured-faqs .entry-content3 h5::after {
    content: '';
    display: inline-block;
    width: 35px;
    /* Adjust size based on your design */
    height: 88px;
    /* Adjust size based on your design */
    background-image: url('assets/images/flower.png');
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 10px;
    /* Space between the image and the text */
    vertical-align: middle;
    /* Align the image vertically with the text */
    position: relative;
    left: -7px;
    transform: rotateY(180deg);
}

#featured-faqs .contactmapbox iframe {
    width: 100%;
    height: 553px;
}

#featured-faqs .faqs-block .faqsbox {
    background-color: #e9f5ff;
    /* padding: 27px 30px 20px; */
    margin-bottom: 20px;
}

#featured-faqs .faqs-block .faqsbox .featuretextcontainer .faqs-title {
    font-size: 18px;
    color: #000000;
    text-decoration: none;
}

#featured-faqs .faqs-block .faqsbox .featuretextcontainer .faqs-title:hover {
    background-color: #fdc401;
    color: #000;
}

#featured-faqs .faqs-block .faqsbox .featuretextcontainer .faqs-details p {
    font-size: 16px;
    letter-spacing: 0.53px;
    color: #021338;
    font-weight: 400;
}

#featured-faqs .acc-btn {
    width: 100%;
    padding: 1.3rem;
    border: none;
    outline: none;
    text-align: left;
    transition: all 0.5s linear;
    border-bottom: 1px solid;
    border-bottom-color: #ccc;
}

#featured-faqs .acc-btn:after {
    content: "\f0da";
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    color: #000000;
    float: right;
    transition: all 0.3s linear;
}

#featured-faqs .acc-btn.is-open:after {
    transform: rotate(90deg);
}

#featured-faqs .acc-btn.is-open {
    color: #000;
    margin-bottom: 28px;
}

#featured-faqs .acc-content {
    max-height: 0;
    margin: 0 2rem 1rem 1.4rem;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

/*-----------------------
## FAQS inner page
-----------------------------*/
/* ===============================
   FAQ WRAPPER
=================================*/
#main .faqside {
    max-width: 920px;
    margin: 0 auto;
    padding: 5rem 1rem;
    /* small side padding */
}

/* ===============================
   CATEGORY TITLE
=================================*/
#main .faq-category-title {
    margin-bottom: 40px;
}

#main .faq-category-title h2 {
    font-size: 32px !important;
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: 24px;
    letter-spacing: 0.3px;
}

#main .faq-title-line {
    display: block;
    width: 100%;
    height: 1.6px;
    background-color: #17a2b8;
    margin-top: 10px;
}

/* ===============================
   FAQ CARD
=================================*/
#main .faq-item {
    background: #ffffff;
    border-radius: 30px;
    /* slightly smaller for modern look */
    margin-bottom: 28px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    /*  transition: transform 0.3s ease;*/
}

/* Hover effect for card */
#main .faq-item:hover {
    /*transform: translateY(-3px);*/
}

/* ===============================
   QUESTION BUTTON
=================================*/
#main .faq-question {
    width: 100%;
    background: #ffffff;
    border: none;
    padding: 20px 32px;
    font-size: 16px;
    font-weight: 500;
    color: #101828;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    position: relative;
    transition: background 0.3s ease, color 0.3s ease;
}

/* Hover on question */
#main .faq-question:hover {
    background: #f0f4f8;
}

/* Divider line */
#main .faq-question::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
    opacity: 0;
    transition: opacity 0.3s ease;
}

#main .faq-question.active::after {
    opacity: 1;
}

/* Remove underline & focus outlines */
#main .faq-question,
#main .faq-question:hover,
#main .faq-question:focus,
#main .faq-question:active,
#main .faq-question span {
    text-decoration: none !important;
    outline: none;
}

/* ===============================
   PLUS / MINUS ICON
=================================*/
#main .faq-icon {
    position: relative;
    width: 18px;
    height: 18px;
    display: inline-block;
    flex-shrink: 0;
}

/* Horizontal bar */
#main .faq-icon::before,
#main .faq-icon::after {
    content: '';
    position: absolute;
    background-color: #17a2b8;
    transition: all 0.3s ease;
}

#main .faq-icon::before {
    width: 18px;
    height: 2px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

#main .faq-icon::after {
    width: 2px;
    height: 18px;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

/* Active → Show minus icon */
#main .faq-question.active .faq-icon::after {
    transform: translateX(-50%) rotate(90deg);
    opacity: 0;
}

/* ===============================
   ANSWER PANEL
=================================*/
#main .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.45s ease, padding 0.3s ease, opacity 0.3s ease;
    font-size: 16px;
    line-height: 1.8;
    color: #4a5565;
    opacity: 0;
}

/* Open state */
#main .faq-answer.open {
    max-height: 500px;
    /* adjust if content is taller */
    padding: 20px 32px;
    opacity: 1;
}

/* ====================================
   SUPPORT BANNER SECTION
==================================== */

#main .support-banner-wrapper {
    padding: 80px 0px;
    background: #fff;
}

#main .support-banner-container {
    max-width: 1499px;
    margin: 1rem auto 4rem;
}

#main .support-banner-box {
    background: linear-gradient(90deg, #1e3a8a 0%, #0891b2 100%);
    border-radius: 51px;
    padding: 48px;
    text-align: center;
    color: #ffffff;
}

/* Title */
#main .support-banner-title {
    font-size: 42px !important;
    clear: both;
    color: #ffff !important;
    margin: 0 0 16px;
    line-height: 1.3;
    font-weight: 700;
}

/* Subtitle */
#main .support-banner-subtitle {
    font-size: 20px !important;
    margin-bottom: 32px;
    opacity: 0.9;
    color: #dbeafe;
}

/* Buttons Wrapper */
#main .support-banner-buttons {
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
}

/* Common Button */
#main .support-btn {
    padding: 16px 32px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

/* Yellow Button */
#main .support-btn-primary {
    background: var(--theme-color);
    color: #000;
}

#main .support-btn-primary:hover {
    background: #ffb300;
    transform: scale(1.05);
    /* Subtle 5% bigger */
}

/* White Button */
#main .support-btn-secondary {
    background: #ffffff;
    color: #1d3b8b;
}

#main .support-btn-secondary:hover {
    background: #f2f2f2;
    transform: scale(1.05);
    /* Subtle 5% bigger */
}

/*-----------------------
 ## End FAQS page
 -----------------------------*/

/*-----------------------
## Contact Inner page
-----------------------------*/
/* =====================================================
   CONTACT SECTION WRAPPER
===================================================== */

#contact-section {
    background: #fff !important;
    padding: 90px 9px;
}

#contact-section .container {
    max-width: 1499px;
    /* FIX: image uses tighter container */
}

/* =====================================================
   CARD BASE STYLE
===================================================== */

#contact-section .contact-form-card {
    background: #fff;
    min-height: auto;
    border-radius: 24px;
    padding: 40px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.07);
}

#contact-section .contact-info-card,
#contact-section .service-areas-card {
    background: #fff;
    border-radius: 24px;
    padding: 32px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.07);
}

/* spacing right cards */
#contact-section .contact-info-card,
#contact-section .emergency-card {
    margin-bottom: 24px;
}

/* =====================================================
   FORM CARD (LEFT)
===================================================== */

#contact-section .contact-form-card {
    max-width: 720px;
    /* ⭐ MAIN FIX — correct width */
    margin-right: auto;
}

/* =====================================================
   FORM HEADER
===================================================== */

#contact-section .contact-form-area .form-title {
    font-size: 32px;
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: 6px;
    letter-spacing: -0.2px;
}

#contact-section .contact-form-area .form-subtitle {
    font-size: 16px;
    color: #6b7280;
    margin-bottom: 32px;
    line-height: 1.6;
    max-width: 520px;
}

.contact-form-area label {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0px;
    display: block;
}

/* =====================================================
   FORM FIELDS
===================================================== */

.contact-form-area input[type="text"],
.contact-form-area input[type="email"],
.contact-form-area input[type="tel"],
.contact-form-area input[type="number"],
.contact-form-area select,
.contact-form-area textarea {
    width: 100%;
    border: 1px solid #e6e8ec;
    border-radius: 12px;
    padding: 15px 18px !important;
    font-size: 14px;
    background: #f8fafc;
    transition: .25s ease;
}

.contact-form-area input[type="text"]:focus,
.contact-form-area input[type="email"]:focus,
.contact-form-area input[type="tel"]:focus,
.contact-form-area input[type="number"]:focus,
.contact-form-area select:focus,
.contact-form-area textarea:focus {
    border-color: #01549a !important;
    /* Your focus color */
    outline: none;
    /* Removes default blue outline */
}

/* PERFECT FIELD HEIGHT */

.contact-form-area select {
    height: 48px;
}

.contact-form-area textarea {
    min-height: 130px;
    resize: none;
}

/* focus */

.contact-form-area select:focus,
.contact-form-area textarea:focus {
    outline: none;
    border-color: #2563eb;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .08);
}

/* spacing between fields */
.contact-form-area p {
    margin-bottom: 20px;
}

/* =====================================================
   SUBMIT BUTTON (FIXED)
===================================================== */
#contact-section .send-btn {
    width: 100%;
    padding: 16px 32px !important;
    border: none;
    border-radius: 50px;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;

    font-size: 18px;
    font-weight: 600;
    color: #ffffff !important;
    line-height: 1;

    background: linear-gradient(90deg, #2b4c9c, #1ea6a8) !important;
    cursor: pointer;
    /* transition: all ensures the grow and shadow effect are smooth */
    transition: all 0.3s ease;
}

#contact-section .send-btn:hover {
    /* --- ONLY SCALE (STAYS IN PLACE) --- */
    /* Removed any translateY so it doesn't float up */
    transform: scale(1.08);

    /* Deepened shadow for a premium "big" look */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

/* Icon styling */
#contact-section .send-btn svg {
    font-size: 20px;
    color: #fff !important;
    line-height: 1;
    display: flex;
    align-items: center;
}

/* Remove underline completely */
#contact-section .send-btn,
#contact-section .send-btn span {
    text-decoration: none !important;
}

/* Hover effect */
#contact-section .send-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
}

/* =====================================================
   INFO CARD
===================================================== */

#contact-section .contact-info-card h3 {
    font-size: 24px;
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: 24px;
}

/* info layout */
#contact-section .info-item {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    margin-bottom: 24px;
}

/* ICON CIRCLE — EXACT SIZE */
#contact-section .info-icon {
    width: 48px;
    height: 48px;
    min-width: 44px;
    border-radius: 37%;
    background: linear-gradient(135deg, #274b8f 0%, #1da3a6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

#contact-section .info-icon svg,
#contact-section .info-icon i {
    font-size: 23px;
    color: #fff;
}

/* text */
#contact-section .info-item strong {
    display: block;
    color: #101828;
    font-size: 20px;
    margin-bottom: 4px;
}

#contact-section .info-item p {
    margin: 0;
    font-size: 16px;
    color: #6b7280;
}

#contact-section .info-item p a {
    margin: 0;
    font-size: 16px;
    color: #0891b2;
}

#contact-section .info-item p a:hover {
    margin: 0;
    font-size: 16px;
    color: #1e3a8a;
}

#contact-section .info-item small {
    font-size: 14px;
    color: #4a5565;
    margin-top: 4px !important;
}

/* =====================================================
   EMERGENCY CARD
===================================================== */

#contact-section .emergency-card {
    border-radius: 41px;
    padding: 32px;
    color: #fff;
    background: linear-gradient(135deg, #274b8f 0%, #1da3a6 100%);
    box-shadow: 0 22px 55px rgba(0, 0, 0, .15);
}

#contact-section .emergency-card h3 {
    font-size: 24px;
    color: #fff;
    font-weight: 700;
    margin-bottom: 16px;
}

#contact-section .emergency-card p {
    font-size: 16px;
    opacity: .9;
    margin-bottom: 24px;
}

/* button */
#contact-section .emergency-btn {
    display: block;
    font-size: 16px;
    text-align: center;
    background: var(--theme-color);
    color: #101828;
    padding: 16px 32px;
    border-radius: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: .3s;
}

#contact-section .emergency-btn:hover {
    /* Combined both the lift (translateY) and the grow (scale) */
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 12px 22px rgba(0, 0, 0, .25);
}

/* =====================================================
   SERVICE AREAS
===================================================== */

#contact-section .service-areas-card h3 {
    font-size: 24px;
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: 16px;
}

#contact-section .service-areas-card p {
    font-size: 16px;
    color: #6b7280;
    margin-bottom: 16px;
}

/* grid spacing FIX */
#contact-section .service-areas-card .row {
    row-gap: 8px;
    justify-content: space-evenly;
}

/* =====================================================
   SERVICE AREAS LIST (IMAGE ACCURATE)
===================================================== */

#contact-section .service-areas-card ul {
    margin: 0;
    padding: 0;
}

#contact-section .service-areas-card li {
    list-style: none;
    /* remove default bullet */
    position: relative;
    padding-left: 16px;
    margin-bottom: 8px;
    font-size: 14px;
    color: #374151;
}

/* custom blue dot */
#contact-section .service-areas-card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 8px;
    height: 8px;
    background: #0891b2;
    border-radius: 50%;
}

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

@media(max-width:991px) {

    #contact-section {
        padding: 70px 15px;
    }

    #contact-section .contact-form-card {
        max-width: 100%;
    }

    .contact-form-card,
    .contact-info-card,
    .service-areas-card {
        padding: 26px;
    }
}

@media(max-width:576px) {

    #contact-section .info-item {
        align-items: flex-start;
    }
}

/*--------------------------------------------------------------
#  Inner page Gallery
--------------------------------------------------------------*/
#main .gallerybox {
    padding: 5rem 1rem;
}

#main .gallery-card {
    background: #ffffff;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.10);


}

#main .gallery-card:hover {

    box-shadow: 0 25px 55px rgba(0, 0, 0, 0.15);
}

/* ======================================================
   IMAGE
====================================================== */

#main .gallery-img-wrapper {
    position: relative;
    overflow: hidden;
}

#main .gallery-img-wrapper img {
    width: 100%;
    height: 354px;
    object-fit: cover;
    display: block;
    transition: 0.5s ease;
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
}

#main .gallery-card:hover .gallery-img-wrapper img {
    transform: scale(1.06);
}

/* ======================================================
   LABEL
====================================================== */

#main .gallery-label {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--theme-color);
    color: #000;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 50px;
    z-index: 3;
}

/* ======================================================
   ZOOM ICON
====================================================== */

#main .gallery-zoom-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    /* Increased size to match the image scale */
    height: 64px;
    border-radius: 50%;

    /* Darker, semi-transparent background */
    background-color:
        color-mix(in oklab, var(--color-white) 20%, transparent);

    /* Modern glass effect (optional) */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    display: flex;
    align-items: center;
    justify-content: center;

    /* Transition and Visibility */
    opacity: 0;
    /* Hidden by default */
    pointer-events: none;
    /* Prevents icon from blocking hover on the card */
    transition: all 0.3s ease;
    z-index: 4;
}

#main .gallery-zoom-icon svg {
    width: 30px;
    height: 30px;
    fill: #ffffff !important;
    /* Colors solid SVG paths */
    color: #ffffff !important;
    /* Colors icons that inherit text color */

    /* You can remove stroke and stroke-width if the icon looks too thick now, 
       or leave them if it's a line-art style icon */
    stroke: none;
}

/* Show on Hover */
#main .gallery-card:hover .gallery-zoom-icon {
    opacity: 1;
}

/* ======================================================
   TITLE
====================================================== */

#main .gallery-content {
    padding: 16px;
}

#main .gallery-content h4 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #1c2b39;
    text-align: left;
}

/* ======================================================
   MODAL
====================================================== */

.gallery-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999999;
    background: rgba(0, 0, 0, 0.95);
    justify-content: center;
    align-items: center;
    padding: 40px;
}

/* Prevent scrolling */
body.modal-open {
    overflow: hidden;
}

/* Hide header stacking */
body.modal-open header,
body.modal-open .site-header,
body.modal-open #masthead {
    z-index: 1 !important;
}

/* SAME SIZE FOR ALL BIG IMAGES */
.gallery-modal-img {
    width: 100%;
    max-width: 900px;
    height: 600px;
    object-fit: cover;
    border-radius: 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

/* CLOSE BUTTON — CIRCLE OVERLAY STYLE */
#main .gallery-close {
    position: absolute;
    top: 45px;
    right: 35px;

    width: 45px;
    height: 45px;

    background: rgba(255, 255, 255, 0.15);
    /* semi transparent circle */
    backdrop-filter: blur(6px);

    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    font-size: 20px;
    cursor: pointer;

    transition: 0.3s ease;
}

/* Hover Effect */
#main .gallery-close:hover {
    background: #fff;
    color: #000;
    transform: scale(1.1);
}


/*--------------------------------------------------------------
#  Featured Testimonial Inner Page (Modern Card Style)
--------------------------------------------------------------*/
#main .testimonial-inner-page {
    max-width: 1499px;
    margin: 0 auto;
    padding: 5rem 0;
}

#main .testimonial-inner-page {
    position: relative;
}

/* =========================
    CARD
========================= */
#main .testimonial-inner-content {
    background: #ffffff;
    padding: 32px;
    border-radius: 46px;
    /* Base Shadow */
    box-shadow: 0 46px 60px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.4s ease;
    /* Transition only the shadow */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#main .testimonial-inner-content:hover {
    /* Removed transform: translateY(-10px); */

    /* Stronger, deeper shadow on hover */
    box-shadow: 0 60px 80px rgba(0, 0, 0, 0.12);
}

/* =========================
   TOP AREA (Quote + Stars)
========================= */
#main .testimonial-top {
    margin-bottom: 24px;
}

/* Quote icon (light blue big symbol) */
#main .testimonial-quote-icon {
    font-size: 49px;
    color: #d6eaf5;
    line-height: 1;
}

/* Stars */
#main .testimonial-rating .star {
    color: #f4b400;
    font-size: 25px;
    margin-left: 3px;
}

/* =========================
   TEXT SECTION
========================= */
#main .testimonialstextbg {
    margin-bottom: 25px;
    color: #364153eb;
}

#main .testimonial-excerpt p {
    font-size: 16px;
    color: #364153;
    line-height: 30px;
    font-weight: 400;
    margin: 0;
}

/* =========================
   BLUE PILL (Extra Text)
========================= */
#main .testimonial-extra-text {
    /*margin-top: 20px;*/
}

#main .testimonial-extra-text p {
    display: inline-block;
    padding: 8px 16px;
    background: #eff6ff;
    color: #0891b2;
    border-radius: 40px;
    font-size: 14px;
    font-weight: 500;
    margin: 0;
}

/* =========================
   DIVIDER + CLIENT INFO
========================= */
#main .testimonial-inner-content .content-image {
    border-top: 1px solid #e6e6e6;
    padding-top: 25px;
    margin-top: 30px;
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Client Image */
#main .innertestimg {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

#main .innertestimg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Name */
#main .testimonial-inner-content h4.testimonials-title {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 4px;
}

/* Designation */
#main .testimonial-inner-content .testimonials-designation {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

/* REMOVE THEME DEFAULT PAGINATION STYLES */
.testimonial-pagination ul li::before,
.testimonial-pagination ul li a::before,
.testimonial-pagination ul li::after,
.testimonial-pagination ul li a::after {
    content: none !important;
    display: none !important;
}

/* ===============================
   CLEAN PAGINATION DESIGN
================================ */

#main .testimonial-pagination {
    /* margin-top: 94px;*/
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
}

#main .testimonial-pagination ul {
    display: flex;
    align-items: center;
    gap: 30px;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* All Buttons */
#main .testimonial-pagination ul li a,
#main .testimonial-pagination ul li span {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 20px;
    font-weight: 500;
    background: #f3f4f6;
    color: #6b7280;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

/* Active Page */
#main .testimonial-pagination ul li span.current {
    background: linear-gradient(135deg, #1e3a8a, #14b8a6);
    color: #fff;
    box-shadow: 0 12px 30px rgba(20, 184, 166, 0.35);
}

/* Hover */
#main .testimonial-pagination ul li a:hover {
    transform: translateY(-4px);
}

/* Arrow size */
#main .testimonial-pagination ul li a.prev,
#main .testimonial-pagination ul li a.next {
    font-size: 24px;
}

/* Remove theme arrow */
#main .testimonial-pagination ul li::before {
    content: none !important;
}

/* Disabled arrow */
#main .testimonial-pagination .disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 991px) {
    #main .testimonial-inner-page {
        /*grid-template-columns: 1fr !important;*/
        padding: 5rem 1rem;
    }
}

@media (max-width: 1024px) {
    #main .testimonial-inner-page {
        /*grid-template-columns: 1fr !important;*/
        padding: 5rem 1rem;
    }
}

/*--------------------------------------------------------------
# Latest Posts(blog)
--------------------------------------------------------------*/
#featured-posts {
    position: relative;
    overflow: hidden;
    padding-top: 5em;
}

/* #featured-posts .posts-overlay {
    background: #0F5290bf;
    background: #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0.9;
} */

#featured-posts .featured-posts-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 1;
}

#featured-posts .title-section {
    display: block;
    margin-bottom: 1em;
}

#featured-posts .title-section h1 {
    /* margin: 0 0 20px; */
    font-size: 40px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: 0px;
    color: #01549a;
    padding: 0 0px;
    border-radius: 0px;
    position: relative;
}

#featured-posts .title-section h1::before {
    content: '';
    display: inline-block;
    width: 35px;
    /* Adjust size based on your design */
    height: 100px;
    /* Adjust size based on your design */
    background-image: url('assets/images/flower.png');
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 10px;
    /* Space between the image and the text */
    vertical-align: middle;
    /* Align the image vertically with the text */
    position: relative;
    left: 20px;
}

#featured-posts .featured-image {
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    padding: 0;
    height: 515px;
    width: 100%;
    transition: 0.5s;
    position: relative;
}

#featured-posts .entry-container {
    position: absolute;
    bottom: 0px;
    background: linear-gradient(180deg, #00000000, #000000);
}

#featured-posts .post-item {
    /* border-radius: 10px; */
    background-color: #fff;
    /* padding: 5px; */
    position: relative;
    width: 90%;
}

#featured-posts .post-item:hover h2.entry-title a {
    color: #F6BB19;
}

#featured-posts .entry-contentbox {
    padding: 0px 28px 18px 39px;
    position: relative;
}

#featured-posts .entry-contentbox .entry-title {
    margin: 0 0px 20px;
}

#featured-posts .entry-meta {
    padding: 6px 7px 0;
    text-align: center;
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 10px 0;
    text-decoration: none;
    border: none;
    justify-content: space-between;
}

#featured-posts .entry-meta a {
    font-size: 14px;
    color: #fff;
}

#featured-posts .entry-meta i,
#featured-posts .entry-meta svg {
    font-size: 18px;
    text-decoration: none;
    color: #fdc401;
    line-height: 8px;
    text-align: center;
    font-weight: 400;
}

#featured-posts .entry-meta .d-flex {
    gap: 30px;
}

#featured-posts h2.entry-title a {
    color: #fff;
    text-decoration: none;
    font-size: 20px;
    font-weight: 400;
    position: relative;
    line-height: 34px;
    letter-spacing: 0.66px;
}

#featured-posts .entry-content {
    padding: 20px 0 20x 22px;
}

#featured-posts .entry-content p {
    color: #000;
    line-height: 18px;
    margin-bottom: 5px;
    padding-right: 10px;
    font-size: 15px;
    z-index: 1;
    position: relative;
}

#featured-posts .posts-date {
    padding: 12px 0 0 0;
    display: flex;
    justify-content: space-between;
}

#featured-posts .posts-date .arrow-up {
    margin-right: 4rem;
    transform: rotate(45deg);
    font-size: 18px;
    color: #fff;
    transition: 0.4s;
}

#featured-posts .posts-date svg {
    color: #fdc401;
}

#featured-posts .posts-date a {
    color: #fff;
    font-weight: 300;
}

#featured-posts hr {
    width: 90%;
    color: #fff;
    opacity: 1;
}

#main .post-meta svg {
    font-size: 14px;
    margin-right: 6px;
    color: #0891b2;
}

/* =====================================================
    BLOG Inner
===================================================== */

#main .blog-fullwidth-page {
    padding: 5rem 1rem 0;
}

/* =====================================================
   CATEGORY FILTER
===================================================== */

#main .blog-category-filter {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    background: #fff;
    padding: 16px;
    border-radius: 60px;
    width: 100%;
    max-width: 1499px;
    margin: -81px auto 55px !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
    position: relative;
    transform: translateY(-33px);
    /* moves it upward cleanly */
    z-index: 10;
    /* keep above previous section */
    /* ✅ INCREASED so it stays above header */
}

#main .blog-category-filter .cat-btn {
    padding: 12px 24px;
    background: #eef2f7;
    border-radius: 30px;
    text-decoration: none;
    font-size: 16px;
    color: #3c4b6e;
    transition: background 0.3s ease, color 0.3s ease;
    /* Transition only colors */
    white-space: nowrap;
}

/* --- HOVER EFFECT (Background color only) --- */
#main .blog-category-filter .cat-btn:not(.active):hover {
    background: #e2e8f0;
    /* Subtle grey shift */
    color: #1e3a8a;
    /* Slight text color shift for contrast */
}

#main .blog-category-filter .cat-btn.active {
    background: linear-gradient(135deg, #1e3a8a, #0891b2);
    color: #fff;
}

/* =====================================================
   GALLERY ZOOM ICON (Glass Effect & White Icon)
===================================================== */

#main .gallery-zoom-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 4;
}

#main .gallery-zoom-icon svg {
    width: 30px;
    height: 30px;
    fill: #ffffff !important;
    color: #ffffff !important;
    stroke: none;
}

#main .gallery-card:hover .gallery-zoom-icon {
    opacity: 1;
}


/* =====================================================
   FEATURED POST
===================================================== */
/* 1. Put the Strict Lock Back */
#main .featured-post {
    width: 100%;
    max-width: 1499px;
    margin: 0 auto 60px;
    display: grid;
    grid-template-columns: 1fr 1fr !important;
    background: #fff;
    border-radius: 40px;

    /* --- STRICT HEIGHT LOCK --- */
    height: 400px !important;
    overflow: hidden;

    box-shadow: 0 15px 45px rgba(0, 0, 0, .05);
}

/* Card Hover States */
#main .featured-post:hover {
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
    transform: translateY(-5px);
}

#main .featured-post:hover .featured-img img {
    transform: scale(1.08);
}

#main .featured-post:hover .featured-content h2 a {
    color: #0891b2;
}

/* IMAGE */
#main .featured-img {
    position: relative;
    width: 100%;
    height: 100%;
    /* Forces image container to fill the 450px height */
    overflow: hidden;
}

#main .featured-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Perfectly fills the area without stretching */
    display: block;
    transition: transform 0.5s ease;
}

/* BADGE */
#main .featured-badge {
    position: absolute;
    top: 25px;
    left: 25px;
    background: var(--theme-color);
    color: #000;
    padding: 10px 24px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
    z-index: 5;
}

/* CONTENT */
#main .featured-content {
    padding: 48px;
    /* Generous padding for high-end look */
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    overflow: hidden;
}

#main .post-cat {
    background: #e6f0ff;
    color: #2563eb;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 20px;
    width: max-content;
    margin-bottom: 20px;
}

/* 1. Fix the Title */
#main .featured-content h2 {
    margin-bottom: 15px;
    line-height: 1.15 !important;

    /* --- THE NEW FIXES --- */
    flex-shrink: 0;
    /* Prevents Flexbox from squishing the text box */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* A 60px font is too large for 3 lines in a 450px card. Limit it to 2. */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 2. Fix the Description */
#main .featured-content p {
    color: #64748b;
    margin-bottom: 0;
    line-height: 1.6;

    /* --- THE NEW FIX --- */
    flex-shrink: 0;
    /* Prevents Flexbox from squishing the paragraph */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#main .featured-content h2 a {
    color: #1e3a8a;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* META & BUTTONS */
#main .featured-post .post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    font-size: 14px;
    color: #6a7282;
    margin-bottom: 25px;
}

#main .read-btn {
    color: #1e3a8a;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    text-decoration: none;
}

#main .read-btn svg,
#main .read-btn i {
    color: #1e3a8a;
    transition: transform 0.3s ease;
}

#main .featured-post:hover .read-btn svg,
#main .featured-post:hover .read-btn i {
    transform: translateX(6px);
}

/* =====================================================
   BLOG GRID
===================================================== */

#main .blog-grid {
    width: 100%;
    max-width: 1499px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
}

#main .blog-card {
    width: 100%;
    background: #fff;
    border-radius: 42px;
    overflow: hidden;
    box-shadow: 0 14px 35px rgba(0, 0, 0, .06);
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.3s ease;
}

#main .blog-card:hover {
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
}

#main .card-img {
    position: relative;
    height: 295px;
    overflow: hidden;
}

#main .card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#main .category-top {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--theme-color);
    color: #000;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#main .card-content {
    padding: 30px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

#main .card-content h3 {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 15px;
}

#main .card-content h3 a {
    text-decoration: none;
    color: #1e3a8a;
    transition: color 0.3s ease;
}

#main .blog-card:hover .card-content h3 a {
    color: #0891b2;
}

#main .card-content .post-meta {
    border-top: 1px solid #edf1f6;
    padding-top: 18px;
    margin-top: auto;
    /* Pushes meta to the bottom evenly across all cards */
    display: flex;
    gap: 18px;
    font-size: 14px;
    color: #6a7282;
}

/* =====================================================
   RESPONSIVE ADD-ONS
===================================================== */

/* Tablet & Smaller Desktop */
@media (max-width: 1100px) {
    #main .featured-post {
        grid-template-columns: 1fr 1fr !important;
        height: auto !important;
        /* Release the lock for smaller screens */
        min-height: 400px;
        max-width: 95%;
    }

    #main .featured-content {
        padding: 40px !important;
    }
}

/* Mobile & Small Tablets */
@media (max-width: 850px) {
    #main .featured-post {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
        border-radius: 25px;
        margin-bottom: 40px;
    }

    #main .featured-img {
        width: 100% !important;
        height: 300px !important;
        /* Generous height for mobile image */
    }

    #main .featured-content {
        width: 100% !important;
        padding: 30px !important;
    }

    #main .featured-content h2 {
        font-size: 26px !important;
        -webkit-line-clamp: 4;
        /* Allow more lines on mobile if needed */
    }

    #main .blog-grid {
        grid-template-columns: 1fr !important;
        gap: 30px;
        padding: 0 15px;
    }
}

/* Extra Small Phones */
@media (max-width: 480px) {
    #main .featured-img {
        height: 220px !important;
    }

    #main .featured-badge {
        top: 15px;
        left: 15px;
        padding: 8px 16px;
        font-size: 13px;
    }

    #main .featured-content {
        padding: 20px !important;
    }
}

/* =====================================================
   BLOG GRID
===================================================== */

#main .blog-grid {
    width: 100%;
    max-width: 1499px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
}

/* CARD */

#main .blog-card {
    width: 100%;
    background: #fff;
    border-radius: 42px;
    overflow: hidden;
    box-shadow: 0 14px 35px rgba(0, 0, 0, .06);
    display: flex;
    flex-direction: column;


}

/* NEW: Card Hover State */
#main .blog-card:hover {
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);

}

/* IMAGE WRAPPER */

#main .card-img {
    position: relative;
    height: 295px;
    overflow: hidden;
}

#main .card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =====================================================
   CATEGORY BADGE
===================================================== */

#main .category-top {
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--theme-color);
    color: #000;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* CONTENT */

#main .card-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

#main .card-content h3 {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 12px;
}

#main .card-content h3 a {
    text-decoration: none;
    color: #1e3a8a;
    transition: color 0.3s ease;
    /* NEW: Smooth color fade */
}

/* NEW: Change title color when the whole card is hovered */
#main .blog-card:hover .card-content h3 a {
    color: #0891b2;
    /* Matches your brighter blue brand color */
}

#main .post-full-content {
    flex-grow: 1;
}

#main .post-full-content p {
    font-size: 16px;
    color: #4a5565;
    margin-bottom: 16px !important;
}

#main .card-content .post-meta {
    border-top: 1px solid #edf1f6;
    padding-top: 14px;
    margin-top: 18px;
    display: flex;
    gap: 18px;
}

/* =====================================================
   PAGINATION
===================================================== */

#main .pagination {
    text-align: center;
    margin-top: 60px;
}

#main .pagination .page-numbers {
    display: inline-block;
    background: #fff;
    padding: 10px 15px;
    margin: 0 4px;
    border-radius: 8px;
    text-decoration: none;
    color: #1e3a8a;
    box-shadow: 0 6px 15px rgba(0, 0, 0, .05);
}

#main .pagination .current {
    background: #2563eb;
    color: #fff;
}

/* =====================================================
   RESPONSIVE
===================================================== */
/* =====================================================
   FINAL MOBILE FIX FOR FEATURED POST
===================================================== */

@media (max-width: 992px) {

    #main .featured-post {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
    }

    #main .featured-img,
    #main .featured-content {
        width: 100% !important;
        flex: 0 0 100% !important;
    }

    #main .featured-img img {
        width: 100%;
        height: auto !important;
        aspect-ratio: 16/9;
    }

    #main .featured-content {
        padding: 22px !important;
    }

    #main .blog-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }
}

@media (max-width:600px) {

    #main .blog-grid {
        grid-template-columns: 1fr;
    }

    #main .blog-category-filter {
        border-radius: 20px;
    }

    #main .featured-content {
        padding: 28px;
    }
}


/* =====================================================
   BLOG BUTTON & ICON ANIMATION
===================================================== */

/* =====================================================
   BUTTON & ICON ANIMATION
===================================================== */

/* 1. Base Button Styles */
#main .read-btn1 {
    color: #1e3a8a;
    font-size: 16px !important;
    font-weight: 600;
    padding-top: 1rem;
    display: inline-flex;
    /* Keeps text and icon on one line */
    align-items: center;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* 2. Base State of the Icon (Crucial Fix) */
#main .read-btn1 .btn-icon-animate {
    margin-left: 8px;
    vertical-align: middle;
    /* We force inline-block so the browser allows the 'transform' to happen */
    display: inline-block !important;
    transition: transform 0.3s ease-in-out !important;
}

/* 3. Move icon when the TESTIMONIAL card is hovered */
#main .testimonial-inner-content:hover .btn-icon-animate {
    transform: translateX(10px) !important;
}

/* 4. Move icon when the BLOG card is hovered */
#main .blog-card:hover .btn-icon-animate {
    transform: translateX(10px) !important;
}

/* 5. Move icon if only the BUTTON itself is hovered */
#main .read-btn1:hover .btn-icon-animate {
    transform: translateX(10px) !important;
}

.blog-pagination {
    display: flex;
    justify-content: center;
    margin: 60px 0 44px;
}

.blog-pagination ul {
    display: flex;
    align-items: center;
    gap: 18px;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* circle base */
.blog-pagination li a,
.blog-pagination li span {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all .3s ease;
}

/* normal pages */
.blog-pagination li a {
    background: #f3f4f6;
    color: #111;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
}

/* hover */
.blog-pagination li a:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, .15);
}

/* active page */
.blog-pagination .current {
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    color: #fff;
    box-shadow: 0 10px 25px rgba(37, 99, 235, .35);
}

/* arrows */
.blog-pagination .arrow {
    font-size: 20px;
}

/* disabled arrow */
.blog-pagination .disabled {
    background: #f3f4f6;
    color: #bbb;
    cursor: not-allowed;
    box-shadow: none;
}

/* =======================================================
   FIX: FORCE FOOTER VISIBILITY ON TABLET & MOBILE (WOW.js Override)
   ======================================================= */
@media screen and (max-width: 1024px) {

    #colophon .footerbox.wow,
    #colophon .wow {
        visibility: visible !important;
        animation-name: none !important;
    }
}

/* --- Subscribe Banner Container --- */
.subscribe-banner {
    position: relative;
    padding: 60px 20px;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.subscribe-content {
    position: relative;
    z-index: 2;
    background: linear-gradient(90deg, #163683 0%, #0e8aad 100%);
    /* Blue-to-teal gradient */
    padding: 48px;
    border-radius: 45px;
    /* Large rounded corners per image */
    max-width: 1499px;
    width: 100%;
    color: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    text-align: center;
}

/* --- Typography --- */
.subscribe-content h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #ffffff;
}

.subscribe-desc {
    font-size: 20px;
    font-weight: 200;
    line-height: 1.6;
    margin-bottom: 35px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.9;
}

/* --- Form Layout --- */
.subscribe-form {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* --- Email Input Field --- */
.subscribe-form input[type="email"] {
    background-color: transparent;
    /* Set border to transparent initially so no border is visible */
    border: 4px solid transparent;
    border-radius: 50px;
    padding: 14px 25px;
    width: 100%;
    max-width: 259px;
    color: #ffffff;
    outline: none;
    /* Crucial: removes default browser focus ring */
    font-size: 16px;
    transition: all 0.3s ease;
}

.subscribe-form input[type="email"]::placeholder {
    /* Muted placeholder color to match the "before clicking" image */
    color: rgba(255, 255, 255, 0.3);
}

/* --- CLICK/FOCUS STATE --- */
.subscribe-form input[type="email"]:focus {
    /* Border changes to yellow only when the field is active/clicked */
    border-color: #ffc221;
    background-color: rgba(255, 255, 255, 0.15);
}

/* --- Submit Button --- */
.subscribe-form button {
    background-color: var(--theme-color);
    /* Golden yellow */
    color: #101828;
    border: none;
    border-radius: 50px;
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none !important;
    /* Forces removal of any lines/underlines */
    transition: all 0.3s ease;
    white-space: nowrap;
    display: inline-block;
    /* Ensures transform works correctly */
}

.subscribe-form button:hover {
    background-color: var(--theme-color);
    /* transform: translateY(-2px) combined with scale(1.05) makes it float and grow */
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    text-decoration: none !important;
    /* Ensures no line appears on hover */
    outline: none;
}

/* --- Responsive for Mobile --- */
@media (max-width: 768px) {
    .subscribe-content {
        padding: 40px 20px;
        border-radius: 30px;
    }

    .subscribe-form {
        flex-direction: column;
    }

    .subscribe-form input[type="email"] {
        max-width: 100%;
    }

    .subscribe-form button {
        width: 100%;
    }
}

/* =====================================
   PRICING SECTION HEADER
===================================== */

#main #featured-pricings {
    text-align: center;
    padding-bottom: 90px;
}

#main #featured-pricings .title-section {
    max-width: 820px;
    margin: 0 auto 80px;
    padding: 0 20px;
    display: block;
}

/* Ensure the parent section holds the absolute background */
#featured-pricings {
    position: relative;
    z-index: 1;
}

/* Stretch the background div to cover the whole section */
#featured-pricings .featured-pricings-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /* Puts it behind your content */
}

/* =====================================
   PRICING SECTION HEADER
===================================== */

#main #featured-pricings {
    text-align: center;
    padding-bottom: 90px !important;
}

#main #featured-pricings .title-section {
    max-width: 820px;
    margin: 0 auto 80px;
    padding: 0 20px;
    display: block;
}

/* ================= MAIN HEADING ================= */

#main #featured-pricings .shortcode-title-section h1 {
    color: #1E3A8A;
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 16px;
}

/* ================= SUBTITLE ================= */

#main #featured-pricings .shortcode-title-section p {
    font-size: 16px;
    font-weight: 400;
    color: #6B7280;
    margin-bottom: 4rem;
}

/* ================= DESCRIPTION ================= */

#main #featured-pricings .section-top-des {
    font-size: 18px;
    color: #6B7280;
}

/* ==================================================
   FEATURED PRICING SECTION
================================================== */

#main .pricing-column {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 35px;
    flex-wrap: wrap;
    padding: 0 15px;
}

/* ================= CARD ================= */

#main .featured-pricings-item {
    width: 100% !important;
    max-width: 380px !important;
    position: relative;
    display: flex;
}

#main .pricing-box {
    border-radius: 35px;
    overflow: hidden;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    width: 100%;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
    transition: 0.4s ease;
}

/* ================= MIDDLE CARD ================= */

#main .featured-pricings-item.card-2 {
    transform: translateY(-20px);
    z-index: 5;
}

#main .featured-pricings-item.card-2 .pricing-box {
    box-shadow: 0 35px 70px rgba(8, 145, 178, 0.15);
}

/* ================= BADGE ================= */

#main .popular-badge {
    position: absolute;
    top: 25px;
    right: 25px;
    background: #FFB400;
    color: #000;
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* ================= HEADER ================= */

#main .pricing-header {
    padding: 60px 35px 45px;
}

#main .card-1 .pricing-header {
    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
}

#main .card-2 .pricing-header {
    background: linear-gradient(135deg, #1E3A8A 0%, #0891B2 100%);
    color: #ffffff;
}

#main .card-3 .pricing-header {
    background: linear-gradient(135deg, #FFF0E6 0%, #FDE4E4 100%);
}

/* ================= MAIN ICON (HEADER) ================= */

#main .pricing-icon {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    display: flex;
    color: #ffffff;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}

#main .pricing-icon svg {
    width: 30px;
    height: 30px;
    fill: #ffffff;
}

#main .card-1 .pricing-icon {
    background: linear-gradient(135deg, #828C9A 0%, #AAB1BB 100%);
}

#main .card-2 .pricing-icon {
    background: linear-gradient(135deg, var(--theme-color) 0%, #F59E0B 100%);
}

#main .card-3 .pricing-icon {
    background: linear-gradient(135deg, #F85B5B 0%, #FF7B33 100%);
}

/* ================= TEXT ================= */

#main .plan-title {
    font-size: 24px !important;
    text-align: left;
    font-weight: 700;
    margin-bottom: 8px;
}

#main .card-1 .plan-title,
#main .card-3 .plan-title {
    color: #1E3A8A;
}

#main .card-2 .plan-title {
    color: #ffffff;
}

#main .plan-desc {
    font-size: 14px;
    text-align: left;
    color: #4A5565;
    line-height: 1.6;
    margin-bottom: 18px;
}

#main .card-2 .plan-desc {
    color: #E0E7FF;
}

#main .plan-price {
    text-align: left;
}

#main .plan-price .amount {
    font-size: 60px;
    font-weight: 700;
}

#main .card-1 .amount,
#main .card-3 .amount {
    color: #1E3A8A;
}

#main .card-2 .amount {
    color: #ffffff;
}

#main .plan-price .duration {
    font-size: 18px;
    margin-left: 5px;
    color: #6A7282;
}

#main .card-2 .duration {
    color: #E0E7FF;
}

/* ================= BODY ================= */

#main .pricing-body {
    padding: 45px 35px;
    background: #ffffff;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ================= LIST FEATURES ================= */

#main .plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 35px;
}

#main .plan-features li {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 15px;
    color: #4A5568;
}

/* ================= LIST ICON (SVG) ================= */

#main .feature-icon {
    /* Controls circle background size */
    width: 10px !important;
    height: 10px !important;

    /* Centers the internal SVG */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    margin-right: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    /* Keeps circle round even if text wraps */
}

/* Controls actual checkmark/X size inside the circle */
#main .feature-icon svg {
    width: 10px !important;
    height: 10px !important;
}

/* Standard Checkmark Backgrounds */
#main .card-1 .feature-icon:not(.cross-icon),
#main .card-3 .feature-icon:not(.cross-icon) {
    background: linear-gradient(135deg, #0891B2 0%, #06B6D4 100%);
    fill: #ffffff;
}

#main .card-2 .feature-icon:not(.cross-icon) {
    background: #1E3A8A;
    fill: #ffffff;
}

/* Unavailable Feature (Greyed Out) */
#main .plan-features li.unavailable-feature {
    color: #9CA3AF !important;
}

/* Unavailable Cross (X) Backgrounds */
#main .feature-icon.cross-icon {
    background: #F3F4F6 !important;
    stroke: #9CA3AF !important;
    stroke-width: 3 !important;
    fill: none !important;
}

/* ================= BUTTON ================= */

#main .plan-btn {
    display: block;
    text-align: center;
    padding: 16px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(.4, 0, .2, 1);
    position: relative;
    margin-top: auto;
}

#main .plan-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
}

#main .card-1 .plan-btn,
#main .card-3 .plan-btn {
    background: #FFB400;
    color: #000;
}

#main .card-2 .plan-btn {
    background: #0D83A8;
    color: #ffffff;
}

#main .pricing-disclaimer {
    font-size: 14px;
    margin: 3rem 0 0 !important;
    color: #6A7282;
}

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

@media (max-width: 768px) {
    #main #featured-pricings .title-section h1 {
        font-size: 34px;
    }

    #main #featured-pricings .pricing-subtitle {
        font-size: 16px;
    }

    /* Center cards on mobile and remove lift */
    #main .pricing-column {
        justify-content: center;
    }

    #main .featured-pricings-item.card-2 {
        transform: translateY(0);
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    #main .featured-pricings-item {
        width: calc(50% - 20px) !important;
        max-width: none !important;
    }

    #main .featured-pricings-item.card-2 {
        transform: translateY(0);
    }
}

@media (min-width: 1400px) {
    #main .featured-pricings-item {
        max-width: 410px !important;
    }
}

/*--------------------------------------------------------------
#                   Footer
--------------------------------------------------------------*/
/* 
#colophon .footerbox .social-twitter a {
    background-image: url('assets/images/twitter.png');
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
    width: 24px; 
    height: 24px; 
    display: inline-block; 
    text-indent: -9999px; 
    filter: grayscale(100%) brightness(0) saturate(100%) invert(35%) sepia(100%) hue-rotate(200deg);
    display: none;
} */

/* #colophon .footerbox .social-twitter a::before{
    content: '\e61b';
    font-family: 'FonAwesome';
    font-weight: 900;
} */

/* #colophon .footerbox .social-twitter a svg{
    display: none;
} */

#colophon {
    position: relative;
    overflow: hidden;
    z-index: 0;
}

#colophon .footer-bgoverlay {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #0891b2 100%);
    /* opacity: 1; */
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* z-index: 0; */
}

#colophon .footer-bg {
    position: absolute;
    width: 100%;

    height: 100%;
    z-index: 1;
    top: 0;
    left: 0;
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 1;
}

#colophon .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
    position: relative;
}

#colophon p {
    font-size: 16px;
    color: #ffffff;
    z-index: 3;
    position: relative;
    text-align: left;
    line-height: 27px;
    font-weight: 300;
}

#colophon .social-links {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.6s ease-in-out;
}

#colophon .social-links a:hover {
    background: #3f536d;
    color: #fff;
    box-shadow: rgba(255, 255, 255, 2.24) 0px 1px 6px 1px;
    transition: all 0.6s ease-in-out;
}

#colophon .social-links a {
    font-size: 18px;
    background: #fff;
    color: #3F536D;
    margin-right: 20px;
    transition: all 0.2s ease-in-out;
    font-family: "Font Awesome 5 Brands" !important;
    padding: 5px 0px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    margin: 13px;
}

#colophon .widget-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0;
    color: #ffffff;
    /* height: 60px; */
    line-height: 30px;
    padding: 0;
    background: transparent;
}

#colophon .widget-title::before {
    display: none;
}

#colophon .widget_nav_menu ul li:before {
    content: '\f061';
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    font-size: 13px;
    color: #ffffff;
    position: relative;
    margin: 5px 10px 5px 5px;
    display: inline-block;
    transition: transform 0.3s ease, color 0.3s ease;
}

#colophon .widget_nav_menu ul li:hover::before {
    transform: translateX(6px);
    color: var(--theme-color) !important;
}

#colophon .widget_nav_menu ul li a {
    color: #000;
    font-size: 16px;
}

#colophon .widget_nav_menu ul li a:active {
    color: #fdc401;
}

#colophon .gap-16 {
    gap: 4rem;
}

#colophon .widget_nav_menu ul li:hover a {
    color: var(--theme-color) !important;
}

#colophon .footer-widgets-area .widget_text ul li:nth-child(1),
#colophon .footer-widgets-area .widget_text ul li:nth-child(3) {
    margin-bottom: 0;
}

#colophon .footer-widgets-area .widget_text ul li:nth-child(2),
#colophon .footer-widgets-area .widget_text ul li:nth-child(4),
#colophon .footer-widgets-area .widget_text ul .list-email {
    margin-left: 2.7rem;
}


#colophon .footer-widgets-area .widget_text ul li svg {
    margin-right: 17px;
    transition: 0.3s;
}

#colophon .footer-widgets-area .widget_text ul li:hover svg {
    color: #000;
    transition: 0.3s;
}

#colophon .site-info p {
    font-size: 15px;
    color: #fff;
    /* border-top: 1px solid;
    border-top-color: #000;*/
}

#colophon .footer-widgets-area {
    position: relative;
    z-index: 3;
}

#colophon ul {
    list-style: none;
    padding: 0;
}

#colophon ul a {
    text-decoration: none;
    color: #ffffff !important;
}

#colophon a,
#colophon li,
#colophon .textwidget {
    color: #000000;
}

#colophon li {
    font-size: 16px;
    letter-spacing: 0.53px;
}

#colophon .footerbox:first-child .hentry {
    width: 110%;
}

#colophon .footerbox .hentry .social-profile-icons ul {
    display: flex;
    gap: 16px;
    align-items: center;
}

#colophon .footerbox .hentry .social-profile-icons li {
    margin-bottom: 17px;
    border: 2px solid;
    border-color: transparent;
    border-radius: 50%;
    padding: 11px;
    font-size: 18px;
    background-color: #ffffff1a;
    width: 40px;
    height: 37px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#colophon .footerbox .hentry .social-profile-icons li:hover {
    transform: scale(1.1);
    background-color: #01549a;
    transition: all 0.5s;
}

#colophon .footerbox .hentry .social-profile-icons li:hover a {
    color: #ffffff;
    transform: scale(1.1);
}

#colophon .footer-widgets-area .widget ul li {
    margin-bottom: 13px;
    font-weight: 300;
    background-color: transparent;
}

#colophon .site-info .copy-right {
    color: #6b7280;
    font-size: 16px;
    position: relative;
    z-index: 3;
    margin-top: 20px;
}

#colophon .widget_nav_menu .current-menu-item a {
    color: #fdc401;
    /* font-weight: bold; */
}

#colophon .widget {
    border: none;
    background-color: transparent;
    /*margin: 0 0 2.5em;*/
}

.backtotop {
    background-color: #FDAF1B;
    z-index: 300;
    font-size: 25px;
    position: fixed;
    bottom: -100px;
    right: 25px;
    color: #fff;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
    -webkit-transition: all .7s ease-in-out;
    -moz-transition: all .7s ease-in-out;
    -o-transition: all .7s ease-in-out;
    -ms-transition: all .7s ease-in-out;
    transition: all .7s ease-in-out;
}

.backtotop:hover,
.backtotop:focus {
    background-color: #000;
}

#loader-wrapper {
    overflow-x: hidden;
    overflow-y: hidden;
    vertical-align: middle;
    background-color: #fff;
    position: fixed;
    width: 100%;
    top: 0;
    bottom: 0;
    height: 100%;
    min-height: 100%;
    z-index: 9999;
}

#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 80px;
    height: 80px;
}

.preloader-one #loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #3498db;
    -webkit-animation: spin 2s linear infinite;
    /* / Chrome, Opera 15+, Safari 5+ / */
    animation: spin 2s linear infinite;
    /* / Chrome, Firefox 16+, IE 10+, Opera / */
}

.preloader-one #loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #e74c3c;

    -webkit-animation: spin 3s linear infinite;
    /* / Chrome, Opera 15+, Safari 5+ / */
    animation: spin 3s linear infinite;
    /* / Chrome, Firefox 16+, IE 10+, Opera / */
}

.preloader-one #loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #f9c922;
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

#loader svg,
.preloader-disable #loader-wrapper {
    display: none;

}

#loader svg {
    width: 70px;
    height: 70px;
    fill: #d72924;
}

.preloader-two #loader .loader-two,
.preloader-three #loader .loader-three,
.preloader-four #loader .loader-four,
.preloader-five #loader .loader-five {
    display: block;
}

/* / Scroll to top Button / */
.scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
}

.scroll-to-top a {
    background-color: #FDC401;
    padding: 8px;
    display: flex;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.scroll-to-top a img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

/*--------------------------------------------------------------
#                   RESPONSIVE
--------------------------------------------------------------*/
@media screen and (min-width: 567px) {

    .footer-widgets-area.col-2 .hentry,
    .footer-widgets-area.col-4 .hentry {
        width: 50%;
        float: left;
    }

    .footer-widgets-area.col-2 .hentry:nth-child(2n+1),
    .footer-widgets-area.col-4 .hentry:nth-child(2n+1) {
        clear: left;
    }

    .footer-widgets-area.col-2 .hentry:nth-child(odd),
    .footer-widgets-area.col-4 .hentry:nth-child(odd) {
        padding-right: 40px;
    }

    .footer-widgets-area.col-2 .hentry:nth-last-child(-n+2),
    .footer-widgets-area.col-4 .hentry:nth-last-child(-n+2) {
        margin-bottom: 0;
    }

    #featured-clients .section-content .gap-20 {
        gap: 3rem !important;
    }
}

@media screen and (min-width: 767px) {

    .col-2,
    .col-3,
    .col-4,
    .col-5,
    .col-6 {
        margin: 0 -15px;
    }

    .col-2 article,
    .col-3 article,
    .col-4 article,
    .col-5 article,
    .col-6 article {
        padding: 0 19px;
        float: left;
        width: 50%;
        margin-bottom: 30px;
    }

    .col-2 article:nth-child(2n+1),
    .col-3 article:nth-child(2n+1),
    .col-4 article:nth-child(2n+1),
    .col-5 article:nth-child(2n+1),
    .col-6 article:nth-child(2n+1) {
        clear: left;
    }

    .col-2 article:nth-last-child(-n+2),
    .col-3 article:nth-last-child(-n+2),
    .col-4 article:nth-last-child(-n+2),
    .col-5 article:nth-last-child(-n+2),
    .col-6 article:nth-last-child(-n+2) {
        margin-bottom: 0;
    }

    .footer-widgets-area.col-3 .hentry {
        width: 33.33%;
        float: left;
        margin-bottom: 0;
    }

    .footer-widgets-area.col-3 .hentry:not(:last-child) {
        padding-right: 40px;
    }

    .site-info.col-2 span {
        float: left;
        width: 50%;
        text-align: left;
    }

    .site-info.col-2 span:nth-child(2) {
        float: right;
        text-align: right;
    }

}

@media screen and (min-width: 992px) {

    .col-3 article,
    .col-5 article,
    .col-6 article {
        width: 33.33%;
    }

    .col-3 article:nth-child(2n+1),
    .col-5 article:nth-child(2n+1),
    .col-6 article:nth-child(2n+1) {
        clear: none;
    }

    .col-3 article:nth-child(3n+1),
    .col-5 article:nth-child(3n+1),
    .col-6 article:nth-child(3n+1) {
        clear: left;
    }

    .col-3 article:nth-last-child(-n+3),
    .col-5 article:nth-last-child(-n+3),
    .col-6 article:nth-last-child(-n+3) {
        margin-bottom: 0;
    }

    .col-4 article {
        width: 25%;
    }

    .col-5 article {
        width: 20%;
    }

    .col-6 article {
        width: 16.66%;
    }

    .col-4 article:nth-child(2n+1),
    .col-5 article:nth-child(3n+1),
    .col-6 article:nth-child(3n+1) {
        clear: none;
    }

    .col-4 article:nth-child(4n+1),
    .col-5 article:nth-child(5n+1),
    .col-6 article:nth-child(6n+1) {
        clear: left;
    }

    .col-4 article:nth-last-child(-n+4),
    .col-5 article:nth-last-child(-n+5),
    .col-6 article:nth-last-child(-n+6) {
        margin-bottom: 0;
    }

    /* #top-bar .widget+.widget {
        margin-top: 0;
    } */

    #top-bar.col-2 .widget {
        float: left;
        text-align: left;
        padding: 6px 0;
    }

    #top-bar.col-2 .widget+.widget {
        float: right;
        text-align: right;
        padding: 0;
    }

    nav.navigation.pagination {
        margin-top: 63px;
    }

    #colophon .social-icons {
        margin-left: -15px;
    }

    .footer-widgets-area.col-4 .hentry {
        width: 25%;
        padding-right: 40px;
    }

    .footer-widgets-area.col-4 .hentry:last-child {
        padding-right: 0;
    }

    .footer-widgets-area.col-4 .hentry:nth-child(2n+1) {
        clear: none;
    }

    .footer-widgets-area.col-4 .hentry:nth-child(4n+1) {
        clear: left;
    }

    .footer-widgets-area.col-4 .hentry:nth-last-child(-n+4) {
        margin-bottom: 0;
    }
}

@media screen and (min-device-width: 820px) and (max-device-width: 1024px) {

    .entry-title,
    .section-title,
    #featured-team .entry-content {
        margin: 0;
    }

    #colophon .footer-widgets-area .widget_text ul li:nth-child(3) {
        margin-left: 0;
    }

    /* inner page testimonial */
    .main-navigation ul.nav-menu>li>a {
        margin: 0 29px 0 0;
    }

    /* faq */
    #main .faqside {
        padding: 5rem 2rem;
    }

    #main .faqs-inner-content h2.faq-title:before {
        left: 22px;
    }

    #colophon .widget-title {
        line-height: 30px;
    }

    /* team */
    #main .team-inner-content .entry-content {
        margin: 0 9px 0 0;
    }

    /* services */
    .main-navigation ul.nav-menu>li>a {
        margin: 0 8px 0 0;
    }

    #content .leftbox .contactformbox h1 {
        padding: 10px 0 10px 0px;
    }

    #content .leftbox .contactformbox .contacttext {
        padding-top: 50%;
    }

    #content .infoboxinn .contact-text p {
        padding: 15px 0 0 0;
    }

    #content .infoboxinn .address-icon {
        height: 70px;
        width: 70px;
    }

    /* #content .contactform{
        padding-top: 22%;
    } */
    #featured-posts .button {
        padding: 8px 36px 7px 0px;
    }

    /* #main .entry-content h2{
        line-height: 0.1;
    } */
    #main .bloginn-inner-content .post-date {
        margin-bottom: 0rem;
    }

    #main .bloginn-inner-content .content {
        padding: 10px;
        margin-left: 32px;
    }

}

/*---------menu display above 1024 and 1024 screen-------------*/
@media screen and (min-width: 1024px) {
    .menu-sticky #masthead {
        position: sticky;
        top: 0;
    }

    .menu-sticky #masthead.nav-shrink {
        box-shadow: 0 6px 10px rgb(0 0 0 / 10%);
    }

    .customize-support.menu-sticky #masthead.nav-shrink {
        top: 32px;
    }

    /*---------menu css for home screen-------------*/
    .main-navigation {
        width: auto;
        /* float: right;*/
        position: relative;
        height: 100%;
        text-align: center;
    }

    .main-navigation.icons-active {
        padding: 0;
    }


    .main-navigation ul.nav-menu>li {
        text-align: center;
    }

    .main-navigation ul.nav-menu>li:last-child>a {
        /* margin: 0px 0px 0 0;
        color: #FFFFFF;
        background-color: #FA1;
        border-radius: 65px;
        padding: 10px 20px;*/
    }

    .main-navigation ul.nav-menu>li>a {
        position: relative;
        z-index: 10;
        transition: all 0.3s ease-in-out;
        font-weight: 400;
    }

    .main-navigation ul.nav-menu .current_page_item>a,
    .main-navigation ul.nav-menu .current-menu-item>a,
    .main-navigation ul.nav-menu .current_page_ancestor>a,
    .main-navigation ul.nav-menu .current-menu-ancestor>a {
        color: #1e3a8a;
    }


    .main-navigation ul.nav-menu>li:hover>a,
    .main-navigation ul.nav-menu>li.focus>a,
    .main-navigation ul ul li a:hover,
    .main-navigation ul ul li a.focus {
        color: #0891b2;
    }

    .main-navigation ul.nav-menu>li {
        text-align: center;
        padding: 13px 0;
        position: relative;
        height: 100%;
        font-weight: bold
    }

    .main-navigation.icons-active ul.nav-menu>li {
        padding: 15px 25px 8px;
    }

    .main-navigation ul.nav-menu>.menu-item-has-children>a:after {
        content: "\f078";
        padding-left: 2px;
        font-size: 10px;
        position: relative;
        bottom: 5px;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
    }

    .main-navigation ul ul .menu-item-has-children>a:before {
        content: "\f067";
        font-size: 10px;
        position: relative;
        top: 20px;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        position: absolute;
        right: 15px;
    }

    .main-navigation ul.nav-menu {
        display: block !important;
        height: auto !important;
        position: relative;
        height: 100% !important;
    }

    .main-navigation ul ul {
        box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.15);
        width: 200px;
        -webkit-transform: translateY(20px);
        -moz-transform: translateY(20px);
        -ms-transform: translateY(20px);
        -o-transform: translateY(20px);
        transform: translateY(20px);
        -webkit-transition: all 0.4s ease-in-out;
        -moz-transition: all 0.4s ease-in-out;
        -ms-transition: all 0.4s ease-in-out;
        -o-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
        border-radius: 34px;
        overflow: hidden;
    }

    .main-navigation ul li:hover>ul,
    .main-navigation ul li.focus>ul {
        left: auto;
        right: 0;
        display: block !important;
        -webkit-transform: translateY(-5px);
        -moz-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
        -o-transform: translateY(-5px);
        transform: translateY(-5px);
    }

    .main-navigation ul ul li:hover>ul,
    .main-navigation ul ul li.focus>ul {
        left: auto;
        right: 100%;
    }

    .main-navigation ul ul li:hover>a,
    .main-navigation ul ul li.focus>a {
        background-color: #d9eef6;
        color: #364153;
    }

    .main-navigation ul .sub-menu li:hover>a,
    .main-navigation ul .sub-menu li.focus>a {
        background-color: #d9eef6;
        color: #364153;
    }

    .main-navigation ul.sub-menu>li:last-child>a {
        border-bottom: none;
    }

    .main-navigation ul ul li {
        border-bottom: none;
    }

    .main-navigation ul ul>li:last-child {
        border-bottom: none;
    }

    .main-navigation ul ul ul {
        top: 5px;
    }

    .main-navigation ul ul li a {
        color: #fff;
    }

    .main-navigation ul .sub-menu li a {
        color: #364153;
    }


    .main-navigation ul.nav-menu>li>a>i,
    .main-navigation ul.nav-menu>li>a>i.wpmi-icon:not(.wpmi-label-1).wpmi-position-before {
        display: block;
        margin: 0 auto 10px;
    }

    .menu-toggle {
        height: 80px;
        position: absolute;
        top: 50%;
        right: 35px;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    #search {
        position: absolute;
        z-index: 30;
        right: 0;
        top: 100%;
        display: none;
    }

    .main-navigation .search-active .icon-search {
        display: none;
    }

    .main-navigation .search-active .icon-close {
        display: inline-block;
    }

    #search:before {
        content: "";
        width: 0;
        height: 0;
        border-left: 9px solid transparent;
        border-right: 9px solid transparent;
        border-bottom: 9px solid #111;
        position: absolute;
        top: -9px;
        right: 5px;
    }

    button.dropdown-toggle {
        display: none;
    }

    .menu-toggle {
        display: none;
    }

    .main-navigation ul {
        display: block;
    }

    .main-navigation li {
        display: inline-block;
    }

    .main-navigation .left-menu {
        padding-left: 50px;
    }

    .main-navigation li.left-menu+li.right-menu:before {
        content: "/";
        position: absolute;
        top: 50%;
        margin-left: -6px;
        color: #fff;
        margin-top: -1px;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .main-navigation form.search-form {
        border: 20px solid #111;
    }

    .main-navigation form.search-form input {
        background-color: #fff;
        border-color: #fff;
        color: #111;
    }

    #featured-slider .entry-title {
        font-size: 68px;
        letter-spacing: normal;
        text-transform: uppercase;
        font-weight: 700;
    }

    .overlay-side {
        position: absolute;
        top: 0;
    }

    .right-sidebar #primary,
    .left-sidebar #primary {
        width: 100%;
        float: left;
        padding-right: 30px;
        /*padding-left: 8px;*/
    }

    .right-sidebar #secondary,
    .left-sidebar #secondary {
        width: 100%;
        float: right;
    }

    .left-sidebar #primary {
        float: right;
        padding-right: 0;
        padding-left: 30px;
    }

    .no-sidebar #primary {
        width: 100%;
        float: none;
        padding-right: 0;
    }
}

@media screen and (min-width: 1900px) {

    .footer-widgets-area.section-gap {
        padding: 200px 0 100px;
    }
}

@media only screen and (max-width: 768px) {
    #featured-slider .wrapper {
        top: 55% !important;
    }

    #featured-slider .wrapper .d-flex {
        justify-content: center;
        align-items: center;
    }

    .content-site .md-0 {
        display: none;
    }

    #section-header .content-site,
    #featured-faqs .faqside,
    #featured-faqs .titletext h1,
    #colophon p {
        padding: 0;
    }

    #featured-slider .entry-header {
        padding: 0 10px;
    }

    #section-header {
        margin-top: 0;
    }

    #colophon .footer-widgets-area .widget_text ul li:nth-child(3) {
        margin-left: 0;
    }

    .bottomheader {
        /* padding: 4px 0;*/
    }

    #featured-slider .entry-header h3,
    .bottomheader,
    .entry-title,
    .section-title,
    #featured-posts .button {
        margin: 0;
    }

    #featured-team .entry-content {
        position: relative;
    }

    #colophon .widget-title {
        height: 45px;
        line-height: 28px;
    }

    /* innear page testimonial */
    #main .testimonial-inner-content,
    #main .faqside,
    #content .leftbox .contactformbox h1 {
        padding: 5rem 1rem;
    }

    #main .faqs-inner-content .faq-content button.accordion {
        padding: 0px 0 0px 8px;
    }

    #main .faqs-inner-content .faq-content button.accordion .accordion-arrow {
        position: relative;
        padding: 33px 20px;
    }

    #main .faqs-inner-content .faq-content {
        margin-bottom: 20px;
    }

    /* faq */
    #main .faqs-inner-content h2.faq-title:before {
        left: 20px;
    }

    #main .bloginn-inner-content .content {
        padding: 10px;
    }

    #main .bloginn-inner-content .entry-contentbox p {
        margin-bottom: 0;
    }

    #main .bloginn-inner-content .content {
        margin-left: 20px;
    }

    #main .bloginn-inner-content .post-date {
        left: -2.7rem;
        bottom: 20rem;
    }

    #content .infoboxinn .address-icon {
        height: 60px;
        width: 60px;
    }

    #content .infoboxinn .contact-text {
        padding: 25px 5px;
    }

    #content .contactform .innershortcode {
        padding: 0 10px;
    }

    #content .leftbox .contactformbox .contacttext p {
        padding: 7px 0 0px 0;
    }

    #content .infoboxinn .contact-text p {
        padding: 15px 0 0 0;
    }

    #content .infoboxinn::before {
        margin: 10px 0 0px -6%;
    }

    #masthead.site-header .main-navigation ul.nav-menu {
        width: auto;
        margin-right: 0;
        background-color: #fff;
        margin-top: 25px;
        border-top: 1px solid rgba(0, 0, 0, 0.10);
        position: absolute;
        top: 100%;
        left: auto;
        right: 0;
    }

    .header-main {
        height: auto;
        background: #c42118;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 6px 6px 6px 15px;
    }

    .content-site {
        border-radius: 10px;
    }

    #featured-slider .entry-container {
        position: absolute;
        top: 50%;
        width: 100%;
        left: 0;
        right: 0;
        text-align: center;
        padding: 0 30px;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .overlay-side {
        display: none;
    }

    .site-branding {
        min-height: 62px;
        display: flex;
        align-items: center;
    }

    #featured-slider .entry-title {
        margin-bottom: 0;
        font-size: 32px;
        color: #fff;
        text-transform: uppercase;
    }

    #featured-slider .entry-content {
        color: #fff;
        margin: 0 72px 0 5px;
        display: block;
    }
}

@media only screen and (max-width: 431px) {

    #content .searchbar {
        padding: 0 30px;
    }

    #featured-about .aboutimgtext .aboutimgbg {
        display: none;
    }

    #featured-posts .title-section {
        padding: 0;
    }

    #colophon .searchbar h4 {
        border-radius: 10px;
    }

    #main .testimonial-inner-content .content-image {
        top: 0px;
        position: relative;
        left: 0px
    }

    #main .testimonial-inner-content .content-image {
        top: 0px;
        position: relative;
        left: 0px;
    }

    #main .testimonial-inner-content:hover h4.testimonials-title a::after {
        transition: .8s ease;
        animation: rotateY 1s linear infinite;
        margin-top: -10px;
    }

    #main .testimonial-inner-content .testimonials-details p::after,
    #main .testimonial-inner-content .testimonials-details::before {
        display: none;
    }

    #main .testimonial-inner-content {
        padding: 0x;
    }

    #main .testimonial-inner-content .content-image img {
        width: 100%;
        margin-left: 0;
    }

    #main .project-inner-content .project-image {
        width: 100%;
    }

    #main .gallerybox .gallery-inner-content:nth-child(5) {
        top: 0;
    }

    #main .faqcontactimg {
        padding-bottom: 3em;
    }

    #main .bloginn-inner-content .content-image img,
    #secondary .bloginn-inner-content .content-image img {
        margin-top: 0px;
    }

    #content .leftbox {
        padding: 20px 15px 10px 15px;
    }

    #content .infoboxinn {
        width: 95%;
    }

    #content .contactform {
        margin: 0;
        padding: 30px 20px;
    }

    #featured-slider .entry-header h3 {
        font-size: 12px;
    }

    #featured-slider h2.entry-title {
        font-size: 25px;
    }

    #featured-slider .entry-container,
    .slick-dotted.slick-slider {
        padding: 0;
    }

    .bottomheader {
        padding: 0;

    }

    #featured-posts .read-more a {
        justify-content: center;
    }

    .content-site p {
        font-size: 11px;
    }

    .content-site .social-links i {
        font-size: 17px;
    }

    #featured-posts .entry-content p {
        padding-right: 0em;
    }

    #featured-slider .entry-content {
        color: #fff;
        margin: 0 0px 0;
        display: block;
    }

    .site-logo img {
        width: auto;
    }

    .site-branding {
        padding-right: 0px !important;
    }

    .header-nav {
        display: block;
        float: none;
    }

    .contact-header {
        margin-right: 100px;
        width: auto;
        margin-left: 0;
        height: 100%;
    }

    #featured-posts .message-box .message-form p .wpcf7-spinner::before {
        left: 12.6rem;
    }
}

@media only screen and (max-width: 1023px) {

    #featured-projects .entry-content3 p.text-section {
        padding: 0;
    }

    .content-site .social-links {
        display: none;
    }

    #top-bar {
        border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    }

    #masthead {
        min-height: 86px;
    }

    .site-branding {
        /* padding-right: 50px; */
        min-height: 54px;
        display: flex;
        align-items: center;
    }

    .site-title {
        font-size: 26px;
    }

    .main-navigation ul ul {
        border-top: 1px solid rgba(0, 0, 0, 0.10);
    }

    .main-navigation ul ul ul {
        margin-top: 0;
    }

    .main-navigation ul.nav-menu li {
        border-bottom: 1px solid rgba(0, 0, 0, 0.10);
        display: block;
        width: 100%;
    }

    .main-navigation ul.nav-menu li:last-child {
        border-bottom: none;
    }

    .main-navigation ul ul li a {
        padding-left: 35px;
        color: #fff;
    }

    .main-navigation ul ul ul li a {
        padding-left: 60px;
    }

    .main-navigation ul ul ul ul li a {
        padding-left: 80px;
    }

    .main-navigation ul ul a {
        width: 100%;
    }

    .main-navigation ul ul,
    .main-navigation ul ul ul {
        box-shadow: none;
        float: none;
        position: relative;
        top: 0;
        left: 0;
        margin-bottom: 0;
        display: none;
        z-index: 0;
    }

    .main-navigation .menu-item-has-children>a:before {
        content: "";
        float: right;
        position: relative;
        right: 0;
        background-color: rgba(255, 255, 255, 0.20);
        width: 1px;
        height: 25px;
    }

    .main-navigation .menu-item-has-children>a:after {
        padding-top: 3px;
    }

    .main-navigation ul.sub-menu li a {
        border-left: none;
    }
}

/* =======================================================
   PERFECT TABLET & MOBILE MENU OVERRIDE
   ======================================================= */
@media screen and (max-width: 1024px) {

    /* 1. Force the white menu box to be full height */
    .main-navigation ul.nav-menu {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: -120% !important;
        /* Hidden off-screen by default */
        width: 320px !important;
        /* Fixed width of the white box */
        max-width: 85vw !important;
        height: 100vh !important;
        /* Full height */
        min-height: 140vh !important;
        background-color: #ffffff !important;
        z-index: 9998 !important;

        display: block !important;
        padding: 80px 0 30px 0 !important;
        /* Space at top for the X button */
        margin: 0 !important;
        transition: left 0.4s ease-in-out !important;
        overflow-y: auto !important;
        box-shadow: 2px 0 20px rgba(0, 0, 0, 0.2) !important;
    }

    /* 2. Slide the menu in when open */
    .main-navigation.toggled ul.nav-menu,
    .main-navigation.active ul.nav-menu {
        left: 0 !important;
    }

    /* 3. Style the list items inside the white box (CENTERED TEXT) */
    .main-navigation ul.nav-menu>li {
        width: 100% !important;
        display: block !important;
        text-align: center !important;
        /* Centers text to match your image */
        border-bottom: 1px solid #f0f0f0 !important;
        /* Thin gray divider */
        margin: 0 !important;
        padding: 0 !important;
    }

    .main-navigation ul.nav-menu>li>a {
        display: block !important;
        padding: 16px 25px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #111 !important;
    }

    /* Active link color */
    .main-navigation ul.nav-menu .current_page_item>a,
    .main-navigation ul.nav-menu>li>a:hover {
        color: #f59e0b !important;
        /* Yellow text */
        background: transparent !important;
    }

    /* 4. Fix the Yellow Button */
    .main-navigation ul.nav-menu>li:last-child {
        border-bottom: none !important;
        padding: 25px !important;
    }

    .main-navigation ul.nav-menu>li:last-child>a {
        background-color: #f5b81f !important;
        color: #000 !important;
        text-align: center !important;
        border-radius: 8px !important;
        display: block !important;
        width: 100% !important;
        padding: 12px !important;
        box-shadow: 0 4px 10px rgba(245, 184, 31, 0.3) !important;
    }

    /* 5. Fix the Hamburger Button (Closed state) */
    .menu-toggle {
        position: absolute !important;
        top: -48px;
        /* Keeps it in the header */
        right: 20px !important;
        display: block !important;
        z-index: 9999 !important;
        width: 40px !important;
        height: 40px !important;
        background: transparent !important;
        border: none !important;
    }

    /* 6. PUT THE 'X' INSIDE THE WHITE AREA (Open state) */
    .menu-toggle.active {
        position: fixed !important;
        top: 37px !important;
        /* Since the white menu is 320px wide, placing this at 260px puts it perfectly in the top right! */
        left: 260px !important;
        right: auto !important;
        background: transparent !important;
        color: #000 !important;
        /* Makes the X black */
    }

    .menu-toggle span {
        width: 32px !important;
        height: 3px !important;
    }

    /* 7. Fix dropdown menus so they center properly */
    .main-navigation ul ul {
        position: static !important;
        display: none;
        box-shadow: none !important;
        background: #f9fafb !important;
        padding-left: 0 !important;
        width: 100% !important;
    }

    .main-navigation ul li:hover>ul,
    .main-navigation ul li.focus>ul {
        display: block !important;
    }

    .main-navigation ul ul li a {
        text-align: center !important;
        padding: 12px 25px !important;
        color: #555 !important;
    }
}

/* Fix for very small phones so the X doesn't fall off the menu */
@media screen and (max-width: 400px) {
    .main-navigation ul.nav-menu {
        width: 280px !important;
    }

    .menu-toggle.active {
        left: 220px !important;
    }
}



.main-navigation .search-menu a {
    display: none;
}

.main-navigation form.search-form input {
    background-color: #fff;
    border: none;
    min-height: 55px;
}

.main-navigation form.search-form button.search-submit {
    height: 59px;
}

.main-navigation form.search-form input {
    padding-left: 25px;
}

.body-overlay #content,
.body-overlay #colophon,
.body-overlay .backtotop {
    filter: blur(25px);
}


@media screen and (max-width: 992px) {

    .comments-title,
    #reply-title {
        font-size: 28px;
    }
}

@media screen and (max-width: 767px) {
    #content .entry-content {
        padding: 1rem;
    }

    #masthead.site-header .main-navigation ul.nav-menu {
        width: auto !important;
        margin-right: 0;
        background-color: #fff;
        margin-top: 25px;
        border-top: 1px solid rgba(0, 0, 0, 0.10);
        position: absolute;
        top: 100%;
        left: auto;
        right: 0;
    }

    #page-site-header .page-title {
        font-size: 32px;
    }

    #featured-classes .featured-classes-item,
    .blog-posts-wrapper .post-item {
        text-align: center;
    }

    .comment-navigation .nav-previous,
    .posts-navigation .nav-previous,
    .post-navigation .nav-previous,
    .comment-navigation .nav-next,
    .posts-navigation .nav-next,
    .post-navigation .nav-next {
        width: 100%;
        margin: 15px 0;
    }

    .post-navigation span.previous-article b,
    .post-navigations span.previous-article b,
    .post-navigation span.next-article b,
    .post-navigations span.next-article b {
        font-size: 18px;
    }

    #respond {
        margin-top: 40px;
    }

    .comment-meta img {
        margin-right: 15px;
    }

    .comments-title,
    #reply-title {
        margin-bottom: 8px;
    }

    #commentform p.comment-form-comment,
    #commentform p.form-submit {
        margin-top: 21px;
    }

    nav.navigation.pagination,
    #secondary {
        margin-top: 30px;
    }

    .comments-title,
    #reply-title {
        font-size: 26px;
    }

    #comments {
        margin-top: 40px;
    }

    .tags-links {
        margin-bottom: 25px;
    }

    .backtotop {
        display: none;
    }

    #featured-about .title-section {
        padding-right: 0 !important;
    }

    #featured-about h2.subtitle {
        margin: 0px 0 30px 0;
    }

    .menu-toggle {
        top: -3rem !important;
        right: 1rem !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .menu-toggle {
        top: -3rem !important;
        right: 1rem !important;
    }
}

@media screen and (max-width: 567px) {
    .menu-toggle {
        width: 40px !important;
        height: 40px !important;
        top: -3rem !important;
        right: 0rem !important;
    }

    .main-navigation ul.nav-menu {
        width: 100%;
        position: fixed;
        width: 71%;
    }

    .pagination .page-numbers.prev,
    .pagination .page-numbers.next {
        top: 0;
    }

    .pagination .prev.page-numbers:before,
    .pagination .next.page-numbers:before {
        width: 35px;
        height: 10px;
    }

    .pagination .page-numbers.prev,
    .pagination .page-numbers.next {
        margin-left: 0;
        margin-right: 0;
    }

    .trail-items li {
        font-size: 12px;
    }

    #breadcrumb-list {
        padding: 10px 0;
    }

    blockquote.alignright {
        margin-left: 0;
    }

    .comment-meta img {
        margin: 0 0 25px;
        float: none;
    }

    .comment-meta .url,
    .comment-meta .fn {
        display: block;
    }

    .comment-content {
        padding-left: 0;
    }

    #comments ol.children {
        margin-left: 50px;
    }

    .reply {
        padding-left: 0;
    }

    .footer-widgets-area .hentry:last-child,
    .footer-widgets-area.col-3 .hentry:last-child {
        margin-bottom: 0;
        padding-right: 0;
    }
}

/* mobile view */
@media screen and (min-device-width: 320px) and (max-device-width: 550px) {
    #masthead {
        position: relative;
        min-height: auto;
    }

    #masthead .sidepadding {
        --bs-gutter-x: 0;
    }

    #featured-posts .post-date {
        bottom: 11rem;
        left: -0.7rem;
    }

    /* inner page */

    /* faq */
    #main .image-container .image2 img,
    #main .image-container .image2::after {
        display: none;
    }

    #masthead .bottomheader .row {
        --bs-gutter-x: 0;
    }

    #content .leftbox .contactformbox h1 {
        padding: 10px 0% 10px 0px;
        font-size: 32px;
    }

    #content .infoboxinn::before {
        margin: 10px 0 0px -11%;
    }

    #content .infoboxinn .contact-text p {
        padding: 15px 0 0 0;
    }

    #content .rightbox-form .conct-header h1 {
        margin: 0;
    }

    #content .contactform {
        padding: 30px 0;
    }

    #content .leftbox .contact-right-side {
        margin-top: 25px;
    }

    #content .infoboxinn .contact-text {
        padding: 25px 10px;
    }

    #featured-services .title-section p {
        padding-top: 25px;
        padding-bottom: 10px;
    }

    #featured-services .title-section {
        margin-bottom: 1em;
    }

    #featured-faqs .image-container .image2::after {
        display: none;
    }

    #featured-posts .message-box {
        top: 25px;
    }

    #featured-posts .button a {
        padding: 10px 20px;
    }

    #featured-posts .button {
        padding: 8px 32px 7px 0px;
    }

    #featured-posts .button svg {
        right: 5px;
    }

    #content .innershortcode input[type="submit"] {
        margin-top: 20px;
    }

    .menu-toggle span {
        width: 29px;
    }
}

@media screen and (max-device-width: 320px) {
    #featured-slider .borderbtn {
        width: 100px !important;
    }

    #featured-slider .read-more .btn {
        padding: 12px 9px;
    }

    #featured-slider img {
        height: 100vh;
    }

    #featured-slider .entry-container {
        transform: translateY(-61%);
    }

    #featured-services .entry-title a {
        padding: 0px 9px 0px 9px;
    }

    #featured-pricings .circle {
        width: 265% !important;
        left: -211px !important;
        top: -269px !important;
    }

    #featured-projects .entry-content3 h5::before {
        position: absolute !important;
        left: 12px !important;
        top: -21px !important;
    }

    #featured-pricings .title-section h1::before {
        position: absolute !important;
        left: 34px !important;
        top: -24px !important;
    }

    #featured-team .title-section h1::after {
        position: absolute;
        left: 90%;
        top: 13px;
    }

    #featured-team .title-section h1 {
        font-size: 35px;
    }
}

@media screen and (min-device-width: 600px) and (max-device-width: 1024px) and (orientation:landscape) {
    #featured-slider .entry-header h3::before {
        left: -97px;
    }

    #featured-about .title-section .row h3 {
        font-size: 17px !important;
    }

    #featured-posts .button {
        padding: 8px 39px 7px 0px;
        margin: 0;
    }

    /* inner page testimonial */
    .main-navigation ul.nav-menu>li>a {
        margin: 0 13px 0 0;
    }

    #section-header .social-links a {
        margin: 10px 4px;
    }

    #main .bloginn-inner-content .content {
        padding: 8px;
        margin-left: 30px;
    }

    #main .bloginn-inner-content .post-date {
        left: -2.3rem;
    }

    .main-navigation ul.nav-menu .current_page_item>a,
    .main-navigation ul.nav-menu .current-menu-item>a,
    .main-navigation ul.nav-menu .current_page_ancestor>a,
    .main-navigation ul.nav-menu .current-menu-ancestor>a {
        padding: 5px 15px;
    }
}

@media (min-width:300px) and (max-width:700px) {

    .main-navigation ul.nav-menu>li>a,
    .main-navigation ul.nav-menu>li:last-child>a {
        padding: 10px;
    }

    #section-header .site-logo img {
        width: 70%;
        height: 57.34px;
    }

    .main-navigation ul.nav-menu>li:last-child {
        width: 100%;
        padding: 0;
        margin: 0 auto;
    }

    .main-navigation ul.nav-menu>li:last-child a {
        margin: 0;
        color: #fff;
    }

    .main-navigation ul.nav-menu,
    .main-navigation ul ul {
        text-align: center;

    }

    .scroll-to-top {
        right: 18px;
    }

    #featured-slider h2.title {
        font-size: 35px;
    }

    #featured-slider .entry-header {
        padding: 0;
    }

    #featured-slider .entry-container {
        margin-left: 1rem;
    }

    #featured-slider .slick-prev {
        left: 2%;
    }

    #featured-slider .wrapper {
        top: 39%;
    }

    #featured-slider .borderbtn {
        width: 80px;
    }

    #featured-slider img {
        height: 50vh !important;
    }

    #featured-about .about-image img {
        height: 500px !important;
    }

    #featured-about .image-top-box {
        width: auto;
        height: auto;
        top: -4rem;
        left: 0;
    }

    #featured-about .title-section h1 {
        font-size: 35px !important;
    }

    #featured-about .aboutrightside .title-section .d-flex {
        margin-bottom: 15px;
    }

    #featured-about .aboutrightside {
        margin-left: 0;
    }

    #featured-services .gap-16 {
        gap: 2rem;
    }

    #featured-features .feature-img {
        margin-left: 0;
        width: 100%;
    }

    #featured-features .section-content {
        padding: 25px 0 0;
        margin-left: 0;
    }

    #featured-faqs .faq-margin {
        margin-left: 0;
    }

    #featured-faqs .contactmapbox iframe {
        padding: 0 0 30px;
    }

    #featured-faqs summary::after {
        margin: -1px 10px 0px 0px;
    }

    #featured-contact {
        background: #000;
    }

    #featured-contact .contact-margin {
        margin-top: 0;
    }

    #featured-contact .box1 {
        top: 0;
    }

    #featured-contact .box2 {
        top: 3rem;
    }

    #featured-contact .contactformdiv {
        margin-top: 20px;
        padding: 0% 4%;
        margin-left: 0;
        width: 100%;
    }

    #featured-contact .entry-content3 h5 {
        margin-left: -25px;
    }

    #featured-pricings .circle {
        top: -214px;
        left: -105px;
    }

    #featured-pricings .featured-pricings-item:nth-child(2) {
        transform: none;
    }


    /*==================================
    Featured Testimonials
    =============================*/

    #featured-testimonials .testimonials-heading {
        text-align: center;
        writing-mode: horizontal-tb;
        transform: rotate(0);
    }

    #featured-testimonials .expanded-view {
        flex-direction: column;
        justify-content: center;
        padding: 20px 0;
        margin: 12px 0 30px;
        width: 100%;
    }

    #featured-testimonials .expanded-image-container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 70%;
    }

    #featured-testimonials .expanded-image-container img {
        width: 80%;
        margin-bottom: 20px;
    }

    #featured-testimonials .expanded-text-container {
        text-align: center;
        padding: 0;
        width: 100%;
    }

    #featured-posts .post-date {
        letter-spacing: 1.4px;
        left: -2.5rem;
    }

    #featured-posts .gap-20 {
        gap: 40px;
    }

    #featured-posts .entry-container {
        margin-left: 0;
    }

    #featured-posts .entry-contentbox {
        padding: 0px 28px 18px 14px;
    }

    #colophon .gap-16 {
        gap: 1rem;
    }

    #colophon .logo {
        margin-bottom: 15px;
    }

    #colophon .footerbox:first-child .hentry {
        width: 100%;
    }

    /* Inner Page */
    #page-site-header .page-header {
        top: 15rem;
    }

    #page-site-header .innerpage-description {
        color: #fff;
        font-size: 20px;
        width: 100%;
        max-width: 97%;
        margin: 0 auto;
        text-align: center;
    }

    #page-site-header .breadcrumbbox .button {
        padding: 0;
        gap: 40px;
    }

    #page-site-header .breadcrumbbox span.treeEnd {
        padding: 3px;
        line-height: 48px;
    }

    #page-site-header .breadcrumbbox .button .root,
    #page-site-header .breadcrumbbox span {
        padding: 10px 19px;
        width: fit-content;
        margin-bottom: 10px;
    }

    #main .service-inner-content .entry-title .service-title,
    #secondary .service-inner-content .entry-title .service-title {
        padding: 0 6px;
        font-size: 17px !important;
    }

    #main .image-container .image1 img {
        width: 100%;
        padding-right: 0;
    }

    #main .gallerybox .img4-parent {
        top: 0;
    }

    #main .testimonial-inner-content .testimonials-designation {
        margin: 0 0 32px;
    }

    #main .testimonial-inner-content .content-image img {
        bottom: 0;
    }

    #main .bloginn-inner-content .entry-contentbox,
    #secondary .bloginn-inner-content .entry-contentbox,
    #featured-posts-item .content {
        width: 100%;
        padding: 0 15px 18px;
    }

    #main .bloginn-inner-content .content-image img,
    #secondary .bloginn-inner-content .content-image img,
    #featured-posts-item .content-image img {
        width: 100%;
    }

    .widget_text input {
        margin: 0 0 16px 30px;
    }

    .entry-meta {
        display: grid;
        gap: 8px;
    }

    .socialMedia {
        float: left;
    }

    blockquote .wp-block-quote p,
    .wp-block-pullquote p,
    .wp-block-quote p {
        padding: 12px 0 0;
    }

    #main .entry-content ol li {
        padding-left: 3rem;
    }

    #main .entry-content ol li:before {
        left: 0;
    }

    #section-header {
        width: 100%;
        /*margin: 0px 5% 0px;*/
    }

    #featured-projects .entry-content .entry-text {
        width: 232px;
        padding: 18px 24px;
    }

    #featured-features .entry-content h2 {
        margin: 55% 0 0 0;
    }

    #main .testimonial-inner-content {
        /* background: linear-gradient(180deg, #fff 81%, #01549a 63%);*/
        padding: 1rem;
    }

    #main .testimonial-inner-content .content-image {
        padding: 0 10px;
    }

    #main .testimonial-inner-content h4 {
        margin: 16px 0 16px 0;
    }

    #primary .widget ul li a::before,
    #secondary .widget ul li a::before,
    #primary .widget ol li a::before,
    #secondary .widget ol li a::before {
        margin-right: 7px;
        margin-left: 0.5em;
    }

    #content .inquiry-screen {
        padding: 20px 12px;
    }

    #content .rightbox-form .conct-header hr {
        left: 1.3rem;
    }

    .error-404.not-found .error-404title {
        font-size: 162px;
    }

    #featured-projects .entry-content3 h5::before {
        position: absolute;
        left: 34px;
        top: -20px;
    }

    #featured-steps .section-content .steps-block {
        margin-top: 0;
        margin-bottom: 0;
        padding: 0 8px;
    }

    #featured-pricings .title-section h1 {
        font-size: 37px;
    }

    #featured-pricings .cleaning-chemical {
        display: none;
    }

    #featured-team .title-section h1 {
        font-size: 35px;
    }

    #featured-testimonials .client-single .content-image {
        width: 65%;
        margin: 0 auto;
    }

    #featured-posts .title-section h1 {
        font-size: 35px;
    }

    #featured-posts .title-section h1::before {
        left: 20px;
        top: -25px;
        height: 41px;
    }

    #featured-posts .post-item {
        width: 100%;
        margin-bottom: 30px;
    }
}

/* ============================================= */
/*/////////////////// media query css for tab start ////////////////*/
@media (min-width:700px) and (max-width:912px) {

    .main-navigation ul.nav-menu>li>a,
    .main-navigation ul.nav-menu>li:last-child>a {
        padding: 10px;
    }

    .main-navigation ul.nav-menu>li>a {
        margin: 0;
    }

    .main-navigation ul.nav-menu>li:last-child {
        width: fit-content;
        padding: 0;
        margin: 0 auto;
    }

    .main-navigation ul.nav-menu>li:last-child a {
        margin: 0;
        color: #fff;
    }

    .main-navigation ul.nav-menu,
    .main-navigation ul ul {
        text-align: center;
    }

    #page-site-header .page-header {
        top: 18rem;
    }

    #page-site-header .innerpage-description {
        color: #fff;
        font-size: 20px;
        width: 100%;
        max-width: 86%;
        margin: 0 auto;
        text-align: center;
    }

    #page-site-header .breadcrumbbox .button {
        display: flex;
        /* flex-direction: column; */
    }

    #page-site-header .breadcrumbbox span.treeEnd-margin {
        margin-left: -26px;
    }

    #content .inquiry-screen {
        padding: 20px 13px;
    }

    #page-site-header .breadcrumbbox .button .root,
    #page-site-header .breadcrumbbox span {
        width: fit-content;
        margin-bottom: 10px;
    }

    .site-description {
        padding: 0px;
    }

    .opbg {
        height: fit-content;
    }

    #featured-slider .wrapper {
        top: 28%;
    }

    #featured-slider h2.title {
        font-size: 55px;
    }

    #featured-slider .entry-header h3 {
        margin: 0;
    }

    #featured-slider h2.entry-title {
        line-height: 1;
    }

    #featured-slider .entry-content {
        margin: 0 72px 0 18px;
    }

    #featured-slider .wrapper .d-flex {
        justify-content: start;
        margin-left: 18px;
    }

    #featured-slider .slick-next {
        left: 17.5%;
    }

    #featured-slider img {
        height: 437px !important;
    }

    #featured-about .image-top-box {
        width: 149px;
        height: 78px;
        top: -2.3rem;
        left: -3.2rem;
    }

    #featured-about .image-top-box .top-box-num {
        font-size: 22px !important;
    }

    #featured-about .image-top-box .top-box-text {
        font-size: 11px !important;
    }

    #featured-about .title-section {
        margin-bottom: 0;
    }

    #featured-about .title-section h5 {
        font-size: 17px !important;
    }

    #featured-about .title-section h1 {
        font-size: 24px !important;
    }

    #featured-about h2.subtitle {
        margin: 0 0 30px 0;
        font-size: 14px !important;
    }

    #featured-about .title-section .about-service p {
        font-size: 14px !important;
    }

    #featured-about .title-section .cleaning-text {
        gap: 9px;
    }

    #featured-about .title-section .cleaning-text p {
        font-size: 12px !important;
    }

    #featured-about .title-section .cleaning-text svg,
    #featured-about .title-section .cleaning-text i {
        font-size: 23px !important;
    }

    #featured-about .button-content {
        margin: 7% 0 0 0;
        padding: 8px 15px;
    }

    #featured-about .button-content a {
        font-size: 14px !important;
    }

    #featured-about .button-content i,
    #featured-about .button-content svg {
        font-size: 15px !important;
    }

    #featured-about .aboutrightside {
        margin-left: 0;
    }

    #featured-services .gap-16 {
        gap: 2rem;
    }

    #featured-features .features-block {
        padding: 31px 15px;
    }

    #featured-features .featuresbox .features-icon {
        font-size: 40px;
    }

    #featured-features .featuresbox .circle {
        width: 58px;
        height: 58px;
    }

    #featured-features .featuresbox {
        padding: 0 0 0px;
    }

    #featured-features h4.features-title {
        margin: 6px 0 10px;
    }

    #featured-features .featuresbox .features-icon i,
    #featured-features .featuresbox .features-icon svg {
        margin: 0 0 0 18px;
    }

    #featured-steps .gap-20 {
        gap: 2rem;
    }

    #featured-steps .section-content .steps-block .steps-icon {
        /* left: 3.4rem; */
        width: 118px;
        height: 118px;
    }

    #featured-steps .section-content .steps-block .stepsbox .steps-no {
        margin-top: -30px;
    }

    #featured-steps .section-content .steps-block h4 a {
        font-size: 17px;
    }

    #featured-steps .section-content .steps-block .stepsbox .steps-text {
        font-size: 16px;
        padding: 19px 20px;
    }

    #featured-steps .section-content .steps-block:nth-child(2) .steps-icon {
        width: 134px;
        height: 134px;
    }

    #featured-steps .section-content .steps-block {
        margin-top: 20px;
    }

    #featured-faqs .faq-margin {
        margin-left: 0;
    }

    #featured-contact .contact-margin {
        margin-top: 280px;
    }

    #featured-contact .box1 {
        top: 14.5rem;
    }

    #featured-contact .box2 {
        top: 17.2rem;
    }

    #featured-contact .box3 {
        bottom: 0;
    }

    #featured-contact .box4 {
        bottom: 2.8rem;
    }

    #featured-contact .box5 {
        bottom: 1.7rem;
    }

    #featured-contact .entry-content3 h5 {
        margin-left: -25px;
    }

    #featured-contact .contactformdiv {
        margin-left: 0;
        width: 100%;
    }

    #featured-pricings .circle {
        width: 280%;
        top: -19rem;
        left: -188px !important;
    }

    #featured-pricings .cleaning-chemical {
        display: none;
    }

    #featured-testimonials .expanded-text-container {
        width: 74%;
    }

    #featured-testimonials .expanded-image-container {
        width: 30%;
    }

    #featured-posts .gap-20 {
        gap: 1rem;
    }

    #featured-posts .entry-meta {
        padding: 6px 0 0;
    }

    #featured-posts .entry-meta .d-flex {
        gap: 12px;
        padding-left: 6px;
    }

    #featured-posts .px-3 {
        padding-right: 0.25rem !important;
        padding-left: 0.25rem !important;
    }

    #featured-posts .entry-contentbox {
        padding: 20px 0;
    }

    #featured-posts .entry-contentbox .entry-title {
        margin: 0 5px 15px;
    }

    #featured-posts h2.entry-title a {
        font-size: 18px;
    }

    #featured-posts .posts-date {
        padding: 12px 0 0 5px;
    }

    #featured-posts .posts-date .arrow-up {
        margin-right: 1rem;
    }

    #featured-clients .gap-20 {
        gap: 2rem;
    }

    #colophon .social-links a {
        margin: 13px 10px;
    }

    #colophon .widget_nav_menu ul li a {
        font-size: 16px;
    }

    #colophon .logo {
        margin-bottom: 15px;
    }

    #main .gallery-image p {
        padding: 24px 19px;
    }

    #main .testimonial-inner-page.gap-20 {
        gap: 2rem;
    }

    #main .testimonial-inner-content .testimonials-designation {
        margin: 0 0 25px;
    }

    #main .testimonial-inner-content .content-image img {
        bottom: 5px;
    }

    .widget .menu {
        width: 100%;
        padding-left: 0;
    }

    .widget_text input {
        width: 90%;
        margin: 0 10px 16px;
    }

    #secondary .widget ul li a::after,
    #secondary .widget ol li a::after {
        content: '. . . . . .';
    }

    .post-navigation a,
    .posts-navigation a {
        margin-bottom: 10px;
    }

    #main .projectmainbox .gap-14 {
        gap: 1.5rem;
    }

    #main .entry-content .gallery-image p {
        padding: 24px 18px 24px;
    }

    #main .testimonial-inner-content {
        /*background: linear-gradient(180deg, #fff 80%, #01549a 63%);*/
        padding: 1rem;
    }

    #main .testimonial-inner-content h4 {
        margin: 20px 0 16px 0;
    }

    #primary ul li a,
    #secondary ul li a {
        font-size: 14px;
    }

    #primary .widget ul li a::before,
    #secondary .widget ul li a::before,
    #primary .widget ol li a::before,
    #secondary .widget ol li a::before {
        margin-left: 0.2em;
        margin-right: 4px;
    }

    #secondary .widget .menu-services-container ul li a::after,
    #secondary .widget .menu-our-services-container ul li a::after {
        right: 0;
    }

    #content .rightbox-form .conct-header hr {
        left: 1.3rem;
    }

    #featured-features .entry-content h2 {
        margin: 46% 0 0px 0px;
    }

    #featured-features .feature-img {
        width: 100%;
    }

    #featured-features .section-content {
        margin-left: 0;
    }

    #main .gallerybox .gallery-inner-content .gallery-box {
        width: 100%;
    }
}

/* ============================================= */
/*/////////////////// media query css for laptop start ////////////////*/
@media (min-width:1023px) and (max-width:1024px) {
    .main-navigation ul.nav-menu>li>a {
        padding: 5px 4px;
        font-size: 13px;
    }

    .main-navigation ul.nav-menu>li>a {
        margin-right: 10px;
    }

    .main-navigation ul.nav-menu>li>a {
        font-size: 14px;
    }

    .main-navigation ul.nav-menu>li:last-child {
        padding: 6px 3px;
    }

    .main-navigation ul.nav-menu>li:last-child>a {
        font-size: 15px;
    }

    .site-description {
        padding: 0;
    }

    #featured-slider h2.entry-title {
        font-size: 36px;
        line-height: 1.5;
    }

    .main-navigation ul.nav-menu>li>a {
        padding: 5px 4px;
    }

    #featured-slider h2.title {
        font-size: 40px;
    }

    #featured-slider .slick-next {
        left: 15.5% !important;
    }

    #featured-about .image-top-box {
        width: auto;
        height: auto;
        top: -2rem;
        left: -5rem;
    }

    #featured-services .gap-16 {
        gap: 2rem;
    }

    #featured-services .entry-title a {
        font-size: 14px;
        padding: 0 0 0 4px;
    }

    #featured-steps .section-content .steps-block .stepsbox .steps-no {
        margin-top: -34px;
    }

    #featured-steps .gap-20 {
        gap: 2rem;
    }

    #featured-contact .box1 {
        top: 12rem;
    }

    #featured-contact .box2 {
        top: 14.8rem;
    }

    #featured-pricings .circle {
        top: -227px !important;
        left: -98px !important;
    }

    #featured-team .entry-content {
        padding: 10px 15px;
    }

    #featured-team .gap-5 {
        gap: 1rem !important;
    }

    #featured-testimonials .swiper-slide .content-image .image-container {
        width: 100%;
    }

    #featured-testimonials .client-single.active .client-img {
        transform: scaleY(2.2) scaleX(1) !important;
    }

    #featured-testimonials .client-comment {
        left: 32rem !important;
        width: 711px !important;
    }

    #featured-posts .gap-20 {
        gap: 1rem !important;
    }

    #featured-clients .gap-20 {
        gap: 2rem;
    }

    #colophon .logo {
        margin-bottom: 15px;
    }

    #colophon .social-links {
        margin-top: 15px;
    }

    #colophon .footer-widgets-area .widget_text ul li:nth-child(2),
    #colophon .footer-widgets-area .widget_text ul li:nth-child(4),
    #colophon .footer-widgets-area .widget_text ul .list-email {
        margin-left: 0rem;
    }

    #colophon .gap-16 {
        gap: 2rem;
    }

    .site-description {
        padding: 0px;
    }

    #page-site-header .page-header {
        top: 12rem;
    }

    #page-site-header .breadcrumbbox .button {
        display: flex;
        /* flex-direction: column; */
    }

    #page-site-header .breadcrumbbox .button .root,
    #page-site-header .breadcrumbbox span {
        width: fit-content;
        margin-bottom: 10px;
    }

    #page-site-header .breadcrumbbox span.treeEnd-margin {
        margin-left: -25px;
    }

    .navigation.post-navigation,
    .comment-navigation .nav-next,
    .posts-navigation .nav-next,
    .post-navigation .nav-next {
        padding: 0;
    }

    .comment-navigation .nav-links,
    .posts-navigation .nav-links,
    .post-navigation .nav-links {
        display: flex;
        flex-direction: column;
    }

    .comment-navigation .nav-previous,
    .posts-navigation .nav-previous,
    .post-navigation .nav-previous {
        margin-bottom: 15px;
    }

    #main .service-inner-content .entry-title .service-title,
    #secondary .service-inner-content .entry-title .service-title {
        padding: 0 11px;
    }

    #main .gallerybox {
        margin: 30px auto;
    }

    #secondary .grid.gap-20 {
        gap: 2rem;
    }

    #main .bloginn-inner-content .content-image img,
    #secondary .bloginn-inner-content .content-image img,
    #featured-posts-item .content-image img {
        width: 100%;
    }

    #main .bloginn-inner-content .entry-contentbox,
    #secondary .bloginn-inner-content .entry-contentbox,
    #featured-posts-item .content {
        width: 100%;
        /* padding: 0px 6px 18px; */
    }

    #main .column-gap {
        column-gap: 2rem;
    }

    #main .faqs-inner-content .faq-content button.accordion {
        padding: 0 0 0 12px;
    }

    #main .faqs-inner-content .faq-content button.accordion .accordion-arrow {
        padding: 20px;
        position: relative;
    }

    .widget_text input {
        margin: 0 30px 16px;
    }

    #section-header {
        width: 100%;
        /*margin: 0px 5% 0px;*/
    }

    #featured-projects .entry-content .entry-text {
        width: 192px !important;
        padding: 18px 20px;
    }

    #featured-projects .entry-content .entry-text a {
        font-size: 20px;
    }

    #content .rightbox-form .conct-header hr {
        left: 1.3rem;
    }
}

/* ============================================= */
@media (min-width:1024px) and (max-width:1366px) {
    .site-description {
        padding: 0px;
    }

    #page-site-header .page-header {
        top: 18rem;
    }

    #page-site-header .innerpage-description {
        color: #fff;
        font-size: 20px;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        text-align: center;
    }

    #page-site-header .breadcrumbbox .button {
        display: flex;
        /* flex-direction: column; */
    }

    #page-site-header .breadcrumbbox .button .root,
    #page-site-header .breadcrumbbox span {
        width: fit-content;
        margin-bottom: 10px;
    }

    #page-site-header .breadcrumbbox span.treeEnd-margin {
        margin-left: -25px;
    }

    .navigation.post-navigation,
    .comment-navigation .nav-next,
    .posts-navigation .nav-next,
    .post-navigation .nav-next {
        padding: 0;
    }
}

#featured-faqs button.gm-control-active {
    background-color: #01549a !important;
}

/* ============================================= */
/*/////////////////// media query css for laptop start ////////////////*/
@media (orientation: landscape) and (max-width:1440px) {
    #featured-posts .message-box .message-form p .wpcf7-spinner::before {
        left: 16.2rem;
    }

    #featured-pricings .circle {
        left: -140px;
    }

    #featured-testimonials .client-single.active .client-img {
        transform: scaleY(2.2) scaleX(1.3);
    }

    #featured-testimonials .client-comment {
        left: 36rem;
    }

    .post-navigation a,
    .posts-navigation a {
        margin-bottom: 8px;
    }

    #featured-projects .entry-content .entry-text {
        width: 279px;
    }
}


#content #featured-about {
    padding: 1rem 0 4rem 0;
}

#content #featured-pricings {
    padding: 4rem 0 2rem 0;
}

#content .entry-content {
    /*box-shadow: 0px 0px 38px #00000029;
    padding: 4rem 1rem;*/
}

#content #featured-pricings .pcontaint ul li::before {
    transform: rotate(0deg);
    margin: 0;
}

#content #featured-pricings .pcontaint ul li {
    padding: 0;
}

#content #featured-pricings h2.entry-title {
    line-height: 20px !important;
    padding: 0px 20px 12px 20px;
}

.home #content .entry-content {
    display: none !important;
}

#main .entry-content .socialMedia ul li:before {
    display: none !important;
}

#main .entry-content .socialMedia ul li {
    line-height: 28px !important;
}

/* ------------------------------TOP HEADER----------------------- */
.top-header {
    background: linear-gradient(to right, #1e3a8a 0%, #0891b2 100%);
    font-size: 14px;
    width: 100%;
}

/* INNER */
.top-header-inner {
    max-width: 1569px;
    margin: 0 auto;
    padding: 8px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* LEFT */
.top-header-left {
    display: flex;
    align-items: center;
    gap: 25px;
}

/* ITEM */
.top-item {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

/* ICON */
.top-item-icon svg {
    color: #ffffff !important;
    font-size: 14px;
}

.top-item-icon svg :hover {
    color: #0891b2 !important;
    font-size: 14px;
}


/* TEXT */
.top-item-text {
    color: #ffffff;
    font-weight: 200;
    font-size: 15px;
}

/* RIGHT */
.top-header-right {
    display: flex;
    align-items: center;
}

/* EMERGENCY */
.emergency-text {
    display: block;
    align-items: center;
    gap: 8px !important;
}

.topbar-emergency-icon svg {
    color: #ffffff !important;
    font-size: 14px;
}

.emergency-text-label {
    color: var(--theme-color);
    font-weight: 400;
}

/* ===============================
   TABLET (≤ 1024px)
=============================== */
@media (max-width: 1024px) {

    .top-header-inner {
        padding: 8px 16px;
        gap: 15px;
    }

    .top-header-left {
        gap: 18px;
    }

    .top-item-text {
        font-size: 14px;
    }
}

@media (max-width: 768px) {

    /* Main container */
    .top-header-inner {
        flex-direction: row;
        justify-content: space-between;
        /* 🔥 left & right separation */
        align-items: center;
    }

    /* Email + Phone on LEFT */
    .top-header-left {
        display: flex;
        flex-direction: row;
        gap: 20px;
    }

    /* Emergency on RIGHT */
    .top-header-right {
        display: flex;
        justify-content: flex-end;
    }

    /* Hide only email & phone text */
    .top-item-text {
        display: none;
    }

    /* Keep emergency text visible */
    .emergency-text-label {
        display: inline-block;
        font-size: 13px;
    }
}

/* ===============================
   SMALL MOBILE (≤ 480px)
=============================== */
@media (max-width: 480px) {

    .top-header-inner {
        padding: 8px 12px;
        gap: 20px;
    }

    .top-header-left {
        gap: 20px;
    }

    .top-item-icon svg,
    .topbar-emergency-icon svg {
        font-size: 16px;
        /* slightly bigger for tap */
    }
}

/* ================================
   SCHEDULE SERVICE BUTTON (GRADIENT)
================================ */

.header-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 14px 28px;
    border-radius: 50px;

    background: linear-gradient(135deg, #ffcc33 0%, #ffb000 100%);
    color: #000;

    font-size: 16px;
    font-weight: 600;
    line-height: 1;

    text-decoration: none;
    white-space: nowrap;

    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25);
    transition: all 0.25s ease;
}

.header-btn .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.header-btn .btn-icon i {
    font-size: 16px;
    line-height: 1;
    color: #000;

    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    position: static !important;
}

.header-btn .btn-text {
    line-height: 1;
}

.header-btn:hover {
    background: linear-gradient(135deg, #ffb000 0%, #ff9800 100%);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.3);
    transform: translateY(-1px);
}

@media (max-width: 767px) {
    .header-btn {
        padding: 12px 22px;
        font-size: 14px;
    }
}

/* ===============================
   HERO SLIDER – PIXEL PERFECT
================================ */

#featured-slider {
    position: relative;
    background: linear-gradient(135deg, #1e3a8a 0%, #0891b2 50%, #1e40af 100%);
    width: 100%;
    overflow: visible;
}

#featured-slider .section-content {
    /* max-width: 1545px; */
    width: 100%;
    /* background: linear-gradient(135deg, #1e3a8a 0%, #0891b2 50%, #1e40af 100%); */
    /* margin: 100px auto 0;*/
    padding: 11rem 0 3rem;
}

/* SINGLE SLIDE */
#featured-slider .hero-slide {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    position: relative;
    overflow: visible;
}

/* ===============================
   LEFT CONTENT
================================ */
#featured-slider .hero-content {
    flex: 1;
    color: #fff;
    max-width: 1149px;
}

/* Rating pill */
#featured-slider .hero-rating {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.15);
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 16px;
    margin-bottom: 24px;
}

#featured-slider .hero-rating svg {
    color: var(--theme-color);
    font-size: 14px;
}

/* Title */
#featured-slider .hero-title {
    font-size: 56px;
    line-height: 1.2;
    color: #ffffff;
    font-family: 'Roboto Bold';
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 10px;
    white-space: nowrap;
}

#featured-slider .hero-subtitle {
    font-size: 56px !important;
    font-weight: 700;
    color: var(--theme-color);
    margin-bottom: 24px;
    margin-top: 0;
}

#featured-slider.hero-title span,
#featured-slider .hero-title strong {
    color: #ffc107 !important;
}

/* Description */
#featured-slider .hero-desc {
    font-size: 18px;
    margin-top: 0;
    line-height: 1.7;
    color: #e6f2ff;
    margin-bottom: 32px;
    max-width: 543px;
}

/* Buttons */
#featured-slider .hero-buttons {
    display: flex;
    gap: 18px;
    margin-top: 0;
    margin-bottom: 48px;
}

#featured-slider .hero-buttons .btn,
#featured-slider .hero-buttons .btn2 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 40px;
    transition: all 0.3s ease;
    text-decoration: none;
}

#featured-slider .hero-buttons .btn {
    background-color:var(--theme-color);
    color: #000;
}

#featured-slider .hero-buttons .btn2 {
    background-color: transparent;
    color: #ffffff;
}

/* Primary button */
#featured-slider .btn-primary {
    background: #ffc107;
    color: #0b2e59;
}

#featured-slider .btn-primary:hover {
    background: #FAA919 !important;
}

/* Outline button */
#featured-slider .btn-outline {
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: #fff;
}

#featured-slider .btn-outline:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

#featured-slider .hero-buttons .btn:hover,
#featured-slider .hero-buttons .btn2:hover {
    transform: scale(1.07);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18), 0 4px 8px rgba(0, 0, 0, 0.12);
}

/* ===============================
   STATS
================================ */
#featured-slider .hero-stats {
    display: flex;
    gap: 20px;
    /*margin-top: 40px;*/
    flex-wrap: nowrap;
}

#featured-slider .hero-stats .stat-box {
    flex: 0 0 341px;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px;
    border-radius: 60px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

#featured-slider .hero-stats .stat-box svg {
    width: 27px;
    padding: 12px;
    height: 27px;
    background: var(--theme-color);
    border-radius: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    fill: #000;
    color: #000;
}

#featured-slider .hero-stats .stat-text {
    display: flex;
    flex-direction: column;
}

#featured-slider .hero-stats .stat-text strong {
    font-size: 30px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
}

#featured-slider .hero-stats .stat-text span {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 4px;
}

/* ===============================
   RIGHT IMAGE
================================ */
#featured-slider .hero-image {
    position: relative;
    flex: 1;
    max-width: 730px;
    top: 2px;
}

/* ===============================
   EXPERIENCE BADGE
================================ */
#featured-slider .experience-badge {
    position: absolute;
    top: 32px;
    right: -20px;
    background: #ffffff;
    width: 110px;
    height: 126px;
    border-radius: 31px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
    z-index: 2;
}

#featured-slider .experience-badge strong {
    font-size: 36px;
    font-weight: 800;
    color: #1e3a8a;
    line-height: 1;
    margin-bottom: 8px;
}

#featured-slider .experience-badge span {
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    line-height: 1.3;
    max-width: 80px;
}

/* EMERGENCY BADGE */
#featured-slider .emergency-badge {
    position: absolute;
    top: 504px;
    right: 507px;
    width: 100%;
    max-width: 233px;
    height: 99px;
    display: flex;
    align-items: center;
    gap: 14px;
    background:var(--theme-color);
    padding: 24px;
    border-radius: 37px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

#featured-slider .emergency-icon {
    width: 44px;
    height: 44px;
    background: #fff;
    border-radius: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1b4fa2;
}

#featured-slider .emergency-icon svg {
    width: 27px;
    height: 27px;
    color: #1b4fa2 !important;
}

#featured-slider .emergency-text1 {
    display: flex;
    flex-direction: column;
    color: #000 !important;
    line-height: 1.1;
    font-size: 14px;
    font-weight: 500;
}

#featured-slider .emergency-value {
    font-size: 24px !important;
    font-weight: 700;
    color: #000000;
}

#featured-slider .emergency-text span {
    font-size: 14px;
    font-weight: 500;
}

/* ======================================================
   GLOBAL RESPONSIVE FIXES (PIXEL PERFECT)
====================================================== */

/* Reset hardcoded formatting that breaks responsiveness */
@media (max-width: 1400px) {
    #featured-slider .hero-title {
        white-space: normal;
    }
}

/* ======================================================
   LAPTOP LAYOUT (max-width: 1366px)
====================================================== */
@media (max-width: 1366px) {
    #featured-slider .section-content {
        padding: 120px 40px !important;
    }

    #featured-slider .hero-title,
    #featured-slider .hero-subtitle {
        font-size: 48px !important;
    }

    #featured-slider .hero-slide {
        gap: 40px;
    }

    #featured-slider .hero-stats {
        flex-wrap: nowrap;
        /* Prevents stats from overflowing */
    }

    #featured-slider .hero-stats .stat-box {
        flex: 1 1 300px;
    }

    /* Reset awkward fixed positioning */
    #featured-slider .emergency-badge {
        right: 62%;
        left: auto;
        bottom: -16px;
        top: auto;

    }

    #featured-slider .experience-badge {
        right: 0;
        top: -4% !important;
    }
}

/* ======================================================
   TABLET LAYOUT (max-width: 1024px)
====================================================== */
@media (max-width: 1024px) {
    #featured-slider .section-content {
        padding: 100px 30px !important;
    }

    /* Target both .grid and .hero-slide to ensure stacking */
    #featured-slider .hero-slide,
    #featured-slider .grid {
        flex-direction: column !important;
        text-align: center;
        gap: 60px;
    }

    #featured-slider .hero-content {
        max-width: 100% !important;
        align-items: center;
        display: flex;
        flex-direction: column;
    }

    #featured-slider .hero-desc {
        max-width: 600px;
        margin: 0 auto 30px auto;
    }

    #featured-slider .hero-buttons,
    #featured-slider .hero-stats {
        justify-content: center;
        width: 100%;
        flex-wrap: nowrap;
    }

    #featured-slider .hero-image {
        max-width: 600px;
        width: 100%;
        margin: 0 auto;
    }

    /* Center badge using fluid transforms instead of fixed pixels */
    #featured-slider .emergency-badge {
        position: absolute;
        left: 14%;
        transform: translateX(-50%);
        bottom: -30px;
        right: auto;
        max-width: 241px;
        width: 90%;
    }
}

/* ======================================================
   MOBILE LAYOUT (max-width: 767px)
====================================================== */
@media (max-width: 767px) {
    #featured-slider .section-content {
        padding: 80px 20px 60px !important;
    }

    #featured-slider .hero-title,
    #featured-slider .hero-subtitle {
        font-size: 38px !important;
    }

    #featured-slider .hero-buttons {
        flex-direction: column;
        gap: 15px;
    }

    #featured-slider .hero-buttons .btn,
    #featured-slider .hero-buttons .btn2 {
        width: 100%;
        justify-content: center;
    }

    #featured-slider .hero-stats {
        flex-direction: column;
        align-items: center;
    }


    #featured-slider .hero-stats .stat-box {
        width: 100%;
        max-width: 400px;
        flex: none;
        /* <-- ADD THIS: Resets the forced 341px height */
        padding: 20px;
        /* Ensures nice spacing once the height collapses */
    }


    /* Scale gracefully without bleeding off-screen */
    #featured-slider .experience-badge {
        transform: scale(0.8);
        transform-origin: top right;
        right: 10px;
        top: -10px;
    }

    /* Switch to relative flow to prevent absolute overlaps on small phones */
    #featured-slider .emergency-badge {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        margin: -20px auto 0;
        max-width: 90%;
        justify-content: center;
    }
}

/* ======================================================
   SMALL MOBILE (max-width: 480px)
====================================================== */
@media (max-width: 480px) {
    #featured-slider .section-content {
        padding: 60px 15px 40px !important;
    }

    #featured-slider .hero-title {
        font-size: 32px;
        text-align: center !important;
    }

    #featured-slider .hero-subtitle {
        font-size: 39px !important;
    }

    #featured-slider .hero-desc {
        font-size: 16px;
    }

    #featured-slider .experience-badge {
        transform: scale(0.65);
        right: 5px;
    }

    #featured-slider .emergency-badge {
        width: 100%;
        max-width: 80%;
        padding: 15px;
        margin-top: -59px;
    }

    #featured-slider .emergency-value {
        font-size: 20px !important;
    }
}

/* ======================================================
   EXTRA SMALL MOBILE (max-width: 360px)
====================================================== */
@media (max-width: 360px) {

    #featured-slider .hero-title,
    #featured-slider .hero-subtitle {
        font-size: 26px !important;
    }

    #featured-slider .hero-rating {
        font-size: 13px;
        padding: 6px 12px;
    }

    #featured-slider .experience-badge {
        transform: scale(0.55);
        right: 0;
    }

    /* Stack the badge contents to save horizontal space */
    #featured-slider .emergency-badge {
        flex-direction: row;
        text-align: center;
        gap: 10px;
        border-radius: 36px;
    }
}

/* ===============================
   FEATURED ABOUT SECTION
================================ */

#featured-about {
    /* padding: 0rem 2rem 19rem; 
    padding-top: 0 !important;*/
    padding-bottom: 0rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 5rem
}

/* Ensure the parent section holds the absolute background */
#featured-about {
    position: relative;
    z-index: 1;
}

/* Stretch the background div to cover the whole section */
#featured-about .featured-about-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /* Puts it behind your content */
}

.featured-about-section {
    padding: 0 !important;
    background: #ffffff;
    overflow: visible;
}

/* ===============================
   ABOUT IMAGE GRID – FINAL FIX
================================ */
#featured-about .about {
    gap: 3rem;
    align-items: normal !important;
}

#featured-about .about-image-area {
    padding: 0;
}

/* Main large image */
#featured-about .about-img-main {
    width: 100%;
    height: 395px;
    overflow: hidden;
    border-radius: 60px;
    /* match image radius */
    margin-bottom: 15px;
}

/* ADD transition here */
#featured-about .about-img-main img {
    width: 100%;
    height: 100%;
    object-fit: inherit;
    display: block;
    transition: transform 0.5s ease;
}

/* Zoom on hover */
#featured-about .about-img-main:hover img {
    transform: scale(1.1);
}

/* Bottom images wrapper */
#featured-about .about-img-bottom {
    display: flex;
    gap: 20px;
    position: relative;
}

#featured-about .about-img-bottom .img-sm {
    flex: 1;
    height: 210px;
    overflow: hidden;
    border-radius: 49px;
    /* move radius here */
}

#featured-about .about-img-bottom .img-sm img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 28px;
    display: block;
    transition: transform 0.5s ease;
}

#featured-about .about-img-bottom .img-sm:hover img {
    transform: scale(1.1);
}

/* Experience Badge */

#featured-about .about-exp-badge {
    position: relative;
    bottom: 76px;
    left: -21px !important;
    background: linear-gradient(135deg, #0d3b8e, #0c87b8);
    color: #ffffff;
    width: 100%;
    max-width: 4%;
    height: 132px;
    padding: 56px !important;
    border-radius: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 15px 40px rgba(13, 59, 142, 0.35);
    text-align: center;
}


#featured-about .about-exp-badge .exp-number {
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
}


#featured-about .about-exp-badge .exp-label {
    font-size: 14px;
    font-weight: 500;
    margin-top: 4px;
}

/* ===============================
   RIGHT CONTENT AREA
================================ */


#featured-about .about-content-area {
    /*padding-left: 40px;*/
    padding: 0;
}

/* Pill */

#featured-about .about-pill {
    display: inline-block;
    background: linear-gradient(135deg, #0c87b8, #0d3b8e);
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 16px;
}

/* Title */

#featured-about h2.about-title {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.25;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #1e3a8a;
    margin-bottom: 18px;

    width: 105% !important;
    max-width: 120% !important;
}


#featured-about .about-title span.about-title-continuation {
    color: #0c87b8;
}

/* Description */

#featured-about .about-description {
    font-size: 17px;
    line-height: 1.8;
    width: 111%;
    color: #5c677d;
    margin-bottom: 32px;
    /*max-width: 520px;*/
}

/* ===============================
   ICON LIST
================================ */


#featured-about.about-icon-list {
    list-style: none;
    padding: 0;
    margin: 0 0 40px;
}


#featured-about .about-icon-list li {
    display: flex !important;
    align-items: center !important;

    gap: 14px;
    margin-bottom: 18px;
}

/* Icon background box */
#featured-about .about-icon-list li .icon-box {
    width: 44px;
    height: 44px;
    background: linear-gradient(151deg, #0c87b8, #0d3b8e);
    border-radius: 40%;
    color: #ffff;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
}

/* Actual SVG icon size
#featured-about .about-icon-list li .icon-box svg {
    width: 18px;
    height: 18px;
    fill: #ffffff !important;
    display: block;
}
 */

#featured-about .about-icon-list li span {
    font-size: 18px !important;
    font-weight: 500 !important;
    justify-content: center !important;
    color: #364153;
}

/* ===============================
   BUTTON
================================ */


#featured-about .about-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: 247px;
    background: linear-gradient(135deg, #0d3b8e, #0c87b8);
    color: #ffffff;
    padding: 16px 32px;
    border-radius: 50px;
    font-size: 16px;
    top: 2re;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.35s ease;
    /* box-shadow: 0 12px 30px rgba(13, 59, 142, 0.35); */
    margin-top: 1rem;
}


#featured-about .about-btn i {
    font-size: 14px;
}


#featured-about .about-btn:hover {
    transform: translateY(-2px);
    /*box-shadow: 0 18px 40px rgba(13, 59, 142, 0.45);*/
}

/* ===============================
   CORRECTION FOR TABLET GAP
================================ */

@media (max-width: 1024px) {

    /* 1. Force the container to stack and items to stretch full width */
    #featured-about .about {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* Centers the content */
    }

    #featured-about .about-image-area,
    #featured-about .about-content-area {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100%;
    }

    /* 2. Fix the Image Grid scaling so it doesn't look small on the left */
    #featured-about .about-img-main {
        width: 100%;
        height: auto;
        /* Allow height to adjust so it doesn't crop */
        min-height: 350px;
    }

    #featured-about .about-img-bottom {
        width: 100%;
    }

    /* 3. Remove the 111% width that causes horizontal shifting */
    #featured-about .about-description {
        width: 100% !important;
    }

    /* 4. Center the badge relative to the stacked image */
    #featured-about .about-exp-badge {
        left: 10px !important;
        bottom: 60px;
    }
}

/* Mobile Fix for very small screens */
@media (max-width: 576px) {
    #featured-about .about-img-main {
        height: 250px;
        /* Smaller height for phones */
    }

    #featured-about .about-img-bottom .img-sm {
        height: 160px;
    }

    #featured-about h2.about-title {
        font-size: 36px !important;
    }
}

/* ===============================
   TABLET ROW FIX (768px to 1200px)
================================ */
@media (min-width: 768px) and (max-width: 1200px) {
    #featured-about .about {
        display: flex !important;
        flex-direction: row !important;
        /* Forces row layout */
        align-items: flex-start;
        gap: 2rem;
    }

    /* Force both sides to take up equal space */
    #featured-about .about-image-area,
    #featured-about .about-content-area {
        flex: 1 !important;
        width: 50% !important;
    }

    /* Adjust the main image height so it doesn't look stretched */
    #featured-about .about-img-main {
        height: 300px;
    }

    /* Fix the description width so it doesn't spill over */
    #featured-about .about-description {
        width: 100% !important;
        font-size: 16px;
    }

    /* Scale the badge slightly so it fits the smaller image */
    #featured-about .about-exp-badge {
        padding: 48px !important;
        height: 100px;
        bottom: 60px;
        left: -10px !important;
    }

    #featured-about .about-title {
        font-size: 36px !important;
        /* Shrink title slightly to fit row */
    }
}

/* ==========================================
    FEATURED SERVICES SECTION
========================================== */

#featured-services {
    padding: 93px 0;
}

/* Ensure the parent section holds the absolute background */
#featured-services {
    position: relative;
    z-index: 1;
}

/* Stretch the background div to cover the whole section */
#featured-services .featured-services-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /* Puts it behind your content */
}

#featured-services .services-header {
    max-width: 900px;
    margin: 0 auto 54px;
}

#featured-services .services-main-title {
    /* Base pill styling - do not define alignment here */
    background: #e1eff2;
    /* Closer to the image's light blue color */
    color: #007c9b;
    /* Closer to the image's teal text color */
    padding: 13px 30px;
    /* Adjusted padding to match the reference image's proportions */
    border-radius: 50px;
    /* Fully rounded pill shape */

    /* Fallbacks for older browsers if the PHP strtolower fails, 
       but font-size and weight should be managed by Customizer.
       Keeping them here as defaults. */
    font-size: 16px;
    font-weight: 500;
}

/* Big title */
#featured-services .services-badge {
    display: block;
    font-size: 48px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    color: #1f3c88;
    margin-bottom: 15px;
}

/* Subtitle */
#featured-services .services-subtitle {
    font-size: 18px;
    color: #717182;
    max-width: 950px;
    width: 100%;
    margin: auto;
    text-align: center;
}

/* ==========================================
    SERVICES GRID
========================================== */

#featured-services .services-grid {
    gap: 30px;
    padding: 0 1rem 0;
    justify-items: center;
}

.servicerightside {
    margin-left: 1rem;
    margin-right: 1rem;
    width: auto;
}

/* For mobile responsiveness */
@media (max-width: 768px) {
    .servicerightside {
        margin-left: 20px;
        margin-right: 20px;
    }
}

/* Card */
#featured-services .service-card {
    background: #ffffff;
    width: 100%;
    border-radius: 41px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 4, 0.09);
    transition: all 0.3s ease;
    max-width: 100%;
}

#featured-services .service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 55px rgba(0, 0, 0, 0.18);
}

#featured-services .service-card-inner {
    display: flex;
    flex-direction: column;
}

/* ==========================================
    IMAGE
========================================== */
#featured-services .service-image {
    position: relative;
    height: 192px;
    overflow: hidden;
}

#featured-services .service-image img {
    width: 100%;
    height: 100%;
    object-fit: inherit;
    display: block;
    transition: transform 0.5s ease;
}

/* Zoom effect */
#featured-services .service-image:hover img {
    transform: scale(1.1);
}

/* ==========================================
    ICON (Gradient Background)
========================================== */

#featured-services .service-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
}

#featured-services .service-card:nth-child(1) .service-icon {
    background: linear-gradient(135deg, #00b4db, #0083b0);
}

#featured-services .service-card:nth-child(2) .service-icon {
    background: linear-gradient(135deg, #ff6a00, #ff3c00);
}

#featured-services .service-card:nth-child(3) .service-icon {
    background: linear-gradient(135deg, #f7971e, #ffd200);
}

#featured-services .service-card:nth-child(4) .service-icon {
    background: linear-gradient(135deg, #d4145a, #fbb03b);
}

/* ==========================================
    CONTENT
========================================== */

#featured-services .service-content {
    padding: 24px;
}

#featured-services .service-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
}

#featured-services .service-title a {
    text-decoration: none;
    color: #1f3c88;
    transition: color 0.3s ease;
}

/* --- Title Color Change on Card Hover --- */
#featured-services .service-card:hover .service-title a {
    color: #0083b0;
    /* This can also be linked to a Customizer variable */
}

#featured-services .service-excerpt {
    font-size: 15px;
    color: #6c7a89;
    margin-bottom: 16px;
}

/* --- Learn More link (Default State) --- */
#featured-services .newsCaption-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: #0891b2;
    text-decoration: none;
    position: relative;
    transition: all 0.3s ease;
}

#featured-services .newsCaption-link .btn-icon i {
    font-size: 14px;
    transition: all 0.3s ease;
    /* Ensure color and transform both animate */
}

/* --- COMBINED HOVER: Text and Icon change together --- */
#featured-services .service-card:hover .newsCaption-link,
#featured-services .service-card:hover .newsCaption-link .btn-text,
#featured-services .service-card:hover .newsCaption-link .btn-icon i {
    color: #1e3a8a;
    /* This is the "normal" fallback color */
}

/* --- Arrow Animation --- */
#featured-services .service-card:hover .newsCaption-link .btn-icon {
    transform: translateX(5px);
}

#featured-services .service-card:hover .newsCaption-link .btn-icon i {
    transform: translateX(4px);
}

/* ==========================================
    BOTTOM BUTTON
========================================== */

#featured-services .services-bottom {
    margin-top: 60px;
}

#featured-services .services-button {
    display: inline-block;
    padding: 16px 40px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(135deg, #1f3c88, #00b4db);
    transition: all 0.3s ease;
}

#featured-services .services-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0, 131, 176, 0.3);
}

/* ==========================================
    RESPONSIVE – FEATURED SERVICES
========================================== */

@media (min-width: 1400px) {
    #featured-services .services-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1399px) {
    #featured-services .services-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    #featured-services .services-badge {
        font-size: 42px;
    }
}

@media (max-width: 1199px) {
    #featured-services {
        padding: 70px 0 !important;
    }

    #featured-services .services-grid {
        grid-template-columns: repeat(2, 1fr);
        justify-content: center;
    }

    #featured-services .services-badge {
        font-size: 36px;
    }

    #featured-services .services-subtitle {
        font-size: 16px;
    }
}

@media (max-width: 991px) {
    #featured-services {
        padding: 60px 0 !important;
    }

    #featured-services .services-header {
        margin-bottom: 50px;
        padding: 0 20px;
    }

    #featured-services .services-badge {
        font-size: 30px !important;
    }

    #featured-services .services-main-title {
        font-size: 14px;
        padding: 10px 18px;
        margin-bottom: 1rem;
    }

    #featured-services .service-image {
        height: 200px;
    }

    #featured-services .service-content {
        padding: 22px;
    }
}

@media (max-width: 767px) {
    #featured-services {
        padding: 50px 0 !important;
    }

    #featured-services .services-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    #featured-services .services-header {
        margin-bottom: 40px;
        padding: 0 15px;
    }

    #featured-services .services-badge {
        font-size: 24px;
        line-height: 1.3;
    }

    #featured-services .services-subtitle {
        font-size: 15px;
    }

    #featured-services .service-image {
        height: 190px;
    }

    #featured-services .service-icon {
        width: 50px;
        height: 50px;
        font-size: 18px;
        border-radius: 14px;
    }

    #featured-services .service-title {
        font-size: 18px;
    }

    #featured-services .service-excerpt {
        font-size: 14px;
    }

    #featured-services .services-button {
        padding: 14px 30px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    #featured-services {
        padding: 40px 0 !important;
    }

    #featured-services .services-badge {
        font-size: 20px !important;
    }

    #featured-services .services-main-title {
        font-size: 13px;
        padding: 8px 15px;
    }

    #featured-services .service-image {
        height: 170px;
    }

    #featured-services .service-content {
        padding: 18px;
    }

    #featured-services .services-button {
        width: 100%;
        text-align: center;
        max-width: 80%;
    }
}

/* ==========================================
   PARTNER SECTION (WHY CHOOSE US STYLE)
========================================== */
#featured-partner {
    /*padding: 7rem;*/
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
}

/* Make sure the parent section can contain absolute elements */
#featured-partner {
    position: relative;
    z-index: 1;
      position: relative;
       background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    overflow: hidden; /* Keeps background neat */

}


/* Force the background div to fill the section */
.featured-partner-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Keeps it in the back */
    
    /* Good practice to include these here if you aren't doing it inline */
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
}


/* Ensure your content sits on top of the background and overlay */
#featured-partner .container,
#featured-partner .container-fluid {
    position: relative;
    z-index: 2; 
}
/* ================= HEADER ================= */

#featured-partner .partner-header {
    /* Removed max-width to allow full range of alignment */
    width: 100%;
    margin-bottom: 70px;
    /* Kept your bottom spacing */
    display: block;
    position: relative;
    z-index: 2;
}

#featured-partner .partner-subtitle-wrapper {
    width: 100%;
    display: block;
}

#featured-partner .partner-subtitle {
    font-size: 18px;
    color: #4a5565;
    line-height: 1.6;
    /* Increased for better readability on two lines */
    letter-spacing: 1.9px;
    margin: 0 auto;
    display: inline-block;
    /* Essential for Safari centering */
    max-width: 700px;
    /* Limits width to create that 2-line "pyramid" look */
}

#featured-partner .partner-badge {
    display: block;
    background: #0891B2;
    color: #fff;
    font-size: 16px;
    padding: 8px 18px;
    border-radius: 50px;
    margin-bottom: 20px;
    font-weight: 600;
}

#featured-partner .partner-main-title {
    font-size: 48px;
    font-weight: 700;
    color: #1e3A8A;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    margin-bottom: 20px;
}

#featured-partner .partner-subtitle {
    font-size: 18px;
    color: #4a5565;
    line-height: 1.4;
    letter-spacing: 1.9px;
    /* REMOVE margin: auto; */
    /* REMOVE width: 100%; */
    /* REMOVE max-width: 79%; */
    display: inline-block;
    /* Ensure this is here for Safari */
}

/* Optional: Add a margin to the wrapper instead of the text for spacing */
.partner-subtitle-wrapper {
    margin-top: 10px;
    margin-bottom: 20px;
}

/* ================= GRID ================= */

#featured-partner .partner-grid {
    max-width: 1300px;
    margin: 0 auto;
    gap: 35px;
}

/* ================= CARD ================= */

#featured-partner .partner-card {
    background: #ffffff;
    border-radius: 55px;
    width: 100%;
    max-width: 100%;
    padding: 28px 30px 28px;
    position: relative;
    transition: 0.3s ease;

}
#featured-partner .partner-card.modern-project-style {
    border-radius: 87px 40px !important;
}

#featured-partner .partner-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 30px rgba(0, 0, 0, 0.10);
}

#featured-partner .partner-card-inner {
    position: relative;
}

/* ================= TOP MINI BADGE ================= */

#featured-partner .partner-mini-badge {
    position: absolute;
    top: -10px;
    right: 0;
    background: #0ea5e9;
    color: #fff;
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: 600;
}

/* ================= ICON CIRCLE ================= */
/* 1. Add transition to the base icon state */
#featured-partner .partner-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: #fff;
    font-size: 24px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    /* Add this line for smooth scaling */
    transition: transform 0.3s ease;
}

/* 2. Add the hover effect triggered by the card */
#featured-partner .partner-card:hover .partner-icon {
    transform: scale(1.07);
    /* Makes the icon 15% larger */
}

/* ================= TITLE & TEXT ================= */

#featured-partner .partner-title {
    font-size: 18px;
    font-weight: 700;
    color: #1f3c88;
    margin-bottom: 12px;
}

#featured-partner .partner-text {
    font-size: 14px;
    color: #5f6f7f;
    line-height: 1.6;
    margin-bottom: 20px;
}

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

#featured-partner .partner-card-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #5f6f7f !important;
}

/* Footer small icon size */
#featured-partner .partner-card-footer svg {
    font-size: 8px;
}

/* =====================================
   MATCH FOOTER ICON COLOR PER CARD
===================================== */

/* Card 1 - Blue */
#featured-partner .partner-card:nth-child(1) .partner-card-footer svg {
    fill: #1e90ff;
    color: #1e90ff;
}

/* Card 2 - Orange */
#featured-partner .partner-card:nth-child(2) .partner-card-footer svg {
    fill: #ff9800;
    color: #ff9800;
}

/* Card 3 - Purple */
#featured-partner .partner-card:nth-child(3) .partner-card-footer svg {
    fill: #8e44ec;
    color: #8e44ec;
}

/* Card 4 - Green */
#featured-partner .partner-card:nth-child(4) .partner-card-footer svg {
    fill: #00c853;
    color: #00c853;
}

/* Card 5 - Deep Orange */
#featured-partner .partner-card:nth-child(5) .partner-card-footer svg {
    fill: #ff5722;
    color: #ff5722;
}

/* Card 6 - Teal */
#featured-partner .partner-card:nth-child(6) .partner-card-footer svg {
    fill: #00b8a9;
    color: #00b8a9;
}

/* Card 7 - Violet */
#featured-partner .partner-card:nth-child(7) .partner-card-footer svg {
    fill: #7c4dff;
    color: #7c4dff;
}

/* Card 8 - Pink */
#featured-partner .partner-card:nth-child(8) .partner-card-footer svg {
    fill: #ff2d8d;
    color: #ff2d8d;
}

/* ==========================================
   DIFFERENT COLORS FOR EVERY CARD
   (Exact colors from screenshot style)
========================================== */

/* Card 1 - Blue */
#featured-partner .partner-card:nth-child(1) .partner-icon {
    background: #1e90ff;
}

#featured-partner .partner-card:nth-child(1) .partner-mini-badge {
    background: #1e90ff;
}

/* Card 2 - Orange */
#featured-partner .partner-card:nth-child(2) .partner-icon {
    background: #ff9800;
}

#featured-partner .partner-card:nth-child(2) .partner-mini-badge {
    background: #ff9800;
}

/* Card 3 - Purple */
#featured-partner .partner-card:nth-child(3) .partner-icon {
    background: #8e44ec;
}

#featured-partner .partner-card:nth-child(3) .partner-mini-badge {
    background: #8e44ec;
}

/* Card 4 - Green */
#featured-partner .partner-card:nth-child(4) .partner-icon {
    background: #00c853;
}

#featured-partner .partner-card:nth-child(4) .partner-mini-badge {
    background: #00c853;
}

/* Card 5 - Deep Orange */
#featured-partner .partner-card:nth-child(5) .partner-icon {
    background: #ff5722;
}

#featured-partner .partner-card:nth-child(5) .partner-mini-badge {
    background: #ff5722;
}

/* Card 6 - Teal */
#featured-partner .partner-card:nth-child(6) .partner-icon {
    background: #00b8a9;
}

#featured-partner .partner-card:nth-child(6) .partner-mini-badge {
    background: #00b8a9;
}

/* Card 7 - Violet */
#featured-partner .partner-card:nth-child(7) .partner-icon {
    background: #7c4dff;
}

#featured-partner .partner-card:nth-child(7) .partner-mini-badge {
    background: #7c4dff;
}

/* Card 8 - Pink */
#featured-partner .partner-card:nth-child(8) .partner-icon {
    background: #ff2d8d;
}

#featured-partner .partner-card:nth-child(8) .partner-mini-badge {
    background: #ff2d8d;
}

/* ==========================================
   RESPONSIVE – LARGE DESKTOP (1400px+)
========================================== */
@media (min-width: 1400px) {
    #featured-partner {
        padding-top: 7rem;
    }
}

/* ==========================================
   DESKTOP (1200px – 1399px)
========================================== */
@media (max-width: 1399px) {

    #featured-partner {
        padding: 6rem 4rem;
    }

    #featured-partner .partner-main-title {
        font-size: 42px;
    }

    #featured-partner .partner-subtitle {
        max-width: 75%;
    }
}

/* ==========================================
   LAPTOP / TABLET LANDSCAPE (992px – 1199px)
========================================== */
@media (max-width: 1199px) {

    #featured-partner {
        padding: 5rem 3rem;
    }

    #featured-partner .partner-grid {
        gap: 25px;
    }

    #featured-partner .partner-main-title {
        font-size: 36px;
    }

    #featured-partner .partner-subtitle {
        font-size: 16px;
        max-width: 85%;
    }

    #featured-partner .partner-card {
        padding: 30px 25px;
    }
}

/* ==========================================
   TABLET (768px – 991px)
========================================== */
@media (max-width: 991px) {

    #featured-partner {
        padding: 4rem 2rem;
    }

    #featured-partner .partner-grid {
        gap: 20px;
    }

    #featured-partner .partner-main-title {
        font-size: 30px;
    }

    #featured-partner .partner-subtitle {
        font-size: 15px;
        max-width: 100%;
    }

    #featured-partner .partner-icon {
        width: 55px;
        height: 55px;
        font-size: 20px;
    }

    #featured-partner .partner-mini-badge {
        font-size: 11px;
        padding: 5px 12px;
    }
}

/* ==========================================
   MOBILE (576px – 767px)
========================================== */
@media (max-width: 767px) {

    #featured-partner {
        padding: 3rem 1.5rem;
    }

    #featured-partner .partner-header {
        margin-bottom: 40px;
    }

    #featured-partner .partner-main-title {
        font-size: 26px;
        line-height: 1.3;
    }

    #featured-partner .partner-subtitle {
        font-size: 14px;
    }

    #featured-partner .partner-card {
        padding: 25px 20px;
    }

    #featured-partner .partner-title {
        font-size: 16px;
    }

    #featured-partner .partner-text {
        font-size: 13px;
    }
}

/* ==========================================
   SMALL MOBILE (below 480px)
========================================== */
@media (max-width: 480px) {

    #featured-partner {
        padding: 2.5rem 1rem;
    }

    #featured-partner .partner-main-title {
        font-size: 22px !important;
    }

    #featured-partner .partner-badge {
        font-size: 14px;
        padding: 6px 14px;
    }

    #featured-partner .partner-icon {
        width: 50px;
        height: 50px;
        font-size: 18px;
    }

    #featured-partner .partner-card-footer {
        font-size: 12px;
    }

    #featured-partner .partner-card-footer svg {
        width: 12px;
        height: 12px;
    }
}

/* ===============================
   CTA FULL WIDTH BACKGROUND
================================ */

#featured-partner .full-width-cta {
    width: 100%;
    padding: 55px 0;

}


/* ===============================
   INNER WRAPPER (ROUNDED BLOCK)
================================ */

#featured-partner .partner-cta-wrapper {
    max-width: 1479px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;

    padding: 48px;

    border-radius: 57px;

    background: linear-gradient(90deg, #1e3a8a 0%, #0891b2 50%, #1e40af 100%);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
}


/* ===============================
   LEFT SIDE
================================ */

#featured-partner .partner-cta-left {
    flex: 1;
    color: #fff;
}

#featured-partner .partner-cta-left h2 {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #ffffff;
}

#featured-partner .partner-cta-left p {
    font-size: 16px;
    opacity: 0.9;
    line-height: 1.7;
    max-width: 574px;
    margin-bottom: 24px;
}


/* ===============================
   BUTTONS
================================ */

#featured-partner .partner-cta-buttons {
    margin-top: 35px;
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

#featured-partner .primary-btn {
    background: var(--theme-color);
    color: #000;
    padding: 16px 32px;
    border-radius: 40px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: 0.3s ease;
}

#featured-partner .primary-btn:hover {
    background: #f59e0b;
}

#featured-partner .cta-btn2 {
    border: 2px solid rgba(255, 255, 255, 0.6);
    padding: 16px 32px;
    border-radius: 40px;
    color: #fff;
    text-decoration: none;
    transition: 0.3s ease;
}

#featured-partner .cta-btn2:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
}


/* ===============================
   RIGHT SIDE STATS
================================ */

#featured-partner .partner-cta-right {
    flex: 1;
}

#featured-partner .partner-cta-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}


/* ===============================
   STAT CARD STYLE (Glass Effect)
================================ */

#featured-partner .cta-stat-card {
    padding: 19px 30px;
    border-radius: 37px;
    text-align: center;
    color: #fff;

    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px);
    /*  transition: 0.3s ease;*/
}

#featured-partner .cta-stat-card:hover {
    /* transform: translateY(-5px);*/
    background: rgba(255, 255, 255, 0.12);
}

#featured-partner .cta-stat-card h3 {
    font-size: 36px;
    font-weight: 700;
    color: var(--theme-color);
    margin-bottom: 8px;
}

#featured-partner .cta-stat-card span {
    font-size: 14px;
    opacity: 0.9;
}

@media (max-width: 1024px) {

    #featured-partner .partner-cta-wrapper {
        flex-direction: column;
        text-align: center;
        gap: 40px;
        padding: 40px 30px;
    }

    #featured-partner .partner-cta-left p {
        max-width: 100%;
        margin: 0 auto;
    }

    #featured-partner .partner-cta-buttons {
        justify-content: center;
    }

    #featured-partner .partner-cta-right {
        width: 100%;
    }

    #featured-partner .partner-cta-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

@media (max-width: 992px) {

    #featured-partner .partner-cta-wrapper {
        flex-direction: column;
        text-align: center;
        padding: 60px 40px;
    }

    #featured-partner .partner-cta-left p {
        margin: 0 auto;
    }

    #featured-partner .partner-cta-buttons {
        justify-content: center;
    }

    #featured-partner .partner-cta-stats {
        margin-top: 40px;
    }
}

@media (max-width: 768px) {

    #featured-partner .full-width-cta {
        /* padding: 70px 20px;*/
    }

    #featured-partner .partner-cta-wrapper {
        padding: 35px 20px;
        border-radius: 25px;
    }

    #featured-partner .partner-cta-left h2 {
        font-size: 24px;
    }

    #featured-partner .partner-cta-left p {
        font-size: 14px;
        line-height: 1.6;
    }

    #featured-partner .primary-btn,
    #featured-partner .cta-btn2 {
        padding: 12px 24px;
        font-size: 14px;
    }

    #featured-partner .partner-cta-stats {
        /* grid-template-columns: 1fr;*/
        gap: 20px;
    }

    #featured-partner .cta-stat-card h3 {
        font-size: 32px;
    }
}

@media (max-width: 480px) {

    #featured-partner .partner-cta-left h2 {
        font-size: 20px;
    }

    #featured-partner .partner-cta-left p {
        font-size: 13px;
    }

    #featured-partner .primary-btn,
    .cta-btn2 {
        width: 100%;
        text-align: center;
    }

    #featured-partner .cta-stat-card {
        padding: 18px 20px;
        border-radius: 20px;
    }

    #featured-partner .cta-stat-card h3 {
        font-size: 26px;
    }

    #featured-partner .cta-stat-card span {
        font-size: 13px;
    }
}


/* ==================================================
   PROCESS SECTION
================================================== */

#featured-process .process-section {
    padding: 0px 0;
    /* background: #f7f9fc;*/
    position: relative;
}

/* Ensure the parent section holds the absolute background */
#featured-process {
    position: relative;
    z-index: 1;
}

/* Stretch the background div to cover the whole section */
#featured-process .featured-process-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /* Puts it behind your content */
}

/* ===============================
   HEADER
================================ */

#featured-process .process-header {
    text-align: center;
    /* max-width: 750px;*/
    margin: 0 auto 80px;
}

#featured-process .process-badge {
    display: inline-block;
    background: #0891b2;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 29px;
    border-radius: 30px;
    margin-bottom: 18px;
}

#featured-process .process-title {
    font-size: 48px;
    font-weight: 700;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #1e3a8a;
    margin-bottom: 15px;
}

/* ================= HEADER ================= */
#featured-process .process-header {
    width: 100%;
    margin-bottom: 50px;
    display: block;
}

#featured-process .process-subtitle-wrapper {
    width: 100%;
    display: block;
}

#featured-process .process-subtitle {
    color: #6c757d;
    line-height: 1.7;
    letter-spacing: 0.9px;
    display: inline-block;

    /* ADDED MAX-WIDTH HERE */
    /* 600px forces the "possible" onto the second line like your image */
    max-width: 623px;
    width: 90%;
    /* Ensures it stays responsive on smaller screens */
}

/* ===============================
   TIMELINE WRAPPER
================================ */

#featured-process .process-timeline {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}

/* Center Vertical Gradient Line */
#featured-process .process-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 3px;
    height: 100%;
    transform: translateX(-50%);
    opacity: 71%;
    border-radius: 10px;
    background: linear-gradient(to bottom, #4f8cff 0%, #2b6ef2 3%, #2fd3e2 25%, #18b5c4 32%, #37d9b5 37%, #19b394 66%, #33d17a 56%, #17a673 100%);
}




/* ===============================
   PROCESS ITEM
================================ */

#featured-process .process-item {
    position: relative;
    width: 50%;
    padding: 40px 50px;
}

/* Left Side */
#featured-process .process-item.left {
    left: 0;
    text-align: right;
}

/* Right Side */
#featured-process .process-item.right {
    left: 50%;
    text-align: left;
}

/* ==================================================
   PROCESS CARD WITH FLOATING NUMBER
================================================== */

#featured-process .process-card {
    background: #ffffff;
    padding: 28px 29px 25px;
    border-radius: 30px;
    box-shadow: 0 16px 16px rgba(0, 0, 0, 0.08);
    position: relative;
    /*transition: all 0.3s ease;*/
    width: 100%;
    max-width: 81%;
    left: 25px;
}

/* Floating Number Circle */
#featured-process .process-number {
    position: absolute;
    top: -28px;
    left: 26px;
    width: 45px;
    height: 45px;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    /*box-shadow: 0 10px 25px rgba(25, 179, 148, 0.35);*/
}

/* If right aligned card */
#featured-process .process-item.right .process-number {
    /*left: auto;*/
    right: 40px;
}

/* Title */
#featured-process .process-step-title {
    font-size: 20px;
    font-weight: 700;
    color: #1f3c88;
    text-align: left;
    margin-bottom: 18px;
}

/* Description */
#featured-process .process-step-desc {
    font-size: 14px;
    color: #4a5568;
    text-align: left;
    line-height: 1.8;
}

/* Remove old inline number spacing */
#featured-process .process-card .process-number {
    margin-bottom: 0;
}

#featured-process .process-card:hover {
    /*transform: translateY(-10px);*/
    /* movement */
    box-shadow: 0 22px 16px rgba(0, 0, 0, 0.08);
}

/* ===============================
   CENTER ICON
================================ */

#featured-process .process-icon {
    position: absolute;
    top: 50px;
    left: 100%;
    font-size: 26px;
    width: 60px;
    color: #ffffff;
    height: 60px;
    /*background: #2b6ef2;*/
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-50%);
    z-index: 2;
}

#featured-process .process-item.right .process-icon {
    left: 0;
    transform: translateX(-50%);
}

#featured-process .process-icon i {
    color: #fff;
    font-size: 22px;
}


/* ==================================================
   AUTO STEP GRADIENT COLOR ROTATION
================================================== */

#featured-process .process-number,
#featured-process .process-icon {
    transition: all 0.3s ease;
    border-radius: 50%;
}

/* ===== STEP 1: Deep Cyan (Request Service) ===== */
#featured-process .process-item:nth-child(4n+1) .process-number,
#featured-process .process-item:nth-child(4n+1) .process-icon {
    background: linear-gradient(135deg, #00adef 0%, #00d1ff 100%);
    box-shadow: 0 10px 20px rgba(0, 173, 239, 0.4);
}

/* ===== STEP 2: Bright Teal (Inspection) ===== */
#featured-process .process-item:nth-child(4n+2) .process-number,
#featured-process .process-item:nth-child(4n+2) .process-icon {
    background: linear-gradient(135deg, #00b8c4 0%, #00e5f2 100%);
    box-shadow: 0 10px 20px rgba(0, 184, 196, 0.4);
}

/* ===== STEP 3: Emerald/Seafoam (Repair & Service) ===== */
#featured-process .process-item:nth-child(4n+3) .process-number,
#featured-process .process-item:nth-child(4n+3) .process-icon {
    background: linear-gradient(135deg, #00c691 0%, #00f0af 100%);
    box-shadow: 0 10px 20px rgba(0, 198, 145, 0.4);
}

/* ===== STEP 4: Vivid Green (Final Check) ===== */
#featured-process .process-item:nth-child(4n+4) .process-number,
#featured-process .process-item:nth-child(4n+4) .process-icon {
    background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
    box-shadow: 0 10px 20px rgba(46, 204, 113, 0.4);
}

/* ===== THE CENTRAL LINE ===== */
/* Matches the "Inspection" and "Repair" bridge color from the image */
#featured-process .process-line {
    background-color: #48c9b0;
    width: 2px;
    /* Ensure it is thin like the image */
    opacity: 0.8;
}

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


/* ===============================
   LARGE LAPTOP (1200px ↓)
================================ */
@media (max-width: 1200px) {

    #featured-process .process-title {
        font-size: 40px;
    }

    #featured-process .process-card {
        max-width: 90%;
        left: 0;
    }

}


/* ===============================
   TABLET (992px ↓)
================================ */
@media (max-width: 992px) {

    #featured-process .process-section {
        padding: 80px 20px;
    }

    #featured-process .process-title {
        font-size: 34px;
    }

    #featured-process .process-subtitle {
        max-width: 100%;
        font-size: 16px;
    }

    #featured-process .process-item {
        padding: 30px;
    }

    #featured-process .process-card {
        max-width: 100%;
    }

}

/* ===============================
   MOBILE (768px ↓)
================================ */
@media (max-width: 768px) {

    /* Remove vertical timeline */
    #featured-process .process-timeline::before {
        display: none;
    }

    /* Make container grid with 2 columns */
    #featured-process .process-timeline {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }

    /* Reset items */
    #featured-process .process-item {
        width: 100%;
        left: 0 !important;
        padding: 0;
        text-align: left !important;
    }

    /* Card full width inside grid */
    #featured-process .process-card {
        max-width: 100%;
        padding: 20px;
    }

    /* Optional: hide icon for cleaner layout */
    #featured-process .process-icon {
        display: none;
    }

    /* Adjust text size */
    #featured-process .process-step-title {
        font-size: 16px;
    }

    #featured-process .process-step-desc {
        font-size: 13px;
    }
}


/* ===============================
   SMALL MOBILE (480px ↓)
================================ */
@media (max-width: 480px) {

    #featured-process .process-title {
        font-size: 26px !important;
    }

    #featured-process .process-badge {
        font-size: 12px;
        padding: 8px 20px;
    }

    #featured-process .process-number {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }

    #featured-process .process-icon {
        width: 40px;
        height: 40px;
        display: none;
    }

}

/* ==========================================
   FEATURED TEAM SECTION - COMPLETE
========================================== */

#featured-team {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    padding: 96px 0px !important;
    background: linear-gradient(to bottom right, #1e3a8a 0%, #1e40af 50%, #0891b2 100%);
    position: relative;
    z-index: 1;
}

#featured-team .featured-team-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* ================= HEADER ================= */

#featured-team .team-header {
    max-width: 900px;
    color: #ffffff;
    margin-bottom: 48px;
}

#featured-team .team-main-title {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 3px;
}

#featured-team .team-subtitle {
    font-size: 48px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 3px;
}

#featured-team .team-description {
    font-size: 18px;
    color: #ebe6e7;
}

/* ================= GRID ================= */

#featured-team .team-grid {
    margin-top: 24px;
    gap: 24px;
}

/* ==========================================
   FEATURED TEAM SECTION - STACKING FIX
========================================== */

#featured-team .team-card {
    border-radius: 43px;
    overflow: hidden;
    height: 363px;
    position: relative;
    transition: all 0.4s ease;

    /* FIX 1: Solidify the background slightly to prevent "see-through" glitches */
    background: rgba(255, 255, 255, 0.1);

    /* FIX 2: Ensure the card creates a clean new rendering layer */
    isolation: isolate;
    transform: translateZ(0);

    border: 1px solid #fff3;

    /* Keep blur, but sometimes this is the culprit. 
       If the glitch persists, try commenting out the next 2 lines. */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

#featured-team .team-image-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 35px 35px 0 0;
    height: 251px;

    /* FIX 3: Force a background color so nothing "leaks" from behind */
    background-color: #1e3a8a;

    /* FIX 4: The Safari/Chrome Rounded Corner Clip Fix */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: -webkit-radial-gradient(white, black);
}

#featured-team .team-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    display: block;

    /* FIX 5: Remove any default filters that might conflict */
    filter: none;

    /* FIX 6: High-performance scaling */
    will-change: transform;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover State */
#featured-team .team-card:hover .team-image {
    /* FIX 7: Use a slightly smaller scale (1.05 instead of 1.1) 
       to see if the rendering engine handles it better. */
    transform: scale(1.05);
}

#featured-team .team-card:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.18);
}

/* ================= CONTENT (BOTTOM BLUE AREA) ================= */

/* ================= TEAM CONTENT (Glass Match) ================= */
#featured-team .team-content {
    /* Adjusted padding to give the text more breathing room */
    padding: 24px;

    border-radius: 0 0 35px 35px;

    /* REMOVED the solid gradient so the glass effect shows through */
    background: transparent;

    color: #ffffff;
    text-align: center;

    /* Removed the box-shadow from here because the parent card handles it now */
}

/* ================= NAME ================= */

#featured-team .team-name {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
}

#featured-team .team-name a {
    color: #ffffff;
    text-decoration: none;
}

#featured-team .team-name a:hover {
    opacity: 0.8;
}

/* ================= DESIGNATION ================= */

#featured-team .team-designation {
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: var(--theme-color);
    margin-bottom: 0px;
}

#featured-pricings .pricing-disclaimer small {
    color: #6a7282 !important;
    font-size: 14px;
}

/* ================= SOCIAL ICONS ================= */

#featured-team .team-social {
    margin-top: 10px;
}

#featured-team .team-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 0 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-size: 14px;
    transition: 0.3s ease;
}

#featured-team .team-social a:hover {
    background: #ffcc00;
    color: #1f2f6b;
}

/* ==========================================
   RESPONSIVE – LARGE DESKTOP (1400px+)
========================================== */
@media (min-width: 1400px) {
    #featured-team {
        /* padding: 80px 80px !important;*/
    }

}


/* ==========================================
   LAPTOP / SMALL DESKTOP (1200px)
========================================== */
@media (max-width: 1200px) {

    #featured-team {
        padding: 60px 40px !important;
    }

    #featured-team .team-subtitle {
        font-size: 42px;
    }

}


/* ==========================================
   TABLET (992px)
========================================== */
@media (max-width: 992px) {

    #featured-team {
        padding: 50px 30px !important;
    }

    #featured-team .team-header {
        max-width: 100%;
        text-align: center;
    }

    #featured-team .team-subtitle {
        font-size: 34px;
    }

    #featured-team .team-description {
        font-size: 16px;
    }

    #featured-team .team-grid {
        gap: 20px;
    }
}


/* ==========================================
   MOBILE (768px)
========================================== */
@media (max-width: 768px) {

    #featured-team {
        padding: 40px 20px !important;
    }

    #featured-team .team-main-title {
        font-size: 13px;
        padding: 6px 14px;
    }

    #featured-team .team-subtitle {
        font-size: 28px;
        line-height: 1.3;
    }

    #featured-team .team-description {
        font-size: 15px;
    }

    #featured-team .team-content {
        padding: 20px 15px;
    }

    #featured-team .team-name {
        font-size: 18px;
    }

    #featured-team .team-designation {
        font-size: 14px;
        margin-bottom: 15px;
    }

    #featured-team .team-social a {
        width: 34px;
        height: 34px;
        font-size: 13px;
        margin: 0 4px;
    }

}


/* ==========================================
   SMALL MOBILE (480px)
========================================== */
@media (max-width: 480px) {

    #featured-team {
        padding: 30px 15px !important;
    }

    #featured-team .team-subtitle {
        font-size: 22px;
    }

    #featured-team .team-description {
        font-size: 14px;
    }

    #featured-team .team-content {
        padding: 18px 12px;
    }

    #featured-team .team-name {
        font-size: 16px;
    }

    #featured-team .team-social a {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

}
/* Remove default list spacing */
.menu-item-button {
    list-style: none;
}

/* Main Button Style */
.menu-item-button .last-button {
    display: inline-flex; /* Required to align the new <i> tag and text side-by-side */
    align-items: center;
    justify-content: center;
    gap: 10px; /* Space between the icon and the text */

    padding: 12px 24px !important;
    border-radius: 60px;

    font-size: 16px;
    font-weight: 500; /* Made slightly lighter to match the image */
    color: #000 !important;
    text-decoration: none;

    /* ORANGE GRADIENT */
    background: linear-gradient(to right, var(--theme-color) 0%, #f59e0b 100%);
    box-shadow: 0 10px 25px rgba(245, 158, 11, 0.35);

    transition: all 0.3s ease;
}

/* Style the dynamic icon we added via the Customizer */
.menu-item-button .last-button svg {
    font-size: 16px ; 
    color: #000;
}

/* Optional hover state to make it interactive */
.menu-item-button .last-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(245, 158, 11, 0.45);
}
/*
/* Phone Icon (before text) 
.menu-item-button .last-button::before {
    content: "\f095"; /* FontAwesome phone icon 
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 16px;
}*/





/* =====================================
   PRICING SECTION HEADER
===================================== */
#featured-pricings {
    text-align: center;
    padding-bottom: 90px !important;
}

.wow {
    visibility: visible !important;
}

#featured-pricings .title-section {
    max-width: 820px;
    margin: 0 auto 80px;
    padding: 0 20px;
    display: block;
}

#featured-pricings .pricing-badge {
    display: inline-block;
    background: #0891b21a;
    color: #0891b2;
    padding: 8px 22px;
    border-radius: 30px;
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 20px;
}

#featured-pricings .title-section h1 {
    display: inline-block;
    background: #0891b21a;
    color: #0891b2;
    padding: 12px 16px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

#featured-pricings .pricing-subtitle {
    font-size: 48px;
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: 16px;
}

#featured-pricings .section-top-des {
    font-size: 16px;
    color: #6b7280;
}

/* ==================================================
   FEATURED PRICING CARDS
================================================== */
#featured-pricings .pricing-column {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 35px;
    flex-wrap: wrap;
}

#featured-pricings .featured-pricings-item {
    width: 400px !important;
    position: relative;
    display: flex;
}

#featured-pricings .pricing-box {
    border-radius: 45px;
    overflow: hidden;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    width: 100%;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
    transition: 0.4s ease;
}

/* ================= MIDDLE CARD ================= */
#featured-pricings .featured-pricings-item.card-2 {
    transform: translateY(-15px);
    z-index: 5;
}

#featured-pricings .featured-pricings-item.card-2 .pricing-box {
    box-shadow: 0 45px 90px rgba(36, 76, 48, 0.22);
}

#featured-pricings .popular-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--theme-color);
    color: #000;
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
}

/* ================= HEADER ================= */
#featured-pricings .pricing-header {
    padding: 60px 35px 45px;
}

#featured-pricings .card-1 .pricing-header {
    background: linear-gradient(135deg, #fbf9fa 0%, #f6f3f4 100%);
}

#featured-pricings .card-2 .pricing-header {
    background: linear-gradient(135deg, #1e3a8a 0%, #0891b2 100%);
    color: #ffffff;
}

#featured-pricings .card-3 .pricing-header {
    background: linear-gradient(135deg, #fef2f2 0%, #ffedd4 100%);
}

/* ================= ICON ================= */
#featured-pricings .pricing-icon {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    display: flex;
    color: #ffffff;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}

#featured-pricings .pricing-icon svg {
    width: 30px;
    height: 30px;
    fill: #ffffff;
}

#featured-pricings .card-1 .pricing-icon {
    background: linear-gradient(135deg, #6a7282 0%, #99a1af 100%);
}

#featured-pricings .card-2 .pricing-icon {
    background: linear-gradient(135deg, var(--theme-color) 0%, #f59e0b 100%);
}

#featured-pricings .card-3 .pricing-icon {
    background: linear-gradient(135deg, #fb2c36 0%, #ff6900 100%);
}

/* ================= TEXT ================= */
#featured-pricings .plan-title {
    font-size: 24px !important;
    text-align: left;
    font-weight: 700;
    margin-bottom: 8px;
}

#featured-pricings .card-1 .plan-title,
#featured-pricings .card-3 .plan-title {
    color: #1e3a8a;
}

#featured-pricings .card-2 .plan-title {
    color: #ffffff;
}

#featured-pricings .plan-desc {
    font-size: 14px;
    text-align: left;
    color: #4a5565;
    line-height: 1.6;
    margin-bottom: 18px;
}

#featured-pricings .card-2 .plan-desc {
    color: #e0e7ff;
}

#featured-pricings .plan-price {
    text-align: left;
}

#featured-pricings .plan-price .amount {
    font-size: 60px;
    font-weight: 700;
}

#featured-pricings .card-1 .amount,
#featured-pricings .card-3 .amount {
    color: #1e3a8a;
}

#featured-pricings .card-2 .amount {
    color: #ffffff;
}

#featured-pricings .plan-price .duration {
    font-size: 18px;
    margin-left: 5px;
    color: #6a7282;
}

#featured-pricings .card-2 .duration {
    color: #e0e7ff;
}

/* ================= BODY ================= */
#featured-pricings .pricing-body {
    padding: 45px 35px;
    background: #ffffff;
    flex: 1;
    display: flex;
    flex-direction: column;
}

#featured-pricings .plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 25px;
}

#featured-pricings .plan-features li {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    font-size: 15px;
}

#featured-pricings .card-1 .plan-features li,
#featured-pricings .card-3 .plan-features li {
    color: #4a5568;
}

#featured-pricings .card-2 .plan-features li {
    color: #1e293b;
}

#featured-pricings .feature-icon {
    width: 15px;
    height: 15px;
    margin-right: 10px;
    color: #ffffff !important;
}

#featured-pricings .card-1 .feature-icon,
#featured-pricings .card-3 .feature-icon {
    padding: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
    fill: #ffffff;
}

#featured-pricings .card-2 .feature-icon {
    padding: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0891b2 0%, #1e3a8a 100%);
    fill: #ffffff;
}

/* ================= BUTTONS ================= */
#featured-pricings .plan-btn {
    display: block;
    text-align: center;
    padding: 16px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(.4, 0, .2, 1);
    position: relative;
}

#featured-pricings .plan-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

#featured-pricings .card-1 .plan-btn,
#featured-pricings .card-3 .plan-btn {
    background: #ffb400;
    color: #000;
}

#featured-pricings .card-2 .plan-btn {
    background: #244c97;
    color: #ffffff;
}

/* ================= CARD HOVER EFFECTS ================= */
#featured-pricings .featured-pricings-item:hover .pricing-box {
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
}

#featured-pricings .featured-pricings-item.card-2:hover .pricing-box {
    box-shadow: 0 55px 100px rgba(36, 76, 48, 0.35);
}

/* =====================================
   CONTACT SECTION 
===================================== */
#featured-contact {
    background: #fbf9fa;
    padding: 96px 0;
}

/* Ensure the parent section holds the absolute background */
#featured-contact {
    position: relative;
    z-index: 1;
}

/* Stretch the background div to cover the whole section */
#featured-contact .featured-contact-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /* Puts it behind your content */
}

/* ===============================
   TITLE WRAPPER (NEW)
=================================*/
#featured-contact .contact-title-wrapper {
    text-align: center;
    width: 100%;
}

#featured-contact .contact-badge {
    display: inline-block;
    background: #dff3fb;
    color: #0891b2;
    font-size: 15px;
    font-weight: 600;
    padding: 12px 16px;
    border-radius: 30px;
    margin-bottom: 16px;
}

/* ===============================
   MAIN TITLE (FORCED CENTER & TIGHT GAP)
=================================*/
#featured-contact .title-section {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    margin-bottom: 0 !important;
    /* Kills any hidden margin on the wrapper */
}

#featured-contact .main-title {
    font-size: 48px;
    font-weight: 700;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #1e3a8a;
    margin-bottom: 16px !important;
    /* Exact spacing between Title and Subtitle */
    line-height: 1.1 !important;
    /* Shrinks the invisible bounding box around the text */
    text-align: center;
    display: block !important;
    width: 100% !important;
}

/* ===============================
   SUBTITLE
=================================*/
#featured-contact .contact-subtitle {
    font-size: 16px;
    color: #6c757d;
    margin-top: 0 !important;
    /* Forces the top margin to zero */
    margin-bottom: 64px;
    text-align: center;
}

/* ===== CONTACT INFO CARDS ===== */
#featured-contact .contact-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px;
    max-width: 1156px;
    margin: 0 auto 40px auto !important;
}

#featured-contact .contact-cards>div {
    padding: 0;
    width: 100%;
    min-width: 0;
}

#featured-contact .contact-card {
    width: 100%;
    height: 100%;
    padding: 24px;
    /* Matches Tailwind's p-6 (1.5rem) */
    border-radius: 40px;
    /* Matches Tailwind's rounded-2xl (1rem) */
    background: #fff;
    text-align: center;

    /* shadow-md equivalent */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -2px rgba(0, 0, 0, 0.1);

    /* transition-shadow equivalent */
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#featured-contact .contact-card:hover {
    /* shadow-xl equivalent */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

#featured-contact .icon-box {
    width: 55px;
    height: 55px;
    background: linear-gradient(135deg, #1e3a8a, #0891b2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px auto;
}

#featured-contact .icon-box svg {
    font-size: 22px;
    color: #fff;
}

#featured-contact .contact-card h6 {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 8px;
    color: #1f3c88;
}

#featured-contact .contact-card p {
    margin-bottom: 3px;
    font-size: 14px;
    color: #333;
}

#featured-contact .contact-card p a {
    color: #333;
    text-decoration: none;
}

#featured-contact .contact-card small {
    font-size: 12px;
    color: #6c757d;
}

/* ===============================
   FORM BOX
=================================*/
#featured-contact .contact-form-box {
    background: #ffffff;
    padding: 60px;
    border-radius: 35px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);
    max-width: 1156px;
    margin: 0 auto;
}

#featured-contact .contact-form-box label {
    font-weight: 400;
    font-size: 14px;
    margin-bottom: 6px;
    display: block;
    color: #1e293b;
}

#featured-contact .contact-form-box input,
#featured-contact .contact-form-box select,
#featured-contact .contact-form-box textarea {
    width: 100%;
    border: 2px solid #e2e8f0;
    border-radius: 19px;
    padding: 14px 16px;
    font-size: 15px;
    margin-bottom: 25px;
    appearance: none;
    background: #ffffff;
    transition: 0.3s ease;
}

#featured-contact .contact-form-box input:focus,
#featured-contact .contact-form-box select:focus,
#featured-contact .contact-form-box textarea:focus {
    border-color: #0ea5e9;
    outline: none;
}

#featured-contact .contact-form-box textarea {
    min-height: 180px;
    border-radius: 25px;
}

#featured-contact .contact-form-box .send-btn,
#featured-contact .contact-form-box input[type="submit"] {
    background: linear-gradient(135deg, var(--theme-color), #f59e0b) !important;
    border: none;
    color: #000;
    padding: 11px 18px !important;
    font-weight: 700;
    border-radius: 60px;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    margin: 0 auto;
}

#featured-contact .contact-form-box .text-center {
    text-align: center;
}

#featured-contact .contact-form-box .send-btn:hover,
#featured-contact .contact-form-box input[type="submit"]:hover {
    background: #ffb800;
}

#featured-contact .contact-form-box .send-btn i {
    font-size: 15px;
    display: inline-block;
    line-height: 1;
    transform: translateY(1px);
}

/* =========================================
   CONTACT FORM 7 RESPONSE MESSAGES (THEMED)
========================================= */

/* 1. Base Styling - Matches your form inputs exactly */
#featured-contact .wpcf7-response-output {
    border-radius: 19px !important;
    padding: 15px 20px !important;
    margin: 25px 0 0 0 !important;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    border: 2px solid transparent !important;
}

/* 2. Error State - Uses your theme's Yellow/Gold & Dark Blue */
#featured-contact .wpcf7 form.invalid .wpcf7-response-output,
#featured-contact .wpcf7 form.unaccepted .wpcf7-response-output {
    background-color: #fffaf0 !important;
    /* Very faint warm background */
    border-color: #ffb400 !important;
    /* Your theme's primary yellow */
    color: #1e3a8a !important;
    /* Your theme's dark blue text */
}

/* 3. Success State - Uses your theme's Light Blue Badge colors */
#featured-contact .wpcf7 form.sent .wpcf7-response-output {
    background-color: #dff3fb !important;
    /* Theme badge background */
    border-color: #0891b2 !important;
    /* Theme cyan color */
    color: #1e3a8a !important;
    /* Theme dark blue text */
}

/* 4. Failed State (Server error) - Soft red rounded to match */
#featured-contact .wpcf7 form.failed .wpcf7-response-output,
#featured-contact .wpcf7 form.aborted .wpcf7-response-output {
    background-color: #fef2f2 !important;
    border-color: #ef4444 !important;
    color: #b91c1c !important;
}

/* =========================================
   RESPONSIVE FIXES
========================================= */
/* Pricing Responsive */
#featured-pricings .featured-pricings-item {
    width: 100%;
    max-width: 380px;
}

@media (min-width: 1400px) {
    #featured-pricings .pricing-column {
        gap: 50px;
    }

    #featured-pricings .featured-pricings-item {
        max-width: 393px;
    }
}

@media (max-width: 1399px) {
    #featured-pricings .featured-pricings-item {
        max-width: 360px;
    }
}

@media (max-width: 991px) {
    #featured-pricings {
        padding-bottom: 60px !important;
    }

    #featured-pricings .pricing-column {
        justify-content: center;
        gap: 30px;
    }

    #featured-pricings .featured-pricings-item.card-2 {
        transform: translateY(0);
    }

    #featured-pricings .pricing-subtitle {
        font-size: 36px;
    }

    #featured-pricings .plan-price .amount {
        font-size: 48px;
    }
}

@media (max-width: 767px) {
    #featured-pricings .pricing-subtitle {
        font-size: 28px;
    }

    #featured-pricings .title-section h1 {
        font-size: 15px;
        padding: 10px 18px;
    }

    #featured-pricings .pricing-header {
        padding: 40px 25px 30px;
    }

    #featured-pricings .pricing-body {
        padding: 35px 25px;
    }

    #featured-pricings .plan-title {
        font-size: 20px !important;
    }

    #featured-pricings .plan-price .amount {
        font-size: 42px;
    }

    #featured-pricings .plan-btn {
        padding: 14px;
        font-size: 14px;
    }
}

@media (max-width: 575px) {
    #featured-pricings {
        padding-bottom: 40px !important;
    }

    #featured-pricings .pricing-subtitle {
        font-size: 22px;
    }

    #featured-pricings .featured-pricings-item {
        max-width: 100%;
    }

    #featured-pricings .pricing-header {
        padding: 30px 20px 25px;
    }

    #featured-pricings .pricing-body {
        padding: 25px 20px;
    }

    #featured-pricings .plan-price .amount {
        font-size: 36px;
    }

    #featured-pricings .plan-features li {
        font-size: 14px;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    #featured-pricings .pricing-column {
        flex-wrap: nowrap;
        justify-content: center;
        gap: 20px;
    }

    #featured-pricings .featured-pricings-item {
        width: 33.33%;
        max-width: none;
    }
}

/* Contact Responsive */
@media (max-width: 1024px) {

    /* Notice the 40px auto at the end of margin to keep space above the form */
    #featured-contact .contact-cards {
        margin: 4rem auto 40px auto !important;
        gap: 20px;
        padding: 0 20px;
    }

    #featured-contact .main-title {
        font-size: 38px;
    }

    #featured-contact .contact-form-box {
        margin: 0 20px;
    }
}

@media (max-width: 768px) {
    #featured-contact {
        padding: 60px 0;
    }

    /* Notice the 40px auto at the end of margin to keep space above the form */
    #featured-contact .contact-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin: 3rem auto 40px auto !important;
        gap: 15px;
        padding: 0 20px;
    }

    #featured-contact .contact-form-box {
        padding: 40px 25px;
        margin: 0 20px;
    }

    #featured-contact .main-title {
        font-size: 32px;
    }
}

@media (max-width: 575px) {

    /* Ensure mobile phones also get the bottom spacing */
    #featured-contact .contact-cards {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        margin: 2rem auto 40px auto !important;
        padding: 0 15px;
    }

    #featured-contact .main-title {
        font-size: 28px !important;
        line-height: 1.2;
    }

    #featured-contact .contact-form-box {
        padding: 25px 15px !important;
        margin: 0 15px;
    }

    #featured-contact .contact-form-box .send-btn,
    #featured-contact .contact-form-box input[type="submit"] {
        width: 100%;
        justify-content: center;
    }

    #featured-contact .contact-form-box input,
    #featured-contact .contact-form-box textarea {
        padding: 15px;
        margin-bottom: 15px;
    }
}

@media (max-width: 380px) {
    #featured-contact .contact-badge {
        font-size: 13px;
        padding: 8px 12px;
    }

    #featured-contact .main-title {
        font-size: 24px;
    }
}

/* --------------------------Testimonials -------------------- */
#featured-testimonials {
    background: #eef3f9;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    padding: 46px 0 0;
    overflow: hidden;
    text-align: center;
}

#featured-testimonials {
    position: relative;
    z-index: 1;
    overflow: hidden;
    /* Prevents the image from leaking out */
    background: transparent !important;
    /* Ensure the section itself isn't blocking the view */
}

#featured-testimonials .featured-testimonials-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* Ensure the img tag inside the wrapper fills the space */
#featured-testimonials .featured-testimonials-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* This makes it act like a background-image */
    display: block;
}

/* HEADER */
#featured-testimonials .testimonials-badge {
    background: #dbe9f3;
    padding: 10px 22px;
    border-radius: 40px;
    color: #0891b2;
    font-size: 15px;
    font-weight: 500;
    display: inline-block;
    margin-bottom: 18px;
}

#featured-testimonials .testimonials-title {
    font-size: 48px;
    font-weight: 700;
    color: #1e3a8a;
}

#featured-testimonials .testimonials-subtitle {
    margin-bottom: 70px;
    color: #4a5565;
    font-size: 16px;
    margin: auto;
    padding: 17px 0 0;
}

/* GREY BAND */
#featured-testimonials .testimonials-band {
    background: #e3e8ef;
    /* padding:80px 60px;*/
    margin-top: 7rem;
    overflow: hidden;
}

/* SLIDER */
#featured-testimonials .testimonials-wrapper {
    display: flex;
    flex-wrap: nowrap;
    /* VERY IMPORTANT */
    overflow: hidden;
    scroll-behavior: auto;
    /* IMPORTANT */
    background-color: #f1f7f7;
}

#featured-testimonials .testimonial-card {
    flex: 0 0 auto;
    /* VERY IMPORTANT */
    margin-right: 26px;
    /* Use margin instead of gap */
}


/* CARD */
#featured-testimonials .testimonial-card {
    background: #ffffff;
    border-radius: 43px;
    padding: 30px 45px 30px;
    width: 420px;
    max-width: 420px;

    position: relative;
    transition: .4s;
    height: 416px;
    /* max-height: 514px;*/
}


#featured-testimonials .testimonial-card:hover {
    /* transform: translateY(-8px);*/
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}


#featured-testimonials .testimonial-quote-icon {
    width: 60px;
    height: 60px;
    background: var(--theme-color);
    border-radius: 50%;
    position: absolute;
    top: 35px;
    left: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#featured-testimonials .testimonial-quote-icon {
    font-size: 35px;
    color: #000;
}

#featured-testimonials .testimonial-content {
    margin-top: 88px;
    font-size: 18px;
    margin-bottom: 24px;
    text-align: left;
    font-weight: 300;
}

#featured-testimonials .testimonial-client {
    display: flex;
    gap: 15px;
    border-top: 1px solid #d7dce3;
    padding-top: 33px;
}

#featured-testimonials .client-image img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 4px solid #0ea5b9;
}

/* DOTS OUTSIDE */
#featured-testimonials .testimonial-dots {
    padding: 40px 0 80px;
}

#featured-testimonials .testimonial-dots .dot {
    width: 9px;
    height: 9px;
    background: #cbd5e1;
    border-radius: 50%;
    display: inline-block;
    margin: 0 6px;
}

#featured-testimonials .testimonial-dots .dot.active {
    width: 30px;
    border-radius: 20px;
    background: #0ea5b9;
}

#featured-testimonials .client-info h4 {
    margin: 0;
    font-size: 18px;
    color: #1e3a8a;
    font-weight: 700;
    text-align: left;
}

#featured-testimonials .client-info .designation {
    display: block;
    font-size: 14px;
    color: #6b7280;
    text-align: left;
}

#featured-testimonials .client-info .location {
    display: block;
    font-size: 12px;
    color: #4a5565;
    text-align: left;
}

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

/* -------- Large Screens (1400px+) -------- */
@media (min-width: 1400px) {
    #featured-testimonials .testimonial-card {
        width: 28%;
    }
}


/* -------- Laptop (1200px - 1399px) -------- */
@media (max-width: 1399px) {
    #featured-testimonials .testimonial-card {
        width: 32%;
        padding: 30px 35px;
    }

    #featured-testimonials .testimonials-title {
        font-size: 42px;
    }
}


/* -------- Small Laptop (992px - 1199px) -------- */
@media (max-width: 1199px) {

    #featured-testimonials {
        padding: 90px 0 0;
    }

    #featured-testimonials .testimonial-card {
        width: 45%;
        height: auto;
        /* important */
    }

    #featured-testimonials .testimonials-title {
        font-size: 36px;
    }

    #featured-testimonials .testimonial-content {
        font-size: 16px;
    }
}


/* -------- Tablet (768px - 991px) -------- */
@media (max-width: 991px) {

    #featured-testimonials .testimonials-band {
        margin-top: 4rem;
        padding: 5px 0px;
    }

    #featured-testimonials .testimonial-card {
        width: 53%;
        margin-right: 25px;
        padding: 30px;
        border-radius: 30px;
    }

    #featured-testimonials .testimonials-title {
        font-size: 30px;
    }

    #featured-testimonials .testimonials-subtitle {
        margin-bottom: 40px;
    }

    #featured-testimonials .testimonial-quote-icon {
        width: 50px;
        height: 50px;
        top: 25px;
        left: 30px;
    }

    #featured-testimonials .testimonial-quote-icon {
        font-size: 28px;
    }
}


/* -------- Mobile (576px - 767px) -------- */
@media (max-width: 767px) {

    #featured-testimonials {
        padding: 70px 0 0;
    }

    #featured-testimonials .testimonials-title {
        font-size: 26px;
    }

    #featured-testimonials .testimonial-card {
        width: 90%;
        padding: 25px;
        border-radius: 25px;
    }

    #featured-testimonials .testimonial-content {
        font-size: 15px;
        margin-top: 70px;
    }

    #featured-testimonials .testimonial-client {
        padding-top: 20px;
    }

    #featured-testimonials .client-image img {
        width: 50px;
        height: 50px;
    }
}


/* -------- Small Mobile (Below 480px) -------- */
@media (max-width: 480px) {

    #featured-testimonials .testimonials-title {
        font-size: 22px !important;
        line-height: 1.3;
    }

    #featured-testimonials .testimonials-badge {
        font-size: 13px;
        padding: 8px 16px;
    }

    #featured-testimonials .testimonial-card {
        width: 95%;
        padding: 20px;
    }

    #featured-testimonials .testimonial-content {
        font-size: 14px;
    }

    #featured-testimonials .client-info h4 {
        font-size: 16px;
    }

    #featured-testimonials .client-info .designation,
    #featured-testimonials .client-info .location {
        font-size: 13px;
    }

    #featured-testimonials .testimonial-dots {
        padding: 30px 0 60px;
    }
}

/* ==========================================
    FEATURED COUNTER SECTION
========================================== */

#featured-counter {
    background: linear-gradient(90deg, #2d3f95 0%, #1f8aa5 100%);
    padding: 80px 20px !important;
    /* Added side padding for mobile */
    text-align: center;
    overflow: hidden;
}

/* Ensure the parent section holds the absolute background */
#featured-counter {
    position: relative;
    z-index: 1;
}

/* Stretch the background div to cover the whole section */
#featured-counter .featured-counter-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /* Puts it behind your content */
}

/* HEADER */
#featured-counter .stats-header {
    margin-bottom: 60px;
}

#featured-counter .stats-header h2 {
    color: #ffffff;
    font-size: clamp(28px, 5vw, 42px);
    /* Responsive font size */
    font-weight: 700;
    margin: 0;
}

/* WRAPPER - The "Engine" of the layout */
#featured-counter .stats-wrapper {
    margin: 0 auto;
    display: grid;
    /* Default: 4 columns for desktop */
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    /* Reduced default gap to prevent overflow */
    max-width: 1499px;
}

/* CARD */
#featured-counter .stat-card {
    width: 100%;
}

/* ICON BASE */
#featured-counter .stat-icon {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    /* transition: transform 0.3s ease;*/
}

#featured-counter .stat-card:hover .stat-icon {
    /* transform: translateY(-5px);*/
}

/* ALTERNATING ICON COLORS */
#featured-counter .stat-card:nth-child(odd) .stat-icon {
    background: linear-gradient(135deg, #f9c52d 0%, #f4b400 100%);
}

#featured-counter .stat-card:nth-child(even) .stat-icon {
    background: linear-gradient(135deg, #1bb1c7 0%, #169bb2 100%);
}

#featured-counter .stat-icon i,
#featured-counter .stat-icon svg {
    font-size: 42px;
    color: #ffffff;
}

/* NUMBER */
#featured-counter .stat-number {
    font-size: clamp(32px, 8vw, 60px);
    /* Fluid typography */
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

/* LABEL */
#featured-counter .stat-label {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 400;
}

/* ==========================================
    RESPONSIVE DESIGN (MEDIA QUERIES)
========================================== */

/* ===== Desktop / Large Screens (Up to 1200px) ===== */
@media (max-width: 1200px) {
    #featured-counter .stats-wrapper {
        gap: 30px;
        max-width: 100%;
    }
}

/* ===== Tablets (991px to 768px) ===== */
@media (max-width: 991px) {
    #featured-counter {
        padding: 60px 20px !important;
    }

    #featured-counter .stats-wrapper {
        /* Switch to 2 columns on tablets */
        grid-template-columns: repeat(4, 1fr);
        gap: 50px 30px;
    }

    #featured-counter .stat-icon {
        width: 85px;
        height: 85px;
    }
}

/* ===== Mobile (767px and below) ===== */
@media (max-width: 767px) {
    #featured-counter .stats-header {
        margin-bottom: 40px;
    }

    #featured-counter .stats-wrapper {
        /* "ALWAYS 2" columns on mobile as requested */
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 15px;
        /* Tighter gap for small screens */
    }

    #featured-counter .stat-icon {
        width: 70px;
        height: 70px;
        margin-bottom: 15px;
    }

    #featured-counter .stat-icon i,
    #featured-counter .stat-icon svg {
        font-size: 28px;
    }

    #featured-counter .stat-label {
        font-size: 14px;
        line-height: 1.3;
    }

    #featured-counter .stat-number {
        font-size: 55px !important;
    }
}

/* ===== Extra Small Mobile (Under 400px) ===== */
@media (max-width: 400px) {
    #featured-counter .stats-wrapper {
        /* Still 2 columns, but reducing text to fit */
        gap: 30px 10px;
    }

    #featured-counter .stat-number {
        font-size: 28px !important;
    }
}

/* ================================
   FEATURED PROJECT GALLERY
=================================*/
#featured-gallery {
    padding-top: 60px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: #ffffff;
    text-align: center;

    max-width: 1483px;
    /* 🔥 IMPORTANT */
    margin: auto;
}

/* Ensure the parent section holds the absolute background */
#featured-gallery {
    position: relative;
    z-index: 1;
    /* Ensure the main section itself doesn't have a solid color blocking the image */
    background-color: transparent !important;
    /* Optional: Keeps the image from spilling outside the section boundaries */
    overflow: hidden;
}

/* Stretch the background div to cover the whole section */
#featured-gallery .featured-gallery-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /* Puts it behind your content */

    /* ADDED: Ensures the background image covers the entire container without stretching weirdly */
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* ADDED: If the WordPress Customizer is outputting an actual <img> tag instead of a CSS background */
#featured-gallery .featured-gallery-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Acts like background-size: cover for image tags */
}

/* ADDED: Ensure your inner content stays above the image */
#featured-gallery .container,
#featured-gallery .inner-content {
    position: relative;
    z-index: 2;
}

/* HEADER */
#featured-gallery .gallery-header {
    /* max-width: 800px;*/
    margin: 0 auto 70px;
}

#featured-gallery .gallery-badge {
    display: inline-block;
    background: #0891b21a;
    color: #0891b2;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;
}

#featured-gallery .gallery-title {
    font-size: 48px;
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: 16px;
}

#featured-gallery .gallery-subtitle {
    font-size: 18px;
    color: #4a5565;
    letter-spacing: 0.4px;
}

#featured-gallery .gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
}


/* CARD */
#featured-gallery .gallery-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
}

#featured-gallery .gallery-img-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}

#featured-gallery .gallery-img-wrapper img {
    width: 100%;
    height: 363px;
    object-fit: cover;
    transition: transform 0.4s ease;
}

#featured-gallery .gallery-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 25px;
    border-radius: 20px;

    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.65) 0%,
            rgba(0, 0, 0, 0.4) 30%,
            rgba(0, 0, 0, 0.15) 55%,
            rgba(0, 0, 0, 0) 75%);

    color: #fff;
    font-size: 20px;
    font-weight: 700;

    opacity: 0;
    transition: opacity 0.4s ease;

    pointer-events: none;
    /* 🔥 IMPORTANT */
}

#featured-gallery .gallery-card:hover img {
    transform: scale(1.05);
}

#featured-gallery .gallery-card:hover .gallery-overlay {
    opacity: 1;
}

/* ================================
   PREMIUM FULL IMAGE MODAL
=================================*/
#featured-gallery .gallery-modal {
    display: none;
    /* must be none */
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 9999;

    align-items: center;
    justify-content: center;
    padding: 40px;
}

#featured-gallery .gallery-modal .gallery-modal-img {
    width: 100%;
    max-width: 945px !important;
    height: 605px;
    margin-top: 2rem;
    object-fit: inherit;
    /* fills the box */
    border-radius: 30px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    top: 2rem;
}

#featured-gallery .gallery-close {
    position: absolute;
    top: 43px;
    right: 40px;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    color: #fff;
    font-size: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: 0.3s ease;

    line-height: 1;
    /* 🔥 important */
    padding: 0;
}

#featured-gallery .gallery-close:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Smooth zoom animation */
@keyframes zoomSmooth {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

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

/* -------- Large Laptop (1200px) -------- */
@media (max-width: 1200px) {

    #featured-gallery {
        padding: 80px 25px;
    }

    #featured-gallery .gallery-title {
        font-size: 36px;
    }

    #featured-gallery .gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    #featured-gallery .gallery-img-wrapper img {
        height: 300px;
    }
}


/* -------- Tablet (992px) -------- */
@media (max-width: 992px) {

    #featured-gallery {
        padding: 70px 20px;
    }

    #featured-gallery .gallery-title {
        font-size: 30px;
    }

    #featured-gallery .gallery-subtitle {
        font-size: 16px;
    }

    #featured-gallery .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    #featured-gallery .gallery-img-wrapper img {
        height: 260px;
    }

    #featured-gallery .gallery-overlay {
        font-size: 18px;
        padding: 18px;
        opacity: 1;
    }
}


/* -------- Mobile Large (768px) -------- */
@media (max-width: 768px) {

    #featured-gallery {
        padding: 60px 5px;
    }

    #featured-gallery .gallery-title {
        font-size: 26px;
    }

    #featured-gallery .gallery-header {
        margin-bottom: 40px;
    }

    #featured-gallery .gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    #featured-gallery .gallery-img-wrapper img {
        height: 240px;
    }

    #featured-gallery .gallery-overlay {
        font-size: 16px;
    }

    /* Modal Fix */
    #featured-gallery .gallery-modal {
        padding: 20px;
    }

    #featured-gallery .gallery-modal .gallery-modal-img {
        height: auto;
        max-width: 95%;
    }

    #featured-gallery .gallery-close {
        top: 20px;
        right: 20px;
    }
}


/* -------- Small Mobile (480px) -------- */
@media (max-width: 480px) {

    #featured-gallery .gallery-badge {
        font-size: 12px;
        padding: 6px 16px;
    }

    #featured-gallery .gallery-title {
        font-size: 22px;
    }

    #featured-gallery .gallery-subtitle {
        font-size: 14px;
    }

    #featured-gallery .gallery-img-wrapper img {
        height: 200px;
    }

    #featured-gallery .gallery-overlay {
        font-size: 14px;
        padding: 14px;
    }

    #featured-gallery .gallery-close {
        width: 36px;
        height: 36px;
        font-size: 24px;
    }
}


/* -------- Ultra Small (350px) -------- */
@media (max-width: 350px) {

    #featured-gallery {
        padding: 50px 10px;
    }

    #featured-gallery .gallery-title {
        font-size: 20px;
    }

    #featured-gallery .gallery-img-wrapper img {
        height: 170px;
    }
}

/* ======================================
   SHOW TEXT ON SMALL SCREENS (NO HOVER)
======================================*/

@media (max-width: 768px) {

    #featured-gallery .gallery-overlay {
        opacity: 1 !important;
        background: linear-gradient(to top,
                rgba(0, 0, 0, 0.7) 0%,
                rgba(0, 0, 0, 0.5) 40%,
                rgba(0, 0, 0, 0.2) 70%,
                rgba(0, 0, 0, 0) 100%);
    }

    /* Disable zoom effect on mobile */
    #featured-gallery .gallery-card:hover img {
        transform: none;
    }
}





/* =====================================
   PRICING SECTION HEADER
===================================== */

#featured-pricings {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    text-align: center;
    padding-bottom: 90px !important;
}

.wow {
    visibility: visible !important;
}

#featured-pricings .title-section {
    /*max-width: 820px;*/
    margin: 0 auto 80px;
    padding: 0 20px;
    display: block;
}

/* ================= BADGE (Optional) ================= */

#featured-pricings .pricing-badge {
    display: inline-block;
    background: #0891b21a;
    color: #0891b2;
    padding: 8px 22px;
    border-radius: 30px;
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 20px;
}

/* ================= MAIN HEADING ================= */

#featured-pricings .title-section h1 {
    display: inline-block;
    background: #0891b21a;
    color: #0891b2;
    padding: 12px 16px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

/* ================= SUBTITLE ================= */

#featured-pricings .pricing-subtitle {
    font-size: 48px;
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: 16px;
}

/* ================= DESCRIPTION ================= */

#featured-pricings .section-top-des {
    font-size: 16px !important;

    color: #6b7280;
}

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

@media (max-width: 768px) {

    #featured-pricings .title-section h1 {
        font-size: 34px;
    }

    #featured-pricings .pricing-subtitle {
        font-size: 16px;
    }

    #featured-pricings .section-top-des {
        font-size: 14px;
    }

}

/* ==================================================
   FEATURED PRICING SECTION
================================================== */

#featured-pricings .pricing-column {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 35px;
    flex-wrap: wrap;
}

/* ================= CARD ================= */

#featured-pricings .featured-pricings-item {
    width: 400px !important;
    position: relative;
    display: flex;
}

#featured-pricings .pricing-box {
    border-radius: 45px;
    overflow: hidden;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    width: 100%;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
    transition: 0.4s ease;
}

/* ================= MIDDLE CARD ================= */

#featured-pricings .featured-pricings-item.card-2 {
    transform: translateY(-5px);
    /* This pulls the card UP by 35 pixels */
    z-index: 5;
    /* This ensures it sits on top of any overlapping shadows */
}

#featured-pricings .featured-pricings-item.card-2 .pricing-box {
    box-shadow: 0 45px 90px rgba(36, 76, 48, 0.22);
}

/* ================= BADGE ================= */

#featured-pricings .popular-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #ffb400;
    color: #000;
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
}

/* ================= HEADER ================= */

#featured-pricings .pricing-header {
    padding: 60px 35px 45px;
}

/* Top background with linear gradient */
#featured-pricings .card-1 .pricing-header {
    background: linear-gradient(135deg, #fbf9fa 0%, #f6f3f4 100%);
}

#featured-pricings .card-2 .pricing-header {
    background: linear-gradient(135deg, #1e3a8a 0%, #0891b2 100%);
    color: #ffffff;
}

#featured-pricings .card-3 .pricing-header {
    background: linear-gradient(135deg, #fef2f2 0%, #ffedd4 100%);
}

/* ================= ICON (TOP ICON) ================= */
#featured-pricings .pricing-icon {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    display: flex;
    color: #ffffff;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}

/* Make all icons white */
#featured-pricings .pricing-icon svg {
    width: 30px;
    height: 30px;
    fill: #ffffff;
}

/* Card 1 gradient */
#featured-pricings .card-1 .pricing-icon {
    background: linear-gradient(135deg, #6a7282 0%, #99a1af 100%);
}

/* Card 2 gradient */
#featured-pricings .card-2 .pricing-icon {
    background: linear-gradient(135deg, var(--theme-color) 0%, #f59e0b 100%);
}

/* Card 3 gradient */
#featured-pricings .card-3 .pricing-icon {
    background: linear-gradient(135deg, #fb2c36 0%, #ff6900 100%);
}

/* ================= TEXT ================= */

#featured-pricings .plan-title {
    font-size: 24px !important;
    text-align: left;
    font-weight: 700;
    margin-bottom: 8px;
}

/* Title Colors */
#featured-pricings .card-1 .plan-title,
#featured-pricings .card-3 .plan-title {
    color: #1e3a8a;
}

#featured-pricings .card-2 .plan-title {
    color: #ffffff;
}

#featured-pricings .plan-desc {
    font-size: 14px;
    text-align: left;
    color: #4a5565;
    line-height: 1.6;
    margin-bottom: 18px;
}

#featured-pricings .card-2 .plan-desc {
    color: #e0e7ff;
}

#featured-pricings .plan-price {
    text-align: left;
}

#featured-pricings .plan-price .amount {
    font-size: 60px;
    font-weight: 700;
}

/* Amount colors */
#featured-pricings .card-1 .amount,
#featured-pricings .card-3 .amount {
    color: #1e3a8a;
}

#featured-pricings .card-2 .amount {
    color: #ffffff;
}

#featured-pricings .plan-price .duration {
    font-size: 18px;
    margin-left: 5px;
    color: #6a7282;
}

#featured-pricings .card-2 .duration {
    color: #e0e7ff;
}

/* ================= BODY ================= */

#featured-pricings .pricing-body {
    padding: 45px 35px;
    background: #ffffff;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ================= FEATURES ================= */
#featured-pricings .plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 25px;
}

#featured-pricings .plan-features li {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
    font-size: 15px;
}

/* ================= TEXT COLORS ================= */

/* Card 1 & 3 text */
#featured-pricings .card-1 .plan-features li,
#featured-pricings .card-3 .plan-features li {
    color: #4a5568;
}

/* Middle card text */
#featured-pricings .card-2 .plan-features li {
    color: #1e293b;
}

/* ================= ICON COLORS (SEPARATE) ================= */

#featured-pricings .feature-icon {
    width: 15px;
    height: 15px;
    margin-right: 10px;

    /* Prevent inheriting text color */
    color: #ffffff !important;
}

#featured-pricings .card-1 .feature-icon,
#featured-pricings .card-3 .feature-icon {
    padding: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
    fill: #ffffff;
}

#featured-pricings .card-2 .feature-icon {
    padding: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0891b2 0%, #1e3a8a 100%);
    fill: #ffffff;
}

/* ================= BUTTON ================= */
#featured-pricings .plan-btn {
    display: block;
    text-align: center;
    padding: 16px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(.4, 0, .2, 1);
    position: relative;
}


#featured-pricings .plan-btn:hover {
    transform: scale(1.08);
    /* Increases the button size by 8% */

    /* A softer, wider shadow helps sell the effect that it's growing/popping out */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

#featured-pricings .card-1 .plan-btn,
#featured-pricings .card-3 .plan-btn {
    background: var(--theme-color);
    color: #000;
}

#featured-pricings .card-2 .plan-btn {
    background: #244c97;
    color: #ffffff;
}

/* ==================================================
   IMPROVED FULL RESPONSIVE PRICING SECTION
================================================== */

/* Make cards flexible instead of fixed width */
#featured-pricings .featured-pricings-item {
    width: 100%;
    max-width: 380px;
}

/* Large Screens (1400px+) */
@media (min-width: 1400px) {
    #featured-pricings .pricing-column {
        gap: 50px;
    }

    #featured-pricings .featured-pricings-item {
        max-width: 393px;
    }
}

/* Laptops (1200px - 1399px) */
@media (max-width: 1399px) {
    #featured-pricings .featured-pricings-item {
        max-width: 360px;
    }
}

/* Tablets (768px - 991px) */
@media (max-width: 991px) {

    #featured-pricings {
        padding-bottom: 60px !important;
    }

    #featured-pricings .pricing-column {
        justify-content: center;
        gap: 30px;
        padding: 1rem;
    }

    #featured-pricings .featured-pricings-item.card-2 {
        transform: translateY(0);
    }

    #featured-pricings .pricing-subtitle {
        font-size: 36px;
    }

    #featured-pricings .plan-price .amount {
        font-size: 48px;
    }
}

/* Large Mobile (576px - 767px) */
@media (max-width: 767px) {

    #featured-pricings .pricing-subtitle {
        font-size: 28px !important;
    }

    #featured-pricings .title-section h1 {
        font-size: 15px;
        padding: 10px 18px;
    }

    #featured-pricings .pricing-header {
        padding: 40px 25px 30px;
    }

    #featured-pricings .pricing-body {
        padding: 35px 25px;
    }

    #featured-pricings .plan-title {
        font-size: 20px !important;
    }

    #featured-pricings .plan-price .amount {
        font-size: 42px;
    }

    #featured-pricings .plan-btn {
        padding: 14px;
        font-size: 14px;
    }
}

/* Small Mobile (below 576px) */
@media (max-width: 575px) {

    #featured-pricings {
        padding-bottom: 40px !important;
    }

    #featured-pricings .pricing-subtitle {
        font-size: 26px !important;
    }

    #featured-pricings .featured-pricings-item {
        max-width: 100%;
    }

    #featured-pricings .pricing-header {
        padding: 30px 20px 25px;
    }

    #featured-pricings .pricing-body {
        padding: 25px 20px;
    }

    #featured-pricings .plan-price .amount {
        font-size: 36px;
    }

    #featured-pricings .plan-features li {
        font-size: 14px;
    }
}

/* =========================================
   TABLET FIX -> FORCE 2 CARDS PER ROW
============================================ */
@media (min-width: 768px) and (max-width: 1024px) {

    #featured-pricings .pricing-column {
        display: flex !important;
        flex-wrap: wrap !important;
        /* Force wrapping to second row */
        justify-content: center !important;
        gap: 30px 20px !important;
        /* Vertical and Horizontal spacing */
    }

    #featured-pricings .featured-pricings-item {
        /* Force 50% width minus half the gap (20px gap / 2 = 10px) */
        width: calc(50% - 10px) !important;
        max-width: 100% !important;
        /* Remove previous max-width restrictions */
        flex: 0 0 calc(50% - 10px) !important;
    }

    #featured-pricings .featured-pricings-item.card-2 {
        transform: translateY(0) !important;
        /* Ensure middle card doesn't pop up */
    }
}

/* ================= CARD HOVER EFFECTS ================= */

/* Hover effect for the standard cards (Card 1 & 3) */
#featured-pricings .featured-pricings-item:hover .pricing-box {
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
    /* Creates a larger, darker shadow */
    /* Optional: Gives the card a cool "lift" effect when hovered */
}

/* Specific hover effect for the middle card (Card 2) to maintain its depth */
#featured-pricings .featured-pricings-item.card-2:hover .pricing-box {
    box-shadow: 0 55px 100px rgba(36, 76, 48, 0.35);
    /* Enhances its existing green/dark shadow */
}





/* ==========================================
   FEATURED EMERGENCY SECTION
========================================== */

#featured-emergency {
    background: linear-gradient(135deg, #2b3f96 0%, #1f73b7 100%);
    padding: 120px 20px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    text-align: center;
    color: #ffffff;
}

#featured-emergency .container {
    max-width: 1100px;
    margin: 0 auto;
}

/* Badge */
#featured-emergency .emergency-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 30px;
}

/* Title */
#featured-emergency .emergency-title {
    font-size: 58px;
    color: #fff;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 25px;
}

#featured-emergency .highlight-line {
    display: block;
    /* FORCE second line */
    color: var(--theme-color);
    /* exact yellow tone */
    margin-top: 8px;
}

/* Description */
#featured-emergency .emergency-description {
    width: 63%;
    margin: auto;
    font-weight: 300;
    font-size: 20px;

    line-height: 1.8;
    color: #ebe6e7;
    opacity: 0.95;
    letter-spacing: 0.1px;
}

/* Buttons */
#featured-emergency .emergency-buttons {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-bottom: 70px;
    margin-top: 3rem;
    flex-wrap: wrap;
}

/* Call Button (Yellow pill) */
#featured-emergency .btn-call {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--theme-color);
    color: #000;
    padding: 20px 40px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 20px;
    text-decoration: none;
    transition: 0.3s ease;
}

#featured-emergency .btn-call:hover {
    background: #ffc933;
    transform: scale(1.05);
    /* Makes the button 5% larger */
}

/* Schedule Button (Glass style) */
#featured-emergency .btn-schedule {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #ffffff;
    padding: 20px 40px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 20px;
    text-decoration: none;
    transition: 0.3s ease;
}

#featured-emergency .btn-schedule:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
    /* Makes the button 5% larger */
}

/* Stats */
#featured-emergency .emergency-stats {
    display: flex;
    justify-content: center;
    gap: 167px;
    flex-wrap: wrap;
}

#featured-emergency .stat-box h3 {
    font-size: 36px;
    font-weight: 700;
    color: var(--theme-color);
    margin-bottom: 8px;
}

#featured-emergency .stat-box p {
    font-size: 15px;
    opacity: 0.9;
}

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

@media (max-width: 992px) {
    #featured-emergency .emergency-title {
        font-size: 42px;
    }

    #featured-emergency .emergency-stats {
        gap: 60px;
    }
}

@media (max-width: 768px) {
    #featured-emergency .emergency-title {
        font-size: 32px !important;
    }

    #featured-emergency .highlight-line {
        font-size: 32px !important;
    }

    #featured-emergency .emergency-description {
        width: 100%;
    }

    #featured-emergency .emergency-buttons {
        flex-direction: column;
        align-items: center;
    }

    #featured-emergency .emergency-stats {
        flex-direction: row;
        gap: 40px;
    }
}


/* Section Background */
.contact-box {
    width: 350px;


    color: white;
}

/* Headings */
.contact-box h2 {
    font-size: 20px;
    margin-bottom: 20px;
    color: #ffffff;
    font-weight: 600;
}

.newsletter-title {
    margin-top: 35px;
}

/* Contact Rows */
.contact-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 18px;
    font-size: 17px;
}

.contact-row span {
    margin-left: 12px;
    font-weight: 300;
    line-height: 1.5;
}

.contact-row:hover {
    color: var(--theme-color);
}

/* Icons */
.icon {
    font-size: 20px;
}

/* Newsletter Input */
.newsletter {
    display: flex;
    align-items: center;
    margin-top: 15px;
}

.newsletter input {
    flex: 1;
    padding: 8px 16px;
    margin: -12px !important;
    border-radius: 14px;
    width: 100%;
    max-width: 52%;
    border: none;
    outline: none;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    font-size: 15px;
}

.newsletter input::placeholder {
    color: #cfd8e3;
}

.newsletter button {
    margin-left: 22px;
    /* width: 45px; */
    padding: 8px 16px;
    /* height: 45px; */
    border: none;
    border-radius: 34%;
    color: black;
    background: var(--theme-color);
}

.newsletter button:hover {
    transform: scale(1.05);
    color: #f59e0b;
}

/* =====================================================
   ABOUT PAGE GENERAL
===================================================== */


#main #about-section .container {
    max-width: 1499px;
    width: 100%;
    /*margin: 0 auto;
    padding: 80px 2px;*/
}

#main .section-title {
    font-size: 32px;
    font-weight: 700;
    color: #1e3a8a;
    text-align: center;
    margin-bottom: 10px;
}

#main .section-subtitle {
    text-align: center;
    font-size: 20px;
    color: #6b7c93;
    max-width: 683px;
    margin: 0 auto 50px;
}

/* =====================================================
   STORY SECTION
===================================================== */
#main .about-story {
    background: linear-gradient(135deg, #fff 0%, #eff6ff4d 100%);
    padding: 80px 0;
    /* Standardized padding */
}

#main .about-story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 27px;
    /* Increased gap to match the visual breathing room */
    align-items: center;
    max-width: 1499px;
    /* Ensures it doesn't stretch too wide */
    margin: 0 auto;
    padding: 0 0px;
}

#main .story-content h2 {
    font-size: 32px;
    /* Slightly larger to match the bold header */
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: 30px;
    line-height: 1.2;
}

#main .story-text p {
    margin-bottom: 24px;
    font-size: 18px;
    /* Adjusted for better readability */
    color: #4b5563;
    /* Refined gray tone */
    font-weight: 400;
    /* Normal weight for better legibility than 300 */
    line-height: 1.7;
    width: 100%;
    max-width: 97%;
    /* Text spans the full column width in the image */
}

/* 1. The Container: This stays the same size and clips the image */
#main .story-image {
    width: 100%;
    height: auto;
    border-radius: 46px;
    /* Keep the curves here */
    overflow: hidden;
    /* This is the "window" that clips the zoom */
    background-color: #f8fafc;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.10);
    transition: box-shadow 0.5s ease;
}

/* 2. The Image: This is what actually grows */
#main .story-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.5s ease;
    /* Smooth zoom timing */
}

/* 3. Hover Effects */
#main .story-image:hover {
    /* Lift the shadow of the container */
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.15);
}

#main .story-image:hover img {
    /* Zoom the image content only */
    transform: scale(1.1);
}

/* =====================================================
   CORE VALUES SECTION
===================================================== */

#main .core-values-section {
    background: linear-gradient(135deg,
            #ecfeff 0%,
            #eff6ff 100%);
    padding: 80px 0;

}


#main .core-values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

#main .value-card {
    background: #ffffff;
    padding: 35px 30px;
    border-radius: 45px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);

    text-align: left;
}

#main .value-card:hover {

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.09);
}

#main .value-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg,
            #1e3a8a 0%,
            #0891b2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

#main .value-icon svg {
    font-size: 30px;
    color: #fff;
}

#main .value-card h3 {
    font-size: 24px;
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: 10px;
}

#main .value-card p {
    font-size: 16px;
    color: #6b7c93;
    line-height: 1.6;
}

/* =====================================================
   JOURNEY SECTION
===================================================== */

#main .journey-section {
    padding: 100px 0 0 !important;
    background: linear-gradient(135deg,
            #eff6ff4d 50%,
            #fff 100%);
}

#main .timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

/* Timeline Item Layout */
#main .timeline-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-bottom: 60px;
}

/* Left Side (Circle + Line Container) */
#main .timeline-year {
    position: relative;
    width: 60px;
    height: 60px;
    min-width: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1e3a8a 0%, #0891b2 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

/* Vertical connector line */
#main .timeline-item:not(:last-child) .timeline-year::after {
    content: "";
    position: absolute;
    top: 122%;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 42px;

    background: linear-gradient(to bottom,
            #0891b2 0%,
            rgba(8, 145, 178, 0.6) 40%,
            rgba(8, 145, 178, 0.25) 75%,
            rgba(8, 145, 178, 0) 100%);
}

/* Right Side Content Card */
#main .timeline-content {
    margin-left: 40px;
    background: #ffffff;
    padding: 26px 33px;
    border-radius: 33px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
    flex: 1;
}

/* Title */
#main .timeline-content h4 {
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
}

/* Text */
#main .timeline-content p {
    font-size: 16px;
    color: #6b7c93;
    line-height: 1.6;
}

/* =====================================================
   CTA SECTION
===================================================== */

#main .about-cta {
    background: linear-gradient(90deg, #1e3a8a, #0891b2);
    border-radius: 57px;

    min-height: 300px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    /* vertical center */
    align-items: center;
    /* horizontal center */

    text-align: center;
    margin: 0 auto 5rem auto;
    max-width: 98%;
    width: 100%;
    color: #fff;
}

#main .about-cta h2 {
    font-size: 32px;
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 16px;
}

#main .about-cta p {
    font-size: 20px;
    color: #dbeafe;
    font-weight: 300;
    width: 100%;
    max-width: 42%;
    margin: 0 auto 42px auto;
    text-align: center;
}

#main .cta-btn {
    background: var(--theme-color);
    color: #000;
    padding: 16px 32px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    /* Essential for transform to work correctly */
    transition: 0.3s ease;
}

#main .cta-btn:hover {
    background: #ffcc00;
    /* This makes the button 10% larger */
    transform: scale(1.1);
    /* Optional: adds a slight lift effect */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

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

/* ==========================
   Large Screens (1200px ↓)
========================== */
@media (max-width: 1200px) {

    #main .about-story-grid {
        gap: 40px;
    }

    #main .timeline {
        max-width: 95%;
    }

    #main .about-cta p {
        max-width: 60%;
    }
}


/* ==========================
   Tablets (992px ↓)
========================== */
@media (max-width: 992px) {

    #main #about-section .container {
        padding: 60px 20px;
    }

    /* Story section stacked */
    #main .about-story-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #main .story-image img {
        height: auto;
        border-radius: 30px;
    }

    #main .story-content h2 {
        font-size: 28px;
    }

    #main .section-title {
        font-size: 28px;
    }

    #main .section-subtitle {
        font-size: 18px;
    }



    /* CTA */
    #main .about-cta {
        border-radius: 35px;
        padding: 60px 30px;
    }

    #main .about-cta p {
        max-width: 80%;
    }
}


/* ==========================
   Mobile Devices (768px ↓)
========================== */
@media (max-width: 768px) {

    #main #about-section .container {
        padding: 50px 15px;
    }

    #main .section-title {
        font-size: 24px;
    }

    #main .section-subtitle {
        font-size: 16px;
        /* margin-bottom: 40px; */
        margin: 0 8px 40px;
    }

    #main .story-content h2 {
        font-size: 24px;
    }

    #main .story-text p {
        font-size: 16px;
    }

    #main .core-values-grid {
        /* grid-template-columns: 1fr;*/
        gap: 20px;
    }

    #main .value-card {
        border-radius: 30px;
        padding: 25px 20px;
    }

    #main .value-card h3 {
        font-size: 20px;
    }


    #main .about-cta {
        min-height: auto;
        padding: 50px 20px;
        border-radius: 25px;
    }

    #main .about-cta h2 {
        font-size: 24px;
    }

    #main .about-cta p {
        font-size: 16px;
        max-width: 100%;
        margin-bottom: 30px;
    }

    #main .cta-btn {
        padding: 14px 24px;
        font-size: 14px;
    }
}


/* ==========================
   Small Phones (480px ↓)
========================== */
@media (max-width: 480px) {

    #main .section-title {
        font-size: 22px;
    }

    #main .story-content h2 {
        font-size: 22px;
    }

    #main .story-text p {
        font-size: 15px;
    }

    #main .value-card {
        padding: 20px 15px;
    }

    #main .about-cta h2 {
        font-size: 20px;
    }

    #main .about-cta p {
        font-size: 14px;
    }

    #main .cta-btn {
        width: 100%;
        text-align: center;
    }
}


/* =====================================================
   SINGLE SERVICE PAGE
===================================================== */
/* ==========================================================================
   SINGLE SERVICE PAGE STYLES (Matches Image Design)
   ========================================================================== */

/* --- Global Wrapper --- */
#single-service-wrapper {
    background-color: #F8FAFC;
    /* Light gray page background */
    padding: 60px 10px;
    margin: 5rem auto 0;

}

/* ================= HERO CARD ================= */

/* Change the '450px' below to adjust the height of the first card */
#single-service-wrapper .service-hero-card {
    display: flex;
    background: #FFFFFF;
    border-radius: 50px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.15);
    margin-bottom: 40px;
    overflow: hidden;
    height: 530px !important;
    /* <--- CHANGE THIS NUMBER TO ADJUST HEIGHT */
}

/* Forces both left and right sides to stretch to the new height */
#single-service-wrapper .service-hero-left,
#single-service-wrapper .service-hero-right {
    height: 530px !important;
    /* <--- KEEP THIS THE SAME AS THE NUMBER ABOVE */
}

#single-service-wrapper .service-hero-left {
    flex: 1.1;
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#single-service-wrapper .service-title-area {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

#single-service-wrapper .service-icon {
    width: 64px;
    height: 64px;
    background-color: #165A98;
    /* Main dark blue */
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 29px;
}

#single-service-wrapper .service-title {
    font-size: 40px;
    font-weight: 700;
    color: #1e3a8a;
    /* Main dark blue */
    margin: 0;
}

#single-service-wrapper .service-desc {
    color: #4a5565;
    /* Muted gray for body text */
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 30px;
}

#single-service-wrapper .service-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

#single-service-wrapper .service-call-btn,
#single-service-wrapper .service-quote-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Call Button - Gradient Base */
#single-service-wrapper .service-call-btn {
    background: linear-gradient(135deg, #1e3a8a 0%, #0891b2 100%);
    color: #ffffff;
}

/* Call Button - Gradient Hover */
#single-service-wrapper .service-call-btn:hover {
    background: linear-gradient(135deg, #1e3a8a 0%, #0891b2 100%);
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(22, 90, 152, 0.4);
}

/* Quote Button - Gradient Base */
#single-service-wrapper .service-quote-btn {
    background-color: var(--theme-color);
    color: #111111;
}

/* Quote Button - Gradient Hover */
#single-service-wrapper .service-quote-btn:hover {
    background-color: var(--theme-color);
    color: #111111;
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(249, 182, 33, 0.45);
}

#single-service-wrapper .service-hero-right {
    flex: 1.3;
}

#single-service-wrapper .service-hero-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ================= MAIN LAYOUT (CONTENT + SIDEBAR) ================= */
#single-service-wrapper .service-main-layout {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

#single-service-wrapper .service-left-col {
    flex: 2;
    /* Takes up roughly 66% width */
}

/* --- Content Area --- */
#single-service-wrapper .service-content-area {
    background: #FFFFFF;
    /* White cards */
    border-radius: 41px;
    /* Large rounded corners */
    padding: 32px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.04);
    /* Soft drop shadow */
}

#single-service-wrapper .service-content-area h2 {
    color: #1e3a8a;
    /* Main dark blue */
    font-size: 32px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 20px;
}

#single-service-wrapper .service-content-area h3 {
    color: #1e3a8a;
    font-size: 20px;
    font-weight: 700;
    /* margin-top: 30px; */
    margin-bottom: 38px;
}

/* Light blue intro box (Applies to first standard paragraphs in the editor) */
#single-service-wrapper .service-content-area p {
    color: #5A6A7D;
    /* Muted gray for body text */
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 16px;
    background: linear-gradient(to right, #ecfeff, #eff6ff);
}

#single-service-wrapper .service-content-area>p:first-of-type,
#single-service-wrapper .service-content-area>p:nth-of-type(2) {

    padding: 15px 25px;
    margin-bottom: 0;
}

#single-service-wrapper .service-content-area>p:first-of-type {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

#single-service-wrapper .service-content-area>p:nth-of-type(2) {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    margin-bottom: 30px;
}

/* WP Editor Two-Column Bullet List with Green Checkmarks */
#single-service-wrapper .service-content-area ul {
    list-style: none;
    padding: 0;
    margin: 0 0 35px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px 30px;
}

#single-service-wrapper .service-content-area ul li {
    position: relative;
    padding-left: 30px;
    font-size: 16px;
    color: #5A6A7D;
    /* Muted gray for body text */
    line-height: 1.5;
}

#single-service-wrapper .service-content-area ul li::before {
    content: '\2713';
    /* Unicode Checkmark */
    position: absolute;
    left: 0;
    top: 2px;
    color: #2ECA7F;
    /* Green check */
    border: 1px solid #2ECA7F;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
}


/* --- Why Choose Us Grid --- */
#single-service-wrapper .why-choose-wrapper {
    margin-top: 35px;
    padding-top: 35px;
    border-top: 1px solid #EAEEEF;
    /* Subtle border lines */
}

#single-service-wrapper .why-choose-main-heading {
    color: #165A98;
    /* Main dark blue */
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 30px;
}

#single-service-wrapper .why-choose-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

#single-service-wrapper .why-choose-item {
    text-align: center;
}

#single-service-wrapper .why-choose-icon-box {
    width: 48px;
    height: 48px;
    background-color: #165A98;
    /* Main dark blue */
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin: 0 auto 15px auto;
}

#single-service-wrapper .why-choose-item-title {
    font-size: 14px;
    font-weight: 700;
    color: #101828;
    margin: 0 0 6px 0;
}

#single-service-wrapper .why-choose-item-desc {
    font-size: 14px !important;
    color: #4a5565;
    /* Muted gray for body text */
    line-height: 1.4;
    margin: 0;
}


/* ================= SIDEBAR ================= */
#single-service-wrapper .service-sidebar {
    flex: 1;
    /* Takes up roughly 33% width */
}

#single-service-wrapper .service-sidebar .widget {
    background: #FFFFFF;
    /* White cards */
    border-radius: 20px;
    /* Large rounded corners */
    padding: 30px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.04);
    /* Soft drop shadow */
    margin-bottom: 30px;
}

#single-service-wrapper .service-sidebar .widget-title {
    color: #1A365D;
    /* Main dark navy blue */
    font-size: 24px !important;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 25px;
}

/* Sidebar Navigation Menu */
#single-service-wrapper .service-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#single-service-wrapper .service-sidebar ul li {
    margin-bottom: 15px;
    /* Spacing between items */
}

/* Base Link Styling */
#single-service-wrapper .service-sidebar ul li a {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-radius: 16px;
    /* Match the rounded gradient box */
    color: #334155;
    /* Dark gray text for unselected items */
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    background: transparent;
    /* Transparent background normally */
    transition: all 0.3s ease;
}

/* 1. Setup the ::before element to act as the circular icon background */
#single-service-wrapper .service-sidebar ul li a::before {
    font-family: "Font Awesome 5 Free";
    /* Use "Font Awesome 6 Free" if your theme is newer */
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    /* Circle width */
    height: 42px;
    /* Circle height */
    border-radius: 35%;
    /* Makes it a perfect circle */
    background-color: #EBF3FA;
    /* Light blue circle background */
    color: #1A4984;
    /* Dark blue icon color */
    font-size: 16px;
    margin-right: 15px;
    transition: all 0.3s ease;
    flex-shrink: 0;
    /* Prevents the circle from squishing */
}

/* =========================================================
   2. LINK BACKGROUND & TEXT (Active vs Hover)
   ========================================================= */

/* A. Active Page */
#single-service-wrapper .service-sidebar ul li.current-menu-item a {
    background: linear-gradient(to right, #1F3B73, #0D82AA) !important;
    color: #ffffff;
}

/* B. Hover (Only for non-active items) */
#single-service-wrapper .service-sidebar ul li:not(.current-menu-item) a:hover {
    background: linear-gradient(to right, #ecfeff, #eff6ff) !important;
    color: #364153;
}

/* =========================================================
   3. ICON CIRCLE & COLOR (Active vs Hover)
   ========================================================= */

/* A. Active Icon */
#single-service-wrapper .service-sidebar ul li.current-menu-item a::before {
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

/* B. Hover Icon (non-active only) */
#single-service-wrapper .service-sidebar ul li:not(.current-menu-item) a:hover::before {
    background-color: #ffffff;
    color: #1e3a8a;
}

/* =========================================================
   Assign specific icons based on the menu order 
   ========================================================= */

/* 1st Item (e.g., Drain Cleaning) -> Water Drop */
#single-service-wrapper .service-sidebar ul li:nth-child(1) a::before {
    content: "\f043";
}

/* 2nd Item (e.g., Pipe Leak Repair) -> Wrench */
#single-service-wrapper .service-sidebar ul li:nth-child(2) a::before {
    content: "\f0ad";
}

/* 3rd Item (e.g., Water Heater Services) -> Flame/Thermometer */
#single-service-wrapper .service-sidebar ul li:nth-child(3) a::before {
    content: "\f06d";
    /* Changed to fire to match your image */
}

/* 4th Item (e.g., Gas Line Services) -> Gauge/Tachometer */
#single-service-wrapper .service-sidebar ul li:nth-child(4) a::before {
    content: "\f3fd";
    /* Match image gauge */
}

/* 5th Item (e.g., Bathroom Plumbing) -> Bathtub */
#single-service-wrapper .service-sidebar ul li:nth-child(5) a::before {
    content: "\f2cd";
}

/* 6th Item (e.g., Emergency Services) -> Lightning Bolt */
#single-service-wrapper .service-sidebar ul li:nth-child(6) a::before {
    content: "\f0e7";
}

/* 7th Item (e.g., Residential Plumbing) -> Home */
#single-service-wrapper .service-sidebar ul li:nth-child(7) a::before {
    content: "\f015";
}

/* 8th Item (e.g., Commercial Plumbing) -> Building */
#single-service-wrapper .service-sidebar ul li:nth-child(8) a::before {
    content: "\f1ad";
}

/* ================= FORM SECTION ================= */
#single-service-wrapper .service-form-section {
    margin-top: 30px;
}

#single-service-wrapper .service-form-box {
    background: #FFFFFF;
    /* White cards */
    border-radius: 41px;
    /* Large rounded corners */
    padding: 32px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.04);
    /* Soft drop shadow */
}

/* =========================================================
   EMERGENCY HELP WIDGET (Sidebar)
   ========================================================= */

/* 1. Override the default WordPress white widget box */
#single-service-wrapper .service-sidebar .widget_custom_html {
    background-color: #F8B01E;
    /* Makes the main widget wrapper yellow */
    border-radius: 41px !important;
    /* Matches your theme's widget corners */
    padding: 40px 30px !important;
    /* Perfect inner spacing */
}

/* 2. Reset the inner div so it doesn't double-up on backgrounds/padding */
#single-service-wrapper .emergency-help-widget {
    background-color: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

/* 3. Title and Text Styling */
#single-service-wrapper .emergency-help-widget .emergency-title {
    color: #1A365D;
    /* Dark navy text */
    font-size: 24px !important;
    font-weight: 700 !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    line-height: 1.3 !important;
}

#single-service-wrapper .emergency-help-widget .emergency-desc {
    color: #2D4356;
    font-size: 15px !important;
    line-height: 1.5 !important;
    margin-bottom: 25px !important;
}

/* 4. The Call Button */
#single-service-wrapper .emergency-help-widget .emergency-call-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #223246;
    /* Dark slate navy button */
    color: #FFFFFF;
    text-decoration: none !important;
    padding: 16px 20px !important;
    border-radius: 50px !important;
    /* Pill shape */
    font-size: 18px !important;
    font-weight: 700 !important;
    gap: 10px;
    transition: all 0.3s ease !important;
}

#single-service-wrapper .emergency-help-widget .emergency-call-btn i {
    margin-right: 12px !important;
    font-size: 18px !important;
}

/* Button Hover */
#single-service-wrapper .emergency-help-widget .emergency-call-btn:hover {
    background-color: #15202D;
    /* Darkens slightly on hover */
    color: #FFFFFF;
    transform: translateY(-2px) !important;
}

/* ================= RESPONSIVE DESIGN (MOBILE & TABLET) ================= */
@media (max-width: 991px) {
    #single-service-wrapper .service-hero-card {
        flex-direction: column-reverse;
        /* Reset min-height for mobile so it fits the content nicely */
        height: 800px !important;
    }

    #single-service-wrapper .service-hero-left {
        min-height: auto !important;
        padding: 40px 30px;
    }

    #single-service-wrapper .service-hero-right {
        /* Set a fixed height for the image on mobile */
        min-height: 250px !important;
    }

    #single-service-wrapper .service-main-layout {
        flex-direction: column;
    }

    #single-service-wrapper .service-left-col,
    .service-sidebar {
        width: 100%;
        flex: none;
    }

    #single-service-wrapper .service-content-area ul {
        grid-template-columns: 1fr;
        /* 1 column lists on mobile */
    }

    #single-service-wrapper .why-choose-grid {
        /* grid-template-columns: 1fr;
        Stack choose us items */
        gap: 30px;
    }

    #single-service-wrapper .why-choose-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
}

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {

    #single-service-wrapper .service-hero-card {
        flex-direction: column-reverse;
        height: auto !important;
    }

    #single-service-wrapper .service-hero-left {
        padding: 20px 15px;
        min-height: auto !important;
    }

    #single-service-wrapper .service-hero-right {
        min-height: 180px !important;
    }

    #single-service-wrapper .service-main-layout {
        flex-direction: column;
    }

    #single-service-wrapper .service-left-col,
    #single-service-wrapper .service-sidebar {
        width: 100%;
        flex: none;
    }

    #single-service-wrapper .service-content-area ul {
        grid-template-columns: 1fr;
        padding-left: 18px;
    }

    #single-service-wrapper .why-choose-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    #single-service-wrapper .service-title {
        font-size: 22px;
        line-height: 30px;
    }

    #single-service-wrapper .service-desc {
        font-size: 14px;
        line-height: 22px;
    }

}

/* ==========================================================================
   REQUEST A QUOTE FORM (CONTACT FORM 7)
   ========================================================================== */

#single-service-wrapper #single-service-wrapper .quote-form-layout {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    width: 100%;
}

/* --- Form Headers --- */
#single-service-wrapper .quote-form-layout .form-title {
    color: #1e3a8a;
    /* Main Dark Blue */
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 8px 0;
}

#single-service-wrapper .quote-form-layout .form-desc {
    color: #6b7280;
    /* Muted Gray Text */
    font-size: 16px;
    margin: 0 0 32px 0;
    line-height: 1.6;
}

/* --- Layout & Grid --- */
#single-service-wrapper .quote-form-layout .input-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

#single-service-wrapper .quote-form-layout .col-half {
    flex: 1;
    margin-bottom: 0;
}

#single-service-wrapper .quote-form-layout .form-group {
    margin-bottom: 20px;
}

/* --- Labels --- */
#single-service-wrapper .quote-form-layout label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    /* Dark Navy */
    /*margin-bottom: 8px;*/
}

/* --- Icons Wrapper --- */
#single-service-wrapper .quote-form-layout .input-icon-wrap {
    position: relative;
    display: block;
}

#single-service-wrapper .quote-form-layout .input-icon-wrap .form-icon {
    position: absolute;
    left: 18px;
    top: 67%;
    transform: translateY(-50%);
    color: #94A3B8;
    /* Light Gray Icon */
    font-size: 16px;
    z-index: 2;
    /* Keeps icon above the input */
}

/* Fix Icon position for the Textarea (Message field) */
#single-service-wrapper .quote-form-layout .message-field .form-icon {
    top: 42px;
    transform: none;
}

/* Contact Form 7 automatically adds a span wrapper, make sure it fills width */
#single-service-wrapper .quote-form-layout .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

/* --- The Inputs Themselves --- */
#single-service-wrapper .quote-form-layout .pill-input {
    width: 100%;
    padding: 12px 16px 12px 48px;
    /* 45px left padding makes room for the icon! */
    border: 1px solid #E2E8F0;
    /* Soft gray border */
    border-radius: 16px;
    /* Rounded corners */
    background-color: #FFFFFF;
    font-size: 14px;
    color: #334155;
    font-family: inherit;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

/* Custom Dropdown Arrow for Select */
#single-service-wrapper .quote-form-layout select.pill-input {
    appearance: none;
    cursor: pointer;
}

#single-service-wrapper .quote-form-layout .service-select-wrap .input-icon-wrap::after {
    content: '\25BC';
    /* CSS Down Arrow */
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #94A3B8;
    pointer-events: none;
    /* Allows clicking the dropdown through the icon */
}

/* Textarea height */
#single-service-wrapper .quote-form-layout textarea.pill-input {
    height: 120px;
    padding-top: 16px;
    resize: vertical;
    /* Allows user to drag it taller, but not wider */
    padding: 12px 16px 12px 48px;
}

/* Input Focus Glow */
#single-service-wrapper .quote-form-layout .pill-input:focus {
    outline: none;
    border-color: #165A98;
    box-shadow: 0 0 0 3px rgba(22, 90, 152, 0.1);
}

/* Placeholder Text Color */
#single-service-wrapper .quote-form-layout .pill-input::placeholder {
    color: #94A3B8;
    opacity: 1;
}

/* --- Submit Button --- */
#single-service-wrapper .quote-form-layout .submit-button-wrap {
    margin-top: 30px;
}

#single-service-wrapper .quote-form-layout .pill-submit-btn {
    width: 100%;
    background-color: #1273A6;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 600;
    padding: 16px;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    /* Added 'transform' to the transition list for a smooth effect */
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

#single-service-wrapper .quote-form-layout .pill-submit-btn:hover {
    background-color: #0F5A82;
    /* This makes the button 5% larger */
    transform: scale(1.05);
    /* Adding a shadow makes it look like it's "popping" out */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
    #single-service-wrapper .quote-form-layout .input-row {
        flex-direction: column;
        /* Stacks Email & Phone on mobile */
        gap: 0;
        margin-bottom: 0;
    }

    #single-service-wrapper .quote-form-layout .col-half {
        margin-bottom: 20px;
    }
}

@media (max-width: 991px) {

    #single-service-wrapper .service-hero-card {
        flex-direction: column-reverse;
        height: auto !important;
    }

    #single-service-wrapper .service-hero-left {
        padding: 40px 25px;
    }

    #single-service-wrapper .service-hero-right {
        min-height: 250px;
    }

    #single-service-wrapper .service-main-layout {
        flex-direction: column;
    }

    #single-service-wrapper .service-left-col,
    #single-service-wrapper .service-sidebar {
        width: 100%;
        flex: none;
    }

    #single-service-wrapper .service-content-area ul {
        grid-template-columns: 1fr;
    }

    /* FIXED GRID */
    #single-service-wrapper .why-choose-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
}

/* =========================================
   STICKY SIDEBAR (DESKTOP ONLY)
========================================= */

@media (min-width: 992px) {

    #single-service-wrapper .service-sidebar {
        position: sticky;
        top: 100px;
        align-self: flex-start;
    }

}

@media (max-width: 768px) {

    #single-service-wrapper .service-title {
        font-size: 26px;
    }

    #single-service-wrapper .service-desc {
        font-size: 15px;
    }

    #single-service-wrapper .service-content-area {
        padding: 20px;
        border-radius: 25px;
    }

    #single-service-wrapper .service-hero-card {
        border-radius: 25px;
    }

}

/* =====================================================
   SIDEBAR
===================================================== */

.service-sidebar {
    flex: 1;
}


/* WIDGET CARD */

.service-sidebar .widget {
    background: #fff;
    padding: 24px;
    border-radius: 41px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    margin-bottom: 25px;
}

.service-sidebar .widget-title {
    font-size: 18px;
    margin-bottom: 18px;
}


/* SERVICE LIST */

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

.service-sidebar ul li {
    margin-bottom: 10px;
}

.service-sidebar ul li a {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-size: 14px;
    color: #374151;
    padding: 16px;
    border-radius: 19px;
    transition: all .2s ease;
}

.service-sidebar ul li a:hover {
    background: #ecfeff;
    color: #364153;

}


/* ACTIVE SERVICE */

.service-sidebar ul li.current_page_item a {
    background: #2563eb;
    color: #364153;
}


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

@media (max-width:1024px) {

    .service-main-layout {
        flex-direction: column;
    }

    .service-sidebar {
        width: 100%;
    }

}


@media (max-width:768px) {

    .service-hero-card {
        flex-direction: column;
    }

    .service-hero-left {
        padding: 30px;
    }

    .service-title {
        font-size: 22px;
    }

    .service-hero-right {
        height: 260px;
    }

}

/* ===============================
   RELATED ARTICLES WIDGET
================================ */

/* widget card */
.widget_recent_entries {

    padding: 24px;
    margin: 0 0 32px;
    border-color: #fff;
    border-radius: 22px;
    box-shadow: 5px 10px 25px rgba(0, 0, 0, 0.08);
}

/* title */
.widget_recent_entries .widget-title {
    font-size: 20px !important;
    font-weight: 600;

    margin-bottom: 25px;
}

/* post row */
.widget_recent_entries .post-content {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 28px;
}

/* remove last margin */
.widget_recent_entries .post-content:last-child {
    margin-bottom: 0;
}

/* image container */
.widget_recent_entries .img-container {
    width: 70px;
    height: 70px;
    min-width: 70px;
    border-radius: 16px;
    background: #e9edf1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* image */
.widget_recent_entries .img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* content link */
.widget_recent_entries .content-container {
    font-size: 14px;
    font-weight: 500;
    color: #364153;
    text-decoration: none;
    line-height: 1.4;
}

/* hover */
.widget_recent_entries .content-container:hover {
    color: #0ea5b7;
}

/* =========================
   CATEGORIES WIDGET
========================= */

.widget_categories {
    background-color: #fff;
    padding: 24px;
    margin-bottom: 27px;
    border-radius: 28px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

/* Title */
.widget_categories .widget-title {
    font-size: 22px;
    font-weight: 600;

    margin-bottom: 25px;
}

/* Remove default list */
.widget_categories ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Category row */
.widget_categories ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e5e7eb;
}

/* Remove last border */
.widget_categories ul li:last-child {
    border-bottom: none;
}

/* Category link */
.widget_categories ul li a {
    text-decoration: none;
    font-size: 18px;
    color: #475569;
    font-weight: 500;
}

/* Hover */
.widget_categories ul li a:hover {
    color: #0ea5b7;
}

/* Count badge */
.widget_categories .count {
    background: #dbeaf3;
    color: #0ea5b7;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    min-width: 40px;
    text-align: center;
}

/* Main Card */

.plumbing-help-card {
    background: linear-gradient(135deg, #1e3a8a, #0891b2) !important;
    padding: 24px;
    border-radius: 40px;
    color: #fff;
    border-color: #000;
    position: relative;
    overflow: hidden;
}

/* Icon */
.help-icon i,
.help-icon svg {
    width: 32px;
    height: 32px;
    font-size: 32px;
    color: var(--theme-color);
    stroke: var(--theme-color);
    margin-bottom: 16px;
    display: inline-block;
}

/* Title */

.plumbing-help-card .help-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #ffffff;
}

/* Text */

.plumbing-help-card .help-text {
    font-size: 16px;
    color: #dbeafe;
    margin-bottom: 30px;
    line-height: 1.6;
}

/* Buttons container */

.plumbing-help-card .help-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Call Button */
.plumbing-help-card .btn-call {
    background: var(--theme-color);
    color: #101828;
    padding: 12px 16px;
    border-radius: 40px;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    display: block;
    transition: all 0.3s ease;
    /* Ensure 'all' is transitioned smoothly */
}

.plumbing-help-card .btn-call:hover {
    background: #f59e0b;
    transform: scale(1.05);
    /* Makes the button 5% larger */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    /* Optional: adds depth when it grows */
}

/* Request Button */
.plumbing-help-card .btn-request {
    background: #fff;
    color: #1e3a8a;
    padding: 12px 16px;
    border-radius: 40px;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    display: block;
    transition: all 0.3s ease;
}

.plumbing-help-card .btn-request:hover {
    background: #f3f4f6;
    /* Changed slightly from d1d5db for a cleaner white-hover look */
    transform: scale(1.05);
    /* Makes the button 5% larger */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

/* =========================
   SEARCH ARTICLES WIDGET
========================= */
/* =========================
   SEARCH WIDGET
========================= */

.widget_search {
    background: #fff;
    margin-bottom: 27px;
    padding: 35px 30px;
    border-radius: 28px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);

}

/* Title */

.widget_search .widget-title {
    font-size: 22px;
    font-weight: 600;

    margin-bottom: 22px;
}

/* Form */

.widget_search .search-form {
    position: relative;
}

/* Input */

.widget_search .search-field {
    width: 125%;

    padding: 14px 18px 14px 50px;
    border-radius: 40px;
    border: 1px solid #d1d5db;
    font-size: 16px;
    outline: none;
    background: #ffffff;
}

/* Search Button */

.widget_search button.search-submit {
    height: 36px;
    line-height: 36px;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    width: 36px;
    padding: 0;
    background: transparent;
    color: #9ca3af;
    font-size: 16px;
    cursor: pointer;
}

.widget_search form.search-form input[type="search"] {
    /* padding: 0 55px 0 25px; */
    height: 50px;
    background-color: #fff;
    color: #000;
    border: 1px solid #ebe6e7 !important;
    border-color: #01549a;
    padding: 6px 5px 6px 45px;
    font-size: 16px;
    letter-spacing: 0.58px;
    line-height: 29px;
    border-radius: 20px;
}

/* --- Main Section Wrapper --- */
#featured-newsletter {
    background-color: var(--theme-color);
    /* Exact yellow from the image */
    border-bottom: 3px solid #334155;
    /* Matches the slight dark border at the bottom of your image */
    font-family: inherit;
}

/* --- The Inner Container --- */
#featured-newsletter .container,
#featured-newsletter .container-fluid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px !important;
    width: 100%;
}

/* --- Left Section (Icon & Text) --- */
#featured-newsletter .emergency-left {
    display: flex;
    align-items: center;
    gap: 18px;
    /* Tighter space between icon and text to match image */
}

/* --- Icon Styling --- */
#featured-newsletter .footer-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

#featured-newsletter .footer-icon svg,
#featured-newsletter .footer-icon i {
    width: 24px;
    height: 24px;
    font-size: 24px;
    color: #0f1626;
    /* Exact dark navy from image */
    fill: transparent;
    stroke: #0f1626;
    stroke-width: 2px;
}

/* --- Text Styling --- */
#featured-newsletter .emergency-text {
    display: flex;
    flex-direction: column;
    align-items: normal;
    gap: 5px;
    /* Creates the exact spacing between heading and paragraph */
}

#featured-newsletter .emergency-text h3 {
    margin: 0;
    color: #0f1626 !important;
    font-size: 18px;
    /* Slightly larger to match image proportion */
    font-weight: 700;
    /* Extra bold */
    line-height: 1;
    letter-spacing: -0.5px;
    /* Pulls letters slightly closer together */
}

#featured-newsletter .emergency-text p {
    margin: 0;
    color: #0f1626 !important;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
}

/* --- Right Section (Button) --- */
#featured-newsletter .emergency-right {
    display: flex;
    align-items: center;
}

#featured-newsletter .emergency-btn {
    display: inline-block;
    background-color: #0f1626 !important;
    /* Exact dark navy */
    color: var(--theme-color) !important;
    /* Exact yellow text */
    text-decoration: none;
    padding: 12px 32px;
    /* Thicker padding to match the pill shape in image */
    border-radius: 50px;
    font-size: 20px;
    font-weight: 700;
    /* Bold text inside button */
    transition: all 0.3s ease-in-out;
    white-space: nowrap;
}

/* Button Hover State */
#featured-newsletter .emergency-btn:hover {
    background-color: #1e293b !important;
    color: #ffffff !important;
}

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {

    #featured-newsletter .container,
    #featured-newsletter .container-fluid {
        flex-direction: column;
        text-align: center;
        gap: 25px;
        padding: 30px 20px;
    }

    #featured-newsletter .emergency-left {
        flex-direction: column;
        gap: 15px;
    }
}

/*Single page project*/


.project-back-link {
    padding-bottom: 1rem;
    color: #002434;
}

/* 1. Global Wrapper */
.single-project-wrapper {
    /* background-color: #fcfcfc; */
    padding: 40px 0;
    margin: 7rem auto 0;
    font-family: 'Inter', 'Segoe UI', sans-serif;
}

.container {
    max-width: 900px;
    /* Narrower width for better readability without a sidebar */
    margin: 0 auto;
    padding: 0 20px;
}

/* 2. Top Featured Image Banner */
.project-featured-banner {
    width: 100%;
    height: 480px;
    /* Height as per original image aspect ratio */
    border-radius: 30px;
    /* Large rounded corners from your reference */
    overflow: hidden;
    margin-bottom: 50px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
}

.project-featured-banner img {
    width: 100%;
    height: 100%;
    object-fit: inherit;
}

/* 3. Main Content Layout (Single Column) */
.project-content {
    width: 100%;
}

/* 4. The Content Groups (The "Cards") */
.project-content .wp-block-group {
    background: #ffffff;
    padding: 32px;
    border-radius: 47px;
    margin-bottom: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    border: 1px solid #f0f0f0;
}

/* Specific styling for the "Solution" Card (Light Blue) */
.wp-block-group.solution-group {
    background-color: #f3faff !important;
    border: 1px solid #e1f0ff;
}

/* 5. Header Elements (Badge & Title) */
.project-badge {
    background: linear-gradient(to right, var(--theme-color), #f59e0b);
    color: #101828;
    padding: 8px 24px;
    border-radius: 50px;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 18px;
}

.project-title {
    color: #1e3a8a;
    /* Deep navy blue */
    font-size: 40px;
    font-weight: 700;
    margin: 0 0 24px 0;
}

/* 6. Typography inside Cards */
.project-content h2 {
    color: #1a3a83;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
}

.project-content p {
    color: #4a5565;
    line-height: 1.8;
    font-size: 16px;
    margin: 0 0 32px 0;
}

/* 7. Checklist Icons (Results Section) */
.project-content ul {
    list-style: none;
    padding-left: 0;
}

.project-content ul li {
    position: relative;
    padding-left: 35px;
    margin-bottom: 16px;
    color: #444;
}

.project-content ul li::before {
    content: '✔';
    position: absolute;
    left: 0;
    color: #4caf50;
    background: #e8f5e9;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
}

/* 1. Target the second Group block specifically for the "Solution" style */
.project-description-body .wp-block-group:nth-of-type(2) {
    background-color: #f3faff !important;
    border: 1px solid #eef7ff;
    border-radius: 51px;
    padding: 32px;
    margin-bottom: 32px;
}

/* 2. Style the header inside that specific blue block */
.project-description-body .wp-block-group:nth-of-type(2) h2 {
    color: #1a3a83;
    /* Deep navy blue */
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
}

/* 3. Style the text inside that specific blue block */
.project-description-body .wp-block-group:nth-of-type(2) p {
    color: #556070;
    /* Muted grey-blue text */
    line-height: 1.8;
    font-size: 16px;
    margin: 0;
}

/* Image container */
.wp-block-gallery .wp-block-image {
    border-radius: 21px;
    overflow: hidden;
}

/* Image */
.wp-block-gallery .wp-block-image img {
    width: 100%;
    max-height: 260px !important;
    object-fit: cover;
    transition: transform 0.4s ease;
    display: block;
    border-radius: 21px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

/* Hover effect */
.wp-block-gallery .wp-block-image:hover img {
    transform: scale(1.05);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2);
}

/* Image container */
.wp-block-gallery .wp-block-image {
    border-radius: 21px;
    overflow: hidden;
}

/*Project sidebar*/
.project-info-card {
    background: #ffffff;
    padding: 32px;
    border-radius: 33px;
    /* Large rounded corners from image */
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.05);
    font-family: 'Inter', 'Segoe UI', sans-serif;

    width: 100%;
    border: 1px solid #f0f3f7;
}

.info-title {
    color: #1a3a83;
    /* Navy blue */
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 20px 0;
    letter-spacing: -0.5px;
}

.info-divider {
    border: 0;
    border-top: 1px solid #edf2f7;
    margin-bottom: 30px;
}

.info-item {
    margin-bottom: 25px;
}

.info-item:last-child {
    margin-bottom: 0;
}

.info-label {
    display: flex;
    align-items: center;
    color: #7c889a;
    /* Muted gray-blue for the label */
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6px;
    gap: 12px;
}

.info-icon {
    color: #11a1d6;
    /* The specific bright blue for icons */
    font-size: 18px;
    width: 20px;
    /* Ensures text aligns perfectly */
    text-align: center;
}

.info-value {
    color: #1a1a1a;
    /* Dark bold text */
    font-size: 17px;
    font-weight: 700;
    padding-left: 32px;
    /* Aligns value text under the label text */
}

/* Optional: Subtle hover effect on the card */
.project-info-card:hover {
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.07);
    transition: box-shadow 0.3s ease;
}

.info-divider {
    border: 0;
    /* Use a very light gray to match the soft look of the image */
    border-top: 1px solid #ebe6e7;
    margin: 0 0 25px 0;
    /* Tightened the top margin to sit right under heading */
    width: 100%;
}

/* Container */
.project-section {
    max-width: 800px;
    margin: 60px auto;
}

.project-box {
    background: linear-gradient(135deg, #2e4f8a, #148a9c);
    padding: 32px;
    border-radius: 60px;
    color: white;
}

/* Heading */
.project-box h2 {
    font-size: 20px;
    margin-bottom: 20px;
    color: #fff;
}

/* Text */
.project-box p {
    font-size: 16px;
    color: #dbe7ff;
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 500px;
}

/* Button */
.quote-btn {
    display: block;
    width: 100%;
    text-align: center;
    background: #f5b81f;
    color: #000;
    font-size: 18px;
    font-weight: 600;
    padding: 18px;
    border-radius: 40px;
    text-decoration: none;
    transition: 0.3s;
}

.quote-btn:hover {
    background: #e3a800;
}




/* =====================================================
   LAYOUT + STICKY SIDEBAR (NO CHANGE TO YOUR DESIGN)
===================================================== */
@media (min-width: 1300px) {

    .single-post-layout {
        display: flex;
        /*gap: 30px;*/
        align-items: flex-start;
    }
}

/* Desktop Layout */
@media (min-width: 992px) {



    #primary {
        width: 70%;
    }

    #secondary {
        width: 30%;
        position: sticky;
        top: 100px;
        /* adjust if header height differs */
        align-self: flex-start;
    }

}

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

@media (max-width: 991px) {

    .single-post-layout {
        display: block;
    }

    #primary,
    #secondary {
        width: 100%;
    }

    #secondary {
        position: static;
        margin-top: 40px;
    }

}

/* =====================================================
   MOBILE RESPONSIVE IMPROVEMENTS
===================================================== */

@media (max-width: 768px) {

    .post-featured-image img {
        height: auto;
    }

    .custom-post-title {
        font-size: 28px;
    }

    .custom-post-meta {
        flex-wrap: wrap;
        gap: 10px;
        font-size: 13px;
    }

}

/* =====================================================
   VERY SMALL DEVICES
===================================================== */

@media (max-width: 480px) {

    .custom-post-title {
        font-size: 24px;
    }

    .entry-content>.wp-block-group:not(.is-nowrap) {
        padding: 20px !important;
    }

}

/* =====================================================
   PROJECT PAGE LAYOUT + STICKY SIDEBAR
   (SAME AS BLOG - NO DESIGN CHANGE)
===================================================== */
/* =====================================================
   PROJECT PAGE LAYOUT + STICKY SIDEBAR (UPDATED)
===================================================== */

/* Desktop Layout */
@media (min-width: 992px) {

    .project-row {
        display: grid;
        /* Changed from flex to grid */
        /* This creates two columns: Content (2 parts) and Sidebar (1 part) */
        /* Change to 1fr 1fr if you want them EXACTLY 50/50 */
        grid-template-columns: 2fr 1fr;
        gap: 40px;
        align-items: flex-start;
    }

    .project-content {
        /* Remove fixed width to let the grid handle it */
        width: 100%;
    }

    .project-sidebar {
        /* Remove fixed width to let the grid handle it */
        width: 100%;
        position: sticky;
        top: 100px;
        align-self: flex-start;
    }

    /* Fix the container to allow the grid to expand */
    .container {
        max-width: 1200px;
        /* Increased from 900px to accommodate a sidebar and content side-by-side */
    }
}

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

@media (max-width: 991px) {

    .project-row {
        display: block;
    }

    .project-content,
    .project-sidebar {
        width: 100%;
    }

    .project-sidebar {
        position: static;
        margin-top: 40px;
    }

}

/* =====================================================
   MOBILE FIXES (PROJECT PAGE ONLY)
===================================================== */

@media (max-width: 768px) {

    .project-featured-banner {
        height: auto;
        border-radius: 20px;
    }

    .project-title {
        font-size: 28px;
    }

    .project-content .wp-block-group {
        padding: 20px;
        border-radius: 25px;
    }

}

/* =====================================================
   VERY SMALL DEVICES
===================================================== */

@media (max-width: 480px) {

    .project-title {
        font-size: 24px;
    }

    .project-info-card {
        padding: 20px;
    }

}



/*Single post page*/

.single-post-layout {
    margin-top: 11rem;
    padding: 0 1rem;
}

.single-sidebar {
    margin-top: 50px;
}

/* Layout & Container */
.custom-single-article {
    max-width: 1499px;
    /* margin: 0 1rem;*/
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: #333;
    line-height: 1.6;
}

/* Featured Image */
.post-featured-image img {
    border-radius: 51px;
    width: 100%;
    height: 581px;
    margin-bottom: 25px;
    transition: all 0.3s ease;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.post-featured-image img:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.18);
}

/* Category Badge */
.post-category-badge {
    background-color: #ffb400;
    /* Yellow from image */
    color: #000;
    padding: 8px 24px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}

/* Title */
.custom-post-title {
    font-size: 40px;
    color: #003399;
    /* Deep blue from image */
    font-weight: 800;
    margin: 20px 0 24px;
}

/* Meta Data Row */
.custom-post-meta {
    display: flex;
    gap: 20px;
    font-size: 14px;
    color: #666;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.custom-post-meta i {
    color: #0066cc;
    margin-right: 5px;
}

/* About Author Box (The specific requested look) */
.author-bio-card {
    display: flex;
    align-items: center;
    border: 1px solid #0066cc;
    /* Blue border from screenshot */
    padding: 30px;
    margin: 40px 0;
    gap: 25px;
    background: #fff;
}

.author-image img {
    width: 150px;
    height: auto;
    display: block;
}

.author-info h2 {
    font-size: 28px;
    margin-top: 0;
    margin-bottom: 10px;
    font-weight: 400;
    color: #000;
}

.author-info p {
    font-size: 16px;
    color: #555;
    margin: 0;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .author-bio-card {
        flex-direction: column;
        text-align: center;
    }
}


/* --- FORCED STYLES FOR SHARE BAR --- */
/* Target the specific structure seen in your editor screenshot */
.wp-block-social-links.is-layout-flex {
    background-color: #f1f6ff !important;
    border-radius: 60px !important;
    padding: 24px !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 0 32px 0 !important;
    gap: 12px !important;
    border: none !important;
}

/* Add the "Share:" Label */
.wp-block-social-links.is-layout-flex::before {
    content: "Share:" !important;
    font-weight: 600 !important;
    margin-right: 5px !important;
    color: #444 !important;
    font-family: sans-serif !important;
}

/* Individual Icon Circles */
.wp-block-social-links.is-layout-flex li.wp-social-link a {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
}

/* Exact Brand Colors */
.wp-social-link-facebook a {
    background-color: #1877f2 !important;
}

.wp-social-link-twitter a {
    background-color: #1da1f2 !important;
}

.wp-social-link-linkedin a {
    background-color: #0066cc !important;
}

.wp-social-link-instagram a {
    background-color: #e4405f !important;
}

.wp-social-link-link a,
.wp-social-link-chain a {
    background-color: #4b5563 !important;
}

/* Force White Icons */
.wp-block-social-links.is-layout-flex li.wp-social-link a svg {
    width: 18px !important;
    height: 18px !important;
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* --- ABOUT AUTHOR BOX --- */
.author-bio-card {
    display: flex !important;
    align-items: center !important;
    border: 1px solid #0066cc !important;
    padding: 30px !important;
    margin: 40px 0 !important;
    gap: 25px !important;
    background: #fff !important;
}

.author-image img {
    width: 150px !important;
    height: auto !important;
}


/* --- Targeted Style for the Content Group Box --- */

/* This targets the group block directly following your share icons */
.entry-content>.wp-block-group:not(.is-nowrap) {
    background-color: #ffffff !important;
    border-radius: 42px !important;
    /* Rounded corners from image */
    padding: 48px !important;
    /* Generous spacing for text */
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.07) !important;
    /* Soft shadow */
    /*margin-top: 40px !important;*/
    margin-bottom: 32px !important;
    border: none !important;
    display: block !important;
    clear: both !important;
}

/* Styling the text inside that specific group */
.entry-content>.wp-block-group:not(.is-nowrap) p {
    font-size: 16px !important;
    line-height: 1.8 !important;
    color: #444444;
    margin-bottom: 25px !important;
    font-family: sans-serif !important;
}

/* Styling the headings inside that specific group */
.entry-content>.wp-block-group:not(.is-nowrap) h2 {
    font-size: 20px !important;
    color: #000;
    /* Deep plumbing blue */
    margin-top: 5px !important;
    font-weight: 500 !important;
}

/* Mobile Responsive adjustment */
@media (max-width: 768px) {
    .entry-content>.wp-block-group:not(.is-nowrap) {
        padding: 25px !important;
        border-radius: 20px !important;
    }
}

.wp-container-core-columns-is-layout-9d6595d7 {
    background-color: #f0f8ff !important;
    border-radius: 47px;
    display: flex !important;
    align-items: center !important;
    gap: 30px !important;
    margin-bottom: 25px;

    width: 1000px;
    /* FIXED WIDTH */
    max-width: 100%;
    /* Prevent overflow on small screens */
    /* margin-left: auto;
    margin-right: auto;*/

    /*padding: 0 11px;*/
}

/* --- 2. Column Width Adjustments --- */
/* Shrinks the left column so it doesn't create dead space around the circle */
.wp-container-core-columns-is-layout-9d6595d7 .wp-block-column:first-child {
    flex-basis: 80px !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
}

/* Allows the text column to fill the remaining space */
.wp-container-core-columns-is-layout-9d6595d7 .wp-block-column:last-child {
    flex-basis: auto !important;
    flex-grow: 1 !important;
}

/* --- 3. Profile Image Styles --- */
.wp-container-core-columns-is-layout-9d6595d7 .wp-block-image img {
    border-radius: 50% !important;
    border: 1px solid #e0e0e0;
    width: 80px !important;
    height: 80px !important;
    object-fit: cover;
    display: block;
    margin: 0 11px;
}

/* --- 4. Typography (Heading & Paragraph) --- */
.wp-container-core-columns-is-layout-9d6595d7 h2 {
    color: #1a3c5a;
    margin-top: 0 !important;
    margin-bottom: 5px !important;
    font-size: 20px !important;
    font-weight: 500 !important;
}

.wp-container-core-columns-is-layout-9d6595d7 p {
    color: #555555;
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
}

/* --- 5. Post Meta (Author, Date, Read Time) --- */
.custom-post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    font-size: 15px;
    color: #555555;
    margin: 15px 0;
}

.custom-post-meta span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.custom-post-meta i {
    color: #006699;
    /* Icon Blue */
    font-size: 1.1rem;
    margin-right: 8px;
}

/* --- 6. Back to Articles Button --- */
/* =====================================================
   BACK LINK STYLING (ARTICLES & SERVICES)
===================================================== */
/* =====================================================
   UNIFIED BACK LINK STYLING (ARTICLE, SERVICE, PROJECT)
===================================================== */

/* 1. Container Spacing */
.article-back-link-wrap,
.service-back-link-wrap,
.project-back-link-wrap {
    margin-bottom: 25px;
    margin-top: 10px;
    display: block;
    width: 100%;
}

/* 2. Base Link Styling (Matches your Image) */
.article-back-link,
.service-back-link,
.project-back-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    /* Space between arrow and text */
    text-decoration: none !important;
    color: #1e3a8a;
    /* Professional blue from your image */
    font-size: 16px;
    /* Size from screenshot */
    font-weight: 500;
    /* Bold text */
    line-height: 1.2;
    /* transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);*/
    font-family: inherit;
}

/* 3. Icon Specifics */
.article-back-link i,
.service-back-link i,
.project-back-link i {
    font-size: 18px;
    /* Icon slightly smaller than text */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 4. Hover Effects (The Nudge) */
.article-back-link:hover,
.service-back-link:hover,
.project-back-link:hover {
    color: #0891b2;
    /* Darker blue on hover */
    /* transform: translateX(-5px); */
    /* Moves it slightly left */
}

/* =====================================================
   MOBILE RESPONSIVE
===================================================== */
@media (max-width: 768px) {

    .article-back-link,
    .service-back-link,
    .project-back-link {
        font-size: 17px;
        gap: 8px;
    }

    .article-back-link i,
    .service-back-link i,
    .project-back-link i {
        font-size: 16px;
    }
}

/* =====================================================
    EXTRA RESPONSIVE FIXES (NO CHANGE TO ORIGINAL CSS)
===================================================== */

/* Large Screens */
@media (max-width:1400px) {
    .wp-container-core-columns-is-layout-9d6595d7 {
        max-width: 80%;
    }
}

/* Laptop */
@media (max-width:1200px) {
    .wp-container-core-columns-is-layout-9d6595d7 {
        max-width: 90%;
    }
}

/* Tablet */
@media (max-width:991px) {

    .wp-container-core-columns-is-layout-9d6595d7 {
        max-width: 100%;
        gap: 20px !important;
        padding: 15px !important;
    }

    .wp-container-core-columns-is-layout-9d6595d7 .wp-block-column:first-child {
        flex-basis: 70px !important;
    }

    .wp-container-core-columns-is-layout-9d6595d7 .wp-block-image img {
        width: 70px !important;
        height: 70px !important;
    }

}

/* Small Tablet */
@media (max-width:768px) {

    .wp-container-core-columns-is-layout-9d6595d7 {
        flex-direction: column !important;
        text-align: center;
        gap: 15px !important;
        padding: 20px !important;
    }

    .wp-container-core-columns-is-layout-9d6595d7 .wp-block-column:first-child {
        flex-basis: auto !important;
    }

    .wp-container-core-columns-is-layout-9d6595d7 .wp-block-image img {
        margin: auto;
    }

}

/* Mobile */
@media (max-width:480px) {

    .wp-container-core-columns-is-layout-9d6595d7 {
        padding: 18px !important;
        border-radius: 15px;
    }

    .wp-container-core-columns-is-layout-9d6595d7 h2 {
        font-size: 18px !important;
    }

    .wp-container-core-columns-is-layout-9d6595d7 p {
        font-size: 14px !important;
    }

    .custom-post-meta {
        justify-content: center;
        gap: 12px;
        font-size: 14px;
    }

}

/* Very Small Mobile */
@media (max-width:360px) {

    .wp-container-core-columns-is-layout-9d6595d7 h2 {
        font-size: 16px !important;
    }

    .wp-container-core-columns-is-layout-9d6595d7 p {
        font-size: 13px !important;
    }

    .custom-post-meta {
        font-size: 13px;
    }

}

/* =====================================================
    PERFECT TAGS SECTION STYLES (NO DOUBLE BOX)
===================================================== */

/* 1. Turn the outer WP group into the Tag Card (Overrides the 48px padding from main content) */
.entry-content>.wp-block-group:has(.wp-block-tag-cloud) {
    background-color: #ffffff !important;
    border-radius: 50px !important;
    padding: 24px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid #eef1f5 !important;
}

/* 2. Strip any backgrounds/padding from nested inner groups to prevent double boxes */
.entry-content>.wp-block-group:has(.wp-block-tag-cloud) .wp-block-group,
.entry-content>.wp-block-group:has(.wp-block-tag-cloud) .wp-block-group__inner-container {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 3. Tags Heading */
h2.wp-block-heading:has(+ p.wp-block-tag-cloud) {
    font-size: 22px !important;
    color: #003366;
    /* Dark blue heading */
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 25px !important;
    margin-top: 0 !important;
    font-weight: 700 !important;
}

/* 4. Tag Icon (Font Awesome) */
h2.wp-block-heading:has(+ p.wp-block-tag-cloud)::before {
    content: "\f02b" !important;
    /* Unicode for the fa-tag icon */
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", FontAwesome !important;
    /* Fallbacks for different FA versions */
    font-weight: 900 !important;
    /* Required to render solid Font Awesome icons */
    color: #00838f;
    /* Teal color */
    display: inline-block !important;
    font-size: 18px !important;
    /* Controls the size of the icon */
    margin-right: 5px !important;
    /* Space between icon and text */
    line-height: 1 !important;
}

/* 5. Tag Cloud Container Flex Layout */
p.wp-block-tag-cloud {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin: 0 !important;
}

/* 6. Individual Tag Pills */
p.wp-block-tag-cloud a.tag-cloud-link {
    display: inline-block !important;
    text-decoration: none !important;
    background-color: #eaf8fa;
    /* Light Cyan */
    color: #00838f;
    /* Teal text */
    border-radius: 30px !important;
    padding: 8px 18px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    margin: 0 !important;
    border: none !important;
}

/* 7. Tag Pill Hover State */
p.wp-block-tag-cloud a.tag-cloud-link:hover {
    background: linear-gradient(to right, #0891b2, #1e3a8a);
    color: #ffffff !important;
}

/* Container Layout */
.site-info .container,
.site-info .container-fluid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
    /* The thin line visible in image */
    padding-top: 20px;
    z-index: 1;
    position: relative;
    padding-bottom: 20px;
}

/* Copyright (Left Side) */
.site-info .copy-right {
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.6);
    /* Muted white/grey text */
    font-size: 14px;
}

.footer-right {
    z-index: 1;
    position: relative;
}

/* Links (Right Side) */
.footer-right .footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
    /* Space between links */
}

.footer-right .footer-links li {
    display: inline-block;
}

.footer-right .footer-text {
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.footer-right .footer-text:hover {
    opacity: 0.8;
}

/* Responsive: Stack on mobile */
@media (max-width: 768px) {

    .site-info .container,
    .site-info .container-fluid {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
}






/* ==========================================================================
   1. GLOBAL CONTAINER & LAYOUT
   ========================================================================== */
#team {
    background-color: #ffffff;
    /* Very pale sky background */
    padding: 60px 20px 0;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: #334155;
    -webkit-font-smoothing: antialiased;
}

.team-container {
    max-width: 1499px;
    margin: 8rem auto 0;
    margin: 5rem auto 0;
}

/* Back link with dynamic arrow icon */
.back-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: #1e3a8a;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 30px;
    transition: transform 0.2s ease;
}

.back-link i {
    margin-right: 8px;
    font-size: 0.8rem;
}

.back-link:hover {
    transform: translateX(-3px);
}

/* Two-column layout */
.team-layout {
    display: grid;
    grid-template-columns: 603px 1fr;
    gap: 40px;
    align-items: start;
}

/* ==========================================================================
   2. SIDEBAR (LEFT COLUMN)
   ========================================================================== */
/* ==========================================================================
   2. SIDEBAR (LEFT COLUMN)
   ========================================================================== */
.team-sidebar {
    display: flex;
    flex-direction: column;
    gap: 25px;

    /* Sticky sidebar */
    position: sticky;
    top: 120px;
    /* adjust depending on header height */
    height: fit-content;
}

/* Profile Image Wrapper */
.team-image-wrapper img {
    width: 100%;
    height: 900px;
    border-radius: 35px;
    /* Large rounded corners from image */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
    background-color: #fff;
    display: block;
}

/* Get in Touch Card */
.contact-card {
    background: #ffffff;
    padding: 24px;
    border-radius: 30px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06),
        0 -8px 25px rgba(0, 0, 0, 0.03);
    /* Slightly enhanced soft shadow */
}

.contact-card h4 {
    margin-top: 0;
    margin-bottom: 30px;
    /* Increased bottom margin */
    font-size: 1.25rem;
    color: #1f2937;
    /* Darker, crisper heading color */
    font-weight: 600;
}

.contact-info {
    display: flex;
    align-items: center;
    gap: 20px;
    /* Increased gap between icon and text */
    margin-bottom: 24px;
    /* Increased margin between list items */
    font-size: 1rem;
    color: #4b5563;
    /* Gray text color matching the image */
}

.contact-info:last-of-type {
    margin-bottom: 0;
}

/* Sidebar Icons with Light Blue Circular Background */
/* Target the SVG specifically */
.contact-info svg {
    /* --- 1. The Circle Background --- */
    background-color: #f0f7fb;
    /* Light blue circle */
    width: 20px;
    /* Total width of the circle */
    height: 20px;
    /* Total height of the circle */
    border-radius: 50%;
    flex-shrink: 0;

    /* --- 2. The Icon Size --- */
    box-sizing: border-box;
    /* Keeps the circle exactly 48px */
    padding: 12px;
    /* CHANGE THIS: Increase padding to make the icon smaller, decrease it to make the icon bigger */

    /* --- 3. The Icon Color --- */
    color: #0082a7;
    /* Teal/Blue icon color */
    fill: currentColor;
    /* Use this if your SVG is made of solid shapes */
    /* stroke: currentColor; */
    /* Uncomment this if your SVG is made of lines/outlines */
}

/* Optional: Ensure any links inside inherit the proper color */
.contact-info a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.contact-info a:hover {
    color: #0082a7;
}

/* ==========================================================================
   3. MAIN CONTENT (RIGHT COLUMN)
   ========================================================================== */
.team-main-content {
    display: flex;
    flex-direction: column;
}

/* Years Experience Badge */
.team-badge {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(to right, var(--theme-color), #f59e0b);
    /* Gold/Amber */
    color: #000;
    gap: 5px;
    padding: 8px 24px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    width: fit-content;
    margin-bottom: 12px;
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.2);
}

.team-badge i {
    margin-right: 7px;
    font-size: 0.9rem;
}

/* Name and Title */
.team-name {
    font-size: 40px;
    margin: 0 0 5px 0;
    color: #1e3a8a;
    /* Navy Blue */
    font-weight: 700;
    letter-spacing: -0.5px;
}

.team-designation {
    font-size: 24px;
    color: #0891b2;
    /* Teal */
    font-weight: 600;
    margin-bottom: 35px;
}

/* About Sarah Card */
.about-section {
    background: #fff;
    padding: 32px;
    border-radius: 35px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);
    margin-bottom: 30px;
}

/* Small Indigo Label */
.about-label {
    display: inline-block;
    /* background-color: #4f46e5; */
    color: #1e3a8a;
    /* padding: 4px 14px; */
    border-radius: 6px;
    font-weight: 700;
    font-size: 24px;
    margin-bottom: 20px;
}

.about-text {
    line-height: 1.7;
    color: #475569;
    font-size: 1rem;
}

.about-text p {
    margin-top: 0;
    color: #6b7280;
    margin-bottom: 15px;
}

/* ==========================================================================
   4. DYNAMIC DASHBOARD CONTENT (GUTENBERG BLOCKS)
   ========================================================================== */

/* --- UNIVERSAL RESET TO FIX "DOUBLE BOX" ISSUE --- */
/* This strips background and padding from all WP inner containers inside your groups */
.dynamic-dashboard-content .wp-block-group>*,
.dynamic-dashboard-content .wp-block-group__inner-container {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    outline: none !important;
}

.dynamic-dashboard-content {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Global resets for elements inside dynamic content */
.dynamic-dashboard-content .wp-block-group h2 {
    font-size: 24px;
    color: #1e3a8a;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 15px;
}

.dynamic-dashboard-content .wp-block-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* FontAwesome shared setup for icons */
.dynamic-dashboard-content .wp-block-group h2::before,
.dynamic-dashboard-content .wp-block-group ul li::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    -webkit-font-smoothing: antialiased;
}

/* --- A. SECTION 1: Certifications & Licenses (Light Blue Card) --- */
.dynamic-dashboard-content .wp-block-group:nth-of-type(1) {
    background: linear-gradient(to right, #ecfeff, #eff6ff) !important;
    border-radius: 35px;
    padding: 32px !important;
    /* Forces padding on the outer box only */
    border: 1px solid rgba(14, 165, 233, 0.1);
}

.dynamic-dashboard-content .wp-block-group:nth-of-type(1) h2 {
    margin-bottom: 25px !important;
}

.dynamic-dashboard-content .wp-block-group:nth-of-type(1) h2::before {
    content: "\f19d";
    color: #0891b2;
    font-size: 1.4rem;
}

.dynamic-dashboard-content .wp-block-group:nth-of-type(1) ul li {
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    color: #364153;
    display: flex;
    align-items: center;
}

.dynamic-dashboard-content .wp-block-group:nth-of-type(1) ul li::before {
    content: "\f058";
    font-weight: 400;
    color: #22c55e;
    position: absolute;
    left: 0;
    font-size: 1.2rem;
}

/* --- B. SECTION 2: Areas of Expertise (White Card with Gradient Pills) --- */
.dynamic-dashboard-content .wp-block-group:nth-of-type(2) {
    background-color: #fff !important;
    border-radius: 35px;
    padding: 32px !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06),
        0 -8px 25px rgba(0, 0, 0, 0.03);
}

.dynamic-dashboard-content .wp-block-group:nth-of-type(2) h2 {
    margin-bottom: 30px !important;
}

.dynamic-dashboard-content .wp-block-group:nth-of-type(2) h2::before {
    content: "\f0b1";
    color: #0d9488;
}

.dynamic-dashboard-content .wp-block-group:nth-of-type(2) ul {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.dynamic-dashboard-content .wp-block-group:nth-of-type(2) ul li {
    background: linear-gradient(90deg, #1e3a8a 0%, #0891b2 100%);
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
}

/* --- C. SECTION 3: Key Achievements (White Card with Horizontal Bars) --- */
.dynamic-dashboard-content .wp-block-group:nth-of-type(3) {
    background-color: #fff !important;
    border-radius: 35px;
    padding: 32px !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06),
        0 -8px 25px rgba(0, 0, 0, 0.03);
}

.dynamic-dashboard-content .wp-block-group:nth-of-type(3) h2 {
    margin-bottom: 30px !important;
}

.dynamic-dashboard-content .wp-block-group:nth-of-type(3) ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.dynamic-dashboard-content .wp-block-group:nth-of-type(3) ul li {
    background-color: #f0f9ff;
    color: #475569;
    padding: 16px;
    border-radius: 18px;
    font-size: 16px;
    font-weight: 400;
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 55px;
    border: 1px solid rgba(14, 165, 233, 0.05);
}

.dynamic-dashboard-content .wp-block-group:nth-of-type(3) ul li::before {
    content: "\f5a2";
    color: #f59e0b;
    position: absolute;
    left: 20px;
    font-size: 1.3rem;
}

/* --- C. SPECIFIC SECTION 3: Key Achievements (White Card with Horizontal Bars) --- */

/* The outer Group block */
.dynamic-dashboard-content .wp-block-group:nth-of-type(3) {
    background-color: #fff;
    border-radius: 35px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

/* The Heading */
.dynamic-dashboard-content .wp-block-group:nth-of-type(3) h2 {
    margin-bottom: 30px;
}

/* (No specific heading icon defined for Achievements in image, but you could add one) */

/* The List Container - set up for two columns */
.dynamic-dashboard-content .wp-block-group:nth-of-type(3) ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Two equal columns */
    gap: 15px;
}

/* The List Items as Horizontal Bars */
.dynamic-dashboard-content .wp-block-group:nth-of-type(3) ul li {
    background-color: #f0f9ff;
    /* Light blue bar */
    color: #475569;
    padding: 18px 25px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 55px;
    /* Spacing for the medal */
    border: 1px solid rgba(14, 165, 233, 0.05);
}

/* List Icon: Gold Medal */
.dynamic-dashboard-content .wp-block-group:nth-of-type(3) ul li::before {
    content: "\f5a2";
    /* Medal */
    color: #f59e0b;
    /* Gold */
    position: absolute;
    left: 20px;
    font-size: 1.3rem;
}




.team-cta-section {
    padding: 0 10px;
    margin: 60px auto;
    max-width: 1499px;
    font-family: inherit;
}

.team-cta-container {
    background: linear-gradient(90deg, #1c3c86 0%, #1588b3 100%);
    border-radius: 47px;
    padding: 48px;
    text-align: center;
    color: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.team-cta-title {
    color: #ffffff;
    font-size: 32px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 12px;
}

.team-cta-description {
    color: #ffffff;
    font-size: 20px;
    margin-bottom: 30px;
    opacity: 0.95;
    font-weight: 300;
}

.team-cta-button {
    display: inline-block;
    background-color: #ffca28;
    color: #111111;
    padding: 14px 32px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
}

.team-cta-button:hover,
.team-cta-button:focus {
    background-color: #ffb300;
    color: #000000;
    transform: translateY(-2px) scale(1.08);
    text-decoration: none;
}

/* ======================================================
   RESPONSIVE IMPROVEMENTS (NO DESIGN CHANGE)
   ====================================================== */

/* Large screens */
@media (max-width:1400px) {

    .team-layout {
        grid-template-columns: 520px 1fr;
    }

    .team-image-wrapper img {
        height: 750px;
    }

}

/* Laptop screens */
@media (max-width:1200px) {

    .team-layout {
        grid-template-columns: 450px 1fr;
        gap: 30px;
    }

    .team-image-wrapper img {
        height: 650px;
    }

    .team-name {
        font-size: 2.4rem;
    }

    .team-designation {
        font-size: 1.2rem;
    }

    .about-section {
        padding: 30px;
    }

}

/* Tablet landscape */
@media (max-width:1024px) {

    .team-layout {
        grid-template-columns: 380px 1fr;
    }

    .team-image-wrapper img {
        height: 580px;
    }

    .team-sidebar {
        top: 100px;
    }

    .team-cta-container {
        padding: 40px;
    }

    .team-cta-title {
        font-size: 28px;
    }

    .team-cta-description {
        font-size: 18px;
    }

}

/* Tablet portrait */
@media (max-width:991px) {

    .team-layout {
        grid-template-columns: 1fr;
    }

    .team-sidebar {
        position: relative;
        top: auto;
        max-width: 500px;
        margin: 0 auto 40px auto;
    }

    .team-image-wrapper img {
        height: auto;
    }

    .team-main-content {
        width: 100%;
    }

    .dynamic-dashboard-content .wp-block-group:nth-of-type(3) ul {
        grid-template-columns: 1fr;
    }

}

/* Large mobile */
@media (max-width:768px) {

    #team {
        padding: 50px 18px;
    }

    .team-name {
        font-size: 2rem;
    }

    .team-designation {
        font-size: 1.1rem;
    }

    .about-section {
        padding: 28px;
    }

    .contact-card {
        padding: 28px;
    }

    .team-cta-container {
        padding: 36px 28px;
        border-radius: 35px;
    }

    .team-cta-title {
        font-size: 24px;
    }

    .team-cta-description {
        font-size: 16px;
    }

}

/* Small mobile */
@media (max-width:480px) {

    #team {
        padding: 40px 15px;
    }

    .team-layout {
        gap: 25px;
    }

    .team-name {
        font-size: 1.7rem;
    }

    .team-designation {
        font-size: 1rem;
    }

    .contact-card {
        padding: 24px;
    }

    .about-section {
        padding: 24px;
    }

    .dynamic-dashboard-content {
        gap: 24px;
    }

    .team-cta-container {
        padding: 30px 22px;
        border-radius: 28px;
    }

    .team-cta-title {
        font-size: 20px;
    }

    .team-cta-description {
        font-size: 15px;
    }

    .team-cta-button {
        padding: 12px 26px;
        font-size: 15px;
    }

}

/* Remove the default dotted outline for everyone */
a:focus, 
button:focus {
    outline: none;
}

/* Add a custom, cleaner outline only for keyboard users */
a:focus-visible, 
button:focus-visible {
    outline: 2px solid #00a8cc; /* Change this color to match your theme */
    outline-offset: 4px;
}

/* ========================================================
   MODERN SLIDER - EDGE-TO-EDGE FULL WIDTH & FROSTED STATS
   ======================================================== */

/* 1. Force Absolute Full-Width Container & KILL ROUNDED CORNERS */

#featured-slider-modern,
#featured-slider-modern .section-content,
#featured-slider-modern .opbg,
#featured-slider-modern .slide-inner  {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important; /* Removes all outer rounded corners completely */
    border: none !important;
    box-shadow: none !important;
    transform: none !important; /* Prevents container from clipping */
}

/* 2. Absolute Edge-to-Edge Background Wrapper */
#featured-slider-modern {
    position: relative !important;
}

#featured-slider-modern .modern-slider-bg {
    position: absolute !important;
    top: 0 !important; 
    left: 0 !important; 
    right: 0 !important; 
    bottom: 0 !important;
    width: 100% !important; 
    height: 100% !important;
    z-index: 1;
    border-radius: 0 !important;
}

#featured-slider-modern .modern-slider-bg img {
    width: 100% !important; 
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important; /* Removes rounding from the image */
    display: block !important;
}

/* NEW ADDITION: The Dark Blue Color Grade Overlay on the BACKGROUND */
#featured-slider-modern .modern-slider-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0a2351; /* The deep blue color */
    mix-blend-mode: multiply; /* Blends the blue into the image naturally */
    opacity: 0.8; /* Adjust this to make the background darker or lighter */
    z-index: 2; /* Ensures it sits directly above the background image */
    pointer-events: none;
}

/* 3. Grid Constraints */
#featured-slider-modern .container {
    position: relative;
    z-index: 5;
    max-width: 1499px !important;
    margin: 0 auto !important;
    padding: 57px 15px !important;
    height: 100%;
}

#featured-slider-modern .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    min-height: 200px !important; /* Fixed height stops it from shrinking on inspect */
    margin: 0 !important;
}

/* 4. Left Content Layout */
#featured-slider-modern .row > .col-lg-6:nth-child(1) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* padding: 60px 15px !important; */
    width: 60% !important;
}

/* 5. Typography Formatting */
#featured-slider-modern .hero-rating {
    background: rgba(255, 255, 255, 0.15) !important;
    padding: 6px 16px !important;
    border-radius: 50px !important;
    color: #fff !important;
    font-size: 13px !important;
    margin-bottom: 20px !important;
    display: inline-flex !important;
    width: fit-content;
    align-items: center;
}

#featured-slider-modern .hero-rating i { 
    color: #ffc107 !important; 
    margin-right: 8px !important; 
}

#featured-slider-modern .hero-title {
    color: #ffffff !important;
    font-size: clamp(40px, 4.5vw, 55px) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin-bottom: 10px !important;
}

#featured-slider-modern .hero-subtitle {
    color: #ffc107 !important; 
    font-size: clamp(24px, 6vw, 62px) !important;
    font-weight: 600 !important;
    margin-bottom: 20px !important;
}

#featured-slider-modern .hero-desc p {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    max-width: 90%;
}

/* 6. Button Styling */
#featured-slider-modern .hero-actions-row {
    gap: 20px !important;
    margin-top: 25px !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

#featured-slider-modern .hero-buttons-modern {
    display: flex;
    gap: 15px !important;
    margin-bottom: 2rem;
}

#featured-slider-modern .btn-primary-modern {
    background-color: #ffc107 !important; 
    color: #000 ; 
    border-radius: 50px !important;
    padding: 12px 30px !important;
    font-weight: 700 !important;
    border: none !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#featured-slider-modern .btn-primary-modern:hover {
    background-color: #e0a800 !important;
    color: #000000 !important;
}
#featured-slider-modern .btn-outline-modern.btn2 {
    background-color: transparent !important;
    color: #fff !important;
    border: 2px solid rgba(255,255,255,0.4) !important;
    border-radius: 50px !important;
    padding: 10px 30px !important;
    font-weight: 600 !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
#featured-slider-modern .btn-outline-modern.btn2:hover {
    background-color: #ffffff !important;
    color: #000000 !important;
}


/* 7. Bottom Stats (Frosted Glass Container) */
#featured-slider-modern .hero-extra-data {
    margin-top: 50px !important;
}

#featured-slider-modern .modern-stats {
    background: rgba(0, 0, 0, 0.25) !important; 
    backdrop-filter: blur(8px);
    padding: 20px 40px !important;
    border-radius: 50px !important; 
    display: inline-flex !important;
    gap: 40px !important;
    border: 1px solid rgba(255,255,255,0.05);
}

#featured-slider-modern .stat-box {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

#featured-slider-modern .stat-box i {
    background-color: #ffc107 !important; 
    color: #000 !important; 
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
}

#featured-slider-modern .stat-text strong {
    color: #fff !important;
    font-size: 22px !important;
    display: block;
    line-height: 1;
    margin-bottom: 4px;
    font-weight: 700;
}

#featured-slider-modern .stat-text span {
    color: rgba(255,255,255,0.8) !important;
    font-size: 13px !important;
}

/* 8. Right Plumber Image Positioning */
#featured-slider-modern .row > .col-lg-6:nth-child(2) {
    display: flex;
    align-items: flex-end !important; /* Anchors to bottom edge */
    justify-content: flex-end; /* Pushes to the right */
    width: 40% !important;
    padding: 0 !important; /* Removing padding makes him flush with bottom edge */
    position: relative;
}

#featured-slider-modern .main-img-wrapper {
    line-height: 0 !important; /* Fixes invisible space beneath images */
    margin-bottom: 0 !important;
    width: 100%;
    text-align: right;
}

#featured-slider-modern .main-img-wrapper img {
    width: auto !important;
    height: auto !important;
    max-height: 600px !important; /* Locks how tall he can get */
    min-width: 500px !important; /* THIS STOPS HIM FROM SHRINKING ON INSPECT */
    object-fit: contain !important;
    object-position: bottom right !important;
    margin-bottom: -5px !important; /* THIS KILLS THE REMAINING BOTTOM SPACE */
    display: inline-block !important;
}

/* Hide Unused Layout Elements */
#featured-slider-modern .video-play-btn,
#featured-slider-modern .modern-experience,
#featured-slider-modern .modern-emergency {
    display: none !important;
}

/* 9. Mobile Overrides */
@media (max-width: 991px) {
    #featured-slider-modern .row {
        flex-direction: column !important;
    }
    #featured-slider-modern .row > .col-lg-6:nth-child(1),
    #featured-slider-modern .row > .col-lg-6:nth-child(2) {
        width: 100% !important;
        text-align: center;
    }
    #featured-slider-modern .hero-title,
    #featured-slider-modern .hero-subtitle,
    #featured-slider-modern .hero-desc {
        text-align: center !important;
    }
    #featured-slider-modern .hero-actions-row,
    #featured-slider-modern .hero-buttons {
        justify-content: center !important;
    }
    #featured-slider-modern .modern-stats {
        flex-wrap: wrap;
        justify-content: center;
        border-radius: 20px !important;
    }
    #featured-slider-modern .main-img-wrapper img {
        min-width: 0 !important; /* Removes the shrink-lock for mobile phones so it fits small screens */
        max-width: 100% !important;
        margin-bottom: 0 !important;
    }
}

/* 1. Container Setup (Resetting Theme Defaults) */
.modern-project-style.service-card,
.modern-project-style .service-card {
    background-color: transparent !important;
    border: none !important;
    overflow: visible !important;
    margin-bottom: 40px !important;
    box-shadow: none !important;
}

.modern-project-style .service-card-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 2. Top Image Section & Dark Angular Flap */
.modern-project-style .service-media-wrap {
    position: relative;
    z-index: 1;
    background-color: #0b1c2c !important; /* Dark navy */
    border-radius: 8px !important; /* Added small border radius */
}

/* This creates the sharp diagonal dark cut underneath the image */
.modern-project-style .service-media-wrap::after {
    content: '';
    position: absolute;
    bottom: -55px;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: #0b1c2c !important;
    clip-path: polygon(0 0, 100% 0, 100% 10px, 0 100%);
    z-index: -1;
}

.modern-project-style .service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 8px !important; /* Added small border radius */
}

/* 3. The Circular Orange Icon */
.modern-project-style .service-icon {
    position: absolute;
    right: 30px;
    bottom: -35px; /* Pulls it exactly onto the border */
    width: 70px;
    height: 70px;
    background-color: #f37335 !important; /* Signature Orange */
    border-radius: 50% !important; /* Perfect circle */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff !important;
    font-size: 26px;
    border: 6px solid #ffffff !important;
    z-index: 10;
}

/* 4. The White Content Box (Fixed Dark Background Issue) */
.modern-project-style .service-content {
    position: relative;
    z-index: 5;
    /* FORCING the background to be white so your theme doesn't make it dark */
    background-color: #ffffff !important; 
    /* Pulls up over the image (-45px) and right (20px) to reveal the dark flap */
    margin: -45px 0 0 20px !important; 
    padding: 35px 30px !important;
    border-radius: 4px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    flex-grow: 1;
    display: flex;
    top: 2rem;
    flex-direction: column;
}

/* 5. Typography */
.modern-project-style .service-subtitle {
    display: block;
    color: #f37335 !important;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
}

.modern-project-style .service-title {
    margin: 0 0 15px 0 !important;
    line-height: 1.3;
}

.modern-project-style .service-title a {
    color: #1a2b3c !important; /* Dark slate text */
    font-size: 22px;
    font-weight: 800;
    text-decoration: none;
    transition: color 0.3s ease;
}

.modern-project-style .service-title a:hover {
    color: #f37335 !important;
}

.modern-project-style .service-excerpt {
    color: #6b7280 !important;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 25px !important;
    flex-grow: 1;
}

/* 6. Read More Button */
.modern-project-style .newsCaption-link {
    display: inline-flex;
    align-items: center;
    background-color: #fff4ef !important; /* Light orange tint */
    color: #f37335 !important;
    padding: 10px 24px !important;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s ease;
    align-self: flex-start;
}

.modern-project-style .newsCaption-link:hover {
    background-color: #f37335 !important;
    color: #ffffff !important;
}

.modern-project-style .newsCaption-link .btn-icon {
    margin-left: 8px;
}

/* 7. Mobile Responsiveness */
@media (max-width: 768px) {
    .modern-project-style .service-content {
        /* Reduces the left gap so the white box isn't squeezed off screen */
        margin: -45px 10px 0 10px !important; 
        padding: 25px 20px !important;
    }
    
    .modern-project-style .service-icon {
        right: 20px;
        width: 55px;
        height: 55px;
        bottom: -28px;
        font-size: 20px;
        border-width: 4px !important;
    }
    
    .modern-project-style .service-title a {
        font-size: 20px;
    }
}

/* ==========================================================================
   MODERN TESTIMONIALS SECTION (Perfect Centering & Outside Buttons)
   ========================================================================== */

/* 1. Remove background and shadow from all outer sections */
#featured-testimonials-modern,
#featured-testimonials-modern .testimonial-wrapper {
    background-color: transparent !important;
    background: none !important;
    max-width: 100% !important;
    margin: 40px auto !important;
    padding: 0 !important;
    box-shadow: none !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
}

/* 2. Slider Band & Track (Buttons safely outside) */
#featured-testimonials-modern .modern-band {
    position: relative !important;
    max-width: 1050px !important; 
    width: 100% !important;
    margin: 0 auto !important;
    background-color: transparent !important; 
    /* 60px padding on the left and right builds a permanent wall for the buttons to live in */
    padding: 0 60px !important; 
    box-sizing: border-box !important;
}

#testimonialSliderModern {
    display: flex !important;
    overflow: hidden !important; 
    max-width: 100% !important; 
    margin: 0 auto !important;
    padding: 30px 0 !important; 
    scroll-behavior: smooth !important; 
    background-color: transparent !important;
    box-sizing: border-box !important;
    gap: 0 !important; /* Ensures no gap throws off the width calculation */
    scroll-snap-type: x mandatory !important; /* Forces the browser to perfectly center the cards */
}

/* 3. The Card Layout (Perfectly Centered) */
#featured-testimonials-modern .modern-testimonial-card {
    background-color: transparent !important; 
    box-shadow: none !important;
    flex: 0 0 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    /* 280px left clears the image. 40px right gives text breathing room. */
    padding: 20px 40px 20px 280px !important; 
    box-sizing: border-box !important;
    border: none !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    scroll-snap-align: center !important; /* Guarantees the card stops dead-center when clicked */
}

/* Hide default quote icons */
#featured-testimonials-modern .modern-testimonial-card .testimonial-quote-icon {
    display: none !important;
}

/* --- Left Side: Absolute Image --- */
#featured-testimonials-modern .modern-testimonial-card .client-image {
    position: absolute !important;
    left: 40px !important; /* Moved inward so the blue circle doesn't clip on the left edge */
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 200px !important;
    height: 200px !important;
    z-index: 10 !important;
    margin: 0 !important;
}

#featured-testimonials-modern .modern-testimonial-card .client-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    border: 6px solid #ffffff !important; 
    position: relative !important;
    z-index: 2 !important;
}

#featured-testimonials-modern .modern-testimonial-card .client-image::before {
    content: '' !important;
    position: absolute !important;
    top: -15px !important;
    left: -15px !important;
    width: 100% !important;
    height: 100% !important;
    background-color: #3b82f6 !important; 
    border-radius: 50% !important;
    z-index: 1 !important; 
}

/* --- Right Side: Text & Info (Fixing the double line) --- */
#featured-testimonials-modern .modern-testimonial-card .testimonial-content {
    position: relative !important;
    z-index: 2 !important;
    text-align: left !important;
    /* margin-bottom: 25px !important; */
    /* padding-bottom: 25px !important; */
    /* border-bottom: 1px solid #e2e8f0 !important; This is our ONE intended line */
}



#featured-testimonials-modern .modern-testimonial-card .testimonial-content p {
    font-size: 16px !important;
    line-height: 1.8 !important;
    color: #6b7280 !important;
    font-style: italic !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: normal !important; 
    border: none !important; /* Stops your theme from adding a second line to paragraphs */
    box-shadow: none !important;
}

/* --- Style the Dynamic SVG Quote Icon --- */
#featured-testimonials-modern .modern-testimonial-card .testimonial-quote-icon {
    display: block !important;
    position: absolute !important;
    top: 25px !important;       /* Aligns perfectly near the top of the text */
    left: 51rem !important;     /* Tucked neatly between the image and the text */
    z-index: 1 !important;
    background-color: transparent;
    opacity: 0.15 !important;   /* Makes the icon subtle and elegant */
}

#featured-testimonials-modern .modern-testimonial-card .testimonial-quote-icon svg {
    width: 40px !important;
    height: 40px !important;
    fill: #3b82f6 !important;   /* Theme blue color */
    background-color: white !important;
}

#featured-testimonials-modern .modern-testimonial-card .client-info {
    display: block !important;
    text-align: left !important;
    padding: 0 !important;
    border: none !important;
}

#featured-testimonials-modern .modern-testimonial-card .client-info h4 {
    color: #8bb4f9 !important; 
    font-size: 22px !important;
    font-weight: 700 !important;
    margin: 0 0 4px 0 !important;
}

#featured-testimonials-modern .modern-testimonial-card .client-info .designation,
#featured-testimonials-modern .modern-testimonial-card .client-info .location {
    font-size: 13px !important;
    color: #a1a1aa !important;
    font-style: italic !important;
    text-transform: none !important;
    display: block !important;
}

/* --- Custom Navigation Buttons --- */
#featured-testimonials-modern .testimonial-nav-btn {
    position: absolute !important;
    top: 50% !important; 
    transform: translateY(-50%) !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    font-size: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 20 !important;
    transition: all 0.3s ease !important;
    border: none !important;
}

#featured-testimonials-modern .testimonial-nav-btn.prev-btn {
    left: 13rem !important; /* Placed exactly inside the 60px safe zone we made in .modern-band */
    background-color: #ffffff !important;
    color: #cbd5e1 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}

#featured-testimonials-modern .testimonial-nav-btn.prev-btn:hover {
    color: #94a3b8 !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important;
}

#featured-testimonials-modern .testimonial-nav-btn.next-btn {
    right: 13rem !important; /* Placed exactly inside the 60px safe zone we made in .modern-band */
    background-color: #3b82f6 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4) !important;
}

#featured-testimonials-modern .testimonial-nav-btn.next-btn:hover {
    background-color: #2563eb !important;
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.5) !important;
}

/* --- Bottom Indicator Dots --- */
#featured-testimonials-modern .testimonial-dots {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 30px !important;
}

#featured-testimonials-modern .testimonial-dots .dot {
    width: 10px !important;
    height: 10px !important;
    background-color: #e2e8f0 !important; 
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

#featured-testimonials-modern .testimonial-dots .dot.active {
    background-color: #3b82f6 !important; 
    width: 24px !important;
    height: 10px !important; 
    border-radius: 5px !important;
}

/* --- Mobile Responsive --- */
@media (max-width: 768px) {
    #featured-testimonials-modern .testimonials-header {
        margin-bottom: 40px !important;
    }
    #featured-testimonials-modern .modern-band {
        padding: 0 10px !important; /* Removes massive side padding on mobile */
    }
    #testimonialSliderModern {
        padding: 20px 0 !important; 
    }
    .modern-testimonial-card {
        padding: 10px 20px 20px 20px !important; /* Re-centers padding for vertical stack */
    }
    #featured-testimonials-modern .modern-testimonial-card .client-image {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        transform: none !important;
        margin: 0 auto 30px auto !important;
        width: 140px !important;
        height: 140px !important;
    }
    #featured-testimonials-modern .modern-testimonial-card .testimonial-content,
    #featured-testimonials-modern .modern-testimonial-card .client-info {
        text-align: center !important;
    }
    #featured-testimonials-modern .modern-testimonial-card .testimonial-content::before {
        left: 0 !important;
        top: -20px !important;
    }
    #featured-testimonials-modern .testimonial-nav-btn {
        display: none !important; /* Hides buttons on small screens */
    }
    
}

/* ============================================================
   ADDITIVE RESPONSIVE & BUTTON FIXES
   (Paste this at the very bottom of your CSS file)
   ============================================================ */

/* ── 1. Fix Desktop Button Overlap (min-width: 992px) ── */
@media (min-width: 992px) {
    /* Overrides the buggy 13rem rule and places buttons inside the 60px padding wall */
    #featured-testimonials-modern .testimonial-nav-btn.prev-btn {
        left: 5px !important; 
    }
    #featured-testimonials-modern .testimonial-nav-btn.next-btn {
        right: 5px !important; 
    }
}

/* ── 2. Tablet Layout (768px - 991px) ── */
@media (min-width: 768px) and (max-width: 991px) {
    #featured-testimonials-modern .modern-band {
        padding: 0 45px !important; /* Slightly smaller safe zone for tablet */
    }
    
    /* Place buttons safely on the edges */
    #featured-testimonials-modern .testimonial-nav-btn.prev-btn {
        left: 0px !important;
    }
    #featured-testimonials-modern .testimonial-nav-btn.next-btn {
        right: 0px !important;
    }

    /* Prevent text crushing by reducing the huge left gap */
    #featured-testimonials-modern .modern-testimonial-card {
        padding: 20px 30px 20px 210px !important;
    }

    /* Scale down the absolute image to fit the tablet screen */
    #featured-testimonials-modern .modern-testimonial-card .client-image {
        width: 150px !important;
        height: 150px !important;
        left: 20px !important;
    }
    
    /* Move quote icon so it stays between image and text */
    #featured-testimonials-modern .modern-testimonial-card .testimonial-quote-icon {
        left: 170px !important;
    }
}

/* ── 3. Mobile Layout (max-width: 767px) ── */
@media (max-width: 767px) {
    /* Restore the buttons (overriding the previous display: none) and scale them down */
    #featured-testimonials-modern .testimonial-nav-btn {
        display: flex !important;
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
        top: 60% !important; /* Move down slightly so they sit beside the text, not the image */
    }

    #featured-testimonials-modern .modern-band {
        padding: 0 35px !important; /* Build a smaller wall for the mobile buttons */
    }

    #featured-testimonials-modern .testimonial-nav-btn.prev-btn {
        left: -5px !important;
    }
    #featured-testimonials-modern .testimonial-nav-btn.next-btn {
        right: -5px !important;
    }

    /* Ensure card stacks perfectly */
    #featured-testimonials-modern .modern-testimonial-card {
        padding: 30px 20px 20px 20px !important;
    }

   #featured-testimonials-modern .modern-testimonial-card .testimonial-quote-icon {
        left: 50% !important;
        transform: translateX(-50%) !important;
        top: 0px !important; /* Pulls the icon up to the very top */
        width: 60px !important; /* Make it slightly larger so it looks like a watermark */
        height: 60px !important;
        opacity: 0.1 !important; /* Slightly softer so it doesn't clash with the text */
    }
}

/* ==========================================================================
   MODERN TEAM SECTION (Image Reference Exact Match)
   ========================================================================== */

/* Outer Section */
#featured-team-modern {
    background-color: transparent !important;
    padding: 60px 20px !important;
    /* max-width: 1200px !important; */
    margin: 0 auto !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
}

#featured-team-modern .team-header {
    margin-bottom: 50px !important;
}

/* Heading Typography */
#featured-team-modern .team-title-section,
#featured-team-modern .team-subtitle-section,
#featured-team-modern .team-description-section {
    color: #ffffff !important; /* Make sure this contrasts with your site's background */
}

/* --- Team Grid and Cards --- */
#featured-team-modern .modern-team-card {
    background-color: #f1f5f9 !important; /* Fallback background */
    border: none !important;
    position: relative !important; /* Critical for absolute positioning inside */
    z-index: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    overflow: hidden !important; /* Keeps sharp rectangular edges */
    border-radius: 0 !important; /* Sharp corners like the image */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    transition: transform 0.3s ease !important;
}

#featured-team-modern .modern-team-card:hover {
    transform: translateY(-5px) !important;
}

/* Image Wrapper */
#featured-team-modern .modern-team-image-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    margin: 0 !important;
}

/* The Image Itself */
#featured-team-modern .modern-team-image-wrapper img.modern-team-img {
    width: 100% !important;
    height: 100% !important;
    min-height: 350px !important; /* Ensures the images are tall like the reference */
    object-fit: cover !important;
    display: block !important;
    border: none !important;
    border-radius: 0 !important;
}

/* Remove the blue offset circle from the previous design */
#featured-team-modern .modern-team-image-wrapper::before {
    display: none !important;
}

/* --- The Blue Info Block (Anchored to the Bottom Left over the Image) --- */
#featured-team-modern .modern-team-info-block {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 75% !important; /* Leaves room on the right for social icons */
    background-color: #3b82f6 !important; /* Theme blue */
    padding: 20px 25px !important;
    z-index: 3 !important;
    margin: 0 !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

/* Info Block Typography */
#featured-team-modern .modern-team-info-block .team-name {
    margin: 0 0 4px 0 !important;
}

#featured-team-modern .modern-team-info-block .team-name a {
    color: #ffffff !important; 
    font-size: 18px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    letter-spacing: 0.5px !important;
}

#featured-team-modern .modern-team-info-block .team-designation {
    display: block !important;
    font-size: 13px !important;
    color: #e2e8f0 !important; /* Light grayish-blue for subtitle */
    font-weight: 400 !important;
    text-transform: none !important;
}

/* --- Floating Social Icons (Anchored to the Bottom Right) --- */
#featured-team-modern .modern-team-card .team-social {
    position: absolute !important;
    bottom: 15px !important; 
    right: 15px !important;
    display: flex !important;
    flex-direction: column !important; /* Stacks icons vertically if there are multiple */
    gap: 8px !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 4 !important;
    border: none !important;
}

#featured-team-modern .modern-team-card .team-social a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    background-color: #2563eb !important; /* Slightly darker blue to stand out */
    color: #ffffff !important;
    border-radius: 50% !important; /* Circle shape */
    font-size: 14px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
}

#featured-team-modern .modern-team-card .team-social a:hover {
    background-color: #1e40af !important;
    transform: scale(1.1) !important;
}

/* --- Mobile Responsive Fixes --- */
@media (max-width: 768px) {
    #featured-team-modern {
        padding: 40px 20px !important;
    }
    #featured-team-modern .modern-team-info-block {
        padding: 15px !important;
        width: 80% !important;
    }
}



#featured-about .about-inner.modern-project-style {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* ── IMAGE GRID ── */
#featured-about .about-image-grid.modern-project-style {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 14px;
    align-items: stretch;
}

#featured-about .about-img-main.modern-project-style {
    grid-column: 1;
    grid-row: 1 / 3;
    height: 500px;
}

#featured-about .about-img-main.modern-project-style img {
    width: 100%;
    height: 100%;
    /* min-height: 420px; */
    object-fit: cover;
    border-radius: 0 110px 0 70px;
    display: block;
}

#featured-about .about-img-bottom.modern-project-style {
    grid-column: 2;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#featured-about .about-img-bottom .img-sm:first-child.modern-project-style img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}
/* ── CIRCLE IMAGE FIX (additive only, no existing rules changed) ── */

#featured-about .about-img-bottom .img-sm.modern-project-style:first-child {
    border-radius: 50%;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    width: 100%;
}

#featured-about .about-img-bottom .img-sm:first-child.modern-project-style img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
}

#featured-about .about-img-bottom .img-sm:last-child.modern-project-style img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 70px 0 70px 0;
    display: block;
}

/* ── BADGE ── */
#featured-about .about-exp-badge.modern-project-style {
   position: absolute;
    top: 32rem;
    left: 5px !important;
   background: linear-gradient(135deg, #0d3b8e, #0c87b8);
    border-radius: 50px 50px 50px 0;
    padding: 14px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* min-width: 120px; */
    width: 100% !important;
    max-width: 44%;
    z-index: 2;
    gap: 2px;
}

#featured-about .about-exp-badge .exp-number.modern-project-style {
    font-size: 26px;
    font-weight: 800;
    color: #7a3e00;
    line-height: 1;
}

#featured-about .about-exp-badge .exp-label.modern-project-style {
    font-size: 12px;
    color: #7a3e00;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
}

/* ── CONTENT COLUMN ── */
#featured-about .about-content.modern-project-style {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#featured-about .about-tag.modern-project-style {
    display: inline-block;
    background: #1a3e6e;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 50px;
    letter-spacing: 0.03em;
    width: fit-content;
}

#featured-about .about-heading.modern-project-style {
    font-size: 38px;
    font-weight: 800;
    line-height: 1.15;
    color: #1a3e6e;
}

#featured-about .about-heading span.modern-project-style {
    color: #2d7dd2;
}

#featured-about .about-desc.modern-project-style {
    font-size: 15px;
    color: #6b7280;
    line-height: 1.75;
}

/* ── FEATURE LIST ── */
#featured-about .about-features.modern-project-style {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
}

#featured-about .feature-item.modern-project-style {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 15px;
    font-weight: 600;
    color: #1e2d3d;
}

#featured-about .feature-icon.modern-project-style {
    width: 42px;
    height: 42px;
    min-width: 42px;
    background: #1a3e6e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 17px;
}

/* ── CTA BUTTON ── */
#featured-about .about-cta.modern-project-style {
    margin-top: 8px;
}

#featured-about .btn-primary.modern-project-style {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #1a3e6e;
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    font-weight: 700;
    padding: 15px 32px;
    border-radius: 50px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

#featured-about .btn-primary:hover.modern-project-style {
    background: #2d5fa0;
}
/* ============================================================
   RESPONSIVE LAYOUT FIX (Main Image Top, Small Below Row)
   ============================================================ */


/* ── 2. STACKING POINT: Laptops & Tablets (max-width: 1200px) ── */
@media (max-width: 1200px) {
    #featured-about .about-inner.modern-project-style {
        grid-template-columns: 1fr !important;
        gap: 50px !important;
    }

    #featured-about .about-image-grid.modern-project-style {
        max-width: 650px !important;
        margin: 0 auto !important;
        width: 100% !important;
        
        /* Reorganize image grid into a simple stack */
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto !important;
        gap: 12px !important;
    }

    #featured-about .about-img-main.modern-project-style {
        grid-column: 1 !important;
        grid-row: 1 !important;
        height: 450px !important;
    }

    /* Small images container at the bottom, arranged side-by-side */
    #featured-about .about-img-bottom.modern-project-style {
        grid-column: 1 !important;
        grid-row: 2 !important;
        flex-direction: row !important;
        gap: 12px !important;
        width: 100% !important;
        justify-content: space-between !important;
    }

    #featured-about .about-img-bottom .img-sm:first-child,
    #featured-about .about-img-bottom .img-sm:last-child.modern-project-style {
        flex: 1 !important;
        width: calc(50% - 6px) !important;
    }

    #featured-about .about-img-bottom .img-sm:first-child img {
        aspect-ratio: 1 / 1 !important;
    }

    #featured-about .about-img-bottom .img-sm:last-child.modern-project-style img {
        aspect-ratio: 4 / 3 !important;
        border-radius: 40px 0 40px 0 !important;
    }

    #featured-about .about-heading.modern-project-style {
        font-size: clamp(26px, 4vw, 34px) !important;
    }
}

/* ── 3. MOBILE SPECIFIC (max-width: 767px) ── */
@media (min-width: 768px) and (max-width: 1200px)  {
    #featured-about .about-img-main.modern-project-style img {
        border-radius: 0 60px 0 40px !important;
    }
    #featured-about .about-exp-badge.modern-project-style{
        bottom: 33% !important;
        width: 100% !important;
    }
}

/* ── 4. SMALLER MOBILE (max-width: 575px) ── */
@media (max-width: 575px) {
    #featured-about {
        padding: 50px 0 !important;
    }

    #featured-about .about-img-main.modern-project-style {
        height: 280px !important;
    }

    #featured-about .about-image-grid.modern-project-style,
    #featured-about .about-img-bottom.modern-project-style {
        gap: 10px !important;
    }

    #featured-about .about-img-bottom .img-sm:first-child,
    #featured-about .about-img-bottom .img-sm:last-child.modern-project-style {
        width: calc(50% - 5px) !important;
    }

    /* Keep the badge compact on small phones */
    #featured-about .about-exp-badge.modern-project-style {
     max-width: 42% !important;
        bottom: 31% !important;
        padding: 10px 14px !important;
    }

    #featured-about .about-heading.modern-project-style {
        font-size: 24px !important;
    }

    #featured-about .about-desc.modern-project-style {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    #featured-about .btn-primary.modern-project-style {
        width: 100% !important;
        justify-content: center !important;
    }
}

@media (min-width: 1536px) {
 
    .container,
    .container-fluid {
        width: 1350px !important;
    }
    #featured-slider .container,
    #featured-slider .container-fluid{
        width: 100% !important;
    }
    #section-header .container,
     #section-header .container-fluid {
        width: 100% !important;
     }
}