
/***************************************** MOBILE SMALL**************************************/
@media (max-width: 575.98px){
    body{font-size: 0.9em;}
    h3{font-size: 1.1rem;}
    .logo{font-size: 3rem;         padding: 10px 0; }
    .menu li a {font-size: 0.99em;}


    .box img {
        width: 220px;
        height: 220px;
        margin-top: 6rem;
        }

    .box h2 {
        font-size: 2rem !important;
        margin: 25px;
        letter-spacing: 5px;
    }

    .box h4{
        font-size: 1rem;
    }


    .menu li a {
        line-height: 55px;
        font-size: 1.2em;
    }



    .navbar{
        width: 100%;
        font-size: 1em;        
    }

    .content{
        padding-left: 40px;
    }

    .cardbox{
    margin: 1.5rem;
    padding: 2.5rem 1.5rem;
    }


    .new-padding {
        padding: 2rem;
        margin-top: 1rem;
    }

    .bg-port .bg-cont{
        padding: 2rem 0px;
    }

    .bg-cont h3, .bg-cont h5 {
        font-size: 1rem;
    }
    .bg-cont h5 {font-size: 0.8rem;}

    .bg-port{
        padding: .5rem 0;     }

    .heading{margin: 0;}
    .heading h1{font-size: 1.5rem;}
    .heading h6{font-size: small;}

    .port-tab{
        padding: 0rem;
        width: 95%;
    }

    .nav-tabs{
        margin-left: 1.5rem;
    }

    

    .card {
        font-size: 0.88em;
        margin: 1rem;
    }

    .contact {
        padding: 1rem;
    }

  
    .about{
         padding-left: 3.3rem !important;
     }

     .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
        display: block;
        padding: .5rem .3rem;}

        .nav-link {
            display: block;
            padding: .5rem 0.5rem;
        }

    

        .cardbox h4{
            margin: 0.5rem;
        }
      

        .btn {
            padding: 1rem 1.5rem;font-size: 1.1em;}

        .cardbox-hol{
            padding: 3rem 1rem;
        }




}

/***************************************** MOBILE/Tab large**************************************/


@media (min-width: 576px) and (max-width: 767.98px) { 
    .navbar{
        width: 100%;
        line-height: 1rem;

    }
    .menu li a {
        line-height: 50px;
    }

    .content{
        padding-left: 40px;
    }

    body{font-size: 0.95em;}

    .logo{
        font-size: 3.5rem;
        padding: 1rem 0;
        }
    
    .new-padding {
        padding: 2rem;
        margin-top: 3rem;
        margin-left: 1rem;

    }
    
    .content{
        padding-left: 14rem;
    }
    

    .box img {
        margin-top: 10rem;
    }

    .box h2 {
        font-size: 2.5rem !important;
        margin: 25px;
        letter-spacing: .5rem;
    }

    .menu li a {font-size: 1em;}

    .bg-port .bg-cont{
        padding: 2rem 0px;
    }
    .bg-cont h3, .bg-cont h5 {
        font-size: 1rem;
    }
    .bg-cont h5 {font-size: 0.8rem;}
    .bg-port{padding: 1rem 0;    }

    .heading{
        padding-left: 10px;
        margin: 20px 1rem 10px 2rem;    }

    .heading h1{font-size: 1.8rem;}
    .heading h6{font-size: small;}

    .card{
        margin: 1rem 0;
        font-size: 0.7em;
    }
    .card h6{
        font-size: 0.8em;
    
    }
    
    .contact {
        padding: 2rem;
    }
    


    .port-tab {
        padding: 2rem 1rem;
    }
    

 }


 /***************************************** MOBILE SMALL**************************************/

@media (min-width: 768px) and (max-width: 991.98px) {
    .navbar{
        font-size: 98%;
        width: 15rem;
    }

    .content{
        padding-left: 15rem;
    }

    .logo{
        font-size: 4rem;
        padding: 15px 0;
        }

    .heading h1{font-size: 2.5rem;}
    .heading h6{font-size: small;}

    .cardbox{
        margin: 2rem;
    } 

    .bg-port .bg-cont {
        padding: 2rem 0px;}


    .social ul li {
        display: inline-block;
        margin: 0.5rem .5rem;}
        
    .new-padding 
    {
        padding: 2rem;
        padding-left: 4rem;
        margin-top: 3rem;
    }

    .port-tab {
        padding: 2rem;
    }

    .contact {
        padding: 2rem;
    }

    .progressbarbox{
        padding: 4rem;
    }
    
}

/****************** ********** Large devices (desktops, 992px and up)*****************************/
@media (min-width: 992px) and (max-width: 1199.98px) { 
    .contact {
        padding: 2rem 1.5rem;
    }

    .new-padding {
        padding: 1rem 3rem;
        margin-top: 2rem;}

        .card {
            margin: 1rem 0;}
}

/********************** Extra large devices (large desktops, 1200px and up)*********************************/
@media (min-width: 1200px) and (max-width: 1599.98px) {
    .contact {
        padding: 2rem;
    }
    .new-padding {
        padding: 2rem 3rem;
        margin-top: 3rem;
    }

    .cardbox{
        margin: 2rem;
    } 
    .new-padding{
        margin-top: 2rem;
    }

    .card {
        margin: 1rem 0;}

    
}