.mets-wrapper{
display:flex;
justify-content:space-between;
align-items:center;
gap:60px;
padding:80px;
background:#111;
border-radius:20px;
overflow:hidden;
}

.mets-left{
width:30%;
}

.mets-right{
width:65%;
}

.mets-small-heading{
letter-spacing:3px;
font-size:13px;
font-weight:600;
text-transform:uppercase;
}

.mets-heading{
font-size:48px;
line-height:1.2;
margin-top:15px;
color:#fff;
}

.mets-arrows{
display:flex;
margin-top:40px;
}

.mets-arrow{
display:flex;
align-items:center;
justify-content:center;
width:50px;
height:50px;
background:transparent;
border:1px solid #444;
border-radius:10px;
cursor:pointer;
color:#fff;
transition:.3s ease;
padding:0;
}

.mets-arrow i,
.mets-arrow svg{
display:flex;
align-items:center;
justify-content:center;
}

.mets-slide{
display:none;
animation:metsFade .5s ease;
}

.mets-slide.active{
display:block;
}

.mets-quote-row{
display:flex;
align-items:flex-start;
margin-bottom:35px;
}

.mets-quote-sign{
line-height:1;
font-size:70px;
display:inline-flex;
}

.mets-quote{
color:#fff;
font-size:34px;
line-height:1.5;
}

.mets-client{
display:flex;
gap:15px;
}

.mets-client img{
width:70px;
height:70px;
object-fit:cover;
border-radius:100px;
}

.mets-client-name{
margin:0;
color:#fff;
}

.mets-location{
color:#bbb;
font-size:14px;
margin-top:4px;
}

@keyframes metsFade{
from{opacity:0;}
to{opacity:1;}
}

@media(max-width:768px){

.mets-wrapper{
flex-direction:column;
padding:40px 25px;
}

.mets-left,
.mets-right{
width:100%!important;
}

.mets-heading{
font-size:34px;
}

.mets-quote{
font-size:22px;
}

}


.mets-close-quote{
align-self:flex-end;
margin-left:12px;
}

.mets-open-quote{
margin-top:0;
}



.mets-slide{
opacity:0;
transform:translateX(20px);
transition:all .5s ease;
position:absolute;
width:100%;
pointer-events:none;
}

.mets-right{
position:relative;
min-height:320px;
}

.mets-slide.active{
opacity:1;
transform:translateX(0);
position:relative;
pointer-events:auto;
}

.mets-wrapper.effect-slide .mets-slide{
transform:translateX(60px);
}

.mets-wrapper.effect-slide .mets-slide.active{
transform:translateX(0);
}

.mets-wrapper.effect-smooth .mets-slide{
transition:all .9s cubic-bezier(0.22, 1, 0.36, 1);
}



.mets-right{
display:flex;
align-items:center;
justify-content:center;
}

.mets-slide{
width:100%;
}

.mets-quote-row{
align-items:flex-start;
}

.mets-quote-sign{
margin-top:8px;
}



.mets-wrapper{
position:relative;
background-size:cover!important;
background-position:center!important;
background-repeat:no-repeat!important;
}

.mets-overlay{
position:absolute;
inset:0;
z-index:1;
}

.mets-left,
.mets-right{
position:relative;
z-index:2;
}

.mets-slide{
opacity:0;
visibility:hidden;
pointer-events:none;
transform:translateY(20px);
transition:all .5s ease;
position:absolute;
width:100%;
left:0;
top:0;
}

.mets-slide.active{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateY(0);
position:relative;
}

.effect-fade .mets-slide{
transform:none;
transition:opacity .5s ease;
}

.effect-slide .mets-slide{
transform:translateX(80px);
transition:all .6s ease;
}

.effect-slide .mets-slide.active{
transform:translateX(0);
}

.effect-smooth .mets-slide{
transform:scale(.96);
transition:all 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.effect-smooth .mets-slide.active{
transform:scale(1);
}