/* ================= HEADER ================= */

.site-header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:90px;
    background:#ffffff;
    border-bottom:1px solid #ececec;
    box-shadow:0 5px 20px rgba(0,0,0,.05);
    z-index:9999;
}

.header-container{

    width:92%;
    max-width:1400px;
    margin:auto;

    height:90px;

    display:flex;
    align-items:center;
    justify-content:space-between;

}

/* Logo */

.logo{
    flex:0 0 240px;
    display:flex;
    align-items:center;
}

.logo img{
    width:190px;
    height:auto;
    display:block;
}

/* Navigation */

.main-nav{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:42px;

}

.main-nav a{

    text-decoration:none;

    color:#1f2937;

    font-size:17px;

    font-weight:600;

    transition:.3s;

    position:relative;

}

.main-nav a:hover{

    color:#6d28d9;

}

.main-nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:3px;

    background:#6d28d9;

    transition:.3s;

    border-radius:20px;

}

.main-nav a:hover::after{

    width:100%;

}

/* Right Buttons */

.header-buttons{

    flex:0 0 240px;

    display:flex;

    justify-content:flex-end;

    align-items:center;

    gap:15px;

}

.login-btn{

    padding:12px 28px;

    border:1px solid #ddd;

    border-radius:50px;

    text-decoration:none;

    color:#222;

    font-weight:600;

}

.demo-btn{

    padding:13px 30px;

    border-radius:50px;

    text-decoration:none;

    color:#fff;

    font-weight:700;

    background:linear-gradient(90deg,#2563EB,#7C3AED);

    box-shadow:0 10px 25px rgba(124,58,237,.25);

}

body{

    padding-top:90px;

}

/* Mobile Menu Toggle Button */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10002;
}

.mobile-menu-btn span {
    width: 100%;
    height: 3px;
    background-color: #1f2937;
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
}

.mobile-menu-btn.active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.mobile-menu-btn.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-btn.active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

@media (max-width: 992px) {
    .site-header {
        height: 70px;
    }
    .header-container {
        height: 70px;
        width: 90%;
    }
    body {
        padding-top: 70px !important;
    }
    .logo {
        flex: 0 0 auto;
    }
    .logo img {
        width: 150px;
    }
    .mobile-menu-btn {
        display: flex;
    }
    
    .main-nav {
        position: fixed;
        top: 70px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 70px);
        background: #ffffff;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 30px;
        padding-top: 50px;
        transition: left 0.3s ease-in-out;
        z-index: 10000;
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
        overflow-y: auto;
    }
    
    .main-nav.active {
        left: 0;
    }
    
    .main-nav a {
        font-size: 20px;
        width: 100%;
        text-align: center;
        padding: 10px 0;
    }
    
    .header-buttons {
        position: fixed;
        bottom: 50px;
        left: -100%;
        width: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 15px;
        transition: left 0.3s ease-in-out;
        z-index: 10001;
        padding: 0 20px;
    }
    
    .header-buttons.active {
        left: 0;
    }
    
    .header-buttons a {
        width: 100%;
        max-width: 300px;
        text-align: center;
        box-shadow: none;
    }

    body.menu-open {
        overflow: hidden;
    }
}
.hero{
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: #ffffff;
}

.hero-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.hero-left{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:12px;
}

.hero-right{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-tag{

display:inline-block;

padding:12px 24px;

background:#E0F2FE;

color:#2563EB;

border-radius:50px;

font-weight:600;

margin-bottom:25px;

animation:fadeDown 1s;

}

.hero h1{

font-size:68px;

font-family:Sora,sans-serif;

line-height:1.05;

color:#0F172A;

}

.hero h1 span{

background:linear-gradient(90deg,#2563EB,#FBBF24);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.hero h1{
    font-size:68px;
    font-family:Sora,sans-serif;
    line-height:1.0;
    color:#0F172A;
    margin-bottom:10px;   /* Heading கீழே மட்டும் */
}

.hero p{
    font-size:20px;
    color:#64748B;
    margin:0;
    line-height:1.8;
}

.hero-btns{

display:flex;

gap:20px;

margin-bottom:40px;

}
.container{

    width:92%;

    max-width:1320px;

    margin:auto;

}
.btn-primary{

background:#2563EB;

padding:16px 34px;

color:#fff;

border-radius:50px;

font-weight:700;

transition:.4s;

}

.btn-primary:hover{

transform:translateY(-5px);

box-shadow:0 20px 40px rgba(37,99,235,.3);

}

.btn-outline{

padding:16px 34px;

border:2px solid #2563EB;

border-radius:50px;

color:#2563EB;

font-weight:700;

transition:.4s;

}

.btn-outline:hover{

background:#2563EB;

color:#fff;

}

.hero-stats{

display:flex;

gap:60px;

}

.hero-stats h2{

font-size:42px;

color:#2563EB;

}

.hero-stats span{

color:#64748B;

}

.hero-right{

position:relative;

}

.dashboard{

width:100%;

border-radius:25px;

box-shadow:0 40px 80px rgba(0,0,0,.12);

animation:float 6s ease infinite;

}
.card{

position:absolute;

background:#fff;

padding:18px;

border-radius:18px;

display:flex;

gap:15px;

align-items:center;

box-shadow:0 20px 45px rgba(0,0,0,.08);

transition:.4s;

animation:floatCard 4s ease infinite;

}

.card:hover{

transform:translateY(-10px);

border-left:5px solid #F97316;

}

.card i{

width:55px;

height:55px;

background:#F97316;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

color:#fff;

font-size:22px;

}

.attendance{

left:-60px;

top:50px;

}

.homework{

right:-60px;

top:220px;

}

.fees{

left:20px;

bottom:20px;

}
@keyframes float{

0%,100%{

transform:translateY(0px);

}

50%{

transform:translateY(-15px);

}

}

@keyframes floatCard{

0%,100%{

transform:translateY(0px);

}

50%{

transform:translateY(-12px);

}

}

@keyframes fadeDown{

from{

opacity:0;

transform:translateY(-30px);

}

to{

opacity:1;

transform:translateY(0);

}

}
.hero-left{

    animation:fadeLeft .8s ease;
    gap:12px;

}

.hero-right{

    animation:fadeRight .8s ease;

}

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-80px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(80px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}
.hero{

    position:relative;

    overflow:hidden;

    min-height:100vh;

    display:flex;

    align-items:center;

    background:#000;

}

.hero-video{

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    object-fit:cover;

    z-index:0;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        rgba(255,255,255,.88) 0%,
        rgba(255,255,255,.75) 45%,
        rgba(255,255,255,.35) 100%
    );

    z-index:1;

}

.hero-wrapper{

    position:relative;

    z-index:2;

}
/*==================================
        PROBLEMS
==================================*/

.problems{

padding:120px 0;

background:#F8FAFC;

}

.section-title{

text-align:center;

max-width:850px;

margin:auto auto 70px;

}

.section-tag{

display:inline-block;

padding:10px 22px;

background:#DBEAFE;

color:#2563EB;

border-radius:50px;

font-weight:700;

margin-bottom:18px;

}

.section-title h2{

font-size:48px;

color:#0F172A;

margin-bottom:18px;

font-family:'Sora',sans-serif;

}

.section-title h2 span{

color:#2563EB;

}

.section-title p{

font-size:19px;

color:#64748B;

line-height:1.8;

}

.problem-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

}

.problem-card{

background:#fff;

padding:40px 30px;

border-radius:24px;

transition:.45s;

box-shadow:0 15px 45px rgba(0,0,0,.05);

position:relative;

overflow:hidden;

}

.problem-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:5px;

background:linear-gradient(90deg,#2563EB,#FBBF24);

transform:scaleX(0);

transition:.4s;

}

.problem-card:hover::before{

transform:scaleX(1);

}

.problem-card:hover{

transform:translateY(-12px);

box-shadow:0 25px 60px rgba(0,0,0,.12);

}

.problem-card .icon{

width:75px;

height:75px;

border-radius:20px;

background:linear-gradient(135deg,#2563EB,#F97316);

display:flex;

justify-content:center;

align-items:center;

margin-bottom:25px;

}

.problem-card i{

font-size:30px;

color:#fff;

}

.problem-card h3{

font-size:24px;

margin-bottom:15px;

color:#0F172A;

}

.problem-card p{

color:#64748B;

line-height:1.8;

}

.solution-box{

margin-top:70px;

background:linear-gradient(135deg,#2563EB,#7C3AED);

padding:55px;

border-radius:30px;

text-align:center;

color:#fff;

}

.solution-box h3{

font-size:36px;

margin-bottom:30px;

}

.solution-box span{

color:#FBBF24;

}

.solution-btn{

display:inline-block;

padding:16px 40px;

background:#fff;

color:#2563EB;

font-weight:700;

border-radius:50px;

transition:.4s;

}

.solution-btn:hover{

transform:translateY(-5px);

background:#FBBF24;

color:#111;

}
/*==================================
      PLATFORM
==================================*/

.platform{

padding:120px 0;

background:#ffffff;

position:relative;

overflow:hidden;

}

.portal-grid{

display:grid;

grid-template-columns:repeat(5,1fr);

gap:25px;

margin-top:60px;

}

.portal-card{

background:#fff;

padding:40px 28px;

border-radius:25px;

text-align:center;

transition:.45s;

box-shadow:0 18px 45px rgba(0,0,0,.06);

position:relative;

overflow:hidden;

cursor:pointer;

}

.portal-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

background:linear-gradient(135deg,#2563EB,#7C3AED);

opacity:0;

transition:.45s;

z-index:0;

}

.portal-card:hover::before{

opacity:1;

}

.portal-card>*{

position:relative;

z-index:2;

}

.portal-card:hover{

transform:translateY(-15px);

}

.portal-card:hover h3,

.portal-card:hover p{

color:#fff;

}

.portal-card:hover .portal-icon{

background:#fff;

color:#2563EB;

transform:rotateY(180deg);

}

.portal-icon{

width:85px;

height:85px;

margin:auto;

border-radius:22px;

display:flex;

justify-content:center;

align-items:center;

background:linear-gradient(135deg,#2563EB,#F97316);

font-size:34px;

color:#fff;

margin-bottom:28px;

transition:.6s;

}

.portal-card h3{

font-size:24px;

margin-bottom:18px;

color:#0F172A;

}

.portal-card p{

color:#64748B;

line-height:1.8;

font-size:16px;

}
/*==================================
        FEATURES
==================================*/

.features{

padding:120px 0;

background:#F8FAFC;

position:relative;

}

.feature-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

margin-top:60px;

}

.feature-card{

background:#fff;

padding:40px 35px;

border-radius:22px;

transition:.45s;

box-shadow:0 15px 40px rgba(0,0,0,.06);

position:relative;

overflow:hidden;

}

.feature-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:5px;

height:0;

background:#F97316;

transition:.45s;

}

.feature-card:hover::before{

height:100%;

}

.feature-card:hover{

transform:translateY(-12px);

box-shadow:0 25px 60px rgba(0,0,0,.12);

}

.feature-card i{

width:70px;

height:70px;

display:flex;

justify-content:center;

align-items:center;

border-radius:18px;

background:linear-gradient(135deg,#2563EB,#7C3AED);

font-size:28px;

color:#fff;

margin-bottom:25px;

transition:.4s;

}

.feature-card:hover i{

background:#F97316;

transform:rotate(10deg) scale(1.08);

}

.feature-card h3{

font-size:24px;

margin-bottom:15px;

color:#0F172A;

}

.feature-card p{

color:#64748B;

line-height:1.8;

font-size:16px;

}
@media(max-width:1100px){

.feature-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.feature-grid{

grid-template-columns:1fr;

}

}
/*==================================
      HOW IT WORKS
==================================*/

.how-it-works{

padding:120px 0;

background:#ffffff;

position:relative;

overflow:hidden;

}

.timeline{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:40px;

margin-top:80px;

position:relative;

}

.timeline-line{

position:absolute;

top:45px;

left:12%;

width:76%;

height:4px;

background:linear-gradient(90deg,#2563EB,#FBBF24);

z-index:0;

border-radius:50px;

}

.step{

background:#fff;

padding:45px 35px;

border-radius:25px;

text-align:center;

box-shadow:0 18px 45px rgba(0,0,0,.06);

position:relative;

z-index:2;

transition:.45s;

}

.step:hover{

transform:translateY(-12px);

box-shadow:0 25px 60px rgba(0,0,0,.12);

}

.step-number{

width:90px;

height:90px;

margin:auto;

margin-bottom:30px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:32px;

font-weight:800;

color:#fff;

background:linear-gradient(135deg,#2563EB,#7C3AED);

box-shadow:0 15px 35px rgba(37,99,235,.25);

transition:.4s;

}

.step:hover .step-number{

transform:scale(1.1) rotate(8deg);

background:#F97316;

}

.step h3{

font-size:25px;

margin-bottom:18px;

color:#0F172A;

}

.step p{

color:#64748B;

line-height:1.8;

font-size:16px;

}

.how-btn{

text-align:center;

margin-top:70px;

}
@media(max-width:992px){

.timeline{

grid-template-columns:1fr;

}

.timeline-line{

display:none;

}

}
/*==================================
      DASHBOARD
==================================*/

.dashboard-preview{

padding:120px 0;

background:#F8FAFC;

}

.dashboard-tabs{

display:flex;

justify-content:center;

gap:18px;

margin:50px 0;

flex-wrap:wrap;

}

.tab-btn{

padding:14px 28px;

background:#fff;

border:none;

border-radius:50px;

font-size:16px;

font-weight:700;

cursor:pointer;

transition:.35s;

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

}

.tab-btn.active{

background:linear-gradient(90deg,#2563EB,#7C3AED);

color:#fff;

}

.tab-btn:hover{

transform:translateY(-4px);

}

.dashboard-box{

background:#fff;

padding:25px;

border-radius:30px;

box-shadow:0 25px 70px rgba(0,0,0,.08);

overflow:hidden;

}

.dashboard-box img{

width:100%;

border-radius:20px;

transition:.45s;

}

.dashboard-box:hover img{

transform:scale(1.02);

}

.dashboard-demo{

text-align:center;

margin-top:50px;

}

.dashboard-demo h3{

font-size:34px;

margin-bottom:25px;

color:#0F172A;

}
/*==================================
      WHY CHOOSE
==================================*/

.why-us{

padding:120px 0;

background:#ffffff;

}

.why-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

margin-top:60px;

}

.why-card{

background:#F8FAFC;

padding:40px 30px;

border-radius:24px;

transition:.4s;

text-align:center;

border:1px solid #E2E8F0;

}

.why-card:hover{

transform:translateY(-12px);

background:#2563EB;

box-shadow:0 25px 60px rgba(37,99,235,.18);

}

.why-icon{

width:80px;

height:80px;

margin:auto;

margin-bottom:25px;

border-radius:20px;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(135deg,#2563EB,#7C3AED);

font-size:30px;

color:#fff;

transition:.4s;

}

.why-card:hover .why-icon{

background:#fff;

color:#2563EB;

transform:rotateY(180deg);

}

.why-card h3{

font-size:24px;

margin-bottom:15px;

color:#0F172A;

transition:.3s;

}

.why-card p{

color:#64748B;

line-height:1.8;

transition:.3s;

}

.why-card:hover h3,

.why-card:hover p{

color:#fff;

}
@media(max-width:1100px){

.why-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.why-grid{

grid-template-columns:1fr;

}

}
/*==================================
        PRICING
==================================*/

.pricing{

padding:120px 0;

background:#F8FAFC;

}

.pricing-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:35px;

margin-top:70px;

}

.price-card{

background:#fff;

padding:45px;

border-radius:28px;

box-shadow:0 18px 50px rgba(0,0,0,.06);

position:relative;

transition:.4s;

border:1px solid #E2E8F0;

}

.price-card:hover{

transform:translateY(-12px);

box-shadow:0 30px 70px rgba(0,0,0,.12);

}

.featured{

background:linear-gradient(135deg,#2563EB,#7C3AED);

color:#fff;

transform:scale(1.05);

}

.badge{

position:absolute;

top:-15px;

left:50%;

transform:translateX(-50%);

background:#FBBF24;

color:#111827;

padding:8px 22px;

border-radius:30px;

font-size:14px;

font-weight:700;

}

.price-card h4{

font-size:24px;

margin-bottom:15px;

}

.price-card h2{

font-size:52px;

margin-bottom:15px;

}

.price-card h2 span{

font-size:20px;

font-weight:500;

}

.plan-text{

margin-bottom:30px;

opacity:.8;

}

.price-card ul{

list-style:none;

padding:0;

margin:0 0 35px;

}

.price-card ul li{

margin-bottom:15px;

display:flex;

align-items:center;

gap:12px;

}

.price-card ul i{

color:#10B981;

}

.featured ul i{

color:#FBBF24;

}

.price-btn{

display:block;

text-align:center;

padding:16px;

border-radius:50px;

background:#2563EB;

color:#fff;

font-weight:700;

transition:.3s;

text-decoration:none;

}

.featured .price-btn{

background:#fff;

color:#2563EB;

}

.price-btn:hover{

transform:translateY(-3px);

}
@media(max-width:1100px){

.pricing-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.pricing-grid{

grid-template-columns:1fr;

}

.featured{

transform:none;

}

}
/*==================================
            FAQ
==================================*/

.faq{

padding:120px 0;

background:#ffffff;

}

.faq-wrapper{

max-width:900px;

margin:60px auto 0;

}

.faq-item{

background:#F8FAFC;

border-radius:20px;

margin-bottom:20px;

overflow:hidden;

border:1px solid #E2E8F0;

transition:.35s;

}

.faq-item.active{

box-shadow:0 15px 45px rgba(37,99,235,.12);

}

.faq-question{

width:100%;

padding:25px 30px;

border:none;

background:none;

display:flex;

justify-content:space-between;

align-items:center;

cursor:pointer;

font-size:20px;

font-weight:600;

color:#0F172A;

}

.faq-question i{

width:42px;

height:42px;

border-radius:50%;

background:#2563EB;

color:#fff;

display:flex;

justify-content:center;

align-items:center;

transition:.35s;

}

.faq-item.active .faq-question i{

transform:rotate(45deg);

background:#F97316;

}

.faq-answer{

max-height:0;

overflow:hidden;

transition:max-height .4s ease;

}

.faq-item.active .faq-answer{

max-height:250px;

}

.faq-answer p{

padding:0 30px 30px;

color:#64748B;

line-height:1.8;

font-size:17px;

}
@media(max-width:768px){

.faq-question{

font-size:17px;

padding:20px;

}

.faq-answer p{

padding:0 20px 20px;

font-size:15px;

}

}
/*==================================
      EARLY PARTNER
==================================*/

.partner-program{

padding:120px 0;

background:#F8FAFC;

}

.partner-box{

display:grid;

grid-template-columns:2fr 1fr;

gap:60px;

align-items:center;

background:#fff;

padding:70px;

border-radius:35px;

box-shadow:0 25px 70px rgba(0,0,0,.08);

}

.offer-tag{

display:inline-block;

padding:10px 22px;

background:#FEF3C7;

color:#B45309;

font-weight:700;

border-radius:50px;

margin-bottom:25px;

}

.partner-left h2{

font-size:48px;

color:#0F172A;

margin-bottom:20px;

}

.partner-left h2 span{

color:#2563EB;

}

.partner-left p{

font-size:18px;

line-height:1.8;

color:#64748B;

margin-bottom:35px;

}

.partner-features{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:20px;

margin-bottom:40px;

}

.partner-item{

display:flex;

align-items:center;

gap:12px;

font-weight:600;

color:#334155;

}

.partner-item i{

color:#10B981;

font-size:20px;

}

.partner-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

}

.partner-btn{

padding:16px 35px;

background:#2563EB;

color:#fff;

border-radius:50px;

font-weight:700;

text-decoration:none;

transition:.35s;

}

.partner-btn:hover{

transform:translateY(-4px);

background:#1E40AF;

}

.partner-outline{

padding:16px 35px;

border:2px solid #2563EB;

color:#2563EB;

border-radius:50px;

font-weight:700;

text-decoration:none;

transition:.35s;

}

.partner-outline:hover{

background:#2563EB;

color:#fff;

}

.partner-card{

background:linear-gradient(135deg,#2563EB,#7C3AED);

border-radius:30px;

padding:45px 30px;

text-align:center;

color:#fff;

}
input::placeholder {
    color: #111111;
    opacity: 1;
}

.partner-icon{

width:90px;

height:90px;

margin:auto;

margin-bottom:25px;

border-radius:50%;

background:rgba(255,255,255,.18);

display:flex;

justify-content:center;

align-items:center;

font-size:34px;

}

.benefit-number{

font-size:64px;

font-weight:800;

margin:20px 0;

color:#FBBF24;

}
@media(max-width:992px){

.partner-box{

grid-template-columns:1fr;

padding:40px;

}

.partner-features{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.partner-left h2{

font-size:36px;

}

.partner-buttons{

flex-direction:column;

}

.partner-btn,

.partner-outline{

text-align:center;

}

}
/*==================================
        DEMO SECTION
==================================*/

.demo-section{

    padding:120px 0;

    background:#ffffff;

}

.demo-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.demo-left h2{

    font-size:48px;

    margin:20px 0;

    color:#0F172A;

}

.demo-left h2 span{

    color:#2563EB;

}

.demo-left p{

    color:#64748B;

    line-height:1.9;

    font-size:18px;

    margin-bottom:40px;

}

.demo-benefits{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.benefit{

    display:flex;

    align-items:center;

    gap:15px;

    font-size:18px;

    color:#334155;

    font-weight:600;

}

.benefit i{

    color:#10B981;

    font-size:22px;

}

.demo-form-box{

    background:#F8FAFC;

    padding:45px;

    border-radius:30px;

    box-shadow:0 20px 60px rgba(0,0,0,.08);

}

.form-group{

    margin-bottom:22px;

}

.form-group input,

.form-group select{

    width:100%;

    padding:18px 20px;

    border:1px solid #CBD5E1;

    border-radius:15px;

    font-size:16px;

    outline:none;

    transition:.3s;

    background:#fff;

}

.form-group input:focus,

.form-group select:focus{

    border-color:#2563EB;

    box-shadow:0 0 0 4px rgba(37,99,235,.15);

}

.demo-submit{

    width:100%;

    padding:18px;

    border:none;

    border-radius:50px;

    background:linear-gradient(90deg,#2563EB,#7C3AED);

    color:#fff;

    font-size:17px;

    font-weight:700;

    cursor:pointer;

    transition:.35s;

}

.demo-submit:hover{

    transform:translateY(-4px);

    box-shadow:0 20px 45px rgba(37,99,235,.25);

}
@media(max-width:992px){

.demo-wrapper{

    grid-template-columns:1fr;

}

}

@media(max-width:768px){

.demo-section{

    padding:80px 0;

}

.demo-left h2{

    font-size:34px;

}

.demo-form-box{

    padding:30px;

}

}
/*==================================
        FINAL CTA
==================================*/

.final-cta{

    padding:120px 0;

    background:linear-gradient(135deg,#2563EB,#1E3A8A,#7C3AED);

    position:relative;

    overflow:hidden;

}

.final-cta::before{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    top:-120px;

    left:-120px;

}

.final-cta::after{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    border-radius:50%;

    background:rgba(255,255,255,.06);

    right:-100px;

    bottom:-100px;

}

.cta-box{

    position:relative;

    z-index:2;

    max-width:950px;

    margin:auto;

    text-align:center;

    color:#fff;

}

.cta-tag{

    display:inline-block;

    padding:10px 24px;

    border-radius:50px;

    background:rgba(255,255,255,.15);

    backdrop-filter:blur(10px);

    margin-bottom:25px;

    font-weight:600;

}

.cta-box h2{

    font-size:52px;

    margin-bottom:25px;

    line-height:1.3;

}

.cta-box h2 span{

    color:#FBBF24;

}

.cta-box p{

    max-width:700px;

    margin:auto;

    font-size:18px;

    line-height:1.9;

    opacity:.95;

}

.cta-stats{

    display:flex;

    justify-content:center;

    gap:70px;

    margin:60px 0;

    flex-wrap:wrap;

}

.cta-stat{

    text-align:center;

}

.cta-stat h3{

    font-size:42px;

    color:#FBBF24;

    margin-bottom:10px;

}

.cta-stat span{

    font-size:17px;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.cta-primary{

    background:#FBBF24;

    color:#111827;

    padding:18px 38px;

    border-radius:50px;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}

.cta-primary:hover{

    transform:translateY(-5px);

    background:#fff;

}

.cta-secondary{

    padding:18px 38px;

    border:2px solid #fff;

    border-radius:50px;

    text-decoration:none;

    color:#fff;

    font-weight:700;

    transition:.35s;

}

.cta-secondary:hover{

    background:#fff;

    color:#2563EB;

}
@media(max-width:768px){

.final-cta{

    padding:80px 0;

}

.cta-box h2{

    font-size:34px;

}

.cta-stats{

    gap:30px;

}

.cta-buttons{

    flex-direction:column;

    align-items:center;

}

.cta-primary,

.cta-secondary{

    width:100%;

    max-width:300px;

    text-align:center;

}

}
/*==================================
            FOOTER
==================================*/

.footer{

    background:#0F172A;

    color:#CBD5E1;

    padding:90px 0 25px;

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1.3fr;

    gap:60px;

    margin-bottom:60px;

}

.footer-logo img{

    width:220px;

    margin-bottom:25px;

}

.footer-about p{

    line-height:1.9;

    margin-bottom:30px;

    color:#94A3B8;

}

.powered-link{

    display:inline-block;

    padding:14px 22px;

    background:#2563EB;

    color:#fff;

    border-radius:50px;

    text-decoration:none;

    transition:.35s;

}

.powered-link:hover{

    background:#FBBF24;

    color:#111827;

    transform:translateY(-4px);

}

.footer-links h3,

.footer-contact h3{

    color:#fff;

    margin-bottom:25px;

    font-size:22px;

}

.footer-links ul{

    list-style:none;

    padding:0;

}

.footer-links li{

    margin-bottom:16px;

}

.footer-links a{

    color:#CBD5E1;

    text-decoration:none;

    transition:.3s;

}

.footer-links a:hover{

    color:#FBBF24;

    padding-left:8px;

}

.footer-contact p{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:20px;

}

.footer-contact a{

    color:#CBD5E1;

    text-decoration:none;

}

.footer-contact a:hover{

    color:#FBBF24;

}

.social-links{

    display:flex;

    gap:15px;

    margin-top:25px;

}

.social-links a{

    width:45px;

    height:45px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#1E293B;

    color:#fff;

    transition:.35s;

}

.social-links a:hover{

    background:#2563EB;

    transform:translateY(-5px);

}

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.1);

    padding-top:25px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:15px;

}

.footer-bottom p{

    color:#94A3B8;

}

.footer-bottom a{

    color:#FBBF24;

    text-decoration:none;

    font-weight:600;

}

.footer-bottom a:hover{

    color:#fff;

}
@media(max-width:992px){

.footer-grid{

    grid-template-columns:repeat(2,1fr);

    gap:40px;

}

}

@media(max-width:768px){

.footer{

    padding:70px 0 25px;

}

.footer-grid{

    grid-template-columns:1fr;

    text-align:center;

}

.footer-contact p{

    justify-content:center;

}

.social-links{

    justify-content:center;

}

.footer-bottom{

    flex-direction:column;

    text-align:center;

}

.footer-logo img{

    margin:auto auto 25px;

}

}
/*==================================
        ABOUT HERO
==================================*/

.about-hero{

padding:170px 0 120px;

background:linear-gradient(180deg,#ffffff,#F8FAFC);

overflow:hidden;

position:relative;

}

.about-wrapper{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.about-left h1{

font-size:60px;

line-height:1.2;

color:#0F172A;

margin:20px 0;

font-weight:800;

}

.about-left h1 span{

color:#2563EB;

}

.about-left p{

font-size:18px;

line-height:1.9;

color:#64748B;

margin-bottom:40px;

max-width:600px;

}

.about-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

}

.about-right{

position:relative;

}

.about-right img{

width:100%;

border-radius:30px;

box-shadow:0 30px 80px rgba(0,0,0,.10);

}

.floating-card{

position:absolute;

background:#fff;

padding:18px 22px;

border-radius:18px;

display:flex;

align-items:center;

gap:15px;

box-shadow:0 20px 45px rgba(0,0,0,.10);

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

}

.floating-card i{

width:55px;

height:55px;

border-radius:15px;

display:flex;

justify-content:center;

align-items:center;

background:linear-gradient(135deg,#2563EB,#7C3AED);

color:#fff;

font-size:22px;

}

.floating-card strong{

display:block;

font-size:17px;

color:#0F172A;

}

.floating-card p{

font-size:14px;

margin-top:5px;

color:#64748B;

}

.card-one{

top:40px;

left:-50px;

}

.card-two{

bottom:50px;

right:-40px;

}

@keyframes floatCard{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}
/*==================================
      ABOUT PLATFORM
==================================*/

.about-platform{

padding:120px 0;

background:#ffffff;

position:relative;

overflow:hidden;

}

.about-platform::before{

content:"";

position:absolute;

width:450px;

height:450px;

background:#EFF6FF;

border-radius:50%;

top:-180px;

right:-180px;

z-index:0;

}

.about-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

position:relative;

z-index:2;

}

.about-image{

position:relative;

}

.about-image img{

width:100%;

border-radius:30px;

box-shadow:0 30px 70px rgba(0,0,0,.08);

transition:.5s;

}

.about-image:hover img{

transform:scale(1.03);

}

.experience-card{

position:absolute;

bottom:35px;

left:-35px;

background:#2563EB;

padding:28px;

border-radius:24px;

color:#fff;

box-shadow:0 25px 45px rgba(37,99,235,.25);

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

}

.experience-card h2{

font-size:50px;

margin:0;

line-height:1;

}

.experience-card span{

font-size:16px;

}

.about-content h2{

font-size:48px;

margin:20px 0;

line-height:1.3;

color:#0F172A;

}

.about-content h2 span{

color:#2563EB;

}

.about-content p{

font-size:17px;

line-height:1.9;

color:#64748B;

margin-bottom:25px;

}

.about-features{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:20px;

margin-top:40px;

}

.feature-box{

display:flex;

align-items:center;

gap:18px;

background:#F8FAFC;

padding:22px;

border-radius:18px;

transition:.35s;

border:1px solid #E2E8F0;

}

.feature-box:hover{

transform:translateY(-8px);

background:#2563EB;

}

.feature-box i{

width:60px;

height:60px;

display:flex;

justify-content:center;

align-items:center;

border-radius:16px;

background:#2563EB;

color:#fff;

font-size:24px;

transition:.35s;

}

.feature-box:hover i{

background:#fff;

color:#2563EB;

transform:rotateY(180deg);

}

.feature-box h4{

margin:0;

font-size:18px;

color:#0F172A;

transition:.35s;

}

.feature-box span{

font-size:14px;

color:#64748B;

transition:.35s;

}

.feature-box:hover h4,

.feature-box:hover span{

color:#fff;

}

@keyframes floatCard{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}
@media(max-width:992px){

.about-grid{

grid-template-columns:1fr;

gap:50px;

}

.about-content{

text-align:center;

}

.about-features{

grid-template-columns:1fr;

}

.experience-card{

left:20px;

bottom:20px;

}

}

@media(max-width:768px){

.about-platform{

padding:80px 0;

}

.about-content h2{

font-size:34px;

}

.experience-card{

position:relative;

left:0;

bottom:0;

margin-top:20px;

display:inline-block;

}

}
/*==================================
      MISSION & VISION
==================================*/

.mission-section{

padding:120px 0;

background:linear-gradient(180deg,#F8FAFC,#ffffff);

position:relative;

overflow:hidden;

}

.mission-section::before{

content:"";

position:absolute;

width:500px;

height:500px;

border-radius:50%;

background:rgba(37,99,235,.05);

left:-220px;

top:-200px;

}

.mission-section::after{

content:"";

position:absolute;

width:420px;

height:420px;

border-radius:50%;

background:rgba(124,58,237,.05);

right:-180px;

bottom:-180px;

}

.mission-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:40px;

margin-top:70px;

position:relative;

z-index:2;

}

.mission-card{

position:relative;

padding:50px 40px;

background:rgba(255,255,255,.75);

backdrop-filter:blur(18px);

border-radius:28px;

overflow:hidden;

border:1px solid rgba(255,255,255,.5);

box-shadow:0 25px 60px rgba(0,0,0,.06);

transition:.45s;

}

.mission-card:hover{

transform:translateY(-12px);

box-shadow:0 35px 80px rgba(37,99,235,.15);

}

.card-glow{

position:absolute;

width:180px;

height:180px;

background:linear-gradient(135deg,#2563EB,#7C3AED);

filter:blur(90px);

opacity:.15;

top:-70px;

right:-70px;

transition:.4s;

}

.mission-card:hover .card-glow{

opacity:.3;

}

.mission-icon{

width:90px;

height:90px;

border-radius:24px;

display:flex;

justify-content:center;

align-items:center;

background:linear-gradient(135deg,#2563EB,#7C3AED);

color:#fff;

font-size:34px;

margin-bottom:30px;

transition:.45s;

}

.mission-card:hover .mission-icon{

transform:rotateY(180deg) scale(1.08);

}

.mission-card h3{

font-size:30px;

margin-bottom:18px;

color:#0F172A;

}

.mission-card p{

font-size:17px;

line-height:1.9;

color:#64748B;

}
@media(max-width:992px){

.mission-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.mission-section{

padding:80px 0;

}

.mission-card{

padding:35px 25px;

}

.mission-card h3{

font-size:24px;

}

}
/*==================================
        CORE VALUES
==================================*/

.core-values{

padding:120px 0;

background:#F8FAFC;

position:relative;

overflow:hidden;

}

.values-wrapper{

position:relative;

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

margin-top:70px;

}

.value-line{

position:absolute;

top:55px;

left:8%;

width:84%;

height:3px;

background:linear-gradient(90deg,#2563EB,#7C3AED,#F97316);

border-radius:30px;

z-index:0;

}

.value-card{

position:relative;

z-index:2;

background:#fff;

padding:40px 30px;

border-radius:24px;

text-align:center;

box-shadow:0 18px 45px rgba(0,0,0,.06);

transition:.45s;

overflow:hidden;

}

.value-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:5px;

background:linear-gradient(90deg,#2563EB,#7C3AED);

transform:scaleX(0);

transition:.4s;

}

.value-card:hover::before{

transform:scaleX(1);

}

.value-card:hover{

transform:translateY(-15px);

box-shadow:0 30px 70px rgba(37,99,235,.18);

}

.value-icon{

width:90px;

height:90px;

margin:auto;

margin-bottom:25px;

border-radius:22px;

display:flex;

justify-content:center;

align-items:center;

background:linear-gradient(135deg,#2563EB,#7C3AED);

font-size:34px;

color:#fff;

transition:.45s;

}

.value-card:hover .value-icon{

transform:rotateY(180deg) scale(1.08);

background:linear-gradient(135deg,#F97316,#FBBF24);

}

.value-card h3{

font-size:24px;

margin-bottom:15px;

color:#0F172A;

}

.value-card p{

font-size:16px;

line-height:1.8;

color:#64748B;

}
@media(max-width:1100px){

.values-wrapper{

grid-template-columns:repeat(2,1fr);

}

.value-line{

display:none;

}

}

@media(max-width:768px){

.core-values{

padding:80px 0;

}

.values-wrapper{

grid-template-columns:1fr;

}

.value-card{

padding:35px 25px;

}

}
/*==================================
    COMPANY SECTION
==================================*/

.company-section{

padding:120px 0;

background:#ffffff;

overflow:hidden;

position:relative;

}

.company-wrapper{

display:grid;

grid-template-columns:1.2fr 1fr;

gap:80px;

align-items:center;

}

.company-content h2{

font-size:48px;

line-height:1.3;

margin:20px 0;

color:#0F172A;

}

.company-content h2 span{

color:#2563EB;

}

.company-content p{

font-size:17px;

line-height:1.9;

color:#64748B;

margin-bottom:20px;

}

.company-services{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:18px;

margin:35px 0;

}

.service-item{

display:flex;

align-items:center;

gap:15px;

padding:18px;

background:#F8FAFC;

border-radius:18px;

transition:.35s;

border:1px solid #E2E8F0;

}

.service-item:hover{

background:#2563EB;

transform:translateY(-8px);

}

.service-item i{

width:55px;

height:55px;

border-radius:15px;

display:flex;

justify-content:center;

align-items:center;

background:linear-gradient(135deg,#2563EB,#7C3AED);

color:#fff;

font-size:22px;

transition:.35s;

}

.service-item:hover i{

background:#fff;

color:#2563EB;

transform:rotateY(180deg);

}

.service-item span{

font-weight:600;

color:#0F172A;

transition:.35s;

}

.service-item:hover span{

color:#fff;

}

.company-btn{

display:inline-block;

padding:18px 36px;

background:linear-gradient(135deg,#2563EB,#7C3AED);

color:#fff;

border-radius:50px;

text-decoration:none;

font-weight:700;

transition:.35s;

}

.company-btn:hover{

transform:translateY(-5px);

box-shadow:0 20px 40px rgba(37,99,235,.25);

}

.company-right{

position:relative;

}

.company-card{

background:#fff;

padding:45px;

border-radius:30px;

box-shadow:0 25px 60px rgba(0,0,0,.08);

text-align:center;

}

.company-logo img{

width:180px;

margin-bottom:25px;

}

.company-card h3{

font-size:28px;

margin-bottom:15px;

color:#0F172A;

}

.company-card p{

color:#64748B;

line-height:1.8;

}

.mini-card{

position:absolute;

display:flex;

align-items:center;

gap:12px;

background:#fff;

padding:15px 22px;

border-radius:18px;

box-shadow:0 15px 40px rgba(0,0,0,.08);

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

}

.mini-card i{

color:#2563EB;

font-size:22px;

}

.one{

top:20px;

left:-40px;

}

.two{

top:180px;

right:-30px;

animation-delay:1s;

}

.three{

bottom:20px;

left:-20px;

animation-delay:2s;

}
@media(max-width:992px){

.company-wrapper{

grid-template-columns:1fr;

gap:60px;

}

.company-content{

text-align:center;

}

.company-services{

grid-template-columns:1fr;

}

.company-right{

display:flex;

flex-direction:column;

gap:20px;

}

.mini-card{

position:relative;

left:0;

right:0;

top:0;

bottom:0;

margin:auto;

width:max-content;

}

}

@media(max-width:768px){

.company-section{

padding:80px 0;

}

.company-content h2{

font-size:34px;

}

.company-card{

padding:30px;

}

.company-logo img{

width:140px;

}

}
/*==================================
      WHY ZENCAMPUS
==================================*/

.why-zencampus{

padding:120px 0;

background:#F8FAFC;

}

.why-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

margin:70px 0;

}

.why-item{

background:#fff;

padding:35px;

border-radius:24px;

text-align:center;

transition:.4s;

box-shadow:0 15px 45px rgba(0,0,0,.05);

}

.why-item:hover{

transform:translateY(-10px);

background:#2563EB;

}

.why-icon{

width:80px;

height:80px;

margin:auto;

margin-bottom:20px;

border-radius:20px;

display:flex;

justify-content:center;

align-items:center;

background:linear-gradient(135deg,#2563EB,#7C3AED);

color:#fff;

font-size:30px;

transition:.4s;

}

.why-item:hover .why-icon{

background:#fff;

color:#2563EB;

transform:rotateY(180deg);

}

.why-item h3{

margin-bottom:15px;

color:#0F172A;

transition:.3s;

}

.why-item p{

line-height:1.8;

color:#64748B;

transition:.3s;

}

.why-item:hover h3,

.why-item:hover p{

color:#fff;

}

/* Portal */

.portal-strip{

margin-top:80px;

display:flex;

justify-content:center;

align-items:center;

gap:18px;

flex-wrap:wrap;

}

.portal-box{

background:#fff;

padding:22px;

border-radius:18px;

min-width:120px;

text-align:center;

box-shadow:0 10px 30px rgba(0,0,0,.06);

transition:.35s;

}

.portal-box:hover{

background:#2563EB;

color:#fff;

transform:translateY(-8px);

}

.portal-box i{

font-size:28px;

margin-bottom:12px;

display:block;

}

.arrow{

font-size:22px;

color:#2563EB;

}

/* CTA */

.about-cta{

margin-top:80px;

padding:60px;

border-radius:30px;

background:linear-gradient(135deg,#2563EB,#7C3AED);

text-align:center;

color:#fff;

}

.about-cta h3{

font-size:38px;

margin-bottom:25px;

}
@media(max-width:992px){

.why-grid{

grid-template-columns:repeat(2,1fr);

}

.arrow{

display:none;

}

}

@media(max-width:768px){

.why-grid{

grid-template-columns:1fr;

}

.portal-strip{

flex-direction:column;

}

.about-cta{

padding:40px 25px;

}

.about-cta h3{

font-size:28px;

}

}
/*==================================
      HOW IT WORKS
==================================*/

.workflow-section{

padding:130px 0;

background:#fff;

position:relative;

overflow:hidden;

}

.workflow{

margin-top:90px;

display:grid;

grid-template-columns:1fr 80px 1fr 80px 1fr;

align-items:center;

}

.workflow-card{

background:#fff;

padding:45px;

border-radius:28px;

box-shadow:0 20px 60px rgba(0,0,0,.06);

transition:.45s;

position:relative;

border:1px solid #EEF2F7;

overflow:hidden;

}

.workflow-card::before{

content:"";

position:absolute;

left:0;

top:0;

height:100%;

width:5px;

background:linear-gradient(#2563EB,#7C3AED);

transform:scaleY(0);

transition:.4s;

}

.workflow-card:hover::before{

transform:scaleY(1);

}

.workflow-card:hover{

transform:translateY(-12px);

box-shadow:0 35px 70px rgba(37,99,235,.12);

}

.workflow-card.active{

background:linear-gradient(135deg,#2563EB,#7C3AED);

color:#fff;

}

.step-no{

position:absolute;

top:20px;

right:20px;

font-size:70px;

font-weight:800;

opacity:.08;

}

.step-icon{

width:90px;

height:90px;

border-radius:22px;

display:flex;

justify-content:center;

align-items:center;

background:linear-gradient(135deg,#2563EB,#7C3AED);

color:#fff;

font-size:34px;

margin-bottom:30px;

transition:.4s;

}

.workflow-card.active .step-icon{

background:#fff;

color:#2563EB;

}

.workflow-card:hover .step-icon{

transform:rotateY(180deg);

}

.workflow-card h3{

margin-bottom:18px;

font-size:26px;

}

.workflow-card p{

line-height:1.9;

margin-bottom:25px;

}

.workflow-card ul{

padding-left:18px;

line-height:2;

}

.workflow-arrow{

display:flex;

justify-content:center;

font-size:34px;

color:#2563EB;

animation:moveArrow 2s infinite;

}

.workflow-bottom{

margin-top:90px;

text-align:center;

background:linear-gradient(135deg,#EFF6FF,#F8FAFC);

padding:55px;

border-radius:30px;

}

.workflow-bottom h3{

font-size:38px;

margin-bottom:30px;

}

.workflow-bottom span{

color:#2563EB;

}

@keyframes moveArrow{

0%{

transform:translateX(0);

}

50%{

transform:translateX(10px);

}

100%{

transform:translateX(0);

}

}
@media(max-width:1100px){

.workflow{

grid-template-columns:1fr;

gap:35px;

}

.workflow-arrow{

transform:rotate(90deg);

}

}

@media(max-width:768px){

.workflow-card{

padding:30px;

}

.workflow-bottom{

padding:35px 20px;

}

.workflow-bottom h3{

font-size:28px;

}

}
/*==================================
      ROLE ACCESS
==================================*/

.role-access{

padding:120px 0;

background:#F8FAFC;

overflow:hidden;

}

.role-timeline{

display:flex;

justify-content:center;

align-items:center;

gap:20px;

margin-top:70px;

flex-wrap:wrap;

}

.role-card{

width:210px;

background:#fff;

padding:35px 25px;

border-radius:24px;

text-align:center;

box-shadow:0 18px 45px rgba(0,0,0,.06);

transition:.4s;

position:relative;

}

.role-card:hover{

transform:translateY(-12px);

background:#2563EB;

}

.role-card:hover h3,

.role-card:hover p{

color:#fff;

}

.role-icon{

width:80px;

height:80px;

margin:auto;

margin-bottom:20px;

border-radius:22px;

display:flex;

justify-content:center;

align-items:center;

background:linear-gradient(135deg,#2563EB,#7C3AED);

color:#fff;

font-size:30px;

transition:.4s;

}

.role-card:hover .role-icon{

background:#fff;

color:#2563EB;

transform:rotateY(180deg);

}

.role-card h3{

margin-bottom:15px;

font-size:22px;

color:#0F172A;

}

.role-card p{

line-height:1.8;

color:#64748B;

font-size:15px;

}

.role-arrow{

font-size:28px;

color:#2563EB;

animation:arrowMove 2s infinite;

}

.role-bottom{

margin-top:70px;

background:#fff;

padding:35px;

border-radius:25px;

box-shadow:0 15px 45px rgba(0,0,0,.05);

}

.role-info{

display:flex;

align-items:center;

justify-content:center;

gap:20px;

}

.role-info i{

width:70px;

height:70px;

border-radius:20px;

display:flex;

justify-content:center;

align-items:center;

background:linear-gradient(135deg,#2563EB,#7C3AED);

color:#fff;

font-size:28px;

}

.role-info h4{

font-size:24px;

margin-bottom:8px;

color:#0F172A;

}

.role-info p{

color:#64748B;

line-height:1.7;

}

@keyframes arrowMove{

0%{

transform:translateX(0);

}

50%{

transform:translateX(10px);

}

100%{

transform:translateX(0);

}

}
@media(max-width:992px){

.role-arrow{

display:none;

}

.role-timeline{

flex-direction:column;

}

.role-card{

width:100%;

max-width:350px;

}

.role-info{

flex-direction:column;

text-align:center;

}

}
/*==================================
        FINAL CTA
==================================*/

.about-final-cta{

padding:130px 0;

background:linear-gradient(135deg,#2563EB,#1E3A8A,#7C3AED);

position:relative;

overflow:hidden;

}

.cta-wrapper{

position:relative;

padding:90px 70px;

border-radius:40px;

text-align:center;

background:rgba(255,255,255,.08);

backdrop-filter:blur(20px);

border:1px solid rgba(255,255,255,.15);

overflow:hidden;

}

.cta-glow{

position:absolute;

border-radius:50%;

filter:blur(90px);

opacity:.35;

animation:floatGlow 6s infinite ease-in-out;

}

.glow1{

width:250px;

height:250px;

background:#FBBF24;

top:-120px;

left:-80px;

}

.glow2{

width:220px;

height:220px;

background:#60A5FA;

right:-80px;

bottom:-80px;

animation-delay:2s;

}

.cta-badge{

display:inline-block;

padding:12px 28px;

border-radius:50px;

background:rgba(255,255,255,.15);

color:#fff;

font-weight:600;

margin-bottom:25px;

backdrop-filter:blur(10px);

}

.cta-wrapper h2{

font-size:56px;

line-height:1.2;

color:#fff;

margin-bottom:25px;

}

.cta-wrapper h2 span{

color:#FBBF24;

}

.cta-wrapper p{

max-width:760px;

margin:auto;

font-size:18px;

line-height:1.9;

color:rgba(255,255,255,.9);

}

.cta-features{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

margin:60px 0;

}

.cta-feature{

background:rgba(255,255,255,.12);

padding:30px 20px;

border-radius:22px;

transition:.4s;

}

.cta-feature:hover{

transform:translateY(-10px);

background:rgba(255,255,255,.22);

}

.cta-feature i{

font-size:34px;

color:#FBBF24;

margin-bottom:18px;

display:block;

}

.cta-feature span{

font-size:17px;

font-weight:600;

color:#fff;

}

.cta-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

margin-top:20px;

}

.cta-btn{

padding:18px 40px;

background:#FBBF24;

color:#111827;

font-weight:700;

border-radius:50px;

text-decoration:none;

transition:.35s;

}

.cta-btn:hover{

background:#fff;

transform:translateY(-5px);

}

.cta-outline{

padding:18px 40px;

border:2px solid #fff;

border-radius:50px;

text-decoration:none;

color:#fff;

font-weight:700;

transition:.35s;

}

.cta-outline:hover{

background:#fff;

color:#2563EB;

}

@keyframes floatGlow{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-30px);

}

100%{

transform:translateY(0);

}

}
@media(max-width:992px){

.cta-features{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.about-final-cta{

padding:80px 0;

}

.cta-wrapper{

padding:50px 25px;

}

.cta-wrapper h2{

font-size:36px;

}

.cta-features{

grid-template-columns:1fr;

}

.cta-buttons{

flex-direction:column;

align-items:center;

}

.cta-btn,

.cta-outline{

width:100%;

max-width:320px;

text-align:center;

}

}
/*==================================
        PRICING HERO
==================================*/

.pricing-hero{

padding:170px 0 120px;

background:linear-gradient(180deg,#ffffff,#F8FAFC);

overflow:hidden;

position:relative;

}

.pricing-hero::before{

content:"";

position:absolute;

width:450px;

height:450px;

background:#DBEAFE;

border-radius:50%;

top:-180px;

right:-180px;

}

.pricing-wrapper{

display:grid;

grid-template-columns:1.1fr 1fr;

gap:80px;

align-items:center;

}

.hero-badge{

display:inline-block;

padding:12px 24px;

background:#DBEAFE;

color:#2563EB;

font-weight:700;

border-radius:50px;

margin-bottom:20px;

}

.pricing-content h1{

font-size:62px;

line-height:1.2;

margin-bottom:25px;

color:#0F172A;

}

.pricing-content h1 span{

color:#2563EB;

}

.pricing-content p{

font-size:18px;

line-height:1.9;

color:#64748B;

margin-bottom:35px;

}

.hero-features{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:18px;

margin-bottom:40px;

}

.hero-features div{

display:flex;

align-items:center;

gap:12px;

font-weight:600;

color:#334155;

}

.hero-features i{

color:#10B981;

}

.hero-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

}

.pricing-visual{

position:relative;

height:500px;

display:flex;

justify-content:center;

align-items:center;

}

.pricing-circle{

width:320px;

height:320px;

border-radius:50%;

background:linear-gradient(135deg,#2563EB,#7C3AED);

opacity:.08;

}

.floating-price{

position:absolute;

background:#fff;

padding:25px;

border-radius:22px;

box-shadow:0 25px 60px rgba(0,0,0,.08);

animation:floatCard 5s ease-in-out infinite;

min-width:220px;

text-align:center;

}

.floating-price h4{

font-size:24px;

margin-bottom:8px;

color:#0F172A;

}

.floating-price span{

color:#64748B;

}

.basic{

top:40px;

left:20px;

}

.standard{

top:170px;

right:0;

animation-delay:1s;

border:2px solid #2563EB;

}

.premium{

bottom:30px;

left:60px;

animation-delay:2s;

}

@keyframes floatCard{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0);

}

}

/* ==================================
      MOBILE RESPONSIVE OVERRIDES
================================== */
@media (max-width: 992px) {
    .container {
        width: 90% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Hero section responsiveness */
    .hero {
        padding: 100px 0 50px 0 !important;
        min-height: auto !important;
    }
    .hero-wrapper {
        grid-template-columns: 1fr !important;
        gap: 50px !important;
        text-align: center !important;
    }
    .hero-left {
        align-items: center !important;
    }
    .hero h1 {
        font-size: 44px !important;
    }
    .hero p {
        font-size: 16px !important;
        margin: 20px 0 !important;
    }
    .hero-btns {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
    .hero-stats {
        justify-content: center !important;
        gap: 40px !important;
    }
    .hero-right {
        margin-top: 20px !important;
        width: 100% !important;
        max-width: 550px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Grids & Columns */
    .problem-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .dashboard-tabs {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
    }
    .dashboard-tabs button {
        padding: 10px 20px !important;
        font-size: 14px !important;
    }
    .why-us-grid, .why-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .portal-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .values-wrapper {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .footer-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 40px !important;
    }
    .contact-grid, .demo-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    /* Section heights & paddings */
    section {
        padding: 60px 0 !important;
    }
    
    /* Hero buttons size reduction */
    .btn-primary, .btn-outline {
        padding: 10px 20px !important;
        font-size: 14px !important;
        width: auto !important;
        display: inline-block !important;
        max-width: 250px !important;
        margin: 5px auto !important;
        text-align: center !important;
    }
    
    .section-title h2 {
        font-size: 28px !important;
        line-height: 1.3 !important;
    }
    
    /* Hero header */
    .hero h1 {
        font-size: 34px !important;
    }
    .hero-stats {
        gap: 20px !important;
    }
    .hero-stats h2 {
        font-size: 30px !important;
    }
    
    /* Disable absolute position of hero cards to prevent horizontal scroll */
    .hero-right .card {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        margin: 15px auto !important;
        width: 100% !important;
        max-width: 280px !important;
        justify-content: flex-start !important;
        box-shadow: 0 10px 25px rgba(0,0,0,.05) !important;
    }
    .hero-right {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    .dashboard {
        max-width: 90% !important;
        margin-bottom: 20px !important;
    }

    /* Stack grids vertically */
    .problem-grid,
    .why-us-grid,
    .why-grid,
    .pricing-grid,
    .portal-grid,
    .values-wrapper,
    .footer-grid,
    .faq-container,
    .faq-grid,
    .partner-grid {
        grid-template-columns: 1fr !important;
    }
    
    .dashboard-tabs {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }
    .dashboard-tabs button {
        width: 100% !important;
        text-align: center !important;
    }
    
    /* Timeline section stack */
    .timeline {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    .timeline-line {
        display: none !important;
    }
    
    /* Forms alignment */
    .contact-info, .demo-info,
    .contact-form, .demo-form {
        padding: 20px !important;
    }
    
    /* Value timeline line */
    .value-line {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .section-title h2 {
        font-size: 24px !important;
    }
    
    .hero-stats {
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
    }
    
    .hero-btns {
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
    }
    .hero-btns a {
        width: 100% !important;
        max-width: 250px !important;
        text-align: center !important;
    }
    
    .footer-bottom {
        flex-direction: column !important;
        gap: 15px !important;
        text-align: center !important;
    }
}
h2{
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(3.5rem, 6vw, 5.5rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -3px;
    color: #0F172A;
    max-width: 1100px;
    margin: 0 auto 28px;
    text-align: center;
}

h2 span{
    display: block;
    color: #2563EB;
}



/* =========================
   Reduce Section Spacing
========================= */

section{
    padding: 80px 0 !important;
}

/* Hero மட்டும் full height இருக்கட்டும் */
.hero,
.about-hero{
    padding: 0 !important;
}

/* Section Title */
.section-title{
    margin-bottom: 45px !important;
}

/* Grid spacing */
.about-wrapper,
.about-grid,
.company-wrapper,
.demo-wrapper{
    gap: 50px !important;
}

/* Cards */
.mission-grid,
.values-wrapper,
.why-grid,
.feature-grid,
.portal-grid,
.pricing-grid{
    margin-top: 40px !important;
}

/* CTA */
.final-cta{
    padding: 90px 0 !important;
}

/* Mobile */
@media (max-width:768px){

    section{
        padding:60px 0 !important;
    }

    .section-title{
        margin-bottom:30px !important;
    }

    .about-wrapper,
    .about-grid,
    .company-wrapper,
    .demo-wrapper{
        gap:30px !important;
    }
}
/* Remove underline from all button links */
a.btn-primary,
a.btn-outline,
a.login-btn,
a.demo-btn,
a.price-btn,
a.partner-btn,
a.partner-outline,
a.solution-btn,
a.cta-primary,
a.cta-secondary {
    text-decoration: none !important;
}

a.btn-primary:hover,
a.btn-outline:hover,
a.login-btn:hover,
a.demo-btn:hover,
a.price-btn:hover,
a.partner-btn:hover,
a.partner-outline:hover,
a.solution-btn:hover,
a.cta-primary:hover,
a.cta-secondary:hover,
a.btn-primary:focus,
a.btn-outline:focus,
a.login-btn:focus,
a.demo-btn:focus {
    text-decoration: none !important;
}
a {
    text-decoration: none !important;
}

a:hover,
a:focus,
a:visited,
a:active {
    text-decoration: none !important;
}
/* ==========================
   Mobile Card Layout
========================== */

@media (max-width:768px){

    /* Problems */
    .problem-grid{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:16px;
    }

    /* Portals */
    .portal-grid{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:16px;
    }

    /* Features */
    .feature-grid{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:16px;
    }

    /* Why Choose */
    .why-grid{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:16px;
    }

    /* Pricing */
    .pricing-grid{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:16px;
    }

    /* Card Size */
    .problem-card,
    .portal-card,
    .feature-card,
    .why-card,
    .price-card{
        padding:20px;
        border-radius:20px;
        min-height:auto;
    }

    .problem-card h3,
    .portal-card h3,
    .feature-card h3,
    .why-card h3{
        font-size:18px;
        line-height:1.3;
    }

    .problem-card p,
    .portal-card p,
    .feature-card p,
    .why-card p{
        font-size:14px;
        line-height:1.6;
    }

    .icon,
    .portal-icon,
    .feature-card i,
    .why-icon{
        transform:scale(.9);
    }
}