/* ==========================================================================
   Home Page Styles
   أنماط الصفحة الرئيسية - الصرح الشامخ
   ========================================================================== */

/* Hero Banners */
.hero-banners {
    position: relative;
    height: 75vh;
    min-height: 500px;
    max-height: 800px;
    overflow: hidden;
}

.hero-slider {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
}

.hero-slide__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 8s ease;
}

.hero-slide.active .hero-slide__bg {
    transform: scale(1.05);
}

.hero-slide__overlay {
    position: absolute;
    inset: 0;
}

.hero-slide--blue .hero-slide__overlay {
    background: linear-gradient(135deg, rgba(15, 94, 168, 0.85), rgba(47, 52, 71, 0.9));
}

.hero-slide--orange .hero-slide__overlay {
    background: linear-gradient(135deg, rgba(212, 164, 55, 0.85), rgba(47, 52, 71, 0.9));
}

.hero-slide--green .hero-slide__overlay {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.85), rgba(47, 52, 71, 0.9));
}

.hero-slide__content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: var(--space-8) 0;
    max-width: 800px;
    margin: 0 auto;
}

.hero-slide__subtitle {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: var(--space-4);
    backdrop-filter: blur(10px);
}

.hero-slide__title {
    color: white;
    font-size: var(--text-5xl);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: var(--space-4);
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}

.hero-slide__description {
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--text-xl);
    line-height: 1.7;
    margin-bottom: var(--space-8);
}

/* Slider Navigation */
.hero-slider__nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 var(--space-4);
    pointer-events: none;
    z-index: 10;
}

.hero-slider__prev,
.hero-slider__next {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    backdrop-filter: blur(10px);
    transition: var(--transition-base);
}

.hero-slider__prev:hover,
.hero-slider__next:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

/* Slider Dots */
.hero-slider__dots {
    position: absolute;
    bottom: var(--space-8);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: var(--space-3);
    z-index: 10;
}

.hero-slider__dot {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.4);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition-base);
}

.hero-slider__dot.active,
.hero-slider__dot:hover {
    background: white;
    transform: scale(1.2);
}

/* Hero Intro Section */
/* Hero Intro Section */
.hero-intro {
    background: linear-gradient(180deg, var(--bg-secondary), var(--bg-primary));
    padding-top: var(--space-16);
    padding-bottom: var(--space-8);
    /* Reduced bottom padding */
    text-align: center;
}

.hero-intro__company {
    color: var(--primary-600);
    font-size: var(--text-4xl);
    font-weight: 800;
    margin-bottom: var(--space-4);
    line-height: 1.2;
}

.hero-intro__title {
    font-size: var(--text-2xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-4);
}

.hero-intro__description {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    max-width: 700px;
    margin: 0 auto var(--space-8);
    /* Reduced margin */
}

/* Agent Card Styles - Compact Premium Design */
.hero-intro__agent-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--space-10);
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    padding: var(--space-8) var(--space-12);
    border-radius: var(--radius-xl);
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.08),
        0 1px 3px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    border: 2px solid var(--neutral-100);
    width: fit-content;
    max-width: 800px;
    margin: 0 auto;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.hero-intro__agent-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-gold), #f59e0b, var(--accent-gold));
}

.hero-intro__agent-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 15px 40px rgba(30, 58, 138, 0.12),
        0 1px 3px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    border-color: var(--primary-200);
}

.agent-card__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    text-align: center;
}

.agent-card__badge {
    background: linear-gradient(135deg, #d4af37, #f59e0b, #d4af37);
    background-size: 200% auto;
    animation: shimmer 3s linear infinite;
    color: white;
    padding: var(--space-2) var(--space-6);
    border-radius: var(--radius-full);
    font-size: var(--text-base);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow:
        0 2px 8px rgba(212, 175, 55, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

@keyframes shimmer {
    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 200% center;
    }
}

.agent-card__name {
    font-size: var(--text-2xl);
    color: var(--primary-800);
    font-weight: 700;
    margin: 0;
    line-height: 1.4;
}

.agent-card__logo-wrapper {
    height: 120px;
    width: 120px;
    min-width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3);
    border-radius: 50%;
    background: white;
    border: 2px solid var(--neutral-100);
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.02),
        0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
    overflow: hidden;
}

.hero-intro__agent-card:hover .agent-card__logo-wrapper {
    border-color: var(--primary-200);
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.02),
        0 4px 12px rgba(30, 58, 138, 0.08);
}

.agent-card__logo {
    max-height: 100%;
    max-width: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-intro__agent-card:hover .agent-card__logo {
    transform: scale(1.05);
}

/* Mobile responsive for agent card */
@media (max-width: 600px) {
    .hero-intro__agent-card {
        flex-direction: column;
        padding: var(--space-5);
        gap: var(--space-4);
    }

    .agent-card__name {
        font-size: var(--text-lg);
    }

    .agent-card__logo-wrapper {
        height: 70px;
        width: 70px;
        min-width: 70px;
    }
}

/* Service Categories Section */
.service-categories-section {
    background: var(--bg-primary);
}

.service-categories-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.category-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px -12px rgba(15, 94, 168, 0.25);
}

.category-card__link {
    display: block;
    position: relative;
}

.category-card__image {
    position: relative;
    width: 100%;
    /* Remove fixed height and use aspect-ratio for square shape */
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.category-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-card:hover .category-card__image img {
    transform: scale(1.08);
}

/* Removed overlay gradient since we use a solid background for text now */
.category-card__image::after {
    display: none;
}

.category-card__body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    z-index: 2;
    text-align: center;
    /* Center align for better look with full width */
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    /* Match button background */
    opacity: 0.95;
    /* Slight transparency */
    transition: all 0.3s ease;
}

.category-card:hover .category-card__body {
    opacity: 1;
    padding-bottom: 2rem;
    /* Slight expansion on hover */
}

.category-card__title {
    font-size: 1.8rem;
    /* Increased size */
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.25rem;
    text-shadow: none;
    /* Removed shadow as background is dark */
    transform: translateY(0);
    transition: transform 0.3s ease;
}

.category-card:hover .category-card__title {
    transform: translateY(-2px);
}

.category-card__title .title-ar {
    display: block;
    font-size: 2rem;
    /* Significantly larger */
    font-weight: 900;
    color: #fff;
    margin-bottom: 0.25rem;
}

.category-card__title .title-en {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 0;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.category-card__description {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    margin-bottom: 1rem;
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: right;
}

.category-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.6rem 1.25rem;
    background: var(--primary-500);
    border-radius: 100px;
    transition: all 0.3s ease;
}

.category-card:hover .category-card__cta {
    background: #fff;
    color: var(--primary-600);
    gap: 0.75rem;
}

/* Responsive */
@media (max-width: 768px) {
    .service-categories-grid {
        grid-template-columns: 1fr;
    }

    .category-card__image {
        /* height: 280px; - Removed to maintain square aspect ratio */
    }

    .category-card__title {
        font-size: 1.3rem;
    }

    .category-card__title .title-ar {
        font-size: 1.3rem;
    }

    .category-card__body {
        padding: 1.5rem;
    }
}

/* Projects Section */
.projects-section {
    background: var(--bg-secondary);
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.project-card {
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: var(--transition-base);
    background: var(--bg-primary);
    /* Ensure background for body */
    display: flex;
    flex-direction: column;
}

.project-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.project-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.project-card__image {
    position: relative;
    height: 240px;
    /* Adjusted height */
    overflow: hidden;
    flex-shrink: 0;
}

.project-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-slow);
}

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

.project-card__body {
    padding: var(--space-6);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.project-card__category {
    display: inline-block;
    background: var(--primary-50);
    color: var(--primary-600);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    margin-bottom: var(--space-3);
}

.project-card__body h3 {
    font-size: var(--text-xl);
    margin-bottom: var(--space-2);
    color: var(--text-primary);
    transition: var(--transition-base);
}

.project-card:hover .project-card__body h3 {
    color: var(--primary-500);
}

.project-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
}

.project-card__meta svg {
    width: 14px;
    height: 14px;
}

/* Partners Section */
.partners-section {
    background: var(--bg-primary);
    overflow: hidden;
    /* Ensure no overflow from marquee */
}

/* Grid Layout (<= 4 items) */
.partners-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-12);
}

/* Marquee Layout (> 4 items) */
.partners-marquee-wrapper {
    width: 100%;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-track {
    display: flex;
    gap: var(--space-12);
    width: max-content;
    animation: marquee 30s linear infinite;
    padding: var(--space-4) 0;
}

.partners-marquee-wrapper:hover .marquee-track {
    animation-play-state: paused;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(50%);
        /* Moves right because of RTL? No, usually translation direction depends on expectation. */
        /* For RTL (Direction: rtl on body), translation logic might be tricky. 
           If body is RTL, regular flow is Right to Left. 
           We want items to move. Usually marquee moves items from one side to another.
           Let's try standard negative translateX for "moving left" or positive for "moving right".
           
           If we have [Item1][Item2][Item3]...
           We want them to scroll continuously.
           If we duplicate content: [1 2 3 4 5] [1 2 3 4 5]
           We translate from 0 to -50% (if LTR) or 0 to 50% (if RTL).
        */
        transform: translateX(50%);
        /* For RTL, moving positive X often pushes content to the Left visually? Wait. 
        RTL origin is top-right. 
        If I translate X 50%, it moves TO THE RIGHT relative to origin?
        Let's assume standard behavior: we want it to scroll.
        If it's infinite loop with duplicated content, we usually translate by -50% of the total track width (if LTR) to show the second half.
        
        Let's try translation. If it moves the wrong way, we flip sign.
        Code assumes items are laid out horizontally. css 'direction: rtl' makes flex-start on the right.
        So content [1 2 3 4 5] [1 2 3 4 5] starts aligned to the right.
        To reveal the left side (which is "next" in RTL reading?), we might want to move it to the right? 
        Actually, usually "Ticker" moves opposite to reading direction or with it?
        Let's assume we want continuous movement. 
        */
        transform: translateX(50%);
    }
}

.partner-item {
    flex: 0 0 auto;
    padding: var(--space-4);
    opacity: 1;
    transition: var(--transition-base);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    text-align: center;
}

.partner-item:hover {
    transform: scale(1.05);
}

.partner-item img {
    max-height: 120px;
    max-width: 200px;
    width: auto;
    object-fit: contain;
}

.partner-name {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: var(--text-base);
    line-height: 1.3;
    max-width: 180px;
}

/* News Section */
.news-section {
    background: var(--bg-secondary);
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
}

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

.news-card {
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: var(--transition-base);
}

.news-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.news-card__image {
    display: block;
    height: 200px;
    overflow: hidden;
}

.news-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-slow);
}

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

.news-card__body {
    padding: var(--space-6);
}

.news-card__date {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-muted);
    font-size: var(--text-sm);
    margin-bottom: var(--space-3);
}

.news-card__title {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-3);
    transition: var(--transition-base);
}

.news-card:hover .news-card__title {
    color: var(--primary-500);
}

.news-card__excerpt {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.7;
    margin-bottom: var(--space-4);
}

.news-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--primary-500);
    font-weight: 600;
    transition: var(--transition-base);
}

.news-card:hover .news-card__link {
    gap: var(--space-3);
}

/* About Section */
.about-section {
    background: var(--bg-primary);
}

.about-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    /* Video side (image) larger */
    gap: var(--space-8);
    /* Reduced gap to avail more space */
    align-items: center;
}

.about-video-wrapper {
    position: relative;
    padding-bottom: 65%;
    /* Taller than 16:9 (56.25%) to satisfy "Height" request */
    /* 16:9 would be 56.25% */
    height: 0;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.about-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.about-title {
    font-size: var(--text-3xl);
    font-weight: 800;
    margin-bottom: var(--space-4);
    background: linear-gradient(135deg, var(--primary-600), var(--secondary-500));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.about-lead {
    font-size: var(--text-xl);
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: var(--space-4);
}

.about-text {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: var(--space-6);
}

.about-features {
    list-style: none;
    margin: 0 0 var(--space-8);
    padding: 0;
}

.about-features li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    color: var(--text-secondary);
}

.about-features li svg {
    color: var(--success-500);
    flex-shrink: 0;
}

.about-image {
    position: relative;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.about-image img {
    width: 100%;
    height: auto;
}

.about-image::before {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 100%;
    height: 100%;
    border: 3px solid var(--primary-500);
    border-radius: var(--radius-2xl);
    z-index: -1;
}

/* Stats Section */
.stats-section {
    background: linear-gradient(135deg, var(--primary-600), var(--secondary-600));
    position: relative;
    overflow: hidden;
}

.stats-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
    position: relative;
    z-index: 1;
}

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

.stat-icon {
    color: var(--accent-gold);
    margin-bottom: var(--space-4);
}

.stat-number {
    display: block;
    font-size: var(--text-5xl);
    font-weight: 800;
    color: white;
    margin-bottom: var(--space-2);
    position: relative;
    z-index: 5;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.stat-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--text-lg);
}

/* CTA Section */
.cta-section {
    position: relative;
    padding: var(--space-20) 0;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-700));
    overflow: hidden;
}

.cta__bg {
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.cta-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.cta-content h2 {
    color: white;
    font-size: var(--text-4xl);
    font-weight: 800;
    margin-bottom: var(--space-4);
}

.cta-content p {
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--text-xl);
    margin-bottom: var(--space-8);
}

.cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
}

/* Responsive */
@media (max-width: 1024px) {
    .hero-slide__title {
        font-size: var(--text-4xl);
    }

    .service-categories-grid,
    .projects-grid,
    .news-grid--three {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .about-image {
        order: -1;
    }
}

@media (max-width: 768px) {
    .hero-banners {
        height: 60vh;
        min-height: 400px;
    }

    .hero-slide__title {
        font-size: var(--text-3xl);
    }

    .hero-slide__description {
        font-size: var(--text-base);
    }

    .hero-slider__nav {
        display: none;
    }

    .service-categories-grid,
    .projects-grid,
    .news-grid,
    .news-grid--three {
        grid-template-columns: 1fr;
    }

    .cta-content h2 {
        font-size: var(--text-2xl);
    }

    .cta-actions {
        flex-direction: column;
    }

    .cta-actions .btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .hero-intro__title {
        font-size: var(--text-2xl);
    }

    .stat-number {
        font-size: var(--text-4xl);
    }
}