/* ==========================================
   ARC SOLUCIONES ELÉCTRICAS
   RESPONSIVE.CSS
==========================================*/


/*==========================
Pantallas grandes
==========================*/

@media (min-width:1600px){

.card{

    max-width:1200px;

}

h1{

    font-size:4rem;

}

.description{

    font-size:1.25rem;

}

}


/*==========================
Laptops
==========================*/

@media (max-width:1200px){

.card{

    padding:55px;

}

h1{

    font-size:2.7rem;

}

.description{

    font-size:1.05rem;

}

}


/*==========================
Tablets
==========================*/

@media (max-width:992px){

.card{

    padding:45px;

}

.contact{

    grid-template-columns:1fr;

}

.progress{

    width:90%;

}

h1{

    font-size:2.3rem;

}

.watermark img{

    width:95%;

}

}


/*==========================
Celulares grandes
==========================*/

@media (max-width:768px){

.container{

    padding:30px 15px;

}

.card{

    padding:35px 25px;

    border-radius:22px;

}

.status{

    font-size:.75rem;

    letter-spacing:2px;

}

h1{

    font-size:2rem;

    line-height:1.35;

}

.description{

    font-size:1rem;

    line-height:1.7;

}

.progress{

    width:100%;

}

.item{

    flex-direction:column;

    text-align:center;

}

.icon{

    margin-bottom:10px;

}

footer h3{

    font-size:1rem;

}

footer p{

    font-size:.85rem;

}

}


/*==========================
Celulares pequeños
==========================*/

@media (max-width:480px){

body{

    overflow-x:hidden;

}

.card{

    padding:25px 18px;

}

.status{

    width:100%;

}

h1{

    font-size:1.65rem;

}

.description{

    font-size:.95rem;

}

.progress{

    height:12px;

}

.working{

    font-size:.95rem;

}

.item{

    padding:18px;

}

.icon{

    width:50px;

    height:50px;

    font-size:20px;

}

.item p{

    font-size:.90rem;

    word-break:break-word;

}

footer{

    margin-top:25px;

}

footer h3{

    font-size:.9rem;

}

footer p{

    font-size:.75rem;

}

}


/*==========================
Pantallas muy pequeñas
==========================*/

@media (max-width:340px){

h1{

    font-size:1.4rem;

}

.description{

    font-size:.85rem;

}

.status{

    font-size:.65rem;

}

.icon{

    width:45px;

    height:45px;

}

}