/*!
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;
}

/**
 * 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:hover,
a:focus,
a:active {
    color: #191970;
}

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
========================================================== */

/* --- 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;
}
.nav-container{
    gap: 40px;
}
.navbar-brand img {
    height: 50px;
}

.navbar-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Custom Navigation Links */
.navbar-nav li a {
    color: #333 !important;
    font-size: 1rem;
    font-weight: 500;
    padding: 10px 12px !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;
}

.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;
}

.btn-inquire:hover {
    background-color: #075C3B;
    transform: translateY(-2px);
}
.custom-toggler {
    width: 48px;
    height: 48px;
    border-radius: 50px;
    background: #fff !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: transparent !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 {
    background-color: #FDFCF7;
    position: relative;
    z-index: 2;
    overflow: hidden;
    padding-bottom: 210px;
}

.footer-main {
    padding-top: 6rem;
    padding-bottom: 6rem;
    border-top: 1px solid rgb(0, 0, 0,0.12);
}
footer::after{
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: url("assets/images/footer.png") no-repeat top -150px 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: #555;
    font-size: 1rem;
    line-height: 1.6;
    max-width: 380px;
    margin-bottom: 2rem;
}

/* Navigation & Contact Items */
.footer-contact-item {
    color: #555;
    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: #555;
    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-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;
}

.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: #666;
    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{
    min-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: 2.5rem;
    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: 0.9rem; 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;
}
.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: 50%;
    position: relative;
    z-index: 2;
}

/* RIGHT IMAGE */

.slider-image-right {
    width: 50%;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.hero-image-wrapper {
    width: 520px;
    height: 340px;
    overflow: hidden;
}

.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 {
    position: relative !important;
    background-color: #fbfbf7;
    overflow: hidden;

    background-image: url("assets/images/Group (5).png");
    background-repeat: no-repeat;
    background-size: 2000px;
    background-position: top -119px center;
}


/* BOTTOM WAVE */
.hero-background:after {
content: '';
    position: absolute;
    bottom: -260px;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(assets/images/Group-1.png) 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: 3em; /* 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: 60px;
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 */
}

/* Paragraph Text */
.slider-content-left p {
    font-size: 1em;
    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);
}
.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: 1em;
    font-weight: 500;
    transition: background-color 0.3s ease;
    position: relative; 

}

.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 */
}
.right-section-main {  
    /* Set max width to match the Figma composite width */
    width: 100%;
    height: 566px; /* 283px * 2 = 566px */
    margin-right: 5px;
    position: relative;
}

/* --- 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: 205px !important;
}
#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;

}
/*---------contact-us Page -------------*/
.cut-card {
    position: relative !important;
}
.cut-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* .contact-hero-img{
    position: relative;
} */
.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-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;
}

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

.contact-wrapper .content p {
  color: #666;
  font-size: 16px;
}

/* 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;
}
.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: #000 !important;
  border-radius: 40px !important;
  border: 1px solid #000 !important;
  cursor: pointer !important;
}

/* hover */
.send-btn:hover {
  background: #000 !important;
  color: #fff !important;
}


/*---------------sevices detail page--------------*/

.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 page------------*/
.sa-slider-container {
  max-width: 1280px;
  margin: 0 auto;
}

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

/* hover effect */
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.12);
}

/* 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: 100px !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--------------*/
    .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: 7px;
    position: absolute;
}

/*------------career-page----------*/

.career-hero-img{
    position: relative;
}
.career-hero-icon{
    border: 6px solid #FFFFFF3B;
    display: inline-flex;
    align-items: center !important;
    width: auto;
    position: absolute !important;
    bottom: 385px;
    right: 13px;
}
.career-hero-icon .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: 3px;
}
.career-hero-icon2 .elementor-icon-box-wrapper{
    border-radius: 999px;
    background: white;
    padding: 8px;
}
.career-highlight{
        font-weight: 700;
    font-family:"pt_serifbold_italic",sans-serif;
    font-style: italic;
    font-size: 60px;
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 */
}
.career-content{
    display: block;
}
.career-img1{
    position: relative;
}
.career-img2{
    position: absolute !important;
    bottom: 80px;
    left: -73px;
}
.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;
}
/* =========================================
   6. RESPONSIVE OVERRIDES
   ========================================= */

@media (max-width: 1200px) {
       body.mobile-menu-open {
        background-color: #0A5B44 !important;
        overflow: hidden;
    }
    .navbar{
        background: transparent;
    }
    .nav-container{
        gap: 12px;
    }
    /* 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-size: 17px;
        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;
    }
    .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: column;
        align-items: center;
        text-align: center;
        gap: 25px;
    }

    .slider-content-left {
        width: 100%;
        max-width: 750px;
        margin: 0 auto;
    }

    /* Button stays in center */
    .rounded-pill-button {
        margin: 0 auto;
        display: inline-block;
    }

    /* Swirly arrow stays next to button (horizontally) */
    .rounded-pill-button::after {
        left: 105%;              /* Slightly right of button */
        top: 50%;                /* Vertically centered */
        transform: translateY(-50%);
        width: 100px;
        height: 40px;
    }

    /* Image grid centered */
    .right-section-main {
        width: 100%;
        max-width: 650px;
        margin: 0 auto;
        height: auto;
    }

    .image-column {
        justify-content: center;
        gap: 15px;
        flex-wrap: wrap;
    }

    /* Keep shape but reduce size */
    .width-small {
        width: 160px;
        border-radius: 120px;
    }

    .width-large {
        width: 260px;
        border-radius: 90px;
    }
         .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;
  }
  .slide-two {
        flex-direction: column;
        padding: 70px 0;
        gap: 40px;
        text-align: left;
    }

    .slide-two .slider-content-left,
    .slide-two .slider-image-right {
        width: 100%;
    }

    .slider-image-right {
        justify-content: flex-start;
    }

    .hero-image-wrapper {
        width: 100%;
        max-width: 520px;
        margin: 0 auto;
    }
    .career-hero-icon{
    border: 6px solid #FFFFFF3B;

    bottom: 85px;
    right: 18px;
}
.career-hero-icon .elementor-icon-box-wrapper{
    padding: 4px;
}
.career-hero-icon2{
    border: 6px solid #FFFFFF3B;
    bottom: 75px;
    left: 8px;
}
.career-hero-icon2 .elementor-icon-box-wrapper{
    padding: 4px;
}
.career-img2{
    bottom: 22px;
    right: 103px;

}
    .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: 45px;
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::after{
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: url("assets/images/footer.png") no-repeat top -15px center;
    background-size: cover;
    z-index: -1;
    pointer-events: none;
}
}
@media (max-width: 1026px) {
    header#masthead {
        padding: 0 15px;
}
.navbar{
    width: 100%;
}
.nav-button-wrapper{
        background: #ffffff;
        border-radius: 25px;
        padding: 0 15px;
        display: flex;
        width: 100%;
        justify-content: space-between;
}
    .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;
  }
}
@media (max-width: 992px) {
    .hero-section-container {
        flex-direction: column; 
        text-align: start;
        gap: 35px;
    }

    .slider-content-left h1 {
        font-size: 2.5em;
        line-height: 1.2;
    }

    .slider-content-left p {
        font-size: 0.95em;
        margin: 0 auto 25px;
        max-width: 95%;
    }

    .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 {
    bottom: -3px;
    left: 77px;
  }

  .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: 242px;
    right: 210px;
}
.career-logo{
    position: absolute;
    bottom: 241px;
    left: 119px;
}
}
@media (max-width: 768px) {
    /* Navigation */
    .phone-number{
        border-left: none;
        margin: 10px 0;
    }
    .navbar-brand img{
        width: 110px;
        height: 40px;
    }
    .navbar-nav {
        gap: 5px;
    }
    .slider-content-left h1 {
        font-size: 2em;
        line-height: 1.2;
    }

    .slider-content-left p {
        font-size: 0.9em;
        max-width: 95%;
        margin: 0 auto 20px;
    }

    .rounded-pill-button {
        padding: 10px 24px;
        font-size: 0.9em;
    }

    /* Arrow aligned next to button */
    .rounded-pill-button::after {
        left: 100%;
        top: 50%;
        transform: translateY(-50%);
        width: 110px;
        height: 40px;
    }
         .right-section-main { 
        width: 100%;
        max-width: 420px; /* proportional downscale of tablet 650px */
        margin: 0 auto;
        height: auto;
        padding-top: 20px;
    }

    .image-column {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }

    /* mini version of current shapes */
    .width-small {
        width: 130px;        /* was 200px desktop → 160 tablet → 130 mobile */
        border-radius: 100px;
    }

    .width-large {
        width: 210px;        /* was 343px desktop → 260 tablet → 210 mobile */
        border-radius: 90px;
    }

    .image-box img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
    }

    .bottom-section {
        margin-top: 5px;
        max-height: unset; /* remove height restriction for smaller screens */
    }
        .image-column.bottom-section .image-box.width-large img {
        max-height: 173px;
    }
    .slide-two {
        padding: 60px 20px;
        text-align: center;
    }

    .slide-two .slider-content-left {
        width: 100%;
        z-index: 2;
    }

    .slide-two h1 {
        font-size: 34px;
        line-height: 1.25;
    }

    .slide-two p {
        font-size: 15px;
        margin: 0 auto 28px;
        max-width: 90%;
    }

    .button-container {
        display: flex;
        justify-content: center;
    }

    .slider-image-right {
        width: 100%;
        margin-top: 30px;
    }

    .hero-image-wrapper {
        width: 100%;
    }
.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: 90%;
    }

    /* Affiliates Mobile Stack */
    .footer-affiliates-group {
        flex-direction: column !important; 
        align-items: center !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: center !important; 
        flex-wrap: nowrap !important;
        width: auto;
        margin-left: auto;
        margin-right: auto;
        border-left: none;
        padding-left: 0;
    }

    /* 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: 95px;
    height: 95px;
  }

  .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: 10px;
    left: 10px;
    padding: 4px 6px;
  }

  .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;
  }
.career-hero-icon{
    border: 4px solid #FFFFFF3B;

    bottom: 285px;
    right: 8px;
}
.career-hero-icon .elementor-icon-box-wrapper{
    padding: 4px;
}
.career-hero-icon2{
    border: 4px solid #FFFFFF3B;
    bottom: 25px;
    left: 3px;
}
.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: 25px;
}
footer::after{
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: url("assets/images/footer.png") no-repeat top 85px center;
    background-size: cover;
    z-index: -1;
    pointer-events: none;
}
}
@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: 180px !important;
    }
    .slick-next {
        right: 180px !important;
    }
    .marquee-track {
    /* Increase the speed even more */
    animation-duration: 25s;
  }
  .slider-content-left {
        padding: 0 15px;
    }

    .slider-content-left h1 {
        font-size: 1.7em;
    }

    .slider-content-left p {
        font-size: 0.85em;
    }
    .slider-content-left .highlight{
        font-size: 1.7rem;
    }
    .rounded-pill-button {
        padding: 10px 20px;
        font-size: 0.85em;
    }

    /* 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;
    }
  .logo-wrapper {
    width: 80px;
    height: 80px;
  }

  .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;
  }

  .service-logo {
    bottom: 60px;
  }

  .service-index {
    font-size: 13px;
  }
}
@media (min-width: 768px) {
    .gallery-card .elementor-image-gallery .gallery-columns-3 .gallery-item {
        max-width: 100% !important;
    }
}