﻿/*==========================================
BLOG HERO
==========================================*/

.blog-hero{

    position:relative;

    padding:120px 0;

    background:linear-gradient(rgba(8,25,63,.90),
    rgba(8,25,63,.90)),
    url('../images/blog/blog-bg.jpg');

    background-size:cover;
    background-position:center;
    overflow:hidden;

}

.blog-hero::before{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    background:rgba(255,255,255,.05);

    border-radius:50%;

    top:-120px;
    right:-120px;

}

.blog-hero::after{

    content:"";

    position:absolute;

    width:260px;
    height:260px;

    background:rgba(249,115,22,.15);

    border-radius:50%;

    bottom:-80px;
    left:-80px;

}

.hero-badge{

    display:inline-block;

    background:#F97316;

    color:#fff;

    padding:10px 25px;

    border-radius:30px;

    font-weight:600;

    margin-bottom:20px;

}

.blog-hero h1{

    color:#fff;

    font-size:60px;

    font-weight:800;

    line-height:1.2;

    margin-bottom:25px;

}

.blog-hero h1 span{

    color:#F97316;

    display:block;

}

.blog-hero p{

    color:#ddd;

    font-size:18px;

    line-height:1.9;

    margin-bottom:30px;

}

.blog-hero img{

    animation:floatImage 4s ease-in-out infinite;

}

@keyframes floatImage{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0px);

    }

}

/*==========================================
HERO TAGS
==========================================*/

.hero-tags{

    margin-top:20px;

}

.hero-tags span{

    display:inline-block;

    padding:12px 22px;

    margin:8px;

    border-radius:30px;

    background:rgba(255,255,255,.10);

    color:#fff;

    backdrop-filter:blur(10px);

    transition:.4s;

}

.hero-tags span:hover{

    background:#F97316;

    transform:translateY(-5px);

}

/*==========================================
FEATURED BLOG
==========================================*/

.featured-blog{

    padding:110px 0;

    background:#fff;

}

.featured-blog img{

    border-radius:25px;

    box-shadow:0 20px 45px rgba(0,0,0,.12);

}

.featured{

    display:inline-block;

    background:#F97316;

    color:#fff;

    padding:10px 20px;

    border-radius:30px;

    margin-bottom:20px;

    font-weight:600;

}

.featured-blog h2{

    color:#0B4F9C;

    font-size:42px;

    font-weight:700;

    margin-bottom:20px;

}

.featured-blog p{

    color:#666;

    line-height:1.9;

    font-size:17px;

}

.blog-meta{

    margin:25px 0;

    color:#777;

    font-size:16px;

}

.blog-meta i{

    color:#F97316;

    margin-right:8px;

}

/*==========================================
BUTTONS
==========================================*/

.btn-course{

    display:inline-block;

    background:#F97316;

    color:#fff;

    padding:15px 38px;

    border-radius:40px;

    text-decoration:none;

    font-weight:600;

    transition:.4s;

}

.btn-course:hover{

    background:#0B4F9C;

    color:#fff;

    transform:translateY(-4px);

}

/*==========================================
COMMON SECTION
==========================================*/

.section-subtitle{

    display:inline-block;

    color:#F97316;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:15px;

}

.section-heading{

    font-size:46px;

    color:#0B4F9C;

    font-weight:800;

}

.section-heading span{

    color:#F97316;

}

.heading-line{

    width:90px;

    height:4px;

    background:#F97316;

    margin:20px auto;

    border-radius:20px;

}

.section-description{

    max-width:750px;

    margin:auto;

    color:#666;

    line-height:1.9;

    font-size:17px;

}

/*==========================================
RESPONSIVE
==========================================*/

@media(max-width:991px){

.blog-hero{

text-align:center;

padding:90px 0;

}

.blog-hero h1{

font-size:42px;

}

.featured-blog{

text-align:center;

}

.featured-blog img{

margin-bottom:35px;

}

.section-heading{

font-size:34px;

}

}

@media(max-width:576px){

.blog-hero h1{

font-size:34px;

}

.hero-tags span{

display:block;

margin:10px auto;

}

}

    /*=========================================
LATEST BLOGS
=========================================*/

.latest-blog{

    padding:110px 0;

    background:#F8FBFF;

}

.blog-card{

    background:#fff;

    border-radius:25px;

    overflow:hidden;

    box-shadow:0 20px 45px rgba(0,0,0,.08);

    transition:.4s;

    height:100%;

}

.blog-card:hover{

    transform:translateY(-12px);

}

.blog-image{

    position:relative;

    overflow:hidden;

}

.blog-image img{

    width:100%;

    height:260px;

    object-fit:cover;

    transition:.5s;

}

.blog-card:hover img{

    transform:scale(1.08);

}

.blog-category{

    position:absolute;

    left:20px;

    bottom:20px;

    background:#F97316;

    color:#fff;

    padding:8px 18px;

    border-radius:30px;

    font-size:14px;

    font-weight:600;

}

.blog-content{

    padding:30px;

}

.blog-meta{

    display:flex;

    justify-content:space-between;

    margin-bottom:18px;

    color:#888;

    font-size:14px;

}

.blog-meta i{

    color:#F97316;

    margin-right:5px;

}

.blog-content h3{

    color:#0B4F9C;

    font-size:24px;

    font-weight:700;

    margin-bottom:18px;

    line-height:1.4;

}

.blog-content p{

    color:#666;

    line-height:1.8;

    margin-bottom:25px;

}

.read-btn{

    color:#F97316;

    font-weight:700;

    text-decoration:none;

    transition:.3s;

}

.read-btn i{

    margin-left:8px;

    transition:.3s;

}

.read-btn:hover{

    color:#0B4F9C;

}

.read-btn:hover i{

    margin-left:14px;

}

/*=================================
BLOG CATEGORIES
==================================*/

.blog-categories{

    padding:110px 0;

    background:#ffffff;

}

.category-card{

    display:block;

    background:#fff;

    padding:40px 30px;

    text-align:center;

    border-radius:22px;

    text-decoration:none;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    transition:.4s;

    height:100%;

}

.category-card:hover{

    background:#0B4F9C;

    transform:translateY(-12px);

}

.category-icon{

    width:90px;

    height:90px;

    margin:auto;

    border-radius:50%;

    background:#EEF5FF;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:25px;

    transition:.4s;

}

.category-icon i{

    font-size:38px;

    color:#F97316;

}

.category-card h4{

    color:#0B4F9C;

    font-weight:700;

    margin-bottom:10px;

}

.category-card p{

    color:#666;

    margin:0;

}

.category-card:hover h4,

.category-card:hover p{

    color:#fff;

}

.category-card:hover .category-icon{

    background:#fff;

}

.category-card:hover .category-icon i{

    color:#0B4F9C;

}

/*==================================
STUDY RESOURCES
===================================*/

.study-resources{

    padding:110px 0;

    background:#F8FBFF;

}

.resource-card{

    background:#fff;

    border-radius:22px;

    padding:40px 30px;

    text-align:center;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    transition:.4s;

    height:100%;

}

.resource-card:hover{

    transform:translateY(-12px);

    background:#0B4F9C;

}

.resource-icon{

    width:90px;

    height:90px;

    margin:auto;

    border-radius:50%;

    background:#EEF5FF;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:25px;

}

.resource-icon i{

    font-size:40px;

    color:#F97316;

}

.resource-card h4{

    color:#0B4F9C;

    font-weight:700;

    margin-bottom:15px;

}

.resource-card p{

    color:#666;

    line-height:1.8;

    margin-bottom:25px;

}

.resource-card a{

    display:inline-block;

    padding:12px 30px;

    border-radius:30px;

    background:#F97316;

    color:#fff;

    text-decoration:none;

    transition:.4s;

}

.resource-card:hover h4,

.resource-card:hover p{

    color:#fff;

}

.resource-card:hover .resource-icon{

    background:#fff;

}

.resource-card:hover .resource-icon i{

    color:#0B4F9C;

}

.resource-card a:hover{

    background:#fff;

    color:#0B4F9C;

}

/*=================================
FEATURED VIDEO
==================================*/

.featured-video{

    padding:110px 0;

    background:#ffffff;

}

.video-box{

    position:relative;

    border-radius:25px;

    overflow:hidden;

    box-shadow:0 20px 45px rgba(0,0,0,.15);

}

.video-box img{

    width:100%;

    border-radius:25px;

}

.play-btn{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    width:90px;

    height:90px;

    border-radius:50%;

    background:#F97316;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    font-size:30px;

    transition:.4s;

}

.play-btn:hover{

    background:#fff;

    color:#0B4F9C;

    transform:translate(-50%,-50%) scale(1.1);

}

.video-list{

    margin:30px 0;

}

.video-list div{

    margin-bottom:18px;

    font-size:18px;

    color:#555;

}

.video-list i{

    color:#28a745;

    margin-right:12px;

}

/*==================================
NEWSLETTER
===================================*/

.newsletter-section{

    padding:110px 0;

    background:#F8FBFF;

}

.newsletter-wrapper{

    background:linear-gradient(135deg,#0B4F9C,#173B8F,#F97316);

    border-radius:30px;

    padding:70px;

    color:#fff;

    overflow:hidden;

    position:relative;

}

.newsletter-wrapper::before{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    background:rgba(255,255,255,.05);

    border-radius:50%;

    top:-100px;

    right:-100px;

}

.newsletter-badge{

    display:inline-block;

    background:#fff;

    color:#F97316;

    padding:10px 24px;

    border-radius:30px;

    font-weight:600;

    margin-bottom:20px;

}

.newsletter-wrapper h2{

    font-size:46px;

    font-weight:700;

    margin-bottom:20px;

}

.newsletter-wrapper h2 span{

    color:#FFD54F;

}

.newsletter-wrapper p{

    line-height:1.9;

    color:#eee;

}

.newsletter-features{

    margin-top:30px;

}

.newsletter-features div{

    margin-bottom:15px;

    font-size:17px;

}

.newsletter-features i{

    color:#FFD54F;

    margin-right:12px;

}

.newsletter-box{

    background:#fff;

    padding:40px;

    border-radius:25px;

    color:#333;

    box-shadow:0 20px 45px rgba(0,0,0,.12);

}

.newsletter-box h3{

    color:#0B4F9C;

    font-weight:700;

    margin-bottom:15px;

}

.newsletter-box input{

    height:55px;

    border-radius:12px;

    border:1px solid #ddd;

}

.btn-subscribe{

    width:100%;

    background:#F97316;

    color:#fff;

    border:none;

    height:55px;

    border-radius:40px;

    font-size:17px;

    font-weight:600;

    transition:.4s;

}

.btn-subscribe:hover{

    background:#0B4F9C;

}

.contact-btn,

.whatsapp-btn{

    display:block;

    margin-top:15px;

    text-align:center;

    padding:14px;

    border-radius:40px;

    text-decoration:none;

    font-weight:600;

    transition:.4s;

}

.contact-btn{

    background:#0B4F9C;

    color:#fff;

}

.contact-btn:hover{

    background:#08376d;

    color:#fff;

}

.whatsapp-btn{

    background:#25D366;

    color:#fff;

}

.whatsapp-btn:hover{

    background:#1DA851;

    color:#fff;

}

@media(max-width:991px){

.newsletter-wrapper{

padding:40px;

text-align:center;

}

.newsletter-box{

margin-top:40px;

}

.newsletter-wrapper h2{

font-size:34px;

}

}