/* --- Scoped Virtual World Header --- */
.vw-smart-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 25px 0;
    z-index: 9999;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
}

/* Scrolled State - Isolated with vw- prefix */
.vw-smart-header.vw-scrolled {
    padding: 12px 0;
    background: rgba(12, 27, 42, 0.9);
    /* Theme Navy */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 2px solid #4cd964;
    /* Theme Green */
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
}

/* Specific Link Styling to prevent global conflicts */
.vw-smart-header .vw-nav-link {
    color: #ffffff !important;
    font-weight: 600;
    text-decoration: none;
    margin: 0 15px;
    transition: 0.3s;
}

.vw-smart-header .vw-nav-link:hover {
    color: #4cd964 !important;
    /* Theme Glow */
}



/* ===== 1. DESKTOP NAVBAR CONTAINER ===== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 85px;
    padding: 0 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(12, 27, 42, 0.7);
    /* Glassmorphism effect */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    z-index: 2000;
    transition: all 0.4s ease-in-out;
}

/* Scrolled State Logic */
.navbar.scrolled {
    height: 70px;
    background: rgba(12, 27, 42, 0.95);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}


/* ===== LOGO ANIMATIONS ===== */

/* 1. The Slide-In (Page Load) */
@keyframes logoEntrance {
    0% {
        opacity: 0;
        transform: translateX(-40px);
    }

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

/* 2. The Neon Heartbeat (Pulse) */
@keyframes neonHeartbeat {

    0%,
    100% {
        filter: drop-shadow(0 0 5px rgba(76, 217, 100, 0.3));
        transform: scale(1);
    }

    50% {
        filter: drop-shadow(0 0 15px rgba(76, 217, 100, 0.8));
        transform: scale(1.03);
        /* Subtle "thump" zoom */
    }
}

/* Logo Container */
.navbar .logo {
    animation: logoEntrance 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
    will-change: transform, opacity;
}

/* The Logo Image */
.navbar .logo img {
    height: 50px;
    width: auto;
    display: block;
    transition: all 0.3s ease;

    /* APPLY HEARTBEAT: 
       '4s' makes it slow and breathing.
       'infinite' keeps it going forever. */
    animation: neonHeartbeat 4s ease-in-out infinite;
}

/* Hover: Speed up the "heartbeat" or keep the glow solid */
.navbar .logo img:hover {
    animation-play-state: paused;
    /* Optional: freeze pulse on hover */
    filter: drop-shadow(0 0 20px rgba(76, 217, 100, 0.9));
    cursor: pointer;
}

/* Adaptive Sizing on Scroll */
.navbar.scrolled .logo img {
    height: 40px;
}

/* ===== 2. DESKTOP NAVIGATION LINKS ===== */
.desktop-menu {
    display: flex;
    align-items: center;
    gap: 10px;
}

.desktop-menu a {
    color: #e2e8f0;
    margin-left: 20px;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.3s ease;
    position: relative;
}

/* Elegant Underline Hover Effect */
.desktop-menu a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 12px;
    background-color: #4cd964;
    transition: width 0.3s ease;
}

.desktop-menu a:hover {
    color: #4cd964;
}

.desktop-menu a:hover::after {
    width: calc(100% - 24px);
}

/* ===== 3. ADMIN & LOGOUT BUTTONS ===== */
.divider {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.15);
    margin: 0 15px 0 25px;
}

.nav-admin-btn {
    font-weight: 600;
    border: 1px solid transparent;
}

.nav-admin-btn.dashboard {
    color: #4cd964;
    background: rgba(76, 217, 100, 0.1);
}

.nav-admin-btn.dashboard:hover {
    background: #4cd964;
    color: #000;
}

.logout-btn {
    background: transparent;
    border: 1px solid rgba(255, 77, 77, 0.5);
    color: #ff4d4d;
    padding: 7px 18px;
    border-radius: 8px;
    margin-left: 15px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.logout-btn:hover {
    background: #ff4d4d;
    color: white;
    box-shadow: 0 4px 15px rgba(255, 77, 77, 0.3);
}

/* ===== 4. HIDE MOBILE ELEMENTS ON DESKTOP ===== */
.hamburger,
.mobile-menu {
    display: none;
}



/* ============================================================
   DESKTOP-ONLY IDENTITY (min-width: 769px)
   ============================================================ */

/* 1. NAVBAR & MAIN CONTAINER */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 85px;
    /* Taller for desktop professionalism */
    padding: 0 80px;
    background: rgba(12, 27, 42, 0.8);
    backdrop-filter: blur(15px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 2000;
}

.desktop-menu {
    display: flex;
    gap: 30px;
}

.desktop-menu a {
    color: #cfd9e0;
    text-decoration: none;
    font-weight: 500;
}

/* Clear the fixed navbar */
.main-content {
    padding-top: 100px;
}



/* ===Hero Section======================================== */

/* =========================================
   2. HERO SECTION
   ========================================= */
.hero {
    min-height: 85vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.hero-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 80px;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

.hero-text h1 {
    font-size: 56px;
    line-height: 1.1;
    font-weight: 800;
}

.hero-text span {
    color: #4cd964;
    text-shadow: 0 0 15px rgba(76, 217, 100, 0.3);
}

.hero-text p {
    margin: 25px 0;
    max-width: 520px;
    color: #cfd9e0;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* =========================================
   3. PREMIUM BUTTONS
   ========================================= */
.btn {
    display: inline-block;
    padding: 16px 36px;
    background: linear-gradient(135deg, #4cd964, #2ecc71);
    color: #0c1b2a;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.5px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 20px rgba(76, 217, 100, 0.2);
}

.btn:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 35px rgba(76, 217, 100, 0.4);
    color: #000;
}

/* =========================================
   4. TECH VISUALS (CONFLICT-FREE)
   ========================================= */
.hero-visual {
    position: relative;
    width: 450px;
    height: 400px;
    perspective: 1000px;
}

.tech-card {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: bold;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);

    /* Apply float animation */
    animation: float 5s ease-in-out infinite;
    transition: all 0.5s ease;
}

/* Position fixes - removed 'transform' from individual classes to avoid animation overwrites */
.wordpress {
    border: 1px solid rgba(0, 136, 204, 0.4);
    color: #0088cc;
    top: 0;
    left: 0;
    animation-delay: 0s;
}

.laravel {
    border: 1px solid rgba(255, 45, 85, 0.4);
    color: #ff2d55;
    bottom: 20px;
    left: 40px;
    animation-delay: 1.5s;
}

.nodejs {
    border: 1px solid rgba(51, 153, 51, 0.4);
    color: #339933;
    /* Center positioning without using transform: translate */
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    animation-delay: 3s;
}

.nextjs {
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    top: 10px;
    right: 0;
    font-size: 16px;
    animation-delay: 0.8s;
}

.vuejs {
    border: 1px solid rgba(66, 184, 131, 0.4);
    color: #42b883;
    bottom: 60px;
    right: -20px;
    animation-delay: 2.2s;
}

.tech-card:hover {
    /* When hovering, we pause or override slightly, but keeping it simple */
    background: rgba(255, 255, 255, 0.1);
    border-color: #4cd964;
    box-shadow: 0 0 30px rgba(76, 217, 100, 0.3);
    z-index: 10;
}

/* =========================================
   5. SHARED ANIMATIONS
   ========================================= */
@keyframes float {

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

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

/* Scroll Animations */
.animate {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animate.appear {
    opacity: 1;
    transform: translateY(0);
}

/* Mobile Toggle */
.m-hero {
    display: none;
}








/* ===About Us =================================== */

.about-section {
    background: #0a1724;
    /* Matches the curve fill color */
    padding: 100px 80px;
    color: white;
}

.about-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 60px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.sub-title {
    color: #4cd964;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bold;
    font-size: 14px;
}

.about-text h2 {
    font-size: 42px;
    margin: 15px 0;
}

.about-text h2 span {
    color: #4cd964;
}

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

.about-features li {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #cfd9e0;
}

.about-features i {
    color: #4cd964;
}

.about-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.stat-card {
    background: rgba(255, 255, 255, 0.05);
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: 0.3s;
}

.stat-card:hover {
    border-color: #4cd964;
    transform: scale(1.05);
}

.stat-card h3 {
    font-size: 36px;
    color: #4cd964;
    margin-bottom: 5px;
}

.stat-card h3 {
    font-variant-numeric: tabular-nums;
    /* Prevents characters from jumping */
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 2px;
}


/* Animation Base State */
.animate {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* Smooth professional curve */
    visibility: hidden;
}

/* When the element enters the screen */
.animate.show {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

/* Optional: Stagger the stat cards inside the about-stats container */
.about-stats.show .stat-card {
    animation: slideInUp 0.6s ease forwards;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* Simple Entrance Animation for the .animate class */
.animate {
    animation: simpleFadeUp 1.2s ease-out forwards;
}

@keyframes simpleFadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

.stat-card h3 {
    display: inline-block;
    margin: 0;
}

.stat-card span {
    font-size: 36px;
    /* Match your h3 size */
    color: #4cd964;
    font-weight: bold;
}


@media (max-width: 768px) {
    .about-section {
        padding: 60px 20px;
        /* Reduced padding for mobile screens */
    }

    .about-text h2 {
        font-size: 32px;
        /* Slightly smaller heading for mobile */
        text-align: center;
    }

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

    .about-features li {
        justify-content: flex-start;
        /* Keeps icons aligned left even if text centers */
        font-size: 15px;
    }

    .stat-card {
        padding: 20px;
        /* Compact cards for mobile */
    }

    .stat-card h3 {
        font-size: 30px;
        /* Smaller numbers so they don't wrap */
    }
}


/* ====Team Members======================================== */

.team-section {
    padding: 120px 0;
    background: #0c1b2a;
}

/* Focused Header Styling */
.section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px auto;
}

.sub-title {
    color: #4cd964;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 14px;
    display: block;
    margin-bottom: 10px;
}

.main-title {
    font-size: 48px;
    color: #fff;
    margin-bottom: 20px;
}

.main-title span {
    color: #4cd964;
}

.title-line {
    width: 60px;
    height: 3px;
    background: #4cd964;
    margin: 0 auto 20px auto;
    border-radius: 2px;
}

.description {
    color: #cfd9e0;
    font-size: 18px;
    line-height: 1.6;
}

/* Professional Team Cards */
.team-grid {
    display: grid;
    /* Force exactly 3 columns of equal width */
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    /* Space between cards */
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* Ensure cards don't shrink too much */
.team-card {
    width: 100%;
    min-width: 0;
    /* Prevents grid blowout */
    border-radius: 30px;
    /* Adjust this number: higher = more round */
    overflow: hidden;
    /* Important: this crops the image to the round corners */
}

.member-image-wrapper {
    position: relative;
    height: 350px;
    overflow: hidden;
    border-radius: 30px 30px 0 0;
}

.member-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(20%);
    /* Modern professional look */
    transition: 0.5s;
}

.member-overlay {
    position: absolute;
    inset: 0;
    background: rgba(12, 27, 42, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 0.4s;
}

.social-icons {
    display: flex;
    gap: 15px;
    transform: translateY(20px);
    transition: 0.4s;
}

.social-icons a {
    width: 40px;
    height: 40px;
    background: #4cd964;
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: 0.3s;
}

.social-icons a:hover {
    background: #34c759;
    box-shadow: 0 4px 15px rgba(52, 199, 89, 0.3);
}

.team-card:hover .member-overlay {
    opacity: 1;
}

.team-card:hover .social-icons {
    transform: translateY(0);
}

.team-card:hover img {
    filter: grayscale(0%);
    transform: scale(1.05);
}

.member-details {
    padding: 25px;
    text-align: center;
}

.member-details h3 {
    font-size: 22px;
    color: #fff;
    margin-bottom: 5px;
}

.designation {
    display: inline-block;
    background: rgba(76, 217, 100, 0.1);
    /* Very light green tint */
    color: #4cd964;
    padding: 4px 12px;
    border-radius: 50px;
    /* Capsule shape */
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 10px;
}

.team-card:hover {
    transform: translateY(-10px);
    border-color: #4cd964;
    box-shadow: 0 10px 30px rgba(76, 217, 100, 0.15);
    /* Soft green glow */
}

.member-image-wrapper img {
    filter: grayscale(100%);
    /* Start black & white for a "cool" look */
    transition: 0.5s ease;
}

.team-card:hover img {
    filter: grayscale(0%);
    /* Bring color back on hover */
    transform: scale(1.08);
}




/* ====FAQ Section======================================== */

.faq-wrapper {
    max-width: 850px;
    margin: 0 auto;
    padding: 20px;
}

.faq-card {
    background: rgba(255, 255, 255, 0.03);
    /* Frosted Glass */
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    /* Matching your Team cards */
    margin-bottom: 20px;
    transition: all 0.4s ease;
    overflow: hidden;
}

.faq-header {
    padding: 25px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.faq-header h3 {
    color: #fff;
    font-size: 18px;
    margin: 0;
}

.faq-icon-box {
    color: #4cd964;
    /* Your theme green */
    font-size: 18px;
    transition: 0.4s;
}

.faq-content {
    max-height: 0;
    /* Hidden by default */
    overflow: hidden;
    transition: all 0.4s ease;
    padding: 0 30px;
}

.faq-content p {
    color: #cfd9e0;
    line-height: 1.6;
    padding-bottom: 25px;
}

/* --- THE NEON GLOW EFFECT --- */
.faq-card:hover,
.faq-card.active {
    border-color: #4cd964;
    box-shadow: 0 0 20px rgba(76, 217, 100, 0.15);
    background: rgba(255, 255, 255, 0.05);
}

.faq-card.active .faq-content {
    max-height: 200px;
    /* Shows content when active */
}

.faq-card.active .faq-icon-box {
    transform: rotate(45deg);
    /* Plus becomes an X */
}

/* Add space above the FAQ section */
.faq-section {
    padding-top: 120px;
    /* Adjust this number to increase/decrease the top space */
    padding-bottom: 100px;
    background: linear-gradient(to bottom, #09131d, #0c1b2a);
}

/* Add space specifically between the header and the cards */
.faq-section .section-header {
    margin-bottom: 60px;
    /* Space between "Common Questions" and the first card */
    text-align: center;
}

/* Ensure the sub-title isn't touching the top of the section */
.faq-section .sub-title {
    margin-top: 0;
    margin-bottom: 15px;
    display: inline-block;
}

/* Target the container to remove any automatic gaps */
.faq-section .faq-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px !important;
    /* This is the most important line to bring them close */
    margin-top: 2px;
}

/* Set the card margin to 0 since we are using 'gap' above */
.faq-section .faq-card {
    margin-bottom: 0 !important;
    transition: all 0.3s ease;
}




/* ================================
   REVIEWS SECTION
   ================================ */


/* ===============================
   TESTIMONIALS – DESKTOP ONLY
================================ */
@media (min-width: 768px) {

    /* SECTION BACKGROUND */
    #reviews {
        position: relative;
        padding: 100px 0 120px;
        background: radial-gradient(circle at top,
                #0e1a2f 0%,
                #0b1425 45%,
                #070d1a 100%);
        overflow: hidden;
    }

    /* HEADER */
    #reviews .section-header {
        text-align: center;
        margin-bottom: 70px;
    }

    #reviews .section-header h2 {
        font-size: 42px;
        font-weight: 700;
        color: #ffffff;
    }

    #reviews .section-header h2 span {
        color: #3cff86;
        /* theme green */
    }

    #reviews .header-underline {
        width: 60px;
        height: 3px;
        background: #3cff86;
        margin: 16px auto 0;
        display: block;
        border-radius: 10px;
    }

    /* SWIPER WRAPPER */
    .review-slider {
        max-width: 1200px;
        margin: 0 auto;
        padding: 10px 5px;
    }

    /* SLIDE */
    .review-slider .swiper-slide {
        height: auto;
        display: flex;
        align-items: stretch;
    }

    /* CARD – SAME SIZE ALWAYS */
    .review-card {
        width: 100%;
        min-height: 320px;
        padding: 30px 32px;
        border-radius: 22px;

        background: linear-gradient(160deg,
                rgba(255, 255, 255, 0.06),
                rgba(255, 255, 255, 0.02));
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);

        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);

        display: flex;
        flex-direction: column;
        justify-content: space-between;

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

    .review-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 35px 80px rgba(0, 0, 0, 0.6);
    }

    /* PLATFORM ICONS */
    .platform-icons {
        position: absolute;
        top: 18px;
        right: 22px;
        display: flex;
        gap: 14px;
    }

    .platform-icons a {
        font-size: 16px;
        transition: transform .25s ease, opacity .25s ease;
    }

    .platform-icons a:hover {
        transform: translateY(-2px);
        opacity: 0.85;
    }

    /* OFFICIAL BRAND COLORS */
    .platform-icons .fa-facebook {
        color: #1877F2;
    }

    .platform-icons .fa-google {
        color: #4285F4;
    }

    .platform-icons .fa-globe {
        color: #3cff86;
    }

    /* STARS */
    .review-card .stars {
        color: #3cff86;
        font-size: 14px;
        margin-bottom: 18px;
    }

    /* REVIEW TEXT */
    .review-card p {
        font-size: 15px;
        line-height: 1.7;
        color: #cfd8e3;
        margin-bottom: 28px;
    }

    /* REVIEWER */
    .reviewer {
        display: flex;
        align-items: center;
        gap: 14px;
    }

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

    .rev-avatar {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: rgba(60, 255, 134, 0.15);
        color: #3cff86;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .rev-info h5 {
        font-size: 15px;
        color: #ffffff;
        margin: 0;
    }

    .rev-info span {
        font-size: 13px;
        color: #8fa3bf;
    }

    /* PAGINATION */
    .swiper-pagination-bullet {
        background: rgba(255, 255, 255, 0.3);
        opacity: 1;
    }

    .swiper-pagination-bullet-active {
        background: #3cff86;
    }
}



/* =====Reviews Form Section============================ */

/* ============================================================
   NAME: VIRTUAL WORLD - REVIEW EDIT UI KIT
   DESCRIPTION: Reusable Glassmorphism Form for Reviews
   ============================================================ */

/* Main Page Wrapper */
.vw-review-edit-page {
    background: radial-gradient(circle at top, #0e1a2f 0%, #0b1425 45%, #070d1a 100%);
    color: #ffffff;
    min-height: 100vh;
    padding: 80px 20px;
    display: flex;
    justify-content: center;
}

/* Review Edit Card */
.vw-review-card-edit {
    width: 100%;
    max-width: 850px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 25px;
    padding: 50px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}

/* Header Title */
.vw-review-title {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 40px;
    color: #ffffff;
}

.vw-review-title span {
    color: #3cff86;
    /* Neon Green */
}

/* Review Form Layout */
.vw-review-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 25px;
}

/* Form Label */
.vw-review-label {
    display: block;
    color: #8fa3bf;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 12px;
}

/* Input Fields */
.vw-review-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #ffffff;
    padding: 15px 20px;
    font-size: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

.vw-review-input:focus {
    outline: none;
    border-color: #3cff86;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 20px rgba(60, 255, 134, 0.2);
}

/* Neon Update Button */
.vw-review-btn-update {
    background: #3cff86;
    color: #070d1a;
    font-weight: 800;
    padding: 18px 45px;
    border-radius: 15px;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 14px;
    transition: all 0.4s ease;
    display: inline-flex;
    align-items: center;
}

.vw-review-btn-update:hover {
    transform: translateY(-5px);
    background: #2ee675;
    box-shadow: 0 20px 40px rgba(60, 255, 134, 0.3);
}

/* Current Avatar Preview */
.vw-review-avatar-wrap {
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(255, 255, 255, 0.03);
    padding: 15px;
    border-radius: 15px;
    border: 1px dashed rgba(255, 255, 255, 0.1);
}

.vw-review-avatar-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #3cff86;
}

/* Responsive for Mobile */
@media (max-width: 768px) {
    .vw-review-grid {
        grid-template-columns: 1fr;
    }

    .vw-review-card-edit {
        padding: 30px;
    }
}



/*====review index =====*/

/* ============================================================
   VIRTUAL WORLD - REVIEW INDEX UI KIT
   ============================================================ */

.vw-index-wrapper {
    background: radial-gradient(circle at top, #0e1a2f 0%, #0b1425 45%, #070d1a 100%);
    min-height: 100vh;
    padding: 60px 30px;
    color: #ffffff;
}

/* Glass Card for Table */
.vw-glass-table-card {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
}

/* Table Header Styling */
.vw-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
    /* Space between rows */
}

.vw-table thead th {
    background: transparent;
    color: #8fa3bf;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    padding: 15px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.05);
}

/* Table Row Glass Effect */
.vw-table tbody tr {
    background: rgba(255, 255, 255, 0.03);
    transition: all 0.3s ease;
}

.vw-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.07);
    transform: scale(1.005);
}

.vw-table td {
    padding: 20px 15px;
    border: none;
    color: #cfd8e3;
    vertical-align: middle;
}

/* Unique Badges */
.vw-badge-active {
    background: rgba(60, 255, 134, 0.15);
    color: #3cff86;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
}

.vw-badge-inactive {
    background: rgba(255, 255, 255, 0.1);
    color: #8fa3bf;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 11px;
}

/* Star Rating */
.vw-star-active {
    color: #3cff86;
}

.vw-star-muted {
    color: rgba(255, 255, 255, 0.1);
}

/* Buttons inside Table */
.vw-btn-action {
    width: 35px;
    height: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    transition: 0.3s;
    border: none;
    margin-right: 5px;
    color: white;
}

.vw-btn-edit {
    background: rgba(52, 152, 219, 0.2);
    color: #3498db;
}

.vw-btn-edit:hover {
    background: #3498db;
    color: white;
}

.vw-btn-delete {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
}

.vw-btn-delete:hover {
    background: #e74c3c;
    color: white;
}


/* Review Platform Badges */

.review-platforms {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.verify-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: 0.3s;
    border: 1px solid transparent;
}

/* Facebook Style */
.verify-badge.fb {
    background: rgba(24, 119, 242, 0.1);
    color: #1877F2;
    border-color: rgba(24, 119, 242, 0.2);
}

.verify-badge.fb:hover {
    background: #1877F2;
    color: #fff;
}

/* Google Style */
.verify-badge.googl {
    background: rgba(219, 68, 55, 0.1);
    color: #DB4437;
    border-color: rgba(219, 68, 55, 0.2);
}

.verify-badge.googl:hover {
    background: #DB4437;
    color: #fff;
}


/* Center the container */
.review-platforms.centered {
    display: flex;
    justify-content: center;
    /* This centers the buttons */
    align-items: center;
    gap: 12px;
    margin-bottom: 25px;
    flex-wrap: wrap;
    /* Ensures buttons stack nicely on mobile */
}

/* Base button design */
.verify-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 30px;
    /* Rounded pill shape */
    font-size: 12px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

/* Hover effect for all */
.verify-badge:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Platform Specific Colors */
.verify-badge.fb:hover {
    background: #1877F2;
    border-color: #1877F2;
    color: white;
}

.verify-badge.googl:hover {
    background: #DB4437;
    border-color: #DB4437;
    color: white;
}

.verify-badge.web:hover {
    background: #3cff86;
    /* Your neon green */
    border-color: #3cff86;
    color: #000;
    /* Black text for better contrast on green */
}

/* Icon adjustments */
.verify-badge i {
    font-size: 14px;
}


/* ===============================
    OUR PARTNERS – DESKTOP ONLY
================================ */
@media (min-width: 768px) {

    /* 1. SECTION: Kept your original gradient and padding */
    .partners-section {
        padding: 100px 0 120px;
        background: radial-gradient(circle at top, #0e1a2f 0%, #0b1425 45%, #070d1a 100%);
        position: relative;
        overflow: hidden;
    }

    /* 2. SLIDER: Kept your mask-image effect, fixed the top-cut-off */
    .partners-slider {
        max-width: 1200px;
        margin: 0 auto;
        padding: 60px 10px;
        /* Increased top padding so hover-lift doesn't cut off */
        mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
        -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
        overflow: visible !important;
        /* Added this to prevent the neon glow from clipping */
    }

    /* 3. PARTNER CARD: Modified to be "Logo Only" (Transparent) */
    .partner-card {
        width: 200px;
        /* Kept your slightly wider preference */
        height: 140px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
        /* Reduced from 24px to make logo bigger */
        background: transparent;
        /* Changed to transparent for "Logo Only" look */
        border-radius: 20px;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid transparent;
        /* Border hidden until hover */
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    /* 4. LOGO IMAGE: Modified for the "Big Logo" look */
    .partner-card img {
        max-width: 90%;
        max-height: 90px;
        /* Increased from 50px to 90px */
        object-fit: contain;
        filter: grayscale(100%) opacity(0.6);
        /* Kept your muted start */
        transition: all 0.4s ease;
    }

    /* 5. HOVER EFFECTS: Kept your logic, fixed the overflow and glow */
    .partner-card:hover {
        transform: translateY(-8px) scale(1.05);
        /* Kept your lift effect */
        background: rgba(60, 255, 134, 0.05);
        /* Kept your subtle green tint */
        border-color: #3cff86;
        /* Kept your neon green border */
        box-shadow: 0 10px 30px rgba(60, 255, 134, 0.2);
        animation: neonPulse 1.5s infinite;
        /* Kept your pulse animation */
    }

    .partner-card:hover img {
        filter: grayscale(0%) opacity(1);
        /* Kept your "come to life" effect */
        transform: scale(1.1);
    }

    /* 6. ANIMATION: Kept your neonPulse exactly as it was */
    @keyframes neonPulse {
        0% {
            box-shadow: 0 0 5px rgba(60, 255, 134, 0.1);
        }

        50% {
            box-shadow: 0 0 20px rgba(60, 255, 134, 0.3);
        }

        100% {
            box-shadow: 0 0 5px rgba(60, 255, 134, 0.1);
        }
    }
}











/* ================================
   FOOTER – THEME RESTORED
   ================================ */
.footer {
    background-color: #0f172a !important;
    /* Your signature dark navy */
    color: white;
    padding: 80px 20px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-family: 'Inter', sans-serif;
    position: relative;
    overflow: hidden;
}

.footer-glow {
    position: absolute;
    top: -100px;
    left: -100px;
    width: 300px;
    height: 300px;
    background: rgba(74, 222, 128, 0.05);
    filter: blur(100px);
    border-radius: 50%;
}

.footer-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 50px;
    position: relative;
    z-index: 1;
}

/* Brand styling */
.footer-brand h2 {
    font-size: 1.8rem;
    font-weight: 800;
    margin: 0;
    letter-spacing: -1px;
}

.footer-brand h2 span {
    color: #4ade80;
}

.tagline {
    color: #4ade80;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 5px;
}

.footer-desc {
    color: #94a3b8;
    line-height: 1.7;
    font-size: 0.95rem;
    margin-bottom: 25px;
    max-width: 350px;
}

/* Restored Social Circles */
.social-flex {
    display: flex;
    gap: 15px;
}

.social-flex a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #1e293b;
    /* The exact grey-blue from your image */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.social-flex a:hover {
    background: #4ade80;
    color: #0f172a;
}

/* Restored Section Headers */
.footer-col h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 25px;
    color: #f8fafc;
    position: relative;
    padding-bottom: 10px;
}

.accent-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: #4ade80;
    /* Green for Links */
}

.accent-line.blue {
    background: #63b3ed;
    /* Blue for Contact */
}

/* Contact Item Icons */
.contact-stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.contact-row {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.contact-row i {
    color: #4ade80;
    margin-top: 5px;
}

.contact-row .fa-whatsapp {
    color: #25d366;
    font-size: 1.2rem;
}

.contact-row span,
.contact-row a {
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.95rem;
    transition: 0.3s;
}

.contact-row a:hover {
    color: #4ade80;
}

/* Bottom Bar */
.footer-bottom {
    max-width: 1200px;
    margin: 60px auto 0;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-bottom p {
    color: #64748b;
    font-size: 0.85rem;
    margin: 0;
}

.legal-links {
    display: flex;
    gap: 20px;
}

.legal-links a {
    color: #64748b;
    text-decoration: none;
    font-size: 0.8rem;
}






/* =====================================================
   VW – LARAVEL SERVICE PAGE (DESKTOP ONLY)
   Namespace: #vw-laravel-service-page
===================================================== */
@media (min-width: 992px) {

    /* ---------------- HERO ---------------- */
    #vw-laravel-service-page .vw-ls-hero {
        min-height: 85vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: radial-gradient(circle at top, #0f1c34 0%, #070d1a 60%);
        text-align: center;
        padding: 0 20px;
    }

    #vw-laravel-service-page .vw-ls-hero-content {
        max-width: 900px;
    }

    #vw-laravel-service-page .vw-ls-hero-content h1 {
        font-size: 56px;
        font-weight: 800;
        color: #ffffff;
        margin-bottom: 20px;
    }

    #vw-laravel-service-page .vw-ls-hero-content p {
        font-size: 18px;
        color: #cbd5e1;
        line-height: 1.8;
        margin-bottom: 40px;
    }

    #vw-laravel-service-page .vw-ls-hero-actions {
        display: flex;
        gap: 20px;
        justify-content: center;
    }

    /* ---------------- SECTION HEADER ---------------- */
    #vw-laravel-service-page .vw-ls-section-header {
        text-align: center;
        margin-bottom: 80px;
    }

    #vw-laravel-service-page .vw-ls-tagline {
        color: #38f89c;
        letter-spacing: 1px;
        font-size: 14px;
        text-transform: uppercase;
        margin-bottom: 10px;
    }

    #vw-laravel-service-page .vw-ls-section-header h2 {
        font-size: 42px;
        color: #ffffff;
        font-weight: 700;
    }

    #vw-laravel-service-page .vw-ls-section-header h2 span {
        color: #38f89c;
    }

    #vw-laravel-service-page .vw-ls-header-underline {
        width: 60px;
        height: 3px;
        background: #38f89c;
        margin: 18px auto 0;
        border-radius: 20px;
    }

    /* ---------------- WHY LARAVEL ---------------- */
    #vw-laravel-service-page .vw-ls-why-laravel {
        padding: 120px 0;
        background: #070d1a;
    }

    #vw-laravel-service-page .vw-ls-why-grid {
        max-width: 1200px;
        margin: auto;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
    }

    #vw-laravel-service-page .vw-ls-why-card {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 24px;
        padding: 50px 40px;
        text-align: center;
        backdrop-filter: blur(12px);
        transition: 0.4s ease;
    }

    #vw-laravel-service-page .vw-ls-why-card i {
        font-size: 36px;
        color: #38f89c;
        margin-bottom: 25px;
    }

    #vw-laravel-service-page .vw-ls-why-card h4 {
        color: #ffffff;
        font-size: 22px;
        margin-bottom: 15px;
    }

    #vw-laravel-service-page .vw-ls-why-card p {
        color: #94a3b8;
        line-height: 1.7;
    }

    #vw-laravel-service-page .vw-ls-why-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    }

    /* ---------------- PROCESS SLIDER ---------------- */
    #vw-laravel-service-page .vw-ls-process {
        padding: 120px 0;
        background: radial-gradient(circle at bottom, #0f1c34 0%, #070d1a 60%);
    }

    #vw-laravel-service-page .vw-ls-process-slider {
        max-width: 1200px;
        margin: auto;
    }

    #vw-laravel-service-page .vw-ls-process-card {
        height: 100%;
        background: rgba(255, 255, 255, 0.035);
        border-radius: 26px;
        padding: 55px 40px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        text-align: center;
        backdrop-filter: blur(12px);
        transition: 0.4s ease;
    }

    #vw-laravel-service-page .vw-ls-process-card i {
        font-size: 34px;
        color: #38f89c;
        margin-bottom: 22px;
    }

    #vw-laravel-service-page .vw-ls-process-card h4 {
        color: #ffffff;
        font-size: 22px;
        margin-bottom: 14px;
    }

    #vw-laravel-service-page .vw-ls-process-card p {
        color: #94a3b8;
        line-height: 1.7;
    }

    #vw-laravel-service-page .vw-ls-process-card:hover {
        transform: translateY(-12px) scale(1.03);
        box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7);
    }

    /* ---------------- BANGLADESH FEATURES ---------------- */
    #vw-laravel-service-page .vw-ls-bd-features {
        padding: 120px 0;
        background: #070d1a;
    }

    #vw-laravel-service-page .vw-ls-features-grid {
        max-width: 1200px;
        margin: auto;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 35px;
    }

    #vw-laravel-service-page .vw-ls-feature-card {
        background: rgba(255, 255, 255, 0.03);
        border-radius: 22px;
        padding: 45px 30px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        text-align: center;
        backdrop-filter: blur(12px);
        transition: 0.4s ease;
    }

    #vw-laravel-service-page .vw-ls-feature-card i {
        font-size: 30px;
        color: #38f89c;
        margin-bottom: 20px;
    }

    #vw-laravel-service-page .vw-ls-feature-card h4 {
        color: #ffffff;
        font-size: 20px;
        margin-bottom: 10px;
    }

    #vw-laravel-service-page .vw-ls-feature-card p {
        color: #94a3b8;
        font-size: 15px;
    }

    #vw-laravel-service-page .vw-ls-feature-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
    }

    /* ---------------- CTA ---------------- */
    #vw-laravel-service-page .vw-ls-cta {
        padding: 110px 20px;
        text-align: center;
        background: radial-gradient(circle at center, #38f89c15 0%, #070d1a 70%);
    }

    #vw-laravel-service-page .vw-ls-cta h2 {
        color: #ffffff;
        font-size: 42px;
        margin-bottom: 18px;
    }

    #vw-laravel-service-page .vw-ls-cta p {
        color: #cbd5e1;
        font-size: 18px;
        margin-bottom: 35px;
    }

}