*{
    margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
    
}
body{
    font-family: 'manrope', sans-serif ;
}
header{
    width: 100%;
    height: 160px;
    background: black;
    align-items: center;
}
.container-header{
    width: 100%;
    display: inline-flex;
    position:relative;   
    align-items: center;
    justify-content: space-between;
}

 .menu-ppal{
    margin-right: 25px;
 }

.logo img{
    width: 90%;
    height: 150px;
    margin-left: 40px;
  
}

.menu-ppal nav a{
  color:white;
  text-decoration: none;
  margin-inline: 20px;
  align-items: center;
  font-weight: 600;
 
}

.container-header2 img{
    width: 100%;
    height:700px;
    position: relative;

}

.container-header2 hr{
    display: inline-flex;
   margin-top: -240px;
   position: absolute;
   margin-left: 30px;
}




.redes__sociales{
    width: 2%;
    height: 90px;
    display:block;
    margin-top:61px;
    margin-left: 30px;
    position: fixed;
    z-index: 100;
    
    }
     .facebook{
      width: 30px;
      height: 30px;
      background: #1877f2;
      border-radius: 5px;
      z-index: 100;
      position: relative;
      
      
     }
    
     .facebook img{
      width: 20px;
      height: 20px;
      align-items: center;
      position: absolute;
      margin-left: 5px;
      margin-top: 10px;
     
     }
    
    .tiktok{
      width: 30px;
      height: 30px;
      background: #ca0303;
      border-radius: 5px;
      text-align: center;
    z-index: 100;
    position: relative;
    margin-top: 8px;
      
    }
    
    .tiktok img{
      width: 20px;
      height: 20px;
      position: absolute;
    margin-left: -10px;
    margin-top: 5px;
      
    
    }
    







.abogados_eje{
    width: 35%;
    height:140px;
    position:absolute;
    background: hwb(0 3% 97% / 0.808);
    color:white;
    align-content: center;
    margin-top: -460px;
    margin-left: 30px;

}
.abogados_eje p{
    width: 95%;
    font-size: 30px;
    font-weight: 800;
    padding: 10px;
   text-align: center;
   margin-top: 17px;
   margin-left: 15px;

}

.telefono{
    width: 40%;
    height: 115px;;
    position:absolute;
    background: red;
    border-radius: 20px;
    margin-top: -170px;
    margin-left: 30px;


}

.telefono p{
    width: 100%;
    font-size: 40px;
    color:white;
    text-align: center;
    
}
.mision{
    width: 100%;
    height: 300px;
    background: url(../img/fondogridmision.png);
    display: inline-flex;
    align-items: center;
    margin-top: -5px;
}

.nuestramision p{
    color:white;
    font-size: 22px;
    margin-left: 30px;
    font-weight: 400;
    line-height: 48px;
}
.fotomision{
    margin-left: 50px;
   
}
.fotomision img{
    width: 100%;
    height: 230px;   
    
}

.conoce{
    background-image: url(../img/derechodefamiliaencolombia.jpg);
    background-repeat:no-repeat;
    background-attachment:fixed ;
    background-size: cover;
    height: 30em;
  display: grid;
  place-items: center;
}

.conoce h1{
    font-weight: 800;
    margin-top: -20px;
    font-size: 35px;
    background-color:  rgba(250, 246, 246, 0.295);
    padding: 5px;
    color: rgba(255, 0, 0, 0.712);
    border-radius: 4px;
}

.conoce p{

    width: 60%;
    padding: 10px;
    margin-top: -180px;
    font-weight: 600;
    font-size: 30px;
    background-color: rgba(250, 246, 246, 0.295);
    border-radius: 5px;
    color:rgba(0, 0, 0, 0.774);
 text-align: center;
}

 .resolvemos{
    
    align-items: center;
    justify-content: center;
 }
 .resolvemos h1{
    margin-top: 70px;
    color: rgb(235, 12, 12);
    font-size: 40px;
    text-align: center;
 }

 .resolvemos span{
    background-color: rgba(0, 0, 0, 0.877);
    padding: 5px;
    color:white;
    text-align: center;
 }

 .resolvemos p{
   
    width: 95%;
    text-align: center;
    font-size:30px;
    margin-top: 40px;
    justify-content: center;
    margin-left: 27px;
 }

.servicios{
    margin-top: 90px;
    display: grid;
    grid-template-columns:  1fr 1fr;
    gap:60px;
    margin-left: 30px;
}


.servicios img{
    width: 90px;
    height: 90px;
    border-radius: 10px;
}

.container-servicio{
    display: inline-flex;
}

.infocontacto{
    width: 100%;
    height: 680px;
    background-image: linear-gradient(rgba(250, 42, 42, 0.733),rgba(250, 42, 42, 0.733)), url(../img/img2.jpg);
    background-size: cover;
    margin-top: 70px;
    display: grid;
    place-items: center;
}

.whatsapp-contacto img{
    width: 100%;
    height: 200px;
}

.whatsapp-contacto h1{
    color: white;
    text-align: center;
    font-size: 35px;
}
.whatsapp-contacto a{
color: white;
font-size: 25px;
background-color: rgba(0, 0, 0, 0.651);
text-decoration:none;
border-radius: 20px;
padding: 5px 30px 5px;
}

.footer{
    width: 100%;
    height: 300px;
    background: black;
color: white;
display: flex;
grid-template-columns: 1fe 1fr 1fr;
gap:50px;
}

.box-1{
    width: 40%;
    display: grid;
    place-items: center;
}
.box-1 img{
    width: 100%;
}

.box-2{
    margin-top: 70px;
    
}

.box-2 p{
    margin-top: 20px;
   
}
.box-2 a{
    margin-top: 35px;
    text-decoration: none;
    color: white;
   
}
.box-3{
    margin-top: 70px;
    margin-left: 20px;
}

.box-3 p{
    margin-top:20px ;
    
}
.box-3 a{
    text-decoration: none;
    color: white;
}
.pie{
    width: 100%;
    height: 80px;
    background: rgba(255, 0, 0, 0.849);
    color:white;
    font-weight: 800;
    display: inline-flex;
    justify-content: space-between;
   
}
.pie p{
    margin-top: 35px;
    margin-right: 20px;
}

.pie img{
    margin-top: 3px;
}
.aviso__cookies{
    width: 100%;
    height: 180px;
    background: white;
    border-radius: 8px;
    box-shadow: 0px 2px 20px 10px rgba(222,222,222,.25);
    display: none;
    position: fixed;
    padding: 25px;
    padding-bottom: 0px;
    z-index: 100;
    bottom:1px;
  
  }
  .aviso__cookies.activo{
    display:block;
  }
  .aviso__cookies img{
    width: 45%;
    height: 45%;
    position:absolute;
    margin-left: -250px;
  }
  .aviso__cookies P{
    width: 85%;
    margin-left: 120px;
    font-family:Arial, Helvetica, sans-serif ;
  
  }
  
  .parrafo_cook span{
    font-size: 25px bold;
  }
  
  .botones__cookies{
  margin-top: 20px;
  text-align: center;
  
  }
  .botones__cookies button{
    padding: 15px;
    font-size: 15px;
    background: #595959;
    color:white;
    cursor: pointer;
    transition: .3s ease all;
    font-weight: 700;
    font-family: sans-serif;
    border:none;
    border-radius: 9px;
  }
  .botones__cookies button:hover{
   background: black;
  
  }
  .botones__cookies a{
    margin-left:25px;
    text-decoration: none;
    color: #4DBFFF;
    font-family: Arial, Helvetica, sans-serif;
  }
  .botones__cookies a:hover{
    text-decoration: underline blueviolet;
  }
  .gradientgalletas{
  
  display: none;
  background: rgba(0,0,0, .20);
  position: fixed;
  z-index: 99;
  width: 100vw;
  height: 100vh;
  top:0;
  left:0;
  }
  .gradientgalletas.activo{
  display:block;
  }
  






@media screen and (max-width:992px){
    header{
        width: 100%;
        height: 100px;
    } 
    .logo{
        width: 70%;
    }
    .logo img{
        width: 90%;
        height: 90px;
        margin-left: 10px;
        margin-top: 7px;  
    } 
    .menu-ppal{
        width:60% ;
        padding: 0px;
        margin-left: 3px;
       
    }
    .menu-ppal nav a{
     font-size: 8px;
     margin-inline: 4px;
     margin-left: 8px;
    } 
    .container-header2 img{ 
        height:400px;
    } 
    .container-header2 hr{
       margin-top: -145px;
    }  
    .abogados_eje{
        width: 65%;
        height:140px;
        margin-top: -300px;
        margin-left: 30px;
    
    }
    .abogados_eje p{
        width: 95%;
        font-size: 20px;
    
    }  
    .telefono{
        width: 65%;
        height: 90px;;
        margin-top: -130px;
    } 
    .telefono p{
        width: 100%;
        font-size: 23px;
        margin-top: 10px;
    } 
    .mision{
        width: 100%;
        height: 430px;
        background: url(../img/fondogridmision.png);
        display: block;
        align-items: center;
        margin-top: -5px;
    }
    .nuestramision p{
        width: 85%;
        font-size: 18px;
        padding-top: 40px;
        font-weight: 400;
        line-height: 39px;
        text-align: center;
    }
    .fotomision{
      width: 100%;
      height: 150px;
      margin-left: 10px;  
    }
    .fotomision img{
        width: 100%;
        height: 150px;
        margin-top: 22px;
    }
    .conoce{  
        background-image: url(../img/expertos.jpg); 
    } 
    .conoce h1{
        margin-top: -30px;
        font-size: 25px;
        font-weight: 800;
    }
    .conoce p{
        width: 85%;  
        margin-top: -120px;
        font-weight: 800;
        font-size: 20px;
    }
    .resolvemos{
        width:95%
    }
     .resolvemos h1{
        width: 100%;
        margin-top: 50px;
        font-size: 25px;
     }
     .resolvemos span{
        padding: 3px; 
     }
     .resolvemos p{
        font-size:28px;
     }
    .servicios{
        display: block;
    }
    .servicios img{
        width: 90px;
        height: 90px;
        border-radius: 10px;
        margin-top: 15px;
        padding: 5px;
    }
    .servicios p{
        width: 90%;
    }
    .infocontacto{
        background-image: linear-gradient(rgba(250, 42, 42, 0.733),rgba(250, 42, 42, 0.733)), url(../img/img3.jpg);
    }
    .whatsapp-contacto img{
        width: 80%;
        height: 200px;
        margin-left: 45px;
    } 
    .whatsapp-contacto h1{
        width: 95%;
        color: white;
        text-align: center;
        font-size: 32px;
        margin-left: 15px;
    }
    .footer{
    display:block;
    height: 453px;
   
    }    
    .box-1{
        width: 100%;
        display: grid;
        place-items: center;
    }
    .box-1 img{
        width: 70%;
        height: 120px;
        margin-top: 30px;
    }
    .box-2{
        margin-top: 30px; 
        margin-left: 40px;  
    }
     .box-2 h2{
      font-size: 18px;
     }
    .box-2 p{
        margin-top: 10px;
        font-size: 15px;
    }
    .box-3{
        margin-top: 20px;
        margin-left: 40px;
    }
    .box-3 h2{
        font-size: 20px;
    }
    .box-3 p{
        margin-top:10px ;
        font-size: 15px;
    }
  
    .pie p{
       font-size: 10px;
    }
    .pie img{
   width: 90px;
   height: 59px;
   margin-top: 15px;
   margin-left: 15px;
}
    .aviso__cookies{
        width: 100%;
        height: 370px;
        
        
        }
        .aviso__cookies img{
        width: 15%;
        height: 15%;
        margin-left: -10px;
        }
        .aviso__cookies P{
        font-size: 15px;
        margin-left: 60px;
        justify-content:justify;
        font-family: Arial, Helvetica, sans-serif;
        }
        .parrafo_cook span{
        font-size: 10px bold;
        }
        .botones__cookies{
        margin-top: 20px;
        text-align: center;
        
        }
        
        .botones__cookies button{
        padding: 10px;
        font-size: 12px;
        margin-left: 38px; 
        }
        .botones__cookies a{
        font-family: Arial, Helvetica, sans-serif;
        font-size: 10px;
        }
        .politica button{
        font-size: 10px;
        
        }
        
}
 @media screen and (max-width:780px){

    
    .menu-ppal nav a{
        font-size: 7px;
        margin-inline: 0px;
        margin-left: 8px;
       } 
    .resolvemos p{
        font-size: 21px;
        margin-left: 15px; 
    }
    .servicios{
        margin-top: 5px;
        margin-left: 15px;
    }
    .servicios h1{
        font-size: 22px;
    }
    
 }


@media screen and (min-width:1920px){
    header{
        height: 165px;
    }
    
     .menu-ppal{
        margin-right: 45px;
     }
    
    .logo img{
        width: 100%;
        height: 165px;
        margin-left: 40px;
    }
    .container-header2 img{
        height:780px;
    }
    
    .abogados_eje{
        height:170px;
    }
    .abogados_eje p{
        font-size: 40px; 
        padding: 0px;
        margin-top: 25px;
      
    }
    
    .telefono{
        width: 40%;
        height: 140px;
        margin-top: -190px;
    }
    
    .telefono p{
        font-size: 45px;  
        font-weight: 600; 
    }
    .mision{
      justify-content: space-between;
      
    }
    
    .nuestramision p{
        color:white;
        font-size: 32px;
        margin-left: 80px;
    }
    .fotomision{
        margin-right: 90px;
       
    }
      
  
    .conoce h1{
        font-size: 45px; 
    }

    .conoce p{
        font-size: 32px;
    }
     .resolvemos p{
        font-size:35px; 
     }

    
    .servicios img{
        width: 95px;
        height: 95px;
    }
    .servicios h1{
        font-size: 35px;
    }
    .servicios p{
        font-size: 28px;
    }
    .infocontacto{
        height: 970px;   
    }
    .whatsapp-contacto img{
        width: 100%;
        height: 300px;
    }
    
    .whatsapp-contacto h1{
      font-size: 45px;
      margin-top: 20px;
     
    }

    .whatsapp-contacto a{
    font-size: 30px;
    padding: 8px 30px 8px;

    }
    
    .footer{
        width: 100%;
        height: 430px;
    gap:100px;
    justify-content: center;
    }
    
    .box-1{
        width: 40%;
        display: grid;
        place-items: center;
    }
    .box-1 img{
        width: 100%;
    }
    
   
    
    
    .box-2 p{
        margin-top: 20px;
       
    }
    .box-2 a{
        margin-top: 35px;
       
    }
    .box-3{
        margin-top: 70px;
        margin-left: 20px;
    }
    
    .box-3 p{
        margin-top:20px ;
    }
    .pie{
        width: 100%;
        background: rgba(255, 0, 0, 0.849);
        color:white;
        font-weight: 800;
        display: inline-flex;
        justify-content: space-between;
       padding: 5px 20px 5px;
    }
    .aviso__cookies img{
        margin-left:-380px;
        }
        
}