/* ================= GLOBAL ANIMATION ================= */

body{
    overflow-x:hidden;
}

/* Smooth Page Animation */
.fade-up{
    opacity:0;
    transform:translateY(60px);
    transition:all 1s ease;
}

.fade-up.show{
    opacity:1;
    transform:translateY(0);
}

/* ================= NAVBAR ================= */

.header_area{
    animation:slideDown 1s ease;
}

@keyframes slideDown{
    from{
        opacity:0;
        transform:translateY(-50px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

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

.banner_content h2{
    animation:zoomIn 1.2s ease;
}

.banner_content p{
    animation:fadeIn 2s ease;
}

@keyframes zoomIn{
    from{
        transform:scale(0.7);
        opacity:0;
    }
    to{
        transform:scale(1);
        opacity:1;
    }
}

@keyframes fadeIn{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

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

.primary-btn,
.primary-btn2,
.genric-btn{
    transition:0.4s ease !important;
    position:relative;
    overflow:hidden;
}

.primary-btn:hover,
.primary-btn2:hover,
.genric-btn:hover{
    transform:translateY(-4px);
    box-shadow:0 15px 30px rgba(0,0,0,0.2);
}

/* Shine Effect */

.primary-btn::before,
.primary-btn2::before,
.genric-btn::before{
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:rgba(255,255,255,0.3);
    transform:skewX(-30deg);
    transition:0.7s;
}

.primary-btn:hover::before,
.primary-btn2:hover::before,
.genric-btn:hover::before{
    left:120%;
}

/* ================= COURSE CARDS ================= */

.single_course{
    border-radius:20px;
    overflow:hidden;
    transition:0.5s ease;
    background:#fff;
}

.single_course:hover{
    transform:translateY(-12px) scale(1.02);
    box-shadow:0 20px 50px rgba(0,0,0,0.18);
}

.single_course img{
    transition:0.6s ease;
}

.single_course:hover img{
    transform:scale(1.08);
}

/* ================= TITLES ================= */

.main_title h2{
    position:relative;
    display:inline-block;
}

.main_title h2::after{
    content:'';
    position:absolute;
    left:50%;
    bottom:-10px;
    transform:translateX(-50%);
    width:0;
    height:4px;
    border-radius:20px;
    background:#002347;
    transition:0.6s;
}

.main_title:hover h2::after{
    width:80%;
}

/* ================= BOOK PRICE ================= */

.price{
    animation:pulse 2s infinite;
}

@keyframes pulse{
    0%{
        transform:scale(1);
    }
    50%{
        transform:scale(1.1);
    }
    100%{
        transform:scale(1);
    }
}

/* ================= TESTIMONIAL ================= */

/*.testi_item{
    transition:0.5s;
}

.testi_item:hover{
    transform:translateY(-8px);
}*/

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

.footer-area{
    animation:fadeIn 2s ease;
}

/* ================= MOBILE ================= */

@media(max-width:768px){

    .banner_content h2{
        font-size:30px;
        line-height:45px;
    }

    .single_course{
        margin-bottom:20px;
    }

    .main_title h2{
        font-size:28px;
    }

}





    /* ================= GLOBAL ANIMATION ================= */

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

/* ================= NAVBAR EFFECT ================= */

.header_area {
    animation: fadeDown 1s ease;
    transition: all 0.4s ease;
}

.header_area.navbar_fixed {
    backdrop-filter: blur(10px);
    background: rgba(255,255,255,0.96);
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

/* ================= BANNER ANIMATION ================= */

.banner_content h2,
.banner_content p,
.banner_content .primary-btn,
.banner_content .primary-btn2 {
    animation: fadeUp 1s ease forwards;
    opacity: 0;
}

.banner_content h2 {
    animation-delay: .2s;
}

.banner_content p {
    animation-delay: .5s;
}

.banner_content .primary-btn {
    animation-delay: .8s;
}

.banner_content .primary-btn2 {
    animation-delay: 1s;
}

/* ================= CARD HOVER ================= */

.single_course,
.single_feature,
.counter-card{
    transition: all 0.4s ease;
    border-radius: 20px;
}

.single_course:hover,
.single_feature:hover,
.counter-card:hover{
    transform: translateY(-12px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

/* ================= IMAGE ZOOM ================= */

.course_head img,
.h_blog_img img {
    transition: transform 0.5s ease;
}

.course_head:hover img,
.h_blog_img:hover img {
    transform: scale(1.08);
}

/* ================= BUTTON EFFECT ================= */

.primary-btn,
.primary-btn2,
.genric-btn.primary {
    position: relative;
    overflow: hidden;
    transition: all .4s ease;
}

.primary-btn:hover,
.primary-btn2:hover,
.genric-btn.primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,35,71,0.25);
}

.primary-btn::before,
.primary-btn2::before,
.genric-btn.primary::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.25);
    transform: skewX(-25deg);
    transition: 0.7s;
}

.primary-btn:hover::before,
.primary-btn2:hover::before,
.genric-btn.primary:hover::before {
    left: 120%;
}

/* ================= COUNTER EFFECT ================= */

.counter-card {
    position: relative;
    overflow: hidden;
}

.counter-card::before {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        rgba(13,110,253,0.05),
        rgba(25,135,84,0.05)
    );
    top: -50%;
    left: -50%;
    transform: rotate(25deg);
}

/* ================= FEATURE ICON ANIMATION ================= */

.counter-icon,
.single_feature .icon {
    transition: all .4s ease;
}

.counter-card:hover .counter-icon,
.single_feature:hover .icon {
    transform: rotateY(180deg) scale(1.1);
}

/* ================= TESTIMONIAL EFFECT ================= */

/*.testi_item {
    background: #fff;
    padding: 20px;
    border-radius: 20px;
}*/

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

.footer-area a {
    transition: 0.3s;
}

.footer-area a:hover {
    color: #fdc632 !important;
    padding-left: 5px;
}

/* ================= SCROLL REVEAL ================= */

.reveal {
    opacity: 0;
    transform: translateY(80px);
    transition: all 1s ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* ================= KEYFRAMES ================= */

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(60px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translateY(-60px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@media(max-width:768px){

    .banner_content h2{
        font-size:32px;
        line-height:45px;
    }

    .counter-number{
        font-size:32px;
    }

    .single_course,
    .counter-card,
    .single_feature{
        margin-bottom:20px;
    }

}