/* --- WHITE/BRIGHT HERO STYLES --- */
/* --- UPDATED PINK PALETTE --- */
:root {
    --light-bg: #ffffff;
    --off-white-bg: #fffcfd;
    /* Faint pink tint */
    --dark-text: #1a1a2e;
    --medium-text: #555b6e;
    --primary-accent: #ff007a;
    /* Vibrant Pink */
    --secondary-accent: #ff4d94;
    /* Rose Pink */
    --gradient-main: linear-gradient(135deg, #ff007a 0%, #ff4d94 100%);
    --gradient-light: rgba(255, 0, 122, 0.08);

    --theme: #0B54FE;
    --prime-gradient: radial-gradient(circle at center, #7DF9FF, #0B54FE);
    --primary-color: #0B54FE;
    --secondary-clr: #FF1493;
    --heading-font: 'IBM Plex Sans', sans-serif;
    --paragraph-font: "Open Sans", sans-serif;
    --faq-font: 'JetBrains Mono', monospace;
    --body-bg: #ffeef4;
    --border-clr: lightgrey;
    --light-filler-clr: #fcc5f1;
    --filler-clr: #ef9651;
    --white-clr: #fff;
    --black-text-clr: #2e2e2e;
    --para-clr: #5e5e5e;
    --yellow-clr: yellow;
    --light_purple: #fbfbfb;

    /* ========================================
       HEADER & NAVIGATION VARIABLES
       ======================================== */
    --accent-color: #3498DB;
    --tertiary-color: #9B59B6;

    /* --- BUTTON COLORS --- */
    --btn-blue-bg: linear-gradient(135deg, #0B54FE 0%, #3B82F6 50%, #06B6D4 100%);
    --btn-blue-bg-hover: linear-gradient(135deg, #FF1493 0%, #F472B6 50%, #FB7185 100%);
    --btn-pink-bg: linear-gradient(135deg, #FF1493 0%, #F472B6 50%, #FB7185 100%);
    --btn-pink-bg-hover: linear-gradient(135deg, #0B54FE 0%, #3B82F6 50%, #06B6D4 100%);
    --btn-shadow-blue: rgba(11, 84, 254, 0.5);
    --btn-shadow-pink: rgba(255, 20, 147, 0.5);

    /* --- TEXT COLORS --- */
    --menu-text-clr: #2C3E50;
    --menu-text-hover: #FF1493;
    --dropdown-text-clr: #34495E;
    --dropdown-text-hover: #0B54FE;

    /* --- BACKGROUND COLORS --- */
    --header-bg: rgba(255, 255, 255, 0.15);
    --dropdown-bg: rgba(255, 255, 255, 0.98);
    --mobile-header-bg: rgba(255, 255, 255, 0.25);

    /* --- GLASSMORPHISM EFFECTS --- */
    --glass-bg-light: rgba(255, 255, 255, 0.3);
    --glass-bg-medium: rgba(255, 255, 255, 0.2);
    --glass-border: rgba(255, 255, 255, 0.35);
    --glass-backdrop: blur(12px);

    /* --- GRADIENT BACKGROUNDS --- */
    --gradient-orb-1: linear-gradient(135deg, #FF1493 0%, #0B54FE 100%);
    --gradient-orb-2: linear-gradient(135deg, #0B54FE 0%, #9B59B6 100%);
    --gradient-underline: linear-gradient(90deg, #FF1493, #0B54FE);

    /* --- SHADOW COLORS --- */
    --shadow-light: rgba(0, 0, 0, 0.08);
    --shadow-medium: rgba(0, 0, 0, 0.1);
    --shadow-heavy: rgba(0, 0, 0, 0.2);
    --shadow-primary: rgba(11, 84, 254, 0.25);
    --shadow-secondary: rgba(255, 20, 147, 0.35);

    /* --- BORDER COLORS --- */
    --border-light: rgba(255, 255, 255, 0.4);
    --border-dropdown: #f0f0f0;

    /* --- ICON COLORS --- */
    --icon-green: #25D366;
    --icon-orange: #ff5722;
}

/* =========================================
   AI BENTO SECTION STYLES
   ========================================= */
.ai-bento-section {
    background-color: var(--light-bg);
    /* Light, premium gray */
    padding: 100px 0;
    font-family: var(--font-body);
}

.section-subtext {
    max-width: 700px;
    margin: 15px auto 0;
    color: var(--medium-text);
    font-size: 1.1rem;
}

.badge-pill-gradient {
    background: linear-gradient(135deg, rgba(120, 8, 208, 0.1), rgba(0, 210, 255, 0.1));
    color: var(--primary-accent);
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Bento Card */
.bento-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 40px 30px;
    height: 100%;
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
}

.bento-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px -12px rgba(120, 8, 208, 0.15);
}

/* Featured Card highlight */
.bento-card.highlight-border {
    border-bottom: 4px solid var(--primary-accent);
}

.card-header-icon {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 25px;
}

.icon-box-gradient {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #f0f7ff 0%, #fefaff 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-accent);
    font-size: 1.75rem;
    transition: 0.3s;
}

.bento-card:hover .icon-box-gradient {
    background: var(--gradient-main);
    color: #fff;
    transform: rotate(-10deg);
}

.step-badge {
    font-size: 1.5rem;
    font-weight: 900;
    color: rgba(0, 0, 0, 0.05);
    font-family: var(--font-heading);
}

.bento-card h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.bento-lead {
    color: var(--primary-accent);
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 15px;
}

.bento-desc {
    color: var(--medium-text);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Detailed List */
.bento-details {
    background: #fafbfc;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 25px;
    margin-top: auto;
    /* Pushes to bottom if content varies */
}

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

.detail-item:last-child {
    margin-bottom: 0;
}

.detail-item i {
    color: var(--secondary-accent);
    font-size: 1.2rem;
    margin-top: 2px;
}

.detail-item strong {
    display: block;
    font-size: 0.9rem;
    color: var(--dark-text);
}

.detail-item span {
    font-size: 0.85rem;
    color: #888;
    line-height: 1.4;
    display: block;
}

.bento-link {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--dark-text);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: 0.3s;
}

.bento-link:hover {
    color: var(--primary-accent);
    gap: 15px;
}


/* =========================================
   STATS SECTION: MODERN GLASS & GRADIENT
   ========================================= */
.stats-modern-gradient {
    padding: 80px 0;
    background: #fff;
}

.stats-container-glass {
    background: #0f172a;
    /* Dark background for contrast */
    border-radius: 30px;
    padding: 60px 50px;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

/* Decorative background blobs */
.stats-container-glass::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(120, 8, 208, 0.4), transparent 70%);
}

.stats-heading {
    font-size: 2rem;
    margin-bottom: 15px;
    color: #fff;
}

.stats-desc {
    color: #cbd5e1;
    margin-bottom: 25px;
    font-size: 1.05rem;
}

.btn-sm-gradient {
    background: var(--gradient-main);
    color: #fff;
    padding: 10px 24px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: 0.3s;
}

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

.counter-box {
    padding: 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.col-sm-4:last-child .counter-box {
    border-right: none;
}

.counter-num {
    font-size: 3.5rem;
    font-weight: 800;
    font-family: var(--font-heading);
    background: linear-gradient(to bottom, #fff 30%, rgba(255, 255, 255, 0.5));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 5px;
}

.counter-box p {
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    color: #94a3b8;
    margin: 0;
}

@media (max-width: 991px) {
    .counter-box {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 30px;
        margin-bottom: 30px;
    }

    .stats-container-glass {
        padding: 40px 25px;
        text-align: center;
    }
}


/* 1. Force Dark Black Background */
.award-section {
    background-color: #000000 !important;
    /* Pure Black */
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}

/* 2. Text Colors forced to White */
.award-section .mbs-badge {
    color: #ff00cc !important;
    background: rgba(255, 0, 204, 0.1) !important;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    display: inline-block;
    margin-bottom: 15px;
}

.award-section .main-title {
    color: #ffffff !important;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.award-section .description {
    color: #cccccc !important;
    max-width: 600px;
    margin: 0 auto 40px;
}

/* 3. Major Awards Grid (Fixed Dimensions) */
.major-awards-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 60px;
    flex-wrap: wrap;
}

.award-card {
     background: #ffffff;
    /* Glass Effect */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    /* Fixed Width */
    height: 150px;
    /* Fixed Height */
    transition: transform 0.3s ease;
}

.award-card:hover {
    transform: translateY(-5px);
    background: #ffffff;
}

/* Image Sizing & Fitting */
.award-card img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    /* Ensures logo fits inside without cutting */
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.2));
    /* Subtle glow */
}

/* 4. Slider Styling for Dark Mode */
.slider-wrapper {
    overflow: hidden;
    padding: 20px 0;
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.slider-track {
    display: flex;
    width: calc(250px * 10);
    /* Adjust based on slide count */
    animation: scroll 20s linear infinite;
}

.slide {
    width: 250px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

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

.slide-content h4 {
    color: #fff;
    margin: 0;
    font-size: 1rem;
}

.stars {
    color: #ffd700;
    /* Gold Stars */
    font-size: 0.8rem;
}

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

    100% {
        transform: translateX(calc(-250px * 5));
    }
}

/* Update Gradient Texts */
.text-gradient, .hero-gradient-text {
    background: var(--gradient-main) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Update Primary Buttons */
.btn-main-bright, .btn-vision, .submit-btn-blk {
    background: var(--gradient-main) !important;
    box-shadow: 0 10px 20px -5px rgba(255, 0, 122, 0.3) !important;
}

/* Update Badges & Labels */
.hero-subtitle-bright, .badge-title, .ai-badge, .tsp-badge, .hero-badge {
    background: var(--gradient-light) !important;
    color: var(--primary-accent) !important;
}

.hero-bright-section {
    position: relative;
    padding: 100px 0 100px 0;
    /* Reduced padding slightly for split layout */
    background-color: var(--light-bg);
    overflow: hidden;
}

/* Background decoration (optional blob or gradient behind) */
.hero-bright-section::before {
    content: '';
    position: absolute;
    top: -10%;
    right: -10%;
    width: 50%;
    height: 80%;
    background: radial-gradient(circle, rgba(120, 8, 208, 0.05) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    z-index: 0;
}

.hero-content-wrapper {
    position: relative;
    z-index: 2;
}

/* --- TYPOGRAPHY (Left Aligned for Split) --- */
.hero-text-col {
    text-align: left;
    /* Align text to left */
}

.hero-title-bright {
    font-weight: 800;
    color: var(--dark-text);
    letter-spacing: -1px;
    line-height: 1.2;
    font-size: 3.5rem;
}

.hero-gradient-text {
    background: linear-gradient(to right, var(--primary-accent) 0%, var(--secondary-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.hero-subtitle-bright {
    color: var(--primary-accent);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    display: inline-block;
    background: rgba(120, 8, 208, 0.08);
    padding: 5px 15px;
    border-radius: 20px;
}

.hero-description-bright {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--medium-text);
    margin-bottom: 2rem;
    max-width: 90%;
    /* prevent text from hitting image too hard */
}

/* --- MAIN IMAGE (RIGHT SIDE) --- */
.hero-img-container {
    position: relative;
    text-align: center;
}

.hero-main-img {
    max-width: 100%;
    height: auto;
    border-radius: 20px;
    /* Soft shadow to make it pop */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    animation: floatImage 6s ease-in-out infinite;
}

@keyframes floatImage {
    0% {
        transform: translateY(0px);
    }

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

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

/* --- AWARDS/BRANDS (Left aligned) --- */
.awards-container {
    margin-bottom: 25px;
}

.award-img-bright {
    max-height: 40px;
    filter: grayscale(100%) brightness(0.3) contrast(1.2);
    opacity: 0.6;
    transition: all 0.3s ease;
    margin-right: 15px;
    /* Spacing between logos */
    margin-bottom: 10px;
    display: inline-block;
}

.award-img-bright:hover {
    filter: none;
    opacity: 1;
    transform: scale(1.05);
}

/* --- BRIGHT SERVICE PILLS (Left aligned) --- */
.service-pill-grid-bright {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    /* Align left */
    gap: 12px;
    margin: 30px 0;
}

.service-pill-bright {
    background: #fff;
    border: 1px solid #e1e5ee;
    color: var(--medium-text);
    padding: 10px 20px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

.service-pill-bright i {
    margin-right: 8px;
    color: var(--primary-accent);
}

.service-pill-bright:hover {
    background: var(--primary-accent);
    border-color: var(--primary-accent);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(120, 8, 208, 0.2);
}

.service-pill-bright:hover i {
    color: #fff;
}

/* --- BUTTON --- */
.btn-main-bright {
    background: linear-gradient(to right, var(--primary-accent), var(--secondary-accent));
    border: none;
    color: white;
    padding: 14px 40px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 10px 20px -5px rgba(120, 8, 208, 0.3);
    display: inline-flex;
    align-items: center;
}

.btn-main-bright:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px -5px rgba(120, 8, 208, 0.5);
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 991px) {
    .hero-bright-section {
        padding: 60px 0;
    }

    .hero-text-col {
        text-align: center;
        margin-bottom: 40px;
    }

    .hero-description-bright {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .service-pill-grid-bright {
        justify-content: center;
    }

    .hero-title-bright {
        font-size: 2.5rem;
    }

    /* Order change on mobile: Image on top or bottom? Default is text top, image bottom */
}


.tsp-section {
    padding: 90px 0;
    background: var(--light-bg);
    position: relative;
}

.tsp-header {
    text-align: center;
    max-width: 850px;
    margin: 0 auto 60px auto;
}

.tsp-badge {
    background: rgba(120, 8, 208, 0.1);
    color: #7808d0;
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.85rem;
    display: inline-block;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.tsp-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 20px;
}

.tsp-desc {
    color: #666;
    font-size: 1.1rem;
    line-height: 1.6;
}

.tsp-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 40px 30px;
    height: 100%;
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.tsp-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(120, 8, 208, 0.12);
    border-color: rgba(120, 8, 208, 0.2);
}

.tsp-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #7808d0, #00d2ff);
    opacity: 0;
    transition: opacity 0.3s;
}

.tsp-card:hover::before {
    opacity: 1;
}

.tsp-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #f0f4ff 0%, #f9faff 100%);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #7808d0;
    margin-bottom: 25px;
    box-shadow: inset 0 0 15px rgba(120, 8, 208, 0.05);
    transition: 0.3s;
}

.tsp-card:hover .tsp-icon {
    background: linear-gradient(135deg, #7808d0 0%, #00d2ff 100%);
    color: #fff;
    transform: scale(1.1) rotate(-3deg);
}

.tsp-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: #222;
}

.tsp-card-desc {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 25px;
    line-height: 1.6;
}

.tsp-subtitle {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1a1a1a;
    text-transform: uppercase;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
}

.tsp-subtitle::after {
    content: '';
    flex-grow: 1;
    height: 1px;
    background: #eee;
    margin-left: 10px;
}

.tsp-list {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
}

.tsp-list li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: #555;
    line-height: 1.4;
}

.tsp-list li i {
    position: absolute;
    left: 0;
    top: 3px;
    color: #00d2ff;
    font-size: 1.1rem;
}

.tsp-benefits {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tsp-tag {
    background: #f1f3f9;
    color: #555;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
    transition: 0.3s;
}

.tsp-card:hover .tsp-tag {
    background: rgba(120, 8, 208, 0.08);
    color: #7808d0;
}

/* Modern Dark Glass for Why Choose Us */
.wcu-modern-section {
    margin-top: 80px;
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    background: #000000;
    /* Updated to Solid Black */
    padding: 60px 40px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
}

.wcu-modern-section::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(120, 8, 208, 0.2) 0%, rgba(0, 0, 0, 0) 70%);
    z-index: 0;
}

.wcu-modern-section::after {
    content: '';
    position: absolute;
    bottom: -50px;
    right: -50px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0, 210, 255, 0.1) 0%, rgba(0, 0, 0, 0) 70%);
    z-index: 0;
}

.wcu-content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.wcu-head h3 {
    color: #fff;
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 10px;
}

.wcu-head p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.1rem;
    margin-bottom: 50px;
}

.wcu-modern-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.wcu-modern-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 30px 15px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.wcu-modern-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(120, 8, 208, 0.5);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.wcu-icon-circle {
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 1.8rem;
    transition: 0.3s;
}

.wcu-modern-card i {
    background: linear-gradient(135deg, #00d2ff 0%, #7808d0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: 0.3s;
}

.wcu-modern-card:hover .wcu-icon-circle {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
}

.wcu-card-text {
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.4;
}

@media (max-width: 991px) {
    .wcu-modern-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .tsp-title {
        font-size: 2rem;
    }

    .wcu-modern-section {
        padding: 40px 20px;
    }

    .wcu-modern-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .wcu-head h3 {
        font-size: 1.8rem;
    }
}

@media (max-width: 480px) {
    .wcu-modern-grid {
        grid-template-columns: 1fr;
    }
}


.marketing-services-section {
    padding: 90px 0;
    background-color: var(--light-bg);
}

.mkt-header {
    text-align: center;
    margin-bottom: 60px;
}

.mkt-header h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 20px;
}

.mkt-header p {
    font-size: 1.1rem;
    color: #666;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

.mkt-category-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #7808d0;
    margin-bottom: 30px;
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
}

.mkt-category-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 3px;
    background: #00d2ff;
}

.mkt-card {
    background: #f9f9f9;
    border-radius: 12px;
    padding: 30px 25px;
    height: 100%;
    border: 1px solid #eee;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.mkt-card:hover {
    transform: translateY(-5px);
    background: #fff;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    border-color: #7808d0;
}

.mkt-icon {
    font-size: 2.5rem;
    color: #7808d0;
    margin-bottom: 20px;
    display: inline-block;
    transition: 0.3s;
}

.mkt-card:hover .mkt-icon {
    transform: scale(1.1);
    color: #00d2ff;
}

.mkt-card h4 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: #333;
}

.mkt-card p {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

.row-gap {
    margin-bottom: 50px;
}


.innovation-section {
    padding: 100px 0;
    background: #ffffff;
    position: relative;
}

.inn-header {
    margin-bottom: 60px;
    position: relative;
    padding-left: 20px;
}

.inn-header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    height: 40px;
    width: 5px;
    background: linear-gradient(to bottom, #7808d0, #00d2ff);
    border-radius: 5px;
}

.inn-header h3 {
    font-size: 2.5rem;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.2;
}

.inn-header p {
    font-size: 1.1rem;
    color: #666;
    margin-top: 10px;
    max-width: 700px;
}

.tech-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px 30px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border: 1px solid #f0f0f0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    height: 100%;
    min-height: 380px;
    display: flex;
    flex-direction: column;
}

.tech-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 4px;
    background: linear-gradient(90deg, #7808d0, #00d2ff);
    transition: width 0.4s ease;
}

.tech-card:hover::after {
    width: 100%;
}

.tech-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(120, 8, 208, 0.15);
    border-color: rgba(120, 8, 208, 0.1);
}

.tech-num {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 5rem;
    font-weight: 900;
    color: rgba(0, 0, 0, 0.03);
    font-family: 'Open Sans', sans-serif;
    transition: all 0.4s ease;
    z-index: -1;
    line-height: 1;
}

.tech-card:hover .tech-num {
    color: rgba(120, 8, 208, 0.05);
    transform: scale(1.1);
}

.tech-icon-box {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #fdfbfd 0%, #f4f6f9 100%);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #7808d0;
    margin-bottom: 25px;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
}

.tech-card:hover .tech-icon-box {
    background: linear-gradient(135deg, #7808d0 0%, #00d2ff 100%);
    color: #fff;
    transform: rotate(-5deg) scale(1.05);
    border-color: transparent;
    box-shadow: 0 10px 20px rgba(120, 8, 208, 0.3);
}

.tech-card h4 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: #222;
}

.tech-card p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
    flex-grow: 1;
    margin-bottom: 25px;
}

.tech-btn {
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    font-size: 0.9rem;
    color: #222;
    text-decoration: none;
    transition: 0.3s;
}

.tech-btn span {
    position: relative;
    z-index: 1;
}

.tech-btn i {
    margin-left: 8px;
    font-size: 1.1rem;
    color: #7808d0;
    transition: transform 0.3s ease;
}

.tech-card:hover .tech-btn {
    color: #7808d0;
}

.tech-card:hover .tech-btn i {
    transform: translateX(5px);
}

.service-slide {
    padding: 15px;
}


.ai-trans-section {
    padding: 80px 0;
    background: #f4f6f9;
    position: relative;
    overflow: hidden;
}

.ai-trans-section::before {
    content: '';
    position: absolute;
    top: -10%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: rgba(120, 8, 208, 0.08);
    filter: blur(100px);
    border-radius: 50%;
    z-index: 0;
}

.ai-header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 1;
}

.ai-label {
    color: #7808d0;
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 14px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 15px;
}

.ai-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 20px;
}

.text-gradient {
    background: linear-gradient(135deg, #7808d0 0%, #00d2ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ai-subtitle {
    font-size: 1.1rem;
    color: #555;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

.ai-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px 30px;
    height: 100%;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ai-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(120, 8, 208, 0.15);
    border-color: rgba(120, 8, 208, 0.3);
}

.ai-card-icon {
    width: 70px;
    height: 70px;
    background: rgba(120, 8, 208, 0.1);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    font-size: 32px;
    color: #7808d0;
    transition: all 0.3s ease;
}

.ai-card:hover .ai-card-icon {
    background: #7808d0;
    color: #fff;
}

.ai-card h3 {
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.ai-card p {
    color: #666;
    margin-bottom: 15px;
    font-size: 0.95rem;
    line-height: 1.6;
}

.ai-card .feature-title {
    font-size: 1rem;
    margin-top: 15px;
    margin-bottom: 10px;
    font-weight: 700;
    color: #333;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1;
}

.feature-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    font-size: 0.9rem;
    color: #444;
}

.feature-list li i {
    position: absolute;
    left: 0;
    top: 4px;
    color: #00d2ff;
}

.ai-benefits-box {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.ai-benefits-box .result-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #555;
    margin-bottom: 5px;
}

.benefit-badge {
    display: inline-block;
    background: #f0f2f5;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #555;
    margin: 3px;
    transition: 0.3s;
}

.ai-card:hover .benefit-badge {
    background: rgba(120, 8, 208, 0.1);
    color: #7808d0;
}

/* Modern White Vision Section */
.vision-wrapper {
    margin-top: 80px;
    background: #ffffff;
    border-radius: 24px;
    padding: 60px 50px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.03);
    z-index: 1;
}

.vision-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(to bottom, #7808d0, #00d2ff);
    z-index: 2;
}

.vision-wrapper::after {
    content: '';
    position: absolute;
    right: -50px;
    bottom: -50px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(120, 8, 208, 0.05) 0%, rgba(255, 255, 255, 0) 70%);
    z-index: 0;
}

.vision-content {
    position: relative;
    z-index: 2;
}

.vision-content h3 {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 20px;
    color: #1a1a1a;
}

.vision-content h3 .highlight {
    color: #7808d0;
    position: relative;
    display: inline-block;
}

.vision-content h3 .highlight::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 10px;
    bottom: 2px;
    left: 0;
    background: rgba(120, 8, 208, 0.1);
    z-index: -1;
    border-radius: 4px;
}

.btn-vision {
    background: linear-gradient(90deg, #7808d0, #6106a8);
    color: #fff;
    border: none;
    padding: 12px 35px;
    font-weight: 600;
    border-radius: 50px;
    box-shadow: 0 10px 20px rgba(120, 8, 208, 0.2);
    transition: all 0.3s ease;
    display: inline-block;
    margin-top: 20px;
    text-decoration: none;
}

.btn-vision:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 25px rgba(120, 8, 208, 0.3);
    color: #fff;
}

.vision-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    position: relative;
    z-index: 2;
}

.vision-item {
    background: #fcfcfc;
    padding: 25px;
    border-radius: 16px;
    border: 1px solid #eee;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.vision-item:hover {
    background: #fff;
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    border-color: #d1d1d1;
}

.vision-icon {
    width: 45px;
    height: 45px;
    background: #eff6ff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7808d0;
    font-size: 1.2rem;
    margin-bottom: 15px;
}

@media (max-width: 991px) {
    .vision-grid {
        margin-top: 40px;
    }
}

@media (max-width: 768px) {
    .ai-title {
        font-size: 2rem;
    }

    .ai-card {
        margin-bottom: 30px;
    }

    .vision-wrapper {
        padding: 40px 25px;
    }

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



/* --- MODERN GLASSMORPHISM DESIGN --- */
.about-modern-section {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
    /* Fallback color */
    background-color: #f8f9fa;
}

/* 1. The Blurred Background Image */
.about-modern-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* The image you requested */
    background-image: url('https://www.marketingevolution.com/hubfs/iStock-1462024468.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Blur effect */
    filter: blur(10px);
    -webkit-filter: blur(10px);
    /* Scale slightly to prevent blurred edges from showing */
    transform: scale(1.1);
    z-index: 0;
}

/* 2. The White Overlay (To ensure text readability) */
.about-modern-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.85);
    /* 85% opacity white overlay */
    z-index: 1;
    backdrop-filter: blur(5px);
    /* Extra glass effect */
}

/* 3. Container Stacking */
.about-modern-section .container {
    position: relative;
    z-index: 5;
    /* Puts content above the background and overlay */
}

/* --- Typography & Titles --- */
.badge-title {
    background: rgba(120, 8, 208, 0.1);
    color: #7808d0;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: inline-block;
    margin-bottom: 15px;
}

.main-section-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: #1a1a2e;
    margin-bottom: 20px;
}

.secondary-heading {
    font-size: 1.8rem;
    font-weight: 700;
    color: #333;
    line-height: 1.3;
    margin-bottom: 20px;
}

.text-highlight {
    color: #7808d0;
    background: linear-gradient(120deg, rgba(120, 8, 208, 0.1) 0%, rgba(120, 8, 208, 0) 100%);
    padding: 0 5px;
    border-radius: 4px;
}

.about-desc {
    color: #555;
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 30px;
}

/* --- Image Styling --- */
.about-img-wrapper {
    position: relative;
    padding: 10px;
}

.about-main-img {
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    width: 100%;
    object-fit: cover;
    transform: perspective(1000px) rotateY(2deg);
    transition: all 0.5s ease;
    border: 5px solid rgba(255, 255, 255, 0.5);
}

.about-img-wrapper:hover .about-main-img {
    transform: perspective(1000px) rotateY(0deg) translateY(-10px);
}

/* Floating Experience Badge */
.about-exp-badge {
    position: absolute;
    bottom: 40px;
    right: 0;
    background: #fff;
    padding: 20px 30px;
    border-radius: 15px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    border-left: 5px solid #7808d0;
    display: flex;
    align-items: center;
    gap: 15px;
    animation: floatBadge 4s ease-in-out infinite;
}

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

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

.about-exp-badge h3 {
    font-size: 2.5rem;
    font-weight: 800;
    color: #7808d0;
    margin: 0;
    line-height: 1;
}

.about-exp-badge span {
    font-size: 0.9rem;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
    line-height: 1.2;
    display: block;
}

/* --- Feature Cards (Glass Style) --- */
.about-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.feature-card {
    background: rgba(255, 255, 255, 0.6);
    /* Semi-transparent card */
    padding: 20px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.3s ease;
}

.feature-card:hover {
    background: #fff;
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    border-color: #7808d0;
}

.icon-box {
    width: 50px;
    height: 50px;
    background: rgba(120, 8, 208, 0.1);
    color: #7808d0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.feature-card:hover .icon-box {
    background: #7808d0;
    color: #fff;
}

.text-box h5 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 3px 0;
    color: #1a1a2e;
}

.text-box span {
    font-size: 0.85rem;
    color: #666;
}

/* Mobile Responsive */
@media (max-width: 991px) {
    .about-main-img {
        margin-bottom: 40px;
        transform: none;
    }

    .about-img-wrapper:hover .about-main-img {
        transform: none;
    }

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

    .about-exp-badge {
        right: 20px;
        bottom: 20px;
        padding: 15px 20px;
    }
}


/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;500;700&display=swap');

.stats-section-dark {
    background-color: #0b1120;
    /* Deep dark blue */
    padding: 80px 20px;
    font-family: 'Outfit', sans-serif;
    color: #fff;
}

.section-heading {
    font-size: 2.5rem;
    font-weight: 700;
}

.text-highlight {
    background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Grid Layout */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

/* Card Styling */
.stat-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px 30px;
    position: relative;
    transition: all 0.4s ease;
    overflow: hidden;
}

/* Hover Effect: The Glow */
.stat-card:hover {
    transform: translateY(-10px);
    border-color: #4facfe;
    box-shadow: 0 20px 40px rgba(79, 172, 254, 0.15);
}

.stat-icon-bg {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}

.stat-icon-bg img {
    width: 30px;
    filter: invert(1);
    /* Ensures dark icons turn white */
}

.stat-header {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.stat-percent {
    font-size: 3.5rem;
    font-weight: 700;
    color: #4facfe;
    line-height: 1;
}

.stat-label {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #94a3b8;
    margin-top: 5px;
}

.stat-card h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    font-weight: 600;
}

.stat-card p {
    color: #cbd5e1;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* Link Style */
.stat-link {
    text-decoration: none;
    color: #fff;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: gap 0.3s ease;
}

.stat-link:hover {
    color: #4facfe;
    gap: 15px;
}

.stat-link .arrow {
    font-size: 1.2rem;
}




/* General Layout */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

.award-section {
    font-family: 'Poppins', sans-serif;
    background-color: #f9fbfd;
    /* Light modern gray/blue tint */
    padding: 60px 20px;
    overflow: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

/* Header Styles */
.section-header {
    margin-bottom: 50px;
}

.sub-title {
    display: block;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #6366f1;
    /* Brand accent color */
    font-weight: 600;
    margin-bottom: 10px;
}

.main-title {
    font-size: 36px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 15px 0;
}

.highlight {
    color: #6366f1;
    position: relative;
    display: inline-block;
}

/* Optional: Underline effect for highlight */
.highlight::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    height: 8px;
    background: rgba(99, 102, 241, 0.2);
    z-index: -1;
}

.description {
    color: #6b7280;
    max-width: 600px;
    margin: 0 auto;
}

/* Major Awards Grid */
.major-awards-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 60px;
    flex-wrap: wrap;
}

.award-card {
    background: white;
    padding: 20px 30px;
    border-radius: 16px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
    display: flex;
    align-items: center;
    gap: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-width: 280px;
}

.award-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.award-card img {
    height: 50px;
    width: auto;
    object-fit: contain;
}

.award-info {
    text-align: left;
}

.award-info h3 {
    font-size: 18px;
    margin: 0;
    color: #111827;
}

.award-info p {
    margin: 0;
    font-size: 14px;
    color: #9ca3af;
}

/* Slider Styles */
.slider-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 20px 0;
    /* Mask for fading edges */
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

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

/* Pause animation on hover for better UX */
.slider-wrapper:hover .slider-track {
    animation-play-state: paused;
}

.slide {
    background: white;
    padding: 15px 25px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 200px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

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

.slide-content {
    text-align: left;
}

.slide h4 {
    margin: 0;
    font-size: 16px;
    color: #374151;
}

.stars {
    color: #fbbf24;
    /* Star yellow color */
    font-size: 12px;
    margin-top: 4px;
}

/* Animation Keyframes */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        /* Adjust this based on how many duplicates you have. 
       If you have 2 sets of items, -50% creates a seamless loop. */
        transform: translateX(-50%);
    }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .main-title {
        font-size: 28px;
    }

    .major-awards-grid {
        flex-direction: column;
        align-items: center;
    }

    .award-card {
        width: 100%;
        max-width: 350px;
    }
}

/* New Styles for the 'Modal-style' Contact Section */
.modern-contact-section {
    padding: 80px 0;
    background: #000000;
    font-family: 'Open Sans', sans-serif;
}

.consultation-card {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #ffffff;
    box-shadow: 0 15px 50px rgba(255, 255, 255, 0.1);
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}

.consultation-left {
    background-color: #151515;
    color: #fff;
    width: 40%;
    padding: 40px;
    position: relative;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #333;
}

.consultation-header h2 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
    line-height: 1.3;
}

.consultation-header p {
    font-size: 0.95rem;
    color: #ccc;
    margin-bottom: 30px;
}

.green-highlight {
    color: #7bc043;
    font-weight: 700;
    font-size: 1.4rem;
    margin-bottom: 10px;
    display: block;
}

.sub-green-text {
    color: #fff;
    margin-bottom: 25px;
    font-size: 1rem;
}

.checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
}

.checklist li {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    font-size: 1rem;
    color: #fff;
}

.checklist li i {
    color: #7bc043;
    font-size: 1.2rem;
    margin-right: 12px;
    border: 2px solid #7bc043;
    border-radius: 50%;
    padding: 3px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: auto;
}

.trust-badge {
    background: #fff;
    border-radius: 8px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
}

.trust-badge img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.trust-badge.full-width {
    grid-column: span 2;
}

.consultation-right {
    width: 60%;
    position: relative;
    background: #fff;
}

.form-container {
    padding: 40px 40px 20px 40px;
}

.form-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: #333;
    margin-bottom: 6px;
}

.form-label span.required {
    color: #dc3545;
}

.custom-input {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 12px 15px;
    font-size: 0.95rem;
    width: 100%;
    transition: all 0.3s;
}

.custom-input:focus {
    border-color: #7bc043;
    box-shadow: 0 0 0 3px rgba(123, 192, 67, 0.1);
    outline: none;
}

.phone-group {
    display: flex;
}

.phone-prefix {
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-right: none;
    border-radius: 6px 0 0 6px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    font-size: 0.9rem;
}

.phone-group input {
    border-radius: 0 6px 6px 0;
}

.captcha-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.captcha-label {
    font-weight: 700;
    font-size: 1.1rem;
    color: #000;
}

.submit-btn-blk {
    background: #1a1a1a;
    color: #fff;
    width: 100%;
    border: none;
    padding: 15px;
    border-radius: 6px;
    font-size: 1.1rem;
    font-weight: 700;
    transition: 0.3s;
    cursor: pointer;
}

.submit-btn-blk:hover {
    background: #333;
    transform: translateY(-2px);
}

.trust-bar {
    background-color: #eef6fc;
    padding: 20px 40px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f0f0f0;
}

.trust-item {
    display: flex;
    align-items: center;
    color: #000;
    font-size: 0.9rem;
    font-weight: 500;
}

.trust-item i {
    color: #7bc043;
    font-size: 1.3rem;
    margin-right: 10px;
}

@media (max-width: 991px) {
    .consultation-left, .consultation-right {
        width: 100%;
    }

    .consultation-left {
        padding: 30px;
    }

    .form-container {
        padding: 30px;
    }
}


/* Container Spacing */
.logo-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    /* Slightly larger gap for 3D space */
    margin-top: auto;
}

/* 3D Button Style */
.trust-badge {
    background: #ffffff;
    border-radius: 50px;
    padding: 8px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    flex: 1 1 calc(50% - 15px);

    /* THE 3D EFFECT */
    border: 1px solid #f0f0f0;
    box-shadow:
        0 5px 0 #dcdcdc,
        /* The solid 3D "side" grey */
        0 10px 10px rgba(0, 0, 0, 0.15);
    /* The shadow on the floor */

    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: translateY(0);
    cursor: pointer;
    position: relative;
    z-index: 1;
}

/* Hover State - Lifts up slightly and glows green */
.trust-badge:hover {
    transform: translateY(-3px);
    box-shadow:
        0 8px 0 #7bc043,
        /* 3D side turns Green */
        0 15px 25px rgba(123, 192, 67, 0.4);
    /* Glow effect */
    z-index: 2;
}

/* Active/Click State - Presses down */
.trust-badge:active {
    transform: translateY(5px);
    /* Moves down to cover the 3D side */
    box-shadow:
        0 0 0 #7bc043,
        /* 3D side disappears */
        inset 0 2px 5px rgba(0, 0, 0, 0.1);
    /* Inner shadow makes it look pressed in */
    border-color: #7bc043;
}

/* Image styling remains the same */
.trust-badge img {
    max-height: 24px;
    max-width: 100%;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.8;
    transition: 0.3s;
}

.trust-badge:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

.trust-badge.full-width {
    flex: 1 1 100%;
}

/* Container for the buttons */
.logo-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: auto;
}

/* The Button Look */
.trust-badge {
    background: #ffffff;
    border-radius: 50px;
    /* Makes them pill-shaped buttons */
    padding: 8px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px;
    flex: 1 1 calc(50% - 12px);
    /* Two buttons per row */

    /* Button visual styles */
    border: 2px solid transparent;
    /* Invisible border for hover transition */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    /* Pop-out shadow */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    /* Shows hand cursor */
    font-size: 0.8rem;
    font-weight: 700;
    color: #333;
    /* Text color if image fails */
}

/* Hover Effect */
.trust-badge:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 20px rgba(123, 192, 67, 0.4);
    /* Green glow shadow */
    border-color: #7bc043;
    /* Green border on hover */
}

/* Image Sizing */
.trust-badge img {
    max-height: 22px;
    /* Ensure logos fit nicely inside the button */
    max-width: 100%;
    object-fit: contain;
    filter: grayscale(100%);
    /* Optional: Make logos grey until hover */
    transition: 0.3s;
}

.trust-badge:hover img {
    filter: grayscale(0%);
    /* Color on hover */
}

/* Full Width Button (Forbes) */
.trust-badge.full-width {
    flex: 1 1 100%;
    /* Spans full width */
}


/* ================================
   HERO UI/UX V2 – MODERN SAAS
================================ */

.ui-hero-v2 {
    position: relative;
    overflow: hidden;
}

.ui-hero-v2::after {
    content: '';
    position: absolute;
    right: -150px;
    top: -150px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(120, 8, 208, 0.15), transparent 70%);
    z-index: 0;
}

.hero-badge {
    display: inline-block;
    background: rgba(120, 8, 208, 0.1);
    color: #7808d0;
    padding: 8px 18px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 20px;
}

.hero-title-bright span {
    color: #7808d0;
}

.hero-cta-group {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.btn-outline-bright {
    padding: 14px 36px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    border: 2px solid #7808d0;
    color: #7808d0;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-outline-bright:hover {
    background: #7808d0;
    color: #fff;
    transform: translateY(-2px);
}

.hero-trust {
    margin-top: 20px;
    font-size: 0.9rem;
    color: #555;
    font-weight: 600;
}

.hero-image-frame {
    background: #fff;
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
    display: inline-block;
}

.hero-main-img {
    max-width: 100%;
    animation: floatImage 6s ease-in-out infinite;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .hero-title-bright {
        font-size: 2.2rem;
        text-align: center;
    }

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

    .hero-cta-group {
        justify-content: center;
    }

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

.ufaq-modern-section {
    padding: 80px 0;
    background: var(--light-bg);
}

.ufaq-wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

.ufaq-intro {
    text-align: center;
    margin-bottom: 50px;
}

.ufaq-intro h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 15px;
}

.ufaq-intro p {
    font-size: 1.1rem;
    color: #666;
}

.ufaq-grid-modern {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.ufaq-card {
    background: #f9f9f9;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #eee;
    transition: 0.3s;
}

.ufaq-card.active {
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border-color: #7808d0;
}

.ufaq-head {
    padding: 20px 25px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    color: #333;
    font-size: 1.05rem;
    user-select: none;
}

.ufaq-head .icon-state {
    width: 24px;
    height: 24px;
    background: #e0e0e0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    color: #555;
}

.ufaq-card.active .ufaq-head .icon-state {
    background: #7808d0;
    color: #fff;
    transform: rotate(45deg);
}

.ufaq-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

.ufaq-body-inner {
    padding: 0 25px 25px 25px;
    color: #666;
    line-height: 1.6;
    font-size: 0.95rem;
}

@media(max-width: 768px) {
    .ufaq-grid-modern {
        grid-template-columns: 1fr;
    }
}