@charset "utf-8";

/* CSS Document */

/* ============================================
   FICHIER CSS UNIQUE - Clean Services 64
   Fusion de : style.css, bouton.css, effet.css, 
               form.css, foto.css, foto1.css, text.css
   ============================================ */

/* ==================== IMPORTS & FONTS ==================== */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css?family=Alata&display=swap");

/* ==================== POLICES PERSONNALISÉES ==================== */
.nunito-sans-<uniquifier> {
  font-family: "Nunito Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings: "wdth" 100, "YTLC" 500;
}

.tenor-sans-regular {
  font-family: "Tenor Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.montez-regular {
  font-family: "Montez", cursive;
  font-weight: 400;
  font-style: normal;
}

/* ==================== FONT AWESOME 4.3.0 ==================== */
@font-face {
  font-family: 'FontAwesome';
  src: url('fonts/fontawesome-webfonte0a5.eot?v=4.3.0');
  src: url('fonts/fontawesome-webfontd41d.eot?#iefix&v=4.3.0') format('embedded-opentype'),
       url('fonts/fontawesome-webfonte0a5.html?v=4.3.0') format('woff2'), 
       url('fonts/fontawesome-webfonte0a5.woff?v=4.3.0') format('woff'), 
       url('fonts/fontawesome-webfonte0a5.ttf?v=4.3.0') format('truetype'), 
       url('fonts/fontawesome-webfonte0a5.svg?v=4.3.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* ==================== STYLES GÉNÉRAUX (style.css) ==================== */
*,
*::after,
*::before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  font-size: 62.5%;
}

body {
  font-family: "Poppins", sans-serif;
  line-height: 1.6;
  color: #333;
  overflow-x: hidden; /* Empêche le débordement horizontal */
}

/* ==================== ÉTOILES (style.css) ==================== */
.fa-star:before { content: "\f005"; }
.fa,.far,.fas { font-family: "Font Awesome 5 Free"; }

@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: auto;
  src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/webfonts/fa-solid-900.eot);
  src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),
       url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/webfonts/fa-solid-900.woff2) format("woff2"),
       url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/webfonts/fa-solid-900.woff) format("woff"),
       url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/webfonts/fa-solid-900.ttf) format("truetype"),
       url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/webfonts/fa-solid-900.svg#fontawesome) format("svg");
}

/* ==================== TITRES & TYPOGRAPHIE (style.css + text.css) ==================== */
h1 {
  color: #a91010;
  text-decoration: none;
  letter-spacing: 1px;
}

h2 {
  color: #a91010;
  text-decoration: none;
  letter-spacing: 1px;
}

h3 {
  font-family: "Fira Sans", Arial, sans-serif;
  letter-spacing: 1px;
  text-decoration: none;
  font-size: 1.8rem;
}

h5 {
  font-family: "Fira Sans", Arial, sans-serif;
  letter-spacing: 1px;
  text-decoration: none;
  font-size: 1.3rem;
}

h2, h6 {
  color: #222222;
  font-size: 18px;
  line-height: 150%;
  font-weight: normal;
  margin-top: 0;
}

p {
  font-size: 1.8rem;
  color: #555;
  text-align: justify;
}

.light { color: #FFFFFF; }
.light h2, .light h6 { color: #FFFFFF; }

/* ==================== FOOTER FIXE (style.css) ==================== */
.footer {
  width: 100%;
  height: auto;
  text-align: center;
  background: transparent;
  position: fixed;
  bottom: 0%;
  margin-top: 50%;
  font-size: 9px;
}

/* ==================== BOUTON GLOW (bouton.css) ==================== */
.glow-on-hover {
  width: 220px;
  height: 50px;
  border: none;
  outline: none;
  color: #fff;
  background: #111;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 10px;
}

.glow-on-hover:before {
  content: '';
  background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing 20s linear infinite;
  opacity: 0;
  transition: opacity .3s ease-in-out;
  border-radius: 10px;
}

.glow-on-hover:active { color: #000; }
.glow-on-hover:active:after { background: transparent; }
.glow-on-hover:hover:before { opacity: 1; }

.glow-on-hover:after {
  z-index: -1;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: #111;
  left: 0;
  top: 0;
  border-radius: 10px;
}

@keyframes glowing {
  0% { background-position: 0 0; }
  50% { background-position: 400% 0; }
  100% { background-position: 0 0; }
}

/* ==================== BOUTON STANDARD (style.css) ==================== */
.btn {
  display: inline-block;
  padding: 0.5em 1.5em;
  text-decoration: none;
  border-radius: 50px;
  cursor: pointer;
  outline: none;
  margin-top: 1em;
  text-transform: uppercase;
  font-weight: small;
}

.btn-primary {
  color: #5DD7F8;
  background: #16a083;
}

.btn-primary:hover {
  background: #117964;
  transition: background 0.3s ease-in-out;
}

/* ==================== AUTRES BOUTONS (style.css) ==================== */
#button-2 {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

#button-2 a {
  position: relative;
  transition: all .35s ease-Out;
}

#slide {
  width: 100%;
  height: 100%;
  left: -200px;
  background: #BFC0C0;
  position: absolute;
  transition: all .35s ease-Out;
  bottom: 0;
}

#button-2:hover #slide { left: 0; }
#button-2:hover a { color: #2D3142; }

.button {
  display: inline-flex;
  height: 40px;
  width: 150px;
  border: 2px solid #BFC0C0;
  margin: 20px 20px 20px 20px;
  color: #BFC0C0;
  text-transform: uppercase;
  text-decoration: none;
  font-size: .8em;
  letter-spacing: 1.5px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#container {
  box-shadow: 0px 5px 10px 0px #aaa;
  position: fixed;
  width: 100%;
  background: #fff;
  color: #000;
  opacity: 0.85;
  height: 70px;
  z-index: 12;
}

/* ==================== CONTAINER & UTILITAIRES (style.css) ==================== */
.container {
  background: transparent;
  max-width: 1200px;
  width: 90%;
  margin: auto;
}

/* ==================== SHOWCASE / HERO (style.css) ==================== */
.showcase-area {
  height: 50vh;
  background: linear-gradient(rgba(240, 240, 240, 0.144), rgba(255, 255, 255, 0.336)),
              url("https://clean-services64.fr/images/pays.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.showcase-area1 {
  height: 50vh;
  background: linear-gradient(rgba(240, 240, 240, 0.144), rgba(255, 255, 255, 0.336)),
              url("https://clean-services64.fr/images/pays1.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.showcase-container {
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 1.6rem;
}

.main-title {
  text-shadow: 0px 0px 6px #FFF, 0px 0px 6px #FFF, 0px 0px 6px #FFF, 0px 0px 6px #FFF,
               0px 0px 6px #FFF, 0px 0px 6px #FFF, 0px 0px 6px #FFF, 0px 0px 6px #FFF,
               0px 0px 6px #FFF, 0px 0px 6px #FFF, 0px 0px 6px #FFF, 0px 0px 6px #FFF,
               0px 0px 6px #FFF, 0px 0px 6px #FFF, 0px 0px 6px #FFF, 0px 0px 6px #FFF,
               0px 0px 6px #FFF, 0px 0px 6px #FFF, 0px 0px 6px #FFF, 0px 0px 6px #FFF,
               0px 0px 6px #FFF, 0px 0px 6px #FFF, 0px 0px 6px #FFF, 0px 0px 6px #FFF,
               0px 0px 6px #FFF, 0px 0px 6px #FFF, 0px 0px 6px #FFF, 0px 0px 6px #FFF;
  text-transform: uppercase;
  margin-top: 1.5em;
  font-size: 3em;
  text-align: center;
}

/* ==================== SECTION À PROPOS (style.css) ==================== */
#about {
  padding: 50px 0;
  text-align: justify;
  background: linear-gradient(rgba(240, 240, 240, 0.144), rgba(255, 255, 255, 0.336)),
              url("https://clean-services64.fr/images/bck.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

.about-wrapper {
  background: transparent;
  display: flex;
  flex-wrap: wrap;
}

#about h2 { font-size: 2.3rem; }
#about p { font-size: 1.8rem; color: #555; text-align: justify; }
#about .small { font-size: 1.2rem; color: #666; font-weight: 600; }

.about-img {
  flex: 1 1 400px;
  padding: 30px;
  transform: translateX(150%);
  animation: about-img-animation 1s ease-in-out forwards;
}

@keyframes about-img-animation {
  100% { transform: translate(0); }
}

.about-text {
  flex: 1 1 400px;
  padding: 30px;
  margin: auto;
  transform: translate(-150%);
  animation: about-text-animation 1s ease-in-out forwards;
  text-align: justify;
}

@keyframes about-text-animation {
  100% { transform: translate(0); }
}

.about-img img {
  display: block;
  height: auto;
  max-width: 100%;
  margin: auto;
  object-fit: cover;
  object-position: right;
}

/* ==================== SECTION FOOD (style.css) ==================== */
#food {
  padding: 80px 0;
  background: #fff;
}

#food h2 {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 400;
  margin-bottom: 40px;
  text-transform: uppercase;
  color: #555;
}

.food-container {
  display: flex;
  justify-content: space-between;
}

.food-type {
  flex: 1 1 30%;
  margin: 0 1rem;
  position: relative;
}

.food-type img {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: center;
}

.img-content {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  z-index: 2;
  text-align: center;
  transition: all 0.3s ease-in-out 0.1s;
}

.img-content h3 { color: #fff; font-size: 2.2rem; }
.img-content a { font-size: 1.2rem; }

.img-container::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.871);
  opacity: 0;
  z-index: 1;
  transform: scaleY(0);
  transform-origin: 100% 100%;
  transition: all 0.3s ease-in-out;
}

.img-container:hover::after {
  opacity: 1;
  transform: scaleY(1);
}

.img-container:hover .img-content {
  opacity: 1;
  top: 40%;
}

/* ==================== MENU NOURRITURE (style.css) ==================== */
.food-menu-heading {
  text-align: center;
  font-size: 3.4rem;
  font-weight: 400;
  color: #666;
}

.food-menu-container {
  display: flex;
  flex-wrap: wrap;
  padding: 50px 0px 30px 0px;
}

.food-menu-item {
  flex: 1 1 600px;
  margin-bottom: 3rem;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  overflow: hidden;

}

.food-menu-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.food-img img { transition: transform 0.3s ease-in-out; }
.food-menu-item:hover .food-img img { transform: scale(1.1); }

.food-description { padding: 20px; }
.food-titile { font-size: 1.8rem; color: #222; margin-bottom: 10px; }
.food-description p { font-size: 1.1rem; color: #555; }
.food-price { font-size: 1.4rem; color: #16a083; font-weight: 700; }

/* ==================== TESTIMONIALS (style.css) ==================== */
#testimonials {
  padding: 80px 0;
  background: linear-gradient(rgba(240, 240, 240, 0.144), rgba(255, 255, 255, 0.336)),
              url("https://clean-services64.fr/images/bck.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

.testimonial-title {
  text-align: center;
  font-size: 2.8rem;
  font-weight: 400;
  color: #555;
}

.testimonial-container {
  display: flex;
  justify-content: space-between;
  font-size: 1.4rem;
  padding: 1rem;
}

.testimonial-box {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.testimonial-box:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.customer-photo img {
  display: block;
  width: 150px;
  height: 150px;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  margin: auto;
  border: 4px solid #16a083;
}

.testimonial-text {
  font-size: 1.1rem;
  color: #555;
  line-height: 1.6;
}

/* ==================== FORMULAIRE DE CONTACT (form.css) ==================== */
form input, form textarea {
  display: block;
  margin-top: 25px;
  padding: 10px;
  width: 300px;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 16px;
  border-radius: 5px;
  border-width: 1px;
  border-style: solid;
}

form input[type=submit] { width: auto; }

.contact-container {
  display: flex;
  background: linear-gradient(rgba(240, 240, 240, 0.144), rgba(255, 255, 255, 0.336)),
              url("https://clean-services64.fr/images/ico1.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.contact-img { width: 50%; }
.contact-img img {
  display: block;
  height: 400px;
  width: 100%;
  object-position: center;
  object-fit: cover;
}

.form-container {
  padding: 1rem;
  width: 100%;
  margin: auto;
}

/* ==================== SLIDESHOW PRINCIPAL (foto.css) ==================== */
ul { padding: 0; margin: 0; }
input { display: none; }
label { cursor: pointer; }

.slideshow {
  position: relative;
  max-width: relative;
  margin: 2rem auto;
  border: 10px solid hsla(0,0%,100%,.9);
  box-shadow: 0 2px 6px hsla(0,0%,0%,.4);
}

.slideshow > ul { position: relative; overflow: hidden; }
.slideshow > ul > li {
  display: flex;
  width: 100%;
  height: 100%;
  transform: translate3d(0,0,0);
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 2s cubic-bezier(.4,1,.2,1);
}

.slideshow > ul > li.img1 { left: 0%; }
.slideshow > ul > li.img2 { left: 100%; }
.slideshow > ul > li.img3 { left: 200%; }
.slideshow > ul > li.img4 { left: 300%; }

.slideshow > #slide_img1:checked ~ ul > li,
.slideshow > #pause_img1:checked ~ ul > li { transform: translatex(0%); }

.slideshow > #slide_img2:checked ~ ul > li,
.slideshow > #pause_img2:checked ~ ul > li { transform: translatex(-100%); }

.slideshow > #slide_img3:checked ~ ul > li,
.slideshow > #pause_img3:checked ~ ul > li { transform: translatex(-200%); }

.slideshow > #slide_img4:checked ~ ul > li,
.slideshow > #pause_img4:checked ~ ul > li { transform: translatex(-300%); }

@keyframes slide {
  0%, 13% { transform: translatex(0); }
  25%, 38% { transform: translatex(-100%); }
  50%, 63% { transform: translatex(-200%); }
  75%, 88% { transform: translatex(-300%); }
}

.slideshow > .precedent,
.slideshow > .suivant {
  width: 44px;
  height: 44px;
  margin-top: -22px;
  position: absolute;
  top: 50%;
  z-index: 1;
}

.slideshow > .precedent { left: 1rem; }
.slideshow > .suivant { right: 1rem; }

.slideshow > .precedent > label,
.slideshow > .suivant > label {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  z-index: -1;
  width: inherit;
  height: inherit;
  border-radius: 50%;
  background-color: hsl(0,0%,15%);
}

.slideshow > .precedent > label::after { content: ''; transform: rotate(-135deg); }

.slideshow > .suivant > label::after { content: ''; transform: rotate(45deg); }

.slideshow > .precedent > label::after,
.slideshow > .suivant > label::after {
  height: 20px;
  width: 20px;
  border-width: 5px 5px 0 0;
  border-style: solid;
  border-color: #f2f2f2;
}

.slideshow > .slide:checked ~ .precedent > label,
.slideshow > .slide:checked ~ .suivant > label { opacity: 0; z-index: -1; }

.slideshow > #slide_img1:checked ~ .precedent > label.img4,
.slideshow > #pause_img1:checked ~ .precedent > label.img4,
.slideshow > #slide_img1:checked ~ .suivant > label.img2,
.slideshow > #pause_img1:checked ~ .suivant > label.img2,
.slideshow > #slide_img2:checked ~ .precedent > label.img1,
.slideshow > #pause_img2:checked ~ .precedent > label.img1,
.slideshow > #slide_img2:checked ~ .suivant > label.img3,
.slideshow > #pause_img2:checked ~ .suivant > label.img3,
.slideshow > #slide_img3:checked ~ .precedent > label.img2,
.slideshow > #pause_img3:checked ~ .precedent > label.img2,
.slideshow > #slide_img3:checked ~ .suivant > label.img4,
.slideshow > #pause_img3:checked ~ .suivant > label.img4,
.slideshow > #slide_img4:checked ~ .precedent > label.img3,
.slideshow > #pause_img4:checked ~ .precedent > label.img3,
.slideshow > #slide_img4:checked ~ .suivant > label.img1,
.slideshow > #pause_img4:checked ~ .suivant > label.img1 { opacity: 1; z-index: 1; }

.slideshow > #play_img1:checked ~ .precedent > label.img4,
.slideshow > #play_img1:checked ~ .suivant > label.img2 { animation: anim_fleches 17.2s infinite -2s; }

.slideshow > #play_img1:checked ~ .precedent > label.img1,
.slideshow > #play_img1:checked ~ .suivant > label.img3 { animation: anim_fleches 17.2s infinite 2.3s; }

.slideshow > #play_img1:checked ~ .precedent > label.img2,
.slideshow > #play_img1:checked ~ .suivant > label.img4 { animation: anim_fleches 17.2s infinite 6.6s; }

.slideshow > #play_img1:checked ~ .precedent > label.img3,
.slideshow > #play_img1:checked ~ .suivant > label.img1 { animation: anim_fleches 17.2s infinite 10.9s; }

.slideshow > .slide:checked ~ .precedent > label,
.slideshow > .slide:checked ~ .suivant > label,
.slideshow > .pause:checked ~ .precedent > label,
.slideshow > .pause:checked ~ .suivant > label { animation-play-state: paused; }

@keyframes anim_fleches {
  0%, 24.99% { opacity: 1; z-index: 1; }
  25%, 100% { opacity: 0; z-index: -1; }
}

.slideshow:hover { animation-play-state: paused; }
.slideshow > .play_pause,
.slideshow > .play_pause > label { position: absolute; }
.slideshow > .play_pause { top: 50%; left: 50%; z-index: 1; }

.slideshow > #play_img1:checked ~ .play_pause > .pause,
.slideshow > .slide:checked ~ .play_pause > .play,
.slideshow > .pause:checked ~ .play_pause > .play { display: block; z-index: 1; }

.slideshow > #play_img1:checked ~ .play_pause > .play,
.slideshow > .slide:checked ~ .play_pause > .pause,
.slideshow > .pause:checked ~ .play_pause > .pause { display: none; z-index: -1; }

.slideshow > #play_img1:checked ~ .play_pause > .pause.img1,
.slideshow > #play_img1:checked ~ .play_pause > .pause.img2,
.slideshow > #play_img1:checked ~ .play_pause > .pause.img3,
.slideshow > #play_img1:checked ~ .play_pause > .pause.img4 { opacity: 0; z-index: -1; }

.slideshow > #play_img1:checked ~ .play_pause > .pause.img1 { animation: anim_fleches 17.2s infinite -2s; }
.slideshow > #play_img1:checked ~ .play_pause > .pause.img2 { animation: anim_fleches 17.2s infinite 2.3s; }
.slideshow > #play_img1:checked ~ .play_pause > .pause.img3 { animation: anim_fleches 17.2s infinite 6.6s; }
.slideshow > #play_img1:checked ~ .play_pause > .pause.img4 { animation: anim_fleches 17.2s infinite 10.9s; }

.slideshow > .slide:checked ~ .play_pause > .pause,
.slideshow > .pause:checked ~ .play_pause > .pause { animation-play-state: paused; }

.slideshow > #play_img1:checked ~ ul > li { animation: slide 17.2s infinite; }
.slideshow > #play_img1:checked ~ ul > li,
.slideshow > .pause:checked ~ ul > li { transition: none; }

.slideshow > .play_pause { transition: .4s 0s ease; }
.slideshow > .precedent { transition: .4s .15s ease; }
.slideshow > .suivant { transition: .4s .3s ease; }

.slideshow > .precedent,
.slideshow > .suivant,
.slideshow > .play_pause { opacity: 0; }
.slideshow:hover > .precedent,
.slideshow:hover > .suivant,
.slideshow:hover > .play_pause { opacity: 1; }

.slideshow > .play_pause > label {
  margin-top: -22px;
  margin-left: -22px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transition: .3s ease;
}

.slideshow > .play_pause > .play {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 485 485' style='enable-background:new 0 0 485 485' xml:space='preserve'%3E%3Cg fill='%23fff'%3E%3Cpath d='M413.974 71.026C368.171 25.225 307.274 0 242.5 0S116.829 25.225 71.026 71.026C25.225 116.829 0 177.726 0 242.5s25.225 125.671 71.026 171.474C116.829 459.775 177.726 485 242.5 485s125.671-25.225 171.474-71.026C459.775 368.171 485 307.274 485 242.5s-25.225-125.671-71.026-171.474zM242.5 455C125.327 455 30 359.673 30 242.5S125.327 30 242.5 30 455 125.327 455 242.5 359.673 455 242.5 455z'/%3E%3Cpath d='M181.062 336.575 343.938 242.5l-162.876-94.075z'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.slideshow > .play_pause > .pause {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Cg fill='%23fff'%3E%3Cpath d='M256,0C114.842,0,0,114.842,0,256s114.842,256,256,256s256-114.842,256-256S397.158,0,256,0z M256,465.455 c-115.493,0-209.455-93.961-209.455-209.455S140.507,46.545,256,46.545S465.455,140.507,465.455,256S371.493,465.455,256,465.455z '%3E%3C/path%3E%3Cpath d='M318.061,139.636c-12.853,0-23.273,10.42-23.273,23.273v186.182c0,12.853,10.42,23.273,23.273,23.273 c12.853,0,23.273-10.42,23.273-23.273V162.909C341.333,150.056,330.913,139.636,318.061,139.636z'/%3E%3Cpath d='M193.939,139.636c-12.853,0-23.273,10.42-23.273,23.273v186.182c0,12.853,10.42,23.273,23.273,23.273 c12.853,0,23.273-10.42,23.273-23.273V162.909C217.212,150.056,206.792,139.636,193.939,139.636z'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.slideshow > .puces {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 1;
  font-size: 0;
  text-align: center;
  bottom: .3125rem;
}

.slideshow > .puces > label {
  position: relative;
  display: inline-flex;
  margin: 0 .625rem;
  padding: .5rem;
  border-radius: 50%;
  background-color: hsla(0,0%,0%,.6);
}

.slideshow > .puces > label > .actif_puces {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: 1;
  background-color: hsl(0,0%,100%);
  transition: .3s ease;
  transform: scale(0);
}

.slideshow > #slide_img1:checked ~ .puces > label.img1 > .actif_puces,
.slideshow > #pause_img1:checked ~ .puces > label.img1 > .actif_puces,
.slideshow > #slide_img2:checked ~ .puces > label.img2 > .actif_puces,
.slideshow > #pause_img2:checked ~ .puces > label.img2 > .actif_puces,
.slideshow > #slide_img3:checked ~ .puces > label.img3 > .actif_puces,
.slideshow > #pause_img3:checked ~ .puces > label.img3 > .actif_puces,
.slideshow > #slide_img4:checked ~ .puces > label.img4 > .actif_puces,
.slideshow > #pause_img4:checked ~ .puces > label.img4 > .actif_puces { transform: scale(1); }

.slideshow > #play_img1:checked ~ .puces > label.img1 > .actif_puces { animation: anim_puces 17.2s infinite -2s; }
.slideshow > #play_img1:checked ~ .puces > label.img2 > .actif_puces { animation: anim_puces 17.2s infinite 2.3s; }
.slideshow > #play_img1:checked ~ .puces > label.img3 > .actif_puces { animation: anim_puces 17.2s infinite 6.6s; }
.slideshow > #play_img1:checked ~ .puces > label.img4 > .actif_puces { animation: anim_puces 17.2s infinite 10.9s; }

@keyframes anim_puces {
  0%, 24.99% { transform: scale(1); background-color: hsl(0,0%,100%); }
  25%, 100% { transform: scale(0); background-color: unset; }
}

.slideshow > #play_img1:checked ~ .puces > label > .actif_puces,
.slideshow > .pause:checked ~ .puces > label > .actif_puces { transition: none; }

.slideshow > .slide:checked ~ .puces > label > .actif_puces,
.slideshow > .pause:checked ~ .puces > label > .actif_puces { animation-play-state: paused; }

/* ==================== SLIDESHOW 1 (foto1.css) ==================== */
.slideshow1 {
  position: relative;
  max-width: relative;
  margin: 2rem auto;
  border: 10px solid hsla(0,0%,100%,.9);
  box-shadow: 0 2px 6px hsla(0,0%,0%,.4);
}

.slideshow1 > ul { position: relative; overflow: hidden; }
.slideshow1 > ul > li {
  display: flex;
  width: 100%;
  height: 100%;
  transform: translate3d(0,0,0);
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 2s cubic-bezier(.4,1,.2,1);
}

.slideshow1 > ul > li.img1 { left: 0%; }
.slideshow1 > ul > li.img2 { left: 100%; }
.slideshow1 > ul > li.img3 { left: 200%; }
.slideshow1 > ul > li.img4 { left: 300%; }

.slideshow1 > #slide_img1:checked ~ ul > li,
.slideshow1 > #pause_img1:checked ~ ul > li { transform: translatex(0%); }

.slideshow1 > #slide_img2:checked ~ ul > li,
.slideshow1 > #pause_img2:checked ~ ul > li { transform: translatex(-100%); }

.slideshow1 > #slide_img3:checked ~ ul > li,
.slideshow1 > #pause_img3:checked ~ ul > li { transform: translatex(-200%); }

.slideshow1 > #slide_img4:checked ~ ul > li,
.slideshow1 > #pause_img4:checked ~ ul > li { transform: translatex(-300%); }

.slideshow1 > .precedent,
.slideshow1 > .suivant {
  width: 44px;
  height: 44px;
  margin-top: -22px;
  position: absolute;
  top: 50%;
  z-index: 1;
}

.slideshow1 > .precedent { left: 1rem; }
.slideshow1 > .suivant { right: 1rem; }

.slideshow1 > .precedent > label,
.slideshow1 > .suivant > label {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  z-index: -1;
  width: inherit;
  height: inherit;
  border-radius: 50%;
  background-color: hsl(0,0%,15%);
}

.slideshow1 > .precedent > label::after { content: ''; transform: rotate(-135deg); }
.slideshow1 > .suivant > label::after { content: ''; transform: rotate(45deg); }

.slideshow1 > .precedent > label::after,
.slideshow1 > .suivant > label::after {
  height: 20px;
  width: 20px;
  border-width: 5px 5px 0 0;
  border-style: solid;
  border-color: #f2f2f2;
}

.slideshow1 > .slide:checked ~ .precedent > label,
.slideshow1 > .slide:checked ~ .suivant > label { opacity: 0; z-index: -1; }

.slideshow1 > #slide_img1:checked ~ .precedent > label.img4,
.slideshow1 > #pause_img1:checked ~ .precedent > label.img4,
.slideshow1 > #slide_img1:checked ~ .suivant > label.img2,
.slideshow1 > #pause_img1:checked ~ .suivant > label.img2,
.slideshow1 > #slide_img2:checked ~ .precedent > label.img1,
.slideshow1 > #pause_img2:checked ~ .precedent > label.img1,
.slideshow1 > #slide_img2:checked ~ .suivant > label.img3,
.slideshow1 > #pause_img2:checked ~ .suivant > label.img3,
.slideshow1 > #slide_img3:checked ~ .precedent > label.img2,
.slideshow1 > #pause_img3:checked ~ .precedent > label.img2,
.slideshow1 > #slide_img3:checked ~ .suivant > label.img4,
.slideshow1 > #pause_img3:checked ~ .suivant > label.img4,
.slideshow1 > #slide_img4:checked ~ .precedent > label.img3,
.slideshow1 > #pause_img4:checked ~ .precedent > label.img3,
.slideshow1 > #slide_img4:checked ~ .suivant > label.img1,
.slideshow1 > #pause_img4:checked ~ .suivant > label.img1 { opacity: 1; z-index: 1; }

.slideshow1 > #play_img1:checked ~ .precedent > label.img4,
.slideshow1 > #play_img1:checked ~ .suivant > label.img2 { animation: anim_fleches 17.2s infinite -2s; }
.slideshow1 > #play_img1:checked ~ .precedent > label.img1,
.slideshow1 > #play_img1:checked ~ .suivant > label.img3 { animation: anim_fleches 17.2s infinite 2.3s; }
.slideshow1 > #play_img1:checked ~ .precedent > label.img2,
.slideshow1 > #play_img1:checked ~ .suivant > label.img4 { animation: anim_fleches 17.2s infinite 6.6s; }
.slideshow1 > #play_img1:checked ~ .precedent > label.img3,
.slideshow1 > #play_img1:checked ~ .suivant > label.img1 { animation: anim_fleches 17.2s infinite 10.9s; }

.slideshow1 > .slide:checked ~ .precedent > label,
.slideshow1 > .slide:checked ~ .suivant > label,
.slideshow1 > .pause:checked ~ .precedent > label,
.slideshow1 > .pause:checked ~ .suivant > label { animation-play-state: paused; }

.slideshow1:hover { animation-play-state: paused; }
.slideshow1 > .play_pause,
.slideshow1 > .play_pause > label { position: absolute; }
.slideshow1 > .play_pause { top: 50%; left: 50%; z-index: 1; }

.slideshow1 > #play_img1:checked ~ .play_pause > .pause,
.slideshow1 > .slide:checked ~ .play_pause > .play,
.slideshow1 > .pause:checked ~ .play_pause > .play { display: block; z-index: 1; }
.slideshow1 > #play_img1:checked ~ .play_pause > .play,
.slideshow1 > .slide:checked ~ .play_pause > .pause,
.slideshow1 > .pause:checked ~ .play_pause > .pause { display: none; z-index: -1; }

.slideshow1 > #play_img1:checked ~ .play_pause > .pause.img1,
.slideshow1 > #play_img1:checked ~ .play_pause > .pause.img2,
.slideshow1 > #play_img1:checked ~ .play_pause > .pause.img3,
.slideshow1 > #play_img1:checked ~ .play_pause > .pause.img4 { opacity: 0; z-index: -1; }

.slideshow1 > #play_img1:checked ~ .play_pause > .pause.img1 { animation: anim_fleches 17.2s infinite -2s; }
.slideshow1 > #play_img1:checked ~ .play_pause > .pause.img2 { animation: anim_fleches 17.2s infinite 2.3s; }
.slideshow1 > #play_img1:checked ~ .play_pause > .pause.img3 { animation: anim_fleches 17.2s infinite 6.6s; }
.slideshow1 > #play_img1:checked ~ .play_pause > .pause.img4 { animation: anim_fleches 17.2s infinite 10.9s; }

.slideshow1 > .slide:checked ~ .play_pause > .pause,
.slideshow1 > .pause:checked ~ .play_pause > .pause { animation-play-state: paused; }
.slideshow1 > #play_img1:checked ~ ul > li { animation: slide 17.2s infinite; }
.slideshow1 > #play_img1:checked ~ ul > li,
.slideshow1 > .pause:checked ~ ul > li { transition: none; }

.slideshow1 > .play_pause { transition: .4s 0s ease; }
.slideshow1 > .precedent { transition: .4s .15s ease; }
.slideshow1 > .suivant { transition: .4s .3s ease; }

.slideshow1 > .precedent,
.slideshow1 > .suivant,
.slideshow1 > .play_pause { opacity: 0; }
.slideshow1:hover > .precedent,
.slideshow1:hover > .suivant,
.slideshow1:hover > .play_pause { opacity: 1; }

.slideshow1 > .play_pause > label {
  margin-top: -22px;
  margin-left: -22px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transition: .3s ease;
}

.slideshow1 > .play_pause > .play {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 485 485' style='enable-background:new 0 0 485 485' xml:space='preserve'%3E%3Cg fill='%23fff'%3E%3Cpath d='M413.974 71.026C368.171 25.225 307.274 0 242.5 0S116.829 25.225 71.026 71.026C25.225 116.829 0 177.726 0 242.5s25.225 125.671 71.026 171.474C116.829 459.775 177.726 485 242.5 485s125.671-25.225 171.474-71.026C459.775 368.171 485 307.274 485 242.5s-25.225-125.671-71.026-171.474zM242.5 455C125.327 455 30 359.673 30 242.5S125.327 30 242.5 30 455 125.327 455 242.5 359.673 455 242.5 455z'/%3E%3Cpath d='M181.062 336.575 343.938 242.5l-162.876-94.075z'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.slideshow1 > .play_pause > .pause {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Cg fill='%23fff'%3E%3Cpath d='M256,0C114.842,0,0,114.842,0,256s114.842,256,256,256s256-114.842,256-256S397.158,0,256,0z M256,465.455 c-115.493,0-209.455-93.961-209.455-209.455S140.507,46.545,256,46.545S465.455,140.507,465.455,256S371.493,465.455,256,465.455z '%3E%3C/path%3E%3Cpath d='M318.061,139.636c-12.853,0-23.273,10.42-23.273,23.273v186.182c0,12.853,10.42,23.273,23.273,23.273 c12.853,0,23.273-10.42,23.273-23.273V162.909C341.333,150.056,330.913,139.636,318.061,139.636z'/%3E%3Cpath d='M193.939,139.636c-12.853,0-23.273,10.42-23.273,23.273v186.182c0,12.853,10.42,23.273,23.273,23.273 c12.853,0,23.273-10.42,23.273-23.273V162.909C217.212,150.056,206.792,139.636,193.939,139.636z'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.slideshow1 > .puces {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 1;
  font-size: 0;
  text-align: center;
  bottom: .3125rem;
}

.slideshow1 > .puces > label {
  position: relative;
  display: inline-flex;
  margin: 0 .625rem;
  padding: .5rem;
  border-radius: 50%;
  background-color: hsla(0,0%,0%,.6);
}

.slideshow1 > .puces > label > .actif_puces {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: 1;
  background-color: hsl(0,0%,100%);
  transition: .3s ease;
  transform: scale(0);
}

.slideshow1 > #slide_img1:checked ~ .puces > label.img1 > .actif_puces,
.slideshow1 > #pause_img1:checked ~ .puces > label.img1 > .actif_puces,
.slideshow1 > #slide_img2:checked ~ .puces > label.img2 > .actif_puces,
.slideshow1 > #pause_img2:checked ~ .puces > label.img2 > .actif_puces,
.slideshow1 > #slide_img3:checked ~ .puces > label.img3 > .actif_puces,
.slideshow1 > #pause_img3:checked ~ .puces > label.img3 > .actif_puces,
.slideshow1 > #slide_img4:checked ~ .puces > label.img4 > .actif_puces,
.slideshow1 > #pause_img4:checked ~ .puces > label.img4 > .actif_puces { transform: scale(1); }

.slideshow1 > #play_img1:checked ~ .puces > label.img1 > .actif_puces { animation: anim_puces 17.2s infinite -2s; }
.slideshow1 > #play_img1:checked ~ .puces > label.img2 > .actif_puces { animation: anim_puces 17.2s infinite 2.3s; }
.slideshow1 > #play_img1:checked ~ .puces > label.img3 > .actif_puces { animation: anim_puces 17.2s infinite 6.6s; }
.slideshow1 > #play_img1:checked ~ .puces > label.img4 > .actif_puces { animation: anim_puces 17.2s infinite 10.9s; }

.slideshow1 > #play_img1:checked ~ .puces > label > .actif_puces,
.slideshow1 > .pause:checked ~ .puces > label > .actif_puces { transition: none; }
.slideshow1 > .slide:checked ~ .puces > label > .actif_puces,
.slideshow1 > .pause:checked ~ .puces > label > .actif_puces { animation-play-state: paused; }

/* ==================== TEXTE ANIMÉ (effet.css) ==================== */
dl {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0;
  color: black;
  text-shadow: 0px 0px 6px #FFF, 0px 0px 6px #FFF, 0px 0px 6px rgb(255, 255, 255);
}

dl * {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}

dt {
  --size: 8vmax;
  bottom: 65%;
  width: var(--size) relative;
  height: var(--size);
  font-size: calc(var(--size) - 4vmin);
  opacity: 0;
  transform: translateY(100%);
  animation: dt 100s cubic-bezier(0.23, 1, 0.32, 1) infinite;
}

dt:after {
  content: "";
  position: absolute;
  top: 1vmin;
  left: 0;
  width: 60%;
  height: 100%;
  z-index: -1;
  transform-origin: 100% 100%;
  animation: dt-pseudo 100s cubic-bezier(0.19, 1, 0.22, 1) infinite;
  margin-left: 20%;
}

dt:nth-child(1), dt:nth-child(1):after { animation-delay: 0s; }
dt:nth-child(1):after { background-color: #287091; }
dt:nth-child(3), dt:nth-child(3):after { animation-delay: 10s; }
dt:nth-child(3):after { background-color: #c02626; }
dt:nth-child(5), dt:nth-child(5):after { animation-delay: 20s; }
dt:nth-child(5):after { background-color: #287091; }
dt:nth-child(7), dt:nth-child(7):after { animation-delay: 30s; }
dt:nth-child(7):after { background-color: #c02626; }
dt:nth-child(9), dt:nth-child(9):after { animation-delay: 40s; }
dt:nth-child(9):after { background-color: #287091; }
dt:nth-child(11), dt:nth-child(11):after { animation-delay: 50s; }
dt:nth-child(11):after { background-color: #c02626; }
dt:nth-child(13), dt:nth-child(13):after { animation-delay: 60s; }
dt:nth-child(13):after { background-color: #287091; }
dt:nth-child(15), dt:nth-child(15):after { animation-delay: 70s; }
dt:nth-child(15):after { background-color: #c02626; }
dt:nth-child(17), dt:nth-child(17):after { animation-delay: 80s; }
dt:nth-child(17):after { background-color: #287091; }
dt:nth-child(19), dt:nth-child(19):after { animation-delay: 90s; }
dt:nth-child(19):after { background-color: #c02626; }

dd {
  font-family: Marck Script;
  --size: 2rem;
  top: 64%;
  padding-left: 2rem;
  padding-right: 2rem;
  max-width: 130vmin;
  font-size: calc(var(--size) - 1vmin);
  line-height: 1.2;
  opacity: 0;
  transform: translateY(80%);
  animation: dd 100s cubic-bezier(0.19, 1, 0.22, 1) infinite;
}

dd:nth-child(2) { animation-delay: 2s; }
dd:nth-child(4) { animation-delay: 12s; }
dd:nth-child(6) { animation-delay: 22s; }
dd:nth-child(8) { animation-delay: 32s; }
dd:nth-child(10) { animation-delay: 42s; }
dd:nth-child(12) { animation-delay: 52s; }
dd:nth-child(14) { animation-delay: 62s; }
dd:nth-child(16) { animation-delay: 72s; }
dd:nth-child(18) { animation-delay: 82s; }
dd:nth-child(20) { animation-delay: 92s; }
dd:nth-child(22) { animation-delay: 102s; }

@keyframes dt {
  2.5% { transform: translateY(0); opacity: 1; }
  5% { transform: translateY(0); opacity: 1; }
  7.5% { transform: translateY(2%); opacity: 0; }
}

@keyframes dt-pseudo {
  2.5% { transform: scale(1, 0.1); }
  5% { transform: scale(1, 0.1); }
  7.5% { transform: scale(0, 0.1); }
}

@keyframes dd {
  5% { transform: translateY(0); opacity: 1; }
  10% { transform: translateY(2%); opacity: 0; }
}

/* ==================== VIDÉOS SCROLL (style.css) ==================== */
.holster {
  width: relative;
  height: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-flow: column nowrap;
  font-family: monospace;
}

.clip {
  display: flex;
  overflow: auto;
  outline: 0px dashed lightgray;
  flex: none;
}

.clip.x {
  width: 400px;
  height: 250px;
  flex-flow: row nowrap;
}

.x.mandatory-scroll-snapping {
  scroll-snap-type: x mandatory;
}

.clip > div {
  text-align: center;
  scroll-snap-align: center;
  flex: none;
}

/* ==================== TESTIMONIALS ROTATIFS (text.css) ==================== */
.flexslider a:focus { outline: none; }
.slides,
.flex-direction-nav { margin: 0; padding: 0; list-style: none !important; }
.flexslider { margin: 0; padding: 0; }

.ut-portfolio-gallery-slider .flex-direction-nav a,
.ut-gallery-slider .flex-direction-nav a,
.ut-rotate-quote-alt .flex-direction-nav a,
.ut-rotate-quote .flex-direction-nav a {
  background: rgb(142,202,66);
  background: rgba(142,202,66, 0.85);
}

#le-livre-dor-one .parallax-overlay {
  padding-top: 80px;
  padding-bottom: 60px;
  padding-left: 50px;
  padding-right: 50px;
}

#le-livre-dor-one .ut-offset-anchor { top: -79px; }

.parallax-overlay-pattern.style_one {
  background: linear-gradient(rgba(240, 240, 240, 0.144), rgba(255, 255, 255, 0.336)),
              url("https://clean-services64.fr/9.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: scroll;
}

article .entry-content p { color: #000000; }

.ut-rotate-quote-alt {
  position: relative;
  text-align: center;
  margin: 0 auto !important;
  max-width: 800px;
  overflow: hidden;
}

.ut-rotate-quote .ut-quote-name,
.ut-rotate-quote-alt .ut-quote-name {
  margin-bottom: 20px;
  text-transform: uppercase;
  font-size: 11px;
  display: block;
}

.ut-rotate-quote .flex-direction-nav,
.ut-rotate-quote-alt .flex-direction-nav {
  width: 65px;
  height: 30px;
  position: relative;
  margin: 0 auto;
}

.ut-rotate-quote .flex-direction-nav a,
.ut-rotate-quote-alt .flex-direction-nav a {
  display: block;
  width: 30px;
  height: 30px;
  margin: 0;
  position: absolute;
  bottom: 0;
  z-index: 10;
  overflow: hidden;
  opacity: 1;
  cursor: pointer;
  color: #ffffff;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  transition: all .3s ease;
  text-align: center;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

.ut-rotate-quote .flex-direction-nav a:before {
  font-family: 'FontAwesome';
  font-size: 20px;
  line-height: 30px;
  display: inline-block;
  content: '\f104';
}

.ut-rotate-quote .flex-direction-nav a.flex-next:before { content: '\f105'; }
.ut-rotate-quote-alt .flex-direction-nav a:before {
  font-family: 'FontAwesome';
  font-size: 20px;
  line-height: 30px;
  display: inline-block;
  content: '\f104';
}
.ut-rotate-quote-alt .flex-direction-nav a.flex-next:before { content: '\f105'; }
.ut-rotate-quote .flex-direction-nav .flex-prev { left: 0; }
.ut-rotate-quote .flex-direction-nav .flex-next { right: 0; }
.ut-rotate-quote-alt .flex-direction-nav .flex-prev { left: 0; }
.ut-rotate-quote-alt .flex-direction-nav .flex-next { right: 0; }

/* ==================== RESPONSIVE MEDIA QUERIES (style.css) ==================== */
@media (max-width: 768px) {
  .food-container {
    flex-direction: column;
    align-items: stretch;
  }
  .food-type:not(:last-child) { margin-bottom: 3rem; }
  .food-type { box-shadow: 5px 5px 10px 0 #aaa; }
  .img-container { margin: 0; }
}

@media (max-width: 500px) {
  html { font-size: 65%; }
  .testimonial-container { flex-direction: column; text-align: center; }
  .food-menu-container img { margin: auto; }
  .food-menu-item { flex-direction: column; text-align: center; }
  .form-container { width: 90%; }
  .contact-container { display: flex; flex-direction: column; }
  .contact-img { width: 90%; margin: 3rem auto; }
}

@media (min-width: 769px) and (max-width: 1200px) {
  .img-container h3 { font-size: 1.5rem; }
  .img-container .btn { font-size: 0.7rem; }
}

@media (orientation: landscape) and (max-height: 500px) {
  .showcase-area { height: 50vmax; }
}