.elementor-15 .elementor-element.elementor-element-3f98db94{--display:flex;--min-height:550px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-15 .elementor-element.elementor-element-3f98db94:not(.elementor-motion-effects-element-type-background), .elementor-15 .elementor-element.elementor-element-3f98db94 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-15 .elementor-element.elementor-element-702d0b83{--display:flex;--min-height:550px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--gap:50px 50px;--row-gap:50px;--column-gap:50px;}.elementor-15 .elementor-element.elementor-element-7436f5b1{--display:flex;}.elementor-15 .elementor-element.elementor-element-7436f5b1.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-15 .elementor-element.elementor-element-7ad4b89c{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-15 .elementor-element.elementor-element-300d2e3e{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-15 .elementor-element.elementor-element-52a9eed4{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:22px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-15 .elementor-element.elementor-element-4c896b79{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-15 .elementor-element.elementor-element-48fd82f9{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-15 .elementor-element.elementor-element-68a51d67{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-15 .elementor-element.elementor-element-4b4b786c{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:-8px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-15 .elementor-element.elementor-element-7ca0b68e{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-15 .elementor-element.elementor-element-6a961074{--spacer-size:7px;}.elementor-15 .elementor-element.elementor-element-691cd88d{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-15 .elementor-element.elementor-element-5b1b0f33{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}@media(min-width:768px){.elementor-15 .elementor-element.elementor-element-702d0b83{--content-width:1200px;}.elementor-15 .elementor-element.elementor-element-7436f5b1{--width:100%;}}@media(max-width:767px){.elementor-15 .elementor-element.elementor-element-3f98db94{--margin-top:-16px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-15 .elementor-element.elementor-element-6413a752{margin:13px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}}/* Start custom CSS for container, class: .elementor-element-702d0b83 */<section class="gyan-feature-showcase">
    <div class="gyan-card-grid">

        <!-- Card 1: Study Your Way -->
        <div class="gyan-card variation-1">
            <div class="card-top-bar"></div>
            <div class="card-icon-frame">
                <svg viewBox="0 0 24 24"><path d="M12 2l2.4 7.2h7.6l-6 4.8 2.4 7.2-6-4.8-6 4.8 2.4-7.2-6-4.8h7.6zM12 16.2l3.6 2.8-1.2-4.2 3.6-2.8h-4.4l-1.6-4.4-1.6 4.4h-4.4l3.6 2.8-1.2 4.2z"/></svg>
            </div>
            <span class="card-meta">Smart Education</span>
            <h3>Adaptive Learning Hub</h3>
            <p class="ai-descriptor">Our platform tailors your academic journey. From live interactive sessions to self-paced modules, your schedule is optimized dynamically.</p>
            
            <div class="smart-list">
                <div class="list-item">
                    <div class="check-dot"></div>
                    <span class="item-text">Live + On-Demand Sessions</span>
                </div>
                <div class="list-item">
                    <div class="check-dot"></div>
                    <span class="item-text">AI Schedule Planning</span>
                </div>
                <div class="list-item">
                    <div class="check-dot"></div>
                    <span class="item-text">Self-Paced Growth</span>
                </div>
            </div>
        </div>

        <!-- Card 2: Learn Anywhere -->
        <div class="gyan-card variation-2">
            <div class="card-top-bar bar-orange"></div>
            <div class="card-icon-frame icon-orange">
                <svg viewBox="0 0 24 24"><path d="M17 1H7C5.9 1 5 1.9 5 3V21C5 22.1 5.9 23 7 23H17C18.1 23 19 22.1 19 21V3C19 1.9 18.1 1 17 1ZM17 19H7V5H17V19Z"/><circle cx="12" cy="21" r="1.5"/></svg>
            </div>
            <span class="card-meta meta-orange">Anywhere, Anytime</span>
            <h3>Seamless Global Portal</h3>
            <p class="ai-descriptor">Engage with course material on any device. Continuous background syncing ensures uninterrupted learning online or offline.</p>
            
            <div class="smart-list">
                <div class="list-item">
                    <div class="check-dot dot-orange"></div>
                    <span class="item-text">Mobile & Tablet Optimized</span>
                </div>
                <div class="list-item">
                    <div class="check-dot dot-orange"></div>
                    <span class="item-text">Offline Content Access</span>
                </div>
                <div class="list-item">
                    <div class="check-dot dot-orange"></div>
                    <span class="item-text">Cloud Progress Sync</span>
                </div>
            </div>
        </div>

        <!-- Card 3: UGC-Approved Programs -->
        <div class="gyan-card variation-3">
            <div class="card-top-bar bar-purple"></div>
            <div class="card-icon-frame icon-purple">
                <svg viewBox="0 0 24 24"><path d="M12 2l-10 6 10 6 10-6-10-6zM3 13.5v3.5a1 1 0 00.1 1l8.9 4a1 1 0 00.9 0l8.9-4a1 1 0 00.1-1v-3.5L12 18 3 13.5z"/><path d="M12 16L2 10.5M12 16l10-5.5" opacity="0.3"/></svg>
            </div>
            <span class="card-meta meta-purple">Validated Degrees</span>
            <h3>Recognized Degrees</h3>
            <p class="ai-descriptor">Enroll in accredited BBA, MBA, B.Tech, M.Tech, BCA, MCA, B.Com, M.Com, BA, and MA programs through recognized partner institutions.</p>
            
            <div class="smart-list">
                <div class="list-item">
                    <div class="check-dot dot-purple"></div>
                    <span class="item-text">8 Partner Universities</span>
                </div>
                <div class="list-item">
                    <div class="check-dot dot-purple"></div>
                    <span class="item-text">Career-Focused Curricula</span>
                </div>
                <div class="list-item">
                    <div class="check-dot dot-purple"></div>
                    <span class="item-text">Industry Relevant Content</span>
                </div>
            </div>
        </div>

        <!-- Card 4: Free Admission Counselling -->
        <div class="gyan-card variation-4">
            <div class="card-top-bar"></div>
            <div class="card-icon-frame">
                <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12c0 5.52 4.48 10 10 10s10-4.48 10-10C22 6.48 17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/></svg>
            </div>
            <span class="card-meta">Expert Guidance</span>
            <h3>Admission Intelligence</h3>
            <p class="ai-descriptor">Navigating enrollment is frictionless. Dedicated mentors guide you from initial course selection straight through to final registration.</p>
            
            <div class="smart-list">
                <div class="list-item">
                    <div class="check-dot"></div>
                    <span class="item-text">Free Advisory Counseling</span>
                </div>
                <div class="list-item">
                    <div class="check-dot"></div>
                    <span class="item-text">Document & Eligibility Help</span>
                </div>
                <div class="list-item">
                    <div class="check-dot"></div>
                    <span class="item-text">Student Success Team</span>
                </div>
            </div>
        </div>

        <!-- About GyanInstitute -->
        <div class="gyan-about-hub">
            <div class="about-text">
                <h3>About GyanInstitute</h3>
                <p>GyanInstitute is a Noida-based admission guidance consultancy helping students across India enroll in UGC-approved online and distance degree programs, including BBA, MBA, B.Tech, M.Tech, BCA, MCA, B.Com, M.Com, BA, and MA.</p>
                <p>We provide free counseling on course selection, university matching, eligibility, documentation, and application processing through our recognized partner universities.</p>
                <span class="note">Notice: GyanInstitute is a guidance service and admission consultancy—degrees are awarded directly by the partner university you choose to enroll with.</span>
            </div>
            <div class="university-partners">
                <div class="partners-header">Partner Institutions</div>
                <div class="partner-tags">
                    <span>Subharti University</span>
                    <span>Mangalayatan University</span>
                    <span>Dr. Preeti Global Univ.</span>
                    <span>Bir Tikendrajit Univ.</span>
                    <span>Guru Kashi University</span>
                    <span>Matrix Skilltech Univ.</span>
                    <span>NIILM University</span>
                    <span>Sikkim Alpine Univ.</span>
                </div>
            </div>
        </div>

    </div>
</section>

<style>
/* Main Container with Blob Setup */
.gyan-feature-showcase {
    --dark-blue: #0A1F44;
    --text-grey: #4A5568;
    --ai-blue-glow: rgba(0, 163, 255, 0.3);
    --ai-green-glow: rgba(0, 212, 162, 0.3);
    --ai-orange-glow: rgba(255, 122, 0, 0.3);

    position: relative;
    width: 100%;
    padding: clamp(30px, 5vw, 60px) clamp(15px, 3vw, 30px);
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    isolation: isolate;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.gyan-feature-showcase * {
    box-sizing: border-box;
}

/* Floating Top-Left Blob (Cyan/Green AI Glow) */
.gyan-feature-showcase::before {
    content: "";
    position: absolute;
    width: 650px;
    height: 650px;
    left: -280px;
    top: -280px;
    border-radius: 50%;
    background: radial-gradient(circle, 
        rgba(0, 212, 162, 0.22) 0%, 
        rgba(0, 163, 255, 0.12) 40%, 
        transparent 75%);
    filter: blur(30px);
    animation: blob1 10s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 1;
}

/* Floating Bottom-Right Blob (Warm Orange/Cyan AI Glow) */
.gyan-feature-showcase::after {
    content: "";
    position: absolute;
    width: 700px;
    height: 700px;
    right: -300px;
    bottom: -320px;
    border-radius: 50%;
    background: radial-gradient(circle, 
        rgba(255, 122, 0, 0.18) 0%, 
        rgba(0, 163, 255, 0.08) 45%, 
        transparent 75%);
    filter: blur(30px);
    animation: blob2 12s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 1;
}

/* Ensure all elements inside sit nicely above the blobs */
.gyan-feature-showcase > * {
    position: relative;
    z-index: 5;
}

/* Floating Blob Keyframe Animations */
@keyframes blob1 {
    from {
        transform: translate(0, 0) scale(1);
    }
    to {
        transform: translate(60px, 50px) scale(1.08);
    }
}

@keyframes blob2 {
    from {
        transform: translate(0, 0) scale(1);
    }
    to {
        transform: translate(-60px, -40px) scale(1.05);
    }
}

/* Grid Layout */
.gyan-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 24px);
}

/* Base Glassmorphic Card Design */
.gyan-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(238, 242, 246, 0.8);
    border-radius: 20px;
    padding: 24px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(10, 31, 68, 0.04);
}

.gyan-card:hover {
    transform: translateY(-6px);
    background: #ffffff;
    box-shadow: 0 20px 40px rgba(10, 31, 68, 0.08), 0 0 25px var(--ai-blue-glow);
    border-color: rgba(0, 163, 255, 0.3);
}

.card-top-bar {
    width: 45px;
    height: 4px;
    border-radius: 10px;
    background: linear-gradient(90deg, #00D4A2, #00A3FF);
    margin-bottom: 20px;
}
.bar-orange { background: linear-gradient(90deg, #00A3FF, #FF7A00); }
.bar-purple { background: linear-gradient(90deg, #00D4A2, #A855F7); }

/* SVG Frame & Glow */
.card-icon-frame {
    width: 54px;
    height: 54px;
    background: #f0f7ff;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border: 1px solid #d4e7f8;
    transition: all 0.4s ease;
}
.icon-orange { background: #fff7f0; border-color: #ffe0cc; }
.icon-purple { background: #f7f0ff; border-color: #e8e0ff; }

.card-icon-frame svg {
    width: 26px;
    height: 26px;
    fill: #00A3FF;
    transition: all 0.4s ease;
}
.icon-orange svg { fill: #FF7A00; }
.icon-purple svg { fill: #A855F7; }

.gyan-card:hover .card-icon-frame {
    background: #00A3FF;
    border-color: transparent;
}
.gyan-card:hover .icon-orange { background: #FF7A00; }
.gyan-card:hover .icon-purple { background: #A855F7; }

.gyan-card:hover .card-icon-frame svg {
    fill: #ffffff;
    transform: scale(1.1);
}

/* Card Content */
.card-meta {
    color: #00D4A2;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.1em;
    margin-bottom: 6px;
}
.meta-orange { color: #FF7A00; }
.meta-purple { color: #A855F7; }

.gyan-card h3 {
    margin: 0 0 10px 0;
    color: var(--dark-blue);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
}

.gyan-card .ai-descriptor {
    margin: 0 0 20px 0;
    color: var(--text-grey);
    font-size: 14px;
    line-height: 1.5;
}

/* Feature Bullet Points */
.smart-list {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(248, 250, 252, 0.9);
    border-radius: 8px;
    border: 1px solid #edf2f7;
}

.check-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00D4A2;
    flex-shrink: 0;
}
.dot-orange { background: #FF7A00; }
.dot-purple { background: #A855F7; }

.item-text {
    color: var(--dark-blue);
    font-size: 13px;
    font-weight: 700;
}

/* Glow Color Variations */
.gyan-card.variation-2:hover { --ai-blue-glow: var(--ai-orange-glow); }
.gyan-card.variation-3:hover { --ai-blue-glow: rgba(168, 85, 247, 0.3); }

/* About GyanInstitute Section */
.gyan-about-hub {
    grid-column: 1 / -1;
    margin-top: 20px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid #eef2f6;
    border-radius: 20px;
    padding: 30px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
    box-shadow: 0 4px 20px rgba(10, 31, 68, 0.04);
}

.about-text h3 {
    margin: 0 0 12px 0;
    font-size: 22px;
    font-weight: 800;
    color: var(--dark-blue);
}

.about-text p {
    margin: 0 0 12px 0;
    color: var(--text-grey);
    font-size: 14px;
    line-height: 1.6;
}

.about-text .note {
    font-size: 13px;
    color: #00A3FF;
    font-weight: 600;
    background: rgba(0, 163, 255, 0.06);
    padding: 10px 14px;
    border-radius: 8px;
    display: block;
    border-left: 4px solid #00A3FF;
    margin-top: 15px;
}

.university-partners {
    border-left: 1px solid #eef2f6;
    padding-left: 24px;
    display: flex;
    flex-direction: column;
}

.partners-header {
    color: var(--dark-blue);
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}

.partner-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.partner-tags span {
    background: #f1f5f9;
    color: var(--dark-blue);
    font-size: 11px;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 6px;
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
    .gyan-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .gyan-about-hub {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .university-partners {
        border-left: none;
        border-top: 1px solid #eef2f6;
        padding-left: 0;
        padding-top: 20px;
    }
}

@media (max-width: 640px) {
    .gyan-card-grid {
        grid-template-columns: 1fr;
    }
    .gyan-feature-showcase {
        padding: 20px 12px;
    }
}
</style>/* End custom CSS */