@import 'cookies.css';

/* Color */
:root {
  --orange:#FE5700;
  --purple:#552B91;
}

/* Smooth Scroll*/
html {
scroll-behavior:smooth;
}

body {
font-family:"libre-franklin", sans-serif; font-weight:400; font-style:normal; color:#0D0C00; font-size:18px}
a {font-family:"libre-franklin", sans-serif; font-weight:500; font-style:normal; text-decoration:none}
h1 {font-family:"libre-franklin", sans-serif; font-weight:700; font-style:normal}
h2 {font-family:"libre-franklin", sans-serif; font-weight:400; font-style:normal; color:var(--orange); margin-bottom:25px}
.cap {text-transform:capitalize}

/* Navigation */
.menu {position:fixed; width:100%; left:0; top:50px; z-index:100}
.justify-content {justify-content:flex-end !important}
.nav-item {width:166px; height:50px; border-radius:25px; background-color:var(--orange); box-shadow:-10px -10px rgba(254, 87, 0, 0.5); transition:0.3s; text-align:center; margin-right:25px; margin-bottom:25px}
.nav-item:last-child {margin:0}
.nav-item:hover {box-shadow:none; transform:translateX(-20px); transform:translateY(-10px); background-color:#0D0C00; cursor:pointer}
.nav-item a {color:white; font-size:14px; line-height:50px; text-align:center; text-transform:capitalize}

/* Intro */
.intro {position:relative; left:0; right:0; width:100%; height:100vh; margin-bottom:150px; display:flex; align-items:center; background-image:url("../images/intro.jpg"); background-size:cover; background-position:center; background-attachment:fixed}
.logo {width:300px; height:300px; background-color:white; border-radius:50%; padding:25px; box-shadow:-20px -20px rgba(256, 256, 256, 0.5)}
.text-intro h1 {text-align:right; color:white; font-size:3.5rem !important}
.text-intro h2 {text-align:right; color:white; font-size:2.5rem !important}

/* Scroll animation */
.field {display:flex; align-items:center; justify-content:space-around; width:100%; position:absolute; bottom:100px; left:0}
.mouse {width:25px; height:45px; border:2px solid #FFFFFF; border-radius:25px; position:relative;
&::before {content:''; width:8px; height:8px; position:absolute; top:10px; left:50%; transform:translateX(-50%); background-color:#FFFFFF; border-radius:50%; opacity:1; animation:wheel 1s infinite; -webkit-animation:wheel 1s infinite}}
@keyframes wheel {to {opacity:0; top:30px}}
@-webkit-keyframes wheel {to {opacity:0; top:30px}}

/* Call to Action */
.call-1 {width:280px; height:90px; border-radius:45px; background-color:var(--orange); box-shadow:-10px -10px rgba(254, 87, 0, 0.5); transition:0.3s; margin-top:25px; float:right; text-align:center}
.call-1:hover {box-shadow:none; transform:translateX(-20px); transform:translateY(-10px); background-color:#0D0C00; cursor:pointer}
.call-1 a {color:white; font-size:28px; line-height:90px; text-align:center}

/* Corner left */
.corner {height:30px; width:30px; margin-right:20px}
.corner-small {height:15px; width:15px; margin-right:10px}
.call-2 {width:280px; height:90px; border-radius:45px; background-color:white; box-shadow:-10px -10px rgba(256, 256, 256, 0.5); transition:0.3s; margin-top:25px; float:right; text-align:center}
.call-2:hover {box-shadow:none; transform:translateX(-20px); transform:translateY(-10px); background-color:#0D0C00; cursor:pointer}
.call-2 a {color:var(--purple); font-size:28px; line-height:90px; text-align:center}
.call-2 a:hover {color:white !important}

/* Corner left */
.corner {height:30px; width:30px; margin-right:20px}
.corner-small {height:15px; width:15px; margin-right:10px}

/* Imagebox */
.imagebox {background-image:linear-gradient(135deg,rgba(0,0,0,0) 70%,#fe5700 70%); padding-right:30px; padding-bottom:30px; text-align:left; margin-left:0; margin-bottom:25px}
.imagebox2 {background-image:linear-gradient(135deg,rgba(0,0,0,0) 70%,#ffffff 70%); padding-right:30px; padding-bottom:30px; text-align:left; margin-left:0; margin-bottom:25px}

/* prestations */
.prestations {background-color:var(--purple); margin:100px 0; padding:100px 0; color:white}
.prestations h2, h3{color:white}

/* e-tec */
.e-tec {background-color:#f1f1f1; margin-top:100px; padding:100px 0}
.iframe-e-tec {width:100%; height:100%; display:flex; justify-content:center; align-items:center}
.iframe {width:100%; height:720px; border:none}

/* footer */
.footer {background-color:var(--orange); color:white; padding-top:50px}
.footer a {color:white; text-decoration:none}
.footer a:hover {color:#0D0C00}

/* Modal Confidentialités & Impressum */
.modal-header .btn-close {background-color:var(--orange); color:white !important}
.modal-header .btn-close:hover {background-color:#0D0C00}
.modal-dialog {max-width: 90% !important}
.modal-body a {color:var(--orange)}
.btn-primary {border:none; background-color:var(--orange)}
.btn-primary:hover {border:none; background-color:#0D0C00}

/* Media Queries */
@media screen and (max-width:445px) {
.logo {width:200px; height:200px}
}
@media screen and (max-width:795px) {
.mobile {display:block}
.desktop {display:none}
}
@media screen and (min-width:796px) {
.mobile {display:none}
.desktop {display:block}
}
@media screen and (max-width:992px) {
.nav-item {width:120px; height:40px}
.nav-item a {font-size:12px; line-height:40px}
.logo {width:250px; height:250px}
.text-intro h1 {font-size:2.5rem !important}
.text-intro h2 {font-size:2rem !important}
.field {display:none}
}