body, html {height: 100%;margin: 0;background-color: #f2f2f2;font-family: "Roboto", sans-serif;}
html{scroll-behavior: smooth;}
section{padding:5%;}

/* ----------- Navigation ----------- */

nav {position:absolute;z-index:1;width:100%;display:flex;}

.logo{width:60%;}
.logo img{width:15%;padding:2% 8%;}

.menu{width:30%;display:flex;margin:auto;text-align: center;}
.menu a{width:33.33%;padding:2% 4%;text-decoration: none;color:#1a1a1a;text-transform: uppercase;font-weight: 700;margin:auto;}
.menu a:hover{background-color: #1a1a1a;color:#f2f2f2;border-radius: 10px;transition: all 1s ease-out;}

.button{width:10%;margin:auto;padding-right:5%;text-align: center;}
.button a{width:33.33%;padding:2% 4%;text-decoration: none;color:#f2f2f2;text-transform: uppercase;font-weight: 700;margin:auto;}
.button a button{background-color:transparent;border:2px solid #1a1a1a;border-radius: 10px;font-size:1em;text-transform: uppercase;font-weight: 700; padding:4% 8%;color:#1a1a1a;}
.button a button:hover{background-color: #1a1a1a;color:#f2f2f2;cursor: pointer;border:2px solid #1a1a1a;transition: all 1s ease-out;}

/* ----------- Header ----------- */

header {height: 100%;background-color:#f2f2f2;display:flex;}

.hero-text {width:50%;color: #1a1a1a;font-weight: 400;font-size:3em;line-height: 2em;padding:6% 5%;}
header p{font-size: 0.4em;line-height: 1.5em;margin:0;}

.hero-text a{text-decoration: none;padding:2% 8% 2% 0;border-bottom:2px solid #1a1a1a;}
.hero-text a:hover{padding:2% 45% 2% 0;transition: all 1s ease-out;}
.hero-text a button{background-color:transparent;border:none;text-transform: uppercase;font-weight:700;}
.hero-text a button:hover{cursor: pointer;}

.hero-img{width:60%;padding:5%;}
.hero-img img{width:100%;margin:auto;padding-top:10%;}

/* ----------- A propos ----------- */

h2{font-size:10em;text-align: center;text-transform: uppercase;line-height: 0;}
.h2{font-size:10em;text-align: center;text-transform: uppercase;line-height: 0;color:#ffc961;}

.design{width:100%;display:flex;}

.design-card{width:33.33%;margin:2%;}
h3{font-size:3em;text-align: left;text-transform: uppercase;line-height: 1em;font-weight: 300;}
.design-card img{width:100%;}
.annonce{font-size:1.2em;text-align: left;line-height: 1.5em;color:#1a1a1a;font-weight: 500;}
.text{font-size:1.2em;text-align: left;line-height: 1.5em;color:darkgrey;}
.design-card a{text-decoration: none;padding:2% 8% 2% 0;border-bottom:2px solid #1a1a1a;}
.design-card a:hover{padding:2% 45% 2% 0;transition: all 1s ease-out;}
.design-card a button{background-color:transparent;border:none;text-transform: uppercase;font-weight:700;}
.design-card a button:hover{cursor: pointer;}

/* ----------- Advantages ----------- */

.advantages-text{display:flex;}
.advantages-h2{width:70%;}
.advantages-h2 span{color:#ffc961;}
.advantages-p{width:30%;font-size:1.2em;text-align: left;line-height: 1.5em;color:darkgrey;}

.advantages-img img{width:100%;}

.advantages-blocks{display:flex;width:60%;}
.advantages-card{width:33.33%;padding:2%;}
.advantages-card h4{color:darkgrey;text-transform: uppercase;}
.advantages-card p{font-size:1.2em;text-align: left;line-height: 1.5em;}

/* ----------- Process ----------- */

.process-text{display:flex;margin-bottom:5%;}
.process-card-small-01{width:25%;}
.process-card-small-01{font-size:1.2em;text-align: left;line-height: 1.5em;}
.process-card-big{width:50%;}
.process-card-small-02{width:25%;}
.process-card-small-02{font-size:1.2em;text-align: right;line-height: 1.5em;}

.process-table{display:flex;width:70%;margin:auto;}
.process-table-card-01{width:33.33%;padding:2%;border:1px solid darkgrey;}
.process-table-card-01:hover{background:darkgrey;cursor: pointer;transition: all 1s ease-out;}
.process-table-card-02{background-color:transparent;width:33.33%;padding:2%;border:none;}
.process-table h4{font-size:2em;line-height: 0;}
.process-table p{font-size:1.2em;text-transform: uppercase;line-height: 1.5em;}
.process-table ion-icon{margin-top:40%;}

/* ----------- CONTACT ----------- */

.contact-text{display:flex;}
.contact-h2{width:70%;font-size:0.8em;text-align: left;line-height:40em;}
.contact-h2 span{color:#ffc961;}
.contact-p{width:30%;font-size:1.2em;text-align: left;line-height: 1.5em;color:darkgrey;}

.contact-button{width:50%;margin:5% 45%;display:flex;}
form{width:50%;text-decoration: none;padding:2% 8% 2% 0;border:2px solid darkgrey;;margin-right:10%;}
form input{background-color:transparent;border:none;}
.contact-button a{width:50%;text-decoration: none;padding:2% 8% 2% 0;border-bottom:2px solid #1a1a1a;}
.contact-button a:hover{padding:2% 45% 2% 0;transition: all 1s ease-out;}
.contact-button a button{background-color:transparent;border:none;text-transform: uppercase;font-weight: 700;}

.contact-rs{display:flex;}
.contact-rs-left{width:50%;display:flex;}
.contact-rs-left ion-icon{font-size:4em;margin-right:2%;border:2px solid darkgrey;padding:2%;}
.contact-rs-right{width:50%;text-transform: uppercase;font-size:2.5em;}

/* ----------- FOOTER ----------- */

footer{display: flex;}
footer p{width:50%;padding:1% 4%;color:darkgrey;}
.designed{text-align: right;}