/*!
Theme Name: Al Hoty Theme
Theme URI: http://example.com/al-hoty-child/
Author: Underscores.me / Your Name
Author URI: http://underscores.me/
Description: A highly customized theme combining Underscores base styles with a Bootstrap 5 design.
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: alhoty
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, bootstrap

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

alhoty is based on Underscores https://underscores.me/, (C) 2012-2020 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 https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
    - Normalize
    - Box sizing
# Base
    - Typography
    - Elements
    - Links
    - Forms
## Layouts
# Components
    - Navigation
    - Posts and pages
    - Comments
    - Widgets
    - Media
    - Captions
    - Galleries
# plugins
    - Jetpack infinite scroll
# Utilities
    - Accessibility
    - Alignments
# Custom Styles (START)
    - Fonts
    - Global Overrides
    - Navigation Styles
    - Footer Styles
    - Custom Component Styles (Sliders, FAQ)
    - Hero Slider Styles
    - Responsive Overrides
# Custom Styles (END)

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

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
    ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}

/* Sections
    ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
    margin: 0;
	overflow-x:hidden;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
    display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/* Grouping content
    ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
    font-family: monospace, monospace;
    font-size: 1em;
}

/* Text-level semantics
    ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
    background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
    font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/* Embedded content
    ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
    border-style: none;
}

/* Forms
    ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
    overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
    text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
    padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 * `fieldset` elements in all browsers.
 */
legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
    vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
    overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

/* Interactive
    ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
    display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
    display: list-item;
}

/* Misc
    ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
    display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
    display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
    color: #404040;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    clear: both;
}

p {
    margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
    font-style: italic;
}

blockquote {
    margin: 0 1.5em;
}

address {
    margin: 0 0 1.5em;
}

pre {
    background: #eee;
    font-family: "Courier 10 Pitch", courier, monospace;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1.6em;
}

code,
kbd,
tt,
var {
    font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

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

mark,
ins {
    background: #fff9c0;
    text-decoration: none;
}

big {
    font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
    background: #fff;
}

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

ul,
ol {
    margin: 0 0 1.5em 3em;
}

ul {
    list-style: disc;
}

ol {
    list-style: decimal;
}

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

dt {
    font-weight: 700;
}

dd {
    margin: 0 1.5em 1.5em;
}

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

img {
    height: auto;
    max-width: 100%;
}

figure {
    margin: 1em 0;
}

table {
    margin: 0 0 1.5em;
    width: 100%;
}

/* Links
--------------------------------------------- */
a {
    color: #4169e1;
}



a:focus {
    outline: thin dotted;
}

a:hover,
a:active {
    outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    border: 1px solid;
    border-color: #ccc #ccc #bbb;
    border-radius: 3px;
    background: #e6e6e6;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1;
    padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
    border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
    border-color: #aaa #bbb #bbb;
}

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: #666;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 3px;
}

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: #111;
}

select {
    border: 1px solid #ccc;
}

textarea {
    width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
    display: block;
    width: 100%;
}

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

.main-navigation ul ul {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    float: left;
    position: absolute;
    top: 100%;
    left: -999em;
    z-index: 99999;
}

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

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
    display: block;
    left: auto;
}

.main-navigation ul ul a {
    width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
    left: auto;
}

.main-navigation li {
    position: relative;
}

.main-navigation a {
    display: block;
    text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
    display: block;
}

@media screen and (min-width: 37.5em) {

    .menu-toggle {
        display: none;
    }

    .main-navigation ul {
        display: flex;
    }
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
    margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
    display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
    flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
    text-align: end;
    flex: 1 0 50%;
}

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

.post,
.page {
    margin: 0 0 1.5em;
}

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

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

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

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

.bypostauthor {
    display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
    margin: 0 0 1.5em;
}

.widget select {
    max-width: 100%;
}

/* 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 logo link wraps around logo image. */
.custom-logo-link {
    display: inline-block;
}

/* 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
--------------------------------------------- */
.gallery {
    margin-bottom: 1.5em;
    display: grid;
    grid-gap: 1.5em;
}
.gallery-item {
    display: inline-block;
    text-align: center;
    width: 100%;
}

.gallery-columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
    grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
    grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
    grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
    grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
    grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
    display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
    display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
    display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.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;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

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

/* Alignments
--------------------------------------------- */
.alignleft {

    /*rtl:ignore*/
    float: left;

    /*rtl:ignore*/
    margin-right: 1.5em;
    margin-bottom: 1.5em;
}

.alignright {

    /*rtl:ignore*/
    float: right;

    /*rtl:ignore*/
    margin-left: 1.5em;
    margin-bottom: 1.5em;
}

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

/* ==========================================================
# Custom Styles (START) - START OF YOUR CUSTOM CSS OVERRIDES
========================================================== */
.container.page-wrapper{
    padding-top: 30px;
    padding-bottom: 50px;
}
.page-title-wrapper {
    padding-bottom: 0;
    margin-bottom: 0;
}

.page-title-wrapper + p:empty,
.page-title-wrapper + p:blank {
    display: none;
}
/* Target the nbsp paragraph specifically */
.page-wrapper > p:first-of-type:empty,
.page-wrapper > p {
    margin-top: 0;
}

.page-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #000000;
}
/* --- Fonts --- */
@font-face {
    font-family: 'satoshiblack';
    src: url('fonts/satoshi-black-webfont.woff2') format('woff2'),
         url('fonts/satoshi-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'satoshiblack_italic';
    src: url('fonts/satoshi-blackitalic-webfont.woff2') format('woff2'),
         url('fonts/satoshi-blackitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'satoshibold';
    src: url('fonts/satoshi-bold-webfont.woff2') format('woff2'),
         url('fonts/satoshi-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'satoshibold_italic';
    src: url('fonts/satoshi-bolditalic-webfont.woff2') format('woff2'),
         url('fonts/satoshi-bolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'satoshiitalic';
    src: url('fonts/satoshi-italic-webfont.woff2') format('woff2'),
         url('fonts/satoshi-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'satoshilight';
    src: url('fonts/satoshi-light-webfont.woff2') format('woff2'),
         url('fonts/satoshi-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'satoshilight_italic';
    src: url('fonts/satoshi-lightitalic-webfont.woff2') format('woff2'),
         url('fonts/satoshi-lightitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'satoshimedium';
    src: url('fonts/satoshi-medium-webfont.woff2') format('woff2'),
         url('fonts/satoshi-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'satoshimedium_italic';
    src: url('fonts/satoshi-mediumitalic-webfont.woff2') format('woff2'),
         url('fonts/satoshi-mediumitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'satoshiregular';
    src: url('fonts/satoshi-regular-webfont.woff2') format('woff2'),
         url('fonts/satoshi-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'pt_serifbold';
    src: url('fonts/ptserif-bold-webfont.woff2') format('woff2'),
         url('fonts/ptserif-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'pt_serifbold_italic';
    src: url('fonts/ptserif-bolditalic-webfont.woff2') format('woff2'),
         url('fonts/ptserif-bolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'pt_serifitalic';
    src: url('fonts/ptserif-italic-webfont.woff2') format('woff2'),
         url('fonts/ptserif-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'pt_serifregular';
    src: url('fonts/ptserif-regular-webfont.woff2') format('woff2'),
         url('fonts/ptserif-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/* --- Global Overrides --- */
:root {
    --primary-green: #075C3B;
    --dark-text: #0C1311;
    --light-grey-text: #555;
}

/* Reset and Global Font Override */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Your custom box-sizing rule */
}
body {
    font-family: 'satoshiregular', sans-serif; /* Your custom font */
    background-color: #FDFCF7; /* Your custom background color */

}

/* --- Navigation Styles --- */
.navbar {
    background-color: white;
    padding: 5px 5px;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.05);
    border-radius: 45px;
    margin: 20px auto 10px auto;
    display: flex;
    justify-content: space-between;
    gap: 30px;
    width: 100%;
    max-width: 1280px;
    z-index: 9;
}
.nav-container{
    gap: 25px;
}
.navbar-brand img {
    height: 50px;
}

.navbar-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 30px;
}

/* Custom Navigation Links */
.navbar-nav li a {
    color: #333 !important;
    font-size: 1rem;
    font-weight: 500;
    padding: 10px 10px !important;
    border-radius: 25px;
    transition: all 0.3s ease;
    white-space: nowrap;
    text-decoration: none;
}

/* Navigation Link Hover/Focus */
.navbar-nav li a:hover {
    background-color: rgba(10, 92, 79, 0.1);
}

/* Active/Current Menu Item */
.navbar-nav li.current-menu-item a,
.navbar-nav li.current-page-ancestor a,
.navbar-nav li.current-menu-parent a {
    padding: 8px 15px !important;
    border: 2px solid #333;
    background-color: transparent;
}
.phone-number {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #075C3B;
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    margin-right: 14px;
    border-left: 1px solid #727272;
    padding-left: 15px;
}

.phone-icon {
    width: 20px;
    height: 20px;
    color: #075C3B;
}
.inquire-button{
    text-decoration: none !important;
}
.btn-inquire {
    background-color: #075C3B;
    color: white;
    padding: 10px 20px;
    border-radius: 50px;
    border: none;
    font-weight: 500;
    transition: all 0.3s ease;
    min-width: 122px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 14px;
    font-size: 14px;
}

.btn-inquire:hover {
    background-color: #075C3B;
    transform: translateY(-2px);
}
.custom-toggler {
    width: 65px;
    height: 48px;
    border-radius: 50px;
    background: #F2F2F2  !important;
    border: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    /* box-shadow: 0 2px 8px rgba(0,0,0,0.15); */
}

/* Hamburger icon (3 lines) */
.custom-toggler .toggler-icon,
.custom-toggler .toggler-icon::before,
.custom-toggler .toggler-icon::after {
    width: 22px;
    height: 2px;
    background-color: #000;
    display: block;
    position: relative;
    border-radius: 10px;
    transition: 0.3s ease-in-out;
}

.custom-toggler .toggler-icon::before,
.custom-toggler .toggler-icon::after {
    content: "";
    position: absolute;
    left: 0;
}

.custom-toggler .toggler-icon::before {
    top: -6px;
}

.custom-toggler .toggler-icon::after {
    top: 6px;
}

/* When menu is open → convert to X */
.custom-toggler[aria-expanded="true"] .toggler-icon {
    background-color: #F2F2F2 !important;
}

.custom-toggler[aria-expanded="true"] .toggler-icon::before {
    top: 0;
    transform: rotate(45deg);
}

.custom-toggler[aria-expanded="true"] .toggler-icon::after {
    top: 0;
    transform: rotate(-45deg);
}
/* --- Footer Styles --- */
footer.site-footer {
    background-color: #FDFCF7;
    position: relative;
    z-index: 2;
    overflow: hidden;
    padding-bottom: 153px;
}

.footer-main {
    padding-top: 6rem;
    padding-bottom: 6rem;
    border-top: 1px solid rgb(0, 0, 0,0.12);
}
footer.site-footer::after{
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: url("assets/images/Layer 8.svg") no-repeat top -18px center;
    background-size: cover;
    z-index: -1;
    pointer-events: none;
}
/* Typography and Headings */
.footer-heading {
    color: #075C3B;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.footer-description {
    color: #0C1311;
    font-size: 1rem;
    line-height: 1.6;
    max-width: 380px;
    margin-bottom: 2rem;
}

/* Navigation & Contact Items */
.footer-contact-item {
    color: #0C1311;
    text-decoration: none;
    font-size: 1rem;
    line-height: 1.2;
    padding-top: 3px;
    padding-bottom: 3px;
    display: block;
    transition: color 0.2s ease;
    margin-bottom: 1.5rem;
}

#menu-nav-1 li a,
.footer-nav-list li a { /* Target Footer Nav Links */
    color: #0C1311;
    text-decoration: none;
    font-size: 1rem;
    padding-top: 3px;
    padding-bottom: 3px;
    display: block;
    transition: color 0.2s ease;
    text-align: left;
}
#menu-nav-1 li a:hover {
    color: #075C3B; /* Change to your brand color (Green) */
    transform: translateY(-3px); 
}

.list-unstyled {
    padding-left: 0;
    margin-bottom: 0;
}
.footer-nav-list {
    /* CRITICAL: Remove all padding from the UL */
    padding-left: 0 !important;
    /* Ensure no residual list styling or margins */
    margin-left: 0 !important;
    list-style: none !important;
}

/* Ensure list items and links are also flush to the left */
.footer-nav-list li {
    padding-left: 0 !important;
    margin-left: 0 !important;
    margin-bottom: 4px; 
}

.footer-nav-list li a {
    text-align: left;
    /* Ensure the link itself starts at the edge of the parent LI */
    padding-left: 0 !important; 
}
.footer-col-1{
    padding-left: 25px;
}
.footer-col-3 .footer-contact-item:last-child {
    margin-bottom: 0 !important;
}

/* Affiliates Block */
.footer-affiliates-group {
    align-items: center !important; 
    margin-bottom: 2rem !important; 
    flex-wrap: nowrap;
}

.footer-affiliates-title {
    margin-right: 1.5rem !important;
    white-space: nowrap;
    margin-bottom: 0 !important;
    font-weight: bold; 
    font-size: 18px;
    color: #000000;
}

.footer-affiliates-logos-container {
    flex-grow: 1;
    flex-shrink: 1;
    width: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    border-left: 1px solid rgb(207, 207, 207);
    padding-left: 20px;
}

.affiliate-logo-wrapper {
    width: 70px;
    height: 40px; 
    display: flex; 
    align-items: center;
    justify-content: center;
    margin-right: 0.8rem !important; 
    margin-bottom: 0.8rem !important;
}

.affiliate-logo {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    margin: 0 !important;
}

/* Copyright Bar */
.footer-copyright {
    background-color: #FDFCF7;
    display: contents !important;
}

.copyright-text {
    color: #7B7B7B;
    font-size: 0.9rem;
}

/* =========================================
   3. CUSTOM LOGO SLIDER STYLES
   ========================================= */
.logo-slider-header {
    font-family: satoshimedium, sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    text-transform: capitalize;
    color: #0C1311;
    background-color: #EDF5EC;
    border-radius: 50px;
}

.logo-slider-section {
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
}

.logo-carousel-container {
    width: 100%;
    height: 120px;
    padding: 20px 0;
    overflow: hidden;
}


.logo-slide-item {
    text-align: center;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 180px !important;
    height: 80px;
    flex-shrink: 0;
}

.logo-slide-image {
    max-width: 100%;
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: filter 0.3s, transform 0.3s;
}

.logo-slide-image:hover {
    filter: grayscale(0%);
    transform: scale(1.05);
}
.marquee-container {
  overflow: hidden; 
  /* Set the height of the container to be slightly larger than the logos */
  height: 15vh; 
  width: 100%;
}

.marquee-track {
  display: flex; /* Puts all logos in one row */
  /* The key animation line: speed, constant rate, and loop forever */
  animation: scroll-left 30s linear infinite; 
}

.marquee-track .logo-slide-item {
  /* Ensure logo items don't shrink and space them out */
  flex-shrink: 0; 
  padding: 0 20px; 
  
  /* --- FIX 1: Set a fixed, uniform size for the item container --- */
  width: 150px;    /* Example width */
  height: 100px;   /* Example height */
  
  /* Center the image horizontally and vertically within this fixed space */
  display: flex;
  align-items: center;    /* Vertical centering */
  justify-content: center; /* Horizontal centering */
}

.marquee-track .logo-slide-image {
  /* Set a maximum size so they don't get huge on desktop */
  max-height: 80px; 
  /* Set a more flexible height for general scaling */
  height: 6vh; 
  width: auto;
}
.marquee-track .logo-slide-item img {
  /* --- FIX 2: Ensure image fits inside the container --- */
  max-width: 100%; 
  max-height: 100%; 
  width: auto; 
  height: auto;
}
@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  /* Moves the track exactly half of its total width (one full set of logos) */
  100% {
    transform: translateX(-50%); 
  }
}

.grid-item{
    max-height: 210px !important;
    
    /* Optimized gradient for smoother look (kept your original colors/opacities, just noting the consistency point) */
    background: linear-gradient(145deg, rgba(71, 145, 113, 0.2), rgba(54, 121, 88, 0.27));
    
    /* Corrected order for better browser compatibility */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(39px);

    /* subtle border like in the screenshot */
    border: 1px solid rgba(255, 255, 255, 0.15);

    /* soft shadow */
    box-shadow: 
        0 8px 20px rgba(0, 0, 0, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    /* opacity: 0.7;     */
}
/* =========================================
   4. TESTIMONIALS SLIDER STYLES
   ========================================= */
.section-title {
    font-family: 'satoshibold', sans-serif;
    font-size: 56px;
    color: #0B0B0B;
    text-transform: capitalize; 
}

.testimonial-slider-container {
    margin: 0 auto;
    position: relative; 
    /* overflow: hidden; */
}

.testimonial-card {
background-color: #ffffff;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid #8F92923D;
    
    /* MODIFIED: Use initial minimum height for internal structure */
    min-height: 230px; 

    /* Force card to fill available height and control internal layout */
    height: 100% !important; /* Make the card fill the height stretched by the swiper-slide (Flexbox parent) */
    display: flex; 
    flex-direction: column;
    justify-content: space-between; /* Space out top meta and bottom content */
}

/* Quote Icons and Wrappers */
.quote-wrapper {
    position: absolute;
    width: 30px; /* Keep this as the container size for the icon */
    height: 30px; 
    overflow: hidden;
    z-index: 2;
    
    /* Set the SVG as the background image */
    background-image: url('assets/images/Vector (3).svg');
    background-size: contain; /* Ensure the SVG scales to fit the 30x30 wrapper */
    background-repeat: no-repeat;
    background-position: center;
}

.quote-close-wrapper {
    /* This positions the 30x30 wrapper at the top right */
    top: 24px;
    right: 36px;
}
/* Name and Role Alignment */
.testimonial-meta { 
    flex-grow: 1; 
    text-align: left;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 2px;
    margin-top: auto;
}
.testimonial-name {
    font-family: 'satoshibold', sans-serif;
    font-size: 1.2rem;
    color: #0C1311;
    margin-bottom: 0;
}
.testimonial-role { font-size: 12px; color: #5C6160; }

.testimonial-content {
    font-family: 'satoshiregular', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: #0C1311;
    margin-top: 8px;
    line-height: 1.4;
    padding: 0 20px;
    flex-grow: 1 !important;
    margin-bottom: auto;
}
.testimonial-content p:empty,
.testimonial-content p:empty::before,
.testimonial-content p:empty::after {
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    line-height: 0 !important;
    display: none !important; /* Safest way to ensure they add no space */
}
span.swiper-slide-notification {
    display: none !important;
    visibility: hidden !important;
}
.testimonial-slider-container .swiper-slide {
    padding: 0 10px; /* Add slight horizontal padding here for mobile space */
}
.testimonial-slider-container .swiper-wrapper {
    pointer-events: none; /* Allow clicks to pass through the slides */
}
.slick-prev,
.slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    
    /* --- CHANGES TO REMOVE THE CIRCLE/BOX --- */
    /* Set dimensions to the size of the icon itself (e.g., 20px) */
    width: 35px; 
    height: 35px;

    border-radius: 0; /* No rounding */
    border: none; /* No border */
    
    /* Display properties for the icon */
    display: block !important; /* Change from flex to block/inline-block is safer here */
    justify-content: center; /* No effect if not flex */
    align-items: center; /* No effect if not flex */
    cursor: pointer;
    transition: 0.3s ease;
    
    /* Properties to display the background image (the SVG) */
    background-size: 100% !important; /* Adjust the icon size to fit the 20x20 box */
    background-repeat: no-repeat !important; /* CRITICAL: Prevents tiling */
    background-position: center !important; /* Centers the icon */
}
.slick-prev {
    left: -36px;
    /* This path displays the left arrow icon */
    background: url('assets/images/Vector (2).svg');
}

.slick-next {
    right: -36px;
    /* This path displays the right arrow icon */
    background: url('assets/images/Vector (1).svg');
}

/* Remove default arrows text and pseudo-elements (as icon is on main element) */
.slick-prev:before,
.slick-next:before {
    content: none;
    display: none; 
}
.slick-prev:hover, .slick-prev:focus{
    background: url("assets/images/vector (5).png") !important;
     background-size: 100% !important; /* Adjust the icon size to fit the 20x20 box */
    background-repeat: no-repeat !important; /* CRITICAL: Prevents tiling */
    background-position: center !important;
}
.slick-next:hover, .slick-next:focus{
    background: url("assets/images/right.png") !important;
     background-size: 100% !important; /* Adjust the icon size to fit the 20x20 box */
    background-repeat: no-repeat !important; /* CRITICAL: Prevents tiling */
    background-position: center !important;
}
button:focus:not(:focus-visible) {
    outline: none;
}
/* =========================================
   5. FAQ ACCORDION STYLES
   ========================================= */
.faq-accordion { max-width: 100%; }
.section-subtitle { 
    font-family: 'satoshibold', sans-serif;
    font-size: 3rem;
    font-weight: 500;
    color: #0C1311;
    text-transform: capitalize;
}
.faq-content{
    font-family: "satoshiregular", sans-serif;
    font-size: 1rem;
    text-transform: capitalize;
    color: #0C1311;
}
.faq-accordion .accordion-item:first-of-type > .accordion-header .accordion-button {
    border-top-left-radius: 12px !important; 
    border-top-right-radius: 12px !important;
}

.faq-accordion .accordion-button.collapsed {
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}
.faq-item {
    border: none;
    margin-bottom: 15px;
    border-radius: 12px !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    padding: 12px;
}
.faq-header { border-radius: 12px; }
.faq-question {
    font-family: 'satoshimedium', sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    color: #0C1311;
    background-color: #FFFFFF;
    border: none;
    border-radius: 12px;
    padding: 18px 0;
    width: 100%;
}

.faq-question:not(.collapsed) {
    background-color: white !important;
    color: #0C1311;
    box-shadow: none;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.faq-item .accordion-collapse {
    padding: 0 !important;
    margin: 0 !important;
}

.faq-answer {
    color: #0C1311;
    background-color: #EEF6ED; 
    padding: 14px 20px !important;
    margin: 0 !important;
    border: none;
    border-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}
.accordion-body.faq-answer p{
    margin-bottom: 0 !important;
}
.accordion-body.faq-answer{
    padding: 70px 24px 24px 24px;
}
.faq-question:focus { box-shadow: none; }

/*----------------- hero slider -------------------*/
/* ===============================
   SLIDE TWO – LAYOUT
================================ */

.slide-two {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 90px 0;
    overflow: hidden;
}

/* LEFT CONTENT (same style reused) */

.slide-two .slider-content-left {
    width: 60%;
    position: relative;
    z-index: 2;
    bottom: 60px;
    /* left: 80px; */
}

/* RIGHT IMAGE */

.slider-image-right {
    width: 40%;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2;
    padding-left: 150px;
}


.hero-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-section-container {
    display: flex; /* Enables flexible arrangement */
    justify-content: space-between; /* Pushes the left and right sections apart */
    align-items: center; /* Vertically centers the two sections */
    width: 100%; /* Ensure the container spans the full width */
    margin: 0 auto; /* Centers the whole section */
}

.hero-background.elementor-element::before {
    content: '' !important;
    display: block !important;
    background: url("assets/images/Frame 2147224661.svg") no-repeat top left;
    position: absolute;
    top: -90px;
    width: 100%;
    background-size: cover;
    left: 0;

}
.button-container.cp-btn-apply{
    border: none;
    padding: 0 !important;
}
.button-container.cp-btn-apply:hover {
    background-color: transparent !important;
    border: none !important;
    color: inherit !important;
}
.hero-background:after {
    content: '';
    position: absolute;
    bottom: -260px;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("assets/images/Layer 2.svg") no-repeat;
    background-size: cover;
    z-index: 0;
}
/* content above waves */
.hero-background > * {
    position: relative;
    z-index: 2;
}
/* Container for the left side - assumes a 12-column grid or similar */
#slider_196 .owl-item{
    padding-top: 40px;
    padding-bottom: 20px;
}
.slider-content-left {
    /* Adjust these based on your slider's overall layout */
    width: 50%; /* Approx col-6 width */
    box-sizing: border-box;
}

/* Headings */
.slider-content-left h1 {
    font-family: "satoshiregular", sans-serif;
    font-size: 66px; /* Adjust size as needed */
    font-weight: 400;
    line-height: 1.1;
    color: #000; /* Black text */
    margin-top: 10px;
    margin-bottom: 20px;
        --animate-delay: 4s;
}

/* Highlighted Green Text */
.slider-content-left .highlight {
    font-weight: 700;
    font-family:"pt_serifbold_italic",sans-serif;
    font-style: italic;
    font-size: 66px;
background: linear-gradient(to bottom, #28ab78, #075C3B); 
    
    /* 2. Clip the background to the shape of the text */
    -webkit-background-clip: text;
    background-clip: text;
    
    /* 3. Make the text color transparent so the background shows through */
    -webkit-text-fill-color: transparent;
    color: transparent; /* Fallback for non-webkit browsers */
}
.slider-content-left .highlight.line-break {
    display: block;
}
/* Paragraph Text */
.slider-content-left p {
    font-size: 18px;
    color: #333; /* Dark grey text */
    margin-bottom: 30px;
    max-width: 90%; /* Helps keep the text contained */
    --animate-delay: 7s;
}
.button-container{
    --animate-delay: 9s;
}
.pill-tag {
    display: inline-block; /* Makes the background fit the text */
    padding: 5px 15px;
    border: 1px solid #ffffff00; /* Light border */
    border-radius: 50px; /* Makes it look like a pill */
    text-transform: uppercase;
    font-size: 0.8em;
    font-weight: 600;
    letter-spacing: 1px;
    color: #000000;
    margin-bottom: 10px;
    background-color: rgba(0, 0, 0, 0.05);
    z-index: 9;
}
.rounded-pill-button {
    display: inline-block;
    background-color: #075C3B; /* Green background */
    color: #fff;
    padding: 12px 30px;
    border-radius: 50px; /* Rounded corners */
    text-decoration: none; /* Removes underline */
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.3s ease;
    position: relative; 
}
    .rounded-pill-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(146, 146, 146, 0.3);
}

.rounded-pill-button:visited {
    /* Assuming the text color in the original state is white (#fff) based on standard button design */
    color: #fff !important; 
}
.rounded-pill-button::after {
    content: ''; /* Must be set for ::after to work */
    
    /* 1. Add the Image */
    background-image: url('assets/images/Vector (1).png'); /* <--- REPLACE THIS URL */
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute; /* Relative to the button */
    top: 80%; /* Example: Start at the middle vertically */
    left: 110%; /* Start to the right of the button */
    transform: translate(25px, -50%); /* Move 15px to the right and center vertically */
    filter: 
        brightness(1) /* Slightly darken the image overall */
        contrast(2);

    width: 163px; /* Adjust size of the arrow graphic */
    height: 58px; /* Adjust size of the arrow graphic */
}
.hero-section-container .col-6.slider-content-left{
    width: 55%;
}
.right-section-main {  
    /* Set max width to match the Figma composite width */
    width: 40%;
    height: 566px; /* 283px * 2 = 566px */
    margin-right: 5px;
    position: relative;
    padding-left: 50px;
    padding-right: 1px;
}

/* --- 2. Defining the Columns (37% and 63%) --- */
.image-column {
    display: flex;
    flex-direction: row;
    gap: 15px; /* Remove gap between the vertical images */
}
.image-column .bottom-section img{
    height: 220px !important;
}
.image-column .top-section .width-small{
    --animate-delay: 12s;
}
.image-column .top-section .width-large{
    --animate-delay: 18s;
}
.image-column .bottom-section .width-large{
    --animate-delay: 14s;
}
.image-column .bottom-section .width-small{
    --animate-delay: 20s;
}
#slider_196 .owl-item {
    padding-top: 40px;
}

/* --- 3. Base Box & Image Fitting --- */
.image-box {
    /* Each box should take 50% of the column height (283px) */

    overflow: hidden; 
    position: relative;
    
    /* Fix for overlapping/touching issue */
    margin: -1px; 
}
.width-small img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover; 
}
.width-large img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover; 
}

.width-small {
    width: 200px;
    border-radius: 150px;
}

/* Wide/Horizontal Images (Rounded Square shape) - Go in .column-wide and .box-3 */
.width-large {
    width: 343px;
    border-radius: 120px;
}
.bottom-section{
    margin-top: 8px;
    max-height: 285px;
}
#slider_196.sa_owl_theme .owl-dots {
    bottom: 126px !important;
    /* left: -125px; */
}
#slider_196 .owl-dots .owl-dot span {
    background-color: #C1DBC885 !important; 
    /* Add this if your dots are transparent and showing the background */
    opacity: 1 !important; 
}

/* 2. Style for Active Dots (The Fix) */
#slider_196 .owl-dots .owl-dot.active span {
    background-color: #075C3B !important; 
}

#slider_196 .owl-dots .owl-dot.active {
    opacity: 1 !important; 
    background: none !important; 
}

/* 4. Hover State */
#slider_196 .owl-dots .owl-dot:hover span {
    background-color: #333333 !important; 
}
.elementor-24 .elementor-element.elementor-element-3f1223a {
    margin-left: 0;
    margin-right: 0;
    overflow-x: hidden;
}
.home-career-container{
    display: block;
}
.home-career{
    position: relative;
    height: 100%;
}
.home-career-icon{
    position: absolute !important;
    bottom: 381px;
    left: 385px;
}
.home-career-icon2{
    position: absolute !important;
    bottom: 72px;
    left: 2px;

}
.cp-btn-apply.home-apply {
    padding: 0 !important;
    border: none !important;
}
.cp-btn-apply.home-apply:hover {
    background-color: transparent !important;
    color: #fff;
}
/*---------contact-us Page -------------*/
.cut-card {
    position: relative !important;
}
.cut-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.logo-wrapper {
    position: absolute;
    left: -32px;
    bottom: -21px;
    width: 125px; /* Adjust size as needed */
    height: 125px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* The Rotating SVG Container */
.rotating-text {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: rotateText 15s linear infinite; /* Adjust speed here */
    background: #075C3B;
    border-radius: 50%;
}
.rotating-text svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.rotating-text text {
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    font-size: 14.5px; /* Adjust font size to fit your circle */
    fill: #fff; /* Match your dark green color */
    letter-spacing: 1px;
}
/* The Center Logo */
.center-logo {
      z-index: 2;
    background: #fff;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.center-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* Keyframes for Rotation */
@keyframes rotateText {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.contact-detail-content::after{
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: url("assets/images/contact-us-bg.svg") no-repeat bottom -4px center;
    background-size: cover;
    z-index: 1;
    pointer-events: none;
}
.contact-wrapper {
  max-width: 750px;
  margin: 40px auto;
  background: #ffffff;
  padding: 40px 50px;
  border-radius: 22px;
  box-shadow: 0 0 40px rgba(0,0,0,0.08);
}
/* title + text alignment */
.contact-wrapper .content {
    text-align: center;
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.contact-wrapper .content h2 {
  font-size: 48px;
  font-weight: 500;
  margin-bottom: 10px;
  color: #000;
}

.contact-wrapper .content p {
  color: #666;
  font-size: 16px;
  width: 100%;
  max-width: 320px;
}

/* input styling */
.input-field,
.textarea-field,
.wpcf7-form-control {
  width: 100%;
  padding: 12px 14px !important;
  border: 1px solid #e2e2e2 !important;
  border-radius: 10px !important;
  background: #fff !important;
  font-size: 16px !important;
  color: #585858 !important;
  font-family: 'satoshiregular', sans-serif !important;
}
.form-wrapper{
    row-gap: 15px !important;
}
/* textarea height */
.textarea-field {
  height: 140px;
}
.input-field,
.code-field{
  margin-bottom: 16px;
}
/* spacing between inputs */
.form-wrapper p {
  margin-bottom: 15px !important;
}

/* send button */
.send-btn {
  display: block;
  width: 100%;              /* makes it stretch full width of form */
  max-width: 135px;         /* controls final visual width */
  margin: 15px auto 0;      /* centers it */
  padding: 12px 0 !important;
  background: #ffffff !important;
  color: #333333 !important;
  border-radius: 40px !important;
  border: 1px solid #000 !important;
  cursor: pointer !important;
  font-family: 'satoshiregular', sans-serif !important;
}
.send-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(146, 146, 146, 0.3);
}
.contact-us-form .wpcf7 form.invalid .wpcf7-response-output,
.contact-us-form .wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
    border: none !important;
    background: transparent !important;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    color: #000000; /* optional: error red */
    margin: 20px auto 0;
    padding-bottom: 40px;
}
.conatct-us-form .wpcf7 form.sent .wpcf7-response-output {
    border: none !important;
    background: transparent !important;
    color: #2e7d32;
    font-size: 18px;
    text-align: center;
}
.contact-us-form .input-field{
    margin-bottom: 12px !important;
}
.contact-us-form .wpcf7-not-valid-tip {
    margin-top: 0;      /* reduce space */
    padding-top: 0;
    font-size: 14px;      /* optional */
    line-height: 1.2;

}

/*---------------sevices detail page--------------*/
.survey-modelling-hero-container::before,
.about-us-hero-container::before{
    content: '' !important;
    display: block !important;
    width: 100%;
    background: 
    url("assets/images/green-gradient-curve.svg") no-repeat bottom 6px left,
    linear-gradient(180deg, #699C81 0%, #FDFCF7 100%);
    position: absolute !important;
    background-size: cover, cover;
    top: -90px !important;
}

.survey-content-container::after{
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: url("assets/images/survey-modeling-bg.svg") no-repeat bottom 6px center;
    background-size: contain;
    pointer-events: none;
}
.my-icon-box .elementor-icon i,
.my-icon-box .elementor-icon svg {
    font-size: 28px;
    width: 28px;
    height: 28px;
}
/* Line behind the icons */
.process-steps {
    position: relative;
}

.process-steps::before {
    content: "";
    position: absolute;
    left: 21px;            /* adjust horizontally to center on icons */
    top: 0;
    bottom: -50px;
    width: 2px;
background-image: linear-gradient(to bottom, 
        rgba(255,255,255,0.9) 50%, 
        transparent 50%
    );
    background-size: 2px 10px; /* Adjust '10px' to change the spacing/length of dots */
    background-repeat: repeat-y;    z-index: 1;
}

/* ensure icons sit above the line */
.my-icon-box .elementor-icon {
    position: relative;
    z-index: 2;
}
.services-detail-content::after{
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: url("assets/images/Layer 1.svg") no-repeat bottom -143px center;
    background-size: cover;
    z-index: 1;
    pointer-events: none;
}
.survey-quality-container::before{
    content: '' !important;
    display: block !important;
    background: url("assets/images/survey-quality-bg.svg") no-repeat top left;
    position: absolute !important;
    top: 10px !important;
    width: 100% !important;
    background-size: contain;
    left: 0;

}

/*----------------services page------------*/
.service-hero-container::after{
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: url("assets/images/service-hero-bg.svg") no-repeat bottom 3px center;
    background-size: contain;
    pointer-events: none;

}
.service-content-container::after{
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: url("assets/images/Frame.svg") no-repeat bottom 31px center;
    background-size: contain;
    z-index: 1;
    pointer-events: none;
}
.sa-slider-container {
  max-width: 1280px;
  margin: 0 auto;
}
.service-slider-container .white{
    overflow: visible !important;
}
.service-slider-container .white > .showcase_nav .owl-prev,
 .service-slider-container .white > .showcase_nav .owl-next{
    background: none !important;
}
.service-slider-container #showcase_670 .owl-prev:before,
.service-slider-container #showcase_670 .owl-next:before {
    display: none !important;
}
.service-slider-container .white > .showcase_nav.autohide_arrows {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 20px !important;
    position: absolute !important;
    top: -70px !important;
    width: auto !important;
    height: auto !important;
    right: 28px !important;
    z-index: 9999 !important;
}
.service-slider-container #showcase_670.showcase_nav.disabled {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 20px !important;
}

.service-slider-container #showcase_670.showcase_nav button.owl-prev,
.service-slider-container #showcase_670.showcase_nav button.owl-next {
    border-radius: 100% !important;
    border: 1px solid #212121 !important;
    height: 50px !important;
    width: 50px !important;
    padding: 0 !important;        /* remove padding causing size conflict */
    flex-shrink: 0 !important;    /* prevent buttons from shrinking */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important;
    transform: none !important;   
    vertical-align: middle !important;
}

.service-slider-container #showcase_670.showcase_nav button.owl-prev:hover,
.service-slider-container #showcase_670.showcase_nav button.owl-next:hover {
    background-color: #212121 !important;
    border-color: #212121 !important;
    cursor: pointer !important;
}

/* Non-hover state */
.service-slider-container #showcase_670.showcase_nav button.owl-prev {
    background: url("assets/images/arrow-left.svg") no-repeat center center !important;
    transform: scaleX(-1) !important;
    filter: brightness(0) !important
}

.service-slider-container #showcase_670.showcase_nav button.owl-next {
    background: url("assets/images/arrow-left.svg") no-repeat center center !important;
    transform: none !important;
    filter: brightness(0) !important
}

/* Hover state */
.service-slider-container #showcase_670.showcase_nav button.owl-prev:hover {
    background: #212121 url("assets/images/arrow-left.svg") no-repeat center center !important;
    transform: scaleX(-1) !important; /* keep same transform as non-hover */
    filter: none !important;
}

.service-slider-container #showcase_670.showcase_nav button.owl-next:hover {
    background: #212121 url("assets/images/arrow-left.svg") no-repeat center center !important;
    transform: none !important; /* keep same transform as non-hover */
    filter: none !important;
}

/* each card */
.service-card {
    position: relative;
}

/* hover effect */
.service-card:hover {
  transform: translateY(-6px);
}

/* image wrapper with rounded diagonal */
.service-image {

  overflow: hidden;
  margin-bottom: 14px;

  /* this creates diagonal rounded corners like figma */
  clip-path: polygon(
    0% 28%,           /* slight diagonal top left */
    25% 0%,           
    100% 0%,
    100% 70%,         /* slight diagonal bottom right */
    79% 100%,
    0% 100%
  );
  border-radius: 24px;
}

/* image */
.service-image img {
  width: 100%;
  /* height: auto; */
  display: block;
}

/* index label like [01] */
.service-index {
  position: absolute;
  top: 3px;
  left: 6px;
  font-family: "satoshiregular",sans-serif;
  background: #FDFCF7;
  padding: 2px;
  font-weight: 700;
  border-radius: 6px;
  font-size: 18px;

  z-index: 5;
}
/* title */
.service-title {
  font-size: 24px;
  font-weight: 500;
  font-family: "satoshiregular",sans-serif;
  margin-bottom: 6px;
  color: #212121;
}

/* description */
.service-desc {
  font-size: 18px;
  color: #272727;
  line-height: 1.2;
  font-family: "satoshiregular",sans-serif;
}

/* navigation arrows */
.sa-slider-prev,
.sa-slider-next {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid #000;
  background: transparent;
  color: #000 !important;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .25s ease;
}

/* hover like figma */
.sa-slider-prev:hover,
.sa-slider-next:hover {
  background: #000;
  color: #fff !important;
}

/* arrow icon font-size */
.sa-slider-prev i,
.sa-slider-next i {
  font-size: 16px;
}

/* precise positioning */
.sa-slider-prev { left: -60px; }
.sa-slider-next { right: -60px; }
.service-logo {
    position: absolute;
    bottom: 120px;
    left: 8px;
    background: #ffffff;
    padding: 2px;
    border-radius: 14px;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.12);
    opacity: 1;
    transform: none;
}
.service-logo.item2{
   bottom: 120px !important; 
}
/* logo image sizing */
.service-logo img {
  max-height: 34px;
  width: auto;
  display: block;
}
#showcase_670.owl-nav {
    opacity: 1 !important;
    visibility: visible !important;
}
#showcase_670.disabled {
    display: block !important;
}
#showcase_670 .owl-prev,
#showcase_670 .owl-next {
    z-index: 99 !important;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
     width: 44px;
    height: 44px;
    background: #ffffff;
    border-radius: 50%;
    border: 1px solid #E5E5E5;
    box-shadow: 0 8px 25px rgba(0,0,0,0.07);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 0;
}
#showcase_670 .owl-prev:before,
#showcase_670 .owl-next:before {
    content: '';
    width: 10px;
    height: 10px;
    border-top: 2px solid #111;
    border-left: 2px solid #111;
    display: block;
}
#showcase_670 .owl-prev:before {
    transform: rotate(-45deg);
}
#showcase_670 .owl-next:before {
    transform: rotate(135deg);
}
#showcase_670 .owl-prev { left: -20px; }
#showcase_670 .owl-next { right: -20px; }

/*------------------gallery page--------------*/
body.page-id-694{
    background:url("assets/images/gallery-bg.svg") no-repeat top center;
    background-size: cover;

}
    .gallery-card .elementor-image-gallery .gallery-item{
        border-radius: 16px;
        position: relative;
        overflow: hidden;
        
    }
    .gallery-card .elementor-image-gallery .gallery-item ::before{
        content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(0, 0, 0, 0.35) 40%,
        rgba(0, 0, 0, 0.1) 70%,
        rgba(0, 0, 0, 0.05) 100%
    );

    pointer-events: none;
     } 
    .gallery-card 
.elementor-image-gallery 
.gallery-icon {
  position: relative;
}
    .gallery-card .elementor-image-gallery .gallery-item .gallery-caption {
    bottom: 25px;
    left: 20px;
    position: absolute;
}
.elementor-694 
.elementor-element.elementor-element-aafb829 
.gallery-item{
    padding: 0 !important;
}
.gallery-card .elementor-image-gallery .gallery.gallery-columns-3 .gallery-item{
    max-width: 100% !important;
}

/*------------career-page----------*/
.career-hero-icon .elementor-icon-box-description {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.career-hero-img{
    position: relative;
}
.career-hero-icon{
    border: 6px solid #FFFFFF3B;
    display: inline-flex;
    align-items: center !important;
    width: auto;
    position: absolute !important;
    top: 88px;
    right: -2px;
}
.career-hero-icon .elementor-icon-box-wrapper,
.career-hero-icon2 .elementor-icon-box-wrapper{
    border-radius: 999px;
    background: white;
    padding: 8px;
}
.career-hero-icon2{
    border: 6px solid #FFFFFF3B;
    display: inline-flex;
    align-items: center !important;
    width: auto;
    position: absolute !important;
    bottom: 45px;
    left: 0;
}
.career-hero-icon .elementor-icon-box-title,
.career-hero-icon2 .elementor-icon-box-title{
    margin-bottom: 0 !important;
}
.career-highlight{
        font-weight: 700;
    font-family:"pt_serifbold_italic",sans-serif;
    font-style: italic;
    font-size: 48px;
background: linear-gradient(to bottom, #28ab78, #075C3B); 
    
    /* 2. Clip the background to the shape of the text */
    -webkit-background-clip: text;
    background-clip: text;
    
    /* 3. Make the text color transparent so the background shows through */
    -webkit-text-fill-color: transparent;
    color: transparent; /* Fallback for non-webkit browsers */
}
.craeer-content-container::after{
    content: '';
    position: absolute;
    display: block;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: url("assets/images/caree-content-bg.svg") no-repeat bottom 170px center;
    background-size: contain;
    pointer-events: none;
}
.career-content{
    display: block;
}
.career-img1{
    position: relative;
}
.career-img2{
    position: absolute !important;
    bottom: 87px;
    left: -56px;
}
.career-logo{
    position: absolute !important;
    bottom: 134px;
    left: 173px;
}
.career-logo .logo-wrapper {
    position: absolute;
    left: -32px;
    bottom: -21px;
    width: 85px;
    height: 85px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.career-logo .center-logo {
    z-index: 2;
    background: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* .cp-main-title, .cp-sub-title, .cp-auth-hint-text,
.cp-sort-label, .cp-filter-location, .cp-filter-type, .cp-filter-department,
.cp-auth-links, .cp-job-title, .cp-job-meta, .cp-job-actions{
    font-family: "satoshiregular", sans-serif !important;
} */
.cp-btn-view{
    color: #070707 !important;
}
/*------------------ about-us page ---------------*/

.legacy-container::before{
    content: '' !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    background: url("assets/images/legacy-bg.svg") no-repeat top center;
    position: absolute !important;
    background-size: cover;
    top: -90px !important;
}
.stat-divider {
    position: relative !important;
    padding-right: 45px !important; /* space for divider */
}

/* vertical line */
.stat-divider::before {
    content: "";
    position: absolute !important;
    right: 0;
    top: 8%;
    bottom: 8%;
    width: 2px;
    background-color: #075C3B;
}

/* bottom dot */
.stat-divider span::before {
    content: "";
    position: absolute !important;
    right: -3px;
    bottom: 7%;
    width: 8px;
    height: 8px;
    background-color: #075C3B;
    border-radius: 50%;
}

/* top dot */
.stat-divider span::after {
    content: "";
    position: absolute !important;
    right: -3px;
    bottom: 90%;
    width: 8px;
    height: 8px;
    background-color: #075C3B;
    border-radius: 50%;
}
.stat-divider:last-child span::after, 
.stat-divider:last-child span:before,
.stat-divider:last-child:before{
    display: none;
}
.about-us-history{
    position: relative !important;
}
.about-us-img1{
    position: absolute !important;
    top: -88px;
    right: 279px;
}
.about-us-img1 img{
    max-width: none !important;
}
.about-us-img2{
    position: absolute !important;
    top: 70px;
    left: 155px;
}
.about-us-icon{
    position: absolute !important;
    top: 83px;
    left: 389px;
}
.vision-container{
    position: relative !important;
}
.vision-img1{
    position: absolute !important;
    z-index: 1;
}
.vision-img2{
    position: absolute !important;
    left: -38px;
    top: -51px;
    z-index: 0;
}
.vision-img3{
    position: absolute !important;
    left: 31px;
    top: -62px;
}
.vision-img4{
    position: absolute !important;
    bottom: -190px;
    right: -38px;
    z-index: 0;
}
.elementor-1351 .elementor-element.elementor-element-9855f5c 
.elementor-counter-title, .elementor-1351 .elementor-element.elementor-element-4e420fe 
.elementor-counter-title, .elementor-1351 .elementor-element.elementor-element-41f946f 
.elementor-counter-title, .elementor-1351 .elementor-element.elementor-element-b127aa5 
.elementor-counter-title{
    text-align: center !important;
}
.values-content-container::after{
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: url("assets/images/about-us-core-bg.svg") no-repeat top 885px center;
    background-size: contain;
    pointer-events: none;
}

/* =========================
   404 PAGE STYLES
========================= */

.error-404-container {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.error-404-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.error-code {
    font-size: 120px;
    font-weight: 700;
    color: #000000; /* match your brand green */
    margin-bottom: 10px;
}

.error-404 .page-title {
    font-size: 32px;
    margin-bottom: 15px;
    color: #1f2937;
}

.error-description {
    font-size: 16px;
    color: #6b7280;
    margin-bottom: 30px;
    line-height: 1.6;
}

/* Search */
.error-search {
    margin-top: 30px;
}

.error-search form {
    max-width: 400px;
    margin: 0 auto;
}

.error-search input[type="search"] {
    width: 100%;
    padding: 12px 16px;
    border-radius: 30px;
    border: 1px solid #d1d5db;
}
.error-404 .search-form .search-submit {
    border: 1px solid;
    border-color: #ccc #ccc #bbb;
    border-radius: 10px;
    background: #075C3B;
    color: #ffffff;
    line-height: 1;
    padding: 10px 15px;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.error-404 .search-form .search-submit:hover {
    transform: translateY(-2px);
}

/* ================ SEARCH-PAGE-STYLES=============================*/
 /* body.search .search-wrapper {
    padding: 80px 0;
    background-color: #FBFAF6; 
 }  */
   body.search .page-header {
    margin-bottom: 20px;
    padding-left: 0;
    text-align: left;
}

body.search .page-title {
    font-size: 32px;
    font-weight: 600;
    color: #0B0B0B;
    margin-bottom: 20px;
}

body.search .page-title span {
    color: #000000;
}
body.search article {
    padding: 30px;
    padding-left: 0;
    margin-bottom: 20px;
}
body.search article * {
    text-align: left;
}
body.search .entry-title {
    margin-left: 0;
}

body.search .entry-title a {
    font-size: 22px;
    font-weight: 600;
    color: #000000;
    text-decoration: none;
}

body.search .entry-title a:hover {
    text-decoration: underline;
}
body.search .entry-summary {
    font-size: 15px;
    line-height: 1.7;
    color: #555;
    margin-top: 10px;
} 
.hero-background-auto {
    position: relative;
}

.hero-background-auto::before {
    content: '' !important;
    display: block !important;
    background: url("assets/images/auto-care-wave.png") no-repeat bottom left;
    background-size: cover;
    position: absolute;
    top: -90px;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* content sits above the wave */
.hero-background-auto > * {
    position: relative;
    z-index: 2;
}
.auto-capabilities {
    position: relative;
}

.auto-capabilities::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("assets/images/Why-Choose-Us.png") no-repeat bottom left;
    background-size: contain;
    pointer-events: none;
}

/* keep text and image above the wave */
.auto-capabilities > * {
    position: relative;
    z-index: 2;
}
.hero-auto .pill-tag {
    background-color: #E9F4EC;
    color: #075C3B;
    font-size: 12px;
    letter-spacing: 0.5px;
    padding: 6px 14px;
    margin-bottom: 14px;
}

.hero-auto .hero-line {
    display: block;
    white-space: nowrap;
}

.hero-auto .slider-content-left h1,
.hero-auto .slider-content-left .highlight {
    font-size: 66px;
}

.hero-auto .slider-content-left h1 {
    line-height: 1.15;
    margin-bottom: 16px;
}

/* --- Paragraph --- */
.hero-auto .slider-content-left p {
    font-size: 18px;
    max-width: 420px;
    margin-bottom: 24px;
}

/* --- Button: smaller, and remove the squiggle arrow --- */
.hero-auto .rounded-pill-button {
    padding: 12px 26px;
    font-size: 14px;
}

.hero-auto .rounded-pill-button::after {
    display: none;
    content: none;
}
.hero-auto .col-6.slider-content-left {
    width: 62%;
}

.hero-auto .right-section-main {
    width: 38%;
    padding-left: 20px;
}
.hero-auto .cert-block{
  margin-top:30px;
}
.hero-auto .cert-block-title{
  display:block;
  margin-bottom:12px;
  font-size:24px;
  font-weight:700;
  line-height:1.2;
  color:#000000;
}
.hero-auto .cert-badge{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:14px 22px;
  background:#fff;
  border-radius:12px;
  text-decoration:none;
  box-shadow:0 2px 8px rgba(0,0,0,.07);
  transition:box-shadow .25s ease, transform .25s ease;
}
.hero-auto .cert-badge:hover,
.hero-auto .cert-badge:focus{
  box-shadow:0 8px 20px rgba(0,0,0,.12);
  transform:translateY(-2px);
  text-decoration:none;
}
.hero-auto .cert-badge img{
  display:block;
  height:42px;
  width:auto;
}

  /* 6. RESPONSIVE OVERRIDES
   ========================================= */

@media (max-width: 1200px) {
       body.mobile-menu-open {
        background-color: #0A5B44 !important;
        overflow: hidden;
    }
    .navbar{
        background: white;
    }
    .nav-container{
        gap: 12px;
    }
    .nav-button-wrapper{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    /* White main container (match figma width) */
    #navbarNav {
        background: #ffffff !important;
        border-radius: 32px;
        padding: 28px 28px 35px 28px;
        width: 100%;
        margin: 20px auto;
        box-shadow: 
            0px 12px 30px rgba(0, 0, 0, 0.18),
            0px 3px 8px rgba(0, 0, 0, 0.05);
    }

    /* Top row inside white container */
    .navbar-mobile-header {
        background: #ffffff;
        padding: 14px 18px;
        border-radius: 30px;

        display: flex;
        justify-content: space-between;
        align-items: center;

        margin-bottom: 26px;

        box-shadow: 0px 4px 12px rgba(0,0,0,0.12);
    }

    .navbar-mobile-header img {
        height: 40px; /* bigger like figma */
    }

    .close-btn-mobile {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: #ffffff;
        border: 1.5px solid #D9D9D9;

        display: flex;
        justify-content: center;
        align-items: center;

        box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    }

    /* Menu items as big pills (Figma accurate) */
    #navbarNav .navbar-nav .menu-item a {
        display: block;
        width: 100%; /* <-- FIXED */
        
        background: #F8F8F8;
        padding: 16px 20px;

        border-radius: 22px;

        font-size: 18px; /* <-- Figma text size */
        font-weight: 500;
        text-align: center;

        color: #0A0A0A;

        margin-bottom: 18px;

        box-shadow: 0px 4px 14px rgba(0,0,0,0.08);
    }
.navbar-nav li.current-menu-item a, 
.navbar-nav li.current-page-ancestor a, 
.navbar-nav li.current-menu-parent a 
{ 
    background: #F7F7F7 !important; 
    border: none !important; 
    box-shadow: 0px 4px 14px rgba(0,0,0,0.07) !important; 
}
    /* Divider */
    .mobile-contact-group {
        margin-top: 18px !important; 
        padding-top: 10px !important; 
        border-top:1px solid #C8C8C8; 
        text-align: center; 
        display: flex ; 
        flex-direction: column; 
        gap: 10px;
    }

    .mobile-contact-group .phone-number {
        color: #0A5B44;
        font-weight: 600;
        font-size: 17px;
        margin: 14px 0 18px;
        display: flex;
        justify-content: center;
        gap: 8px;
    }

    .btn-inquire {
        width: 100%;
        background: #004D32;
        color: #ffffff;
        padding: 16px;
        border-radius: 24px;
        font-weight: 600;
        box-shadow: 0 4px 14px rgba(0,0,0,0.15);
    }
    .navbar-toggler.custom-toggler:focus, 
    .navbar-toggler.custom-toggler:active 
    {  
        outline: none !important; 
         box-shadow: none !important;  
        background-color: transparent !important; 
    }
    #navbarNav .navbar-nav { 
        width: 100%; 
        padding-left: 0 !important; 
        margin-left: 0 !important; 
    }
    #navbarNav .navbar-nav .menu-item 
    { width: 100%; 
        list-style: none;
    }
    .hero-background:before{
        top: -8px !important;
        background-size: contain !important;
    }
    .hero-background:after{
        top: 510px;
         background-size: contain;
    }
    .slider-content-left {
        padding: 40px 30px;
    }

    .slider-content-left h1 {
        font-size: 2.5em; 
        margin-bottom: 15px;
    }
    .testimonial-card {
        padding: 18px;
        min-height: 295px !important;
    }
    .testimonial-slider-container {
        padding: 0 40px; 
    }
    .slick-next{
        right: 5px;
    }
    .slick-prev{
        left: 5px;
    }
    .faq-accordion {
    max-width: 90%;
  font-family: "satoshiregular",sans-serif;
}
    /* Footer */
    .footer-main {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    .footer-col-1 {
        margin-bottom: 2rem !important;
    }
    .footer-description {
        max-width: 100%;
    }
    .affiliate-logo-wrapper {
        width: 70px;
        height: 40px; 
        margin-right: 1rem !important;
        margin-bottom: 1rem !important;
    }
    .footer-affiliates-title {
        margin-right: 1.5rem !important;
    }
    .footer-affiliates-logos-container {
        border-left: none;
    }

    /* Logo Slider */
    .logo-carousel-container {
        height: 90px;
    }
    .logo-slide-image {
        max-height: 70px;
    }
   .hero-section-container {
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        gap: 30px;
        text-align: left;
        min-height: unset;        /* ← Kills forced height */
        height: auto;             /* ← Shrinks to content */
        padding: 40px 20px;       /* ← Controlled top/bottom space */
    }

    .slider-content-left {
        width: 50%;
        flex: 0 0 50%;
        max-width: 50%;
        margin: 0;
    }

    .right-section-main {
        width: 50%;
        flex: 0 0 50%;
        max-width: 50%;
        margin: 0;
        height: auto;             /* ← Don't let it stretch */
        min-height: unset;        /* ← Remove any min-height */
    }

    /* ── Tighten image grid vertical gap ── */
    .image-column {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
        flex-wrap: nowrap;
        margin-bottom: 12px;      /* ← Space between top and bottom image rows */
    }

    .image-column:last-child {
        margin-bottom: 0;         /* ← No extra space after last row */
    }

    /* ── Preserve image shapes ── */
    .image-box {
        flex-shrink: 0;
        overflow: hidden;
    }

    .width-small {
        width: 130px;
        height: 180px;
        border-radius: 120px;
    }

    .width-large {
        width: 200px;
        height: 214px;
        border-radius: 90px;
    }

    .image-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
         .image-column.bottom-section .image-box.width-large img {
        max-height: 214px;
     }
    .quote-wrapper {
    width: 24px; 
    height: 24px; 
}

.quote-close-wrapper {
    top: 18px;
    right: 35px;
}

  .contact-wrapper {
    max-width: 650px;
    padding: 35px 40px;
  }

  .contact-wrapper .content h2 {
    font-size: 42px;
  }
    .hero-section-container.slide-two {
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        gap: 30px;
        text-align: left;
        min-height: unset;
        height: auto;
        padding: 40px 20px;
    }

    .slide-two .slider-content-left {
        width: 50%;
        flex: 0 0 50%;
        max-width: 50%;
        margin: 0;
    }

    .slide-two .rounded-pill-button {
        margin: 0;
        display: inline-block;
    }

    .slide-two .slider-image-right {
        width: 50%;
        flex: 0 0 50%;
        max-width: 50%;
        margin: 0;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* ── Image shape preserved ── */
    .slide-two .hero-image-wrapper {
    width: 100%;
    max-width: 320px;
    height: 300px;
    border-radius: 24px;        /* ← Rounded rectangle, matches your correct shape */
    overflow: hidden;
    flex-shrink: 0;
}

.slide-two .hero-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
    #slider_196.sa_owl_theme .owl-dots {
    bottom: 65px !important;
    }
    .career-hero-icon{
    border: 6px solid #FFFFFF3B;
    right: -57px;
}
.career-hero-icon .elementor-icon-box-wrapper{
    padding: 4px;
}
.career-hero-icon2{
    border: 6px solid #FFFFFF3B;
    left: -8px;
}
.career-hero-icon2 .elementor-icon-box-wrapper{
    padding: 4px;
}
.career-img2{
    bottom: 68px;
    left: 0;

}
.career-logo{
    bottom: 127px;
    right: 3px;
}
    .home-career-icon{
    position: absolute !important;
    bottom: 259px;
    left: 247px;
}
.home-career-icon2{
    position: absolute !important;
    bottom: 37px;
    left: -39px;

}
.career-highlight{
        font-weight: 700;
    font-family:"pt_serifbold_italic",sans-serif;
    font-style: italic;
    font-size: 50px;
background: linear-gradient(to bottom, #28ab78, #075C3B); 
    
    /* 2. Clip the background to the shape of the text */
    -webkit-background-clip: text;
    background-clip: text;
    
    /* 3. Make the text color transparent so the background shows through */
    -webkit-text-fill-color: transparent;
    color: transparent; /* Fallback for non-webkit browsers */
}
footer.site-footer{
    padding-bottom: 100px !important;
}
footer.site-footer::after{
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: url("assets/images/footer.png") no-repeat top 60px center;
    background-size: cover;
    z-index: -1;
    pointer-events: none;
}
.survey-modelling-hero-container::before, 
.about-us-hero-container::before {
    top: -105px !important;
}
.cp-header-section{
    flex-direction: column;
    align-items: flex-start;
}
	 .hero-background-auto::before {
        top: -8px;
        background-size: contain;
    }
}
@media (max-width: 1026px) {
    header#masthead {
        padding: 0 15px;
}
.navbar{
    width: 100%;
}


.nav-button-wrapper{
        background: #ffffff;
        border-radius: 30px;
        padding: 10px 15px;
        display: flex;
        flex-direction: row;
        width: 100%;
        justify-content: space-between;
        align-items: center;
}
    .slick-next{
        right: 0;
    }
    .slick-prev{
        left: 0;
    }
    .navbar{
        width: 100%;
    }

  .service-image {
    /* height: 230px; reduced from desktop */
    margin-bottom: 14px;

    clip-path: polygon(
      0% 26%,
      24% 0%,
      100% 0%,
      100% 76%,
      76% 100%,
      0% 100%
    );
  }

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

  .service-logo {
    bottom: 100px;
    left: 10px;
  }

  .service-index {
    font-size: 16px;
  }
      .service-slider-container #slider_670 {
        width: 100% !important;
        left: 0% !important;
        --widthtab: 100% !important;
        --lefttab: 0% !important;
    }
  .vision-img4 {
    bottom: -1px;
    right: -28px;
}
    .cp-jobs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .stat-divider{
        min-height: 130px !important;
    }
    .about-us-img1{
    position: absolute !important;
    top: -49px;
    right: 136px;
}
.about-us-img2 img{
    max-width: none !important;
}
.about-us-img2{
    position: absolute !important;
    top: 70px;
    left: 100px;
}
.about-us-icon{
    position: absolute !important;
    top: 83px;
    left: 300px;
}
.logo-wrapper{
    width: 120px;
    height: 120px;
}
.craeer-content-container::after{
    background: url("assets/images/caree-content-bg.svg") no-repeat bottom 214px center;
    background-size: contain;
    pointer-events: none;
    left: -5px !important;
}
}
@media (max-width: 992px) {
    /* Slide One */
    .hero-section-container {
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        gap: 25px;
        min-height: unset;
        height: auto;
        padding: 35px 20px;
        text-align: left;
    }

    .slider-content-left {
        width: 50%;
        flex: 0 0 50%;
        max-width: 50%;
        margin: 0;
    }

    .right-section-main {
        width: 50%;
        flex: 0 0 50%;
        max-width: 50%;
        margin: 0;
        height: auto;
        min-height: unset;
    }

    .image-column {
        gap: 10px;
        margin-bottom: 10px;
    }

    .width-small {
        width: 115px;
        height: 160px;
        border-radius: 120px;
    }

    .width-large {
        width: 180px;
        height: 195px;
        border-radius: 90px;
    }

    /* Slide Two */
    .hero-section-container.slide-two {
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        gap: 25px;
        min-height: unset;
        height: auto;
        padding: 35px 20px;
    }

    .slide-two .slider-content-left {
        width: 50%;
        flex: 0 0 50%;
        max-width: 50%;
        margin: 0;
    }

    .slide-two .slider-image-right {
        width: 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .slide-two .hero-image-wrapper {
        max-width: 290px;
        height: 270px;
        border-radius: 24px;
    }

    .slide-two .slider-content-left h1 br {
        display: none;
    }

    .slide-two .slider-content-left h1 {
        font-size: 1.9rem;
        line-height: 1.2;
    }

    .rounded-pill-button {
        padding: 12px 26px;
        font-size: 0.95em;
    }

    .rounded-pill-button::after {
        top: 115%;
        width: 90px;
        height: 38px;
    }

    .faq-section .title-box h2 {
        font-size: 32px;
        line-height: 38px;
    }

    .faq-section .title-box p {
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 20px;
    }

    .faq-item {
        margin-bottom: 10px;
    }

    .faq-btn {
        padding: 14px 18px;
        font-size: 16px;
    }

    .faq-content {
        padding: 0 18px 14px 18px;
        font-size: 14px;
        line-height: 22px;
    }

    .testimonial-content {
        font-size: 0.95rem;
        line-height: 1.45;
        padding: 0 16px;
    }

    .testimonial-meta {
        padding: 0 16px;
        margin-top: 15px;
    }

    .testimonial-name {
        font-size: 1.1rem;
    }

    .testimonial-role {
        font-size: 0.85rem;
    }
    .testimonial-card {
        padding: 18px;
        min-height: 258px !important;
    }
    /* Slick arrows closer to slider */
   .slick-prev,
    .slick-next {
        top: 50%;
        transform: translateY(-50%);
        width: 30px;
        height: 30px;
    }
    .slick-prev {
        /* FIX: Move outside the visible slide area */
        left: 8px !important; 
    }

    .slick-next {
        /* FIX: Move outside the visible slide area */
        right: 8px !important;
    }

  .contcat-hero-img {
    text-align: center;
  }

  .logo-wrapper {
    width: 110px;
    height: 110px;
    bottom: -3px;
    left: 314px;
  }

  .contact-wrapper {
    max-width: 600px;
    padding: 30px 35px;
  }

  .contact-wrapper .content h2 {
    font-size: 36px;
  }
    .service-card {
    padding: 12px;
  }

  .service-title {
    font-size: 18px;
  }

  .service-desc {
    font-size: 15px;
    line-height: 1.35;
  }

  .service-index {
    font-size: 14px;
    top: 2px;
    left: 4px;
    padding: 2px 4px;
  }

  .service-logo {
    bottom: 70px;
    left: 6px;
    padding: 2px 4px;
  }

  .service-logo img {
    max-height: 26px;
  }

  .service-image {
    margin-bottom: 10px;
    clip-path: polygon(
      0% 22%,
      20% 0%,
      100% 0%,
      100% 80%,
      80% 100%,
      0% 100%
    );
  }
  .career-img2{
    position: absolute;
    bottom: 50px;
    left: -6px;
}
.career-logo{
    position: absolute;
    bottom: 101px;
    left: 185px;
}
    .career-hero-icon2 {
        bottom: 102px;
    }
footer.site-footer::after{
    background: url("assets/images/footer.png") no-repeat top 145px center;
}
    .survey-modelling-hero-container::before, .about-us-hero-container::before {
        top: -134px !important;
    }
        .survey-hero-icon .logo-wrapper {
        width: 100px;
        height: 100px;
        bottom: -20px;
        left: 281px;
    }
    .survey-hero-icon .center-logo{
        width: 60px;
        height: 60px;
    }
    .contact-hero-logo .logo-wrapper {
        width: 100px;
        height: 100px;
        bottom: -13px;
        left: 243px;
        z-index: 9;
    }
    .contact-hero-logo .center-logo {
        width: 60px;
        height: 60px;
    }
    .gallery-hero-icon .logo-wrapper {
        width: 110px;
        height: 110px;
        bottom: -17px;
        left: 285px;
    }
	.auto-capabilities::after {
        background-size: cover;
    }
	.hero-auto .hero-line {
        white-space: normal;
    }
}
@media (max-width: 768px) {
    /* Navigation */
    .phone-number{
        border-left: none;
        margin: 10px 0;
    }
    .navbar-brand img{
        width: 110px;
        height: 40px;
    }
    .navbar-nav {
        gap: 5px;
    }


    /* ===== Layout Stack ===== */

    .rounded-pill-button {
        padding: 10px 22px;
        font-size: 13px;
    }

    /* Smaller Arrow (DO NOT HIDE) */
    .rounded-pill-button::after {
        width: 75px;
        height: 28px;
        left: 100%;
        transform: translate(8px, -50%);
        background-size: contain;
    }

 .hero-section-container {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        overflow: hidden;         /* ← Reduce side padding */
    }

    /* Override Bootstrap col-6 */
    .slider-content-left.col-6 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 0 !important;   /* ← Remove Bootstrap gutter */
        padding-right: 0 !important;  /* ← Remove Bootstrap gutter */
    }

    .slider-content-left {
        width: 100%;
        flex: unset;
        max-width: 100%;
        margin: 0;
    }

    .slider-content-left h1 {
        font-size: 50px;              /* ← Smaller to prevent word-by-word wrapping */
        line-height: 1.2;
    }

    .rounded-pill-button {
        margin: 0 auto;               /* ← Center button */
        display: inline-block;
    }

    .right-section-main {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        position: relative !important;  /* ← Reset any absolute/relative positioning */
        z-index: 1;
        overflow: hidden;
    }

    .image-column {
        flex-wrap: wrap !important;      /* ← Allow images to wrap if needed */
        justify-content: center;
        gap: 10px;
        margin-bottom: 10px;
    }

    .width-small {
        width: 130px;
        height: 175px;
        border-radius: 120px;
    }

    .width-large {
        width: 210px;
        height: 210px;
        border-radius: 90px;
    }

    /* Slide Two */
    .hero-section-container.slide-two {
        flex-direction: column !important;
        overflow: hidden;
        position: relative;
        z-index: 2;            /* ← Keep slide two left as per your reference */
    }

    .slide-two .slider-content-left {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        position: relative;
        z-index: 2;
    
    }

    .slide-two .slider-image-right {
        width: 100%;
        flex: unset;
        max-width: 100%;
        justify-content: center;
        padding-left: 0 !important;
    }
    .button-container.cp-btn-apply {
        text-align: left !important;
        display: flex !important;
        justify-content: flex-start !important;
    }

    .button-container.cp-btn-apply .rounded-pill-button {
        margin: 0 !important;
    }

    #slider_196 .slide-two .hero-image-wrapper,
    .owl-item .slide-two .hero-image-wrapper,
    .hero-section-container.slide-two .hero-image-wrapper {
        width: 100% !important;
        height: 260px !important;
        border-radius: 24px !important;
        overflow: hidden !important;
        display: block !important;
        position: relative !important;
    }

    #slider_196 .slide-two .hero-image-wrapper img,
    .owl-item .slide-two .hero-image-wrapper img,
    .hero-section-container.slide-two .hero-image-wrapper img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        border-radius: 0 !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }

    .slide-two .slider-content-left h1 br {
        display: none;
    }

    .slide-two .slider-content-left h1 {
        font-size: 50px;
        line-height: 1.2;
    }

    /* ================================= */
    /* ===== Slider Dots Fix ===== */
    /* ================================= */

    #slider_196.sa_owl_theme .owl-dots {
        left: 0 !important;
        bottom: 15px !important;
        text-align: center;
    }
    /* --- HERO BACKGROUND DECORATIONS --- */
    .hero-background.elementor-element::before {
        top: -40px;
        background-size: contain;
    }

    .hero-background:after {
        bottom: -770px;
        background-size: contain;
    }

    /* --- OWL DOTS --- */
    #slider_196.sa_owl_theme .owl-dots {
        bottom: 20px !important;
        left: 0 !important;
        width: 100%;
        text-align: center;
    }

    #slider_196 .owl-item {
        padding-top: 20px;
        padding-bottom: 10px;
    }

.marquee-track {
    /* Increase the speed by reducing the duration (e.g., from 30s to 20s) */
    animation-duration: 30s;
  }
    /* Logo Slider */
    .logo-carousel-container {
        height: 70px;
        padding: 5px 0;
    }
    .logo-slide-item {
        height: 60px;
    }
    .logo-slide-image {
        max-height: 40px;
    }
    .testimonial-card {

        min-height: 295px; 
        padding: 15px;
    }
    .testimonial-slider-container {
        padding: 0 45px; /* Minimal padding */
    }

.faq-accordion {
        padding: 0 15px; /* Add padding to prevent hitting screen edges */
    }
    .section-subtitle { 
    font-size: 2rem;
}
    .faq-question {
        font-size: 1.1rem;
        padding: 15px 20px;
    }
    /* Footer */
    .footer-main {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    .footer-col-1, .footer-col-2, .footer-col-3 {
        text-align: start;
    }
    .footer-col-1{
        max-width: 100%;
    }
    .footer-col-3, .footer-col-2{
        padding-left: 30px !important;
    }
    /* Affiliates Mobile Stack */
    .footer-affiliates-group {
        flex-direction: column !important; 
        align-items: flex-start !important; 
        margin-bottom: 1.5rem !important;
    }
    .footer-affiliates-title {
        margin-right: 0 !important;
        margin-bottom: 1rem !important;
    }
    .affiliate-logo-wrapper {
        width: 50px; 
        height: 30px; 
        margin-right: 0.5rem !important; 
        margin-bottom: 0.5rem !important;
    }
    .footer-affiliates-logos-container {
        justify-content: start !important; 
        flex-wrap: nowrap !important;
        width: auto;
        margin-right: auto;
        border-left: none;
        padding-left: 0;
    }
    .site-footer .container {
    margin-right: 0 !important;
    margin-left: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

    /* Contact/Nav Column Margins */
    .col-sm-6 {
        margin-bottom: 1.5rem !important;
    }

    /* Testimonial/FAQ */
    .section-title { font-size: 1.8rem; }
    /* .testimonial-card { min-height: 250px; } */
.slick-prev {
        left: 18px !important;  /* inside the container */
    }

    .slick-next {
        right: 18px !important; /* inside the container */
    }

  .contact-wrapper {
    max-width: 95%;
    padding: 25px 22px;
  }

  .contact-wrapper .content h2 {
    font-size: 30px;
  }

  .contact-wrapper .content p {
    font-size: 14px;
  }
  .logo-wrapper {
        width: 86px;
        height: 86px;
        left: 203px;
        top: -85px;
  }

  .rotating-text {
    transform-origin: center;
    transform: scale(0.85);
  }

  .rotating-text text {
    font-size: 15px;
  }

  .center-logo {
    width: 55px;
    height: 55px;
  }

  .send-btn {
    max-width: 160px;
  }

   .service-image {
    /* height: 190px; KEY: mobile size like screenshot */
    margin-bottom: 12px;

    clip-path: polygon(
      0% 28%,
      26% 0%,
      100% 0%,
      100% 74%,
      74% 100%,
      0% 100%
    );
  }

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

  .service-logo {
    bottom: 140px;
    left: 22px;
    padding: 4px 6px;
  }
  .service-logo.item2 {
    bottom: 136px !important;
}
  .service-logo img {
    max-height: 26px;
  }

  .service-index {
    top: 10px;
    left: 10px;
    font-size: 15px;
  }

  .service-title {
    font-size: 20px;
  }

  .service-desc {
    font-size: 16px;
    line-height: 1.35;
  }
      .service-slider-container #slider_670 {
        width: 100% !important;
        left: 0% !important;
        --widthmob: 100% !important;
        --leftmob: 0% !important;
    }

    /* move nav buttons to center on mobile */
    .service-slider-container .white > .showcase_nav.autohide_arrows {
        position: relative !important;
        top: -32px !important;
        right: auto !important;
        justify-content: center !important;
    }
.career-hero-icon{
    border: 4px solid #FFFFFF3B;
    top: 40px;
    right: 118px;
}
.career-hero-icon .elementor-icon-box-wrapper{
    padding: 4px;
}
.career-hero-icon2{
    border: 4px solid #FFFFFF3B;
    bottom: 35px !important;
    left: 130px;
}
.career-hero-icon2 .elementor-icon-box-wrapper{
    padding: 4px;
}
.career-img2{
    bottom: 22px;
    right: 103px;

}
.career-logo{
    bottom: 62px;
    left: 200px;
}
.home-career-icon{
    position: absolute !important;
    bottom: 182px;
    left: 244px;
}
.home-career-icon2{
    position: absolute !important;
    bottom: 36px;
    left: 18px;

}
.career-highlight{
    font-size: 40px;
}
footer.site-footer{
    padding-bottom: 50px !important;
}
footer.site-footer::after{
    background: url("assets/images/footer.png") no-repeat bottom -55px center;
    background-size: contain;
}
.about-us-hero-icon{
    left: 156px;
    top: -1px;
}
.counter-container{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 22px !important;
}
 .stat-divider {
        padding-right: 0 !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
    }

    .stat-divider::before,
    .stat-divider span::before,
    .stat-divider span::after {
        display: none !important;
        content: none !important;
    }
    .stat-divider{
    width: 100%;
}
    .about-us-img1{
    position: unset;
    top: -49px;
    right: 136px;
}
.about-us-img2{
    position: unset;
    top: 50px;
    left: 100px;
}
.about-us-icon{
    position: unset;
    top: 68px;
    left: 148px;
}
.vision-img1{
    top: -16px !important;
    right: 22px !important;
    /* width: 75%; */
}
.vision-img2 {
    position: absolute !important;
    left: -16px;
    top: -50px;
    z-index: 0;
    width: 50%;
}
.vision-img3{
    width: 50%;
}
.vision-img4 {
    top: 150px !important;
    right: -16px !important;
    width: 50%;
}
.values-content-container::after{
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: url(assets/images/about-us-core-bg.svg) no-repeat bottom 1627px center;
    background-size: contain;
    pointer-events: none;
}
.elementor-333 .elementor-element.elementor-element-4ec27d2 
.contact-grid-container .e-con-inner{
    align-items: flex-start !important;
    justify-content: center !important;
}
.survey-hero-icon, 
.gallery-hero-icon, 
.what-we-do-hero-icon{
    position: absolute;
    top: 8px;
    left: 117px;
    width: 60px;
    height: 60px;
}
	.hero-background-auto::before {
        top: -40px;
        background-size: contain;
    }
	.hero-auto .slider-content-left h1,
    .hero-auto .slider-content-left .highlight {
        font-size: 40px;
    }
	.hero-auto .cert-badge{width:100%;padding:12px 16px;}
  .hero-auto .cert-badge-logos img{height:30px;}

}
@media (max-width: 576px) {

    /* Navigation */
    .phone-number{
        border-left: none;
    }

    /* Footer */
    .footer-main {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    .footer-col-1{
        text-align: start;
        margin-bottom: 0 !important;
    } 
    .footer-col-2, .footer-col-3 {
        text-align: start;
    }
    .footer-affiliates-group {
        align-items: flex-start !important;
    }
    .footer-affiliates-logos-container {
        border-left: none;
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
    .footer-description {
        max-width: 95%;
    }
    .affiliate-logo-wrapper {
        width: 55px; 
        height: 30px;
    }

    /* Logo Slider */
    .logo-carousel-container {
        height: 60px;
    }
    .logo-slide-item {
        height: 50px;
    }
    .logo-slide-image {
        max-height: 35px;
    }
     .section-title {
        font-size: 1.8rem;
        text-align: center;
        margin-bottom: 20px;
    }

    .testimonial-slider-container {
        padding: 0 10px; /* Keep clean margins */
    }
    .quote-wrapper {
        width: 22px;
        height: 22px;
        top: 25px;
        right: 38px;
    }
    .testimonial-card{
        min-height: 215px !important;
    }
    .testimonial-content {
        padding: 0 10px;
        margin-top: 10px;
        font-size: 0.9rem;
        line-height: 1.45;
    }

    .testimonial-meta {
        padding: 0 10px;
        margin-top: 12px;
    }

    .testimonial-name {
        font-size: 1rem;
    }

    .testimonial-role {
        font-size: 0.8rem;
        margin-top: 2px;
    }

    /* ------------------------------ */
    /* Slick arrows — mobile handling */
    /* ------------------------------ */
    .slick-prev,
    .slick-next {
        width: 26px;
        height: 26px;
        top: calc(100% + 18px); /* Move arrows below slider */
        transform: none;
    }

    .slick-prev {
        left: 113px !important;
    }
    .slick-next {
        right: 120px !important;
    }
    .marquee-track {
    /* Increase the speed even more */
    animation-duration: 25s;
  }
.hero-section-container {
        padding: 24px 12px;
        flex-direction: column !important;
        flex-wrap: wrap !important;
        overflow: hidden;
    }

    .slider-content-left.col-6 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .slider-content-left {
        width: 100%;
        flex: unset;
        max-width: 100%;
        margin: 0;
    }

    .slider-content-left h1 {
        font-size: 40px;            /* ← Prevent oversized heading */
        line-height: 1.2;
    }

    .rounded-pill-button {
        margin: 0 auto;               /* ← Center button */
        display: inline-block;
    }
    .pill-tag{
        padding: 5px 10px;
    }
    .slider-content-left .highlight{
        font-size: 40px;
    }
    .right-section-main {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        position: relative !important;
        z-index: 1;
        overflow: hidden;
        padding-left: 0;
    }
    .image-column {
        flex-wrap: nowrap !important;   /* ← Keep images side by side */
        justify-content: center;
        gap: 8px;
        margin-bottom: 8px;
    }

    .image-box {
        flex-shrink: 0;                 /* ← Prevent squishing */
    }

    .width-small {
        width: 100px;                   /* ← Smaller to fit side by side */
        height: 140px;
        border-radius: 100px;
    }

    .width-large {
        width: 160px;                   /* ← Smaller to fit side by side */
        height: 175px;
        border-radius: 80px;
    }

    .image-column.bottom-section .image-box.width-large img {
        max-height: 185px;
    }
    .button-container.cp-btn-apply {
        text-align: left !important;
        display: flex !important;
        justify-content: flex-start !important;
    }

    .button-container.cp-btn-apply .rounded-pill-button {
        margin: 0 !important;
    }
        .hero-background:after {
        top: 845px;
        }
    /* Slide Two */
    .hero-section-container.slide-two {
        flex-direction: column !important;
        overflow: hidden;
        position: relative;
        z-index: 2;
        gap: 10px;
    }

    .slide-two .slider-content-left {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        position: relative;
        z-index: 2;
        padding-top: 70px;
        padding-bottom: 0;
    }


    .slide-two .slider-image-right {
        width: 100%;
        display: flex;
        justify-content: center;
    }

        #slider_196 .slide-two .hero-image-wrapper,
    .owl-item .slide-two .hero-image-wrapper,
    .hero-section-container.slide-two .hero-image-wrapper {
        width: 100% !important;
        height: 220px !important;
        border-radius: 20px !important;
        overflow: hidden !important;
        display: block !important;
        position: relative !important;
    }

    #slider_196 .slide-two .hero-image-wrapper img,
    .owl-item .slide-two .hero-image-wrapper img,
    .hero-section-container.slide-two .hero-image-wrapper img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        border-radius: 0 !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }


    .slide-two .slider-content-left h1 br {
        display: none;
    }

    .slide-two .slider-content-left h1 {
        font-size: 40px;
        line-height: 1.2;
    }
    /* Smaller arrow, stays next to button */
     .rounded-pill-button::after {
        left: 113%;
        top: 64%;
        transform: translateY(-50%);
        width: 87px;
        height: 32px;
    }
    .faq-section {
        padding: 40px 0;
    }

    .faq-section .title-box h2 {
        font-size: 26px;
        line-height: 32px;
    }

    .faq-section .title-box p {
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 15px;
    }

    /* FAQ spacing */
    .faq-item {
        border-radius: 12px !important;
        margin-bottom: 10px;
    }

    .faq-btn {
        padding: 12px 14px;
        font-size: 14px;
        line-height: 20px;
    }

    /* Fixes the blue background radius on hover/active */
    .faq-btn.collapsed,
    .faq-btn {
        border-radius: 12px !important;
    }

    /* Inner answer text */
    .faq-content {
        padding: 0 14px 12px 14px;
        font-size: 13.5px;
        line-height: 20px;
    }

    /* Remove extra ugly bottom spacing caused by accordion-body */
    /* .accordion-body {
        padding: 0 !important;
    } */
    .faq-answer{
        padding: 14px 12px !important;
    }
  .logo-wrapper {
    width: 80px;
    height: 80px;
    left: 95px !important;
  }

  .rotating-text {
    transform: scale(0.75);
  }

  /* .rotating-text text {
    font-size: 12px;
  } */

  .center-logo {
    width: 48px;
    height: 48px;
  }

  .contact-wrapper {
    padding: 20px 18px;
  }

  .contact-wrapper .content h2 {
    font-size: 26px;
  }

  .send-btn {
    width: 100%;
    max-width: 125px;
  }
  .service-title {
    font-size: 16px;
  }

  .service-desc {
    font-size: 14px;
  }
    .survey-hero-icon .logo-wrapper {
        width: 95px;
        height: 95px;
        bottom: -20px;
        left: 180px !important;
    }
  .service-logo {
    bottom: 118px;
    left: 20px;
  }
.service-logo.item2{
   bottom: 120px !important; 
}
  .service-index {
    font-size: 13px;
  }
      footer.site-footer::after {
        background: url(assets/images/footer.png) no-repeat bottom -25px center;
        background-size: contain;
    }
    .survey-modelling-hero-container::before,
    .about-us-hero-container::before {
        top: -126px !important;
        background-size: contain,contain;
    }
	.hero-auto .slider-content-left h1,
    .hero-auto .slider-content-left .highlight {
        font-size: 32px;
    }
}
@media (min-width: 768px) {
    .gallery-card .elementor-image-gallery .gallery-columns-3 .gallery-item {
        max-width: 100% !important;
    }
}
@media (max-width: 600px) {
    .cp-jobs-grid {
        grid-template-columns: repeat(1, 1fr);
    }
    .cp-job-title{
        font-size: 1.5rem;
    }
    .cp-header-text .cp-main-title{
        font-size: 2rem;
    }
    .gallery-card .gallery-columns-3{
        grid-template-columns: repeat(1, 1fr) !important;
    }
    .logo-wrapper{
        left:118px;
    }
}
@media (max-width: 1366px) {
    .navbar{
        max-width: 100% !important;
    }
    header{
        padding: 0 25px;
    }
    .e-con-inner{
        max-width: 100% !important;
        padding: 0 25px !important;
    }
    .phone-number{
        white-space: nowrap;
    }
    .legacy-container .e-con-inner{
        margin-top: 60px !important;
        padding: 0 40px !important;

    }
    .legacy-container .about-us-history{
        padding-left: 90px;
    }
    .counter-container{
        margin-bottom: 60px !important;
    }
    .vission-container .elementor-element.elementor-element-df768a6.e-flex.e-con-boxed.e-con.e-child{
        margin-bottom: 160px !important;
    }
}
@media (max-width: 800px) {
    .gallery-card .gallery-columns-3{
        grid-template-columns: repeat(2, 1fr);
    }
        .career-hero-icon2 {
        bottom: 192px;
    }
    .center-logo{
        width: 50px;
        height: 50px;
    }
        .logo-wrapper {
        width: 90px;
        height: 90px;
        bottom: -11px;
        left: 222px;
    }
    .survey-modelling-hero-container::before,
    .about-us-hero-container::before{
        top: -134px !important;
        background-size: contain,contain;
    }
    .about-us-img1{
        position: absolute !important;
        top: -40px;
        right: 305px;
    }
        .about-us-img2 {
        position: absolute !important;
        top: 70px;
        left: 240px;
    }
        .about-us-icon {
        position: absolute !important;
        top: 76px;
        left: 141px;
    }
        .vision-img4 {
        bottom: -128px;
        right: 3px;
    }
    .vision-img2 {
    position: absolute !important;
    left: 5px;
}
.values-content-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: url(assets/images/about-us-core-bg.svg) no-repeat top 1297px center;
    background-size: contain;
    pointer-events: none;
}
    .survey-hero-icon .logo-wrapper {
        width: 95px;
        height: 95px;
        bottom: -20px;
        left: 245px;
    }
}

@media (max-width: 800px) {
        .survey-hero-icon .logo-wrapper {
        width: 84px;
        height: 85px;
        left: 105px !important;
    }
    .survey-hero-icon .center-logo {
        width: 50px;
        height: 50px;
    }

}
 
:root{
  --pill-green:      #075c3b;
  --pill-text:        #0b0b0b;
  --pill-radius:      60px;
  --pill-border:      rgba(0,0,0,0.10);
  --pill-shadow:      0 4px 7.675px rgba(0,0,0,0.07);
  --pill-divider:     rgba(0,0,0,0.15);
  --pill-max-width:   1280px;
}
 

 

/* Logo */
.pill-brand{
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.pill-brand img{
  height: 49px;
  width: auto;
  max-width: 73px;
  object-fit: contain;
}
 
/* Center nav links */
.pill-nav{
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pill-nav .nav-item > a,
.pill-nav .menu-item > a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 130px;
    font-family: 'satoshimedium';
    text-transform: capitalize;
  font-size: 16px;
  line-height: 20px;
  color: var(--pill-text);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.pill-nav .nav-item > a:hover,
.pill-nav .menu-item > a:hover,
.pill-nav .current-menu-item > a,
.pill-nav .current_page_item > a{
  background-color: rgba(7,92,59,0.08);
  color: var(--pill-green);
}
 
/* Right-side group: phone / divider / CTA */
.pill-contact-group{
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}
 
.pill-phone{
    font-family: 'satoshimedium';
  font-size: 15px;
  line-height: 22.5px;
  text-decoration: none;
  white-space: nowrap;
      border: none;
    padding: 0;
    margin: 0;
}
.pill-phone .phone-icon{
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
 
.pill-divider{
  width: 1px;
  height: 20px;
  background-color: var(--pill-divider);
  display: inline-block;
}
 
.pill-cta{
  text-decoration: none;
}
.pill-cta-btn{
  background-color: var(--pill-green);
  color: #ffffff;
  border: none;
  border-radius: 60px;
  padding: 12px 24px;
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: -0.28px;
  white-space: nowrap;
  cursor: pointer;
}
.pill-cta-btn:hover{
  opacity: .9;
}
 
/* =========================================================
   Toggler (mobile hamburger) — cosmetic only, Bootstrap JS
   already handles the show/hide behavior via data-bs-toggle
   ========================================================= */
.custom-toggler{
  border: none;
  background: transparent;
  padding: 8px;
}
.custom-toggler .toggler-icon{
  display: block;
  width: 24px;
  height: 2px;
  background: var(--pill-text);
  position: relative;
}
.custom-toggler .toggler-icon::before,
.custom-toggler .toggler-icon::after{
  content: "";
  position: absolute;
  left: 0;
  width: 24px;
  height: 2px;
  background: var(--pill-text);
}
.custom-toggler .toggler-icon::before{ top: -7px; }
.custom-toggler .toggler-icon::after{ top: 7px; }
.pill-contact-group.mob-menu{
    display:none!important;
}
 
/* =========================================================
   Responsive — below xl, Bootstrap collapses #navbarNav.
   We just style the collapsed panel to drop down as its
   own rounded card, matching the pill aesthetic.
   ========================================================= */
@media (max-width: 1199.98px){
  .pill-nav-container{
    flex-wrap: wrap;
    border-radius: 32px;
  }
 
  .nav-button-wrapper{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
 
  #navbarNav.navbar-collapse{
    width: 100%;
  }
 
  #navbarNav.collapse:not(.show){
    display: none;
  }
 
  .pill-nav{
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 4px;
    margin-top: 16px;
  }
  .pill-nav .nav-item > a,
  .pill-nav .menu-item > a{
    justify-content: flex-start;
    width: 100%;
    border-radius: 16px;
  }
 
  .pill-contact-group{
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-top: 12px;
    gap: 12px;
  }
  .pill-divider{
    display: none;
  }
  .pill-cta,
  .pill-cta-btn{
    width: 100%;
  }
  .pill-contact-group.mob-menu{
    display:block!important;
}
.pill-contact-group.desk-menu{
    display: none!important;;
}
}
 
@media (max-width: 480px){
  .site-header--pill{
    padding: 16px 12px 0;
  }
  .pill-nav-container{
    padding: 12px 16px;
  }
}

.footer-contact-item.autocare-mail {
    margin-bottom: 0!important;
}