*{

margin:0;
padding:0;
box-sizing:border-box;

font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;

}


body{

background:#f5f5f7;

color:#1d1d1f;

}


/* HEADER */


header{

background:white;

padding:25px 8%;

display:flex;

justify-content:space-between;

align-items:center;

border-bottom:1px solid #ddd;

}


.logo{

font-size:28px;

font-weight:600;

}


nav a{

margin-left:25px;

text-decoration:none;

color:#333;

}


nav a:hover{

color:#0071e3;

}






/* BUTTON */


.button{

background:#0071e3;

color:white;

padding:15px 35px;

border-radius:30px;

text-decoration:none;

font-weight:600;

display:inline-block;

}



.button:hover{

background:#0077ed;

}






/* HOME HERO */


.hero{

height:800px;

background:white;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

padding:20px;

}



.hero h1{

font-size:70px;

max-width:1000px;

letter-spacing:-3px;

}



.hero p{

font-size:24px;

max-width:750px;

color:#6e6e73;

margin:30px;

}







/* GENERAL SECTION */


.section{

padding:100px 10%;

text-align:center;

}



.section h2{

font-size:45px;

margin-bottom:25px;

}



.section p{

font-size:20px;

color:#6e6e73;

}








/* HOW IT WORKS */


.process{

background:white;

padding:120px 10%;

text-align:center;

}


.process h2{

font-size:45px;

margin-bottom:60px;

}




.process-wheel{

height:600px;

max-width:900px;

margin:auto;

position:relative;

}




.centre-circle{

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

height:180px;

width:180px;

border-radius:50%;

background:#0071e3;

color:white;

display:flex;

justify-content:center;

align-items:center;

font-size:30px;

font-weight:bold;

}





.step{

position:absolute;

width:230px;

background:#f5f5f7;

padding:25px;

border-radius:25px;

box-shadow:0 10px 30px rgba(0,0,0,.08);

}



.step div{

height:60px;

width:60px;

background:#0071e3;

color:white;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

margin:auto auto 15px;

font-weight:bold;

}



.step-one{

top:0;

left:50%;

transform:translateX(-50%);

}



.step-two{

right:0;

top:50%;

transform:translateY(-50%);

}



.step-three{

bottom:0;

left:50%;

transform:translateX(-50%);

}



.step-four{

left:0;

top:50%;

transform:translateY(-50%);

}









/* PAGE TITLES */


.page-title,
.pricing-hero{

background:white;

padding:120px 10%;

text-align:center;

}


.page-title h1,
.pricing-hero h1{

font-size:60px;

}



.page-title p,
.pricing-hero p{

font-size:22px;

color:#6e6e73;

margin-top:20px;

}








/* PORTFOLIO */


.projects{

padding:100px 10%;

display:flex;

gap:40px;

justify-content:center;

flex-wrap:wrap;

}




.project{

background:white;

width:400px;

padding:40px;

border-radius:30px;

box-shadow:0 10px 30px rgba(0,0,0,.08);

}



.project p{

color:#6e6e73;

margin:20px 0 30px;

}








/* CONTACT */


.contact{

padding:100px 10%;

display:flex;

gap:50px;

}



.contact-info,
.form{

background:white;

padding:50px;

border-radius:30px;

width:50%;

box-shadow:0 10px 30px rgba(0,0,0,.08);

}




.contact-info p{

color:#6e6e73;

line-height:1.7;

margin:20px 0;

}




.form form{

display:flex;

flex-direction:column;

}



input,
textarea{

padding:16px;

border-radius:15px;

border:1px solid #ccc;

margin-bottom:15px;

font-size:16px;

}



textarea{

height:160px;

resize:none;

}



button{

background:#0071e3;

color:white;

border:none;

padding:16px;

border-radius:30px;

cursor:pointer;

font-weight:600;

}



button:hover{

background:#0077ed;

}








/* PRICING */


.pricing-section{

padding:100px 10%;

text-align:center;

}



.pricing-section > h2{

font-size:45px;

margin-bottom:50px;

}





.single-price{


background:white;


max-width:500px;


margin:auto;


padding:50px;


border-radius:35px;


box-shadow:0 15px 40px rgba(0,0,0,.08);


}



.single-price h3{

font-size:30px;

}



.single-price h1{

font-size:55px;

color:#0071e3;

margin:20px;

}



.single-price p{

color:#6e6e73;

margin-bottom:30px;

}




.single-price ul,
.plan-card ul{

list-style:none;

text-align:left;

}



.single-price li,
.plan-card li{

margin:15px 0;

}



.single-price li:before,
.plan-card li:before{

content:"✓ ";

color:#0071e3;

font-weight:bold;

}





.maintenance-title{

margin-top:120px;

}





.plans{

display:flex;

gap:35px;

justify-content:center;

flex-wrap:wrap;

}




.plan-card{

background:white;

width:350px;

padding:45px;

border-radius:35px;

box-shadow:0 15px 40px rgba(0,0,0,.08);

text-align:left;

}



.plan-card h3{

font-size:30px;

margin-bottom:20px;

}



.plan-card h2{

font-size:38px;

color:#0071e3;

}



.plan-card span{

font-size:18px;

color:#6e6e73;

}



.plan-card p{

color:#6e6e73;

margin:20px 0;

line-height:1.6;

}



.popular{

border:3px solid #0071e3;

transform:translateY(-15px);

}








/* QUOTE */


.quote{

background:white;

padding:100px;

text-align:center;

}



.quote h2{

font-size:45px;

}







/* FOOTER */


footer{

background:#1d1d1f;

color:white;

padding:30px;

text-align:center;

}







/* MOBILE */


@media(max-width:800px){


header{

flex-direction:column;

}


nav{

margin-top:15px;

}



.hero h1{

font-size:45px;

}



.contact{

flex-direction:column;

}



.contact-info,
.form{

width:100%;

}



.process-wheel{

height:auto;

display:flex;

flex-direction:column;

gap:30px;

}



.centre-circle{

position:relative;

top:auto;

left:auto;

transform:none;

margin:auto;

}



.step{

position:relative;

top:auto;

left:auto;

right:auto;

bottom:auto;

transform:none;

margin:auto;

}



.single-price,
.plan-card{

width:100%;

}



.popular{

transform:none;

}

/* FINAL CTA */


.quote{


background:white;


padding:120px 10%;


text-align:center;


}



.quote-box{


max-width:900px;


margin:auto;


background:#f5f5f7;


padding:70px;


border-radius:40px;


box-shadow:0 20px 50px rgba(0,0,0,.08);


}





.quote-box h2{


font-size:50px;


letter-spacing:-1px;


margin-bottom:20px;


}





.quote-box p{


font-size:22px;


color:#6e6e73;


max-width:650px;


margin:0 auto 40px;


line-height:1.6;


}





.quote-features{

display:flex;

flex-direction:column;

align-items:flex-start;

gap:18px;

max-width:400px;

margin:0 auto 40px;

}



.quote-features div{


background:white;


padding:18px 25px;


border-radius:20px;


width:100%;


font-size:17px;


box-shadow:0 5px 20px rgba(0,0,0,.05);


text-align:left;


}



.quote-features span{


color:#0071e3;


font-size:22px;


font-weight:bold;


margin-right:15px;


}




.quote-features{


display:flex;


flex-direction:column;


gap:25px;


margin:40px auto;


max-width:500px;


}



.quote-features div{


font-size:18px;


text-align:left;


padding-left:10px;


}



.quote-features span{


color:#0071e3;


font-size:24px;


font-weight:bold;


margin-right:15px;


}


}