/* ==== HERO ==== */
.hero{
display:flex;
flex-wrap:wrap;
flex-direction:column;
width:100%;
height:800px;
background-size:cover;
background-image:url("images/homepage-background.webp");
}




.wrap-slogan
{
display:flex;
justify-content:center;
height:200px;
width:1200px;
margin:250px auto;
}

.call-us-border
{
display:flex;
flex-wrap:wrap;
wrap-direction:column;
height:60px;
width:500px;
margin:auto;
}

/* slogan */

.slogan{
display:flex;
justify-content:center;
align-items:center;
text-align:center;
width:800px;
height:auto;
animation-name:slogan;
animation-duration: 3s;
z-index:999;
opacity:1;
transform:translateX(10%)
}

	@keyframes slogan{
	0% {transform:translateX(-30%);skew(350deg); opacity:0}
	100% {transform:translateX(10%);skew(350deg);opacity:1}
			}


.slogan h1{
font-size:3rem;
color:black;
font-family:"Trebuchet MS",sans-serif;
transform:skew(350deg);
}




.slogan-box
{
height:auto;
width:300px;
background-color:#69c9a3;
transform:translate(-50%) skew(350deg);
animation-name:slogan-box;
animation-duration:3s;
opacity:0.6;
border-radius:10px;
}

	@keyframes slogan-box{
	0% {transform:translateX(-0%) skew(350deg); opacity:0}
	100% {transform:translateX(-50%)skew(350deg); opacity:0.6}
			}

.border-call
{
margin:0px auto;
height:100px;
width:400px;
animation-name:call;
animation-duration:2s;
}


.call-us
{
display:flex;
justify-content:center;
align-items:center;
height:50px;
width:200px;
background-color:orange;
margin:0px auto;
}

	
	.call-us p
	{
	color:white;
	font-size:1.2rem;
	font-family:"Trebuchet MS",sans-serif;
	}



/* ==== 768 MOBILE ==== */

@media (max-width:767px){

.hero{
box-sizing:border-box;
width:100%;
height:800px;
background-color:#0f2242;
}

.wrap-slogan
{
display:flex;
justify-content:flex-end;
width:400px;
height:160px;
margin:200px auto;
}

.slogan-box
{
height:160px;
width:100px;
background-color:#69c9a3;
}

.slogan{
box-sizing:border-box;
height:auto;
width:350px;
z-index:999;
}

.slogan h1{
font-size:2rem;
line-height:1.6rem;
}

.call-us-border
{
display:flex;
flex-wrap:wrap;
wrap-direction:row;
gap:10px;
height:60px;
width:400px;
margin:auto;
}


}





/* ==== TABLET 700 ==== */

@media screen and (min-width:768px) and (max-width:1023px) {
 .hero{
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
width:100%;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
height:800px;
}





.slogan{
height:100%;
width:720px;
display:flex;
align-items:center;
justify-content:center;

}


.slogan h1{
font-size:2rem;
line-height:2rem;
}

.wrap-slogan
{
display:flex;
justify-content:center;
align-items:center;
width:720px;
height:200px;
margin:auto;
 }


.slogan-box
{
height:200px;
width:400px;
background-color:#69c9a3;
transform:translate(-90%) skew(350deg);
animation-name:slogan-box;
animation-duration:3s;
}

	@keyframes slogan-box{
	0% {transform:translateX(-0%) skew(320deg); opacity:0}
	100% {transform:translateX(-90%)skew(350deg); opacity:1}
			}

}  


/* Laptop / Small Desktop Styles */
@media screen and (min-width: 1024px) and (max-width: 1440px) {
 .hero{
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
width:100%;
min-height:800px;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}


.slogan{
height:300px;
width:600px;
display:flex;
align-items:center;
justify-content:center;
}


.slogan h1{
font-size:2rem;
line-height:3rem;
}

.wrap-slogan
{
display:flex;
justify-content:center;
align-items:center;
width:1025px;
height:300px;
margin:auto;
 }

.slogan-box
{
height:300px;
width:300px;
background-color:#69c9a3;
transform:translate(-90%) skew(350deg);
animation-name:slogan-box;
animation-duration:3s;
}

	@keyframes slogan-box{
	0% {transform:translateX(-0%) skew(320deg); opacity:0}
	100% {transform:translateX(-90%)skew(350deg); opacity:1}
			}

}