/* ======================================================
   SkillForge Responsive Styles
   Version : 1.0
   Author : SkillForge
====================================================== */


/* ======================================================
   Large Devices (1400px)
====================================================== */

@media (max-width:1400px){

    .hero h1{

        font-size:3rem;

    }

}


/* ======================================================
   Laptop (1200px)
====================================================== */

@media (max-width:1200px){

    section{

        padding:80px 0;

    }

    .hero h1{

        font-size:2.8rem;

    }

    .section-title h2{

        font-size:2.3rem;

    }

}


/* ======================================================
   Tablet Landscape (992px)
====================================================== */

@media (max-width:992px){

    .navbar{

        height:auto;

        padding:12px 0;

    }

    .navbar-collapse{

        margin-top:20px;

        padding:20px;

        border-radius:12px;

        background:#ffffff;

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

    }

    .navbar-nav{

        gap:0;

    }

    .nav-item{

        margin:8px 0;

    }

    .hero{

        text-align:center;

        padding-top:120px;

    }

    .hero h1{

        font-size:2.5rem;

    }

    .hero p{

        font-size:1rem;

    }

    .hero-image{

        margin-top:50px;

        width:80%;

    }

    .stats .col-md-3{

        margin-bottom:30px;

    }

    .feature-card{

        margin-bottom:20px;

    }



}


/* ======================================================
   Tablet Portrait (768px)
====================================================== */

@media (max-width:768px){

    section{

        padding:70px 0;

    }

    .hero{

        min-height:auto;

    }

    .hero h1{

        font-size:2.2rem;

        line-height:1.3;

    }

    .hero p{

        font-size:.95rem;

    }

    .hero .btn{

        width:100%;

        margin-bottom:15px;

    }

    .hero .d-flex{

        flex-direction:column;

    }

    .section-title{

        margin-bottom:40px;

    }

    .section-title h2{

        font-size:2rem;

    }

    .stats h2{

        font-size:2.2rem;

    }

    .feature-card{

        padding:30px;

    }

    .feature-card i{

        width:65px;

        height:65px;

        font-size:24px;

    }

    .footer{

        text-align:center;

    }

    .footer-brand{

        justify-content:center;

    }

    .social-icons{

        justify-content:center;

    }

    .contact-list{

        align-items:center;

    }

    .contact-list li{

        justify-content:center;

    }

    .page-banner{

        padding:110px 0 70px;

    }

}


/* ======================================================
   Mobile (576px)
====================================================== */

@media (max-width:576px){

    .container{

        padding-left:20px;

        padding-right:20px;

    }

    .navbar-brand{

        font-size:1.3rem;

    }

    .logo-text{

        display:none;

    }

    .hero{

        padding-top:100px;

    }

    .hero h1{

        font-size:1.9rem;

    }

    .hero-image{

        width:100%;

    }

    .btn{

        width:100%;

    }

    .feature-card{

        padding:25px;

    }

    .card{

        border-radius:12px;

    }

    .section-title h2{

        font-size:1.7rem;

    }

    .footer{

        padding:60px 0 25px;

    }

    .footer h4{

        font-size:1.4rem;

    }

    .footer h5{

        margin-top:25px;

    }

    .footer p{

        font-size:.9rem;

    }

    .footer hr{

        margin:35px 0 20px;

    }

}


/* ======================================================
   Small Mobile (425px)
====================================================== */

@media (max-width:425px){

    .hero h1{

        font-size:1.7rem;

    }

    .hero p{

        font-size:.9rem;

    }

    .stats h2{

        font-size:2rem;

    }

    .feature-card{

        padding:20px;

    }

    .feature-card h4{

        font-size:1.15rem;

    }

    .feature-card p{

        font-size:.9rem;

    }

}


/* ======================================================
   Extra Small Devices (375px)
====================================================== */

@media (max-width:375px){

    .hero h1{

        font-size:1.55rem;

    }

    .navbar-brand img{

        width:34px;

    }

    .page-banner h1{

        font-size:2rem;

    }

}


/* ======================================================
   Very Small Devices (320px)
====================================================== */

@media (max-width:320px){

    .hero h1{

        font-size:1.4rem;

    }

    .btn{

        font-size:.9rem;

        padding:10px 20px;

    }

    .feature-card{

        padding:18px;

    }

    .footer{

        font-size:.85rem;

    }

}


/* ======================================================
   Landscape Phones
====================================================== */

@media (max-height:500px) and (orientation:landscape){

    .hero{

        min-height:auto;

        padding:120px 0 60px;

    }

}