
h1
{
font-size:4rem;
font-family:"Trebuchet MS",sans-serif;
}

p
{
color:gray;
font-size:1.2rem;
font-family:"Trebuchet MS",sans-serif;
}
	


h2
{
color:orange;
font-size:2rem;
font-family:"Trebuchet MS",sans-serif;
}

ul
{
font-size:1.2rem;
}

.quotes-call
{
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
flex-wrap:wrap;
height:60px;
width:600px;
}

.call-us
{
display:flex;
justify-content:center;
align-items:center;
height:50px;
width:240px;
background-color:orange;
border:3px solid white;
transform:translate(0%,-50%);
}


	.call-us p
	{
	color:white;
	font-size:1.4rem;
	font-family:"Trebuchet MS",sans-serif;
	}




.window-film
{
height:800px;
width:100%;
background-image:url("images/homepage-background.webp");
background-size:100% 100%;
}

.window-film-main
{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
flex-direction:column;
height:900px;
width:1200px;
margin:0px auto;
}


.window-film-header
{
display:flex;
align-items:center;
justify-content:center;
height:500px;
width:900px;
}


.window-film-pix
{
height:100px;
width:900px;
transform:translate(0%,-200%);
}

.window-film-sect
{
height:500px;
width:1200px;
margin:auto;
}




.solar-benifits
{
height:600px;
width:100%;
margin:0px auto;
background-color:#313333;
}

.window-solar-benifits
{
display:flex;
flex-wrap:wrap;
flex-direction:column;
height:600px;
width:1200px;
margin:0px auto;
}


.solar-image
{
height:400px;
width:400px;
}
	.solar-image img
	{
	height:100%;
	width:100%;
	}
	
.solar-text
{
height:800px;
width:600px;
}

.crawls
{
height:120px;
width:100%;
background-color:#313333;
}

.internal-links
{
display:flex;
flex-wrap:wrap;
flex-direction:column;
height:60px;
width:1200px;
margin:40px auto;
}

.links
{
display:flex;
align-items:center;
justify-content:center;
height:50px;
width:280px;
background-color:orange;
border:5px solid white;
}
	.links p
	{
	color:white;
	}


.before-after
{
height:400px;
width:800px
border:5px solid blue;
}

	.before-after img
	{
	height:100%;
	width:100%;
	}

.after-image
{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
flex-direction:column;
height:100px;
width:1200px;
margin:auto;
}

	.after-image p
	{
	color:orange;
	font-size:3rem;
	}

.before-solar
{
height:600px;
width:100%;
background-color:#313333;
}

.before-window
{
height:600px;
width:1200px;
margin:auto;
}

/*MOBILE*/
@media screen and (max-width:767px){


h1
{
font-size:2rem;
font-family:"Trebuchet MS",sans-serif;
}

p
{
color:gray;
font-size:1.2rem;
font-family:"Trebuchet MS",sans-serif;
}
	


h2
{
color:orange;
font-size:1.2rem;
font-family:"Trebuchet MS",sans-serif;
}

.window-film
{
height:800px;
width:100%;
background-image:url("images/homepage-background.webp");
background-size:100% 80%;
background-repeat:no-repeat;
background-color:#313333;
}


.quotes-call
{
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
flex-wrap:wrap;
height:60px;
width:400px;
transform:translate(0%,-60%);
}

.call-us
{
display:flex;
justify-content:center;
align-items:center;
height:50px;
width:190px;
background-color:orange;
border:3px solid white;
}


	.call-us p
	{
	color:white;
	font-size:1.2rem;
	font-family:"Trebuchet MS",sans-serif;
	}



.window-film-main
{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
flex-direction:row;
height:800px;
width:400px;
margin:0px auto;
}


.window-film-header
{
height:400px;
width:300px;
transform:translate(0%,0%);
}


.window-film-pix
{
height:200px;
width:400px;
transform:translate(0%,-80%);
}


.solar-benifits
{
display:flex;
flex-wrap:wrap;
flex-direction:row;
height:1000px;
width:100%;
margin:0px auto;
background-color:#313333;
}

.window-solar-benifits
{
display:flex;
flex-wrap:wrap;
flex-direction:column;
height:1400px;
width:400px;
margin:0px auto;
}


.solar-image
{
height:400px;
width:400px;
}
	.solar-image img
	{
	height:100%;
	width:100%;
	}
	
.solar-text
{
height:700px;
width:400px;
}


.crawls
{
height:400px;
width:100%;
background-color:#313333;
}

.internal-links
{
display:flex;
flex-wrap:wrap;
flex-direction:column;
height:300px;
width:400px;
margin:auto;
gap:10px;
}

.links
{
display:flex;
align-items:center;
justify-content:center;
height:50px;
width:280px;
margin:auto;
background-color:orange;
border:5px solid white;
}
	.links p
	{
	color:white;
	}


.before-solar
{
height:600px;
width:100%;
background-color:#313333;
}

.before-window
{
height:600px;
width:400px;
margin:auto;
}


.before-after
{
height:400px;
width:400px;
}

	.before-after img
	{
	height:100%;
	width:100%;
	}

.after-image
{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
flex-direction:column;
height:100px;
width:400px;
margin:auto;
}

	.after-image p
	{
	color:orange;
	font-size:2rem;
	}




}


/*TABLE*/
@media screen and (min-width:767px) and (max-width:1024px){



h1
{
font-size:2.6rem;
font-family:"Trebuchet MS",sans-serif;
}

p
{
color:gray;
font-size:1.2rem;
font-family:"Trebuchet MS",sans-serif;
}
	


h2
{
color:orange;
font-size:1.4rem;
font-family:"Trebuchet MS",sans-serif;
}

.window-film
{
height:800px;
width:100%;
background-image:url("images/homepage-background.webp");
background-size:100% 100%;
background-repeat:no-repeat;
background-color:#313333;
}


.quotes-call
{
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
flex-wrap:wrap;
height:60px;
width:400px;
}

.call-us
{
display:flex;
justify-content:center;
align-items:center;
height:50px;
width:190px;
background-color:orange;
border:3px solid white;
}


	.call-us p
	{
	color:white;
	font-size:1.2rem;
	font-family:"Trebuchet MS",sans-serif;
	}



.window-film-main
{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
flex-direction:row;
height:800px;
width:400px;
margin:0px auto;
}


.window-film-header
{
height:200px;
width:600px;
transform:translate(0%,80%);
}


.window-film-pix
{
height:200px;
width:400px;
transform:translate(0%,0%);
}


.solar-benifits
{
display:flex;
flex-wrap:wrap;
flex-direction:row;
height:1400px;
width:100%;
margin:0px auto;
background-color:#313333;
}

.window-solar-benifits
{
display:flex;
flex-wrap:wrap;
flex-direction:column;
height:1400px;
width:400px;
margin:0px auto;
}


.solar-image
{
height:400px;
width:400px;
}
	.solar-image img
	{
	height:100%;
	width:100%;
	}
	
.solar-text
{
height:700px;
width:400px;
}


.crawls
{
height:400px;
width:100%;
background-color:#313333;
}

.internal-links
{
display:flex;
flex-wrap:wrap;
flex-direction:column;
height:300px;
width:400px;
margin:auto;
gap:10px;
}

.links
{
display:flex;
align-items:center;
justify-content:center;
height:50px;
width:280px;
margin:auto;
background-color:orange;
border:5px solid white;
}
	.links p
	{
	color:white;
	}



.before-solar
{
height:600px;
width:100%;
background-color:#313333;
}

.before-window
{
height:600px;
width:400px;
margin:auto;
}


.before-after
{
height:400px;
width:400px;
}

	.before-after img
	{
	height:100%;
	width:100%;
	}

.after-image
{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
flex-direction:column;
height:100px;
width:400px;
margin:auto;
}

	.after-image p
	{
	color:orange;
	font-size:2rem;
	}



}


/*PC===========================*/
@media screen and (min-width:1024px) and (max-width:1440px)
{
h1
{
font-size:4rem;
font-family:"Trebuchet MS",sans-serif;
}

p
{
color:gray;
font-size:1.2rem;
font-family:"Trebuchet MS",sans-serif;
}
	


h2
{
color:orange;
font-size:2rem;
font-family:"Trebuchet MS",sans-serif;
}

.window-film
{
height:800px;
width:100%;
background-image:url("images/homepage-background.webp");
background-size:100% 100%;
background-repeat:no-repeat;
background-color:#313333;
}


.quotes-call
{
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
flex-wrap:wrap;
height:60px;
width:400px;
}

.call-us
{
display:flex;
justify-content:center;
align-items:center;
height:50px;
width:190px;
background-color:orange;
border:3px solid white;
}


	.call-us p
	{
	color:white;
	font-size:1.2rem;
	font-family:"Trebuchet MS",sans-serif;
	}



.window-film-main
{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
flex-direction:row;
height:800px;
width:900px;
margin:0px auto;
}


.window-film-header
{
display:flex;
align-items:center;
justify-content:center;
height:100px;
width:900px;
transform:translate(0%, 140%);
}


.window-film-pix
{
height:200px;
width:900px;
transform:translate(0%,00%);
}


.solar-benifits
{
display:flex;
flex-wrap:wrap;
flex-direction:row;
height:700px;
width:100%;
margin:0px auto;
background-color:#313333;
}

.window-solar-benifits
{
display:flex;
flex-wrap:wrap;
flex-direction:column;
height:600px;
width:900px;
margin:0px auto;
}


.solar-image
{
height:400px;
width:400px;
}
	.solar-image img
	{
	height:100%;
	width:100%;
	}
	
.solar-text
{
height:700px;
width:400px;
}


.crawls
{
height:200px;
width:100%;
background-color:#313333;
}

.internal-links
{
display:flex;
flex-wrap:wrap;
flex-direction:column;
height:140px;
width:600px;
margin:auto;
gap:10px;
}

.links
{
display:flex;
align-items:center;
justify-content:center;
height:50px;
width:280px;
margin:auto;
background-color:orange;
border:3px solid white;
}
	.links p
	{
	color:white;
	}

.before-solar
{
height:600px;
width:100%;
background-color:#313333;
}

.before-window
{
height:600px;
width:900px;
margin:auto;
}


.before-after
{
height:400px;
width:900px;
}

	.before-after img
	{
	height:100%;
	width:100%;
	}

.after-image
{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
flex-direction:column;
height:100px;
width:900px;
margin:auto;
}

	.after-image p
	{
	color:orange;
	font-size:2rem;
	}


}




