*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:Poppins,sans-serif;
background:#fff;
height:100vh;
overflow:hidden;

}

.left{

position:absolute;

left:0;
top:0;

width:65%;
height:100vh;

background:#042773;

clip-path:polygon(0 0,100% 0,90% 100%,0 100%);

display:flex;

align-items:center;

justify-content:center;

}


.contenido{

width:420px;

animation:fade 1.2s ease;

}

h1{

font-family:'Playfair Display',serif;

font-style:italic;

font-size:46px;

line-height:60px;

color:#fff;

margin-bottom:28px;

}

.sub{

font-size:19px;

color:white;

margin-bottom:40px;

}

.logo{

width:420px;

max-width:100%;

margin-bottom:35px;

}

h2{

font-size:22px;

line-height:38px;

font-weight:700;

color:white;

margin-bottom:35px;

}

.direccion{

font-size:20px;

line-height:42px;

font-weight:600;

color:white;

}

.social{

position:fixed;

right:70px;

top:50%;

transform:translateY(-50%);

display:flex;

flex-direction:column;

gap:34px;

}

.social a{

width:64px;

height:64px;

background:#000;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

text-decoration:none;

transition:.35s;

}

.social a:hover{

transform:scale(1.15);

background:#042773;

}

.social i{

color:white;

font-size:23px;

}

.social a:hover i{

color:#000;

}

@keyframes fade{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@media(max-width:1100px){

.left{

width:100%;

clip-path:none;

}

.social{

right:25px;

}

}

@media(max-width:768px){

body{

overflow:auto;

}

.left{

position:relative;

height:auto;

padding:70px 35px;

}

.contenido{

width:100%;

}

h1{

font-size:48px;

line-height:56px;

}

.logo{

width:300px;

}

h2{

font-size:18px;

line-height:30px;

}

.direccion{

font-size:18px;

line-height:30px;

}

.social{

position:relative;

top:auto;

right:auto;

left:auto;

bottom:auto;

transform:none;

flex-direction:row;

justify-content:center;

margin:50px 0;

}

}