/* --- GLOBAL STYLES --- */
.hero-section{
margin-top:-40px;
}
.icons{
  width:60px;
  height:60px;
  border-radius:50%;
  background:#f5f5f5;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body.bg-custom {
    min-height: 100vh;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.8) 10%, rgba(118, 75, 162, 0.8) 90%), 
                url('images/bgss.png'); 
    background-blend-mode: overlay; 
    background-size: cover; 
    background-position: center; 
    background-attachment: fixed;
    background-size: auto 100%;
   background-repeat: repeat;
}

/* --- NAVBAR STYLES --- */
.main-header {
    background-color: #0d2a4a;
    height: 70px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    transition: all 0.4s ease;
}

.main-header.scrolled-up {
    background-color: rgba(255, 255, 255, 0.98) !important;
    height: 65px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}

.main-header.scrolled-up .nav-links a,
.main-header.scrolled-up .menu-toggle {
    color: #0d2a4a !important;
}

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

.logo { height: 45px; background: #fff; border-radius: 50%; padding: 2px; }

.nav-links { display: flex; list-style: none; align-items: center; }
.nav-links li { position: relative; padding: 0 10px; }
.nav-links a {
    color: white;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 12px;
    transition: 0.3s;
}

/* --- PREMIUM DROPDOWN --- */
.dropdown-content {
    display: none;
    position: absolute;
    top: 120%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: #ffffff;
    min-width: 250px;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    overflow: hidden;
    z-index: 10001;
    padding: 10px 0;
    opacity: 0;
    transition: all 0.3s ease;
    border: 1px solid rgba(0,0,0,0.05);
}

.dropdown:hover .dropdown-content {
    display: block;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.dropdown-content a {
    color: #333 !important;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 15px; /* Icon and Text space */
    border-bottom: 1px solid #f5f5f5;
    font-size: 14px;
}

.dropdown-content a i {
    font-size: 16px;
    color: #667eea; /* Theme Color for Icons */
    width: 20px;
    text-align: center;
    transition: 0.3s;
}

.dropdown-content a:hover {
    background-color: #f0f4ff;
    color: #0d2a4a !important;
    padding-left: 25px;
}

.dropdown-content a:hover i {
    transform: scale(1.2);
    color: #764ba2;
}

.dropdown-content a:last-child { border-bottom: none; }

/* --- MOBILE MENU --- */
.menu-toggle { display: none; color: white; font-size: 24px; cursor: pointer; }

@media (max-width: 992px) {
    .nav-links { gap: 0; }
    .nav-links a { font-size: 13px; }
}

@media (max-width: 768px) {
    .menu-toggle { display: block; }
    .nav-links {
        position: absolute;
        top: 70px;
        left: -100%;
        width: 100%;
        background: #0d2a4a;
        flex-direction: column;
        padding: 20px 0;
        height: 100vh;
        transition: 0.4s ease-in-out;
    }
    .nav-links.active { left: 0; }
    .nav-links li { width: 100%; padding: 10px 0; }
    
    .dropdown-content {
        position: static;
        transform: none;
        opacity: 1;
        display: none;
        width: 90%;
        margin: 5px auto;
        box-shadow: none;
        background: rgba(255,255,255,0.08);
    }
    .dropdown.open .dropdown-content { display: block; }
    .dropdown-content a { color: white !important; justify-content: center; }
    .dropdown-content a i { color: #a1c4fd; }
}

/* ------------------------------------------ 2. Section Slider GLOBAL RESET ---------------------------------------------------------- */
/* --- GLOBAL STYLES --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #0d2a4a;
    --accent-color: #ff9933; 
    --white: #ffffff;
    --transition: all 0.6s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #f0f2f5;
    color: #333;
    overflow-x: hidden;
}

/* --- HERO & SLIDER --- */
.hero-section {
    padding: 120px 0 60px;
    min-height: 100vh;
    background-size: cover; /* Isse image poori screen par fit hogi */
}

.section-title {
    text-align: center;
    margin-bottom: 40px;
}

.section-title p { color: #888; letter-spacing: 3px; font-size: 0.8rem; }
.section-title h2 { font-size: 2.5rem; color: var(--primary-color); }

.slider-container {
    display: flex;
    width: 95vw;
    max-width: 1200px;
    margin: 0 auto;
    height: 70vh;
}

.panel {
    position: relative;
    flex: 0.6;
    margin: 10px;
    border-radius: 40px;
    cursor: pointer;
    overflow: hidden;
    transition: var(--transition);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Removed extra glow/lighting */
}

.panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

/* THE INDIAN FLAG BADGE WITH CHAKRA */
.india-flag-badge {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        /* Ashoka Chakra in the middle */
        url('https://upload.wikimedia.org/wikipedia/commons/1/17/Ashoka_Chakra.svg') no-repeat center center,
        /* Flag Colors */
        linear-gradient(
            to bottom, 
            rgba(255, 153, 51, 0.9) 0%, 
            rgba(255, 153, 51, 0.9) 33.3%,
            rgba(255, 255, 255, 0.9) 33.3%, 
            rgba(255, 255, 255, 0.9) 66.6%,
            rgba(19, 136, 8, 0.9) 66.6%, 
            rgba(19, 136, 8, 0.9) 100%
        );
    background-size: 40px, 100%; /* Size of Chakra and Flag */
    z-index: 2;
    transition: opacity 0.5s ease;
}

.panel.active .india-flag-badge {
    opacity: 0; /* Pure image when active */
}

.panel h3 {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%) rotate(-90deg);
    transform-origin: left bottom;
    white-space: nowrap;
    z-index: 10;
    color: white;
    font-size: 1.2rem;
    transition: var(--transition);
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}

.panel.active h3 {
    transform: rotate(0);
    left: 40px;
    bottom: 40px;
    font-size: 2rem;
}

.icon {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--white);
    color: var(--primary-color);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.panel.active {
    flex: 5;
    border-radius: 20px;
}

/* For Mobile Chakra Alignment */
@media (max-width: 768px) {
    .india-flag-badge {
        background: 
            url('https://upload.wikimedia.org/wikipedia/commons/1/17/Ashoka_Chakra.svg') no-repeat center center,
            linear-gradient(
                to right, 
                rgba(255, 153, 51, 0.8), 
                rgba(255, 255, 255, 0.8), 
                rgba(19, 136, 8, 0.8)
            );
        background-size: 30px, 100%;
    }
}

/* ----------------------------------------- 3. Section Loan Info GLOBAL RESET --------------------------------------------------- */
/* Sticky Navbar Classes */
/* --- LOAN INFO SECTION STYLES --- */
.loan-info-container { 
    display: flex;  
    width: 95%; 
    max-width: 1150px; 
    margin: 60px auto; 
    gap: 30px; 
}

.loan-card { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    border-radius: 30px; 
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.3); 
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.loan-card:hover { transform: translateY(-15px); }

.orange-bgs { background: rgba(221, 35, 35, 0.5); }
.green-bgs { background: rgba(69, 180, 17, 0.5); }

.card-header { 
    padding: 35px; 
    display: flex; 
    align-items: flex-start; 
    gap: 25px; 
}

.loan-main-icon { 
    font-size: 55px; 
    color: #fff; 
    text-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.card-text h3 { 
    color: #fff; 
    margin-bottom: 20px; 
    font-size: 1.4rem; 
    font-weight: 700;
}

.card-text p { 
    color: #fff; 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    margin-bottom: 12px;
    font-size: 0.95rem;
    font-weight: 500;
}

/* List Icons Styling */
.card-text p i {
    width: 20px;
    text-align: center;
    font-size: 14px;
    color: #ffffff;
}

.loan-btn { 
    margin-top: 20px; 
    padding: 14px 40px; 
    border-radius: 50px; 
    border: none; 
    font-weight: 800; 
    text-transform: uppercase;
    cursor: pointer; 
    background: #ffffff; 
    color: #333;
    transition: 0.3s;
}

.loan-btn:hover { background: #f0f0f0; transform: scale(1.05); }

.card-footer { 
    padding: 25px; 
    background: rgba(0,0,0,0.1);
    text-align: center; 
    color: #fff;
    font-weight: 600;
}

/* Responsive Fix */
@media (max-width: 768px) {
    .loan-info-container { flex-direction: column; }
    .card-header { flex-direction: column; align-items: center; text-align: center; }
    .card-text p { justify-content: center; }
}

/* -----------------------4. Udyam Registered (MSME), Government of India | UDYAM-DL-02-0107330 --------------- */
/* --- MSME SECTION STYLING --- */
/* Layout Reset to prevent damage */
.nbfc-section {
    padding: 60px 20px;
    background: transparent;
    display: flex;
    justify-content: center;
}

.nbfc-info-container {
    width: 100%;
    max-width: 1100px;
    background: rgba(255, 255, 255, 0.08); /* Semi-transparent */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
}

.nbfc-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap; /* Mobile par apne aap niche aa jayega */
}

/* Logo Styling with Animation */
.nbfc-logo-area {
    position: relative;
    flex: 1;
    min-width: 250px;
    display: flex;
    justify-content: center;
}

.msme-img {
    width: 100%;
    max-width: 200px;
    height: auto;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.3));
    animation: floatAnim 3s ease-in-out infinite;
}

@keyframes floatAnim {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Text Area */
.nbfc-text-area {
    flex: 2;
    min-width: 300px;
    color: white;
}

.nbfc-title {
    font-size: 2rem;
    margin-bottom: 15px;
    color: #667eea;
    font-weight: 700;
}

.nbfc-para {
    line-height: 1.7;
    font-size: 1.1rem;
    margin-bottom: 20px;
    opacity: 0.9;
}

/* Badge Styling */
.nbfc-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(40, 167, 69, 0.2);
    border: 1px solid #28a745;
    padding: 10px 20px;
    border-radius: 50px;
    color: #28a745;
    font-weight: 600;
}

/* Responsive Fix */
@media (max-width: 768px) {
    .nbfc-content {
        flex-direction: column;
        text-align: center;
    }
    .nbfc-title { font-size: 1.5rem; }
    .nbfc-badge { font-size: 0.9rem; }
}
/* -----------------------5. How to Learn & Earn with the Latest Technologies in Digital Marketing, Freelancing, and Affiliate Marketing?  --------------- */
/* --- 5. LEARN & EARN SECTION --- */
/* --- RESET & GLOBAL --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #f4f7fe; }

.p2p-info-section {
    padding: 60px 20px;
    display: flex;
    justify-content: center;
}

.p2p-container {
    width: 100%;
    max-width: 1100px;
    background: #ffffff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.p2p-header { text-align: center; margin-bottom: 40px; }
.p2p-title { font-size: 28px; color: #0d2a4a; line-height: 1.4; }
.p2p-title span { color: #ff5e00; }

.p2p-divider { display: flex; justify-content: center; gap: 8px; margin-top: 15px; }
.dot { width: 8px; height: 8px; border-radius: 50%; }
.dot.orange { background: #ff5e00; }
.dot.green { background: #28a745; }

/* Flex Layout */
.p2p-content {
    display: flex;
    gap: 40px;
    align-items: center;
    flex-wrap: wrap; /* Tablet/Mobile support */
}

.p2p-image-area { flex: 1; min-width: 300px; text-align: center; }
.main-img { width: 100%; max-width: 400px; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.img-tagline { margin-top: 15px; font-weight: bold; font-size: 20px; color: #ff5e00; }
.img-tagline span { color: #28a745; }

.p2p-text-area { flex: 1.2; min-width: 300px; }
.info-box { margin-bottom: 25px; }
.info-box h3 { color: #0d2a4a; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.info-box h3 i { color: #ff5e00; }
.info-box p { color: #555; line-height: 1.6; }

.skill-list { list-style: none; margin: 15px 0; }
.skill-list li { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; color: #333; font-weight: 500; }
.skill-list li i { color: #28a745; }

.highlight-box { background: #0d2a4a; color: white !important; padding: 15px; border-radius: 10px; font-size: 14px; }

/* Responsive */
@media (max-width: 768px) {
    .p2p-content { flex-direction: column; text-align: center; }
    .skill-list li { justify-content: center; }
}

/* ----------------------------------------- <!-- 6. OUR HAPPY CLIENTS --> --------------------------------------------------- */

:root {
    --accent: #ff4b2b;
    --dark: #0f172a;
    --glass: rgba(255, 255, 255, 0.75);
    --transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Poppins', sans-serif; background: #f1f5f9; overflow-x: hidden; }

.premium-slider-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 20px;
    position: relative;
    
}

.modern-slider-container {
    width: 100%;
    max-width: 1050px;
    background: var(--glass);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 40px;
    display: flex;
    align-items: center;
    box-shadow: 0 40px 100px rgba(0,0,0,0.1);
    position: relative;
    z-index: 5;
    transform-style: preserve-3d;
}

.card-stack { width: 100%; position: relative; min-height: 450px; }

.card-item {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    padding: 40px;
}

.card-item.active { opacity: 1; visibility: visible; }

/* 3D Visuals */
.card-visual { flex: 1; position: relative; left: -40px; }
.card-img {
    width: 380px;
    height: 380px;
    background-size: cover;
    background-position: center;
    border-radius: 30px;
    border: 10px solid #fff;
    box-shadow: 20px 30px 50px rgba(0,0,0,0.2);
    animation: float 4s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

/* Typography */
.card-content { flex: 1.2; }
.step-tag { color: var(--accent); font-weight: 800; letter-spacing: 2px; font-size: 0.8rem; }
.card-content h2 { font-size: 3rem; color: var(--dark); line-height: 1.1; margin: 15px 0; }
.card-content h2 span { color: var(--accent); }
.card-content h3 { font-size: 1.5rem; color: var(--dark); line-height: 1.1; margin: 8px 0; }
.card-content h3 span { color: var(--accent); }
.card-content p { color: #64748b; line-height: 1.6; margin-bottom: 25px; }

.premium-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--accent);
    color: white;
    padding: 14px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    box-shadow: 0 10px 20px rgba(255, 75, 43, 0.3);
    transition: 0.3s;
}
.premium-btn:hover { transform: translateY(-3px); box-shadow: 0 15px 25px rgba(255, 75, 43, 0.4); }

/* Sidebar Nav */
.nav-sidebar { padding: 0 30px; border-left: 1px solid rgba(0,0,0,0.05); }
.dots-indicator { display: flex; flex-direction: column; gap: 12px; }
.dot { width: 10px; height: 10px; background: #cbd5e1; border-radius: 50%; cursor: pointer; transition: 0.4s; position: relative; }
.dot.active { background: var(--accent); transform: scale(1.4); }
.dot.active::after { content: ''; position: absolute; inset: -5px; border: 2px solid var(--accent); border-radius: 50%; animation: pulse 1.5s infinite; }

@keyframes pulse { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(2.5); } }

/* Background Blob */
.blob-bg { position: absolute; top: -10%; left: -10%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(255,75,43,0.15) 0%, transparent 70%); z-index: -1; }

/* Mobile Responsive */
@media (max-width: 768px) {
    .modern-slider-container { flex-direction: column; text-align: center; margin-top: 80px; padding-bottom: 30px; }
    .card-visual { left: 0; top: -60px; margin-bottom: -30px; }
    .card-img { width: 220px; height: 260px; }
    .card-content { padding: 0 20px; }
    .card-content h2 { font-size: 2rem; }
    .nav-sidebar { border: 0; margin-top: 20px; }
    .dots-indicator { flex-direction: row; }
}


/* Features List */
.features {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    margin-bottom: 25px;
}

.features ul {
    list-style: none;
    padding: 0;
    flex: 1;
    min-width: 220px;
}

.features li {
    margin-bottom: 10px;
    font-size: 16px;
    color: #334155;
    display: flex;
    align-items: center;
}

.star {
    color: #28a745;
    margin-right: 8px;
    font-size: 16px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .features {
        flex-direction: column;
        gap: 10px;
    }

    .features ul {
        min-width: 100%;
    }
}
/* --- Responsive Adjustments --- */

/* Laptops & Tablets (1024px to 769px) */
@media (max-width: 1024px) {
    .modern-slider-container { max-width: 950px; }
    .card-img { max-width: 350px; }
}

/* Tablets & Mobile (768px and below) */
@media (max-width: 768px) {
    .modern-slider-container { flex-direction: column; border-radius: 30px; }
    
    .card-item {
        grid-template-columns: 1fr;
        text-align: center;
        padding-top: 100px; /* Space for the floating image */
    }
    
    .card-visual {
        position: absolute;
        top: -60px;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
    }
    
    .card-img { width: 200px; height: 200px; }
    
    .card-content { align-items: center; margin-top: 140px; }
    
    .nav-sidebar { 
        border: 0; 
        border-top: 1px solid rgba(0,0,0,0.05);
        padding: 20px; 
        justify-content: center;
    }
    
    .dots-indicator { flex-direction: row; }
    
    .features { justify-items: start; text-align: left; }
}

/* Small Mobiles (320px - 480px) */
@media (max-width: 480px) {
    .card-img { width: 160px; height: 160px; }
    .card-content h2 { font-size: 1.6rem; }
    .premium-btn { width: 100%; justify-content: center; }
}
/* Unique Animated Border CSS */
#sliderContainer.live-border-active {
    position: relative;
    border: none; /* Purana border hata dega */
    background: #fff; /* Inner background */
    padding: 3px; /* Border ki thickness */
    background-clip: padding-box;
    overflow: hidden;
}

#sliderContainer.live-border-active::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg,
        transparent,
        #0bd62d,
        #0a69e6,
        #ff4b2b,
        #5604da,
        #c1eb09,
        #a39a15,
        #0b8355,
        #06a3d3,
        transparent 30%
    );
    animation: rotate-border 4s linear infinite;
    z-index: -2;
}

#sliderContainer.live-border-active::after {
    content: '';
    position: absolute;
    inset: 4px; /* Border thickness control */
    background: white; /* Card ka asli background color */
    border-radius: 36px; /* Container ke radius se thoda kam */
    z-index: -1;
}

@keyframes rotate-border {
    100% {
        transform: rotate(360deg);
    }
}
/* --- UNIQUE ANIMATED LIVE BORDER --- */
.modern-slider-container.live-border-active {
    position: relative;
    padding: 4px; /* Border ki thickness */
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
    border: none; /* Default border remove kiya */
    z-index: 1;
}

/* Rotating Gradient Background */
.modern-slider-container.live-border-active::before {
    content: '';
    position: absolute;
    z-index: -2;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-color: #f1f5f9;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    /* Border Colors: Orange/Red Gradient */
    background-image: conic-gradient(from 0deg, transparent 20%, #ff4b2b, #ff9068, #ff4b2b, transparent 80%);
    animation: rotateBorder 4s linear infinite;
}

/* Inner Background Mask to make it look like a border */
.modern-slider-container.live-border-active::after {
    content: '';
    position: absolute;
    z-index: -1;
    left: 4px;
    top: 4px;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    background: white; /* Card ka inner color */
    border-radius: 36px; /* Smooth corners */
}

@keyframes rotateBorder {
    100% {
        transform: rotate(360deg);
    }
}

/* Mobile Fix for Border Radius */
@media (max-width: 768px) {
    .modern-slider-container.live-border-active::after {
        border-radius: 26px;
    }
}
/* -----------------------7. OUR EXPERTS ARE READY TO TRANSFORM YOUR BUSINESS --------------- */

/* --- 1. Variables & Reset --- */
:root {
    --primary: #007bff;
    --accent: #ff5e00;
    --success: #28a745;
    --dark: #0d2a4a;
    --light-bg: #f8f9fa;
    --text-muted: #555;
    --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--dark);
    background-color: #fff;
    overflow-x: hidden;
}

/* --- 2. Layout Containers --- */
.container {
    width: 90%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 80px 0;
}

/* --- 3. Section Header --- */
.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.main-title {
    font-size: clamp(1.8rem, 4vw, 2.5rem); /* Fluid Typography */
    font-weight: 800;
    text-transform: uppercase;
    color: var(--dark);
    max-width: 800px;
    margin: 0 auto;
}

.title-underline {
    width: 60px;
    height: 4px;
    background: var(--accent);
    margin: 20px auto;
}

/* --- 4. The Grid (Modern CSS Grid) --- */
.experts-grid {
    display: grid;
    gap: 2px; /* This creates the "line" look between items */
    background-color: #e0e0e0; /* The "line" color */
    border: 1px solid #e0e0e0;
}

/* Responsive Grid Logic */
@media (min-width: 320px) { .experts-grid { grid-template-columns: 1fr; } }
@media (min-width: 768px) { .experts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .experts-grid { grid-template-columns: repeat(4, 1fr); } }

/* --- 5. Card Styling --- */
.expert-card {
    background: white;
    padding: 40px 30px;
    position: relative;
    transition: var(--transition);
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.expert-num {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 20px;
    display: block;
    transition: var(--transition);
}

.expert-card p {
    font-size: 0.95rem;
    color: var(--text-muted);
}

/* --- 6. Animations & Hover Effects --- */
.expert-card:hover {
    background-color: var(--primary);
    transform: translateY(-5px);
    z-index: 5;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.expert-card:hover .expert-num,
.expert-card:hover p {
    color: white;
}

/* Dynamic Hover Colors based on index */
.expert-card:nth-child(4n+1):hover { background-color: var(--accent); }
.expert-card:nth-child(4n+3):hover { background-color: var(--success); }
.expert-card:nth-child(4n+4):hover { background-color: #6f42c1; }

/* Running Line Animation (Optional Polish) */
@keyframes flow {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* --- 7. Ultra Wide Optimizations --- */
@media (min-width: 1920px) {
    .container { max-width: 1600px; }
    .main-title { font-size: 3rem; }
}
/* --- 1. Animations --- */
@keyframes lineFlowVertical {
    from { background-position: 0 0; }
    to { background-position: 0 40px; }
}

@keyframes lineFlowHorizontal {
    from { background-position: 0 0; }
    to { background-position: 40px 0; }
}

/* --- 2. Experts Grid Container --- */
.experts-grid {
    display: grid;
    /* Desktop: 4 Columns */
    grid-template-columns: repeat(4, 1fr);
    background: #fff;
    position: relative;
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
}

/* --- 3. Expert Card Styles --- */
.expert-card {
    background: white;
    padding: 40px 30px;
    position: relative;
    transition: var(--transition);
    cursor: pointer;
}

/* --- 4. Vertical Running Line (Right Side) --- */
.expert-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    background-image: linear-gradient(to bottom, var(--primary) 50%, transparent 50%);
    background-size: 2px 15px;
    background-repeat: repeat-y;
    animation: lineFlowVertical 1s linear infinite;
    z-index: 2;
}

/* --- 5. Horizontal Running Line (Bottom Side) --- */
.expert-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-image: linear-gradient(to right, var(--primary) 50%, transparent 50%);
    background-size: 15px 2px;
    background-repeat: repeat-x;
    animation: lineFlowHorizontal 1s linear infinite;
    z-index: 2;
}

/* --- 6. Smart Cleaning (Edges Se Lines Hatana) --- */

/* Desktop (4 Columns): Last column ki right line hide karo */
@media (min-width: 1024px) {
    .expert-card:nth-child(4n)::after { display: none; }
}

/* Tablet (2 Columns): Har 2nd card ki right line hide karo */
@media (min-width: 768px) and (max-width: 1023px) {
    .experts-grid { grid-template-columns: repeat(2, 1fr); }
    .expert-card:nth-child(2n)::after { display: none; }
}

/* Mobile (1 Column): Right line hide karo, sirf bottom line dikhao */
@media (max-width: 767px) {
    .experts-grid { grid-template-columns: 1fr; }
    .expert-card::after { display: none; }
    .expert-card:last-child::before { display: none; } /* Last item ke neeche line nahi */
}

/* --- 7. Hover Effects --- */
.expert-card:hover {
    background-color: var(--primary);
    transform: scale(1.02);
    z-index: 10;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

/* Hover par lines ka color change ya hide (Luxury Look) */
.expert-card:hover::after, 
.expert-card:hover::before {
    background-image: linear-gradient(to bottom, #fff 50%, transparent 50%);
    opacity: 0.5;
}

.expert-card:hover .expert-num,
.expert-card:hover p {
    color: white !important;
}
/* <!-- ------------------------------------8. Why Should You Get Leads from Skill Set Success Pro?-------------------------- --> */
/* --- Base Styles --- */
.why-lend-section {
    padding: 80px 0;
    background-color: transparent;
    font-family: 'Inter', sans-serif;
}

.why-lend-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    padding: 20px;
}

/* --- The Master Card Styling --- */
.lend-card {
    background: #ffffff;
    padding: 40px 30px;
    border-radius: 25px;
    border: 1px solid #eee;
    text-align: center;
    transition: all 0.4s ease;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

/* --- Different Color Config --- */
.orange-glow { --glow-clr: #ff5e00; }
.blue-glow   { --glow-clr: #007bff; }
.green-glow  { --glow-clr: #28a745; }
.purple-glow { --glow-clr: #6f42c1; }

/* --- Hover Effects --- */
.lend-card:hover {
    transform: translateY(-15px);
    border-color: var(--glow-clr);
    /* Card ke peeche colored shadow/glow */
    box-shadow: 0 15px 40px -10px rgba(0, 0, 0, 0.1), 
                0 0 25px var(--glow-clr);
    /* Agar aapko pura card background color chahiye hover par, to ye line uncomment karein: */
    /* background-color: var(--glow-clr); */
}

/* Icon box changes on hover */
.lend-icon {
    width: 70px; height: 70px;
    margin: 0 auto 20px;
    background: #f8f8f8;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.lend-card:hover .lend-icon {
    background: var(--glow-clr);
    transform: scale(1.1) rotate(10deg);
}

/* Icon image color white on hover */
.lend-card:hover .lend-icon img {
    filter: brightness(0) invert(1);
}

/* Text color change on hover */
.lend-card:hover h3 {
    color: var(--glow-clr);
}

/* Modern Border Glow (Subtle) */
.lend-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 25px;
    border: 2px solid transparent;
    transition: 0.3s;
}

.lend-card:hover::after {
    border-color: var(--glow-clr);
    opacity: 0.5;
}

/* <!-- ----------------------------------------------------9. Founder & CEO, Skill Set Success Pro----------------------------------- --> */

/* --- Animated Border Styling --- */
.animated-border-wrapper {
    position: relative;
    padding: 3px; /* Border ki motai (thickness) yahan se set karein */
    background: linear-gradient(90deg, #5c2b21, #f54ecbad, #4df155, #d4af37);
    background-size: 300% 300%;
    border-radius: 23px; /* Container ke radius se thoda zyada */
    animation: borderMove 4s ease infinite; /* Color chalne wali animation */
    max-width: 1056px; /* Container width + padding */
    margin: 0 auto;
}

/* Border animation keyframes */
@keyframes borderMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* --- Aapka Original Container modification --- */
.container {
    width: 100%; /* Full width within wrapper */
    max-width: 1050px;
    background: var(--white);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
    position: relative;
    z-index: 1;
}

/* --- Baaki sab same rahega --- */
:root {
    --primary-color: #5c2b21;
    --dark-color: #1a0b0b;
    --text-main: #333;
    --text-light: #555;
    --white: #ffffff;
}

/* ... baki purana code yahan continue karein ... */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #f4f4f4;
    display: flex;
    flex-direction: column; /* Sabse important: Items ko ek ke niche ek dikhayega */
    align-items: center;    /* Content ko horizontally center rakhega */
    min-height: 100vh;
    width: 100%;            /* auto ki jagah 100% karein */
    margin: 0;
    overflow-x: hidden;
}

.container {
    width: 95%;
    max-width: 1050px;
    background: var(--white);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
}

.founder-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 50px;
    align-items: center;
}

/* IMAGE SECTION - NO GAYAB ANIMATION */
.founder-visual {
    display: flex;
    justify-content: center;
    opacity: 1 !important; /* Hamesha dikhega */
    transform: none !important;
}

.image-stack {
    position: relative;
    width: 300px;
    height: 300px;
}

.main-image {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 10px 10px 25px rgba(0,0,0,0.15);
}

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

.deco-box.top-left {
    position: absolute;
    width: 80px;
    height: 120px;
    background-color: var(--dark-color);
    top: -20px;
    left: -20px;
    z-index: 1;
}

.bottom-right-deco {
    position: absolute;
    width: 80px;
    height: 120px;
    background-color: var(--dark-color);
    bottom: -20px;
    right: -20px;
    z-index: 1;
}

/* CONTENT SECTION */
.founder-info {
    text-align: center;
}

.founder-name {
    font-family: 'Playfair Display', serif;
    font-size: 38px;
    color: var(--dark-color);
    margin-bottom: 5px;
}

.founder-role {
    font-size: 19px;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 4px;
}

.founder-role span { color: var(--primary-color); }

.founder-tagline {
    font-style: italic;
    color: var(--primary-color);
    font-size: 16px;
    margin-bottom: 0;
}

/* DIVIDER */
.founder-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 18px 0;
}

.founder-divider .line {
    width: 40px;
    height: 1.5px;
    background: var(--primary-color);
    opacity: 0.2;
}

.founder-divider .dot {
    width: 5px;
    height: 5px;
    background: var(--primary-color);
    border-radius: 50%;
}

/* ANIMATED WHITE LIGHT LINE (SCREENSHOT STYLE) */
.shimmer-line-wrapper {
    position: relative;
    width: 100%;
    height: 3px;
    background-color: var(--primary-color); /* Dark Base */
    overflow: hidden;
    margin: 15px 0;
    border-radius: 10px;
}

.white-light-runner {
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    /* Bright White Light Effect */
    background: linear-gradient(
        90deg, 
        transparent, 
        rgba(255, 255, 255, 0) 20%, 
        rgba(255, 255, 255, 0.8) 50%, 
        rgba(255, 255, 255, 0) 80%, 
        transparent
    );
    animation: whiteRunner 2s infinite ease-in-out;
}

@keyframes whiteRunner {
    0% { left: -100%; }
    100% { left: 100%; }
}

.stats-headline {
    font-size: 18px;
    color: var(--dark-color);
    margin-bottom: 5px;
}

.growth-text {
    font-size: 16px;
    color: var(--text-main);
    margin-top: 10px;
}

/* MOBILE RESPONSIVE */
@media (max-width: 850px) {
    .founder-grid { grid-template-columns: 1fr; gap: 40px; }
    .image-stack { width: 260px; height: 260px; }
    .container { padding: 30px 20px; }
}
/* <!-- -------------------------------------10. SERVICES WE PROVIDE------------------------------------------------- --> */

/* =============================
   GLOBAL STYLES
============================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:'Poppins',sans-serif;
background:#f4f6f9;
}


/* =============================
   SERVICES SECTION
============================= */

.services-section{
padding:60px 20px;
display:flex;
justify-content:center;
}

.services-container{
max-width:1200px;
width:100%;
text-align:center;
background:#fff;
padding:40px 25px;
border-radius:12px;
border:1px solid #e6e6e6;
box-shadow:0 10px 25px rgba(0,0,0,0.05);
}


/* =============================
   HEADINGS
============================= */

.service-subtitle{
font-size:14px;
letter-spacing:2px;
color:#777;
margin-bottom:10px;
}

.service-main-title{
font-size:32px;
font-weight:700;
color:#1a237e;
margin-bottom:10px;
}

.service-main-title span{
color:#c5a059;
}

.service-description{
max-width:700px;
margin:auto;
color:#666;
line-height:1.6;
margin-bottom:40px;
}


/* =============================
   SLIDER
============================= */

.slider-wrapper{
overflow:hidden;
width:100%;
}

.service-slide{
display:none;
gap:25px;
justify-content:center;
animation:fadeIn 0.6s ease;
}

.service-slide.active{
display:flex;
}


/* =============================
   CARD
============================= */

.service-card{
flex:1;
position:relative;
border-radius:12px;
overflow:hidden;
transition:transform .3s;
}

.service-card:hover{
transform:translateY(-5px);
}

.img-box{
width:100%;
height:320px;
overflow:hidden;
}

.img-box img{
width:100%;
height:100%;
object-fit:cover;
transition:transform .5s;
}

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


/* =============================
   LABEL
============================= */

.label{
position:absolute;
bottom:15px;
left:50%;
transform:translateX(-50%);
background:white;
padding:12px 18px;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
font-weight:600;
color:#1a237e;
width:85%;
}


/* =============================
   DOTS
============================= */

.dots-container{
margin-top:30px;
}

.dot{
height:12px;
width:12px;
background:#bbb;
border-radius:50%;
display:inline-block;
margin:0 6px;
cursor:pointer;
transition:.3s;
}

.dot.active{
background:#09c256;
transform:scale(1.2);
}


/* =============================
   ANIMATION
============================= */

@keyframes fadeIn{
from{
opacity:0;
transform:translateX(40px);
}
to{
opacity:1;
transform:translateX(0);
}
}


/* =============================
   RESPONSIVE DESIGN
============================= */

@media (max-width:1024px){

.service-main-title{
font-size:28px;
}

}

@media (max-width:768px){

.service-slide{
flex-direction:column;
}

.img-box{
height:260px;
}

}

@media (max-width:480px){

.services-container{
padding:25px 15px;
}

.service-main-title{
font-size:24px;
}

.img-box{
height:220px;
}

}

/* <!-- -------------------------------------11. Our Phylosphy------------------------------------------------- --> */
/* Section Title */

.mvo-title{
text-align:center;
margin-bottom:50px;
color:#333;
}

/* Container */

.mvo-container{
display:flex;
justify-content:center;
align-items:center;
gap:30px;
max-width:1200px;
margin:80px auto;
flex-wrap:wrap;
}

/* Circle */

.mvo-circle{

position:relative;
width:280px;
height:280px;

border-radius:50%;
border:12px solid;

background:#ffffff;

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;

text-align:center;
padding:25px;

box-shadow:0 10px 25px rgba(0,0,0,0.1);

transition:all 0.3s ease;

cursor:pointer;

animation:float 4s ease-in-out infinite;

}

/* Colors */

.mission{
border-color:#8cb369;
animation-delay:0s;
}

.values{
border-color:#43a6d8;
animation-delay:1s;
}

.vision{
border-color:#e36422;
animation-delay:2s;
}

/* Text Colors */

.mission-text{
color:rgba(69,180,17,0.4);
}

.vision-text{
color:chocolate;
}

.values-text{
color:#0da1e6;
}

/* Floating Animation */

@keyframes float{

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

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

}

/* Bubble Pop Hover */

@keyframes bubblePop{

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

45%{
transform:scale(1.2);
}

50%{
transform:scale(1.3);
opacity:0.5;
}

100%{
transform:scale(1.6);
opacity:0;
visibility:hidden;
}

}

.mvo-circle:hover{
animation:bubblePop 0.4s forwards;
}

/* Typography */

.mvo-circle h2{
font-size:20px;
color:#333;
margin-bottom:10px;
}

.mvo-circle p{
font-size:14px;
line-height:1.4;
}

/* Mobile */

@media (max-width:768px){

.mvo-container{
gap:20px;
}

.mvo-circle{
width:250px;
height:250px;
animation:none;
}

}
/* Smooth transition */

.mvo-circle{
transition: transform 0.4s ease, box-shadow 0.4s ease;
position:relative;
overflow:hidden;
}

/* Glow Hover Effect */

.mvo-circle::before{

content:"";
position:absolute;

top:-50%;
left:-50%;

width:200%;
height:200%;

background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,0.5),
transparent
);

transform:rotate(25deg);
opacity:0;

transition:0.6s;

}

/* Hover Animation */

.mvo-circle:hover{

transform:translateY(-12px) scale(1.05);
box-shadow:0 20px 40px rgba(0,0,0,0.2);

}

.mvo-circle:hover::before{

opacity:1;
left:100%;

}

/* Icon animation */

.mvo-icon i{

transition:transform 0.4s ease;

}

.mvo-circle:hover .mvo-icon i{

transform:rotate(360deg) scale(1.2);

}

/* <!--  ---------------------------------------------------12. Top Performers------------------------------------------------- -->*/

body{
margin:0;
font-family:Arial;
}

.container{
max-width:100%;
margin:auto;
padding:40px 20px;
text-align:center;
background-color:   #FCF6F5;
}

/* VIEWPORT */

.slider-viewport{
position:relative;
overflow:hidden;
width:100%;
height:170px;
display:flex;
align-items:center;
justify-content:center;
}

/* BLUE LINE */

.blue-line{
position:absolute;
top:50%;
left:0;
width:100%;
height:3px;
background:#ee6c02;
transform:translateY(-50%);
z-index:1;
}

/* TRACK */

.avatar-track{
display:flex;
width:100%;
transition:transform 0.8s ease;
z-index:2;
}

/* ITEMS */

.avatar-item{
flex:0 0 33.33%;
display:flex;
justify-content:center;
align-items:center;
transition:transform 0.4s;
}

/* IMAGE */

.avatar-item img{
width:90px;
height:90px;
border-radius:50%;
border:4px solid #ff6f00;
background:#fff;
object-fit:cover;
transition:all 0.4s;
}

/* CENTER IMAGE ZOOM */

.avatar-item.active img{
transform:scale(1.35);
border:5px solid #e65100;
box-shadow:0 10px 25px rgba(0,0,0,0.25);
}

/* MOBILE */

@media(max-width:480px){

.avatar-item img{
width:70px;
height:70px;
}

}
/* <!-- ===============================   ----------------13. Why Choose Skill Set Success Pro--------------- ================================ --> */
:root {
    --saffron: linear-gradient(135deg, #FF9933, #FFB366);
    --white: linear-gradient(135deg, #ffffff, #e0e0e0);
    --green: linear-gradient(135deg, #138808, #2ecc71);
    --text-dark: #1a5656;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Poppins', sans-serif;
    background: #f4f7f6;
    overflow-x: hidden;
    perspective: 1000px; /* Essential for 3D effects */
}

.shivoham-timeline { padding: 60px 20px; }

.main-title {
    text-align: center;
    color: var(--text-dark);
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: 80px;
    font-weight: 800;
}

.timeline-wrapper {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

/* Vertical Lines */
.lines-container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    display: flex;
    gap: 50px;
    z-index: 1;
}

.v-line {
    width: 5px;
    height: 100%;
    background: #ddd;
    position: relative;
    border-radius: 10px;
}

.fill-effect {
    position: absolute;
    top: 0;
    width: 100%;
    height: 0%; /* Controlled by JS */
    background: #ee0808;
    box-shadow: 0 0 15px #ee0808;
}

/* Dots Styling */
.square-dot {
    position: absolute;
    width: 18px;
    height: 18px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 4px;
    z-index: 5;
    border: 2px solid #fff;
}
.saffron-dot { background: #FF9933; top: 0; }
.white-dot { background: #fff; top: 50%; transform: translate(-50%, -50%); border-color: #ddd; }
.green-dot { background: #138808; bottom: 0; }

/* Grid & Cards */
.t-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 150px;
    margin-bottom: 100px;
}

.t-card {
    padding: 35px;
    border-radius: 20px;
    position: relative;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1), inset 0 2px 5px rgba(255,255,255,0.5);
    border: 1px solid rgba(255,255,255,0.3);
    overflow: hidden;
}

/* 3D Animations */
.t-card:hover {
    transform: translateY(-15px) rotateX(10deg) scale(1.05);
    box-shadow: 0 25px 50px rgba(0,0,0,0.2);
}

.saffron-3d { background: var(--saffron); color: #fff; }
.white-3d { background: var(--white); color: var(--text-dark); }
.green-3d { background: var(--green); color: #fff; }

.left-card { text-align: right; }
.right-card { text-align: left; }

/* Shine Effect on Hover */
.t-card::after {
    content: '';
    position: absolute;
    top: -50%; left: -100%;
    width: 50%; height: 200%;
    background: rgba(255,255,255,0.3);
    transform: rotate(30deg);
    transition: 0.5s;
}
.t-card:hover::after { left: 150%; }

/* Mobile View (Responsive) */
@media (max-width: 768px) {
    .lines-container { left: 20px; transform: none; gap: 15px; }
    .t-row {
        grid-template-columns: 1fr;
        gap: 30px;
        padding-left: 60px;
    }
    .left-card { text-align: left; }
    .main-title { font-size: 1.8rem; }
}
/* <!-- ---------------------------------------------14. Scroll-Triggered Progress Bar animation hai------------------------ --> */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(135deg, #eef2f3, #8e9eab); /* Premium Grey-Blue Gradient */
    color: #2d5a52;
    width: auto;
}

.top-gap, .bottom-gap {
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.stats-section {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 40px 20px;
}

.glass-container {
    width: 100%;
    max-width: auto; /* Thoda sa badhaya taki 2 columns achhe dikhein */
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    padding: 50px 40px;
    border-radius: 30px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.15);
    border: 1px solid rgba(255,255,255,0.6);
}

.section-title {
    text-align: center;
    margin-bottom: 50px;
    font-size: clamp(24px, 5vw, 36px);
    font-weight: 800;
}

/* ========================================================
   2 LEFT - 2 RIGHT GRID SYSTEM (Ultra Responsive)
   ======================================================== */
.skills-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 0 50px; /* Beech me 50px ka space */
}

.skill-box { margin-bottom: 35px; }

.skill-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-weight: 600;
    font-size: 18px;
}

.val { color: #d95400; font-weight: 800; }

.progress-line {
    height: 14px;
    background: #dde1e7;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.1);
}

.fill {
    height: 100%;
    width: 0%; /* Zero start */
    background: linear-gradient(90deg, #ff8c00, #d95400);
    border-radius: 20px;
    transition: width 1.5s cubic-bezier(0.1, 0.42, 0.41, 1);
}

/* ========================================================
   UNIQUE LIVE BORDER CSS (Kisi dusre ko disturb nahi karega)
   ======================================================== */
#unique-stats-glass {
    position: relative;
}

#unique-stats-glass::before {
    content: "";
    position: absolute;
    inset: -3px; /* Border ki thickness */
    border-radius: 33px; /* Parent container se thoda bada taki corners round rahein */
    background: linear-gradient(90deg, #ff8c00, #28a745, #007bff, #d95400); /* Animated colors */
    background-size: 400% 400%;
    z-index: -1;
    animation: liveBorderGlow 4s linear infinite;
    /* CSS Masking - Yeh sirf border draw karega */
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 3px; /* Inset value (thickness) ke barabar padding */
    pointer-events: none;
}

@keyframes liveBorderGlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* <!-- ------------------------------- 15.  21st Century Skills: Learn, Earn & Grow--------------------------------------  --> */

/* Reset and General Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-purple: #800080;
    --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    /* Colors for auto-change */
    --color-1: #6366f1;
    --color-2: #06b6d4;
    --color-3: #10b981;
    --color-4: #f59e0b;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #fcfaff;
    padding: 50px 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-title {
    text-align: center;
    color: var(--primary-purple);
    font-size: clamp(1.5rem, 4vw, 2rem);
    margin-bottom: 40px;
    font-weight: 800;
}

/* --- The Grid (Vertical fix) --- */
.features-grid {
    display: grid;
    /* Laptop/Desktop: 4 Columns */
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px;
    background: #ffffff;
    padding: 40px;
    border-radius: 30px;
    border: 1px solid #eee;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

/* --- Feature Card --- */
.feature-card {
    display: flex;
    align-items: center;
    padding: 20px;
    background: #fff;
    border-radius: 18px;
    border: 2px solid #f0f0f0;
    cursor: pointer;
    transition: var(--transition);
    /* 5 Second color change animation */
    animation: colorCycle 5s infinite alternate;
}

/* Animation for border colors */
@keyframes colorCycle {
    0% { border-color: var(--color-1); }
    33% { border-color: var(--color-2); }
    66% { border-color: var(--color-3); }
    100% { border-color: var(--color-4); }
}

/* Staggered animation start for natural feel */
.feature-card:nth-child(even) { animation-delay: 1.5s; }

/* --- Hover Effects --- */
.feature-card:hover {
    transform: translateY(-10px);
    background: #fff;
    border-color: var(--primary-purple) !important; /* Force purple on hover */
    box-shadow: 0 15px 30px rgba(128, 0, 128, 0.1);
    animation-play-state: paused; /* Hover par animation ruk jayegi */
}

.icon-box {
    width: 50px;
    height: 50px;
    background: #f8f9fa;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #ff9900;
    margin-right: 15px;
    transition: var(--transition);
}

.feature-card:hover .icon-box {
    background: var(--primary-purple);
    color: white;
}

.text-box h3 {
    font-size: 1.1rem;
    margin: 0;
    color: #045f1a; /* Dark Green like image */
    font-weight: 700;
}

.text-box p {
    font-size: 0.85rem;
    margin: 0;
    color: #330cdd; /* Blue like image */
    font-weight: 500;
}

/* --- Responsive Breakpoints --- */

/* Tablets (2 Columns) */
@media (max-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile (1 Column) */
@media (max-width: 600px) {
    .features-grid {
        grid-template-columns: 1fr;
        padding: 20px;
    }
    
    .section-title {
        font-size: 1.2rem;
    }
}
/* --- <!--  ------------------------ 16. Testimonial Slider/Grid--------------------------------------- --> --- */

/* --- Variables & Reset --- */
/* Prefix 'pc-' stands for Profile Card */
/* Core Section Styles */
.section-title {
    text-align: center;
    color: white;
    font-family: sans-serif;
    margin: 40px 0;
}

.team-section-wrapper {
    position: relative;
    width: 100%;
    
    overflow: hidden;
    background: linear-gradient(#fffdfd00, #f8f3f300), 
                url('images/global.png') no-repeat center center fixed;
    background-size: cover;
    background-attachment: fixed;
    min-height: 10px;
}

/* Background Glows */
.section-glow { position: absolute; border-radius: 50%; filter: blur(120px); z-index: 1; opacity: 0.5; }
.glow-1 { width: 350px; height: 350px; background: #ff0077; top: 5%; left: 10%; }
.glow-2 { width: 450px; height: 450px; background: #0088ff; bottom: 5%; right: 10%; }

/* Slider Layout */
.slider-container { width: 100%; z-index: 2; position: relative; cursor: grab; }
.slider-track {
    display: flex;
    gap: 30px;
    width: max-content;
    padding: 20px;
    animation: moveLeft 40s linear infinite;
}

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

/* Glassmorphism Card */
.glass-card {
    width: 320px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px 20px;
    text-align: center;
    color: white;
    flex-shrink: 0;
    transition: transform 0.3s ease, background 0.3s ease;
    border: #09c256 solid 1px  !important; /* Unique green border */
}

.glass-card:hover { 
    background: rgba(255, 255, 255, 0.12); 
    transform: translateY(-10px); 
    border-color: rgba(255, 0, 119, 0.4);
}

.img-container { 
    width: 120px; 
    height: 120px; 
    margin: 0 auto 20px; 
    border: 3px solid #fff; 
    border-radius: 50%; 
    overflow: hidden; 
    transition: 0.3s;
}

.glass-card:hover .img-container {
    border-color: #ff0077;
    transform: scale(1.05);
}

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

.open-popup-btn {
    background: white; color: black; border: none; padding: 10px 30px;
    border-radius: 8px; font-weight: bold; cursor: pointer; transition: 0.3s;
    margin-top: 15px;
}
.open-popup-btn:hover { background: #ff0077; color: white; transform: scale(1.05); }

/* POPUP MODAL STYLING */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Black ki jagah transparent overlay */
    background: rgba(0, 0, 0, 0.4) !important; 
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    /* Blur ko kam karein taaki transparency saaf dikhe */
    backdrop-filter: blur(5px);
}

.popup-box {
    /* Transparent Pink Gradient */
    background: linear-gradient(135deg, rgba(240, 152, 232, 0.8), rgba(255, 255, 255, 0.2)) !important;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    padding: 40px 30px;
    border-radius: 30px;
    width: 90%;
    max-width: 450px;
    text-align: center;
    color: white;
    /* Shiny White Border */
    border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
    /* Soft White/Pink Glow instead of Black Shadow */
    box-shadow: 0 0 40px rgba(240, 152, 232, 0.3), 0 20px 50px rgba(0,0,0,0.1);
    
    /* Animation logic */
    transform: scale(0.8);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.popup-overlay.active .popup-box { transform: scale(1) translateY(0); }

.close-icon { position: absolute; top: 15px; right: 20px; font-size: 35px; cursor: pointer; transition: 0.3s; }
.close-icon:hover { color: #ff0077; transform: rotate(90deg); }
.popup-divider { height: 2px;
    border: none;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.5), transparent);
    margin: 20px 0; }
#popupName { background: linear-gradient(to right, #ffffff, #f098e8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 32px;
    font-weight: 900;
    letter-spacing: -1px;
    margin-bottom: 5px; }
#popupBio { line-height: 1.7; font-size: 16px; color: #f0f0f0; text-align: center; }

/* Scroll Animation */
@keyframes moveLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* JS will clone the list to make this 50% work infinitely */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .glass-card { width: 280px; }
    .section-glow { width: 200px; height: 200px; }
}
/* --- <!-- -------------------------17. Skill Progress Bar---------------------------------------------------- --> --- */

/* --- RESET & BASE --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #f4f7f627;
    overflow-x: hidden;
}

/* Mobile-First Approach (320px - 480px) */
.sss-platform-section {
    max-width: 100%;
    margin: 30px auto;
    padding: 15px;
    font-family: 'Poppins', sans-serif;
}

.sss-header-flex {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-bottom: 40px;
}

.sss-header-left h1.sss-main-title {
    font-size: 22px;
    color: #1a1a1a;
    line-height: 1.3;
    margin-bottom: 15px;
    text-align: center;
}

.sss-sub-text {
    font-size: 14px;
    color: #444;
    line-height: 1.6;
    text-align: center;
}

.sss-header-right {
    background: #ffffff;
    padding: 15px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* --- Bar Graph --- */
.sss-graph-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sss-bar-full-row {
    display: flex;
    width: 100%;
    height: 38px;
    border-radius: 50px;
    overflow: hidden;
    font-weight: 600;
    font-size: 10px;
    color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.sss-green-part {
    background-color: #27ae60;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12px;
    width: 0; /* JS handles this */
    transition: width 1.5s cubic-bezier(0.1, 0.5, 0.5, 1);
    white-space: nowrap;
}

.sss-red-part {
    background-color: #e74c3c;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 0; /* JS handles this */
    transition: width 1.5s cubic-bezier(0.1, 0.5, 0.5, 1);
}

/* --- Cards --- */
.sss-cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.sss-card {
    background: #fff;
    padding: 30px 20px;
    text-align: center;
    border: 1.5px solid;
    border-radius: 15px;
    transition: 0.4s ease;
}

.sss-photo-circle {
    width: 70px;
    height: 70px;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 3px solid;
    font-size: 24px;
}

.sss-card h2 { font-size: 17px; margin-bottom: 10px; }
.sss-card p { font-size: 13px; color: #666; line-height: 1.5; }

/* Colors */
.sss-student { border-color: #3498db; color: #3498db; }
.sss-job-seeker { border-color: #2ecc71; color: #2ecc71; }
.sss-professional { border-color: #9b59b6; color: #9b59b6; }
.sss-business { border-color: #e67e22; color: #e67e22; }
.sss-startup { border-color: #f1c40f; color: #f1c40f; }
.sss-homemaker { border-color: #e91e63; color: #e91e63; }

/* Hover Effects */
.sss-card:hover { transform: translateY(-8px); color: #fff !important; cursor: pointer; }
.sss-card:hover p { color: #fff; }
.sss-card:hover .sss-photo-circle { background: #fff; border-color: #fff; color: inherit; }

.sss-student:hover { background: #3498db; }
.sss-job-seeker:hover { background: #2ecc71; }
.sss-professional:hover { background: #9b59b6; }
.sss-business:hover { background: #e67e22; }
.sss-startup:hover { background: #f1c40f; }
.sss-homemaker:hover { background: #e91e63; }

/* --- RESPONSIVE BREAKPOINTS --- */

/* Tablets (768px) */
@media (min-width: 768px) {
    .sss-header-left h1.sss-main-title { font-size: 28px; }
    .sss-cards-grid { grid-template-columns: repeat(2, 1fr); }
    .sss-bar-full-row { height: 42px; font-size: 12px; }
}

/* Laptops & Desktops (1024px - 1440px) */
@media (min-width: 1024px) {
    .sss-platform-section { padding: 40px; }
    .sss-header-flex { flex-direction: row; align-items: flex-start; text-align: left; }
    .sss-header-left { flex: 1.2; text-align: left; }
    .sss-header-right { flex: 1; margin-top: 10px; }
    .sss-header-left h1.sss-main-title { text-align: left; font-size: 32px; }
    .sss-sub-text { text-align: left; font-size: 16px; }
    .sss-cards-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Large Monitors and TV Screens (1920px+) */
@media (min-width: 1920px) {
    .sss-platform-section { max-width: 1700px; margin: 80px auto; }
    .sss-header-left h1.sss-main-title { font-size: 42px; }
    .sss-sub-text { font-size: 18px; }
    .sss-bar-full-row { height: 55px; font-size: 16px; }
    .sss-card h2 { font-size: 22px; }
    .sss-card p { font-size: 16px; }
}
/* --- <!-------------------------   -------------unique 3D Flip (Mirror) -------------------------------------- ------------------------ --> --- */

/* --- Reset & Base --- */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }

.audit-main-container {
    width: 100%;
    min-height: 100vh;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff13; 
}

.audit-card-3d {
    width: 100%;
    max-width: 1000px;
    perspective: 2000px;
    cursor: pointer;
}

.audit-card-inner {
    width: 100%;
    position: relative;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-style: preserve-3d;
    min-height: 520px;
}

.audit-card-3d:hover .audit-card-inner, 
.audit-card-3d.flipped .audit-card-inner {
    transform: rotateY(180deg);
}

.audit-side {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 30px;
    padding: 30px;
    display: flex;
    align-items: center;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    /* Professional 7s Gradient */
    background: linear-gradient(-45deg, #E8F5BD, #FDACAC, #96f73c, #F5AFAF, #A3DC9A, #427A43,#FF4400);
    background-size: 400% 400%;
    animation: proGlow 7s ease infinite;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

@keyframes proGlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.back { transform: rotateY(180deg); }

.img-circle { 
    width: 125px; height: 125px; 
    margin: 0 auto 15px; 
    position: relative;
    border-radius: 50%;
    padding: 4px;
    background: linear-gradient(45deg, #00f2fe, #7000ff);
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.4);
}

.img-circle img { 
    width: 100%; height: 100%; 
    border-radius: 50%; 
    object-fit: cover; 
    border: 3px solid #0f172a;
}

.logo-tag { 
    position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%);
    background: #38fcc1c9; color: #000; padding: 2px 10px; border-radius: 20px; 
    font-size: 9px; font-weight: bold; white-space: nowrap;
}

/* --- TEXT COLORS --- */
.audit-flex-layout { display: flex; width: 100%; flex-direction: column; align-items: center; }
.profile-side { text-align: center; }
.name-text { font-size: 1.25rem; font-weight: 700; color: #ffffff; margin-top: 8px; }
.edu-tag { color: #00f2fe; font-size: 0.85rem; font-weight: 600; margin: 2px 0; }
.role-text { color: #94a3b8; font-size: 0.8rem; }

.vertical-line { display: none; }
.text-side { text-align: center; padding-top: 20px; }

.heading-q { color: #ffffff; font-size: 1.2rem; margin-bottom: 12px; font-weight: 600; line-height: 1.3; }
.white-text { color: #ffffff !important; opacity: 1 !important; }
.black-text { color: #000000 !important; opacity: 1 !important; }
.blue-glow { color: #f6f8f8; font-weight: 700; }
.highlight { color: #e71818ad; font-weight: 700; } /* Neon Blue for important words */

.desc-text { color: #cbd5e1; font-size: 0.95rem; line-height: 1.5; margin-bottom: 10px; }
.hindi { color: #94a3b8; font-style: italic; border-left: 2px solid #00f2fe; padding-left: 10px; text-align: left; font-size: 0.9rem; }
.cta-text { margin-top: 10px; color: #ffffff; font-weight: 500; font-size: 1rem; }

/* RESPONSIVE */
@media screen and (min-width: 992px) {
    .audit-flex-layout { flex-direction: row; text-align: left; }
    .profile-side { flex: 1; }
    .text-side { flex: 2.3; text-align: left; padding-left: 40px; padding-top: 0; }
    .vertical-line { display: block; width: 1px; height: 240px; background: rgba(255,255,255,0.1); margin: 0 10px; }
    .audit-card-inner { height: 390px; min-height: 390px; }
    .heading-q { font-size: 1.45rem; }
}

@media screen and (max-width: 480px) {
    .audit-side { padding: 25px 20px; }
    .img-circle { width: 110px; height: 110px; }
    .audit-card-inner { min-height: 600px; }
}

/* --- -------------------------------------------------19. Footer-------------------------------- --- */
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
    overflow-x:hidden;
    height: 100%;
    margin: 0;
    padding: 0;
    margin-top: 5px;
}

/* FOOTER */

.footer{

background:linear-gradient(to right,#00093c,#2d0b00);

color:#fff;

padding:100px 0 30px;

border-top-left-radius:125px;

font-size:13px;

line-height:20px;

margin-top:50px;
margin-bottom: 0;
width:100%;

}

/* ROW */

.footer-row{

width:90%;
max-width:1400px;

margin:auto;

display:flex;

align-items:flex-start;

justify-content:space-between;

flex-wrap:wrap;

gap:10px;

}

/* COLUMN */

.footer-col{

flex:1 1 220px;

min-width:220px;

padding:10px;

}

/* TITLE */

.footer-col h3{

width:fit-content;

margin-bottom:40px;

position:relative;

}

/* UNDERLINE */

.underline{

width:100%;

height:5px;

background:#767676;

border-radius:3px;

position:absolute;

top:25px;

left:0;

overflow:hidden;

}

.underline span{

width:15px;

height:100%;

background:#fff;

border-radius:3px;

position:absolute;

top:0;

left:10px;

animation:moving 2s linear infinite;

}

@keyframes moving{

0%{left:-20px;}
100%{left:100%;}

}

/* LINKS */

.footer-col ul li{

list-style:none;

margin-bottom:12px;

}

.footer-col ul li a{

text-decoration:none;

color:#fff;

}

.footer-col ul li a:hover{

text-decoration:underline;

}

/* FORM */

form{

padding-bottom:15px;

display:flex;

align-items:center;

justify-content:space-between;

border-bottom:1px solid #ccc;

margin-bottom:40px;

}

form input{

width:100%;

background:transparent;

color:#ccc;

border:0;

outline:none;

margin-left:10px;

}

form button{

background:transparent;

border:0;

outline:none;

cursor:pointer;

color:#fff;

}

/* SOCIAL ICONS */

.social-icons{

display:flex;

gap:15px;

flex-wrap:wrap;

}

.social-icons a{

width:40px;

height:40px;

border-radius:50%;

background:#fff;

display:flex;

justify-content:center;

align-items:center;

text-decoration:none;

transition:.3s;

}

.social-icons a i{

font-size:20px;

color:#000;

}

/* YOUTUBE HOVER */

.yt-link:hover i{

color:#ff0000;

}

/* HR */

hr{

width:90%;

border:0;

border-bottom:1px solid #ccc;

margin:20px auto;

}

.copyright{

text-align:center;

}

/* ========================== */
/* RESPONSIVE DESIGN */
/* ========================== */

/* 1920px+ Ultra Wide */

@media(min-width:1920px){

.footer-row{

max-width:1600px;

}

}

/* 1440px Large Desktop */

@media(max-width:1440px){

.footer-row{

width:92%;

}

}

/* 1024px Laptop */

@media(max-width:1024px){

.footer-col{

flex:1 1 45%;

}

}

/* 768px Tablet */

@media(max-width:768px){

.footer{

border-top-left-radius:60px;

}

.footer-col{

flex:1 1 100%;

text-align:center;

}

.underline{

left:50%;

transform:translateX(-50%);

}

.social-icons{

justify-content:center;

}

}

/* Social icon hover animation */

.social-icons a:hover{
    transform: translateY(-5px);
}

/* Facebook */
.social-icons a:hover .fa-facebook-f{
    color:#1877f2;
}

/* Twitter */
.social-icons a:hover .fa-twitter{
    color:#1da1f2;
}

/* WhatsApp */
.social-icons a:hover .fa-whatsapp{
    color:#25d366;
}

/* Instagram */
.social-icons a:hover .fa-instagram{
    color:#e4405f;
}

/* YouTube */
.social-icons a:hover .fa-youtube{
    color:#ff0000;
}

/* 480px Mobile */

@media(max-width:480px){

.footer{

padding:70px 20px;

border-top-left-radius:40px;

}

.footer-row{

gap:30px;

}

}

/* 320px Small Mobile */

@media(max-width:320px){

.footer{

padding:60px 15px;

}

form{

flex-direction:column;

gap:10px;

}

form input{

margin-left:0;

}

}
/* --- <!--  -------------------------   -------------Mobile Compaitible -------------------------------------- ------------------------ --> --- */
/* ============================================================
   MASTER RESPONSIVE ENGINE (No Design Change, Only Compatibility)
   ============================================================ */

/* 1. Universal Fix for Horizontal Scroll (Desktop & Mobile) */
html, body {
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
    touch-action: manipulation; /* Mobile par touch lag kam karega */
}

/* 2. Ultra-Wide Screens (1440px to 1920px+) */
@media (min-width: 1440px) {
    .slider-container {
        max-width: 1800px;
        margin: 0 auto;
    }
}

/* 3. Laptops & Large Tablets (1024px) */
@media (max-width: 1024px) {
    .glass-card {
        width: 300px; /* Thoda resize taaki screen par fit ho */
        padding: 30px 15px;
    }
}

/* 4. Tablets & iPads (768px) */
@media (max-width: 768px) {
    .team-section-wrapper {
        padding: 40px 0;
    }
    .section-title {
        font-size: 1.8rem;
        margin: 20px 0;
    }
    .slider-track {
        gap: 20px;
    }
    .glass-card {
        width: 280px;
    }
    /* Popup Size Adjustment */
    .popup-box {
        width: 85%;
        max-width: 400px;
    }
}

/* 5. Mobile Phones (480px) */
@media (max-width: 480px) {
    .section-title {
        font-size: 1.4rem;
        padding: 0 15px;
    }
    .glass-card {
        width: 260px; /* Mobile par card width */
    }
    .img-container {
        width: 100px;
        height: 100px;
    }
    #popupName {
        font-size: 22px;
    }
    .open-popup-btn {
        padding: 12px 20px;
        font-size: 14px;
    }
}

/* 6. Small Screens & Fold Phones (320px) */
@media (max-width: 320px) {
    .glass-card {
        width: 240px; /* Sabse chote mobile ke liye */
    }
    .section-glow {
        display: none; /* Choti screen par performance ke liye glow hide karein */
    }
    .popup-box {
        padding: 25px 15px;
    }
}

/* 7. Popup Overlay Fix (Ensure it's always on top and centered) */
.popup-overlay {
    padding: 10px;
    box-sizing: border-box;
}

/* --- -------------------------------------------------20. Scroll to Top Button-------------------------------- --- */