body{
background:url(../Image/img22.jpg);
background-size: cover;
}
section{
    padding:100px 10% ;
    
}

.about{
    display:flex;
    justify-content: center;
    align-items: center;
    grid-gap: 4rem;
    
    background-size: cover;
}
.about .img-about{
    text-align: center;
    position: relative;
}
.about .img-about img{
   max-width: 350px; 
   height: auto;
   border-radius: 100px;
  
}
.about-content span{
    color: #fdfdfd;
    font-size: .8rem;
    font-weight: 200;
    letter-spacing: 2px;
    text-transform: uppercase;
}


.about-content h3{
    font-weight: 600;
    font-size: 1.5rem;
    margin-bottom: .2rem;
    color: aqua;
    text-align: center;
}
.about-content h2{
    font-weight: 600;
    font-size: 1.5rem;
    margin-bottom: .2rem;
    color: aqua;
    text-align: center;
}
.about-content p{
    color: #fff;
    font-weight: 300;
    margin-bottom: 1.5rem;
}
.about-content a {
    display:flex;
     padding:12px 20px; 
    background-color:#25D366; 
    color:white; 
    text-decoration:none; 
    border-radius:30px; 
    font-weight:bold; 
     margin-top: 2rem; 
     text-align: center;
     justify-content: center;
     align-items: center;
}

 /* paralex*/
.scroll-scale{
    opacity: 0;
    transform: scale(.9);
    transition: all 2s;
}

.scroll-bottom{
    opacity: 0;
    transform: translateY(300px);
    transition: 3s;

}

.scroll-top{
    opacity: 0;
    transform: translateY(-300px);
    transition: 3s;

}

.show-items{
    opacity: 1;
    transform: translateX(0);
}

@media(max-width:768px){
   
   
   .about{
     flex-direction: column-reverse;
   }
.img-about img{
        
        width: 300px;
    }
    
    .img-about p{
        font-size: 1rem;
    }
   
}

@media(max-width:420px){
     
    
    .img-about img{
        
        width: 300px;
    }
    
    .img-about p{
        font-size: 1rem;
    }
}