/* ==========================================
   TABLETS & SMALL LAPTOPS
========================================== */

@media(max-width:991px){

    .hero-title{
        font-size:2.8rem;
    }

    .hero-glass-card{
        margin-top:50px;
    }

    .section-title{
        font-size:2rem;
    }

    .navbar-collapse{
        background:#003b73;
        padding:15px;
        margin-top:10px;
        border-radius:15px;
    }

}


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

@media(max-width:768px){

    /* HERO SECTION */

    .hero-section{
        padding-top:110px;
        min-height:auto;
    }

    .hero-section .row{
        min-height:auto !important;
    }

    .hero-title{
        font-size:2.2rem;
        text-align:center;
    }

    .hero-text{
        text-align:center;
    }

    .hero-badge{
        display:block;
        text-align:center;
    }

    .hero-buttons{
        display:flex;
        flex-direction:column;
        align-items:center;
    }

    .custom-btn-outline{
        margin-left:0;
        margin-top:15px;
    }

    .hero-glass-card{
        margin-top:40px;
        max-width:320px;
        margin-left:auto;
        margin-right:auto;
    }

    /* PAGE BANNER */

    .page-banner{
        padding:100px 0 40px;
    }

    .page-banner h1{
        font-size:2.2rem;
    }

    /* SERVICES */

    .service-large-card{
        padding:30px;
    }

    .service-header{
        flex-direction:column;
        align-items:flex-start;
    }

    .service-header h2{
        font-size:1.6rem;
    }

    /* TIMELINE */

    .timeline::after{
        left:25px;
        margin-left:0;
    }

    .timeline-item{
        width:100%;
        left:0 !important;
        padding-left:70px;
        padding-right:15px;
        margin-bottom:35px;
    }

    .timeline-item.left,
    .timeline-item.right{
        left:0;
    }

    .timeline-item::after{
        left:11px !important;
        right:auto;
        width:24px;
        height:24px;
    }

    .timeline-content{
        padding:25px;
    }

    .timeline-content p{
        line-height:1.6;
        font-size:0.95rem;
    }

    

    /* TEAM CARDS */

    .team-card{
        padding:25px;
    }

}


/* ==========================================
   SMALL PHONES
========================================== */

@media(max-width:576px){

    .hero-title{
        font-size:1.8rem;
    }

    .section-title{
        font-size:1.8rem;
    }

    .page-banner h1{
        font-size:1.8rem;
    }

    .service-card,
    .service-large-card,
    .about-box,
    .team-card,
    .timeline-content,
    .contact-form{
        padding:20px;
    }

}

@media(max-width:768px){

    .timeline{
        overflow:hidden;
    }

    .timeline-item{
        width:100%;
        left:0 !important;
        padding-left:60px;
        padding-right:15px;
        box-sizing:border-box;
    }

    .timeline-item::after{
        left:12px !important;
        right:auto;
    }

}

@media(max-width:380px){

    .navbar-brand span{
        display:none;
    }

}