/*=========================| Site Hero |=======================*/
.site-hero{
    margin-top: -8em;
    background: var(--primary-color);
    min-height:60em;    
}
.site-hero .site-hero-content{
    position: relative;
    top: 10em;
    padding: 2em;
}
 .ellipse{
   position: absolute;
   left:-5em;
   max-width: 50em;
   max-height: 50em;
   z-index: 1;
}
.site-hero .site-hero-content .hero-image img.brush{
    position: absolute;
    top:30em;
    right:11em;
    padding: 5em;
    z-index: 5;
    animation: moveArrow 1s alternate-reverse infinite;
}
.site-hero .site-hero-content .hero-image img{
    position: absolute;
    top:20em;
    right:0;
    bottom: 0;
    max-height: 30em;
    z-index: 2;
}
/*=========================| About |=======================*/
.about .about-content .about-info .exp .box{
    margin-top: 1em;
    background: var(--tertiary-color);
    padding: 1em 1em;
    border-radius: 5%;
}
/*=========================| Services |=======================*/
.services .services-content .box{
    margin-top: 1em;
    background: var(--tertiary-color);
    padding: 2em 1em;
    border-radius: 5%;
}
/*=========================| Testimonial |=======================*/
.testimonial-content{
    background: var(--tertiary-color);
    padding: 1em 2em;
    text-align: left;
}
.testimonial-content .box .client-img  img{
    border-radius: 50%;
    width: 5em;
    height: 5em;
    margin-top: -2em;
    
}
 
input[type='text'],
input[type='email'],textarea {
 padding: 1em;
 margin-top: 1em;
 border:.2em solid var(--tertiary-color);
 width: 100%;
}

/*=======================| Contact |========================*/
input[type='submit']{
    margin-top: 1em;
    cursor: pointer;
    padding: 1em .5em;
    border: 0;
    border-radius:.5em;
    width:50%;
    background: var(--secondary-color);
}
input[type='submit']:hover{
    opacity: 0.7;
}
/*=========================| Footer |=======================*/
footer .footer-content {padding:  3em 0;}
footer .footer-content .footer-nav nav ul li{margin: 1em 2em;}
footer .footer-content .footer-nav nav ul li a{color: var(--black);}
footer .footer-content .social-icons  .fa{
     color: var(--black);
     font-size: 1em;
}
footer .footer-content .social-icons  .fa:hover{color: var(--secondary-coolor);}
footer  .copyright{
    color: var(--black);
    padding: 2em 0;
}
footer .copyright a{color: var(--black);}

@media only screen and (min-width:152px) {
    .site-hero .site-hero-content .hero-image img.brush{
        position: absolute;
        top:20em;
        right:5em; 
    }
}
@media only screen and (min-width:300px) {
    .site-hero .site-hero-content .hero-image img.brush{
        position: absolute;
        top:20em;
        right:11em; 
    }
}
@media only screen and (min-width:700px){
/*=========================| Site Hero |=======================*/    
    .site-hero .site-hero-content{
        display:grid;
        grid-template-columns: repeat(auto-fill,minmax(30em,1fr));  
    }
    .site-hero .site-hero-content .hero-image img.brush{
        position: absolute;
        top:30em;
        right:10em; 
    }
        /*================| About |===================*/
 
    .about .about-content
    {
        display:grid;
        grid-template-columns: repeat(auto-fill,minmax(25em,1fr));
        gap: 5em;
    }
    
    .about .about-content .about-info .exp{
        display: flex;
        gap: 1em;
    }
      /*================| Service |===================*/
    .services .services-content {
        display:grid;
        grid-template-columns: repeat(auto-fill,minmax(15em,1fr));
        gap:2em;
        justify-content: center;
        align-items: center;
    }
/*=========================| Portfolio |=======================*/
    .portfolio .portfolio-content{
        display:grid;
        grid-template-columns: repeat(auto-fill,minmax(20em,1fr));
        gap: 2em;
    }
    footer .footer-content .social-icons  .fa{
        color: var(--black);
        font-size: 1em;
        margin: 2em 1em;
   }
    footer .footer-content .footer-nav nav ul {
        display: flex;
        justify-content: center;
    }
    
}
@media only screen and (min-width:834px){
       .site-hero .hero-text h1{ 
           position: absolute;
           top: 0em;
           left:-4em;
       }
       .hero-text img{
           position:absolute;
           top:10em;
           left:-10em;
           right: 0;
           z-index: -1;
       }
}

@media only screen and (min-width:840px){
    .site-hero .site-hero-content .hero-image img{
        position: absolute;
        top:20em;
          max-height:35em;
    }
    .site-hero .hero-text h1{
        transform: skewY(2deg);
        position: relative;
    }
    .site-hero .site-hero-content .hero-image img.brush{
        position: absolute;
        top:20em;
        right:15em;
        padding: 5em;
        z-index: 5;
        animation: moveArrow 1s alternate-reverse infinite;
    }
}
@media only screen and (min-width:1118px){
    .site-hero .site-hero-content .hero-image img{
        position: absolute;
        top:0;
        right:0;
        bottom: 0;
        max-height: 50em;
        z-index: 2;
    }
    .site-hero .site-hero-content .hero-image img.brush{
        position: absolute;
        top:20em;
        right:25em;
        padding: 5em;
        z-index: 5;
        animation: moveArrow 1s alternate-reverse infinite;
    }
}
@media only screen and (min-width:1216px){
    .ellipse{
        position: absolute;
        left:2em;
     }
}
@media only screen and (min-width:1315px){
    .ellipse{
        position: absolute;
        left:9em;
     }
}
@media only screen and (min-width:1441px){
    .ellipse{
        position: absolute;
        left:17em;
     }
}
@media only screen and (min-width:1507px){
    .ellipse{
        position: absolute;
        left:22em;     
     }
}