/*======================================================
        eduSoft Infotech
        Digital Marketing Landing Page

        Version : 1.0
======================================================*/


/*=========================================
Google Fonts
=========================================*/

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


/*=========================================
Root Variables
=========================================*/

:root{

--primary:#2563EB;

--secondary:#10B981;

--accent:#F59E0B;

--dark:#0F172A;

--light:#F8FAFC;

--white:#ffffff;

--gray:#64748B;

--border:#E2E8F0;

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

--radius:18px;

--transition:.35s ease;

}



/*=========================================
Reset
=========================================*/

*{

margin:0;

padding:0;

box-sizing:border-box;

}



html{

scroll-behavior:smooth;

}



body{

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

font-size:16px;

color:var(--dark);

background:var(--light);

overflow-x:hidden;

}



img{

max-width:100%;

display:block;

}



a{

text-decoration:none;

transition:var(--transition);

}



ul{

padding:0;

margin:0;

list-style:none;

}



section{

padding:90px 0;

position:relative;

}



.container{

max-width:1200px;

}



/*=========================================
Typography
=========================================*/

h1,

h2,

h3,

h4,

h5,

h6{

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

font-weight:700;

color:var(--dark);

}



h1{

font-size:58px;

line-height:1.15;

}



h2{

font-size:42px;

margin-bottom:18px;

}



h3{

font-size:32px;

}



p{

color:var(--gray);

line-height:1.8;

}



.section-subtitle{

display:inline-block;

padding:10px 22px;

background:#E0F2FE;

color:var(--primary);

border-radius:50px;

font-size:14px;

font-weight:600;

letter-spacing:.5px;

margin-bottom:18px;

text-transform:uppercase;

}



/*=========================================
Buttons
=========================================*/

.btn{

border-radius:50px;

padding:14px 34px;

font-weight:600;

transition:.4s;

}



.btn-primary{

background:var(--primary);

border:none;

}



.btn-primary:hover{

background:#1D4ED8;

transform:translateY(-4px);

box-shadow:

0 15px 30px rgba(37,99,235,.35);

}



.btn-outline-primary{

border:2px solid var(--primary);

color:var(--primary);

}



.btn-outline-primary:hover{

background:var(--primary);

color:#fff;

}



/*=========================================
Top Bar
=========================================*/

.top-bar{

background:linear-gradient(

90deg,

#2563EB,

#10B981

);

padding:8px 0;

color:#fff;

font-size:14px;

}



.top-left span{

margin-right:25px;

}



.top-right a{

color:#fff;

margin-left:20px;

}



/*=========================================
Navbar
=========================================*/

.navbar{

padding:18px 0;

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

backdrop-filter:blur(12px);

transition:.4s;

z-index:999;

}



.navbar-brand img{

height:75px;

}



.nav-link{

font-weight:500;

margin-left:18px;

color:var(--dark)!important;

}



.nav-link:hover{

color:var(--primary)!important;

}

/*=========================================
Hero
=========================================*/

.hero-section{
    position:relative;
    overflow:hidden;
    min-height:100vh;
    display:flex;
    align-items:center;

    background:
    linear-gradient(
    135deg,
    #EEF4FF 0%,
    #FFFFFF 50%,
    #F8FAFC 100%);
}

.hero-section::before{

content:"";

position:absolute;

width:520px;

height:520px;

background:#2563EB15;

border-radius:50%;

top:-220px;

left:-180px;

filter:blur(80px);

animation:blob1 12s infinite;

}

.hero-section::after{

content:"";

position:absolute;

width:420px;

height:420px;

background:#10B98118;

border-radius:50%;

bottom:-180px;

right:-120px;

filter:blur(70px);

animation:blob2 10s infinite;

}

@keyframes blob1{

0%{transform:translateY(0)}

50%{transform:translateY(60px)}

100%{transform:translateY(0)}

}

@keyframes blob2{

0%{transform:translateX(0)}

50%{transform:translateX(-50px)}

100%{transform:translateX(0)}

}



.course-badge{

display:inline-block;

padding:12px 22px;

background:#DBEAFE;

border-radius:50px;

color:var(--primary);

font-weight:600;

margin-bottom:25px;

}



.hero-section h1{

font-size:60px;

font-weight:800;

margin-bottom:20px;

}



.hero-section h1 span{

color:var(--primary);

}



.hero-rating{

margin:30px 0;

font-size:18px;

}



.hero-rating i{

color:#F59E0B;

}



.hero-buttons{

margin:40px 0;

}



.hero-buttons .btn{

margin-right:12px;

}



.hero-features{

display:grid;

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

gap:15px;

margin-top:35px;

}



.hero-features div{

font-weight:600;

}



.hero-features i{

color:var(--secondary);

margin-right:8px;

}

.hero-image{

position:relative;

}



.floating-card{

position:absolute;

background:#fff;

padding:14px 20px;

border-radius:14px;

box-shadow:var(--shadow);

font-weight:600;

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

}



.card-one{

top:20px;

left:-40px;

}



.card-two{

top:120px;

right:-30px;

}



.card-three{

bottom:150px;

left:-20px;

}



.card-four{

bottom:60px;

right:-30px;

}



.card-five{

top:50%;

left:-60px;

}



@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0);

}

}
/*======================================================
    TRUSTED BRANDS
======================================================*/

.trusted-section{

    background:#ffffff;

    padding:80px 0;

}

.brand-box{

    background:#ffffff;

    border:1px solid var(--border);

    border-radius:20px;

    padding:30px;

    height:120px;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.35s;

    cursor:pointer;

}

.brand-box img{

    max-width:120px;

    max-height:45px;

    opacity:.75;

    transition:.35s;

}

.brand-box:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

    border-color:var(--primary);

}

.brand-box:hover img{

    opacity:1;

}



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

.stats-section{

    padding:90px 0;

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

}

.stats-wrapper{

    background:#ffffff;

    border-radius:25px;

    padding:60px;

    box-shadow:var(--shadow);

}

.counter-box{

    text-align:center;

}

.counter-box h2{

    font-size:56px;

    color:var(--primary);

    font-weight:800;

    margin-bottom:10px;

}

.counter-box p{

    font-size:17px;

    color:var(--gray);

    margin-bottom:0;

}



/*======================================================
    ABOUT COURSE
======================================================*/

.about-course{

    background:#ffffff;

}

.about-course img{

    border-radius:24px;

    box-shadow:var(--shadow);

}

.about-course h2{

    margin-bottom:20px;

}

.feature-item{

    display:flex;

    align-items:center;

    margin-bottom:18px;

    font-weight:600;

    color:var(--dark);

}

.feature-item i{

    width:38px;

    height:38px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#DBEAFE;

    color:var(--primary);

    margin-right:15px;

}



/*======================================================
    WHY CHOOSE US
======================================================*/

.why-us{

    background:#F8FAFC;

}

.why-card{

    background:#ffffff;

    border-radius:22px;

    padding:45px 35px;

    text-align:center;

    transition:.35s;

    height:100%;

    border:1px solid transparent;

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

}

.why-card i{

    width:80px;

    height:80px;

    margin:auto;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

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

    color:#ffffff;

    font-size:34px;

    margin-bottom:25px;

}

.why-card h4{

    margin-bottom:18px;

}

.why-card p{

    margin-bottom:0;

}

.why-card:hover{

    transform:translateY(-12px);

    box-shadow:var(--shadow);

    border-color:#2563EB;

}



/*======================================================
    COURSE MODULES
======================================================*/

.course-section{

    background:#ffffff;

}

.course-card{

    background:#ffffff;

    border-radius:22px;

    padding:35px;

    transition:.35s;

    border:1px solid var(--border);

    height:100%;

    position:relative;

    overflow:hidden;

}

.course-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

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

}

.course-card:hover{

transform:

translateY(-15px)

scale(1.02);

box-shadow:

0 25px 50px rgba(0,0,0,.12);

}

.course-card:hover .icon{

transform:rotate(12deg)

scale(1.15);

transition:.4s;

}

.course-card{

overflow:hidden;

}

.course-card::after{

content:"";

position:absolute;

left:0;

bottom:0;

width:100%;

height:4px;

background:

linear-gradient(

90deg,

#2563EB,

#10B981,

#F59E0B);

transform:scaleX(0);

transition:.4s;

}

.course-card:hover::after{

transform:scaleX(1);

}

.course-card .icon{

    width:75px;

    height:75px;

    border-radius:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#ffffff;

    font-size:30px;

    margin-bottom:25px;

}

.course-card h4{

    margin-bottom:20px;

    min-height:60px;

}

.course-card ul{

    list-style:none;

    padding:0;

}

.course-card li{

    position:relative;

    padding-left:26px;

    margin-bottom:12px;

    color:var(--gray);

}

.course-card li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:var(--secondary);

    font-weight:bold;

}



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

.timeline-section{

    background:#F8FAFC;

}

.timeline{

    position:relative;

    max-width:850px;

    margin:auto;

}

.timeline::before{

    content:"";

    position:absolute;

    left:22px;

    top:0;

    width:4px;

    height:100%;

    background:#2563EB;

}

.timeline-item{

    position:relative;

    margin-left:70px;

    margin-bottom:35px;

    background:#ffffff;

    padding:25px 30px;

    border-radius:18px;

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

}

.timeline-item::before{

    content:"";

    position:absolute;

    left:-58px;

    top:30px;

    width:20px;

    height:20px;

    background:#10B981;

    border-radius:50%;

    border:5px solid #ffffff;

    box-shadow:0 0 0 4px #2563EB;

}

.timeline-item span{

    display:inline-block;

    background:#DBEAFE;

    color:#2563EB;

    padding:6px 14px;

    border-radius:30px;

    font-size:14px;

    font-weight:600;

    margin-bottom:12px;

}

.timeline-item h4{

    margin-bottom:8px;

}



/*======================================================
    COMMON HOVER EFFECT
======================================================*/

.course-card,
.why-card,
.brand-box,
.timeline-item{

    transition:all .35s ease;

}
/*======================================================
    AI TOOLS SECTION
======================================================*/

.ai-section{

    background:#ffffff;

}

.ai-section img{

    border-radius:24px;

    box-shadow:var(--shadow);

}

.ai-section h2{

    margin-bottom:20px;

}

.ai-section .row .col-md-6{

    margin-bottom:15px;

    font-weight:600;

    color:var(--dark);

}

.ai-section .row .col-md-6::before{

    content:"✔";

    color:var(--secondary);

    font-weight:bold;

    margin-right:10px;

}


/*======================================================
    LIVE PROJECTS
======================================================*/

.projects{

    background:#F8FAFC;

}

.project-card{

    background:#ffffff;

    border-radius:20px;

    overflow:hidden;

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

    transition:.35s;

}

.project-card img{

    width:100%;

    height:230px;

    object-fit:cover;

}

.project-card h5{

    padding:20px;

    margin:0;

    text-align:center;

}

.project-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow);

}



/*======================================================
    TRAINER
======================================================*/

.trainer-section{

    background:#ffffff;

}

.trainer-image img{

    border-radius:24px;

}

.trainer-highlights{

    display:flex;

    gap:20px;

    margin-top:40px;

    flex-wrap:wrap;

}

.highlight{

    flex:1;

    min-width:160px;

    background:#F8FAFC;

    border-radius:18px;

    text-align:center;

    padding:30px 20px;

    transition:.35s;

}

.highlight:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}

.highlight i{

    font-size:34px;

    color:var(--primary);

    margin-bottom:15px;

}

.highlight h4{

    color:var(--primary);

    margin-bottom:5px;

}



/*======================================================
    INTERNSHIP
======================================================*/

.internship-section{

    background:#EFF6FF;

}

.internship-section img{

    border-radius:24px;

    box-shadow:var(--shadow);

}

.internship-section li{

    margin-bottom:15px;

    font-size:17px;

}

.internship-section i{

    margin-right:10px;

}



/*======================================================
    CERTIFICATE
======================================================*/

.certificate-section{

    background:#ffffff;

}

.cert-box{

    background:#F8FAFC;

    padding:22px;

    border-radius:16px;

    text-align:center;

    margin-bottom:20px;

    transition:.35s;

    border:1px solid var(--border);

}

.cert-box:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}

.cert-box i{

    font-size:34px;

    color:var(--primary);

    margin-bottom:15px;

}



/*======================================================
    PORTFOLIO
======================================================*/

.portfolio-section{

    background:#F8FAFC;

}

.portfolio-card{

    background:#ffffff;

    border-radius:20px;

    overflow:hidden;

    transition:.35s;

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

}

.portfolio-card:hover{

    transform:translateY(-10px);

}

.portfolio-card img{

    width:100%;

    height:250px;

    object-fit:cover;

}

.portfolio-content{

    padding:20px;

}

.portfolio-content h5{

    margin-bottom:10px;

}



/*======================================================
    TESTIMONIALS
======================================================*/

.testimonial-section{

    background:#ffffff;

}

.testimonial-card{

    background:#ffffff;

    border-radius:20px;

    padding:35px;

    text-align:center;

    border:1px solid var(--border);

    transition:.35s;

    height:100%;

}

.testimonial-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow);

}

.testimonial-img{

    width:90px;

    height:90px;

    border-radius:50%;

    object-fit:cover;

    margin:auto;

    margin-bottom:20px;

    border:4px solid #DBEAFE;

}

.stars{

    color:#F59E0B;

    margin:15px 0;

    font-size:18px;

}



/*======================================================
    PLACEMENT
======================================================*/

.placement-section{

    background:#F8FAFC;

}

.placement-section img{

    border-radius:24px;

    box-shadow:var(--shadow);

}

.placement-section .row .col-md-6{

    margin-bottom:18px;

    font-weight:600;

}

.placement-section .row .col-md-6::before{

    content:"✔";

    color:var(--secondary);

    margin-right:10px;

}



/*======================================================
    OFFER BANNER
======================================================*/

.offer-banner{

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

    color:#ffffff;

    padding:70px 0;

}

.offer-banner h2{

    color:#ffffff;

    margin-bottom:10px;

}

.offer-banner p{

    color:#ffffff;

    margin-bottom:0;

}

.offer-banner .btn{

    border-radius:50px;

    padding:16px 36px;

    font-weight:700;
}
/*======================================================
    PRICING SECTION
======================================================*/

.pricing-section{

    background:#ffffff;

}

.price-card{

    background:#ffffff;

    border-radius:24px;

    padding:45px 35px;

    text-align:center;

    border:1px solid var(--border);

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

    transition:.35s;

    position:relative;

    overflow:hidden;

    height:100%;

}

.price-card:hover{

    transform:translateY(-12px);

    box-shadow:var(--shadow);

}

.price-card.featured{

    border:2px solid var(--primary);

    transform:scale(1.04);

}

.price-card.featured:hover{

    transform:scale(1.04) translateY(-10px);

}

.popular{

    position:absolute;

    top:18px;

    right:-38px;

    background:var(--accent);

    color:#fff;

    padding:8px 45px;

    font-size:13px;

    font-weight:700;

    transform:rotate(45deg);

}

.plan{

    display:inline-block;

    background:#DBEAFE;

    color:var(--primary);

    padding:8px 18px;

    border-radius:30px;

    font-weight:600;

    margin-bottom:18px;

}

.price-card h2{

    font-size:56px;

    color:var(--primary);

    margin:20px 0;

    font-weight:800;

}

.price-card ul{

    margin:30px 0;

}

.price-card ul li{

    padding:12px 0;

    border-bottom:1px solid #f2f2f2;

    color:var(--gray);

}

.price-card ul li:last-child{

    border-bottom:none;

}



/*======================================================
    COMPARISON TABLE
======================================================*/

.comparison{

    background:#F8FAFC;

}

.comparison table{

    background:#ffffff;

    border-radius:20px;

    overflow:hidden;

}

.comparison thead{

    background:var(--primary);

    color:#ffffff;

}

.comparison th,

.comparison td{

    text-align:center;

    vertical-align:middle;

    padding:18px;

}



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

.faq-section{

    background:#ffffff;

}

.accordion-item{

    border:none;

    margin-bottom:18px;

    border-radius:18px !important;

    overflow:hidden;

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

}

.accordion-button{

    padding:22px 28px;

    font-weight:600;

    font-size:17px;

    background:#ffffff;

}

.accordion-button:not(.collapsed){

    background:#EFF6FF;

    color:var(--primary);

}

.accordion-button:focus{

    box-shadow:none;

}

.accordion-body{

    padding:25px 28px;

    color:var(--gray);

}



/*======================================================
    CONTACT
======================================================*/

.contact-section{

    background:#F8FAFC;

}

.contact-form{

    background:#ffffff;

    border-radius:24px;

    padding:40px;

    box-shadow:var(--shadow);

}

.form-control,

.form-select{

    height:55px;

    border-radius:12px;

    border:1px solid var(--border);

}

textarea.form-control{

    height:auto;

}

.form-control:focus,

.form-select:focus{

    border-color:var(--primary);

    box-shadow:none;

}

.contact-item{

    display:flex;

    margin-bottom:30px;

}

.contact-item i{

    width:55px;

    height:55px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#DBEAFE;

    color:var(--primary);

    font-size:22px;

    margin-right:18px;

}

.contact-item h6{

    margin-bottom:6px;

}



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

.footer{

    background:#0F172A;

    color:#CBD5E1;

    padding:80px 0 25px;

}

.footer-logo{

    max-height:60px;

    margin-bottom:25px;

}

.footer h5{

    color:#ffffff;

    margin-bottom:25px;

}

.footer ul{

    list-style:none;

}

.footer ul li{

    margin-bottom:12px;

}

.footer ul li a{

    color:#CBD5E1;

    transition:.3s;

}

.footer ul li a:hover{

    color:#ffffff;

    padding-left:8px;

}

.footer hr{

    border-color:#334155;

    margin:40px 0 25px;

}

.social-icons{

    display:flex;

    gap:12px;

}

.social-icons a{

    width:42px;

    height:42px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#1E293B;

    color:#ffffff;

    transition:.35s;

}

.social-icons a:hover{

    background:var(--primary);

    transform:translateY(-5px);

}



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

.whatsapp-btn,

.call-btn,

.scroll-top{

    position:fixed;

    right:25px;

    width:58px;

    height:58px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#ffffff;

    font-size:24px;

    box-shadow:var(--shadow);

    z-index:999;

    transition:.35s;

}

.whatsapp-btn{

    background:#25D366;

    bottom:170px;

}

.call-btn{

    background:#2563EB;

    bottom:100px;

}

.scroll-top{

    background:#0F172A;

    bottom:30px;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

}

.scroll-top.active{

    opacity:1;

    visibility:visible;

}

.whatsapp-btn:hover,

.call-btn:hover,

.scroll-top:hover{

    transform:translateY(-6px);

}



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

@media(max-width:991px){

.hero-section{

padding-top:140px;

text-align:center;

}

.hero-section h1{

font-size:42px;

}

.hero-buttons .btn{

width:100%;

margin-bottom:15px;

}

.hero-features{

grid-template-columns:1fr;

}

.hero-image{

margin-top:60px;

}

.timeline-item{

margin-left:50px;

}

.trainer-highlights{

justify-content:center;

}

.price-card.featured{

transform:none;

}

}

@media(max-width:768px){

section{

padding:70px 0;

}

h1{

font-size:34px;

}

h2{

font-size:30px;

}

.stats-wrapper{

padding:30px;

}

.counter-box{

margin-bottom:30px;

}

.course-card,

.why-card,

.price-card{

padding:28px;

}

.timeline::before{

left:15px;

}

.timeline-item{

margin-left:40px;

}

.brand-box{

height:90px;

padding:20px;

}

.contact-form{

padding:25px;

}

.footer{

text-align:center;

}

.social-icons{

justify-content:center;

margin-top:20px;

}

}
    .btn{

position:relative;

overflow:hidden;

}

.ripple{

position:absolute;

width:10px;

height:10px;

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

border-radius:50%;

transform:scale(0);

animation:ripple .6s linear;

}

@keyframes ripple{

to{

transform:scale(40);

opacity:0;

}

}

.btn-primary{

background:

linear-gradient(

135deg,

#2563EB,

#1D4ED8);

border:none;

box-shadow:

0 12px 30px rgba(37,99,235,.30);

}

.btn-primary:hover{

transform:translateY(-5px);

box-shadow:

0 18px 35px rgba(37,99,235,.45);

}

img{

transition:.5s;

}

img:hover{

transform:scale(1.03);

}

/*=====================================
Testimonials Slider
======================================*/

.testimonialSwiper{

padding:40px 20px 70px;

}

.swiper-slide{

height:auto;

}

.testimonial-card{

background:#fff;

border-radius:20px;

padding:40px;

text-align:center;

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

height:100%;

transition:.4s;

}

.testimonial-card:hover{

transform:translateY(-8px);

}

.testimonial-img{

width:90px;

height:90px;

border-radius:50%;

object-fit:cover;

margin:auto;

margin-bottom:20px;

border:4px solid #2563EB;

}

.testimonial-card h4{

margin-top:15px;

}

.testimonial-card span{

color:#64748B;

display:block;

margin-bottom:15px;

}

.stars{

color:#F59E0B;

font-size:18px;

margin-bottom:15px;

}

.swiper-button-next,

.swiper-button-prev{

color:#2563EB;

}

.swiper-pagination-bullet-active{

background:#2563EB;

}
/*=====================================
Hero Premium Cards
======================================*/

.hero-achievements{

display:flex;

gap:20px;

margin-top:35px;

flex-wrap:wrap;

}

.achievement-card{

display:flex;

align-items:center;

background:#ffffff;

padding:18px 22px;

border-radius:18px;

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

transition:.35s;

}

.achievement-card:hover{

transform:translateY(-6px);

}

.achievement-card i{

font-size:26px;

color:#2563EB;

margin-right:15px;

}

.achievement-card h5{

margin:0;

font-size:22px;

font-weight:700;

}

.achievement-card span{

font-size:14px;

color:#64748B;

}

/*==================================
Premium Course Cards
===================================*/

.course-top{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:20px;

}

.level{

background:#EFF6FF;

color:#2563EB;

padding:6px 14px;

border-radius:30px;

font-size:13px;

font-weight:600;

}

.course-card p{

margin:18px 0;

}

.course-meta{

display:flex;

justify-content:space-between;

margin:25px 0;

font-size:14px;

font-weight:600;

color:#64748B;

}

.course-meta i{

color:#2563EB;

margin-right:6px;

}

.course-footer{

display:flex;

justify-content:space-between;

align-items:center;

margin-top:30px;

}

.project{

background:#DCFCE7;

color:#15803D;

padding:8px 15px;

border-radius:30px;

font-size:13px;

font-weight:600;

}

.course-footer a{

font-weight:700;

color:#2563EB;

}

.course-footer a:hover{

padding-left:6px;

}

.popular-module{

position:absolute;

top:18px;

right:-45px;

background:#F59E0B;

color:#fff;

padding:8px 50px;

font-size:12px;

font-weight:700;

transform:rotate(45deg);

}

/*=========================================
        CURRICULUM MODAL
=========================================*/

.curriculum-btn{

    padding:16px 40px;

    border-radius:50px;

    font-size:18px;

}

.modal-content{

    border:none;

    border-radius:25px;

    overflow:hidden;

}

.modal-header{

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

    color:#ffffff;

    padding:30px;

}

.modal-header h2{

    color:#ffffff;

}

.modal-header p{

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

}

.btn-close{

    filter:invert(1);

}

.curriculum-card{

    background:#ffffff;

    border:1px solid #E2E8F0;

    border-radius:18px;

    padding:25px;

    height:100%;

    transition:.35s;

    position:relative;

}

.curriculum-card:hover{

    transform:translateY(-8px);

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

}

.module-number{

    position:absolute;

    top:20px;

    right:20px;

    width:48px;

    height:48px;

    border-radius:50%;

    background:#2563EB;

    color:#ffffff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:700;

}

.curriculum-card h4{

    margin-bottom:15px;

    padding-right:60px;

}

.curriculum-card ul{

    margin-top:20px;

}

.curriculum-card li{

    margin-bottom:10px;

    color:#64748B;

}

.curriculum-card li::before{

    content:"✔ ";

    color:#10B981;

    font-weight:bold;

}

/*=========================================
LIVE PROJECTS
=========================================*/

.project-card{

background:#ffffff;

border-radius:22px;

overflow:hidden;

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

transition:.35s;

height:100%;

}

.project-card:hover{

transform:translateY(-12px);

}

.project-image{

position:relative;

overflow:hidden;

}

.project-image img{

width:100%;

height:240px;

object-fit:cover;

transition:.4s;

}

.project-card:hover img{

transform:scale(1.08);

}

.project-status{

position:absolute;

top:20px;

left:20px;

background:#10B981;

color:#fff;

padding:8px 18px;

border-radius:30px;

font-size:13px;

font-weight:600;

}

.project-content{

padding:28px;

}

.project-content h4{

margin-bottom:15px;

}

.project-tags{

margin:25px 0;

display:flex;

gap:10px;

flex-wrap:wrap;

}

.project-tags span{

background:#EFF6FF;

color:#2563EB;

padding:8px 14px;

border-radius:30px;

font-size:13px;

font-weight:600;

}

.project-content a{

font-weight:700;

color:#2563EB;

}

.project-content a:hover{

padding-left:8px;

}

.project-achievements{

background:#ffffff;

margin-top:60px;

border-radius:25px;

padding:50px;

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

}

.achievement-box{

padding:20px;

}

.achievement-box h2{

font-size:48px;

color:#2563EB;

font-weight:800;

margin-bottom:10px;

}

.achievement-box p{

margin:0;

font-weight:600;

color:#64748B;

}

/*==================================
TRUST SECTION
===================================*/

.trust-section{

background:#F8FAFC;

}

.trust-list{

display:grid;

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

gap:20px;

margin-top:35px;

}

.trust-list div{

font-weight:600;

}

.trust-list i{

color:#10B981;

margin-right:10px;

}

.trust-card{

background:#ffffff;

padding:40px;

border-radius:20px;

text-align:center;

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

transition:.35s;

margin-bottom:25px;

}

.trust-card:hover{

transform:translateY(-8px);

}

.trust-card h2{

font-size:48px;

color:#2563EB;

margin-bottom:10px;

font-weight:800;

}

.trust-card p{

margin:0;

font-weight:600;

}

/*=========================================
TRAINER V2
=========================================*/

.trainer-image{

position:relative;

}

.trainer-image img{

border-radius:25px;

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

}

.experience-badge{

position:absolute;

bottom:25px;

right:-30px;

background:#2563EB;

color:#fff;

padding:22px;

border-radius:20px;

text-align:center;

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

}

.experience-badge h3{

color:#fff;

margin:0;

font-size:34px;

font-weight:800;

}

.experience-badge span{

font-size:14px;

}

.trainer-designation{

color:#2563EB;

margin-bottom:20px;

font-weight:600;

}

.skill{

margin-bottom:25px;

}

.skill-title{

display:flex;

justify-content:space-between;

margin-bottom:10px;

font-weight:600;

}

.progress{

height:10px;

background:#E5E7EB;

border-radius:30px;

overflow:hidden;

}

.progress-bar{

height:100%;

border-radius:30px;

}

.seo-bar{

width:95%;

background:#2563EB;

}

.ads-bar{

width:93%;

background:#10B981;

}

.wp-bar{

width:98%;

background:#F59E0B;

}

.ai-bar{

width:94%;

background:#8B5CF6;

}

.contact-form{

background:#ffffff;

padding:45px;

border-radius:25px;

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

}

.contact-form h3{

font-weight:700;

margin-bottom:25px;

}

.form-control,

.form-select{

height:56px;

border-radius:12px;

border:1px solid #E5E7EB;

}

textarea.form-control{

height:130px;

}

.form-control:focus,

.form-select:focus{

border-color:#2563EB;

box-shadow:0 0 0 .2rem rgba(37,99,235,.15);

}

.contact-item{

display:flex;

align-items:flex-start;

margin-bottom:25px;

}

.contact-item i{

width:55px;

height:55px;

background:#EFF6FF;

color:#2563EB;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

margin-right:18px;

font-size:20px;

}

.contact-item h6{

margin-bottom:5px;

font-weight:700;

}