*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	
	text-align: center;
	text-decoration: none;

}
body{
    background: lightseagreen;
}
section{
    width: 100%;
    background: cover;
    background-attachment: fixed;
    position: relative;

}
.wrapper{
    position: relative;
    left: 0;
    transition: .5s;
}

header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 40px 70px;
    justify-content: space-between;
    align-content: center;
    display: flex; 
    z-index: 1000;
}
header .sarpe{
    border-radius: 70%;
    border: 2px solid red;
     width: 100px;
    padding: 10px 10px;

     animation: dropShadow1 6s alternate infinite ease-in-out;
    ;
}
@keyframes dropShadow1{
	0%{
	    transform:perspective(200px) translateX(10px) rotateY(10deg);
		filter: drop-shadow(4px 10px 3px rgba(0, 0, 0, .1));
	}
	100%{
		 transform:perspective(200px) translateX(-10px) rotateY(50deg);
		filter: drop-shadow(35px 10px 6px rgba(0, 0, 0, 0.4));
	}
}
    
nav{
    z-index: 1;
    top: 0;
}

nav ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
}

nav ul li{
    font-size: 20px;
    color: black;
    font-family: Rowdies;
    text-transform: uppercase;
    display: inline-block;
}
nav ul li a{
  font-weight: 400;
  letter-spacing: 2px;
  padding: 20px 30px;
  font-size: 40px;
   -webkit-text-fill-color:transparent;
    -webkit-text-stroke: 3px #00FFFF;
  font-family: Rowdies;


}


header .flor{
	width: 100px;
    position: absolute;
    top: 0px;
    left: 20px;
    border: black;

     rotate: -90deg;
    z-index: 20;
  
    transform: rotate(4deg);
    transform-origin: center center;

animation: dropShadow 15s alternate infinite ease-in-out;
    ;
}
@keyframes dropShadow{
	0%, 100%{ transform:translateY(30px);
	    rotate: 0deg;
		filter: drop-shadow(4px 10px 3px rgba(0, 0, 0, .8));
	}
	50%{
		
		transform:translateY(800px);
	}
	100%{
		transform:translateY(300px);
		rotate: 0deg;
		filter: drop-shadow(35px 10px 6px rgba(0, 0, 0, 0.9));
	}
}









.banner{
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background:#F79F81;
    border-radius: 50%; 
    border: 7px dashed #8A0808;


}
.banner img{
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
   
    clip-path: circle(30%);
        padding: 60px;
  
 
}
.banner .content{
    position: relative;
    max-width: 750px;
    text-align: center;
    text-shadow: 3px 3px 2px black;
}



 .content h2{
    font-size: 100px;
   
    font-family: Rowdies;

    
    -webkit-text-fill-color:#00FFFF;

   

    -webkit-text-stroke:3px red;

}
.typewritter{
	position: relative;
}
.typewritter::after{
    content:'<<>>';
   
   border: 2px solid red;
    position: absolute;
    right: -40px;
    color: wheat;
    background-color: white;
    background-size: 100px ,100px, 100px;
    background-position: left, right;
    background-repeat: no-repeat;
   background-image:url('folder-img/ro1.svg'), url('folder-img/ro3.svg');
   
  
    border-radius: 360px;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    width: 110%;
    transition: 1s;
    animation: typing 4s steps(15)  alternate infinite,
               line 1s infinite;
}

@keyframes typing{
	to {

		width: 0%;
	}
}
@keyframes line{
	60%{
        background-image: url(folder-img/ro2.svg), url('folder-img/ro3.svg');
		color: transparent;
	}
}
.banner .content p{
    font-size: 30px;
    color: wheat;
}








.section8{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    background-color: #FFBF00;
    border-radius: 90px;

  

   
}

.section8 .coco1{
    width: 50%;
    height: 900px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-attachment: fixed;
     background-color: lightseagreen;
     background-size:500px;
     background-repeat: no-repeat;
     background-position: left;

     border-radius: 90px;
    background-image:url(folder-img/cat5.svg);
}
.coco1 h3{
    font-size: 30px;
    color: #00FFFF;
    max-width: 300px;
    display: flex;
    padding-top: 60px;
    position: relative;
    margin-top: 0px;
    -webkit-text-fill-color:transparent;
    -webkit-text-stroke: 1px #00FFFF;
    font-family: Rowdies;
    letter-spacing: 2px;


}
.coco1 p{
    font-size: 30px;
    max-width: 400px;
    margin-bottom: 20px;
}

.section8 .coco2{
    width: 50%;
    height: 1200px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background:#FFBF00;
    animation: cat 9s linear infinite ;
    transition: .5s all ease;


  
   
}
@keyframes cat{
    0%{
        transform: translateX(50px);
        transform: translateY(50px);
    }
    50%{
       transform: translateX(-60px);
    }
    100%{
        transform: translateY(50px);
    }
}
.coco2 .how{

    position: absolute;
    -webkit-text-stroke:2px black;
    -webkit-text-fill-color:transparent;
    font-family: Rowdies;
   transform: perspective(200px) rotateY(30deg);
}

.coco2 .bow{
    position: absolute;
    -webkit-text-stroke:2px black;
    -webkit-text-fill-color:transparent;
    font-family: Rowdies;
   transform: perspective(200px) translateY(60px) translateX(70px) translateZ(30px) rotateY(-30deg);
}
.section8 h2{
    font-size: 50px;
    color: tomato;
    text-transform: uppercase;

  
    align-items: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.coco2 img{
   width: 600px;
   padding: 20px;
    top: 20px;
    left: 0;

position: absolute;

}







.section9{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    background-attachment: fixed;
    width: 100%;
    height: auto;
  

}

.section9 .coco3{
    width: 50%;
    height: 400px;
    display: flex;
    position: rel;
    flex-direction: row;
    align-items: center;
    justify-content: center;
background: lightseagreen;

}
.coco3 video{
    border-radius: 90px;
    border: 5px solid white;
}

.section9 .coco4{
    width: 50%;
    height: 400px;
    display: flex;
 
    align-items: center;
    justify-content: center;
   background-color: lightseagreen;
   background-image: url(folder-img/cat2.svg);
   background-size:contain;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: right;



}

.coco4 h2{
    font-size: 40px;
    color: yellow;
    text-transform: uppercase;
    -webkit-text-fill-color:transparent;
    -webkit-text-stroke:2px #82FA58;
    font-family:  Rowdies;
}







.section2{
	width: 100%;
	height: auto;
	background-image: url(folder-img/pet2.jpg);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	 padding-top: 100px;


}


.litere{
  font-size: 100px;
    position: relative;
    font-family: lemon;
    margin: 100px;
    text-transform: capitalize;
    line-height: 80%;
    padding: 60px 0;
    font-weight: 900;
    max-width: 1000px;
    margin: 0 auto;
    background: radial-gradient(#F7FE2E,#5882FA,#173B0B);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    -webkit-text-stroke:2px #81F7F3;
}
p{
	font-size: 55px;
	font-family:Rowdies;
	max-width: 800px;
	left: 2px;

	color: #81F7F3;
	text-shadow: 3px 2px 2px black;
	margin-left: auto;
	margin-right: auto;
   



	padding: 30px;
	margin-top: 140px;
	margin-bottom: 30px;

	
}
.section2{
    width: 100%;
}

.wrap{
	 width: 60vh;border-radius: 90px;
    height: 60vh;
    box-shadow: 10px 10px 20px 10px white;
    margin: 0px auto;
    overflow: hidden;margin-bottom: 70px;
  z-index: 1000;


}

.wrap .holder{
	display: grid;
    grid-template-columns: repeat(8, 100%);
    height: 100%;
    width: 100%;
    animation: slider 20s ease-in-out infinite alternate;
    direction: fill-mode;

}

#si1{
	background-image: url(folder-img/s4.jpg);
	background-position: center;
	background-size: cover;

}

#si2{
	background-image: url(folder-img/qa1.jpg);
	background-position: center;
	background-size: cover;
}

#si3{
	background-image: url(folder-img/em25.jpg);
	background-position: center;
	background-size: cover;
}

#si4{
	background-image: url(folder-img/qem27.jpg);
	background-position: center;
	background-size: cover;
}


#si5{
	background-image: url(folder-img/qem29.jpg);
	background-position: center;
	background-size: cover;
}

#si6{
	background-image: url(folder-img/s4.jpg);
	background-position: center;
	background-size: cover;
}

#si7{
	background-image: url(folder-img/em23.jpg);
	background-position: center;
	background-size: cover;
}

#si8{
	background-image: url(folder-img/em8.jpg);
	background-position: center;
	background-size: cover;
}
.button-holder .button{
    background-color: white;
    width: 15px;
    height: 15px;
    border-radius: 15px;
    display: inline-block;
   
}

.button:hover{
    box-shadow: 0px 0px 7px 4px black;

}
@keyframes slider{
    0%{transform: translateX(0%);}
    10%{transform: translateX(-100%);}
    20%{transform: translateX(-100%);}
    30%{transform: translateX(-200%);}
    40%{transform: translateX(-200%);}
    50%{transform: translateX(-200%);}
    60%{transform: translateX(-300%);}
    70%{transform: translateX(-300%);}
    80%{transform: translateX(-300%);}
    90%{transform: translateX(0%);}
    100%{transform: translateX(0%);}
}



.section3{
	width: 100%;
	height: 400px;
	
	position: relative;
}

.section3 video{
	border-radius: 90px;
	padding: 50px;
	margin-bottom: 50p;
	border-bottom-color: black;
	border-bottom: 6px;
    
}
.section3 .work{
    width: 100%;
    height: 900px;
    background-attachment: fixed;
    background-image: url(folder-img/coc7.svg);
    background-size: 400px;
    background-position: center;
    background-repeat: no-repeat;
}


.section4{
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: radial-gradient(#F7FE2E,#5882FA,#173B0B);
    background-repeat: no-repeat;
    background-size: 300px ,300px;
    background-position: top right, bottom left;
     background-image: url(folder-img/coc13.svg), url(folder-img/hand.png);
  
    margin-left: auto;
    margin-right: auto;

}

.section4 h2{

    text-align: center;
    font-size: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
margin-top: 150px;
    padding-top: 60px;
    text-transform: uppercase;
    font-family: audiowide;
   -webkit-text-fill-color:transparent;
  -webkit-text-stroke:4px white;
  letter-spacing: 3px;

}
.section4 .unu{
    font-size: 30px;
  letter-spacing: 2px;
  margin-top: 20px;
}

/*first-letter*/

p.unu:first-letter{
    font-size: 100px;
        -webkit-text-fill-color:hotpink;
  -webkit-text-stroke:2px black;
  line-height: .55;float: left;
  margin: 10px 0px 10px 0;
  font: normal normal 100px/.5 lemon;
}



 .section4 img{
    filter: drop-shadow(10px 10px 10px red);
    width: 170px;
    margin-top: 50px;
    float: right;
 }
.section5 .work{
    
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    font-size: 60px;
    color: red;
    text-transform: uppercase;

}

.section5{
    z-index: 100;
    position: relative;
    margin-top: 50px;
    width:100%;
    height:1200px;
    background-color: lightseagreen;
    background-image: url(folder-img/coc14.svg), url(folder-img/coc16), url(folder-img/coc16.svg);
    background-size: 200px, 300px, 400px;
    clip-path: circle(50%);
    background-position: top, bottom left, bottom right;
    background-repeat: no-repeat;
    padding: 0px 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
 

}
.section5 video{
    border: 25px solid red;
    border-radius: 190px;
    height: 300px;
    align-items: center;
    justify-content: center;
}


.section6-empty{
    width: 50%;
    float: right;
    height: 500px;
    position: relative;
    background-color: lightseagreen;
    background-image: url(folder-img/coc14.svg), url(folder-img/coc16), url(folder-img/coc16.svg);
    background-size: 200px, 300px, 400px;
    background-position: top, bottom left, bottom right;
    background-repeat: no-repeat;

}



.section7-empty{
    width: 50%;
    height: 500px;
    float: left;


    position: relative;
    background-color: lightgreen;
    background-image: url(folder-img/coc13.svg), url(folder-img/coc12.svg);
    background-size: 300px, 300px, 500px;
    background-position:left, bottom left;
    background-repeat: no-repeat;

}
.section10{
    width: 100%;

    display: flex;
    flex-direction: row;
    padding: 0px 0px;
    align-items: center;
    justify-content: space-between;
}
.col1{
    width: 50%;
   
}
.col1 h2{
    font-size: 50px;
    text-transform: uppercase;

}
.col2 {
   background: red;
   width: 50%;

}
.col2 img{
    position: relative;
    right: 0;
    top: 0;
}
.section11{
    width: 100%;
    height: 500px;
    display: flex;
    flex-direction: row;
    padding: 0px 0px;
    align-items: center;
    justify-content: space-between;
}
.col11{
    width: 50%;
    height: 500px;
    background: red;
  
}
.col11 h2{
    font-size: 50px;
    text-transform: uppercase;

}
.col22 {
height: 400px;
   width: 50%;

}
.col22 img{
    position: relative;

 
}