:root {
    /* Color Palette */
    --primary-color: #0F2C1F;
    /* Deep Forest Green */
    --primary-light: #2C5E48;
    /* Lighter Forest Green */
    --secondary-color: #D4C2A8;
    /* Warm Sand/Gold */
    --accent-color: #88A096;
    /* Sage Green */
    --text-dark: #1A1A1A;
    --text-light: #666666;
    --bg-light: #F0F4F2;
    /* Slightly darker/greener tint for better contrast */
    --bg-white: #FFFFFF;
    --border-color: #DADADA;
    /* Darker border */

    /* Typography */
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Open Sans', sans-serif;
    --font-display: 'Playfair Display', serif;

    /* Spacing */
    --container-width: 1200px;
    /* Responsive Spacing */
    --section-padding: 100px 0;
    --container-padding: 0 20px;

    /* Effects */
    --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 20px 25px rgba(0, 0, 0, 0.15);
    --transition: all 0.3s ease;
}

@media (max-width: 992px) {
    :root {
        --section-padding: 80px 0;
    }
}

@media (max-width: 768px) {
    :root {
        --section-padding: 60px 0;
    }
}

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
}

/* Hide scrollbar for Chrome, Safari and Opera */
html::-webkit-scrollbar {
    display: none;
}

body {
    font-family: var(--font-body);
    color: var(--text-dark);
    line-height: 1.6;
    background-color: var(--bg-white);
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

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

.container {
    width: 90%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

.container-full {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 50px;
    /* Adjust padding as needed for "full width" feel */
}

.section-padding {
    padding: var(--section-padding);
}

/* Typography Utilities */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    color: var(--primary-color);
    letter-spacing: -0.5px;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.animate-on-scroll {
    opacity: 0;
    /* Initially hidden */
}

.animate-on-scroll.visible {
    animation: fadeInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.delay-1 {
    animation-delay: 0.2s;
}

.delay-2 {
    animation-delay: 0.4s;
}

.delay-3 {
    animation-delay: 0.6s;
}

.delay-4 {
    animation-delay: 0.8s;
}

/* Premium Hero Animations */
@keyframes revealFromTop {
    0% {
        opacity: 0;
        transform: translateY(-30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes revealFromBottom {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes revealFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes revealFromRight {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-reveal-top {
    animation: revealFromTop 1s cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
    opacity: 0;
}

.animate-reveal-bottom {
    animation: revealFromBottom 1s cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
    opacity: 0;
}

.animate-reveal-left {
    animation: revealFromLeft 1.2s cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
    opacity: 0;
}

.animate-reveal-right {
    animation: revealFromRight 1.2s cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
    opacity: 0;
}

.animate-scale-in {
    animation: scaleIn 1s cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
    opacity: 0;
}

/* Premium Slide-Specific Animation Overrides */
@keyframes blurReveal {
    0% {
        opacity: 0;
        filter: blur(10px);
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }
}

@keyframes flipIn {
    0% {
        opacity: 0;
        transform: perspective(600px) rotateX(-90deg);
    }

    100% {
        opacity: 1;
        transform: perspective(600px) rotateX(0deg);
    }
}

@keyframes glideRight {
    0% {
        opacity: 0;
        transform: translateX(100px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }

    50% {
        opacity: 0.9;
        transform: scale(1.1);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* When the slider hits Slide 2, we swap the animation types for a fresh look */
.hero[data-slide="2"] .animate-reveal-top {
    animation-name: blurReveal;
}

.hero[data-slide="2"] .animate-reveal-left {
    animation-name: flipIn;
}

.hero[data-slide="2"] .animate-reveal-bottom {
    animation-name: glideRight;
}

.hero[data-slide="2"] .animate-scale-in {
    animation-name: bounceIn;
}



.sub-heading {
    color: var(--secondary-color);
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 2px;
    font-weight: 600;
    margin-bottom: 10px;
    display: inline-block;
}

.section-heading {
    font-size: 2.5rem;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 15px;
}

.section-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background-color: var(--secondary-color);
}

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

.text-center .section-heading::after {
    left: 50%;
    transform: translateX(-50%);
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 14px 35px;
    border-radius: 50px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.btn:active {
    transform: translateY(-1px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.btn::after {
    content: "";
    position: absolute;
    width: 300%;
    height: 300%;
    top: 50%;
    left: 50%;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.6s ease;
    z-index: 0;
}

.btn:hover::after {
    transform: translate(-50%, -50%) scale(1);
    transition: 0s;
}

.btn-primary {
    background-color: var(--primary-color);
    color: #fff;
    border: 2px solid var(--primary-color);
}

.btn-primary:hover {
    background-color: transparent;
    color: var(--primary-color);
}

.btn-secondary {
    background-color: transparent;
    color: #fff;
    border: 2px solid #fff;
}

.btn-secondary:hover {
    background-color: #fff;
    color: var(--primary-color);
}

.btn-outline {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.btn-outline:hover {
    background-color: var(--primary-color);
    color: #fff;
}

/* Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(255, 255, 255, 0.85);
    /* More transparent for glass effect */
    backdrop-filter: blur(15px);
    /* Increased blur */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
}

.header.scrolled {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.header.scrolled .header-container {
    padding: 5px 50px;
    /* Slimmer on scroll */
}

.header.scrolled .top-bar {
    display: none;
    /* Optional: hide top bar on scroll if desired, or keep it. Often top bars hide. */
    /* If user wants it always visible, remove this line. Let's assume keep it for now unless it takes too much space. 
       Actually, standard is to hide top bar on scroll to save space. 
       Let's keep it visible for now since the user emphasized "same details use on that".
       Or maybe just reduce padding. */
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 50px;
    /* Reduced padding as requested */
    width: 100%;
}

/* Top Bar Styles */
.top-bar {
    background-color: var(--primary-color);
    color: rgba(255, 255, 255, 0.9);
    padding: 8px 0;
    font-size: 0.85rem;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.top-bar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 50px;
}

.top-bar-left,
.top-bar-right {
    display: flex;
    gap: 20px;
    align-items: center;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.contact-item i {
    color: var(--secondary-color);
    /* Gold accent */
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons a {
    color: #fff;
    transition: var(--transition);
}

.social-icons a:hover {
    color: var(--secondary-color);
}

@media (max-width: 992px) {
    .top-bar {
        display: none;
        /* Hide top bar on mobile usually, or stack it */
    }

    .container-full {
        padding: 0 20px;
    }

    .header-container {
        padding: 5px 20px;
    }
}

.logo {
    font-family: var(--font-display);
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 12px;
    transition: transform 0.3s ease;
}

.logo:hover {
    transform: translateY(-1px);
}

.logo span {
    color: var(--primary-color);
    /* Changed from secondary to primary */
}

.logo i {
    color: var(--primary-color);
    font-size: 1.5rem;
}

.nav-list {
    display: flex;
    gap: 30px;
    align-items: center;
}

.nav-link {
    font-weight: 500;
    color: var(--text-dark);
    position: relative;
    padding: 5px 0;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--primary-color);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link:hover::after,
.nav-link.active::after {
    transform: scaleX(1);
    transform-origin: left;
}

.btn-cta {
    padding: 12px 28px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    color: #fff !important;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(15, 44, 31, 0.2);
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.btn-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(15, 44, 31, 0.3);
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-color) 100%);
}

.hamburger {
    display: none;
    cursor: pointer;
}

.hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--text-dark);
    margin: 5px 0;
    transition: var(--transition);
}

/* Hero Section */
/* Hero Section */
.hero {
    height: 120vh;
    /* Increased height */
    /* Static background removed for slider */
    background: #0F2C1F;
    /* Fallback color */
    position: relative;
    display: flex;
    align-items: center;
    color: #fff;
    margin-top: -130px;
    padding-top: 130px;
    overflow: hidden;
}

.hero-bg-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    transform: scale(1.1);
    /* Subtle zoom effect start */
    animation: zoomEffect 20s infinite alternate;
}

.slide.active {
    opacity: 1;
}

@keyframes zoomEffect {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.1);
    }
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(15, 44, 31, 0.85) 0%, rgba(15, 44, 31, 0.4) 100%);
    z-index: 1;
}

.hero-layout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 10;
    width: 100%;
}

.hero-text {
    max-width: 650px;
}

.hero-badge-wrapper {
    /* Position right simply by flex layout */
    display: flex;
    justify-content: flex-end;
    flex: 1;
}

@media (max-width: 992px) {
    .hero-layout {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        padding-top: 50px;
    }

    .hero-text {
        max-width: 100%;
        margin-bottom: 40px;
    }

    .hero-badge-wrapper {
        justify-content: center;
        width: 100%;
    }

    .hero-buttons {
        justify-content: center;
    }
}

.hero h1 {
    font-family: var(--font-display);
    font-size: 4rem;
    color: #fff;
    margin-bottom: 20px;
    line-height: 1.1;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    /* Improve readability */
}

.hero .sub-heading {
    color: var(--secondary-color);
    margin-bottom: 10px;
    display: block;
    font-size: 1.2rem;
    letter-spacing: 3px;
    font-weight: 600;
}

.hero .highlight {
    color: var(--secondary-color);
    font-style: italic;
}

.hero-badge {
    display: inline-block;
    background: rgba(212, 194, 168, 0.9);
    /* Semi-transparent secondary color */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--primary-color);
    padding: 20px 35px;
    border-radius: 15px;
    margin-bottom: 30px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    transform: rotate(-3deg);
    /* Stylish tilt */
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: transform 0.3s ease;
}

.hero-badge:hover {
    transform: rotate(0deg) scale(1.05);
}

.hero-badge .years {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    display: block;
    margin-bottom: 5px;
}

.hero-badge .text {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hero p {
    font-size: 1.15rem;
    line-height: 1.8;
    margin-bottom: 30px;
    max-width: 600px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 400;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}

.hero-buttons {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.scroll-down {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.mouse {
    width: 30px;
    height: 50px;
    border: 2px solid #fff;
    border-radius: 20px;
    display: block;
    position: relative;
}

.wheel {
    width: 4px;
    height: 8px;
    background: #fff;
    border-radius: 2px;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    animation: scroll 1.5s infinite;
}

@keyframes scroll {
    0% {
        top: 10px;
        opacity: 1;
    }

    100% {
        top: 30px;
        opacity: 0;
    }
}

/* Features Section Redesign */
.features {
    background-color: #f8faf9;
    /* Very light green-grey for contrast against white cards */
    position: relative;
    overflow: hidden;
}

/* Background decoration for section */
.features::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(15, 44, 31, 0.05) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    z-index: 0;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 40px;
    /* More breathing room */
    position: relative;
    z-index: 1;
}

.feature-box {
    text-align: center;
    padding: 50px 30px;
    background: #FFFFFF;
    border-radius: 20px;
    /* Softer corners */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
    /* Very soft shadow initially */
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid rgba(0, 0, 0, 0.02);
    /* Almost invisible border */
    transform: translateY(0);
}

/* Gradient Top Border Line */
.feature-box::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, var(--secondary-color), var(--primary-color));
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.5s ease;
}

.feature-box:hover::after {
    transform: scaleX(1);
}

.feature-box:hover {
    transform: translateY(-15px);
    box-shadow: 0 30px 60px rgba(15, 44, 31, 0.12);
    /* Deep premium shadow on hover */
}

/* Background Shape on Hover */
.feature-box::before {
    content: '';
    position: absolute;
    bottom: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    background: rgba(15, 44, 31, 0.03);
    border-radius: 50%;
    transition: transform 0.5s ease;
    z-index: 0;
}

.feature-box:hover::before {
    transform: scale(2.5);
}

.feature-box .icon-box {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #ffffff 0%, #f4f8f6 100%);
    border-radius: 50%;
    margin: 0 auto 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--primary-color);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    z-index: 1;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

/* Ring pulse effect */
.feature-box .icon-box::after {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 50%;
    border: 1px dashed var(--secondary-color);
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.5s ease;
}

.feature-box:hover .icon-box::after {
    opacity: 1;
    transform: scale(1.1) rotate(90deg);
}

.feature-box:hover .icon-box {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(15, 44, 31, 0.15);
    background: #fff;
}

.feature-box .icon-box img {
    width: 60%;
    height: 60%;
    object-fit: contain;
    transition: all 0.5s ease;
    filter: brightness(0) saturate(100%) invert(11%) sepia(35%) saturate(1514%) hue-rotate(103deg) brightness(97%) contrast(94%);
    /* Default dark green */
}

.feature-box:hover .icon-box img {
    transform: scale(1.1);
    filter: none;
    /* Original colors */
}

.feature-box h3 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    color: var(--primary-color);
    font-weight: 700;
    position: relative;
    z-index: 1;
    letter-spacing: -0.5px;
}

.feature-box p {
    color: var(--text-light);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 25px;
    z-index: 1;
    opacity: 0.85;
}

.feature-divider {
    width: 40px;
    height: 3px;
    background: var(--secondary-color);
    border-radius: 10px;
    transition: width 0.4s ease;
    opacity: 0.5;
    border: none;
    /* Remove old dashed style */
}

.feature-box:hover .feature-divider {
    width: 80px;
    opacity: 1;
}

/* About Section */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-image {
    position: relative;
    padding: 20px;
    display: flex;
    justify-content: flex-end;
}

.image-blob-container {
    position: relative;
    width: 100%;
    max-width: 550px;
}

.blob-img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    border: 12px solid var(--primary-color);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.about-inset-wrapper {
    position: absolute;
    top: 50%;
    left: -60px;
    transform: translateY(-50%);
    width: 280px;
    height: 280px;
    border-radius: 50%;
    overflow: hidden;
    border: 10px solid #fff;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    z-index: 10;
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

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

/* Decorative elements */
.image-blob-container::before {
    content: '';
    position: absolute;
    top: -40px;
    left: 20%;
    width: 60px;
    height: 60px;
    border: 3px solid var(--primary-color);
    border-radius: 50%;
    opacity: 0.2;
    animation: float 4s ease-in-out infinite;
}

.image-blob-container::after {
    content: '';
    position: absolute;
    top: -60px;
    left: 10%;
    width: 20px;
    height: 20px;
    background-color: var(--primary-color);
    border-radius: 50%;
    opacity: 0.3;
    animation: float 6s ease-in-out infinite;
}

@keyframes float {

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

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

.about-image:hover .blob-img {
    border-radius: 58% 42% 30% 70% / 55% 55% 45% 45%;
}

.about-image:hover .about-inset-wrapper {
    transform: translateY(-50%) scale(1.05) rotate(-5deg);
    left: -40px;
}

@media (max-width: 992px) {
    .about-inset-wrapper {
        width: 200px;
        height: 200px;
        left: -30px;
    }
}

@media (max-width: 768px) {
    .about-image {
        justify-content: center;
        padding: 40px 0;
    }

    .about-inset-wrapper {
        width: 160px;
        height: 160px;
        left: 0;
        top: 60%;
    }

    .blob-img {
        height: 400px;
    }
}

.experience-badge {
    position: absolute;
    bottom: 0px;
    right: 0px;
    background-color: var(--secondary-color);
    padding: 15px 25px;
    border-radius: 10px;
    text-align: center;
    box-shadow: var(--shadow-md);
    color: var(--primary-color);
    z-index: 15;
}

.experience-badge .years {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
}

.experience-badge .text {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
}

.features-list {
    margin: 30px 0;
}

.feature-item {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}

.feature-item i {
    color: var(--secondary-color);
    font-size: 1.5rem;
    margin-top: 5px;
}

.feature-item h5 {
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.feature-item p {
    color: var(--text-light);
    font-size: 0.95rem;
}

/* About Highlights */
.about-highlights {
    margin: 20px 0 30px;
}

.about-highlights li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--primary-color);
}

.about-highlights li i {
    color: var(--secondary-color);
}

/* Services Section */
.bg-light {
    background-color: var(--bg-light);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.service-card {
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    /* Deeper shadow */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.03);
    /* Extremely subtle border */
    border-bottom: 3px solid transparent;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
    border-bottom-color: var(--secondary-color);
}

.service-img {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.service-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.service-card:hover .service-img img {
    transform: scale(1.1);
}

.service-content {
    padding: 25px;
}

.service-content h3 {
    font-size: 1.25rem;
    margin-bottom: 15px;
}

.service-card p {
    color: var(--text-light);
    margin-bottom: 20px;
}

.read-more {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

.read-more:hover {
    color: var(--secondary-color);
    gap: 10px;
    /* slide arrow */
}

/* Process Section */
.process-steps {
    display: flex;
    justify-content: space-between;
    margin-top: 80px;
    position: relative;
    gap: 30px;
}

.step-item {
    text-align: center;
    flex: 1;
    position: relative;
    z-index: 2;
}

.step-icon-wrapper {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 30px;
}

.step-number {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 40px;
    height: 40px;
    background-color: var(--primary-color);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 4px solid #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 3;
    transition: all 0.4s ease;
}

.step-icon-wrapper i {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border: 2px solid rgba(15, 44, 31, 0.1);
    color: var(--primary-color);
    font-size: 2.2rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.step-item:hover .step-icon-wrapper i {
    background-color: var(--primary-color);
    color: #fff;
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(15, 44, 31, 0.3);
}

.step-item:hover .step-number {
    background-color: var(--secondary-color);
    color: var(--primary-color);
    transform: scale(1.1);
}

.step-connector {
    position: absolute;
    top: 60px;
    left: 5%;
    width: 90%;
    height: 2px;
    background: repeating-linear-gradient(to right, #e0e0e0 0, #e0e0e0 10px, transparent 10px, transparent 20px);
    z-index: 1;
}

.step-content h3 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    color: var(--primary-color);
    font-family: var(--font-display);
}

.step-content p {
    font-size: 0.95rem;
    color: var(--text-light);
    line-height: 1.6;
    padding: 0 10px;
}

/* Consultation Form Section */
.consultation {
    background-color: var(--bg-white);
    position: relative;
    z-index: 1;
}

.consultation::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: var(--primary-color);
    z-index: -1;
}

.consultation .section-heading {
    color: #fff;
}

.consultation .section-heading::after {
    background-color: var(--secondary-color);
}

.consultation-form-wrapper {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    padding: 60px;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.consultation-form {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.consultation-form input,
.consultation-form select,
.consultation-form textarea {
    width: 100%;
    padding: 18px 25px;
    border: 1px solid #e0e0e0;
    background-color: #f9f9f9;
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 1rem;
    transition: all 0.3s ease;
    color: var(--text-dark);
}

.consultation-form input::placeholder,
.consultation-form textarea::placeholder {
    color: #aaa;
}

.consultation-form input:focus,
.consultation-form select:focus,
.consultation-form textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(15, 44, 31, 0.1);
    /* Nice focus ring */
    transform: translateY(-2px);
}

.consultation-form textarea {
    resize: vertical;
    min-height: 150px;
}

.submit-btn {
    width: 100%;
    border: none;
    background: var(--primary-color);
    color: #fff;
    font-size: 1.1rem;
    padding: 18px;
    margin-top: 10px;
}

.submit-btn:hover {
    background: var(--primary-light);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(44, 94, 72, 0.3);
}

@media (max-width: 768px) {

    .form-row {
        grid-template-columns: 1fr;
    }
}

/* CTA Section */
.cta-section {
    position: relative;
    padding: 100px 0;
    color: #fff;
    overflow: hidden;
}

.cta-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/cta-bg.jpg') center/cover;
    z-index: -2;
    filter: grayscale(30%);
}

.cta-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 44, 31, 0.85);
    z-index: -1;
}

.cta-content h2 {
    color: #fff;
    font-family: var(--font-display);
    font-size: 3rem;
    margin-bottom: 20px;
}

.cta-content p {
    font-size: 1.2rem;
    margin-bottom: 40px;
    opacity: 0.9;
}

/* Footer */
.footer {
    background-color: var(--primary-color);
    color: #fff;
    padding-top: 80px;
}

.footer-top {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    padding-bottom: 60px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-logo {
    font-family: var(--font-display);
    font-size: 1.8rem;
    color: #fff;
    margin-bottom: 20px;
    display: inline-block;
}

.footer-logo span {
    color: var(--secondary-color);
}

.footer-widget p {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 20px;
    line-height: 1.8;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    transition: var(--transition);
}

.social-links a:hover {
    background-color: var(--secondary-color);
    color: var(--primary-color);
}

.footer-widget h4 {
    color: #fff;
    font-size: 1.2rem;
    margin-bottom: 25px;
}

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

.footer-widget ul li a {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 300;
}

.footer-widget ul li a:hover {
    color: var(--secondary-color);
    padding-left: 5px;
}

.contact-info li {
    display: flex;
    gap: 15px;
    color: rgba(255, 255, 255, 0.7);
}

.contact-info li i {
    color: var(--secondary-color);
    margin-top: 5px;
}

.footer-bottom {
    padding: 30px 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
}

/* Animations */
.animate-fade-up {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 1s forwards;
}

.delay-1 {
    animation-delay: 0.2s;
}

.delay-2 {
    animation-delay: 0.4s;
}

.delay-3 {
    animation-delay: 0.6s;
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   Comprehensive Responsive System 
   ========================================================================== */

/* Large Tablets & Small Laptops (max-width: 1024px) */
@media (max-width: 1024px) {
    .container {
        width: 95%;
    }

    .section-heading {
        font-size: 2.2rem;
    }

    .hero h1 {
        font-size: 3.2rem;
    }
}

/* Tablets (max-width: 992px) */
@media (max-width: 992px) {
    .top-bar {
        display: none;
    }

    .header-container {
        padding: 15px 30px;
    }

    .logo {
        font-size: 1.6rem;
    }

    .nav-list {
        gap: 20px;
    }

    .hero {
        height: 100vh;
    }

    .hero h1 {
        font-size: 2.8rem;
    }

    .about-grid,
    .services-grid,
    .footer-top {
        gap: 30px;
    }
}

/* Mobile Devices & Tablets (max-width: 768px) */
@media (max-width: 768px) {

    /* Mobile Navigation - Centered & Steps Style */
    .nav-list {
        position: fixed;
        top: 90px;
        left: 50%;
        transform: translate(-50%, -20px);
        width: 90%;
        max-width: 340px;
        height: auto;
        background-color: #ffffff;
        padding: 40px 30px;
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
        z-index: 1001;
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        border: 1px solid rgba(0, 0, 0, 0.05);
    }

    .nav-list.active {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
        right: auto;
    }

    /* Steps Animation for specific items */
    .nav-list li {
        width: 100%;
        text-align: center;
        opacity: 0;
        transform: translateY(15px);
        transition: all 0.4s ease;
    }

    .nav-list.active li {
        opacity: 1;
        transform: translateY(0);
    }

    .nav-list.active li:nth-child(1) {
        transition-delay: 0.1s;
    }

    .nav-list.active li:nth-child(2) {
        transition-delay: 0.15s;
    }

    .nav-list.active li:nth-child(3) {
        transition-delay: 0.2s;
    }

    .nav-list.active li:nth-child(4) {
        transition-delay: 0.25s;
    }

    .nav-list.active li:nth-child(5) {
        transition-delay: 0.3s;
    }

    /* Ensure the parent nav doesn't hide anything or interfere */
    .header .nav {
        position: static;
        width: auto;
        height: auto;
        padding: 0;
        background: transparent;
        box-shadow: none;
    }

    .nav-list {
        gap: 20px;
    }

    .nav-link {
        font-size: 1.1rem;
        width: 100%;
        display: block;
        padding: 8px 0;
    }

    .btn-cta {
        margin-top: 15px;
        width: 100%;
        text-align: center;
    }

    /* Hamburger Menu */
    .hamburger {
        display: block;
        z-index: 1002;
        /* Position it correctly */
        position: relative;
        margin-left: 20px;
    }

    .hamburger.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 6px);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
        transform: translateX(-10px);
    }

    .hamburger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -6px);
    }

    /* Section Mobile Styling */
    .section-heading {
        font-size: 2rem;
    }

    .hero h1 {
        font-size: 2.2rem;
    }

    .hero p {
        font-size: 1rem;
        margin-bottom: 30px;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 15px;
        width: 100%;
    }

    .hero-buttons .btn {
        width: 100%;
        text-align: center;
    }

    .about-grid {
        grid-template-columns: 1fr;
    }

    .about-content {
        order: 2;
    }

    .about-image {
        order: 1;
        margin-bottom: 40px;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .feature-box {
        min-height: auto;
        padding: 30px 20px;
        /* Even more compact on mobile */
    }

    .process-steps {
        flex-direction: column;
        gap: 50px;
    }

    .step-connector {
        display: none;
    }

    .cta-content h2 {
        font-size: 2.2rem;
    }

    .footer-top {
        grid-template-columns: 1fr 1fr;
    }
}

/* Small Mobile Devices (max-width: 480px) */
@media (max-width: 480px) {
    .header-container {
        padding: 15px 20px;
    }

    .logo {
        font-size: 1.4rem;
    }

    .section-heading {
        font-size: 1.8rem;
    }

    .hero h1 {
        font-size: 1.8rem;
    }

    .footer-top {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        font-size: 0.8rem;
    }
}