/* ============================================
   RESPECT ENERGY - BOOTSTRAP 5 UNIFIED STYLES
   ============================================ */

/* ===========================================
   SECTION: FONTS & VARIABLES (GLOBAL)
   =========================================== */
@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700|Rubik:400,500,700|DM+Sans:400,500,600,700,900&display=swap");

:root {
    /* Colors */
    --abbey: #4d4e50;
    --alabaster: #fafafb;
    --alien-armpit: #86e300;
    --aqua-deep: #005537;
    --chartreuse: #96ff00;
    --cloud: #c4c4c4;
    --medium-purple: #9747ff;
    --mystic: #e2e2eb;
    --nobel: #b1b1b1;
    --scooter: #2dbee1;
    --sonic-silver: #767676;
    --sulu: #c0ff66;
    --tuatara: #343434;
    --white: #ffffff;
    --zuccini: #003a26;
    --primary: #005537;

    /* Font Sizes */
    --fs-xs: 12px;
    --fs-sm: 14px;
    --fs-md: 16px;
    --fs-lg: 18px;
    --fs-xl: 24px;
    --fs-2xl: 28px;
    --fs-3xl: 34px;
    --fs-4xl: 40px;
    --fs-5xl: 44px;
    --fs-6xl: 88px;

    /* Gradients */
    --gradient-primary: linear-gradient(62.8deg, #0d92af 2.98%, #005537 53.66%);
    --gradient-hero: linear-gradient(180deg, #0d92af 0%, #005537 100%);
    --gradient-features: linear-gradient(180deg, #ffffff 0%, #ecf9da 46.65%, #ffffff 100%);
    --gradient-section: linear-gradient(180deg, #ffffff 0%, #ECF9DA 46.65%, #ECF9DA 100%);
}

/* Font Faces */
@font-face {
    font-family: Poppins;
    font-style: normal;
    src: local(''),
    url('/vendor/xf/theme-web3/fonts/Poppins2/Poppins-Regular.ttf') format('truetype'); /* Safari, Android, iOS */
}

@font-face {
    font-family: PoppinsRegular;
    font-style: normal;
    src: local(''),
    url('/vendor/xf/theme-web3/fonts/Poppins2/Poppins-Regular.ttf') format('truetype'); /* Safari, Android, iOS */
}

@font-face {
    font-family: PoppinsMedium;
    font-style: normal;
    src: local(''),
    url('/vendor/xf/theme-web3/fonts/Poppins2/Poppins-Medium.ttf') format('truetype'); /* Safari, Android, iOS */
}

@font-face {
    font-family: PoppinsBold;
    font-style: normal;
    src: local(''),
    url('/vendor/xf/theme-web3/fonts/Poppins2/Poppins-Bold.ttf') format('truetype'); /* Safari, Android, iOS */
}

@font-face {
    font-family: PoppinsSemiBold;
    font-style: normal;
    src: local(''),
    url('/vendor/xf/theme-web3/fonts/Poppins2/Poppins-SemiBold.ttf') format('truetype'); /* Safari, Android, iOS */
}

@font-face {
    font-family: PoppinsItalic;
    font-style: normal;
    src: local(''),
    url('/vendor/xf/theme-web3/fonts/Poppins/PoppinsItalic/Poppins-Italic.ttf') format('truetype'); /* Safari, Android, iOS */
}

@font-face {
    font-family: "DMSansRegular";
    font-style: normal;
    font-weight: 400 900;
    src: url("../fonts/DMSans/DMSans-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "DMSansSemi";
    font-style: normal;
    font-weight: 400 900;
    src: url("../fonts/DMSans/DMSans-SemiBold.ttf") format("truetype");
}

@font-face {
    font-family: "DMSansBlack";
    font-style: normal;
    font-weight: 400 900;
    src: url("../fonts/DMSans/DMSans-Black.ttf") format("truetype");
}

@font-face {
    font-family: "DMSansBold";
    font-style: normal;
    font-weight: 400 900;
    src: url("../fonts/DMSans/DMSans-Bold.ttf") format("truetype");
}

@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: DMSansMedium;
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/DMSans/DMSans-Medium.ttf') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ===========================================
   SECTION: BASE STYLES (GLOBAL)
   =========================================== */
* {
    box-sizing: border-box;
}

body {
    font-family: "DMSansRegular", "Poppins", sans-serif !important;
    font-size: var(--fs-md);
    color: var(--tuatara);
    line-height: 1.6;
    background-color: var(--white);
}

h1, h2, h3, h4, h5, h6 {
    font-family: "DMSansBlack", sans-serif;
    font-weight: 900;
    color: var(--aqua-deep);
    line-height: 1.3;
}

h1 { font-size: var(--fs-5xl); }
h2 { font-size: var(--fs-4xl); }
h3 { font-size: var(--fs-3xl); }
h4 { font-size: var(--fs-2xl); }

p {
    margin-bottom: 1rem;
}

a {
    color: var(--aqua-deep);
    text-decoration: none !important;
    transition: all 0.3s ease;
}

a:hover {
    color: #96FF00 !important;
}

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

/* ===========================================
   SECTION: UTILITY CLASSES (GLOBAL)
   =========================================== */
.text-primary { color: var(--aqua-deep) !important; }
.text-secondary { color: var(--scooter) !important; }
.text-accent { color: var(--alien-armpit) !important; }
.text-dark { color: var(--tuatara) !important; }
.text-light { color: var(--white) !important; }
.text-muted { color: var(--sonic-silver) !important; }

.bg-primary { background-color: var(--aqua-deep) !important; }
.bg-secondary { background-color: var(--zuccini) !important; }
.bg-accent { background-color: var(--chartreuse) !important; }
.bg-light-green { background-color: #ecf9da !important; }
.bg-gradient-primary { background: var(--gradient-primary) !important; }
.bg-gradient-hero { background: var(--gradient-hero) !important; }
.bg-gradient-features { background: var(--gradient-features) !important; }
.bg-gradient-section { background: var(--gradient-section) !important; }

.fw-black { font-weight: 900 !important; }
.fw-bold { font-weight: 700 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-medium { font-weight: 500 !important; }

.rounded-xl { border-radius: 24px !important; }
.rounded-pill { border-radius: 25px !important; }

.text-description {
    font-size: 16px;
    color: #767676;
    line-height: 28px;
    font-family: DMSansRegular;
}

.shadow-soft { box-shadow: 0px 4px 20px rgba(177, 177, 177, 0.26) !important; }

.section {
    padding: 120px 0;
}

.card {
    padding: 24px 24px 40px 24px;
    border-radius: 24px !important;
    box-shadow: 0 4px 20px #B1B1B142;
    border-color: white !important;
    height: 100%;
}

.modal {
    .modal-dialog {
        width: 1160px;
        max-width: 90%;
    }
    .modal-content {
        padding: 24px 40px 80px 40px;
        border-radius: 40px;
    }
    .modal-header {
        border: none;
        .btn-close {
            background-color: #6969752e;
            border-radius: 50%;
            padding: 16px;
        }
    }
    .content-title {
        color: #343434;
        font-size: 26px;
        line-height: 45px;
        font-family: DMSansMedium;
        text-align: center;
    }
    .content-description {
        color: #343434;
        font-size: 18px;
        line-height: 30px;
        font-family: DMSansRegular;
        text-align: center;
        margin-top: 24px;
    }
}

/* ===========================================
   SECTION: BUTTONS (GLOBAL)
   =========================================== */
.btn-cta {
    background-color: var(--chartreuse);
    color: var(--aqua-deep);
    font-family: "DMSansBlack";
    font-weight: 900;
    font-size: var(--fs-lg);
    padding: 12px 32px;
    border-radius: 25px;
    border: none;
    display: inline-block;
    transition: all 0.3s ease;
}

.btn-cta:hover {
    background-color: var(--alien-armpit);
    color: var(--aqua-deep);
    transform: translateY(-2px);
}

.btn-cta-outline {
    background-color: transparent;
    color: var(--chartreuse);
    border: 2px solid var(--chartreuse);
    font-family: "DMSansBlack";
    font-weight: 900;
    font-size: var(--fs-lg);
    padding: 12px 32px;
    border-radius: 25px;
    display: inline-block;
    transition: all 0.3s ease;
}

.btn-cta-outline:hover {
    background-color: var(--chartreuse);
    color: var(--aqua-deep);
}

.btn-phone {
    background-color: var(--aqua-deep);
    color: var(--white);
    border-radius: 50%;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===========================================
   SECTION: HEADER & NAVIGATION (GLOBAL)
   =========================================== */
.top-bar {
    background: #005537;
    background-size: cover;
    background-position: center;
    padding: 6px 0;

    .top-search-form {
        margin-bottom: 0;
        .search-field::placeholder {
            color: white;
        }
        .search-field[type="search"]::-webkit-search-cancel-button {
            -webkit-appearance: none;
            appearance: none;
            display: none;
        }
        .search-field {
            border: 1px solid #C0FF66;
            outline: none;
            border-radius: 12px;
            height: 24px;
            padding: 0 30px 0 16px;
            width: 175px;
            font-size: 14px;
            font-family: DMSansRegular;
            background: #00000000;
            color: white;
        }
        .close {
            position: absolute;
            top: 5px;
            right: 16px;
            color: white;
            font-size: 12px;
            width: 12px;
            height: 12px;
        }
    }

    .search-icon-navbar {
        margin: 0 16px;

        img {
            height: 18px;
            min-width: 20px;
            object-fit: contain;
        }
    }

    .nav-link {
        color: white;
        font-family: DMSansMedium;
        font-size: 16px;
        margin: 0 16px;
    }
}

.top-bar .contact-info {
    display: flex;
    align-items: center;
    gap: 30px;
}

.top-bar .contact-info a {
    color: var(--white);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-md);
}

.top-bar .contact-info img {
    height: 16px;
    object-fit: contain;
}

.main-nav {
    background-color: var(--white);
    padding: 15px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.main-nav .logo {
    max-height: 54px;
    width: 160px;
}

.main-nav .nav-link {
    color: var(--aqua-deep);
    font-weight: 600;
    font-size: var(--fs-md);
    padding: 8px 38px !important;
}

.main-nav .nav-link:hover,
.main-nav .nav-link.active {
    color: var(--alien-armpit);
}

.main-nav .language-selector {
    display: flex;
    align-items: center;
    gap: 8px;
}

.main-nav .language-selector img {
    width: 24px;
    height: auto;
}

.navbar {
    padding: 24px 0 !important;
    position: sticky !important;
    top: 0;
    z-index: 1000;

    .navbar-nav .nav-link {
        color: #005537;
        font-size: 16px;
        line-height: 21px;
        font-family: DMSansSemi;
    }
}

/* Mobile Navigation */
.navbar-toggler {
    border: none;
    padding: 0;
}

.navbar-toggler:focus {
    box-shadow: none;
}

@media (max-width: 991.98px) {
    .main-nav .navbar-collapse {
        background-color: var(--white);
        padding: 20px;
        margin-top: 15px;
        border-radius: 16px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    }

    .main-nav .nav-link {
        padding: 12px 0 !important;
        border-bottom: 1px solid #eee;
    }
}

/* ===========================================
   SECTION: HERO SECTIONS (GLOBAL)
   =========================================== */
.hero-section {
    background: var(--gradient-hero);
    position: relative;
    min-height: 480px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(289.88deg, rgba(0, 46, 30, 0) 38.9%, rgba(0, 51, 33, 0.6) 54.1%);
    opacity: 0.6;
}

.hero-section .hero-content {
    position: relative;
    z-index: 1;
}

.hero-section h1 {
    color: var(--white);
    font-size: var(--fs-4xl);
    margin-bottom: 20px;
}

.hero-section p, .hero-section .section-description {
    color: var(--white);
    font-size: var(--fs-md);
    margin-bottom: 30px;
}

.hero-banner {
    background-size: cover;
    background-position: center;
    position: relative;
}

/* ===========================================
   SECTION: FOOTER (GLOBAL)
   =========================================== */
.footer {
    background-color: var(--aqua-deep);
    position: relative;
    overflow: hidden;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background: var(--gradient-hero);
}

.footer-content {
    position: relative;
    z-index: 1;

    .footer-logo {
        max-width: 231px;
        margin-bottom: 24px;
    }

    p {
        color: #FFFFFF;
        font-size: 16px;
        line-height: 24px;
        font-family: DMSansRegular;
    }
    .footer-title {
        color: #FFFFFF;
        font-size: 26px;
        line-height: 0;
        font-family: DMSansBlack;
        margin-bottom: 56px;
    }
    .footer-links {
        img {
            width: auto;
            height: 16px;
            margin-right: 16px;
        }
        a {
            color: #FFFFFF;
            font-size: 16px;
            line-height: 24px;
            font-family: DMSansRegular;
            margin-bottom: 16px;
        }
    }
    .fw-bold {
        font-family: DMSansBlack;
    }
}

.footer h5 {
    color: var(--white);
    font-weight: 900;
    font-size: var(--fs-xl);
    margin-bottom: 20px;
}

.footer p, .footer a {
    color: var(--white);
    font-size: var(--fs-md);
}

.footer a:hover {
    color: var(--chartreuse);
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-links img {
    width: 22px;
    height: auto;
}

.footer-bottom {
    background-color: var(--zuccini);
    padding: 20px 0;
    margin-top: 40px;
}

.footer-bottom p {
    margin: 0;
    font-size: var(--fs-xs);
}

/* Newsletter */
.newsletter-section {
    position: relative;
    padding: 45px 0;

    ::before {
        background: var(--gradient-hero);
    }

    .newsletter-content {
        position: relative;
        z-index: 1;
    }

    .newsletter-label {
        color: #FFFFFF;
        font-size: 14px;
        font-family: DMSansRegular;
        margin-bottom: 14px !important;
    }

    .newsletter-description {
        color: #FFFFFF;
        font-size: 24px;
        font-family: DMSansMedium;
        margin-bottom: 22px !important;
    }

    .newsletter-form {
        display: flex;
    }

    .newsletter-form input {
        flex: 1;
        padding: 12px 32px;
        border: 1px solid var(--mystic);
        border-radius: 25px 0 0 25px;
        font-size: var(--fs-md);
        color: #005537;
        font-size: 16px;
        font-family: DMSansRegular;
        box-shadow: none !important;
        outline: none !important;
    }
    .newsletter-form input::placeholder {
        color: #B1B1B1;
    }

    .newsletter-form a {
        color: #005537 !important;
        font-size: 16px;
        font-family: DMSansBold;
        font-weight: 700;
        padding: 12px 68px;
        border: none;
        border-radius: 0 25px 25px 0;
        background-color: #86E300;
        border-color: #86E300;
    }

    .form-check-input:checked {
        accent-color: #86E300 !important;
        background-color: #86E300 !important;
        border-color: #86E300 !important;
    }
}

/* ===========================================
   SECTION: CARDS & COMPONENTS (GLOBAL)
   =========================================== */
.feature-card {
    background-color: var(--white);
    border-radius: 24px;
    box-shadow: 0px 4px 20px rgba(177, 177, 177, 0.26);
    padding: 30px;
    height: 100%;
    transition: transform 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
}

.feature-card .number {
    font-size: var(--fs-6xl);
    font-weight: 900;
    color: var(--white);
    -webkit-text-stroke: 1px var(--alien-armpit);
    opacity: 0.5;
    line-height: 1;
}

.feature-card h4 {
    color: var(--tuatara);
    font-size: var(--fs-2xl);
    margin: 15px 0;
}

.feature-card p {
    color: var(--tuatara);
    font-size: var(--fs-md);
}

.feature-card .icon {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 15px;
}

.feature-card .icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Stats Card */
.stats-card {
    background-color: #f1fcff;
    border-radius: 24px;
    padding: 40px;
}

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

.stat-item .icon {
    margin-bottom: 15px;
}

.stat-item .icon img {
    width: 64px;
    height: auto;
}

.stat-item .number {
    font-family: "Rubik", sans-serif;
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--scooter);
    margin-bottom: 16px;
}

.stat-item .label {
    font-family: "Rubik", sans-serif;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--abbey);
    text-transform: uppercase;
}

/* Article Cards */
.article-card {
    background-color: var(--white);
    border-radius: 24px;
    box-shadow: 0px 4px 20px rgba(177, 177, 177, 0.26);
    overflow: hidden;
    height: 100%;

    img {
        width: 100%;
        height: 260px;
        object-fit: cover;
    }
    h5 {
        color: var(--tuatara);
        font-weight: 900;
        font-size: 26px;
        font-family: "DMSansBlack";
        margin-bottom: 16px;
        height: 62px;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .content {
        padding: 25px;
    }
    p {
        font-size: 16px;
        font-family: "DMSansRegular";
        color: #343434;
        height: 70px;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        margin-bottom: 0;
    }
    .read-more {
        color: #9747FF;
        font-family: "DMSansSemi";
        float: right;
        font-size: 12px;
        margin-top: 5px;
    }
    .article-footer {
        padding: 25px;
        padding-top: 0;

        .article-date {
            color: #005537;
            font-size: 12px;
            font-family: "DMSansRegular";
        }
    }
}

/* Job Cards */
.job-card {
    background-color: var(--white);
    border-radius: 24px;
    box-shadow: 0px 4px 20px rgba(177, 177, 177, 0.26);
    padding: 30px;
    transition: transform 0.3s ease;
}

.job-card:hover {
    transform: translateY(-3px);
}

.job-card .location {
    color: var(--sonic-silver);
    font-size: var(--fs-sm);
    margin-bottom: 10px;
}

.job-card h4 {
    color: var(--tuatara);
    font-size: var(--fs-lg);
    margin-bottom: 15px;
}

.job-card .arrow {
    width: 40px;
    height: 40px;
    background-color: var(--chartreuse);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Team Cards */
.team-card {
    padding: 24px;
    text-align: center;
    box-shadow: 0 4px 20px #B1B1B142;
    border-radius: 24px;

    .avatar {
        width: 120px;
        height: 120px;
        object-fit: cover;
        border-radius: 50%;
        overflow: hidden;
        margin: 0 auto 24px;
        border: 1px solid #005537;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    h5 {
        color: var(--tuatara);
        font-weight: 900;
        font-size: var(--fs-lg);
        margin-bottom: 5px;
    }
    .position {
        color: var(--primary);
        font-size: var(--fs-sm);
        font-family: DMSansRegular;
    }
    .team-socials {
        display:flex;
        gap:24px;
        justify-content: center;
    }
}

/* ===========================================
   SECTION: IMAGE GALLERY (GLOBAL)
   =========================================== */
.image-gallery {
    position: relative;
}

.image-gallery .decorative-circle {
    position: absolute;
    background-color: var(--sulu);
    border-radius: 50%;
}

.image-gallery .circle-lg {
    width: 192px;
    height: 192px;
}

.image-gallery .circle-md {
    width: 82px;
    height: 82px;
}

.image-gallery .circle-sm {
    width: 45px;
    height: 45px;
}

.image-gallery img {
    border-radius: 24px;
}

/* ===========================================
   SECTION: CLIENTS SLIDER (GLOBAL)
   =========================================== */
.clients-section {
    padding-top: 0;
    h2 {
        text-align: center;
        margin-bottom: 15px;
    }
    .subtitle {
        text-align: center;
        margin-bottom: 40px;
    }

    .clients-slider {
        overflow-x: auto;
        overflow-y: hidden;
        padding: 20px 0;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scrollbar-width: none;       /* Firefox */
        -ms-overflow-style: none;    /* IE / Edge vechi */
        ::-webkit-scrollbar {
            display: none;               /* Chrome, Safari */
        }

        ::-webkit-scrollbar {
            display: none;
        }

        .slider-track {
            display: flex;
            gap: 56px;
            align-items: center;
            width: max-content;

            a {
                flex-shrink: 0;
            }
        }

        img {
            transition: all 0.3s ease;
        }

        img:hover {
            filter: grayscale(0%);
            opacity: 1;
        }
    }
}

.form-floating label {
    color: var(--sonic-silver);
}

.form-control {
    border: 1px solid var(--mystic);
    border-radius: 12px;
    padding: 12px 16px;
    font-size: var(--fs-md);
}

.form-control:focus {
    border-color: var(--aqua-deep);
    box-shadow: 0 0 0 0.2rem rgba(0, 85, 55, 0.15);
}

.form-check-input:checked {
    background-color: var(--aqua-deep);
    border-color: var(--aqua-deep);
}

/* ===========================================
   SECTION: CTA BANNER (GLOBAL)
   =========================================== */
.cta-banner {
    background: var(--gradient-primary);
    border-radius: 24px;
    padding: 68px 98px 68px 68px;
    position: relative;
    overflow: hidden;
}

.cta-banner .content {
    position: relative;
    z-index: 1;
}

.cta-banner h3 {
    color: var(--white);
    font-size: var(--fs-3xl);
    line-height: 48px;
    margin-bottom: 20px;
}

.cta-banner .image {
    position: absolute;
    left: 16px;
    top: 0;
    height: 100%;
    width: auto;
}

/* ===========================================
   SECTION: CERTIFICATIONS (GLOBAL)
   =========================================== */
.certifications-section {
    .cert-logos {
        display: flex;
        gap: 40px;
        align-items: center;
        flex-wrap: wrap;
    }

    .cert-logos img {
        max-height: 80px;
        width: auto;
    }
}

/* ===========================================
   SECTION: STICKY BAR (GLOBAL)
   =========================================== */
.sticky-bar {
    background-color: #ecf9da;
    height: 76px;
    position: sticky;
    bottom: 0;
    z-index: 900;
    border-radius: 24px 24px 0 0;

    .close-btn {
        position: absolute;
        top: 16px;
        right: 16px;
        width: auto;

        img {
            width: 16px;
            height: 16px;
        }
    }

    .btn-request-offer {
        margin-left: 32px;
        .btn-cta {
            height: 44px;
            align-content: center;
        }
    }
}

.sticky-bar .tagline {
    color: var(--aqua-deep);
    font-weight: 500;
    font-size: var(--fs-md);
    font-family: DMSansMedium;
    line-height: 24px;
    margin-left: 32px;
}

.sticky-bar .contact-info {
    display: flex;
    gap: 42px;
    align-items: center;
}

.sticky-bar .contact-info a {
    color: var(--aqua-deep);
    font-size: var(--fs-md);
    font-family: DMSansRegular;
    display: flex;
    align-items: center;
    gap: 8px;

    img {
        margin-right: 22px;
    }
}

.sticky-bar .btn-cta {
    color: var(--aqua-deep);
    font-size: 14px;
    font-family: DMSansBlack;
    padding: 8px 32px;
}

/* ===========================================
   RESPONSIVE ADJUSTMENTS (GLOBAL)
   =========================================== */
@media (max-width: 1199.98px) {
    h1 { font-size: 36px; }
    h2 { font-size: 32px; }
    h3 { font-size: 28px; }

    .hero-section h1 { font-size: 32px; }
}

@media (max-width: 991.98px) {
    h1 { font-size: 32px; }
    h2 { font-size: 28px; }
    h3 { font-size: 24px; }

    .cta-banner {
        padding: 40px;
    }

    .cta-banner .image {
        display: none;
    }

    .feature-card .number {
        font-size: 60px;
    }
}

@media (max-width: 767.98px) {
    h1 { font-size: 28px; }
    h2 { font-size: 24px; }
    h3 { font-size: 20px; }

    .section {
        padding: 40px 0;
    }

    .hero-section {
        min-height: 600px;
        padding-bottom: 48px;
        background-size: auto 282px !important;
        background-position: right top !important;
        background-repeat: no-repeat;

        h1, .section-description {
            padding-right: 32px;
        }
    }

    .hero-section::before {
        background: linear-gradient(180deg, #002E1E00 0%, #00301F29 30%, #003321 45%);
        opacity: 1.0;
    }

    .hero-section h1 { font-size: 24px;line-height: 32px; }

    .stats-card {
        padding: 30px 20px;
    }

    .feature-card {
        padding: 25px;
    }

    .footer {
        padding-top: 50px;
    }

    .newsletter-form {
        flex-direction: column;
    }

    .newsletter-form input,
    .newsletter-form button {
        border-radius: 25px;
        width: 100%;
    }

    .newsletter-form button {
        margin-top: 10px;
    }

    .top-bar {
        a {
            font-size: 14px;
            font-family: DMSansRegular;
        }
    }

    .navbar {
        padding: 8px 0 !important;
        .navbar-toggler {
            color: #005537;
            margin-right: -0.75rem;
            box-shadow: none !important;
        }
    }
}

@media (max-width: 575.98px) {
    .top-bar .contact-info {
        flex-direction: column;
        gap: 10px;
    }
    .cta-banner {
        padding: 30px 20px;
    }
}


/* ============================================
   PAGE SPECIFIC STYLES: HOME (home.html)
   ============================================ */

/* Homepage Hero */
.section-title {
    text-align: center;
    font-size: 44px;
    font-family: DMSansBlack;
    color: #005537;
    line-height: 56px;
}
.section-subtitle {
    text-align: center;
    font-size: 16px;
    font-family: DMSansRegular;
    color: #343434;
    line-height: 24px;
}
.section-description {
    font-size: 16px;
    font-family: DMSansRegular;
    color: #343434;
    line-height: 24px;
}

.home-hero {
    background-size: cover;
    background-position: center top;
}

/* Features Section */
.features-section {
    background: var(--gradient-features);
}

.features-section .badge-item {
    text-align: center;
}

.features-section .badge-item img {
    width: 160px;
    height: 160px;
    object-fit: cover;
}

.features-section .badge-item h5 {
    color: var(--tuatara);
    font-size: var(--fs-2xl);
    font-weight: 900;
}

/* Why Choose Us Section */
.why-choose-section {
    padding: 100px 0;
}

.why-choose-section .section-title {
    text-align: center;
    margin-bottom: 50px;
}

.benefit-item {
    margin-bottom: 40px;
}

.benefit-item .number-badge {
    font-size: 88px;
    font-weight: 900;
    color: var(--white);
    -webkit-text-stroke: 1px var(--alien-armpit);
    opacity: 0.5;
    line-height: 1;
    padding-right: 70px;
    font-family: DMSansBlack;
}

.benefit-item h4 {
    color: var(--tuatara);
    font-size: var(--fs-2xl);
    margin: 10px 0;
}

.benefit-item p {
    font-family: "DMSansRegular";
    color: var(--tuatara);
}

.benefit-item .icon-circle {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    overflow: hidden;
}

.benefit-item .icon-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* About Preview Section */
.about-preview-section {
    padding: 100px 0;
}

.about-preview-section .gallery {
    position: relative;
    min-height: 548px;
}

.about-preview-section .gallery .circle-decor {
    position: absolute;
    background-color: var(--sulu);
    border-radius: 50%;
    z-index: 0;
}

.about-preview-section .gallery .circle-1 {
    width: 192px;
    height: 192px;
    left: 22px;
    top: 40%;
}

.about-preview-section .gallery .circle-2 {
    width: 82px;
    height: 82px;
    left: 1px;
    top: 50px;
}

.about-preview-section .gallery .circle-3 {
    width: 45px;
    height: 45px;
    left: 25%;
    top: 7px;
}

.about-preview-section .gallery img {
    position: relative;
    z-index: 1;
    border-radius: 24px;
}

.about-preview-section .gallery .img-1 {
    position: absolute;
    right: 0;
    top: 0;
    width: 66%;
    max-width: 366px;
}

.about-preview-section .gallery .img-2 {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 63%;
    max-width: 346px;
}

.about-preview-section .gallery .img-3 {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 31%;
    max-width: 170px;
}

/* Articles Section */
.articles-section {
    padding: 100px 0;
}

.articles-section .section-title {
    text-align: center;
    margin-bottom: 20px;
}

.articles-section .section-subtitle {
    text-align: center;
    margin-bottom: 50px;
}

.faq-items {
    margin-top: 40px;

    .collapse {
        display: grid;
        gap: 24px;

        .card {
            padding: 16px 32px;
            border-radius: 24px;
            box-shadow: 0 4px 20px #B1B1B142;
            border-color: white;
        }

        .card-header {
            background: none;
            padding: 16px 0;
            margin: 0 1rem;

            .icon-collapse i {
                color: #005537;
                font-size: 20px;
            }
        }

        .card-header.collapsed {
            border-bottom: none;
        }

        .card-title {
            font-family: "DMSansBlack";
            font-size: 16px;
            color: #343434;
        }

        .card-body {
            font-family: "DMSansRegular";
            font-size: 16px;
            color: #343434;
        }
    }
}

/* Documents Section */
.documents-uploads {
    gap:9px;

    a {
        font-size: 16px;
        font-family: DMSansBlack;
        color: #005537;
    }
}

/* Principles Section */
.principles-section {
    background: linear-gradient(180deg, #F8F8F8 0%, #F8F8F8 100%);

    .principles-section-inner {
        background-size: auto 282px;
        background-position: bottom right;
        background-repeat: no-repeat;
        padding: 120px 0;
    }
}

/* ============================================
   PAGE SPECIFIC STYLES: ABOUT (about.html)
   ============================================ */

/* Solutions tabs */
.solutions-tabs {
    padding-bottom: 240px;

    ul {
        border-bottom: none;
        margin-bottom: 80px;
        gap: 24px;
        justify-content: center;

        li {
            a {
                border: 1px solid #005537 !important;
                border-radius: 25px !important;
                background-color: #00000000 !important;
                padding: 10px 32px;
                height: 50px;
                color: #005537 !important;
                font-size: 18px;
                line-height: 56px;
                font-family: DMSansBlack;
                align-items: center;
                display: flex;
            }
            a.active {
                background-color: #96FF00 !important;
                border: none !important;
            }
        }
    }

    .solutions-tabs-title {
        font-size: 36px;
        font-family: DMSansBlack;
        line-height: 48px;
        color: #343434;
        margin-bottom: 24px;
    }

    .solutions-tabs-description {
        font-size: 16px;
        font-family: DMSansRegular;
        line-height: 28px;
        color: #767676;
        margin-bottom: 40px;
    }

    .solutions-tabs-left-details {
        font-size: 24px;
        font-family: DMSansBlack;
        line-height: 48px;
        color: #005537;
        margin-bottom: 40px;
    }

    .solutions-tabs-right-details {
        font-size: 36px;
        font-family: DMSansBlack;
        line-height: 48px;
        color: #005537;
        margin-bottom: 40px;
    }

    .solutions-tabs-bullets {
        font-size: 16px;
        font-family: DMSansRegular;
        line-height: 48px;
        color: #005537;
        margin-bottom: 28px;
    }
}

.field-gdpr-inline[type="checkbox"],
.field-gdpr-inline[type="checkbox"]:hover,
.field-gdpr-inline[type="checkbox"]:focus,
.field-gdpr-inline[type="checkbox"]:active,
.field-gdpr-inline:checked:hover,
.field-gdpr-inline:checked:focus,
.form-check-input:checked,
.form-check-input:checked:hover,
.form-check-input:checked:focus,
.form-check-input:checked:active
{
    accent-color: #005537 !important;
    background-color: #005537 !important;
}

/* Contact Form Overlay */
.contact-form-overlay-section, .contact-form {
    .form-image {
        border-radius: 24px;
        height: 100%;
        object-fit: cover;
    }
    .form-container {
        background-color: var(--white);
        border-radius: 40px;
        box-shadow: 0px 4px 20px rgba(177, 177, 177, 0.26);
        padding: 56px 32px 64px 32px;
    }
    .form-title {
        font-size: 36px;
        font-family: DMSansBlack;
        line-height: 48px;
        color: #005537;
        padding: 0 50px;
        margin-bottom: 24px;
    }
    .form-subtitle {
        font-size: 16px;
        font-family: DMSansRegular;
        line-height: 28px;
        color: var(--sonic-silver);
        margin-bottom: 32px;
        padding: 0 80px;
        text-align: center;
    }
    .field-gdpr-inline {
        border-radius: 4px;
        border: 1px solid #C4C4C4;
    }
    form {
        .col-form-field_csrf, .contact-form-content_cfg {
            display: none;
        }
        .col-form {
            margin-bottom: 24px;
        }
        label {
            width: 100%;
        }
        input, textarea, select {
            border-radius: 25px;
            border: 1px solid #C4C4C4;
            height: 50px;
            color: #343434;
            font-size: 14px;
            padding: 0 24px;
            font-family: DMSansRegular;
            line-height: 30px;
        }
        input::placeholder, textarea::placeholder, select {
            color: #C4C4C4;
        }
        .field_select_fg.parsley-success select {
            color: #343434;
        }
        textarea {
            min-height: 120px;
            padding: 16px 24px;
        }
        .col-form-field_uploader label {
            color: #595959;
            font-size: 14px;
            font-family: DMSansRegular;
            line-height: 30px;
        }
        .field_raw_fg {
            display: flex;
            justify-content: center;
        }
        .btn-contact-submit {
            background-color: #96FF00 !important;
            border-color: #96FF00;
            border-radius: 25px;
            height: 50px;
            padding: 0 32px;
            margin-top: 48px;
            align-content: center;

            color: #005537 !important;
            font-size: 18px;
            font-family: DMSansBlack;

            i {
                display: none;
            }
        }
        .btn-uploader {
            width: 100%;
            height: 80px;
            border-radius: 10px;
            background-color: #ECF9DA;
            border-color: #ECF9DA;
            color: transparent !important;
            font-size: 0;
            i {
                display: none;
            }
        }
        .form-control-feedback {
            display: none;
        }
        .field-gdpr-inline_fg {
            display: flex;

            .checker {
                margin-right: 8px;
            }
            .field-gdpr-inline {
                height: 16px;
            }
            label {
                color: #767676;
                font-size: 11px;
                font-family: DMSansRegular;
                line-height: 20px;
            }
        }
        .field_uploader_fg {
            ul li {
                display: block !important;
            }
        }
    }
}
.contact-form-overlay-section {
    .form-container {
        margin-top: -156px;
    }
}

/* Careers Section */
.careers-form-section {
    .careers-form-job {
        .section-title {
            margin-bottom: 32px;
        }
        .section-features {
            margin-bottom: 44px;
            gap: 48px;
            display: flex;
            flex-wrap: wrap;
            row-gap: 16px;

            img {
                height: 16px;
                margin-right: 16px;
                display: flex;
                align-self: center;
            }
            span {
                color: #005537;
                font-size: 16px;
                font-family: DMSansMedium;
                display: flex;
            }
        }
        .section-description {
            margin-bottom: 80px;
        }
    }

    .side-image {
        width: 100%;
        border-radius: 16px;
        margin-bottom: 40px;
    }
    .side-title {
        color: #005537;
        font-size: 28px;
        line-height: 40px;
        font-family: DMSansBlack;
        margin-bottom: 24px;
    }
    .side-subtitle {
        color: #343434;
        font-size: 16px;
        line-height: 24px;
        font-family: DMSansRegular;
    }
    .form-container {
        margin-top: 0;
    }
}

/* Careers list jobs section */
.careers-list-jobs-section {
    .section-subtitle {
        margin-bottom: 40px;
    }
    .careers-list-jobs-card {
        border-radius: 24px;
        padding: 32px;
        background: linear-gradient(57deg, #FFFFFF 60%, #ECF9DA 80%);
        width: calc(50% - 16px);
    }
    .careers-list-jobs-card-inner {
        background-position: top right !important;
        z-index: 10;

        h5 {
            margin-bottom: 8px;
        }
        .careers-list-jobs-feature {
            margin-top: 16px;
            display: flex;

            img {
                height: 16px;
                margin-right: 16px;
            }
            span {
                font-size: 16px;
                font-family: DMSansMedium;
                color: #005537;
                display: flex;
            }
        }
        .careers-list-jobs-button {
            align-content: flex-end;
            justify-content: flex-end;
            display: grid;

            a {
                height: 44px;
                border-radius: 25px;
                border: 1px solid #005537;
                padding: 10px 32px;
                color: #005537 !important;
                font-size: 14px;
                font-family: DMSansBlack;
            }
        }
    }
    .careers-list-jobs-background {
        position: absolute;
        top: 0;
        right: 0;
        z-index: -1;
    }
}

/* Contact Form Section */
.contact-form {
    .card {
        margin-bottom: 32px;
        height: auto;
    }
    .side-image {
        width: 100%;
        border-radius: 16px;
        margin-bottom: 40px;
    }
    .contact-details-description {
        color: #343434;
        font-size: 14px;
        line-height: 22px;
        font-family: DMSansRegular;
        margin-top: 16px;
        margin-bottom: 24px;
    }
    .detail {
        margin-bottom: 14px;

        img {
            height: 16px;
            margin-right: 22px;
        }
        span {
            color: #005537;
            font-size: 16px;
            line-height: 24px;
            font-family: DMSansRegular;
        }
    }
    .side-title {
        color: #005537;
        font-size: 28px;
        line-height: 40px;
        font-family: DMSansBlack;
        margin-bottom: 24px;
    }
    .side-subtitle {
        color: #343434;
        font-size: 16px;
        line-height: 24px;
        font-family: DMSansRegular;
        margin-bottom: 32px;
    }
    .contact-details-header {
        img {
            height: 45px;
            margin-right: 16px;
        }
        .title {
            color: #005537;
            font-size: 20px;
            line-height: 38px;
            font-family: DMSansBlack;
            align-content: center;
        }
    }
    .contact-navigate-to-address {
        color: #343434;
        font-size: 16px;
        line-height: 35px;
        font-family: DMSansRegular;
    }
    .contact-navigate-to-href {
        color: #2DBEE1;
        font-size: 13px;
        line-height: 20px;
        font-family: DMSansMedium;
    }
}

/* About Hero */
.about-hero {
    background-size: cover;
    background-position: center;
}

/* Mission Section */
.mission-section {
    background: var(--gradient-features);
    padding: 100px 0;
}

.mission-section .mission-card {
    display: flex;
    gap: 40px;
    margin-bottom: 60px;
}

.mission-section .mission-card.reverse {
    flex-direction: row-reverse;
}

.mission-section .mission-card .content {
    flex: 1;
    align-content: center;
}

.mission-section .mission-card .image {
    flex: 1;
}

.mission-section .mission-card img {
    border-radius: 24px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 991.98px) {
    .mission-section .mission-card,
    .mission-section .mission-card.reverse {
        flex-direction: column;
    }
}

/* Values Section */
.values-section {
    padding: 80px 0;
}

.value-item {
    text-align: center;
    padding: 30px;
}

.value-item .icon {
    width: 80px;
    height: 80px;
    background-color: var(--sulu);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.value-item .icon img {
    width: 40px;
    height: auto;
}

.value-item h5 {
    color: var(--tuatara);
    font-weight: 900;
    margin-bottom: 10px;
}

/* Timeline Section */
.timeline-section {
    .timeline-content {
        position: relative;

        .timeline-year {
            font-size: 28px;
            font-family: DMSansBold;
            line-height: 32px;
            text-align: end;
            margin-bottom: 10px;
            color: var(--primary);
        }
        .timeline-text {
            border-radius: 24px;
            background-color: #FAFFF2;
            padding: 32px;
            color: var(--primary);
            font-size: 16px;
            font-family: DMSansRegular;
            line-height: 28px;
        }
    }
    .timeline-dot {
        img {
            position: absolute;
            top: 22px;
            left: calc(100% - 30px);
            right: auto;
            width: 58px;
            height: 235px;
        }
    }
    .timeline-dot.right {
        img {
            left: auto;
            right: calc(100% - 28px);
        }
    }
    .timeline-dot-end img {
        position: absolute;
        top: 22px;
        left: -26px;
        width: 52px;
        height: 52px;
    }
}

/* Team Section */
.testimonials-section {
    .slick-track {
        margin-top: 40px;
    }

    .testimonials-slide {
        box-shadow: 0 4px 20px #B1B1B142;
        border-radius: 24px;
        padding: 24px;
        padding-bottom: 32px;
        margin: 20px 16px;
    }

    .widget-content-testimonials {
        padding: 8px 32px;
        font-size: 16px;
        font-family: DMSansRegular;
        line-height: 28px;
        color: #767676;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 6;
        -webkit-box-orient: vertical;
    }

    .client-info {
        margin-top: 24px;
        padding: 0 32px;

        img {
            border: 1px solid #707070;
            border-radius: 50%;
            margin-right: 16px;
        }
        .client-name {
            font-size: 18px;
            font-family: DMSansBlack;
            line-height: 38px;
        }
        .client-office {
            font-size: 14px;
            font-family: DMSansRegular;
            line-height: 24px;
            color: var(--primary);
        }
    }
}

/* Team Section */
.team-section {
    padding: 100px 0;

    .section-title {
        text-align: center;
        margin-bottom: 20px;
    }

    .section-subtitle {
        text-align: center;
        margin-bottom: 50px;
    }

    .team-see-more {
        border-radius: 25px;
        height: 44px !important;
        border: 1px solid var(--primary);
        color: var(--primary);
        padding: 10px 32px;
        font-size: 14px;
        font-family: DMSansBlack;
    }
}


/* ============================================
   PAGE SPECIFIC STYLES: OFFER (offer.html)
   ============================================ */

/* Offer Hero */
.offer-hero {
    background-size: cover;
    background-position: center;
}

/* Solutions Section */
.solutions-section {
    .solution-gallery {
        position: relative;
        min-height: 500px;
    }

    .solution-gallery .circle-decor {
        position: absolute;
        background-color: var(--sulu);
        border-radius: 50%;
        z-index: 0;
    }

    .solution-gallery img {
        position: relative;
        z-index: 1;
        border-radius: 24px;
    }

    .solutions-text {
        color: #343434;
        font-size: 16px;
        line-height: 24px;
        font-family: DMSansRegular;
    }
}

/* Consult Specialist Section */
.consult-specialist-section {
    .avatar {
        margin-right: 24px;

        img {
            width: 120px;
            height: 120px;
            object-fit: cover;
            border-radius: 50%;
            border: 1px solid #005537;
        }
    }

    h5 {
        font-size: 26px;
        color: #343434;
        line-height: 38px;
        font-family: DMSansBlack;
    }

    .position {
        font-size: var(--fs-md);
        color: #005537;
        line-height: 24px;
        font-family: DMSansRegular;
    }

    .socials-links {
        gap: 16px;
    }

    .consult-specialist-description {
        font-size: var(--fs-md);
        color: #767676;
        line-height: 28px;
        font-family: DMSansRegular;
        margin-top: 16px;
    }
}

/* Why Choose Section for Offer */
.offer-benefits {
    background: var(--gradient-features);
    padding: 100px 0;
}


/* ============================================
   PAGE SPECIFIC STYLES: REPORTS (reports.html)
   ============================================ */

/* Reports Hero */
.reports-hero {
    background-size: cover;
    background-position: center;
}

.document-card {
    background-color: var(--white);
    border-radius: 24px;
    box-shadow: 0px 4px 20px rgba(177, 177, 177, 0.26);
    overflow: hidden;
    margin-bottom: 30px;
}

.document-card .preview {
    height: 200px;
    overflow: hidden;
}

.document-card .preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.document-card .content {
    padding: 25px;
}

.document-card h5 {
    color: var(--tuatara);
    font-weight: 900;
    margin-bottom: 15px;
}

.document-card .download-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--aqua-deep);
    font-weight: 700;
}

.document-card .download-btn img {
    width: 16px;
    height: auto;
}


/* ============================================
   PAGE SPECIFIC STYLES: CAREERS (careers.html)
   ============================================ */

/* Careers Hero */
.careers-hero {
    background: var(--gradient-hero);
}

.careers-hero .hero-image {
    position: relative;
}

.careers-hero .hero-image img {
    border-radius: 24px;
}

/* Jobs List Section */
.jobs-section {
    padding: 100px 0;
}

.jobs-section .section-title {
    margin-bottom: 20px;
}

.jobs-section .section-subtitle {
    margin-bottom: 50px;
}

.job-listing {
    margin-bottom: 20px;
}

.job-listing .job-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.job-listing .job-info {
    flex: 1;
}

/* No Jobs State */
.no-jobs-section {
    padding: 100px 0;
    text-align: center;
}

.no-jobs-section .icon {
    width: 120px;
    height: 120px;
    background-color: var(--sulu);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
}

.no-jobs-section h3 {
    margin-bottom: 20px;
}


/* ============================================
   PAGE SPECIFIC STYLES: JOB DETAIL (job.html)
   ============================================ */

/* Job Detail Content */
.job-detail-section {
    padding: 80px 0;
}

.job-detail-section .job-header {
    margin-bottom: 40px;
}

.job-detail-section .job-meta {
    display: flex;
    gap: 30px;
    margin-bottom: 20px;
}

.job-detail-section .job-meta span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--sonic-silver);
}

.job-detail-section .job-content h4 {
    color: var(--tuatara);
    font-size: var(--fs-lg);
    margin: 30px 0 15px;
}

.job-detail-section .job-content ul {
    list-style: none;
    padding: 0;
}

.job-detail-section .job-content li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
}

.job-detail-section .job-content li::before {
    content: '•';
    color: var(--alien-armpit);
    font-size: 20px;
    position: absolute;
    left: 0;
    top: -2px;
}

/* Application Form */
.application-form {
    background-color: var(--white);
    border-radius: 24px;
    box-shadow: 0px 4px 20px rgba(177, 177, 177, 0.26);
    padding: 40px;
    position: sticky;
    top: 100px;
}

.application-form h4 {
    margin-bottom: 25px;
}

.application-form .file-upload {
    border: 2px dashed var(--mystic);
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.application-form .file-upload:hover {
    border-color: var(--aqua-deep);
    background-color: var(--alabaster);
}

.application-form .file-upload img {
    width: 48px;
    height: auto;
    margin-bottom: 15px;
}


/* ============================================
   PAGE SPECIFIC STYLES: JOB DETAIL
   (job.html)
   ============================================ */

.breadcrumb-section {
    background-color: var(--alabaster);
    border-bottom: 1px solid var(--mystic);
}

.breadcrumb-section .breadcrumb-item a {
    color: var(--aqua-deep);
    text-decoration: none;
}

.breadcrumb-section .breadcrumb-item.active {
    color: var(--sonic-silver);
}

.job-detail-section {
    padding: 60px 0;
}

.job-detail-section .job-title {
    color: var(--aqua-deep);
    font-size: var(--fs-4xl);
    font-weight: 700;
}

.job-detail-section .job-meta {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--mystic);
}

.job-detail-section .meta-item img {
    flex-shrink: 0;
}

.job-detail-section .job-description p {
    color: var(--tuatara);
    line-height: 1.8;
    margin-bottom: 20px;
}

.job-detail-section .job-description h3 {
    color: var(--aqua-deep);
    font-size: var(--fs-xl);
    font-weight: 600;
}

.job-detail-section .job-list {
    padding-left: 20px;
    color: var(--tuatara);
}

.job-detail-section .job-list li {
    margin-bottom: 10px;
    line-height: 1.6;
}

.application-form-wrapper .application-form {
    background-color: var(--white);
    box-shadow: 0px 4px 30px rgba(177, 177, 177, 0.2);
}

.application-form .form-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.application-form .form-title {
    color: var(--aqua-deep);
    font-size: var(--fs-2xl);
    font-weight: 700;
}

.application-form .form-subtitle {
    font-size: var(--fs-md);
}

.file-upload-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 20px;
    border: 2px dashed var(--mystic);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: var(--alabaster);
}

.file-upload-btn:hover {
    border-color: var(--aqua-deep);
    background-color: #f0f9f5;
}

.file-upload-btn span {
    color: var(--sonic-silver);
    font-size: var(--fs-sm);
}

.careers-cta-section {
    background-color: var(--chartreuse);
}

.careers-cta-section h2 {
    font-size: var(--fs-3xl);
    font-weight: 700;
}

.careers-cta-section p {
    font-size: var(--fs-md);
    color: var(--tuatara);
    line-height: 1.8;
}

/* ============================================
   PAGE SPECIFIC STYLES: CAREERS EMPTY
   (careers-empty.html)
   ============================================ */

.careers-empty-main {
    padding: 80px 0;
}

.careers-empty-main .careers-image-section img {
    border-radius: 24px;
    width: 100%;
    height: auto;
}

.careers-empty-main .careers-info {
    background: linear-gradient(135deg, var(--chartreuse) 0%, var(--sulu) 100%);
}

.careers-empty-main .careers-info h2 {
    color: var(--aqua-deep);
    font-size: var(--fs-2xl);
    font-weight: 700;
}

.careers-empty-main .careers-info p {
    color: var(--tuatara);
    line-height: 1.7;
}

.no-jobs-message {
    border: 2px dashed var(--mystic);
}

.no-jobs-message h4 {
    color: var(--aqua-deep);
    font-weight: 600;
}

.layout-gdpr {
    .widget_controller {
        .widget-body {
            padding-top: 60px;
            padding-bottom: 120px;

            #gdpr-page-title {
                margin-bottom: 40px;
                color: #005537;
                font-size: 38px;
                line-height: 56px;
                font-family: DMSansBlack;
            }

            .gdpr-content {
                color: #343434;
                font-size: 16px;
                line-height: 24px;
                font-family: DMSansRegular;

                b, strong {
                    font-family: DMSansBlack;
                }
            }
        }
    }
}

.slick-dots {
    list-style: none;
    display: flex;
    justify-content: center;
    padding-top: 32px;
    margin-left: -3vh;
}

.slick-dots li {
    margin: 0 5px;
}

.slick-dots button {
    background-color: #86E300;
    height: 8px;
    width: 8px;
    padding: 0;
    border-radius: 100%;
    display: block;
    border: none;
    outline: none;

    transition: all 0.2s ease;
}

.slick-dots li.slick-active button {
    background-color: #86E300;
    width: 16px;
    height: 8px;
    border-radius: 4px;
}

.slick-slide {
    height: inherit;
}

.searchResults {
    padding-top: 70px;
    margin-bottom: 150px;

    .searchResultsText {
        color: #005537;
        font-size: 24px;
        line-height: 32px;
        font-family: DMSansBlack;
        margin-bottom: 8px;
    }
    .searchResultsNo {
        color: #86E300;
        font-size: 16px;
        line-height: 30px;
        font-family: DMSansRegular;
    }
    .noResultsImage {
        height: 178px;
        object-fit: contain;
        margin-top: 48px;
        margin-bottom: 120px;
    }
    .search-block {
        margin-top: 32px;
    }
    .category-name {
        color: #005537;
        font-size: 20px;
        line-height: 52px;
        font-family: DMSansSemi;
        margin-top: 16px;
        margin-bottom: 16px;
    }
    .category-results {
        color: #86E300;
        font-size: 16px;
        line-height: 30px;
        font-family: DMSansRegular;
    }
    .page-name {
        color: #393A3B;
        font-size: 18px;
        line-height: 32px;
        font-family: DMSansMedium;
    }
}

.col-form-field_select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    .form-group {
        position: relative;
    }
    .form-group::after {
        content: "";
        position: absolute;
        right: 25px;
        top: 45%;
        width: .55rem;
        height: .55rem;
        transform: translateY(-60%) rotate(45deg);
        color: #005537;

        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;

        pointer-events: none;
        opacity: .8;
    }
}

/*Animatii*/
.badge-item:hover,
.benefit-item img:hover,
.cert-logos img:hover
{
    transition-delay: 5ms;
    transform: scale(1.02);
}
.article-card:hover
{
    transition-delay: 5ms;
    transition-duration: 500ms;
    transform: translateY(-16px);
}
.nav-link-phone img:hover
{
    transition-delay: 5ms;
    transition-duration: 400ms;
    transform: translateY(-4px);
}


/* Responsive adjustments for job page */
@media (max-width: 991.98px) {
    .job-detail-section .job-title {
        font-size: var(--fs-3xl);
    }

    .application-form-wrapper .application-form {
        position: static;
    }

    .careers-cta-section {
        text-align: center;
    }
}

@media (max-width: 767.98px) {
    .job-detail-section {
        padding: 40px 0;
    }

    .job-detail-section .job-meta {
        gap: 15px !important;
    }

    .job-detail-section .meta-item {
        width: 100%;
    }

    .careers-empty-main {
        padding: 40px 0;
    }

    .careers-list-jobs-card {
        width: auto !important;
    }

    .contact-form {
        .side-title {
            font-size: 24px;
            line-height: 32px;
        }
        .form-title {
            font-size: 24px;
            line-height: 32px;
            padding: 0 16px;
        }
    }

    .careers-form-section {
        .form-container {
            padding: 68px 16px 64px 16px;
        }
    }

    .section-title {
        line-height: 32px;
        font-size: 24px;
    }

    .solutions-tabs {
        .solutions-tabs-title {
            font-size: 24px;
            line-height: 32px;
        }
        .solutions-tabs-bullets {
            line-height: 28px;
        }
        .solutions-tabs-left-details {
            line-height: 60px;
        }
        .solutions-tabs-bullet {
            height: 16px;
        }
    }

    .contact-form-overlay-section, .contact-form {
        .form-title {
            font-size: 24px;
            line-height: 32px;
            padding: 0;
        }
        .form-subtitle {
            padding: 0;
        }
        .btn-contact-submit {
            margin-top: 32px;
        }
    }

    .hero-section {
        margin-top: -20px;
    }

    .documents-section {
        padding-top: 40px;
        padding-bottom: 80px;
    }
    .about-preview-section,
    .mission-section,
    .solutions-section,
    .why-choose-section,
    .certifications-section {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .mission-section {
        padding-bottom: 0;
    }
    .url-companie .team-section {
        padding-top: 20px;
    }
    .clients-section,
    .consult-specialist-section {
        padding-top: 0;
    }
    .why-choose-section {
        padding-bottom: 0;
    }
    .principles-section-inner {
        padding-top: 80px !important;
        padding-bottom: 80px !important;
    }
    .certifications-section {
        padding-bottom: 80px;
    }
    .articles-section {
        padding-top: 40px;
        padding-bottom: 40px;
        .article-card {
            p {
                overflow: visible;
                position: relative;
                .read-more {
                    position: absolute;
                    right: 0;
                    background: white;
                    padding-left: 16px;
                }
            }
        }
    }
    .strategy-section {
        padding-bottom: 80px;
    }

    .principles-section {
        margin-bottom: 40px;
    }
    .principles-section-inner {
        background-size: auto 96px !important;
    }
    .contact-section {
        .form-container {
            margin: 0 -24px;
        }
        .contact-navigate-to-address {
            line-height: 24px;
        }
        .address {
            margin-top: 24px;
            margin-bottom: 16px;
        }
        .map {
            height: 580px;
            object-fit: cover;
        }
    }

    .main-nav {
        z-index: 999;
        margin-bottom: 20px;
        box-shadow: 0 3px 20px #0E113326;
    }
    .main-nav-mobile {
        position: sticky;
        top: 0;
        z-index: 999;

        .main-nav {
            position: relative;
        }
    }
    #mainNav {
        .navbar-nav-1 {
            padding-top: 36px;
        }
        .navbar-nav-2 {
            padding-bottom: 120px;
        }
    }
    .navbar-collapse.mobile {
        border-radius: 0 0 24px 24px;
        position: absolute;
        top: 100px;
        left: 0;
        background: white;
        z-index: 998;
        width: 100%;
        margin-top: -20px;
        padding: 0 32px;
        padding-top: 20px;
        background-repeat: no-repeat;
        background-size: auto 120px;
        background-position: bottom right;
        box-shadow: 0 3px 20px #0E113326;
        transition-duration: 1s;

        .nav-link {
            color: #005537;
            font-size: 16px;
            line-height: 40px;
            font-family: DMSansSemi;
        }
    }

    .cta-banner {
        padding-top: 80px;

        h3 {
            font-size: 24px;
            line-height: 32px;
            margin-bottom: 32px;
        }
    }

    .certifications-section {
        .cert-logos {
            gap: 36px;
            img {
                width: calc(50% - 18px);
                max-height: initial;
            }
        }
    }

    .benefit-item .number-badge {
        padding-right: 44px;
    }

    .faq-items {
        .card {
            padding: 8px 16px !important;
        }
        .card-header {
            margin: 0 !important;
        }
        .card-body {
            padding: 1rem 0 !important;
        }
    }

    .sticky-bar {
        height: 100px;
        padding: 20px 36px;
        background: linear-gradient(180deg, #FFFFFF00 0%, #ECF9DA 50%, #ECF9DA 100%);

        .btn-request-offer {
            margin-left: 0;
            a {
                height: 48px;
                padding: 8px 20px;
            }
        }

        img {
            box-shadow: 0 3px 10px #00000029;
            border-radius: 50%;
        }
    }

    .modal {
        align-content: flex-end;

        .modal-dialog {
            width: 100%;
            min-width: 100%;
            max-width: 100%;
            height: calc(100% - 2rem);
            margin: 0;
            align-content: flex-end;
            border-radius: 10px 10px 0 0;
        }

        .modal-content {
            height: 100%;
            padding: 24px 16px;
            border-radius: 10px 10px 0 0;
        }

        .modal-header {
            padding: 0 8px;
            margin-bottom: 24px;
            .btn-modal-close {
                padding: 14px;
                font-size: 12px;
            }
        }

        .modal-image {
            height: 128px;
        }

        .content-title {
            font-size: 26px;
            line-height: 45px;
            margin-top: 32px;
        }

        .content-description {
            font-size: 18px;
            line-height: 30px;
        }
    }

    .footer {
        padding-top: 0;
        ::before {
            display: none;
        }

        .newsletter-section {
            padding-bottom: 80px;
            border-bottom: 1px solid #005537;
            background: linear-gradient(180deg, #0D92AF 0%, #005537 70%);
        }
        .footer-content {
            padding-top: 80px;
            .footer-title {
                margin-bottom: 36px;
            }
        }
        .container {
            padding: 0 16px;
        }
        .newsletter-form {
            display: flex;
            input {
                border-radius: 25px;
                margin-bottom: 40px;
            }
            a[type="button"] {
                border-radius: 25px;
                width: max-content;
                align-self: center;
                margin-bottom: 40px;
            }
        }
        .form-check {
            margin: 0 16px;
        }
        .footer-bottom {
            margin-top: 0;
        }
    }
}