/*==================================================
    MALATI IT SOLUTIONS
    EDUCATION SOLUTIONS PAGE
===================================================*/

:root{

    --eduPrimary:#94c045;
    --eduPrimaryDark:#6f9832;
    --eduOrange:#d45e16;
    --eduDark:#1f2937;
    --eduText:#555;
    --eduWhite:#ffffff;
    --eduLight:#f8fafc;
    --eduBorder:#e5e7eb;
    --eduShadow:0 12px 40px rgba(0,0,0,.10);
    --eduRadius:18px;
    --eduTransition:.35s ease;

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;
    background:#fff;
    color:var(--eduDark);
    overflow-x:hidden;

}

img{

    max-width:100%;
    display:block;

}

a{

    text-decoration:none;

}

ul{

    list-style:none;

}

/*==========================================
CONTAINER
==========================================*/

.eduContainer{

    width:90%;
    max-width:1320px;
    margin:auto;

}

/*==========================================
SECTION SPACING
==========================================*/

.eduIntro,
.eduProducts,
.eduBenefits,
.eduServices,
.eduStatistics,
.eduProcess,
.eduCTA,
.eduFAQ{

    padding:90px 0;

}

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

.eduSectionHeading{

    text-align:center;
    margin-bottom:70px;

}

.eduSectionHeading h2{

    font-size:42px;
    font-weight:700;
    color:var(--eduDark);
    margin-bottom:18px;
    line-height:1.2;

}

.eduSectionHeading p{

    max-width:760px;
    margin:auto;
    font-size:17px;
    line-height:1.9;
    color:var(--eduText);

}

/*==========================================
HERO
==========================================*/

.eduHero{

    position:relative;
    min-height:100vh;

    display:flex;
    align-items:center;

    overflow:hidden;

    background:

    linear-gradient(120deg,
    rgba(20,20,20,.75),
    rgba(20,20,20,.40)),

    url("../images/education-banner.jpg");

    background-size:cover;
    background-position:center;

}

.eduHeroOverlay{

    position:absolute;
    inset:0;

    background:

    linear-gradient(to right,
    rgba(0,0,0,.50),
    rgba(0,0,0,.20));

}

.eduHeroContainer{

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

    margin:auto;

    position:relative;
    z-index:5;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;

    align-items:center;

}

.eduHeroTag{

    display:inline-block;

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

    color:#fff;

    padding:12px 22px;

    border-radius:50px;

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

    backdrop-filter:blur(15px);

    margin-bottom:25px;

    font-size:14px;

    letter-spacing:.8px;

}

.eduHeroTitle{

    color:#fff;

    font-size:58px;

    font-weight:700;

    line-height:1.15;

    margin-bottom:25px;

}

.eduHeroTitle span{

    color:var(--eduPrimary);

}

.eduHeroText{

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

    line-height:2;

    font-size:18px;

    margin-bottom:40px;

}

/*==========================================
BUTTONS
==========================================*/

.eduHeroButtons{

    display:flex;
    gap:18px;
    flex-wrap:wrap;

}

.eduBtnPrimary{

    background:var(--eduPrimary);

    color:#fff;

    padding:16px 34px;

    border-radius:60px;

    font-weight:600;

    transition:var(--eduTransition);

    box-shadow:0 10px 25px rgba(148,192,69,.30);

}

.eduBtnPrimary:hover{

    background:var(--eduPrimaryDark);

    transform:translateY(-4px);

}

.eduBtnSecondary{

    padding:16px 34px;

    border:2px solid #fff;

    color:#fff;

    border-radius:60px;

    transition:var(--eduTransition);

}

.eduBtnSecondary:hover{

    background:#fff;

    color:var(--eduDark);

}

/*==========================================
STATS
==========================================*/

.eduHeroStats{

    display:flex;
    gap:25px;

    margin-top:55px;

}

.eduStatBox{

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

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

    backdrop-filter:blur(18px);

    border-radius:18px;

    padding:24px;

    min-width:140px;

}

.eduStatBox h2{

    color:#fff;

    font-size:34px;

    margin-bottom:10px;

}

.eduStatBox p{

    color:#ddd;

}

/*==========================================
INTRO CARDS
==========================================*/

.eduCards{

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(250px,1fr));

    gap:35px;

}

.eduCard{

    background:#fff;

    padding:40px;

    border-radius:20px;

    box-shadow:var(--eduShadow);

    transition:.35s;

    border-top:5px solid transparent;

}

.eduCard:hover{

    transform:translateY(-12px);

    border-color:var(--eduPrimary);

}

.eduCard i{

    width:70px;
    height:70px;

    background:var(--eduPrimary);

    color:#fff;

    border-radius:50%;

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

    font-size:28px;

    margin-bottom:25px;

}

.eduCard h3{

    margin-bottom:18px;

    font-size:23px;

}

.eduCard p{

    line-height:1.9;

    color:var(--eduText);

}

/*==========================================
PRODUCTS
==========================================*/

.eduProducts{

    background:var(--eduLight);

}

.eduProductsGrid{

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(320px,1fr));

    gap:35px;

}

.eduProductCard{

    background:#fff;

    border-radius:20px;

    padding:45px;

    box-shadow:var(--eduShadow);

    transition:.35s;

}

.eduProductCard:hover{

    transform:translateY(-12px);

}

.eduProductCard i{

    font-size:52px;

    color:var(--eduPrimary);

    margin-bottom:28px;

}

.eduProductCard h3{

    font-size:28px;

    margin-bottom:25px;

}

.eduProductCard ul li{

    margin-bottom:15px;

    color:var(--eduText);

    position:relative;

    padding-left:25px;

}

.eduProductCard ul li::before{

    content:"✔";

    position:absolute;

    left:0;

    color:var(--eduPrimary);

    font-weight:bold;

}

.eduProductCard a{

    display:inline-block;

    margin-top:28px;

    background:var(--eduOrange);

    color:#fff;

    padding:14px 30px;

    border-radius:50px;

    transition:.3s;

}

.eduProductCard a:hover{

    background:#b94f10;

}

/*==========================================
BENEFITS
==========================================*/

.eduBenefits{

    background:#fff;

}

.eduBenefits .eduContainer{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.eduBenefitsLeft h2{

    font-size:46px;

    margin-bottom:25px;

}

.eduBenefitsLeft p{

    line-height:2;

    color:var(--eduText);

}

.eduBenefit{

    display:flex;

    gap:20px;

    margin-bottom:35px;

    align-items:flex-start;

}

.eduBenefit i{

    width:65px;
    height:65px;

    background:var(--eduPrimary);

    color:#fff;

    border-radius:50%;

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

    font-size:24px;

    flex-shrink:0;

}

.eduBenefit h3{

    margin-bottom:10px;

}

.eduBenefit p{

    color:var(--eduText);

    line-height:1.8;

}


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

.eduServices{

    background:#f9fafb;

}

.eduServicesGrid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:35px;

}

.eduServiceCard{

    background:#fff;

    padding:40px;

    border-radius:20px;

    transition:.35s;

    box-shadow:var(--eduShadow);

    border-bottom:5px solid transparent;

}

.eduServiceCard:hover{

    transform:translateY(-10px);

    border-bottom:5px solid var(--eduOrange);

}

.eduServiceIcon{

    width:75px;

    height:75px;

    background:linear-gradient(135deg,var(--eduPrimary),var(--eduOrange));

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    font-size:28px;

    margin-bottom:25px;

}

.eduServiceCard h3{

    margin-bottom:18px;

    font-size:24px;

}

.eduServiceCard p{

    color:var(--eduText);

    line-height:1.9;

}

/*==========================================
STATISTICS
==========================================*/

.eduStatistics{

    background:

    linear-gradient(135deg,#94c045,#6d8d32);

    color:#fff;

}

.eduStatsGrid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:40px;

}

.eduCounter{

    text-align:center;

}

.eduCounter h2{

    font-size:64px;

    margin-bottom:10px;

    font-weight:700;

}

.eduCounter span{

    font-size:18px;

    opacity:.95;

}

/*==========================================
TIMELINE
==========================================*/

.eduTimeline{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));

    gap:30px;

}

.eduStep{

    background:#fff;

    border-radius:20px;

    padding:35px;

    box-shadow:var(--eduShadow);

    transition:.35s;

    position:relative;

}

.eduStep:hover{

    transform:translateY(-10px);

}

.eduStepNumber{

    width:65px;

    height:65px;

    border-radius:50%;

    background:var(--eduOrange);

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

    font-weight:700;

    margin-bottom:25px;

}

.eduStep h3{

    margin-bottom:15px;

}

.eduStep p{

    color:var(--eduText);

    line-height:1.8;

}

/*==========================================
CTA
==========================================*/

.eduCTA{

    background:

    linear-gradient(135deg,#24352b,#111827);

    color:#fff;

    text-align:center;

}

.eduCTA h2{

    font-size:48px;

    margin-bottom:25px;

}

.eduCTA p{

    max-width:850px;

    margin:auto;

    line-height:2;

    margin-bottom:40px;

}

.eduCTAButtons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

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

.eduFAQ{

    background:#fff;

}

.eduFaqItem{

    max-width:900px;

    margin:20px auto;

    border-radius:16px;

    overflow:hidden;

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

}

.eduFaqQuestion{

    width:100%;

    padding:28px;

    border:none;

    background:#fff;

    cursor:pointer;

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-size:20px;

    font-weight:600;

}

.eduFaqQuestion span{

    font-size:28px;

    color:var(--eduPrimary);

}

.eduFaqAnswer{

    display:none;

    padding:0 28px 28px;

    line-height:2;

    color:var(--eduText);

}

/*==========================================
ORBIT
==========================================*/

.eduHeroRight{

    position:relative;

    min-height:700px;

}

.eduOrbit{

    position:absolute;

    right:-340px;

    top:50%;

    width:900px;

    height:900px;

    margin-top:-450px;

    border:2px dashed rgba(255,255,255,.08);

    border-radius:50%;

    animation:eduRotate 50s linear infinite;

}

.eduOrbit::before{

    content:"";

    position:absolute;

    inset:120px;

    border:2px dashed rgba(255,255,255,.05);

    border-radius:50%;

}

.eduOrbit::after{

    content:"";

    position:absolute;

    inset:240px;

    border:2px dashed rgba(255,255,255,.05);

    border-radius:50%;

}

.eduLogo{

    position:absolute;

    width:140px;

    height:140px;

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

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:15px;

    font-weight:700;

    color:#24352b;

    box-shadow:0 20px 40px rgba(0,0,0,.18);

}

/* Outer Ring */

.eduL1{top:-50px;left:370px;}
.eduL2{top:110px;right:-40px;}
.eduL3{top:380px;right:-60px;}
.eduL4{bottom:110px;right:30px;}
.eduL5{bottom:-55px;left:370px;}
.eduL6{bottom:130px;left:20px;}
.eduL7{top:380px;left:-60px;}
.eduL8{top:90px;left:40px;}

/* Inner Ring */

.eduL9{

    width:110px;
    height:110px;

    top:180px;
    left:390px;

}

.eduL10{

    width:110px;
    height:110px;

    right:180px;
    top:390px;

}

.eduL11{

    width:110px;
    height:110px;

    left:390px;
    bottom:180px;

}

.eduL12{

    width:110px;
    height:110px;

    left:180px;
    top:390px;

}

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

@keyframes eduRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

.eduCard,
.eduProductCard,
.eduServiceCard,
.eduStep{

    transition:.4s ease;

}

.eduCard:hover,
.eduProductCard:hover,
.eduServiceCard:hover,
.eduStep:hover{

    transform:translateY(-12px);

}

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

@media(max-width:1200px){

.eduHeroContainer{

grid-template-columns:1fr;

text-align:center;

}

.eduHeroButtons{

justify-content:center;

}

.eduHeroStats{

justify-content:center;

}

.eduHeroRight{

height:650px;

}

.eduOrbit{

right:50%;

transform:translateX(50%);

}

}

@media(max-width:992px){

.eduHeroTitle{

font-size:46px;

}

.eduSectionHeading h2{

font-size:36px;

}

.eduBenefits .eduContainer{

grid-template-columns:1fr;

}

.eduCTA h2{

font-size:38px;

}

}

@media(max-width:768px){

.eduHero{

padding:110px 0 60px;

min-height:auto;

}

.eduHeroContainer{

grid-template-columns:1fr;

text-align:center;

gap:40px;

}

.eduHeroTitle{

font-size:34px;

}

.eduHeroText{

font-size:16px;

}

.eduHeroButtons{

justify-content:center;

}

.eduHeroStats{

justify-content:center;

flex-wrap:wrap;

}

.eduStatBox{

width:140px;

padding:18px;

}

.eduHeroRight{

display:flex;

justify-content:center;

align-items:center;

height:360px;

position:relative;

overflow:hidden;

}

.eduOrbit{

width:340px;

height:340px;

right:-90px;

top:50%;

margin-top:-170px;

border-width:1px;

}

.eduOrbit::before{

inset:45px;

}

.eduOrbit::after{

inset:90px;

}

.eduLogo{

width:70px;

height:70px;

font-size:11px;

padding:6px;

}

.eduL1{top:-25px;left:135px;}
.eduL2{top:45px;right:-20px;}
.eduL3{top:135px;right:-25px;}
.eduL4{bottom:45px;right:0;}
.eduL5{bottom:-25px;left:135px;}
.eduL6{bottom:45px;left:0;}
.eduL7{top:135px;left:-25px;}
.eduL8{top:45px;left:0;}

.eduL9,
.eduL10,
.eduL11,
.eduL12{

width:55px;

height:55px;

font-size:9px;

}

.eduL9{

top:70px;

left:145px;

}

.eduL10{

right:70px;

top:145px;

}

.eduL11{

left:145px;

bottom:70px;

}

.eduL12{

left:70px;

top:145px;

}

.eduSectionHeading h2{

font-size:30px;

}

.eduCTA h2{

font-size:30px;

}

.eduBtnPrimary,
.eduBtnSecondary{

width:100%;

text-align:center;

}

.eduCTAButtons{

flex-direction:column;

}

}

@media(max-width:480px){

.eduContainer{

width:92%;

}

.eduSectionHeading h2{

font-size:26px;

}

.eduHeroTitle{

font-size:30px;

}

.eduProductCard,
.eduCard,
.eduServiceCard,
.eduStep{

padding:28px;

}

.eduCounter h2{

font-size:46px;

}

}