/*
====================================================
 IRES Ship Management LLP
 Responsive Stylesheet
====================================================
*/

/* Large laptops */
@media (max-width:1200px){
    .container{
        max-width:1000px;
    }

    .hero h1{
        font-size:42px;
    }
}

/* Tablets */
@media (max-width:992px){

    .nav-inner{
        flex-direction:column;
        height:auto;
        padding:15px 0;
        gap:15px;
    }

    .menu{
        flex-wrap:wrap;
        justify-content:center;
        gap:18px;
    }

    .cards,
    .kv,
    .footer-top{
        grid-template-columns:1fr;
    }

    .hero{
        padding:70px 0 90px;
    }

    .hero h1{
        font-size:38px;
    }

    .hero p{
        font-size:17px;
    }
}

/* Mobile */
@media (max-width:768px){

   .top-bar{
    display:none;
}

    .brand{
        flex-direction:column;
        text-align:center;
    }

    .brand img{
        height:55px;
    }

    .nav-menu{

    display:none;

    position:absolute;

    top:100%;

    left:0;

    width:100%;

    background:#fff;

    flex-direction:column;

    text-align:center;

    padding:20px 0;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

    gap:18px;

}

.nav-menu.active{

    display:flex;

}

.menu-toggle{

    display:block;

    font-size:26px;

    cursor:pointer;

}

.nav .container{

    position:relative;

}

    .hero{
        text-align:center;
        padding:60px 0 80px;
    }

    .hero h1{
        font-size:32px;
    }

    .hero p{
        font-size:16px;
    }

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

    .btn{
        width:100%;
        max-width:320px;
        text-align:center;
    }

    .card{
        padding:22px;
    }

.footer-grid{
    grid-template-columns:1fr;
    gap:40px;
}

    .footer{
        text-align:center;
    }

    .footer-icon{
        justify-content:center;
    }

.footer-links{
    align-items:center;
}


.footer-contact div{
    justify-content:center;
}

}

/* Small phones */
@media (max-width:576px){

    .container{
        padding:0 16px;
    }

    .hero h1{
        font-size:28px;
    }

    .hero p{
        font-size:15px;
    }

    .badge{
        font-size:13px;
    }

    .brand span{
        font-size:16px;
    }

    .nav-inner{
        padding:12px 0;
    }

    .footer{
        padding:40px 0 25px;
    }
}

/* Extra small */
@media (max-width:400px){

    .hero h1{
        font-size:24px;
    }

    .btn{
        padding:10px 18px;
    }

    .top-left{
        gap:10px;
        font-size:13px;
    }
}