*{
    font-family: serif;
    margin: 0;
    padding: 0;
   
}
img{
    max-width: 100%;
    
}
.img-1{
    
     width: 50%;

}
h1{
    margin-top: 1rem;
}
.img-1-1{
    margin-top: 30%;

    width: 50%;
}
.main-2{ 
   
    background-image: url('../img/csm-index/csm\ titulo.webp');
    background-repeat: no-repeat;
    
  
    background-size: 100% auto;
    border-radius: 20px;
  
   
}
.h-m{
    display: grid;
    width: 80%;
    margin: 4rem auto;
    gap: 3rem;
    

}
.c_list ul{
    display: grid;
    border-right: 3px solid rgb(255, 81, 18);
    border-top: 3px solid rgb(255, 81, 18);
   
    padding: 1rem;
    border-radius: 20px;
    box-shadow: -4px 5px 10px rgba(133, 133, 133, 0.97);
   
}
.cha{ 
    color: rgb(255, 81, 18);
    text-shadow: -1px 1px 0px rgba(75, 75, 75, 0.97);
    justify-content: center;
    text-align: center;
    font-weight: bold;
    margin-bottom: 3rem;
    
}

.c_list ul .icons{
    border-radius: 50%;
    box-shadow: -4px 5px 10px rgba(133, 133, 133, 0.97);
}
.c_list ul li:hover {
        box-shadow: 0px 0px 10px 5px rgba(180, 180, 180, 0.97);
        border-radius: 35px;
        border: 1px solid rgb(255, 81, 18) ;


}
.c_list ul li{
    margin: 1rem 0;
justify-items: center;
text-align: center;
list-style: none;
padding: 1rem;

}
.c_list ul li a i, .c_list ul li a span{
    margin: 1rem 1rem; 
}
.icon_2 span{
        text-decoration: none;

}
.denji-c, .reze-c, .aki-c, .yoru-c{
    font-weight: bold;
    text-shadow: -1px 1px 0px rgba(75, 75, 75, 0.97);
    text-decoration: none;
    
}
.denji-c{
    color: rgb(207, 135, 0);
}
.aki-c{ color: rgb(113, 125, 126);

}
.reze-c{ color: rgb(190, 154, 255);

}
.yoru-c{color: rgb(255, 25, 25);

}
.texto-1 p{
    margin: 2rem 0;
}
.img-2-1{
    max-width: 80%;
    padding: 2rem;
    border-bottom: 1px solid rgb(255, 81, 18) ;
}
footer{
    width: 90%;
    margin-top: 1rem;
    margin: 0 auto;
    padding: 1rem;
    border-top: 3px solid rgb(255, 81, 18) ;
    display: grid;
 
    
}
.texto-footer{
    display: grid;
    align-items: center;
    border-right: 0.5px solid  rgb(255, 81, 18);

}
.texto-footer span{
   color:  rgb(255, 81, 18) ;

}
.icon_3 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-left: 50% ;
    justify-content: center;
    
}

@media (max-width:600px){
    .main-1{
        order: 1;
    }
    .c_list ul{
         gap: 1rem;
        grid-template-columns: repeat(2, 1fr);
    }
    .c_list{
        order: 2;
    }
    footer{
           grid-template-columns: 3fr 2fr;
    }




}
@media (max-width:900px) and (min-width:601px){

    .main-1{
        order: 1;
    }
    .c_list ul{
        gap: 1rem;
        grid-template-columns: repeat(4, 1fr);
    }
    .c_list{
        order: 2;
    }
    footer{
           grid-template-columns: 3fr 1fr;
    }
    
}
@media (min-width:901px){



.h-m{
    grid-template-columns: 1fr 3fr;
    align-items: start;
      
}
.c_list{
     position: sticky;
       top: 20px;
}
footer{
           grid-template-columns: 3fr 1fr;
    }





}