body {
    margin: 0;
    padding: 0;
}

.banner.hero {
    background: linear-gradient(135deg, #e6e9ff, #f5e6ff);
    padding: 80px 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.banner.hero h1 {
    font-weight: 700;
    color: #1a237e;
    font-size: 50px;
}

.banner.hero p {
    color: #000;
    font-size: 36px;
    line-height: 40px;
}

.banner .btn-custom {
    background: #2d5bff;
    color: #fff;
    padding: 10px 25px;
    border-radius: 8px;
    font-size: 20px;
}

.banner .btn-custom:hover {
    background: #1a44d1;
}

/* PHONE IMAGE */
.banner .phone-img {
    max-width: 100%;
}

/* FEATURES */
.features {
    padding: 60px 0;
}

.features h2 {
    text-align: center;
    font-weight: 700;
    margin-bottom: 40px;
    color: #1a237e;
    font-size: 30px;
}

.feature-box {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}

.feature-icon {
    width: 45px;
    height: 45px;
    display: flex;
}

.feature-icon i {
    width: 45px;
    height: 45px;
    background: #2d5bff;
    color: #fff;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    font-size: 20px;
    text-align: center;
    line-height: 45px;
}

/* ILLUSTRATION */
.illustration img {
    max-width: 100%;
}

.features h6 {
    font-weight: bold;
    color: #1a237e;
    font-size: 30px;
}

.features p {
    color: #000;
    font-size: 18px;
    padding-right: 100px;
}



.owl-nav {
    position: absolute;
    top: -60px;
    right: 0;
}

.owl-nav button {
    background: #2d5bff !important;
    color: #fff !important;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin-left: 10px;
    font-size: 20px;
}

.owl-nav button:hover {
    background: #1a44d1 !important;
}

.owl-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
}

.item .card {
    transition: 0.3s;
}

.item .card:hover {
    transform: translateY(-8px);
}


.video-card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin-bottom: 15px;
}

/* IMAGE WRAP */
.video-img {
    position: relative;
    overflow: hidden;
}

.video-img img {
    width: 100%;
    display: block;
    transition: 0.4s;
}

/* OVERLAY */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(45, 91, 255, 0.2);
    opacity: 0;
    transition: 0.4s;
}

/* PLAY BUTTON */
.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.7);
    background: #2d5bff;
    color: #fff;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    opacity: 0;
    transition: 0.4s;
}

/* SIZE LABEL */
.size-label {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: #7b61ff;
    color: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 14px;
}

/* HOVER EFFECT */
.video-card:hover .video-overlay {
    opacity: 1;
}

.video-card:hover .play-btn {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.video-card:hover img {
    transform: scale(1.05);
}

/* FOOTER */
.video-footer {
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    font-weight: 500;
}

.views {
    color: #333;
}

.likes {
    color: red;
}

.heading {
    text-align: center;
    font-weight: 700;
    margin-bottom: 40px;
    color: #1a237e;
    font-size: 30px;
    margin-bottom: 30px;
}


.section-bg {
    background: linear-gradient(135deg, #f3f4f9, #e9ecff);
    padding: 70px 0;
}

/* TITLE */
.section-title {
    text-align: center;
    font-weight: 700;
    color: #142c7a;
}

/* BENEFIT CARD */
.benefit-card {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: 0.3s;
}

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

/* ICON LEFT */
.benefit-icon {
    width: 50px;
    height: 50px;
    display: flex;
}

.benefit-icon i {
    width: 50px;
    height: 50px;
    background: #2d5bff;
    color: #fff;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-right: 15px;
    text-align: center;
    line-height: 50px;
}

/* CONTENT */
.benefit-content h5 {
    font-weight: bold;
    color: #1a237e;
    font-size: 30px;
}

.benefit-content p {
    color: #000;
    font-size: 18px;
    padding-right: 100px;
}

/* RIGHT IMAGE */
.phone-img {
    max-width: 100%;
}

/* REVIEWS */
.review-section {
    padding: 60px 0;
}


.review-img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
}

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

.review-text {
    background: #fff;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.stars {
    color: #f4b400;
}


.slider-two .owl-nav {
    display: flex !important;
    position: absolute;
    top: -50px;
    right: 0;
}

.slider-two .owl-nav button {
    background: #2d5bff !important;
    color: #fff !important;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-left: 10px;
}

.owl-carousel .item {
    width: 100%;
}

.box {
    padding: 40px;
    background: #eee;
    text-align: center;
    border-radius: 8px;
}

.contact-section {
    background: linear-gradient(135deg, #1a2aff, #2bb6d8);
    color: #fff;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
    padding: 80px 0 0 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* TITLE */
.contact-title {
    text-align: center;
    font-weight: 700;
    margin-bottom: 25px;
    color: #fff;
    font-size: 45px;
}

/* CONTACT ITEM */
.contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    font-size: 30px;
    font-weight: bold;
}

.contact-icon {
    width: 55px;
    height: 55px;
    display: inline-block;
    margin-right: 15px;
}

.contact-icon i {
    width: 55px;
    height: 55px;
    background: #fff;
    color: #1a2aff;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-right: 15px;
    display: inline-block;
    text-align: center;
    line-height: 55px;
}

/* IMAGE */
.contact-img img {
    max-width: 100%;
}


.feature-section{
            position:relative;
            overflow:hidden;
            padding:70px 0;
            background:#f8f8f8;
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            background-attachment: scroll;
        }

        /* Background Pattern */
        .feature-section::before{
            content:"";
            position:absolute;
            inset:0;
            background:url('https://www.transparenttextures.com/patterns/doodles.png');
            opacity:0.08;
        }

        .section-title{
            position:relative;
            z-index:2;
            text-align:center;
            margin-bottom:50px;
        }

        .section-title span{
            color:#222;
            font-size:18px;
            font-weight:600;
            text-transform:uppercase;
            letter-spacing:1px;
        }

        .section-title h2{
            font-size:40px;
            font-weight:800;
            color:#0b1e8a;
            line-height:1.2;
            margin-top:10px;
        }

        /* Left Image */
        .student-img{
            position:absolute;
            left:-40px;
            bottom:0;
            z-index:1;
            max-width:360px;
        }

        .student-img img{
            width:100%;
        }

        .feature-card{
            position:relative;
            z-index:2;
            background:#fff;
            border-radius:20px;
            padding:35px 25px;
            text-align:center;
            box-shadow:0 5px 20px rgba(0,0,0,0.08);
            transition:0.4s;
            height:100%;
        }

        .feature-card:hover{
            transform:translateY(-8px);
        }

        .icon-box{
            width:75px;
            height:75px;
            margin:auto;
            border-radius:20px;
            display:flex;
            align-items:center;
            justify-content:center;
            background:linear-gradient(135deg,#dbe4ff,#edf1ff);
            margin-bottom:20px;
        }

        .icon-box i{
            font-size:36px;
            color:#2952ff;
        }

        .feature-card h4{
            font-size:22px;
            font-weight:700;
            color:#0b1e8a;
            margin-bottom:15px;
            line-height:1.2;
        }

        .feature-card p{
            color:#666;
            font-size:20px;
            line-height:1.6;
            margin:0;
        }

        .our_feature{
            position: absolute;
            left: -101px;
            height: 100%;
            margin-top: -145px;
        }

        .app_screen_bg{
            background: linear-gradient(135deg, #e6e9ff, #f5e6ff);
            padding: 80px 0;
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
        }
        .owl-carousel .owl-dots.disabled, .owl-carousel .owl-nav.disabled {
            display: block!important;
        }
        button.owl-prev {
            position: absolute;
            left: 0;
        }
         button.owl-next {
            position: absolute;
            right: 0;
        }
        .owl-nav {
            top: 40%;
        }

        .learning-card {
  border-radius: 20px;
  transition: all 0.4s ease;
}
.learning-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.15) !important;
}
.learning-card img {
  height: 250px;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.learning-card:hover img {
  transform: scale(1.08);
}
.icon-circle {
  width: 70px;
  height: 70px;
  margin: auto;
  border-radius: 50%;
  background: #f4f7ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #0d6efd;
}



.item{
padding:20px 15px 40px;
}

.item img{
width:100%;
border-radius:30px;
display:block;
transition:all .6s ease;
}

.item .screen-card{
position:relative;
overflow:hidden;
border-radius:35px;
padding:12px;
background:#fff;
border:1px solid rgba(255,255,255,.7);
box-shadow:
0 10px 30px rgba(0,0,0,.08),
0 25px 60px rgba(0,0,0,.08);
transition:all .5s ease;
}

.item .screen-card::before{
content:'';
position:absolute;
inset:0;
background:linear-gradient(
135deg,
rgba(255,255,255,.7),
transparent 40%
);
z-index:1;
pointer-events:none;
}

.item .screen-card::after{
content:'';
position:absolute;
top:-80px;
right:-80px;
width:180px;
height:180px;
background:linear-gradient(135deg,#4f46e5,#06b6d4);
opacity:.08;
border-radius:50%;
}

.item:hover .screen-card{
transform:translateY(-15px);
box-shadow:
0 20px 50px rgba(0,0,0,.15),
0 35px 100px rgba(79,70,229,.15);
}

.item:hover img{
transform:scale(1.05);
}

.owl-carousel .center .screen-card{
transform:scale(1.08);
box-shadow:
0 25px 60px rgba(0,0,0,.18),
0 40px 120px rgba(79,70,229,.20);
}

.owl-carousel .center img{
transform:scale(1.02);
}


.review-card{
position:relative;
background:#fff;
padding:10px;
border-radius:25px;
box-shadow:0 15px 40px rgba(0,0,0,.08);
transition:.4s ease;
height:100%;
}

.review-card:hover{
transform:translateY(-10px);
box-shadow:0 25px 60px rgba(0,0,0,.12);
}

.review-header{
display:flex;
align-items:center;
gap:15px;
margin-bottom:20px;
}

.review-img{
width:75px;
height:75px;
padding:3px;
border-radius:50%;
background:linear-gradient(135deg,#4f46e5,#06b6d4);
}

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

.review-header h5{
margin:0;
font-weight:700;
}

.review-header span{
color:#6b7280;
font-size:14px;
}

.review-card p{
color:#555;
line-height:1.8;
margin-bottom:15px;
}

.quote-icon{
position:absolute;
top:20px;
right:20px;
font-size:32px;
color:#e5e7eb;
}

.stars{
color:#f59e0b;
font-size:18px;
letter-spacing:2px;
}




        @media(max-width:992px){

            .student-img{
                position:relative;
                left:0;
                max-width:280px;
                margin:auto;
                margin-bottom:40px;
                text-align:center;
            }

            .section-title h2{
                font-size:38px;
            }
            .banner.hero{
                text-align: center;
            }
        }

        @media(max-width:576px){

            .section-title h2{
                font-size:30px;
            }

            .feature-card{
                padding:25px 20px;
            }

            .feature-card h4{
                font-size:24px;
            }

            .feature-card p{
                font-size:16px;
            }
        }

/* RESPONSIVE */
@media(max-width:768px) {
    .contact-item {
        font-size: 16px;
    }
}