*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family: 'Google sans', sans-serif;
background:white;
color:#111;
line-height:1.6;
}

.navbar{
	position: fixed;
	top: 0;
	width: 100%;
	padding: 10px 0px;
	background: #fafafa;
	z-index: 1000;
}
.navbar img{
	height: 50px;
	width: 50px;
}
section{
padding:90px 10%;
}

.light{
background:#fafafa;
}

h1,h2,h3{ 
font-weight:600;
}

h1{
font-size:70px;
margin-bottom:20px;
}

h2{
font-size:36px;
margin-bottom:25px;
}

h3{
font-size:22px;
margin-bottom:10px;
}

p{
color:#444;
font-size:16px;
margin-bottom:20px;
}

.container{
max-width:1200px;
margin:auto;
}

.hero{
display:flex;
align-items:center;
min-height:90vh;
}

.hero-content{
max-width:650px;
}

.buttons{
margin-top:25px;
}

button{
padding:14px 30px;
border:none;
margin-right:10px;
cursor:pointer;
background:black;
color:white;
font-size:14px;
transition:0.3s;
}

button:hover{
opacity:0.8;
}

.secondary{
background:#eee;
color:black;
}

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:40px;
margin-top:40px;
}

.card{
padding:25px;
background:white;
border:1px solid #eee;
transition:0.3s;
}

.card:hover{
transform:translateY(-6px);
}

.timeline{
border-left:2px solid #ddd;
padding-left:25px;
}

.timeline-item{
margin-bottom:40px;
}

.stats{
display:flex;
flex-wrap:wrap;
gap:50px;
margin-top:40px;
}

.stat{
font-size:28px;
font-weight:600;
}

form{
margin-top:30px;
display:grid;
gap:15px;
max-width:500px;
}

input,textarea{
padding:12px;
border:1px solid #ddd;
font-size:14px;
}

textarea{
height:120px;
}

footer{
padding:40px 10%;
border-top:1px solid #eee;
font-size:14px;
color:#555;
}
 

/* Animations */

.fade{
opacity:0;
transform:translateY(40px);
transition:all 1s ease;
}

.fade.show{
opacity:1;
transform:translateY(0);
}




/*
.hero-grid{
	display:grid;
	grid-template-columns:1.2fr 1fr;
	gap:60px;
	align-items:center;
}

.hero-image img{
width:100%;
max-width:420px;
filter:grayscale(100%);
}

.split-section{
display:grid;
grid-template-columns:1fr 1fr;
}

.split-left{
padding:100px 10%;
background:white;
}

.split-right{
padding:100px 10%;
background:#f7f7f7;
}

.info-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:30px;
margin-top:40px;
}

.info-grid h4{
font-size:14px;
text-transform:uppercase;
letter-spacing:1px;
color:#777;
margin-bottom:5px;
}
*/

/* HERO GRID */

.hero-grid{ 
	align-items:center;
	text-align: center;
}
 
.hero-image img{
	height: 100%;
	width:620px; 
}

/* SPLIT SECTION */

.split-section{
	display:grid;
	grid-template-columns:1fr 1fr;
}

.split-left{
padding:100px 10%;
background:white;
}

.split-right{
padding:100px 10%;
background:#f7f7f7;
}

.info-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:30px;
margin-top:40px;
}

.info-grid h4{
font-size:13px;
letter-spacing:1px;
text-transform:uppercase;
color:#777;
margin-bottom:6px;
}

.info-grid div{
	background: white;
	padding: 10px 20px;
	border-radius: 5px;
}

/* BUTTONS */

.buttons{
margin-top:25px;
display:flex;
gap:15px;
flex-wrap:wrap;
}

/* ================= */
/* RESPONSIVE DESIGN */
/* ================= */

@media (max-width:1024px){

.hero-grid{
grid-template-columns:1fr;
text-align:left;
}

.hero-image{
margin-top:30px;
}

.hero-image img{
max-width:350px;
}

.split-section{
grid-template-columns:1fr;
}

.split-left,
.split-right{
padding:70px 8%;
}

}

































@media (max-width:768px){
.navbar{ 
	padding: 10px 30px; 
}
h1{
	font-size:45px;
}

h2{
	font-size:30px;
}

p{
	font-size:16px;
}
.request{
	width: 100%;
}
.hero{
	min-height:auto;
	padding:unset;
	margin-top: 15vh;
}

.hero-grid{ 
	align-items:center;
	text-align: center;
}

.hero-image img{
	width: 387px;
	height: 300px;
}

.info-grid{
	grid-template-columns:1fr;
}

.buttons{
	flex-direction:column;
	align-items:flex-start;
}

button{
	width:220px;
}

}

@media (max-width:480px){

section{
	padding:60px 6%;
}

.hero-image img{
	max-width:unset;
}

}