:root {

    /* Brand Dark Green (Derived from official logo #002600 / deep forest green) */

    --primary: #0e3b1f;

    /* Deep prestigious forest green */

    --primary-dark: #072211;

    /* Ultra dark forest */

    --primary-light: #185c32;

    /* Medium forest green for hover/active */

    --primary-tint: #edf5ef;

    /* Delicate minty light green tint */

    --primary-glow: rgba(14, 59, 31, 0.22);



    /* Whites & Neutrals (White should be more) */

    --white: #ffffff;

    --light: #f9fbf9;

    /* Very clean soft white */

    --light-2: #f2f6f3;

    /* Alternating section background */

    --border: #e3ede5;

    /* Clean architectural border */

    --border-light: #eff5f0;



    /* Dark accents & Typography */

    --dark: #0c1c11;

    /* High-contrast deep dark text */

    --dark-2: #14281a;

    --text: #37473b;

    /* Readable dark sage body text */

    --text-muted: #647568;

    /* Muted text */

    --container: 1200px;

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

}



body {

    font-family: "DM Sans", sans-serif;

    color: var(--text);

    background: #ffffff;

    overflow-x: hidden;

}



img {

    width: 100%;

    display: block;

}



a {

    color: inherit;

    text-decoration: none;

}



button,

input,

select,

textarea {

    font: inherit;

}



.container {

    width: min(1200px, calc(100% - 40px));

    margin: auto;

}





/* ================= TOP BAR (CLEAN WHITE) ================= */



.topbar {

    background: #ffffff;

    color: #4a5c4e;

    font-size: 13px;

    border-bottom: 1px solid var(--border);

}



.topbar-inner {

    height: 42px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.topbar span {

    margin-right: 24px;

}



.topbar a {

    color: inherit;

    transition: color .3s ease;

}



.topbar a:hover {

    color: var(--primary);

}



.topbar i {

    color: var(--primary);

    margin-right: 6px;

}



.socials {

    display: flex;

    gap: 15px;

}



.socials a {

    color: #4a5c4e;

    transition: color .3s ease;

}



.socials a:hover {

    color: var(--primary);

}





/* ================= HEADER (PURE WHITE) ================= */



.header {

    position: relative;

    z-index: 1000;

    background: #ffffff;

    box-shadow: 0 4px 25px rgba(14, 59, 31, .06);

}



.nav {

    min-height: 92px;

    display: flex;

    align-items: center;

    gap: 35px;

}



.logo {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-right: auto;

}



.logo-img {

    height: 52px;

    width: auto;

    object-fit: contain;

    transition: transform .3s ease;

}



.logo:hover .logo-img {

    transform: scale(1.04);

}



.logo-text strong {

    display: block;

    color: var(--primary);

    font-family: "Montserrat", sans-serif;

    letter-spacing: 2px;

    font-size: 19px;

    font-weight: 800;

}



.logo-text small {

    display: block;

    font-size: 9px;

    color: var(--text-muted);

    letter-spacing: 3px;

    margin-top: 2px;

    font-weight: 600;

}



nav {

    display: flex;

    align-items: center;

    gap: 28px;

}



nav>a,

.dropdown>a {

    color: #1b2b1f;

    font-size: 14px;

    font-weight: 600;

    transition: color .3s ease;

}



nav>a:hover,

.dropdown>a:hover,

nav>a.active,

.dropdown>a.active {

    color: var(--primary);

}



.dropdown {

    position: relative;

}



.dropdown>a {

    display: flex;

    gap: 6px;

    align-items: center;

}



.dropdown-menu {

    position: absolute;

    top: 35px;

    left: -20px;

    min-width: 230px;

    background: #ffffff;

    border: 1px solid var(--border);

    box-shadow: 0 15px 35px rgba(14, 59, 31, .12);

    opacity: 0;

    visibility: hidden;

    transform: translateY(10px);

    transition: all .3s ease;

}



.dropdown:hover .dropdown-menu,

.dropdown.open .dropdown-menu {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}



.dropdown-menu a {

    display: block;

    padding: 14px 20px;

    font-size: 13px;

    color: var(--text);

    border-bottom: 1px solid var(--border-light);

    transition: all .25s ease;

}



.dropdown-menu a:hover {

    background: var(--primary);

    color: #ffffff;

    padding-left: 24px;

}



.nav-quote {

    background: var(--primary);

    color: #ffffff;

    padding: 14px 22px;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .5px;

    transition: all .3s ease;

}



.nav-quote:hover {

    background: var(--primary-light);

    box-shadow: 0 6px 18px rgba(14, 59, 31, .25);

    transform: translateY(-1px);

}



.nav-quote i {

    margin-left: 8px;

}



.menu-btn {

    display: none;

    border: 0;

    background: none;

    color: var(--primary);

    font-size: 24px;

    cursor: pointer;

}





/* ================= HERO (VIDEO HERO) ================= */



.hero {

    height: 700px;

    position: relative;

    overflow: hidden;

    background: #072211;

}



.hero-video-wrapper {

    position: absolute;

    inset: 0;

    overflow: hidden;

    z-index: 1;

}



.hero-bg-video {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

}



/* Clean, soft left-side gradient: center & right stay 100% clean, unobstructed & bright */

.hero-overlay {

    position: absolute;

    inset: 0;

    background: transparent;

    z-index: 2;

    pointer-events: none;

}



.hero-controls {

    position: absolute;

    bottom: 30px;

    right: 35px;

    z-index: 20;

    display: flex;

    align-items: center;

    gap: 12px;

}



.hero-content {

    position: relative;

    z-index: 3;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: flex-start;

}



.hero-text-box {

    max-width: 530px;

    padding: 38px 42px;

    background: rgba(8, 30, 16, 0.62);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    border-left: 4px solid #6ee797;

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);

    color: #ffffff;

}



.eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #8be0a5;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

    margin-bottom: 6px;

}



.hero h1 {

    font-family: "Montserrat", sans-serif;

    font-size: clamp(32px, 3.8vw, 48px);

    line-height: 1.12;

    margin: 12px 0 16px;

    font-weight: 800;

    color: #ffffff;

    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);

}



.hero h1 span {

    color: #6ee797;

    display: block;

}



.hero p {

    max-width: 100%;

    color: #eaf4ed;

    font-size: 15px;

    line-height: 1.7;

    margin-bottom: 26px;

    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);

}



.hero-actions {

    display: flex;

    align-items: center;

    gap: 14px;

    flex-wrap: wrap;

}



.btn {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    width: max-content;

    padding: 16px 28px;

    background: var(--primary);

    color: #ffffff;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .5px;

    transition: all .3s ease;

    cursor: pointer;

    border: none;

    font-family: "Montserrat", sans-serif;

}



.btn:hover {

    background: var(--primary-light);

    transform: translateY(-2px);

    box-shadow: 0 8px 22px rgba(14, 59, 31, .3);

}



.btn.btn-white {

    background: #ffffff;

    color: var(--primary);

    box-shadow: 0 8px 25px rgba(0, 0, 0, .2);

}



.btn.btn-white:hover {

    background: #eaf4ed;

    color: var(--primary-dark);

    transform: translateY(-2px);

}



.btn.btn-outline {

    background: rgba(255, 255, 255, 0.1);

    color: #ffffff;

    border: 1.5px solid rgba(255, 255, 255, 0.6);

    backdrop-filter: blur(4px);

}



.btn.btn-outline:hover {

    background: #ffffff;

    color: var(--primary);

    border-color: #ffffff;

}



.btn-secondary {

    background: #ffffff;

    color: var(--primary);

    border: 2px solid var(--primary);

}



.btn-secondary:hover {

    background: var(--primary);

    color: #ffffff;

}



.hero-sound-btn {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.15);

    border: 1.5px solid rgba(255, 255, 255, 0.5);

    color: #fff;

    display: grid;

    place-items: center;

    font-size: 16px;

    cursor: pointer;

    backdrop-filter: blur(4px);

    transition: all .3s ease;

    margin-left: 6px;

}



.hero-sound-btn:hover {

    background: #ffffff;

    color: var(--primary);

    transform: scale(1.08);

}



.hero-sound-btn.unmuted {

    background: #6ee797;

    color: var(--primary-dark);

    border-color: #6ee797;

}





/* ================= INTRO (WHITE & CLEAN) ================= */



.intro {

    padding: 80px 0;

    background: #ffffff;

}



.intro-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 45px;

}



.intro-box {

    display: flex;

    gap: 25px;

    align-items: flex-start;

    padding: 30px;

    background: #ffffff;

    border: 1px solid var(--border);

    transition: transform .3s ease, box-shadow .3s ease;

}



.intro-box:hover {

    transform: translateY(-4px);

    box-shadow: 0 12px 30px rgba(14, 59, 31, .06);

}



.intro-icon {

    flex: 0 0 65px;

    height: 65px;

    display: grid;

    place-items: center;

    background: var(--primary-tint);

    color: var(--primary);

    font-size: 26px;

}



.intro-box h3 {

    color: var(--primary);

    font-family: "Montserrat", sans-serif;

    font-size: 20px;

    margin-bottom: 10px;

}



.intro-box p {

    line-height: 1.7;

    font-size: 14px;

    color: var(--text);

}



.intro-cta {

    margin-top: 50px;

    padding: 36px 45px;

    background: #ffffff;

    color: var(--text);

    border: 1px solid var(--border);

    border-left: 6px solid var(--primary);

    box-shadow: 0 12px 35px rgba(14, 59, 31, .05);

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 30px;

}



.intro-cta span {

    font-size: 24px;

    font-family: "Montserrat", sans-serif;

    font-weight: 700;

    color: var(--primary);

    display: block;

}



.intro-cta p {

    margin-top: 8px;

    font-size: 14px;

    color: var(--text);

}



.btn.dark {

    background: var(--primary);

    color: #fff;

}



.btn.dark:hover {

    background: var(--primary-light);

}





/* ================= COMMON SECTION ================= */



.section {

    padding: 100px 0;

}



.section-heading {

    margin-bottom: 50px;

}



.section-heading.center {

    text-align: center;

}



.section-tag {

    color: var(--primary);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

}



.section-heading h2 {

    color: var(--dark);

    font-family: "Montserrat", sans-serif;

    font-size: clamp(32px, 4vw, 46px);

    line-height: 1.15;

    margin: 12px 0;

}



.section-heading h2 span,

.about-content h2 span {

    color: var(--primary);

}



.section-heading p {

    max-width: 650px;

    line-height: 1.8;

    color: var(--text-muted);

}





/* ================= ABOUT (LIGHT / WHITE) ================= */



.about {

    background: var(--light);

}



.about-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    align-items: center;

}



.about-image {

    position: relative;

}



.about-image img {

    height: 580px;

    object-fit: cover;

    box-shadow: 0 15px 40px rgba(14, 59, 31, .1);

}



.experience {

    position: absolute;

    bottom: 0;

    right: 0;

    background: var(--primary);

    color: #ffffff;

    padding: 25px 35px;

    display: flex;

    gap: 15px;

    align-items: center;

    box-shadow: 0 10px 30px rgba(14, 59, 31, .3);

}



.experience strong {

    font-family: "Montserrat", sans-serif;

    font-size: 44px;

}



.experience span {

    font-size: 13px;

    line-height: 1.5;

}



.about-content h2 {

    font-family: "Montserrat", sans-serif;

    color: var(--dark);

    font-size: 44px;

    margin: 15px 0 25px;

}



.about-content p {

    line-height: 1.8;

    margin-bottom: 17px;

    font-size: 15px;

    color: var(--text);

}



.about-features {

    display: grid;

    gap: 14px;

    margin: 28px 0;

}



.about-features div {

    display: flex;

    gap: 12px;

    align-items: center;

    font-weight: 700;

    color: var(--dark);

}



.about-features i {

    color: var(--primary);

    font-size: 18px;

}



.about-objective-card {

    margin: 28px 0;

    padding: 22px 25px;

    background: var(--primary-tint);

    border-left: 4px solid var(--primary);

    display: flex;

    gap: 18px;

    align-items: flex-start;

}



.objective-icon {

    font-size: 24px;

    color: var(--primary);

    flex-shrink: 0;

    margin-top: 2px;

}



.objective-content strong {

    display: block;

    color: var(--primary);

    font-family: "Montserrat", sans-serif;

    font-size: 13px;

    letter-spacing: 1px;

    text-transform: uppercase;

    margin-bottom: 6px;

}



.objective-content p {

    font-size: 14px;

    line-height: 1.7;

    color: var(--dark);

    font-style: italic;

    margin-bottom: 0;

}



.about-actions {

    display: flex;

    align-items: center;

    gap: 15px;

    flex-wrap: wrap;

    margin-top: 25px;

}



.btn.btn-outline-dark {

    background: transparent;

    border: 1.5px solid var(--primary);

    color: var(--primary);

}



.btn.btn-outline-dark:hover {

    background: var(--primary);

    color: #ffffff;

}





/* ================= PAGE BANNER ================= */



.page-banner {

    padding: 85px 0 65px;

    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);

    color: #ffffff;

    position: relative;

    overflow: hidden;

}



.page-banner::after {

    content: "";

    position: absolute;

    inset: 0;

    background: radial-gradient(circle at 80% 30%, rgba(110, 231, 151, 0.12) 0%, transparent 60%);

    pointer-events: none;

}



.page-banner-content {

    position: relative;

    z-index: 2;

}



.page-banner h1 {

    font-family: "Montserrat", sans-serif;

    font-size: clamp(34px, 4.5vw, 50px);

    font-weight: 800;

    margin-bottom: 15px;

}



.page-banner h1 span {

    color: #6ee797;

}



.breadcrumb-nav {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 14px;

    color: #d1e5d7;

}



.breadcrumb-nav a {

    color: #ffffff;

    transition: color .2s;

}



.breadcrumb-nav a:hover {

    color: #6ee797;

}



.breadcrumb-nav i {

    font-size: 11px;

    opacity: .7;

}





/* ================= AUTHORITIES SECTION ================= */



.authorities-section {

    background: #ffffff;

    padding: 80px 0;

}



.authorities-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 18px;

    margin-top: 40px;

}



.authority-card {

    background: var(--light);

    border: 1px solid var(--border);

    padding: 24px;

    display: flex;

    align-items: center;

    gap: 16px;

    transition: all .3s ease;

}



.authority-card:hover {

    border-color: var(--primary);

    background: #ffffff;

    transform: translateY(-3px);

    box-shadow: 0 10px 25px rgba(14, 59, 31, .08);

}



.authority-card i {

    font-size: 26px;

    color: var(--primary);

    flex-shrink: 0;

}



.authority-card strong {

    display: block;

    color: var(--dark);

    font-family: "Montserrat", sans-serif;

    font-size: 15px;

}



.authority-card span {

    display: block;

    font-size: 12px;

    color: var(--text-muted);

    margin-top: 2px;

}





/* ================= ABOUT STORY SECTION ================= */



.about-story {

    background: #ffffff;

}



.about-story-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 60px;

    align-items: center;

}



.about-story-box {

    padding: 35px;

    background: var(--light);

    border: 1px solid var(--border);

    margin-bottom: 25px;

}



.about-story-box h3 {

    color: var(--primary);

    font-family: "Montserrat", sans-serif;

    font-size: 20px;

    margin-bottom: 12px;

    display: flex;

    align-items: center;

    gap: 10px;

}



.about-story-box p {

    font-size: 14px;

    line-height: 1.8;

    color: var(--text);

}



.stats-callout-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;

    margin-top: 30px;

}



.stat-callout {

    background: #ffffff;

    border: 1px solid var(--border);

    padding: 24px 20px;

    text-align: center;

    box-shadow: 0 6px 18px rgba(14, 59, 31, .04);

}



.stat-callout strong {

    display: block;

    color: var(--primary);

    font-family: "Montserrat", sans-serif;

    font-size: 36px;

    font-weight: 800;

}



.stat-callout span {

    font-size: 13px;

    color: var(--text-muted);

    margin-top: 4px;

    display: block;

}





/* ================= SERVICES (PURE WHITE) ================= */



.services {

    background: #ffffff;

}



.services-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 24px;

}



.service-card {

    background: #ffffff;

    min-height: 240px;

    border: 1px solid var(--border);

    padding: 35px;

    position: relative;

    overflow: hidden;

    transition: all .35s ease;

}



.service-card::before {

    content: "";

    position: absolute;

    inset: auto 0 0;

    height: 4px;

    background: var(--primary);

    transform: scaleX(0);

    transform-origin: left;

    transition: transform .35s ease;

}



.service-card:hover {

    transform: translateY(-7px);

    box-shadow: 0 18px 45px rgba(14, 59, 31, .09);

    border-color: #bad3c2;

}



.service-card:hover::before {

    transform: scaleX(1);

}



.service-card i {

    color: var(--primary);

    font-size: 32px;

    margin-bottom: 25px;

}



.service-card h3 {

    color: var(--dark);

    font-family: "Montserrat", sans-serif;

    font-size: 18px;

    margin-bottom: 12px;

}



.service-card p {

    line-height: 1.7;

    font-size: 14px;

    color: var(--text);

}



.service-card span {

    position: absolute;

    top: 20px;

    right: 25px;

    color: #e4eee6;

    font-size: 35px;

    font-weight: 800;

    transition: color .35s ease;

}



.service-card:hover span {

    color: var(--primary-tint);

}





/* ================= STATS (DEEP FOREST GREEN) ================= */



.stats {

    padding: 80px 0;

    background: var(--primary-dark);

    color: #ffffff;

    border-top: 1px solid #143d22;

    border-bottom: 1px solid #143d22;

}



.stats-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

}



.stat {

    text-align: center;

    border-right: 1px solid #143d22;

}



.stat:last-child {

    border: 0;

}



.stat strong {

    display: block;

    color: #6fe798;

    font-family: "Montserrat", sans-serif;

    font-size: 55px;

}



.stat span {

    font-size: 14px;

    color: #d1e5d7;

}





/* ================= SPECIALIZATION (LIGHT WHITE) ================= */



.specialization {

    background: var(--light);

}



.special-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 25px;

}



.special-card {

    background: #ffffff;

    border: 1px solid var(--border);

    overflow: hidden;

    transition: transform .35s ease, box-shadow .35s ease;

}



.special-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 15px 35px rgba(14, 59, 31, .08);

}



.special-img {

    height: 270px;

    background-size: cover;

    background-position: center;

    transition: transform .5s ease;

}



.special-card:hover .special-img {

    transform: scale(1.05);

}



.special-card h3 {

    padding: 22px 24px;

    color: var(--primary);

    font-family: "Montserrat", sans-serif;

    font-size: 17px;

}





/* ================= PROJECTS (CLEAN WHITE) ================= */



.projects {

    background: #ffffff;

}



.project-filters {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 45px;

}



.filter-btn {

    padding: 12px 28px;

    background: #ffffff;

    border: 1.5px solid var(--border);

    color: var(--primary);

    font-family: "Montserrat", sans-serif;

    font-size: 13px;

    font-weight: 700;

    cursor: pointer;

    transition: all .3s ease;

}



.filter-btn:hover,

.filter-btn.active {

    background: var(--primary);

    color: #ffffff;

    border-color: var(--primary);

    transform: translateY(-2px);

    box-shadow: 0 8px 22px rgba(14, 59, 31, .25);

}



.project-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 25px;

}



.project-card {

    background: #ffffff;

    border: 1px solid var(--border);

    box-shadow: 0 8px 28px rgba(14, 59, 31, .06);

    overflow: hidden;

    cursor: pointer;

    display: flex;

    flex-direction: column;

    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;

}



.project-card:hover {

    transform: translateY(-7px);

    box-shadow: 0 20px 45px rgba(14, 59, 31, .12);

    border-color: #bad3c2;

}



.project-card.hide {

    display: none !important;

}



.project-card.fade-in {

    animation: fadeInCard .4s ease forwards;

}



@keyframes fadeInCard {

    from {

        opacity: 0;

        transform: translateY(15px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.project-img-wrapper {

    position: relative;

    overflow: hidden;

    height: 260px;

    background: #072211;

}



.project-img-wrapper img {

    height: 100%;

    object-fit: cover;

    transition: transform .5s ease;

}



.project-card:hover .project-img-wrapper img {

    transform: scale(1.08);

}



.project-badge {

    position: absolute;

    top: 15px;

    left: 15px;

    background: var(--primary);

    color: #ffffff;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

    padding: 6px 12px;

    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);

    z-index: 2;

}



.project-card-content {

    padding: 25px;

    display: flex;

    flex-direction: column;

    flex-grow: 1;

}



.project-card small {

    color: var(--primary);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;

}



.project-card h3 {

    color: var(--dark);

    font-family: "Montserrat", sans-serif;

    font-size: 18px;

    margin: 10px 0;

    line-height: 1.35;

}



.project-card p {

    font-size: 13px;

    color: var(--text-muted);

}



.project-card-footer {

    margin-top: auto;

    padding-top: 16px;

    border-top: 1px solid var(--border-light);

    display: flex;

    justify-content: flex-end;

}



.project-card-footer span {

    font-size: 12px;

    font-weight: 700;

    color: var(--primary);

    display: inline-flex;

    align-items: center;

    gap: 8px;

    transition: transform .2s ease;

}



.project-card:hover .project-card-footer span {

    transform: translateX(4px);

}



.extra-project {

    display: none;

}



.extra-project.show {

    display: flex;

}



.center-btn {

    display: flex;

    justify-content: center;

    margin-top: 50px;

}



.center-btn .btn {

    cursor: pointer;

    border: none;

}





/* ================= CLIENTS (CLEAN GRID) ================= */



.clients {

    background: var(--light);

    padding: 100px 0;

}



.client-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 1px;

    background: var(--border);

    border: 1px solid var(--border);

}



.client-grid div {

    background: #ffffff;

    height: 120px;

    display: grid;

    place-items: center;

    color: #4a5c4e;

    font-family: "Montserrat", sans-serif;

    font-weight: 800;

    letter-spacing: 1.5px;

    transition: all .3s ease;

}



.client-grid div:hover {

    color: var(--primary);

    background: #f7faf8;

}





/* ================= TESTIMONIALS (PURE WHITE) ================= */



.testimonials {

    background: #ffffff;

}



.testimonial-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 25px;

}



.testimonial {

    padding: 40px;

    background: #ffffff;

    border: 1px solid var(--border);

    position: relative;

    transition: transform .3s ease, box-shadow .3s ease;

}



.testimonial:hover {

    transform: translateY(-4px);

    box-shadow: 0 15px 35px rgba(14, 59, 31, .07);

}



.quote {

    color: var(--primary);

    font-size: 30px;

    margin-bottom: 20px;

}



.testimonial h3 {

    color: var(--dark);

    font-family: "Montserrat", sans-serif;

    margin-bottom: 15px;

}



.testimonial p {

    line-height: 1.8;

    margin-bottom: 20px;

    color: var(--text);

}



.testimonial strong {

    color: var(--primary);

}





/* ================= TEAM (WHITE CARDS) ================= */



.team {

    background: var(--light);

}



.team-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 25px;

}



.team-card {

    background: #ffffff;

    border: 1px solid var(--border);

    text-align: center;

    padding-bottom: 25px;

    transition: transform .35s ease, box-shadow .35s ease;

}



.team-card:hover {

    transform: translateY(-6px);

    box-shadow: 0 18px 40px rgba(14, 59, 31, .1);

}



.team-image {

    overflow: hidden;

}



.team-image img {

    width: 100%;

    height: 320px;

    object-fit: cover;

    object-position: center 15%;

    transition: transform .5s ease;

}



.team-card:hover img {

    transform: scale(1.05);

}



.team-card h3 {

    color: var(--dark);

    font-family: "Montserrat", sans-serif;

    margin: 20px 0 7px;

}



.team-card span {

    color: var(--primary);

    font-size: 13px;

    font-weight: 600;

}





/* ================= CTA (DARK FOREST GREEN) ================= */



.cta {

    padding: 85px 0;

    background: var(--primary);

    color: #ffffff;

}



.cta-inner {

    display: grid;

    grid-template-columns: 1.4fr 1fr .8fr;

    gap: 50px;

    align-items: center;

}



.cta .section-tag {

    color: #8be0a5;

    letter-spacing: 2px;

}



.cta h2 {

    font-family: "Montserrat", sans-serif;

    font-size: 38px;

    margin-top: 15px;

    color: #ffffff;

}



.cta h2 span {

    display: block;

    color: #7ee6a6;

}



.cta-list p {

    margin: 12px 0;

    font-size: 14px;

    color: #eaf4ed;

}



.cta-list i {

    color: #8be0a5;

    margin-right: 10px;

}



.cta-action {

    text-align: center;

}



.cta-action span {

    display: block;

    margin-bottom: 8px;

    color: #d1e5d7;

}



.cta-action>a:not(.btn) {

    display: block;

    font-family: "Montserrat", sans-serif;

    font-size: 26px;

    font-weight: 800;

    margin-bottom: 20px;

    color: #ffffff;

    transition: color .2s ease;

}



.cta-action>a:not(.btn):hover {

    color: #8be0a5;

}



.btn.white {

    background: #ffffff;

    color: var(--primary);

    margin: auto;

    font-weight: 800;

    box-shadow: 0 8px 25px rgba(0, 0, 0, .2);

}



.btn.white:hover {

    background: #eaf4ed;

    color: var(--primary-dark);

}





/* ================= FOOTER (RICH DEEP GREEN) ================= */



.footer {

    background: #061c0e;

    color: #9cb5a3;

}



.footer-grid {

    padding: 80px 0;

    display: grid;

    grid-template-columns: 1.5fr 1fr 1.4fr 1.3fr;

    gap: 50px;

}



.footer-logo {

    display: flex;

    align-items: center;

    gap: 14px;

}



.footer-logo-img {

    height: 52px;

    width: auto;

    object-fit: contain;

}



.footer-logo .logo-text strong {

    color: #ffffff;

    letter-spacing: 2px;

    font-size: 19px;

    font-family: "Montserrat", sans-serif;

    font-weight: 800;

}



.footer-logo .logo-text small {

    color: #a4c2ab;

    letter-spacing: 3px;

    font-size: 9px;

    display: block;

    margin-top: 2px;

    font-weight: 600;

}



.footer-about p {

    line-height: 1.8;

    font-size: 14px;

    margin: 25px 0;

    color: #b5ccbc;

}



.footer-socials {

    display: flex;

    gap: 10px;

}



.footer-socials a {

    width: 38px;

    height: 38px;

    border: 1px solid #1a3d24;

    color: #cbdcd0;

    display: grid;

    place-items: center;

    transition: all .3s ease;

}



.footer-socials a:hover {

    background: var(--primary-light);

    border-color: var(--primary-light);

    color: #ffffff;

}



.footer-col h3 {

    color: #ffffff;

    font-family: "Montserrat", sans-serif;

    font-size: 16px;

    margin-bottom: 22px;

    letter-spacing: .5px;

}



.footer-col>a {

    display: block;

    margin: 12px 0;

    font-size: 14px;

    color: #b5ccbc;

    transition: all .3s ease;

}



.footer-col>a:hover {

    color: #8be0a5;

    transform: translateX(4px);

}



.footer-col p {

    font-size: 14px;

    line-height: 1.8;

    margin-bottom: 15px;

    color: #b5ccbc;

}



.footer-col p i {

    color: #8be0a5;

    width: 22px;

}



.newsletter form {

    display: grid;

    gap: 10px;

}



.newsletter input {

    width: 100%;

    padding: 13px;

    border: 1px solid #1a3d24;

    background: #0a2714;

    color: #ffffff;

    outline: none;

    font-size: 13px;

}



.newsletter input:focus {

    border-color: #2e7d47;

}



.newsletter button {

    padding: 14px;

    border: 0;

    background: #185c32;

    color: #ffffff;

    font-size: 12px;

    font-weight: 800;

    cursor: pointer;

    transition: background .3s ease;

}



.newsletter button:hover {

    background: #237843;

}



.copyright {

    border-top: 1px solid #102e1a;

    padding: 22px 0;

    color: #829e88;

}



.copyright .container {

    display: flex;

    justify-content: space-between;

    gap: 20px;

    font-size: 12px;

}



.copyright strong {

    color: #8be0a5;

}





/* ================= BACK TOP ================= */



#backTop {

    position: fixed;

    right: 25px;

    bottom: 25px;

    width: 45px;

    height: 45px;

    background: var(--primary);

    border: 0;

    color: #ffffff;

    cursor: pointer;

    opacity: 0;

    visibility: hidden;

    transition: all .3s ease;

    z-index: 100;

}



#backTop:hover {

    background: var(--primary-light);

    transform: translateY(-2px);

}



#backTop.show {

    opacity: 1;

    visibility: visible;

}





/* ================= SMOOTH SCROLL OFFSET ================= */



section[id] {

    scroll-margin-top: 95px;

}



@media(max-width: 850px) {

    section[id] {

        scroll-margin-top: 75px;

    }

}





/* ================= MODAL OVERLAYS & DIALOGS ================= */



.modal-overlay {

    position: fixed;

    inset: 0;

    background: rgba(7, 34, 17, 0.82);

    backdrop-filter: blur(5px);

    -webkit-backdrop-filter: blur(5px);

    z-index: 2500;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    opacity: 0;

    visibility: hidden;

    transition: opacity .3s ease, visibility .3s ease;

}



.modal-overlay.open {

    opacity: 1;

    visibility: visible;

}



.modal-content {

    background: #ffffff;

    width: min(760px, 100%);

    max-height: 90vh;

    overflow-y: auto;

    position: relative;

    box-shadow: 0 25px 60px rgba(0, 0, 0, .4);

    transform: translateY(20px) scale(0.96);

    transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1);

}



.modal-overlay.open .modal-content {

    transform: translateY(0) scale(1);

}



.modal-close {

    position: absolute;

    top: 15px;

    right: 15px;

    width: 38px;

    height: 38px;

    background: var(--primary-dark);

    color: #ffffff;

    border: none;

    cursor: pointer;

    display: grid;

    place-items: center;

    font-size: 16px;

    z-index: 10;

    transition: background .25s ease, transform .25s ease;

}



.modal-close:hover {

    background: var(--primary);

    transform: rotate(90deg);

}



.modal-image-wrapper {

    position: relative;

    height: 320px;

    background: #072211;

}



.modal-image-wrapper img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.modal-body {

    padding: 35px 40px;

}



.modal-header-info small {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    color: var(--primary);

    font-weight: 700;

    font-size: 13px;

    letter-spacing: .5px;

}



.modal-header-info h3 {

    font-family: "Montserrat", sans-serif;

    color: var(--dark);

    font-size: 26px;

    margin: 8px 0 20px;

    line-height: 1.3;

}



.modal-scope-box {

    background: var(--primary-tint);

    border-left: 3px solid var(--primary);

    padding: 16px 20px;

    margin-bottom: 22px;

}



.modal-scope-box strong {

    display: block;

    color: var(--primary);

    font-size: 13px;

    font-family: "Montserrat", sans-serif;

    margin-bottom: 5px;

}



.modal-scope-box strong i {

    color: var(--primary);

    margin-right: 6px;

}



.modal-scope-box p {

    font-size: 14px;

    color: var(--text);

    line-height: 1.6;

}



.modal-desc-box {

    margin-bottom: 30px;

}



.modal-desc-box strong {

    display: block;

    color: var(--dark);

    font-size: 14px;

    font-family: "Montserrat", sans-serif;

    margin-bottom: 8px;

}



.modal-desc-box p {

    font-size: 14px;

    line-height: 1.8;

    color: var(--text);

}



.modal-action-bar {

    display: flex;

    justify-content: flex-end;

    border-top: 1px solid var(--border-light);

    padding-top: 25px;

}



.modal-inquire-btn {

    border: none;

    cursor: pointer;

}





/* ================= QUOTE MODAL & FORM ================= */



.quote-modal-content {

    width: min(640px, 100%);

}



.quote-modal-body {

    padding: 40px 45px;

}



.quote-modal-body .section-tag {

    font-size: 12px;

}



.quote-modal-body h3 {

    font-family: "Montserrat", sans-serif;

    color: var(--dark);

    font-size: 24px;

    margin: 10px 0 10px;

}



.quote-modal-body>p {

    font-size: 14px;

    color: var(--text-muted);

    line-height: 1.7;

    margin-bottom: 25px;

}



.quote-form-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 16px;

}



.quote-form-grid .form-group.full {

    grid-column: 1 / -1;

}



.form-group label {

    display: block;

    font-size: 11px;

    font-weight: 700;

    color: var(--dark);

    letter-spacing: .5px;

    margin-bottom: 6px;

    font-family: "Montserrat", sans-serif;

}



.form-group input,

.form-group select,

.form-group textarea {

    width: 100%;

    padding: 12px 16px;

    border: 1px solid var(--border);

    background: #ffffff;

    color: var(--dark);

    outline: none;

    font-size: 14px;

    transition: border-color .25s ease, background .25s ease;

}



.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus {

    border-color: var(--primary);

    background: #ffffff;

    box-shadow: 0 0 0 3px rgba(14, 59, 31, 0.08);

}



.form-group textarea {

    resize: vertical;

}



.quote-submit-row {

    margin-top: 24px;

}



.quote-submit-row .btn {

    width: 100%;

    justify-content: center;

    border: none;

    cursor: pointer;

    padding: 16px;

}



.quote-status-msg {

    margin-top: 15px;

    font-size: 13px;

    line-height: 1.5;

    text-align: center;

    display: none;

}



.quote-status-msg.success {

    display: block;

    color: #065f46;

    background: #ecfdf5;

    padding: 12px 18px;

    border-left: 3px solid #10b981;

}



.quote-status-msg.error {

    display: block;

    color: #b91c1c;

    background: #fef2f2;

    padding: 12px 18px;

    border-left: 3px solid #ef4444;

}





/* ================= NEWSLETTER FEEDBACK ================= */



.newsletter-feedback {

    margin-top: 10px;

    font-size: 13px;

    display: none;

}



.newsletter-feedback.success {

    display: block;

    color: #6fe798;

}



.newsletter-feedback.error {

    display: block;

    color: #fca5a5;

}





/* ================= TOAST NOTIFICATION ================= */



.toast-notice {

    position: fixed;

    bottom: 30px;

    left: 50%;

    transform: translateX(-50%) translateY(100px);

    background: #072211;

    color: #ffffff;

    padding: 14px 28px;

    border-left: 4px solid #6fe798;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);

    z-index: 3000;

    font-size: 14px;

    font-weight: 600;

    display: flex;

    align-items: center;

    gap: 12px;

    opacity: 0;

    visibility: hidden;

    transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1), opacity .35s ease, visibility .35s ease;

    pointer-events: none;

}



.toast-notice i {

    color: #6fe798;

    font-size: 18px;

}



.toast-notice.show {

    opacity: 1;

    visibility: visible;

    transform: translateX(-50%) translateY(0);

}





/* ================= RESPONSIVE ================= */



@media(max-width: 1050px) {



    nav {

        gap: 17px;

    }



    .nav-quote {

        display: none;

    }



    .cta-inner {

        grid-template-columns: 1fr 1fr;

    }



    .cta-action {

        grid-column: 1 / -1;

    }



}





@media(max-width: 850px) {



    .topbar-inner {

        justify-content: center;

    }



    .topbar-inner>div:first-child span:last-child {

        display: none;

    }



    .socials {

        display: none;

    }



    .nav {

        min-height: 75px;

    }



    .menu-btn {

        display: block;

    }



    nav {

        position: absolute;

        top: 75px;

        left: 0;

        right: 0;

        background: #ffffff;

        display: none;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        box-shadow: 0 15px 30px rgba(14, 59, 31, .1);

        border-top: 1px solid var(--border);

    }



    nav.open {

        display: flex;

    }



    nav>a,

    .dropdown>a {

        padding: 17px 25px;

        border-bottom: 1px solid var(--border-light);

    }



    .dropdown>a {

        display: flex;

        justify-content: space-between;

        align-items: center;

    }



    .dropdown-menu {

        position: static;

        display: none;

        box-shadow: none;

        opacity: 1;

        visibility: visible;

        transform: none;

        background: var(--light);

        border-left: 3px solid var(--primary);

    }



    .dropdown.open .dropdown-menu {

        display: block;

    }



    .dropdown-menu a {

        padding: 13px 25px 13px 35px;

        font-size: 13px;

        color: var(--text);

        border-bottom: 1px solid var(--border-light);

    }



    .hero {

        height: 620px;

    }



    .hero-text-box {

        max-width: 490px;

        padding: 30px 32px;

    }



    .intro-grid,

    .about-grid {

        grid-template-columns: 1fr;

    }



    .services-grid,

    .project-grid {

        grid-template-columns: repeat(2, 1fr);

    }



    .special-grid {

        grid-template-columns: repeat(2, 1fr);

    }



    .team-grid {

        grid-template-columns: repeat(2, 1fr);

    }



    .testimonial-grid {

        grid-template-columns: 1fr;

    }



    .stats-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 40px 0;

    }



    .stat:nth-child(2) {

        border: 0;

    }



    .authorities-grid {

        grid-template-columns: repeat(2, 1fr);

    }



    .about-story-grid {

        grid-template-columns: 1fr;

    }



    .footer-grid {

        grid-template-columns: repeat(2, 1fr);

    }



}





@media(max-width: 600px) {

    .quote-modal-body {

        padding: 30px 20px;

    }



    .modal-body {

        padding: 25px 20px;

    }



    .quote-form-grid {

        grid-template-columns: 1fr;

    }



    .modal-image-wrapper {

        height: 220px;

    }

}





@media(max-width: 550px) {



    .container {

        width: min(100% - 30px, 1200px);

    }



    .topbar {

        display: none;

    }



    .authorities-grid {

        grid-template-columns: 1fr;

    }



    .stats-callout-grid {

        grid-template-columns: 1fr;

    }



    .hero {

        height: auto;

        min-height: 560px;

        padding: 40px 0;

    }



    .hero-overlay {

        background: linear-gradient(180deg,

                rgba(5, 22, 11, 0.78) 0%,

                rgba(5, 22, 11, 0.52) 60%,

                rgba(5, 22, 11, 0.25) 100%);

    }



    .hero-text-box {

        max-width: 100%;

        padding: 26px 20px;

        margin: 0;

    }



    .hero h1 {

        font-size: 32px;

    }



    .hero p {

        font-size: 14px;

    }



    .section {

        padding: 75px 0;

    }



    .intro-grid,

    .services-grid,

    .special-grid,

    .project-grid,

    .team-grid,

    .footer-grid {

        grid-template-columns: 1fr;

    }



    .intro-cta {

        flex-direction: column;

        align-items: flex-start;

    }



    .about-image img {

        height: 420px;

    }



    .about-content h2 {

        font-size: 34px;

    }



    .stats-grid {

        grid-template-columns: 1fr 1fr;

    }



    .stat strong {

        font-size: 40px;

    }



    .client-grid {

        grid-template-columns: 1fr 1fr;

    }



    .cta-inner {

        grid-template-columns: 1fr;

    }



    .cta h2 {

        font-size: 30px;

    }



    .copyright .container {

        flex-direction: column;

    }



}



/* ================= SERVICES PAGE STYLES ================= */



.services-hero-intro {

    background: #ffffff;

    padding: 70px 0 30px;

    border-bottom: 1px solid var(--border);

}



.services-intro-card {

    background: linear-gradient(135deg, #f7fbf8 0%, #ffffff 100%);

    border: 1px solid #d8e8dc;

    border-left: 5px solid var(--primary);

    padding: 35px 40px;

    border-radius: 8px;

    margin-bottom: 20px;

    box-shadow: 0 10px 30px rgba(14, 59, 31, 0.04);

}



.services-intro-card .intro-tag {

    display: inline-block;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.5px;

    color: var(--primary);

    margin-bottom: 12px;

}



.services-intro-card h2 {

    font-size: 28px;

    font-family: 'Montserrat', sans-serif;

    color: var(--dark);

    margin-bottom: 15px;

    line-height: 1.35;

}



.services-intro-card p {

    font-size: 17px;

    line-height: 1.75;

    color: var(--text);

    margin: 0;

}



/* Architecture Spotlight */

.architecture-spotlight {

    padding: 80px 0;

    background: #ffffff;

    border-bottom: 1px solid var(--border);

}



.spotlight-grid {

    display: grid;

    grid-template-columns: 1.15fr 0.85fr;

    gap: 60px;

    align-items: center;

}



.spotlight-content .section-tag {

    display: inline-block;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    color: var(--primary);

    background: #edf7ef;

    padding: 6px 14px;

    border-radius: 4px;

    margin-bottom: 16px;

}



.spotlight-content h2 {

    font-size: 36px;

    font-family: 'Montserrat', sans-serif;

    color: var(--dark);

    line-height: 1.25;

    margin-bottom: 22px;

}



.spotlight-content h2 span {

    color: var(--primary);

}



.spotlight-content .spotlight-lead {

    font-size: 16px;

    line-height: 1.8;

    color: var(--dark);

    font-weight: 500;

    margin-bottom: 18px;

}



.spotlight-content .spotlight-desc {

    font-size: 15px;

    line-height: 1.75;

    color: var(--text);

    margin-bottom: 25px;

}



.spotlight-features {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 14px;

    margin-bottom: 30px;

}



.spotlight-feat-item {

    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 14px;

    font-weight: 600;

    color: var(--dark);

}



.spotlight-feat-item i {

    width: 28px;

    height: 28px;

    border-radius: 50%;

    background: #edf7ef;

    color: var(--primary);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 12px;

    flex-shrink: 0;

}



.spotlight-actions {

    display: flex;

    gap: 16px;

    flex-wrap: wrap;

}



.spotlight-image-col {

    position: relative;

}



.spotlight-img-frame {

    position: relative;

    border-radius: 12px;

    overflow: hidden;

    box-shadow: 0 25px 60px rgba(14, 59, 31, 0.16);

    border: 3px solid #ffffff;

}



.spotlight-img-frame img {

    width: 100%;

    height: 480px;

    object-fit: cover;

    display: block;

    transition: transform 0.6s ease;

}



.spotlight-img-frame:hover img {

    transform: scale(1.03);

}



.spotlight-badge-floating {

    position: absolute;

    bottom: -25px;

    left: 30px;

    background: #0e3b1f;

    color: #ffffff;

    padding: 20px 25px;

    border-radius: 10px;

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);

    border: 2px solid #235c36;

    display: flex;

    align-items: center;

    gap: 18px;

}



.spotlight-badge-floating i {

    font-size: 32px;

    color: #6ee797;

}



.spotlight-badge-floating strong {

    display: block;

    font-size: 20px;

    font-family: 'Montserrat', sans-serif;

    color: #ffffff;

}



.spotlight-badge-floating span {

    font-size: 13px;

    color: #d1e7d8;

    text-transform: uppercase;

    letter-spacing: 1px;

}



/* Services Filter & Directory */

.services-section-wrapper {

    padding: 85px 0 95px;

    background: #fbfdfc;

}



.service-filters {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;

    margin: 35px 0 50px;

}



.service-filter-btn {

    padding: 11px 22px;

    background: #ffffff;

    color: var(--dark);

    border: 1.5px solid #d4e2d8;

    border-radius: 30px;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;

    font-family: 'DM Sans', sans-serif;

}



.service-filter-btn:hover {

    border-color: var(--primary);

    color: var(--primary);

    background: #f3f8f5;

}



.service-filter-btn.active {

    background: var(--primary);

    color: #ffffff;

    border-color: var(--primary);

    box-shadow: 0 6px 18px rgba(14, 59, 31, 0.2);

}



.services-catalog-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

}



.service-catalog-card {

    background: #ffffff;

    border: 1px solid var(--border);

    border-radius: 10px;

    padding: 38px 32px 30px;

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    transition: all 0.35s ease;

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.02);

    overflow: hidden;

    cursor: pointer;

}



.service-catalog-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 4px;

    background: var(--primary);

    transform: scaleX(0);

    transform-origin: left;

    transition: transform 0.35s ease;

}



.service-catalog-card:hover {

    transform: translateY(-8px);

    border-color: #bad3c2;

    box-shadow: 0 18px 45px rgba(14, 59, 31, 0.1);

}



.service-catalog-card:hover::before {

    transform: scaleX(1);

}



.service-card-top {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    margin-bottom: 22px;

}



.service-icon-box {

    width: 62px;

    height: 62px;

    background: #edf7ef;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--primary);

    font-size: 26px;

    transition: all 0.3s ease;

}



.service-catalog-card:hover .service-icon-box {

    background: var(--primary);

    color: #ffffff;

    transform: scale(1.05);

}



.service-card-idx {

    font-size: 32px;

    font-weight: 800;

    color: #e2ece5;

    font-family: 'Montserrat', sans-serif;

    line-height: 1;

    transition: color 0.3s ease;

}



.service-catalog-card:hover .service-card-idx {

    color: #bad3c2;

}



.service-card-cat {

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1.2px;

    color: var(--primary);

    margin-bottom: 8px;

    display: inline-block;

}



.service-catalog-card h3 {

    font-size: 20px;

    font-family: 'Montserrat', sans-serif;

    color: var(--dark);

    margin-bottom: 14px;

    line-height: 1.35;

}



.service-catalog-card p {

    font-size: 14px;

    line-height: 1.7;

    color: var(--text);

    margin-bottom: 20px;

}



.service-deliverables-list {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 24px;

    padding-top: 15px;

    border-top: 1px dashed #e5ede7;

}



.service-deliverable-pill {

    font-size: 11.5px;

    background: #f4faf6;

    color: #245833;

    padding: 4px 10px;

    border-radius: 4px;

    border: 1px solid #dbeae0;

    font-weight: 500;

}



.service-card-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-top: 16px;

    border-top: 1px solid var(--border);

}



.service-view-more {

    font-size: 13px;

    font-weight: 700;

    color: var(--primary);

    display: inline-flex;

    align-items: center;

    gap: 6px;

    transition: gap 0.25s ease;

}



.service-catalog-card:hover .service-view-more {

    gap: 10px;

}



.service-quick-inquire {

    background: none;

    border: none;

    color: #555555;

    font-size: 12px;

    font-weight: 600;

    cursor: pointer;

    text-decoration: underline;

    transition: color 0.2s ease;

}



.service-quick-inquire:hover {

    color: var(--primary);

}



/* Service Detail Modal */

.service-modal-header {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-bottom: 20px;

    padding-bottom: 18px;

    border-bottom: 1px solid var(--border);

}



.service-modal-icon {

    width: 60px;

    height: 60px;

    background: #edf7ef;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 26px;

    color: var(--primary);

    flex-shrink: 0;

}



.service-modal-header h3 {

    font-size: 22px;

    font-family: 'Montserrat', sans-serif;

    color: var(--dark);

    margin-bottom: 4px;

}



.service-modal-header small {

    font-size: 12px;

    font-weight: 700;

    color: var(--primary);

    text-transform: uppercase;

    letter-spacing: 1px;

}



.service-modal-desc {

    font-size: 15px;

    line-height: 1.8;

    color: var(--text);

    margin-bottom: 22px;

}



.service-modal-deliverables {

    background: #fbfdfc;

    border: 1px solid #dce8df;

    border-radius: 8px;

    padding: 20px;

    margin-bottom: 25px;

}



.service-modal-deliverables h4 {

    font-size: 14px;

    font-family: 'Montserrat', sans-serif;

    color: var(--dark);

    margin-bottom: 12px;

    display: flex;

    align-items: center;

    gap: 8px;

}



.service-modal-deliverables h4 i {

    color: var(--primary);

}



.service-modal-deliverables ul {

    list-style: none;

    padding: 0;

    margin: 0;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

}



.service-modal-deliverables li {

    font-size: 13.5px;

    color: var(--text);

    display: flex;

    align-items: flex-start;

    gap: 8px;

    line-height: 1.45;

}



.service-modal-deliverables li i {

    color: var(--primary);

    font-size: 12px;

    margin-top: 4px;

}



/* 4-Step Process Section */

.service-process-section {

    padding: 85px 0;

    background: #ffffff;

    border-top: 1px solid var(--border);

    border-bottom: 1px solid var(--border);

}



.process-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 30px;

    margin-top: 50px;

}



.process-card {

    background: #ffffff;

    border: 1px solid var(--border);

    border-radius: 10px;

    padding: 35px 25px;

    position: relative;

    transition: all 0.3s ease;

}



.process-card:hover {

    transform: translateY(-6px);

    border-color: #bad3c2;

    box-shadow: 0 12px 30px rgba(14, 59, 31, 0.08);

}



.process-step-num {

    width: 44px;

    height: 44px;

    border-radius: 50%;

    background: #edf7ef;

    color: var(--primary);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 16px;

    font-weight: 800;

    font-family: 'Montserrat', sans-serif;

    margin-bottom: 20px;

    border: 1.5px solid #cce3d3;

}



.process-card:hover .process-step-num {

    background: var(--primary);

    color: #ffffff;

    border-color: var(--primary);

}



.process-card h3 {

    font-size: 17px;

    font-family: 'Montserrat', sans-serif;

    color: var(--dark);

    margin-bottom: 12px;

    line-height: 1.35;

}



.process-card p {

    font-size: 13.5px;

    line-height: 1.65;

    color: var(--text);

    margin: 0;

}



/* Responsive adjustments for Services page */

@media (max-width: 1024px) {

    .spotlight-grid {

        grid-template-columns: 1fr;

        gap: 45px;

    }



    .spotlight-image-col {

        margin-bottom: 30px;

    }



    .services-catalog-grid {

        grid-template-columns: repeat(2, 1fr);

    }



    .process-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 25px;

    }

}



@media (max-width: 768px) {

    .services-catalog-grid {

        grid-template-columns: 1fr;

    }



    .spotlight-features {

        grid-template-columns: 1fr;

    }



    .spotlight-img-frame img {

        height: 350px;

    }



    .spotlight-badge-floating {

        position: static;

        margin-top: 15px;

        box-shadow: none;

    }



    .service-modal-deliverables ul {

        grid-template-columns: 1fr;

    }



    .process-grid {

        grid-template-columns: 1fr;

    }

}





/* ================= TEAM PAGE STYLES ================= */



.team-page-intro {

    background: #ffffff;

    padding: 70px 0 20px;

    border-bottom: 1px solid var(--border);

}



.team-intro-banner {

    background: linear-gradient(135deg, #f7fbf8 0%, #ffffff 100%);

    border: 1px solid #d8e8dc;

    border-left: 5px solid var(--primary);

    padding: 35px 40px;

    border-radius: 8px;

    box-shadow: 0 10px 30px rgba(14, 59, 31, 0.04);

}



.team-intro-banner .intro-tag {

    display: inline-block;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.5px;

    color: var(--primary);

    margin-bottom: 12px;

}



.team-intro-banner h2 {

    font-size: 28px;

    font-family: 'Montserrat', sans-serif;

    color: var(--dark);

    margin-bottom: 12px;

    line-height: 1.35;

}



.team-intro-banner p {

    font-size: 17px;

    line-height: 1.75;

    color: var(--text);

    margin: 0;

}



/* Founder Spotlight */

.founder-spotlight-section {

    padding: 85px 0;

    background: #ffffff;

    border-bottom: 1px solid var(--border);

}



.founder-spotlight-card {

    background: #ffffff;

    border: 1px solid var(--border);

    border-radius: 12px;

    overflow: hidden;

    box-shadow: 0 15px 45px rgba(14, 59, 31, 0.07);

    display: grid;

    grid-template-columns: 0.85fr 1.15fr;

    align-items: center;

}



.founder-img-col {

    position: relative;

    height: 100%;

    min-height: 480px;

}



.founder-img-col img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center 15%;

    display: block;

}



.founder-badge-tag {

    position: absolute;

    bottom: 25px;

    left: 25px;

    background: #0e3b1f;

    color: #ffffff;

    padding: 12px 22px;

    border-radius: 6px;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.5px;

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

    border: 1.5px solid #28643c;

    display: inline-flex;

    align-items: center;

    gap: 8px;

}



.founder-badge-tag i {

    color: #6ee797;

}



.founder-content-col {

    padding: 55px 50px;

}



.founder-content-col .section-tag {

    display: inline-block;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    color: var(--primary);

    background: #edf7ef;

    padding: 6px 14px;

    border-radius: 4px;

    margin-bottom: 14px;

}



.founder-content-col h2 {

    font-size: 34px;

    font-family: 'Montserrat', sans-serif;

    color: var(--dark);

    margin-bottom: 6px;

    line-height: 1.25;

}



.founder-role-title {

    font-size: 16px;

    font-weight: 700;

    color: var(--primary);

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 20px;

    display: block;

}



.founder-quote-box {

    background: #f7fbf8;

    border-left: 4px solid var(--primary);

    padding: 18px 24px;

    border-radius: 0 8px 8px 0;

    margin-bottom: 24px;

    font-style: italic;

    color: var(--dark);

    font-size: 15px;

    line-height: 1.7;

}



.founder-bio-text {

    font-size: 15px;

    line-height: 1.8;

    color: var(--text);

    margin-bottom: 25px;

}



.founder-credentials-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 16px;

    margin-bottom: 30px;

}



.founder-cred-item {

    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 14px;

    font-weight: 600;

    color: var(--dark);

}



.founder-cred-item i {

    width: 32px;

    height: 32px;

    border-radius: 50%;

    background: #edf7ef;

    color: var(--primary);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 13px;

    flex-shrink: 0;

}



.founder-actions {

    display: flex;

    gap: 16px;

    flex-wrap: wrap;

}



/* 4 Multidisciplinary Pillars */

.team-pillars-section {

    padding: 75px 0;

    background: #fbfdfc;

    border-bottom: 1px solid var(--border);

}



.pillars-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 25px;

    margin-top: 40px;

}



.pillar-card {

    background: #ffffff;

    border: 1px solid var(--border);

    border-radius: 10px;

    padding: 32px 24px;

    text-align: center;

    transition: all 0.35s ease;

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.02);

}



.pillar-card:hover {

    transform: translateY(-7px);

    border-color: #bad3c2;

    box-shadow: 0 16px 40px rgba(14, 59, 31, 0.09);

}



.pillar-icon-box {

    width: 65px;

    height: 65px;

    border-radius: 50%;

    background: #edf7ef;

    color: var(--primary);

    font-size: 26px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 20px;

    transition: all 0.3s ease;

}



.pillar-card:hover .pillar-icon-box {

    background: var(--primary);

    color: #ffffff;

    transform: scale(1.08);

}



.pillar-card h3 {

    font-size: 18px;

    font-family: 'Montserrat', sans-serif;

    color: var(--dark);

    margin-bottom: 10px;

}



.pillar-card p {

    font-size: 13.5px;

    line-height: 1.65;

    color: var(--text);

    margin: 0;

}



/* Team Directory Grid */

.team-catalog-section {

    padding: 85px 0 95px;

    background: #ffffff;

}



.team-filters {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;

    margin: 35px 0 50px;

}



.team-filter-btn {

    padding: 11px 22px;

    background: #ffffff;

    color: var(--dark);

    border: 1.5px solid #d4e2d8;

    border-radius: 30px;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;

    font-family: 'DM Sans', sans-serif;

}



.team-filter-btn:hover {

    border-color: var(--primary);

    color: var(--primary);

    background: #f3f8f5;

}



.team-filter-btn.active {

    background: var(--primary);

    color: #ffffff;

    border-color: var(--primary);

    box-shadow: 0 6px 18px rgba(14, 59, 31, 0.2);

}



.team-catalog-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 30px;

}



.team-member-card {

    background: #ffffff;

    border: 1px solid var(--border);

    border-radius: 10px;

    overflow: hidden;

    transition: all 0.35s ease;

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.03);

    cursor: pointer;

    display: flex;

    flex-direction: column;

}



.team-member-card:hover {

    transform: translateY(-8px);

    border-color: #bad3c2;

    box-shadow: 0 18px 45px rgba(14, 59, 31, 0.12);

}



.team-member-photo {

    position: relative;

    overflow: hidden;

    height: 310px;

}



.team-member-photo img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center 15%;

    transition: transform 0.5s ease;

}



.team-member-card:hover .team-member-photo img {

    transform: scale(1.06);

}



.team-member-badge {

    position: absolute;

    top: 15px;

    right: 15px;

    background: rgba(14, 59, 31, 0.88);

    backdrop-filter: blur(4px);

    color: #ffffff;

    font-size: 10.5px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

    padding: 5px 12px;

    border-radius: 4px;

}



.team-member-info {

    padding: 24px 20px 20px;

    text-align: center;

    flex: 1;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}



.team-member-info h3 {

    font-size: 18px;

    font-family: 'Montserrat', sans-serif;

    color: var(--dark);

    margin-bottom: 6px;

    transition: color 0.25s ease;

}



.team-member-card:hover .team-member-info h3 {

    color: var(--primary);

}



.team-member-role {

    font-size: 13px;

    color: var(--primary);

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.8px;

    margin-bottom: 12px;

    display: block;

}



.team-member-summary {

    font-size: 13.5px;

    line-height: 1.6;

    color: var(--text);

    margin-bottom: 18px;

}



.team-member-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-top: 14px;

    border-top: 1px solid var(--border);

}



.team-view-profile {

    font-size: 12.5px;

    font-weight: 700;

    color: var(--primary);

    display: inline-flex;

    align-items: center;

    gap: 6px;

    transition: gap 0.25s ease;

}



.team-member-card:hover .team-view-profile {

    gap: 9px;

}



.team-member-socials {

    display: flex;

    gap: 10px;

}



.team-member-socials a {

    color: #888888;

    font-size: 13px;

    transition: color 0.2s ease;

}



.team-member-socials a:hover {

    color: var(--primary);

}



/* Team Member Modal */

.team-modal-body {

    display: grid;

    grid-template-columns: 0.8fr 1.2fr;

    gap: 30px;

    padding: 30px;

    align-items: start;

}



.team-modal-img {

    border-radius: 8px;

    overflow: hidden;

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

}



.team-modal-img img {

    width: 100%;

    height: 380px;

    object-fit: cover;

    object-position: center 15%;

    display: block;

}



.team-modal-details h3 {

    font-size: 24px;

    font-family: 'Montserrat', sans-serif;

    color: var(--dark);

    margin-bottom: 4px;

}



.team-modal-details .modal-role {

    font-size: 14px;

    font-weight: 700;

    color: var(--primary);

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 16px;

    display: block;

}



.team-modal-details .modal-bio {

    font-size: 14.5px;

    line-height: 1.75;

    color: var(--text);

    margin-bottom: 20px;

}



.team-modal-meta {

    background: #fbfdfc;

    border: 1px solid #dce8df;

    border-radius: 8px;

    padding: 16px;

    margin-bottom: 22px;

}



.team-modal-meta p {

    font-size: 13.5px;

    color: var(--dark);

    margin: 6px 0;

    display: flex;

    align-items: center;

    gap: 8px;

}



.team-modal-meta p i {

    color: var(--primary);

    font-size: 13px;

    width: 18px;

}



/* Responsive adjustments for Team page */

@media (max-width: 1024px) {

    .founder-spotlight-card {

        grid-template-columns: 1fr;

    }



    .founder-img-col {

        min-height: 380px;

    }



    .pillars-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 20px;

    }



    .team-catalog-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 25px;

    }



    .team-modal-body {

        grid-template-columns: 1fr;

    }



    .team-modal-img img {

        height: 300px;

    }

}



@media (max-width: 600px) {

    .pillars-grid {

        grid-template-columns: 1fr;

    }



    .team-catalog-grid {

        grid-template-columns: 1fr;

    }



    .founder-content-col {

        padding: 35px 25px;

    }



    .founder-credentials-grid {

        grid-template-columns: 1fr;

    }



    .team-modal-body {

        padding: 20px;

    }

}





/* ================= CONTACT PAGE STYLES ================= */



.contact-info-cards-section {

    padding: 70px 0 30px;

    background: #ffffff;

}



.contact-cards-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 25px;

}



.contact-info-card {

    background: #ffffff;

    border: 1px solid var(--border);

    border-radius: 10px;

    padding: 35px 25px;

    text-align: center;

    transition: all 0.35s ease;

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.02);

    display: flex;

    flex-direction: column;

    align-items: center;

    position: relative;

    overflow: hidden;

}



.contact-info-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 4px;

    background: var(--primary);

    transform: scaleX(0);

    transform-origin: center;

    transition: transform 0.35s ease;

}



.contact-info-card:hover {

    transform: translateY(-7px);

    border-color: #bad3c2;

    box-shadow: 0 16px 40px rgba(14, 59, 31, 0.1);

}



.contact-info-card:hover::before {

    transform: scaleX(1);

}



.contact-icon-box {

    width: 65px;

    height: 65px;

    border-radius: 50%;

    background: #edf7ef;

    color: var(--primary);

    font-size: 26px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 20px;

    transition: all 0.3s ease;

}



.contact-info-card:hover .contact-icon-box {

    background: var(--primary);

    color: #ffffff;

    transform: scale(1.08);

}



.contact-card-tag {

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.5px;

    color: var(--primary);

    text-transform: uppercase;

    margin-bottom: 8px;

    display: block;

}



.contact-info-card h3 {

    font-size: 18px;

    font-family: 'Montserrat', sans-serif;

    color: var(--dark);

    margin-bottom: 12px;

}



.contact-info-card p,

.contact-info-card a {

    font-size: 14px;

    line-height: 1.7;

    color: var(--text);

    margin: 0;

    text-decoration: none;

    transition: color 0.2s ease;

}



.contact-info-card a:hover {

    color: var(--primary);

}



.contact-info-card .contact-links-stack {

    display: flex;

    flex-direction: column;

    gap: 6px;

}



.contact-info-card .contact-links-stack a {

    font-weight: 600;

    color: var(--dark);

}



.contact-info-card .contact-links-stack a:hover {

    color: var(--primary);

}



/* Main Form & Locations Section */

.contact-main-section {

    padding: 70px 0 95px;

    background: #fbfdfc;

}



.contact-main-grid {

    display: grid;

    grid-template-columns: 1.2fr 0.8fr;

    gap: 50px;

    align-items: start;

}



.contact-form-wrapper {

    background: #ffffff;

    border: 1px solid var(--border);

    border-radius: 12px;

    padding: 45px 40px;

    box-shadow: 0 10px 35px rgba(14, 59, 31, 0.05);

}



.contact-form-wrapper .section-tag {

    display: inline-block;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    color: var(--primary);

    background: #edf7ef;

    padding: 6px 14px;

    border-radius: 4px;

    margin-bottom: 14px;

}



.contact-form-wrapper h2 {

    font-size: 30px;

    font-family: 'Montserrat', sans-serif;

    color: var(--dark);

    margin-bottom: 12px;

    line-height: 1.3;

}



.contact-form-wrapper h2 span {

    color: var(--primary);

}



.contact-form-wrapper .form-intro-desc {

    font-size: 15px;

    line-height: 1.75;

    color: var(--text);

    margin-bottom: 30px;

}



.contact-actual-form .form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

}



.contact-actual-form .form-group {

    margin-bottom: 22px;

}



.contact-actual-form label {

    display: block;

    font-size: 13.5px;

    font-weight: 600;

    color: var(--dark);

    margin-bottom: 8px;

}



.contact-actual-form input,

.contact-actual-form select,

.contact-actual-form textarea {

    width: 100%;

    padding: 13px 16px;

    font-family: 'DM Sans', sans-serif;

    font-size: 14px;

    color: var(--dark);

    background: #fbfdfc;

    border: 1.5px solid #dbe6df;

    border-radius: 6px;

    transition: all 0.3s ease;

}



.contact-actual-form input:focus,

.contact-actual-form select:focus,

.contact-actual-form textarea:focus {

    outline: none;

    border-color: var(--primary);

    background: #ffffff;

    box-shadow: 0 0 0 4px rgba(14, 59, 31, 0.08);

}



.contact-actual-form textarea {

    resize: vertical;

    min-height: 120px;

}



.contact-feedback-msg {

    padding: 14px 18px;

    border-radius: 6px;

    font-size: 14px;

    margin-bottom: 20px;

    display: none;

    font-weight: 500;

}



.contact-feedback-msg.success {

    display: block;

    background: #edf7ef;

    color: #17542b;

    border: 1px solid #c2e3cb;

}



.contact-feedback-msg.error {

    display: block;

    background: #fdf2f2;

    color: #991b1b;

    border: 1px solid #fecaca;

}



/* Sidebar with Locations and Maps */

.contact-sidebar {

    display: flex;

    flex-direction: column;

    gap: 30px;

}



.office-location-card {

    background: #ffffff;

    border: 1px solid var(--border);

    border-radius: 12px;

    overflow: hidden;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.03);

    transition: all 0.3s ease;

}



.office-location-card:hover {

    border-color: #bad3c2;

    box-shadow: 0 14px 35px rgba(14, 59, 31, 0.08);

}



.office-card-header {

    padding: 22px 25px;

    background: linear-gradient(135deg, #f7fbf8 0%, #ffffff 100%);

    border-bottom: 1px solid var(--border);

    display: flex;

    align-items: center;

    gap: 15px;

}



.office-card-icon {

    width: 46px;

    height: 46px;

    border-radius: 8px;

    background: #edf7ef;

    color: var(--primary);

    font-size: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}



.office-card-header h3 {

    font-size: 17px;

    font-family: 'Montserrat', sans-serif;

    color: var(--dark);

    margin: 0 0 3px;

}



.office-card-header span {

    font-size: 11px;

    font-weight: 700;

    color: var(--primary);

    text-transform: uppercase;

    letter-spacing: 1px;

}



.office-card-body {

    padding: 22px 25px;

}



.office-card-body p {

    font-size: 14px;

    line-height: 1.7;

    color: var(--text);

    margin: 0 0 15px;

    display: flex;

    align-items: flex-start;

    gap: 10px;

}



.office-card-body p i {

    color: var(--primary);

    margin-top: 4px;

    font-size: 14px;

}



.office-map-frame {

    height: 180px;

    border: none;

    width: 100%;

    display: block;

}



.hotline-callout-card {

    background: #0e3b1f;

    color: #ffffff;

    border-radius: 12px;

    padding: 30px 25px;

    border: 2px solid #235c36;

    box-shadow: 0 12px 35px rgba(14, 59, 31, 0.2);

}



.hotline-callout-card h3 {

    font-size: 20px;

    font-family: 'Montserrat', sans-serif;

    color: #ffffff;

    margin-bottom: 8px;

}



.hotline-callout-card p {

    font-size: 13.5px;

    color: #d1e7d8;

    line-height: 1.6;

    margin-bottom: 20px;

}



.hotline-numbers {

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.hotline-item {

    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 16px;

    font-weight: 700;

    color: #ffffff;

    text-decoration: none;

    transition: transform 0.25s ease;

}



.hotline-item:hover {

    transform: translateX(6px);

    color: #6ee797;

}



.hotline-item i {

    width: 34px;

    height: 34px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.15);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 13px;

    color: #6ee797;

}



/* Responsive adjustments for Contact page */

@media (max-width: 1024px) {

    .contact-cards-grid {

        grid-template-columns: repeat(2, 1fr);

    }



    .contact-main-grid {

        grid-template-columns: 1fr;

        gap: 40px;

    }

}



@media (max-width: 600px) {

    .contact-cards-grid {

        grid-template-columns: 1fr;

    }



    .contact-form-wrapper {

        padding: 30px 20px;

    }



    .contact-actual-form .form-row {

        grid-template-columns: 1fr;

        gap: 0;

    }

}





/* ================= PROFESSIONAL ENHANCEMENTS & ELEVATED ELEMENTS ================= */



/* Sticky Header on Scroll */

.header.sticky {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    z-index: 1000;

    background: rgba(255, 255, 255, 0.96);

    backdrop-filter: blur(14px);

    -webkit-backdrop-filter: blur(14px);

    box-shadow: 0 4px 25px rgba(14, 59, 31, 0.08);

    animation: stickyHeaderDown 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;

}



@keyframes stickyHeaderDown {

    from {

        transform: translateY(-100%);

    }

    to {

        transform: translateY(0);

    }

}



.header.sticky .nav {

    min-height: 76px;

    transition: min-height 0.3s ease;

}



.header.sticky .logo-img {

    height: 44px;

}



/* Enhanced Section Tags */

.section-tag {

    display: inline-flex !important;

    align-items: center;

    gap: 8px;

    font-size: 11.5px !important;

    font-weight: 700 !important;

    letter-spacing: 2px !important;

    text-transform: uppercase;

    color: var(--primary) !important;

    background: #edf7ef !important;

    padding: 6px 14px !important;

    border-radius: 4px;

    border: 1px solid #d4e8da;

    margin-bottom: 14px;

}



.section-tag::before {

    content: "";

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: var(--primary);

    display: inline-block;

}



/* Enhanced Buttons with Architectural Geometry & Micro-Interactions */

.btn {

    border-radius: 6px;

    position: relative;

    overflow: hidden;

    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

}



.btn:hover {

    transform: translateY(-3px);

    box-shadow: 0 10px 25px rgba(14, 59, 31, 0.22);

}



.btn i {

    transition: transform 0.25s ease;

}



.btn:hover i {

    transform: translateX(4px);

}



.btn.btn-secondary {

    border-radius: 6px;

    background: #ffffff;

    color: var(--primary);

    border: 2px solid var(--primary);

}



.btn.btn-secondary:hover {

    background: var(--primary);

    color: #ffffff;

    transform: translateY(-3px);

    box-shadow: 0 10px 25px rgba(14, 59, 31, 0.18);

}



/* Hero Section Refinements */

.hero-overlay {

    background: linear-gradient(135deg, rgba(8, 30, 16, 0.82) 0%, rgba(14, 59, 31, 0.5) 100%);

    background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);

    background-size: 28px 28px;

}



.hero-text-box {

    max-width: 560px;

    padding: 44px 46px;

    background: rgba(8, 28, 15, 0.76);

    backdrop-filter: blur(14px);

    -webkit-backdrop-filter: blur(14px);

    border-left: 5px solid #6ee797;

    border-top: 1px solid rgba(255, 255, 255, 0.16);

    border-right: 1px solid rgba(255, 255, 255, 0.08);

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 0 12px 12px 0;

    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.38);

    color: #ffffff;

}



.hero-trust-strip {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 15px;

    margin-top: 28px;

    padding-top: 22px;

    border-top: 1px solid rgba(255, 255, 255, 0.16);

}



.hero-trust-item strong {

    display: block;

    font-size: 17px;

    color: #6ee797;

    font-family: 'Montserrat', sans-serif;

    font-weight: 800;

    line-height: 1.2;

}



.hero-trust-item span {

    font-size: 11px;

    color: #d1e7d8;

    text-transform: uppercase;

    letter-spacing: 0.8px;

    display: block;

    margin-top: 3px;

}



/* Hero Scroll Indicator */

.hero-scroll-hint {

    position: absolute;

    bottom: 25px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    color: rgba(255, 255, 255, 0.7);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    text-decoration: none;

    transition: color 0.3s ease;

    z-index: 10;

}



.hero-scroll-hint:hover {

    color: #ffffff;

}



.mouse-icon {

    width: 22px;

    height: 36px;

    border: 2px solid rgba(255, 255, 255, 0.6);

    border-radius: 12px;

    position: relative;

}



.mouse-wheel {

    width: 4px;

    height: 8px;

    background: #6ee797;

    border-radius: 2px;

    position: absolute;

    top: 6px;

    left: 50%;

    transform: translateX(-50%);

    animation: mouseWheelMove 1.8s infinite;

}



@keyframes mouseWheelMove {

    0% {

        opacity: 1;

        transform: translate(-50%, 0);

    }

    100% {

        opacity: 0;

        transform: translate(-50%, 14px);

    }

}



/* Accreditation & Credentials Strip */

.accreditation-strip {

    background: #ffffff;

    border-bottom: 1px solid var(--border);

    padding: 26px 0;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);

}



.accreditation-inner {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    flex-wrap: wrap;

}



.accreditation-item {

    display: flex;

    align-items: center;

    gap: 14px;

    flex: 1;

    min-width: 190px;

}



.accreditation-item i {

    font-size: 24px;

    color: var(--primary);

    width: 46px;

    height: 46px;

    background: #edf7ef;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    transition: all 0.3s ease;

}



.accreditation-item:hover i {

    background: var(--primary);

    color: #ffffff;

    transform: scale(1.08);

}



.accreditation-item strong {

    display: block;

    font-size: 13.5px;

    color: var(--dark);

    font-family: 'Montserrat', sans-serif;

    font-weight: 700;

}



.accreditation-item span {

    font-size: 11.5px;

    color: var(--text-muted);

}



/* Floating Quick Contact Action Hub */

.floating-contact-hub {

    position: fixed;

    bottom: 30px;

    right: 30px;

    display: flex;

    flex-direction: column;

    gap: 12px;

    z-index: 999;

}



.floating-action-btn {

    width: 52px;

    height: 52px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #ffffff;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.22);

    position: relative;

    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

    text-decoration: none;

}



.floating-action-btn.wa-btn {

    background: #25D366;

    font-size: 26px;

}



.floating-action-btn.wa-btn:hover {

    background: #20ba59;

    transform: scale(1.1) translateY(-2px);

    box-shadow: 0 12px 30px rgba(37, 211, 102, 0.4);

}



.floating-action-btn.phone-btn {

    background: var(--primary);

    font-size: 20px;

}



.floating-action-btn.phone-btn:hover {

    background: var(--primary-light);

    transform: scale(1.1) translateY(-2px);

    box-shadow: 0 12px 30px rgba(14, 59, 31, 0.35);

}



.floating-tooltip {

    position: absolute;

    right: 65px;

    background: var(--dark);

    color: #ffffff;

    font-size: 12px;

    font-weight: 600;

    padding: 7px 14px;

    border-radius: 6px;

    white-space: nowrap;

    opacity: 0;

    visibility: hidden;

    transform: translateX(8px);

    transition: all 0.25s ease;

    pointer-events: none;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);

}



.floating-action-btn:hover .floating-tooltip {

    opacity: 1;

    visibility: visible;

    transform: translateX(0);

}



/* Interactive FAQ Accordion Section */

.faq-section {

    padding: 85px 0;

    background: #ffffff;

    border-top: 1px solid var(--border);

}



.faq-grid {

    max-width: 900px;

    margin: 40px auto 0;

    display: flex;

    flex-direction: column;

    gap: 16px;

}



.faq-item {

    background: #ffffff;

    border: 1px solid var(--border);

    border-radius: 8px;

    overflow: hidden;

    transition: all 0.3s ease;

}



.faq-item:hover {

    border-color: #bad3c2;

    box-shadow: 0 6px 20px rgba(14, 59, 31, 0.05);

}



.faq-item.active {

    border-color: var(--primary);

    box-shadow: 0 8px 25px rgba(14, 59, 31, 0.08);

}



.faq-question {

    padding: 22px 26px;

    font-size: 16px;

    font-family: 'Montserrat', sans-serif;

    font-weight: 700;

    color: var(--dark);

    cursor: pointer;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 15px;

    user-select: none;

    transition: color 0.25s ease;

}



.faq-item.active .faq-question {

    color: var(--primary);

}



.faq-icon {

    width: 28px;

    height: 28px;

    border-radius: 50%;

    background: #edf7ef;

    color: var(--primary);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 12px;

    flex-shrink: 0;

    transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;

}



.faq-item.active .faq-icon {

    transform: rotate(180deg);

    background: var(--primary);

    color: #ffffff;

}



.faq-answer {

    max-height: 0;

    overflow: hidden;

    transition: max-height 0.35s ease, padding 0.35s ease;

    padding: 0 26px;

    font-size: 14.5px;

    line-height: 1.8;

    color: var(--text);

}



.faq-item.active .faq-answer {

    padding: 0 26px 24px;

}



/* Card Hover Elevation Polish */

.service-card,

.project-card,

.team-member-card,

.pillar-card,

.process-card,

.contact-info-card {

    border-radius: 10px;

}



/* Responsive adjustments for professional elements */

@media (max-width: 900px) {

    .accreditation-inner {

        display: grid;

        grid-template-columns: repeat(2, 1fr);

        gap: 18px;

    }



    .hero-trust-strip {

        grid-template-columns: 1fr;

        gap: 12px;

    }



    .floating-contact-hub {

        bottom: 20px;

        right: 20px;

    }

}



@media (max-width: 600px) {

    .accreditation-inner {

        grid-template-columns: 1fr;

    }



    .hero-text-box {

        padding: 30px 24px;

        border-radius: 8px;

    }

}





/* ================= 8 SECTOR EXPERTISE SHOWCASE STYLES ================= */



.sectors-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 28px;

    margin-top: 45px;

}



.sector-card {

    background: #ffffff;

    border: 1px solid var(--border);

    border-radius: 12px;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.03);

    position: relative;

}



.sector-card:hover {

    transform: translateY(-8px);

    border-color: #bad3c2;

    box-shadow: 0 20px 45px rgba(14, 59, 31, 0.12);

}



.sector-img-wrapper {

    position: relative;

    height: 220px;

    overflow: hidden;

}



.sector-img-wrapper img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);

}



.sector-card:hover .sector-img-wrapper img {

    transform: scale(1.08);

}



.sector-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(180deg, rgba(8, 30, 16, 0.15) 0%, rgba(8, 30, 16, 0.72) 100%);

    pointer-events: none;

}



.sector-num {

    position: absolute;

    top: 15px;

    left: 15px;

    background: rgba(14, 59, 31, 0.88);

    backdrop-filter: blur(6px);

    -webkit-backdrop-filter: blur(6px);

    color: #6ee797;

    font-size: 13px;

    font-weight: 800;

    font-family: 'Montserrat', sans-serif;

    padding: 4px 10px;

    border-radius: 4px;

    border: 1px solid rgba(110, 231, 151, 0.3);

    z-index: 2;

}



.sector-icon-pill {

    position: absolute;

    bottom: 15px;

    right: 15px;

    width: 44px;

    height: 44px;

    border-radius: 50%;

    background: #ffffff;

    color: var(--primary);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 18px;

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);

    transition: all 0.3s ease;

    z-index: 2;

}



.sector-card:hover .sector-icon-pill {

    background: var(--primary);

    color: #ffffff;

    transform: scale(1.1);

}



.sector-content {

    padding: 24px 22px 20px;

    flex: 1;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}



.sector-cat {

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1.2px;

    color: var(--primary);

    margin-bottom: 6px;

    display: block;

}



.sector-content h3 {

    font-size: 20px;

    font-family: 'Montserrat', sans-serif;

    color: var(--dark);

    margin-bottom: 10px;

    line-height: 1.3;

    transition: color 0.25s ease;

}



.sector-card:hover .sector-content h3 {

    color: var(--primary);

}



.sector-content p {

    font-size: 13.5px;

    line-height: 1.65;

    color: var(--text);

    margin-bottom: 18px;

}



.sector-footer {

    padding-top: 14px;

    border-top: 1px solid var(--border);

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.sector-link {

    font-size: 12.5px;

    font-weight: 700;

    color: var(--primary);

    display: inline-flex;

    align-items: center;

    gap: 6px;

    transition: gap 0.25s ease;

}



.sector-card:hover .sector-link {

    gap: 10px;

}



.sector-inquire-btn {

    background: none;

    border: none;

    font-size: 12px;

    font-weight: 600;

    color: #647568;

    cursor: pointer;

    text-decoration: underline;

    transition: color 0.2s ease;

    padding: 0;

}



.sector-inquire-btn:hover {

    color: var(--primary);

}



@media (max-width: 1024px) {

    .sectors-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 24px;

    }

}



@media (max-width: 600px) {

    .sectors-grid {

        grid-template-columns: 1fr;

    }



    .sector-img-wrapper {

        height: 200px;

    }

}





/* Interactive Hero Trust Page Buttons */

.hero-trust-strip {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 12px;

    margin-top: 26px;

    padding-top: 22px;

    border-top: 1px solid rgba(255, 255, 255, 0.18);

}



.hero-trust-btn {

    display: block;

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.22);

    border-radius: 8px;

    padding: 12px 14px;

    text-decoration: none;

    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

    backdrop-filter: blur(6px);

    -webkit-backdrop-filter: blur(6px);

}



.hero-trust-btn:hover {

    background: rgba(14, 59, 31, 0.9);

    border-color: #6ee797;

    transform: translateY(-4px);

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

}



.hero-trust-btn strong {

    display: block;

    font-size: 16px;

    color: #6ee797;

    font-family: 'Montserrat', sans-serif;

    font-weight: 800;

    line-height: 1.2;

    transition: color 0.25s ease;

}



.hero-trust-btn span {

    font-size: 11px;

    color: #d1e7d8;

    text-transform: uppercase;

    letter-spacing: 0.8px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 4px;

    margin-top: 4px;

}



.hero-trust-btn span i {

    font-size: 9px;

    opacity: 0.75;

    transition: transform 0.25s ease, opacity 0.25s ease;

}



.hero-trust-btn:hover span i {

    transform: translate(2px, -2px);

    opacity: 1;

    color: #6ee797;

}