/* 
   Theme: Sparklite Replica (SMS Adaptation)
   Font: Inter (Closest match to image)
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
    --primary-color: #E85018;
    /* Vibrant Orange from button */
    --primary-hover: #d14413;

    --bg-body: #F9FAFC;
    /* Very light cool gray */
    --surface: #FFFFFF;

    --text-main: #1C1E21;
    --text-muted: #65676B;
    --border-color: #E4E6EB;

    --sidebar-width: 260px;
    /* Reduced from 280px */
    --right-panel-width: 320px;
    --header-height: 60px;
    /* Reduced */

    /* Shadows from image (Soft, diffused) */
    --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.03);
    --radius-lg: 16px;
    --radius-md: 12px;

    --container-max-width: 100%;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    background-color: var(--bg-body);
}

/* Hide Scrollbar */
::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

html {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
}

* {
    box-sizing: border-box;
}



/* Fix for Buy Button */
.btn-buy {
    background-color: var(--primary-color) !important;
    color: #fff !important;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s;
    border: none;
}

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

/* Cleaned up orphan properties */
.btn-buy:hover {
    background-color: var(--primary-hover) !important;
    color: #fff !important;
}

.btn-primary {
    background-color: var(--primary-color) !important;
    color: #fff !important;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.2s;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

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

.btn-secondary {
    background-color: #fff;
    color: var(--text-main);
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.2s;
    border: 1px solid #ddd;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

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

.btn-outline {
    background-color: transparent;
    color: #fff;
    border: 1px solid #fff;
    padding: 10px 20px;
    /* Match btn-primary padding */
    border-radius: 8px;
    /* Match btn-primary border-radius */
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

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

.service-icon i {
    color: var(--primary-color);
    /* Ensure icons are orange by default if inline style fails */
    font-size: 2rem;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-body);
    color: var(--text-main);
    height: 100vh;
    /* App-like feel */
    display: flex;
}

/* --- Layout Grid --- */
/* --- Layout Grid --- */
.app-container {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.inner-container {
    width: 100%;
    margin: 0;
    padding: 0;
    max-width: 100%;
    background: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.main-content {
    flex: 1;
    width: 100%;
    max-width: 1400px;
    /* Wider content width matching reference */
    margin: 0 auto;
    padding: 20px;
}

/* Duplicate removed */

/* Fix Scrollbar: Ensure it is on the window, not an element */
/* Duplicates removed */

/* --- Section Titles (Stylish) --- */
.section-title {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 25px;
    /* Reduced margin */
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    padding-left: 15px;
}

.section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 24px;
    background: var(--primary-color);
    border-radius: 4px;
}

.section-title i {
    color: var(--primary-color);
}



/* --- Top Header --- */
.top-header {
    background: #F8F9FA;
    border-bottom: 1px solid #eee;
    padding: 8px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: var(--text-muted);
}

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

.top-link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    text-decoration: none;
    transition: 0.2s;
}

.top-link:hover {
    color: var(--primary-color);
}

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

/* --- Main Header --- */
/* --- Main Header --- */
.main-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    width: 100%;
    height: 90px;
    display: flex;
    justify-content: center;
    padding: 0 20px;
    transition: height 0.3s ease;
}

.main-header-content {
    width: 100%;
    max-width: 1400px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 30px;
    /* Increased gap */
    height: 100%;
}

.brand {
    display: flex;
    align-items: center;
    height: 100%;
    text-decoration: none;
    margin-right: 15px;
    /* Added spacing */
}

.brand img {
    height: 60px;
    /* Desktop Logo Size */
    width: auto;
    object-fit: contain;
    transition: height 0.3s ease;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 15px;
    height: 100%;
}

.main-content {
    width: 100%;
    padding: 30px 40px;
    /* Match Header Padding */
    margin: 0 auto;
    /* No max-width -> Full expansion to alignment */
}

/* --- Hero Section --- */
.hero-section {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 40px;
    height: 380px;
    /* Slightly taller for impact */
}

/* --- Header Elements --- */
.header-greeting-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 1px solid #eee;
    /* Optional visual separator */
    padding-left: 20px;
    margin-right: 25px;
    /* Added right spacing */
}

.greeting-text {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
    line-height: 1.2;
}

.typing-container {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.search-bar-container {
    flex: 1;
    max-width: 450px;
    margin: 0 20px;
}

/* --- Responsive Header --- */
@media (max-width: 992px) {
    .main-header {
        height: 70px;
        padding: 0 15px;
    }

    .brand img {
        height: 40px !important;
        /* Fixed Mobile Logo Size */
        width: auto !important;
        max-width: 150px;
    }

    .header-greeting-area,
    .search-bar-container {
        display: none;
    }

    .main-content {
        padding: 20px 10px;
        overflow-x: hidden;
        /* Prevent horizontal scroll */
    }

    .hero-section {
        grid-template-columns: 1fr;
        height: auto;
    }

    /* Fix Stats Bar on Mobile */
    .stats-bar {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
        height: auto;
        padding: 20px;
    }

    .stat-item {
        width: 45%;
        margin-bottom: 10px;
    }
}


.hero-text p {
    font-size: 1.2rem;
    color: var(--text-muted);
    margin-bottom: 30px;
    max-width: 500px;
}

.hero-image-container {
    flex: 1;
    display: flex;
    justify-content: center;
    position: relative;
}

.hero-3d-img {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.2));
    /* "On the floor" effect via transform/shadow */
    transform: perspective(1000px) rotateY(-10deg) rotateX(5deg);
    transition: transform 0.5s ease;
}

.hero-image-container:hover .hero-3d-img {
    transform: perspective(1000px) rotateY(-5deg) rotateX(2deg) translateY(-10px);
}

/* Floor Shadow */
.hero-image-container::after {
    content: '';
    position: absolute;
    bottom: -20px;
    width: 60%;
    height: 20px;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.2) 0%, transparent 70%);
    z-index: -1;
}

/* --- Animated Testimonials --- */
.testimonials-section {
    overflow: hidden;
    padding: 40px 0;
    position: relative;
}

.testimonials-track {
    display: flex;
    gap: 30px;
    width: max-content;
    animation: scrollTestimonials 40s linear infinite;
}

/* Duplicate track logic usually handled in HTML, but CSS animation works for infinite scroll */
@keyframes scrollTestimonials {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }

    /* Assumption: We will duplicate items in HTML to make it seamless */
}

/* Creative Avatars & Cards */
.testimonial-card {
    min-width: 350px;
    /* Fixed width for smooth scroll */
    flex-shrink: 0;
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    /* Soft premium shadow */
    border: 1px solid rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
}

.testimonial-card::before {
    content: '"';
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 6rem;
    color: rgba(232, 80, 24, 0.05);
    font-family: serif;
}

.user-avatar-creative {
    width: 60px;
    height: 60px;
    border-radius: 18px 4px 18px 18px;
    /* Creative Shape */
    object-fit: cover;
    margin-right: 15px;
    border: 2px solid white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* --- Layout Grid Tweaks --- */
/* Override previous grid settings */
.hero-section {
    /* Keep grid but ensure it fits container */
    margin: 0;
    /* Remove negative margins if any */
}

@media (max-width: 992px) {
    .app-container {
        display: block;
    }

    .hero-intro {
        flex-direction: column;
        text-align: center;
    }

    .hero-text {
        padding-right: 0;
        margin-bottom: 40px;
    }

    .hero-text p {
        margin: 0 auto 30px;
    }

    .hero-image-container::after {
        bottom: -10px;
        width: 80%;
    }
}


/* Removed Right Panel Styles/Display */
.right-panel {
    display: none;
}

/* --- Hero Section (Slider + Banners) --- */
.hero-section {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 40px;
    height: 340px;
}

.main-slider {
    background: #000;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    /* Placeholder for actual slider JS, static for now or CSS animation */
}

.slider-content {
    position: absolute;
    bottom: 40px;
    left: 40px;
    color: white;
    z-index: 2;
    max-width: 60%;
}

.slider-content h2 {
    font-size: 2rem;
    margin-bottom: 10px;
    font-weight: 800;
}

.slider-content p {
    font-size: 1rem;
    opacity: 0.9;
    margin-bottom: 20px;
}

.slider-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
}

.side-banners {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.banner-small {
    flex: 1;
    border-radius: 20px;
    background: #333;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 20px;
}

.banner-small img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    transition: transform 0.3s;
}

.banner-small:hover img {
    transform: scale(1.05);
}

.banner-text {
    position: relative;
    z-index: 1;
    color: white;
}

.banner-text h3 {
    font-size: 1.2rem;
    margin-bottom: 5px;
    font-weight: 700;
}

/* --- Why Us Section --- */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

.feature-box {
    text-align: center;
    padding: 30px;
    background: white;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    transition: 0.3s;
}

.feature-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.feature-icon {
    width: 60px;
    height: 60px;
    background: rgba(232, 80, 24, 0.1);
    color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 1.5rem;
}

/* --- Testimonials --- */
.testimonials-scroller {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 20px;
}

.testimonial-card {
    min-width: 300px;
    background: white;
    padding: 24px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
}

.user-rating {
    color: #FFC107;
    margin-bottom: 10px;
    font-size: 0.9rem;
}

/* View More Button */
.view-more-container {
    text-align: center;
    margin-top: 20px;
    grid-column: 1 / -1;
}

.btn-view-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--primary-color);
    padding: 10px 24px;
    border: 1px solid var(--border-color);
    border-radius: 30px;
    background: white;
    transition: 0.2s;
}

.btn-view-more:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* CTA Block */
.cta-block {
    background: linear-gradient(135deg, #1C1E21 0%, #2D3035 100%);
    border-radius: 24px;
    padding: 50px;
    text-align: center;
    color: white;
    margin-top: 40px;
}

.cta-block h2 {
    font-size: 2rem;
    margin-bottom: 10px;
}

.cta-block p {
    color: #aaa;
    margin-bottom: 30px;
}

/* Responsive */
@media (max-width: 992px) {
    .hero-section {
        grid-template-columns: 1fr;
        height: auto;
    }

    .main-slider {
        height: 300px;
    }

    .side-banners {
        flex-direction: row;
        height: 160px;
    }
}

@media (max-width: 768px) {
    .side-banners {
        flex-direction: column;
        height: auto;
    }

    .banner-small {
        height: 160px;
    }
}




.menu-group {
    margin-bottom: 30px;
}

.menu-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--text-muted);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
}

.nav-item:hover,
.nav-item.active {
    background-color: #F0F2F5;
    color: var(--text-main);
}

.nav-item.active {
    font-weight: 600;
}

.nav-item i {
    font-size: 1.2rem;
    width: 24px;
    text-align: center;
}

.badge {
    margin-left: auto;
    background: var(--primary-color);
    color: white;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 600;
}

.user-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    cursor: pointer;
    transition: 0.2s;
}

.user-list-item:hover {
    opacity: 0.8;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /* Image shows rounded squares or circles, usually circles for avatars */
    border-radius: 12px;
    /* Sparklite uses rounded squares mostly */
    object-fit: cover;
}

.user-name {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-main);
}

.bottom-actions {
    margin-top: auto;
}

/* --- Top Header --- */


/* Ensure header bg matches main content if we want seamless look, but reference has white header */

.search-bar-container {
    flex: 1;
    max-width: 600px;
    position: relative;
    margin-right: 20px;
}

.search-input {
    width: 100%;
    background: #F0F2F5;
    border: none;
    padding: 14px 20px 14px 50px;
    border-radius: var(--radius-lg);
    font-size: 0.95rem;
    color: var(--text-main);
    font-family: 'Inter', sans-serif;
}

.search-input:focus {
    outline: none;
    background: #e4e6eb;
}

.search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 1.1rem;
}



.icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    cursor: pointer;
    transition: 0.2s;
    background: transparent;
}

.icon-btn:hover {
    background: #F0F2F5;
}

.btn-primary {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: 0.2s;
}

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

/* --- Main Content Area --- */


/* Banner Profile */
.profile-banner-card {
    background: var(--surface);
    border-radius: 24px;
    /* Large radius from image */
    overflow: hidden;
    margin-bottom: 30px;
    box-shadow: var(--shadow-card);
}

.banner-img {
    height: 200px;
    width: 100%;
    object-fit: cover;
    background: #ddd;
}

.profile-info {
    padding: 0 40px 30px;
    position: relative;
}

.profile-pfp {
    width: 100px;
    height: 100px;
    border-radius: 24px;
    /* Squircle */
    border: 4px solid var(--surface);
    position: absolute;
    top: -50px;
    left: 40px;
    background: white;
}

.profile-meta {
    padding-left: 120px;
    /* Space for PFP */
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.profile-names h1 {
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fire-icon {
    color: var(--primary-color);
}

.profile-names p {
    color: var(--text-muted);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.stats-row {
    display: flex;
    gap: 24px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-num {
    font-weight: 700;
    font-size: 1.1rem;
}

.stat-label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Tabs */
.content-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
}

.tab {
    padding: 10px 24px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    background: var(--surface);
    color: var(--text-muted);
}

.tab.active {
    background: #E8EAED;
    /* Light grey active state or just darker text */
    color: var(--text-main);
}

/* Grid for Service Cards */
.platforms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    /* Fill width */
    gap: 15px;
    width: 100%;
    /* Ensure full width */
}

.content-card {
    background: var(--surface);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform 0.2s;
}

.content-card:hover {
    transform: translateY(-4px);
}

.card-img-top {
    height: 180px;
    width: 100%;
    background: #eee;
    position: relative;
}

.locked-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lock-badge {
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 500;
}

.premium-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--primary-color);
    color: white;
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
}

.card-body {
    padding: 20px;
}

.card-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
}

.card-text {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 16px;
}

.card-footer {
    display: flex;
    gap: 16px;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
}

.card-footer i {
    margin-right: 4px;
}


/* --- Right Panel --- */
.right-panel {
    grid-column: 3;
    grid-row: 2;
    padding: 40px 40px 40px 0;
    /* Padding rights itself */
    overflow-y: auto;
}

.panel-section {
    margin-bottom: 40px;
}

.panel-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.donate-box {
    background: var(--surface);
    border-radius: 20px;
    padding: 24px;
    box-shadow: var(--shadow-card);
}

.amount-input-group {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.amount-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: none;
    background: #1C1E21;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
}

.amount-display {
    flex: 1;
    background: #F0F2F5;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    font-weight: 600;
    font-size: 1.1rem;
}

.input-simple {
    width: 100%;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 12px;
    font-family: inherit;
}

.btn-block {
    width: 100%;
    display: block;
    text-align: center;
}

.tier-card {
    background: var(--surface);
    border-radius: 20px;
    padding: 24px;
    box-shadow: var(--shadow-card);
    margin-bottom: 20px;
}

.tier-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.tier-name {
    font-size: 1.2rem;
    font-weight: 800;
}

.tier-price {
    font-size: 1.2rem;
    font-weight: 500;
}

.tier-features {
    list-style: none;
    margin-bottom: 24px;
}

.tier-features li {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    position: relative;
    padding-left: 16px;
}

.tier-features li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--text-main);
}

.btn-light {
    background: #F0F2F5;
    color: var(--text-main);
    width: 100%;
    border: none;
    padding: 12px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
}

/* Global Refinements */
a {
    text-decoration: none !important;
    /* Force remove underlines */
}

.main-content {
    /* Increase spacing in main area */
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* Reduced gap */
    padding-bottom: 40px;
    /* Space at bottom */
}

/* Service Grid Adjustments */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    /* Slightly smaller min-width for better density control */
    gap: 24px;
    /* Increased gap */
}

.service-card {
    background: var(--surface);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    /* Subtle shadow */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(232, 80, 24, 0.12);
    /* Orange shadow hint */
    border-color: rgba(232, 80, 24, 0.3);
}

.service-icon {
    width: 70px;
    height: 70px;
    border-radius: 18px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    /* Soft icon shadow */
    border: 1px solid #f0f2f5;
    transition: transform 0.3s ease;
}

.service-card:hover .service-icon {
    transform: scale(1.05);
}

.service-info {
    width: 100%;
    margin-bottom: 16px;
}

.service-info h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--text-main);
}

.service-meta {
    font-size: 0.9rem;
    color: var(--text-muted);
    background: #F8F9FA;
    padding: 4px 10px;
    border-radius: 8px;
    display: inline-block;
}

.service-action {
    width: 100%;
}

/* --- Popular Platforms (Below Slider) --- */
.popular-platforms-section {
    margin-top: 30px;
    margin-bottom: 40px;
}

.platforms-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 15px;
    margin-bottom: 15px;
}

.platform-item {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: 0.3s;
    cursor: pointer;
    text-decoration: none;
    color: var(--text-main);
    height: 100px;
}

.platform-item:hover {
    border-color: var(--primary-color);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.platform-icon {
    font-size: 1.8rem;
    color: var(--text-main);
}

.platform-name {
    font-size: 0.8rem;
    font-weight: 600;
}

.more-platforms {
    grid-column: 1 / -1;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: 10px;
}

/* --- Turkey Notice --- */
.turkey-notice {
    font-size: 0.75rem;
    color: #999;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 5px;
}

/* --- Why SosyalSMS (Complex) --- */
.why-container {
    display: flex;
    background: #111;
    /* Dark theme from image */
    color: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.05);
    margin-top: 30px;
    margin-bottom: 30px;
    min-height: 400px;
}

.why-left {
    flex: 2;
    padding: 40px;
    position: relative;
    display: flex;
    flex-direction: column;
    background-size: cover;
    background-position: center;
    transition: background-image 0.5s ease;
}

/* Overlay for readability if bg image is used */
.why-left::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4));
    z-index: 1;
}

.why-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
}

.why-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.2;
}

.why-heading-small {
    color: var(--primary-color);
    font-weight: 700;
    margin-bottom: 10px;
    display: block;
}

.why-desc {
    color: #ccc;
    line-height: 1.6;
    margin-bottom: 30px;
    font-size: 1rem;
}

.why-tabs {
    display: flex;
    gap: 20px;
    margin-top: auto;
    position: relative;
    z-index: 2;
}

.why-tab {
    width: 120px;
    height: 80px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    border: 2px solid transparent;
    transition: 0.3s;
}

.why-tab.active {
    border-color: var(--primary-color);
}

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

.why-tab-icon {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}

.why-right {
    flex: 1;
    background: #151515;
    padding: 40px;
    border-left: 1px solid #333;
    display: flex;
    flex-direction: column;
}

.why-right-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 5px;
    color: var(--primary-color);
}

.why-right-subtitle {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 25px;
    color: white;
}

.campaign-card {
    background: #252525;
    border-radius: 16px;
    padding: 15px;
    /* Compact */
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    transition: 0.3s;
    cursor: pointer;
    text-decoration: none;
    color: white;
}

.campaign-card:hover {
    background: #333;
}

.campaign-img {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    object-fit: cover;
}

.campaign-info h4 {
    font-size: 0.95rem;
    margin-bottom: 5px;
}

.campaign-status {
    font-size: 0.75rem;
    color: #4CAF50;
    /* Green for active */
}

.campaign-status.ended {
    color: #F44336;
}

.campaign-arrow {
    margin-left: auto;
    background: var(--primary-color);
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: white;
}

margin-top: auto;
/* Push to bottom */
}

/* New Sections Styling */
.section-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 24px;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-title i {
    color: var(--primary-orange);
}

/* How It Works (Steps) */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
}

.step-card {
    background: #fff;
    padding: 30px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    border: 1px solid var(--border-color);
}

.step-number {
    width: 40px;
    height: 40px;
    background: var(--primary-orange);
    color: #fff;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 1.1rem;
}

.step-card h3 {
    font-size: 1.1rem;
    margin-bottom: 10px;
    color: var(--text-dark);
}

.step-card p {
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.5;
}

/* FAQ Section */
.faq-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.faq-item {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.faq-question {
    padding: 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: var(--text-dark);
    background: #fff;
    transition: background 0.2s;
}

.faq-question:hover {
    background: #fdfdfd;
}

.faq-answer {
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    background: #fafafa;
    color: var(--text-light);
    font-size: 0.95rem;
    line-height: 1.6;
}

.faq-item.active .faq-answer {
    padding: 20px;
    max-height: 200px;
    /* Approx height */
    border-top: 1px solid var(--border-color);
}

.faq-toggle {
    color: var(--primary-orange);
    transition: transform 0.3s;
}

.faq-item.active .faq-toggle {
    transform: rotate(180deg);
}

/* --- Advanced Header Styling --- */
/* --- Advanced Header Styling --- */
.main-header {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid var(--border-color);
    position: relative;
}

.main-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    /* Consistent padding */
    height: auto;
    min-height: 80px;
    max-width: 1400px;
    margin: 0 auto;
    margin-left: -1px;
    /* Micro adjustment */
    width: 100%;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.brand {
    text-decoration: none;
    color: var(--text-main);
    font-size: 1.4rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    gap: 15px;
}

/* Greeting Area */
.header-greeting-area {
    justify-content: center;
    margin-right: 20px;
    flex-shrink: 0;
    /* Prevent shrinking */
}

.greeting-text {
    font-size: 0.95rem;
    margin: 0;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 4px;
}

.typing-text {
    font-size: 0.8rem;
    color: var(--text-muted);
    min-width: 300px;
    /* Increased to fit full text */
    display: inline-block;
    height: 1.2em;
    /* Fixed height */
    overflow: hidden;
    white-space: nowrap;
    border-right: none !important;
    /* Forces removal of cursor */
    /* animation: typing 4s steps(50, end) infinite; -- Removed CSS animation, handled by JS */
}

.typing-container {
    height: 20px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
}

.typing-text {
    font-size: 0.85rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    border-right: 2px solid var(--primary-color);
    /* The cursor */
    animation: typing 4s steps(40, end), blink-caret .75s step-end infinite, fadeOut 1s 5s forwards;
    width: 0;
    animation-fill-mode: forwards;
}

/* Typing Animation Keyframes */
@keyframes typing {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

@keyframes blink-caret {

    from,
    to {
        border-color: transparent
    }

    50% {
        border-color: var(--primary-color)
    }
}

@keyframes fadeOut {
    to {
        opacity: 0;
        width: 0;
    }
}

/* Infinite loop hack: We can use JS to restart animation or CSS infinite alternate.
   For simplicity, let's just make it type purely in CSS with an infinite loop wrapper if needed.
   But pure CSS infinite typing text usually requires complex tricks. 
   Simplification: Just a simple pulse for now or keep it static if typing is hard without JS */

.typing-text {
    animation: typing 3.5s steps(40, end) infinite alternate;
    /* Infinite alternate makes it type and untype */
}


/* Search Bar Positioning */
.search-bar-container {
    flex: 1;
    max-width: 500px;
    margin: 0 20px;
    display: flex;
    /* Ensure flex for icon/input */
    align-items: center;
    background: #f5f5f5;
    padding: 0 15px;
    border-radius: 50px;
    border: 1px solid transparent;
}


/* --- Auth Buttons Group with "Curve" Effect --- */
.auth-buttons-group {
    display: flex;
    border-radius: 30px;
    /* Pill shape */
    background: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    padding: 4px;
    border: 1px solid var(--border-color);
}

.btn-auth-login {
    background: var(--primary-color);
    color: #fff;
    padding: 10px 24px;
    border-radius: 26px 0 26px 26px;
    /* Unique curve: TopLeft, TopRight(0), BottomRight, BottomLeft */
    /* Or maybe 26px */
    border-radius: 26px;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    position: relative;
    margin-right: -10px;
    /* Overlap effect */
    z-index: 2;
    box-shadow: 4px 0 10px rgba(232, 80, 24, 0.3);
    /* For "Curve" effect, we can use clip-path or just border-radius tricks */
    border-top-right-radius: 8px;
    border-bottom-right-radius: 26px;
    /* Smooth curve out */
}

.btn-auth-register {
    background: #fff;
    color: var(--text-main);
    padding: 10px 20px 10px 30px;
    /* Extra left padding for overlap */
    border-radius: 0 26px 26px 0;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}

.btn-auth-register:hover {
    color: var(--primary-color);
}


/* --- Countries Grid --- */
.countries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
}

.country-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: 0.2s;
}

.country-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.country-name {
    font-size: 0.9rem;
    font-weight: 500;
}

/* =========================================
   NEW SECTION STYLES (Stats, Testimonials, FAQ, Footer)
   ========================================= */

/* --- Stats Bar --- */
/* --- Stats Bar --- */
/* --- Stats Bar (Compact) --- */
/* --- Stats Bar (Compact) --- */
.stats-bar {
    background: linear-gradient(90deg, #E85018 0%, #FF7043 100%);
    border-radius: var(--radius-lg);
    padding: 20px 25px;
    /* Further Reduced */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 25px;
    color: #fff;
    box-shadow: 0 10px 20px rgba(232, 80, 24, 0.2);
}

.stat-item {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.stat-icon {
    font-size: 1.6rem;
    /* Smaller */
    color: #fff;
}

.stat-info h4 {
    font-size: 1.3rem;
    /* Smaller */
    font-weight: 800;
    margin: 0;
    color: #fff;
}

.stat-info p {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    font-size: 0.8rem;
    line-height: 1.2;
}

/* --- New Testimonials (Split) --- */
/* --- New Testimonials (Compact) --- */
.testimonials-section-new {
    display: grid;
    grid-template-columns: 280px 1fr;
    /* Smaller left side */
    gap: 25px;
    margin-bottom: 30px;
}

.testimonials-left {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    height: auto;
    min-height: 250px;
    /* Reduced height */
    background: linear-gradient(135deg, #FF7043 0%, #E85018 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    color: #fff;
}

.testimonials-left img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0.9;
}

.testimonials-left-content {
    position: relative;
    z-index: 1;
    background: #fff;
    padding: 20px;
    border-radius: 15px;
    color: #333;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.google-badge {
    display: flex;
    align-items: center;
    gap: 15px;
}

.google-icon-circle {
    width: 50px;
    height: 50px;
    background: var(--primary-color);
    /* Brand Orange */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    font-weight: bold;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr) !important;
    /* Forces 2 columns on desktop */
    gap: 20px;
    width: 100%;
}

.testimonial-card-new {
    background: #f8f9fa;
    padding: 25px;
    border-radius: 20px;
    border: 1px solid #eee;
}

.user-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    justify-content: space-between;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-profile img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.stars-new {
    background: var(--primary-color);
    color: #fff;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    display: flex;
    gap: 3px;
}

.testimonial-text {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
}

.btn-show-more {
    grid-column: 1 / -1;
    background: var(--primary-color);
    color: #fff;
    text-align: center;
    padding: 15px;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.3s;
}

.btn-show-more:hover {
    background: var(--primary-hover);
}

/* --- FAQ Accordion --- */
.faq-section-new {
    margin-bottom: 40px;
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.faq-item-new {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease;
}

.faq-header {
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    font-weight: 600;
    color: #333;
}

.faq-icon-wing {
    color: var(--primary-color);
    /* Orange wing */
    font-size: 1.2rem;
}

.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    background: #fafafa;
    color: #666;
    font-size: 0.95rem;
}

.faq-item-new.active .faq-content {
    max-height: 200px;
    padding: 0 20px 20px 55px;
    /* Indent to align with text */
}

@media (max-width: 992px) {
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Mobile Menu Styles --- */
/* --- Mobile Menu Styles --- */
.menu-toggle {
    display: none !important;
    /* Forces hidden on desktop */
    min-width: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
}

.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu-container {
    position: absolute;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100%;
    background: #fff;
    padding: 20px;
    display: flex;
    flex-direction: column;
    transition: right 0.3s cubic-bezier(0.77, 0.2, 0.05, 1.0);
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
}

.mobile-menu-overlay.active .mobile-menu-container {
    right: 0;
}

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

.mobile-menu-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #999;
    cursor: pointer;
}

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px;
}

.mobile-nav-link {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-main);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 8px;
    transition: background 0.2s;
}

.mobile-nav-link:hover {
    background: #f5f5f5;
    color: var(--primary-color);
}

.mobile-nav-link i {
    width: 25px;
    color: var(--primary-color);
}

.mobile-auth-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
}

.mobile-contact-info {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: space-around;
}



.auth-footer-new {
    margin-top: 30px;
    text-align: center;
    color: var(--text-muted);
}

.auth-footer-new a {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
}


@media (max-width: 992px) {

    /* --- 1. HEADER & NAVIGATION --- */
    .main-header {
        height: 70px !important;
        padding: 0 15px !important;
    }

    .main-header-content {
        padding: 0 !important;
        justify-content: space-between !important;
    }

    /* Logo Size (50px as requested) */
    .brand img {
        height: 50px !important;
        width: auto !important;
        max-width: 150px;
    }

    /* Hide Unwanted Elements */
    .header-greeting-area,
    .search-bar-container,
    .btn-notification-separate,
    .menu-toggle {
        display: none !important;
    }

    /* Header Right: Logo Left <-> Buttons Right */
    .header-right {
        display: flex !important;
        align-items: center !important;
        gap: 15px !important;
        margin-left: auto !important;
    }

    .auth-buttons-group {
        display: flex !important;
        gap: 10px !important;
    }

    /* Auth Buttons Styling (Desktop-like) */
    .btn-auth-login {
        background-color: transparent !important;
        color: var(--primary-color) !important;
        border: 1px solid var(--primary-color) !important;
        padding: 8px 16px !important;
        border-radius: 8px !important;
        font-weight: 600 !important;
        font-size: 0.85rem !important;
        text-decoration: none !important;
    }

    .btn-auth-register {
        background-color: var(--primary-color) !important;
        color: #fff !important;
        padding: 8px 16px !important;
        border-radius: 8px !important;
        font-weight: 600 !important;
        font-size: 0.85rem !important;
        text-decoration: none !important;
        border: 1px solid var(--primary-color) !important;
    }
    
    .top-header {
        display: none !important;
    }

    /* --- 2. GENERAL LAYOUT --- */
    .main-content {
        padding: 15px !important;
        overflow-x: hidden;
    }
    
    body, html {
        overflow-x: hidden;
    }

    /* --- 3. HERO SECTION --- */
    .hero-section {
        grid-template-columns: 1fr !important;
        height: auto !important;
        gap: 20px !important;
        margin-bottom: 20px !important;
    }

    .hero-slider, .slide {
        height: auto !important;
        min-height: 300px;
    }

    .slider-content {
        top: auto !important;
        bottom: 20px !important;
        left: 20px !important;
        transform: none !important;
        padding: 0 !important;
        max-width: 90% !important;
    }

    .slider-content h2 {
        font-size: 1.4rem !important;
        margin-bottom: 8px !important;
    }

    .slider-content p {
        font-size: 0.85rem !important;
        display: block !important;
        margin-bottom: 12px !important;
        line-height: 1.4;
    }

    .btn-buy {
        padding: 8px 16px !important;
        font-size: 0.85rem !important;
    }

    .side-banners {
        flex-direction: column !important;
        height: auto !important;
    }

    .banner-small {
        height: 140px !important;
    }

    /* --- 4. PLATFORMS (3 Columns) --- */
    .platforms-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }

    .platform-item {
        flex-direction: column !important;
        text-align: center !important;
        padding: 10px 5px !important;
        justify-content: center !important;
        font-size: 0.75rem !important;
    }

    .platform-name {
        margin-top: 5px;
    }

    .more-platforms {
        grid-column: 1 / -1 !important;
        text-align: center !important;
        margin-top: 10px !important;
        width: 100% !important;
    }

    /* --- 5. STATS BAR --- */
    .stats-bar {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        padding: 15px 10px !important;
        height: auto !important;
        justify-content: space-between !important;
    }

    .stat-item {
        flex: 0 0 48% !important;
        width: 48% !important;
        margin-bottom: 5px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    
    .stat-icon {
        margin-bottom: 5px !important;
        font-size: 1.5rem !important;
        margin-right: 0 !important;
    }

    .stat-info h4 {
        font-size: 1rem !important;
        margin: 0 !important;
    }

    .stat-info p {
        font-size: 0.75rem !important;
        margin: 0 !important;
    }

    /* --- 6. WHY US (Responsive) --- */
    .why-container {
        display: flex !important;
        flex-direction: column !important;
    }

    .why-left {
        width: 100% !important;
        padding: 30px 20px !important;
        margin-bottom: 20px;
        background-size: cover;
        height: auto !important;
    }

    .why-title {
        font-size: 1.8rem !important;
        margin-bottom: 15px !important;
    }
    
    .why-heading-small {
        font-size: 0.9rem !important;
    }

    .why-desc {
        font-size: 0.9rem !important;
        margin-bottom: 20px !important;
    }
    
    .why-right {
        width: 100% !important;
    }

    /* --- 7. TESTIMONIALS (2 Cols + Fixed Stars) --- */
    .testimonials-section-new {
        display: flex !important;
        flex-direction: column !important;
    }
    
    .testimonials-left {
        width: 100% !important;
        margin-bottom: 20px !important;
    }

    .testimonials-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        width: 100% !important;
        gap: 10px !important;
        overflow: visible !important;
    }

    .testimonial-card-new {
        width: 100% !important;
        min-width: 0 !important;
        padding: 12px 10px !important;
        box-sizing: border-box !important;
    }

    .testimonial-card-new p {
        font-size: 0.75rem !important;
        line-height: 1.4;
    }
    
    /* Header inside card */
    .user-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 8px !important;
        width: 100% !important;
    }
    
    .user-profile {
        display: flex !important;
        align-items: center !important;
        overflow: hidden;
    }

    .user-profile img {
        width: 35px !important;
        height: 35px !important;
        flex-shrink: 0 !important;
    }
    
    .user-profile h5 {
        font-size: 0.8rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 80px;
    }

    .stars-new {
        flex-shrink: 0 !important;
        margin-left: auto !important; 
        white-space: nowrap !important;
        display: block !important;
    }
    
    /* FAQ */
    .faq-grid {
        grid-template-columns: 1fr !important;
    }
    
    .faq-question {
        font-size: 0.9rem !important;
        padding: 12px !important;
    }
}
/* End of Final CSS */