/*!
Theme Name: Suki Child
Author: Suki WordPress Theme
Author URI: https://sukiwp.com/#about
Description: Suki is a free multi-purpose WordPress theme that is lightweight, fast, highly customizable, and flexible. Build any kind of websites, blog, business, portfolio, WooCommerce storefronts, and also niche websites like Spa, Restaurant, Wedding, Non Profit, Education, Hotel, etc. Fully compatible with Gutenberg, Elementor, Brizy, Visual Composer, Beaver Builder, Divi, SiteOrigin, and other page builders. Tons of design options for customizing typography, colors, layout, and also free built-in Header and Footer builder. Built with SEO in mind, Suki is incredibly fast, mobile optimized, 100% HTML valid, and integrated with Schema.org structured data. Furthermore, Suki supports accessibility, multi-language translation, and RTL languages. Learn more about the full features and also "one click demo import" feature at https://sukiwp.com/.
Version: 1.3.7
Text Domain: suki
*/
* {
  color: #000;
}

:root {
  --primary_color: #00A3FF;
  --secondary_color: #DF9D7C;
  --tertiary_color: #EEDDCC;
  --primary_font_family: "Frank Ruhl Libre";
  --secondary_font_family: "Lato";
  --desktop_size: 1440px;
  --inner_content_size: 1200px;
}

@media (max-width: 768px) {
  .site {
    padding-left: 0;
  }
}
.site h1, .site h2, .site h3, .site h4, .site h5, .site p, .site ul, .site li, .site a {
  margin: 0;
  padding: 0;
  padding-left: 0;
  text-decoration: none;
  list-style-type: none;
}
.site .base-button {
  border: none;
  font-size: 1.125rem;
  font-weight: 900;
  text-transform: uppercase;
  display: flex;
  width: 15rem;
  height: 4rem;
  justify-content: center;
  align-items: center;
  align-self: center;
  border-radius: 0.125rem;
  cursor: pointer;
}
@media (max-width: 768px) {
  .site .base-button {
    font-size: 1rem;
    height: auto;
    padding: 0.5rem 1rem;
  }
}

header {
  background: var(--primary_color);
}
header .container {
  max-width: var(--inner_content_size);
  margin: auto;
  padding: 10px 0;
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-transform: uppercase;
  position: relative;
}
@media (max-width: 768px) {
  header .container {
    justify-content: center;
    gap: 1rem;
  }
}
header .container .logo {
  text-decoration: none;
  color: #FFF;
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 0.115rem;
}
@media (max-width: 768px) {
  header .container .logo {
    letter-spacing: 0.05rem;
  }
}
@media (max-width: 768px) {
  header .container .right-section {
    display: none;
  }
}
header .container .right-section ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 3rem;
}
header .container .right-section ul li a {
  text-decoration: none;
  color: #FFF;
  font-weight: 900;
  letter-spacing: 0.115rem;
}
header .container .header-burger {
  cursor: pointer;
  display: none;
  font-size: 30px;
  color: #fff;
}
@media (max-width: 768px) {
  header .container .header-burger {
    display: block;
  }
}

.menuLeftAndMobile {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 30;
  transition: transform 800ms ease-in-out, width 300ms ease-in-out;
  transform: translateX(0);
  width: 25%;
  text-align: center;
  color: white;
  background-color: var(--primary_color);
  box-shadow: rgba(0, 0, 0, 0.3490196078) 0 5px 15px;
  height: 100%;
  font-size: 1.25rem;
  text-transform: uppercase;
}
@media (max-width: 768px) {
  .menuLeftAndMobile {
    width: 100%;
    padding-top: 5rem;
  }
}
.menuLeftAndMobile.closed {
  transform: translateX(-600px);
  box-shadow: unset;
}
@media (max-width: 768px) {
  .menuLeftAndMobile.closed {
    transform: translateX(-100%);
  }
}
.menuLeftAndMobile .logo {
  text-decoration: none;
  color: #FFF;
  font-weight: 900;
  letter-spacing: 0.115rem;
  font-size: 1.5rem;
}
.menuLeftAndMobile .close-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  color: #fff;
  font-size: 40px;
}
.menuLeftAndMobile ul {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  display: flex;
  margin-top: 3rem;
}
.menuLeftAndMobile ul li {
  cursor: pointer;
}
.menuLeftAndMobile ul li a {
  text-decoration: none;
  color: #FFF;
  font-weight: 900;
  letter-spacing: 0.115rem;
}
.menuLeftAndMobile ul li#services-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.menuLeftAndMobile ul li#services-toggle #icon-arrow {
  color: #fff;
  font-size: 30px;
  transition: transform 200ms ease-in-out, width 300ms ease-in-out;
}
.menuLeftAndMobile ul li#services-toggle #icon-arrow.open {
  transition: transform 200ms ease-in-out, width 300ms ease-in-out;
  transform: rotate(90deg);
}
.menuLeftAndMobile ul .dropdown-menu {
  display: none;
  font-size: 1.15rem;
  gap: 1.5rem;
}
.menuLeftAndMobile ul .dropdown-menu.open {
  display: flex;
}

footer {
  background: var(--primary_color);
}
footer .lower-section {
  color: #FFF;
  padding: 40px;
  text-align: center;
  text-transform: uppercase;
}
@media (max-width: 768px) {
  footer .lower-section {
    padding: 40px 20px;
  }
}
footer .lower-section .nav-footer {
  padding-block: 2rem;
}
@media (max-width: 768px) {
  footer .lower-section .nav-footer {
    padding-block: 1rem;
  }
}
footer .lower-section .nav-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 2.5rem;
}
@media (max-width: 768px) {
  footer .lower-section .nav-footer ul {
    flex-direction: column;
  }
}
footer .lower-section .nav-footer ul li a {
  text-decoration: none;
  color: #FFF;
  font-weight: 900;
  letter-spacing: 0.115rem;
}
footer .lower-section .logo {
  color: #fff;
  text-align: center;
  font-size: 2.5rem;
  opacity: 0.67;
}
@media (max-width: 768px) {
  footer .lower-section .logo {
    font-size: 2rem;
    margin-block: 1rem;
  }
}
footer .lower-section .copyright {
  color: #fff;
  text-align: center;
  font-size: 0.875rem;
  text-transform: capitalize;
  opacity: 0.67;
}

.hero {
  background: url("/wp-content/uploads/2024/02/hero_homepage.png") no-repeat center center/cover;
}
.hero .contain {
  max-width: var(--desktop_size);
  margin: auto;
  width: 800px;
  display: flex;
  flex-direction: column;
}
@media (max-width: 768px) {
  .hero .contain {
    width: 95%;
  }
}
.hero .contain h1, .hero .contain h2 {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 150%;
  text-transform: capitalize;
  color: #fff;
}
@media (max-width: 768px) {
  .hero .contain h1, .hero .contain h2 {
    margin: auto;
    font-size: 1.5rem;
  }
}
.hero .contain a {
  color: white;
  background: var(--primary_color);
  margin-top: 6rem;
}
@media (max-width: 768px) {
  .hero .contain a {
    margin-block: 2rem;
  }
}

.homepage .hero {
  height: 100vh;
  padding-top: 12rem;
}
@media (max-width: 768px) {
  .homepage .hero {
    flex-direction: column;
    padding-top: 3rem;
    height: 70vh;
  }
}

.espace-pro .hero {
  height: 300px;
  padding-top: 3rem;
}
@media (max-width: 768px) {
  .espace-pro .hero {
    height: 200px;
    padding-top: 0;
  }
}

.presentation {
  max-width: var(--inner_content_size);
  margin: 4rem auto;
}
@media (max-width: 768px) {
  .presentation {
    margin: 2rem auto;
  }
}
.presentation h2 {
  font-size: 2.5rem;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
}
@media (max-width: 768px) {
  .presentation h2 {
    font-size: 2rem;
    width: 95%;
    margin: auto;
  }
}
.presentation p {
  font-size: 1.25rem;
  margin-top: 3rem;
  line-height: 180%;
  text-align: justify;
}
@media (max-width: 768px) {
  .presentation p {
    font-size: 1rem;
    width: 95%;
    margin: 1rem auto auto auto;
  }
}
.presentation p .important {
  font-weight: 700;
}

.etapes {
  background: var(--primary_color);
}
.etapes .container {
  max-width: var(--inner_content_size);
  margin: auto;
  display: flex;
  flex-direction: column;
}
.etapes .container .main-title {
  font-size: 2.5rem;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  padding-block: 2rem;
}
@media (max-width: 768px) {
  .etapes .container .main-title {
    font-size: 2rem;
    width: 95%;
    margin: auto;
  }
}
.etapes .container .step-title {
  text-align: center;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 140%;
  text-transform: capitalize;
  color: #fff;
}
@media (max-width: 768px) {
  .etapes .container .step-title {
    font-size: 1.5rem;
  }
}
.etapes.etapes_short .steps-container {
  display: flex;
  justify-content: center;
}
@media (max-width: 768px) {
  .etapes.etapes_short .steps-container {
    flex-direction: column;
    gap: 2rem;
  }
}
.etapes.etapes_short .steps-container li {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.etapes.etapes_short .steps-container li .icon {
  width: 80px;
  height: 80px;
}
.etapes.etapes_short .steps-container li .step-title {
  width: 70%;
}
.etapes.etapes_short a {
  color: var(--primary_color);
  background: #fff;
  margin-block: 2rem;
}
.etapes.etapes_long .step-box {
  display: flex;
  gap: 2rem;
  align-items: center;
  margin-block: 1rem;
}
@media (max-width: 768px) {
  .etapes.etapes_long .step-box {
    flex-direction: column;
    width: 95%;
    margin: 1rem auto;
  }
}
.etapes.etapes_long .step-box .text .step-title {
  text-align: left;
}
.etapes.etapes_long .step-box .text p {
  font-size: 1.25rem;
  margin-top: 1rem;
  line-height: 180%;
  text-align: left;
  color: #fff;
}
@media (max-width: 768px) {
  .etapes.etapes_long .step-box .text p {
    font-size: 1rem;
  }
}
.etapes.etapes_long .step-box img {
  width: 55%;
}
@media (max-width: 768px) {
  .etapes.etapes_long .step-box img {
    width: 100%;
  }
}
.etapes.etapes_long .step-box.reverse img {
  order: -1;
}
@media (max-width: 768px) {
  .etapes.etapes_long .step-box.reverse img {
    order: unset;
  }
}
.etapes.etapes_long .step-box:first-of-type {
  margin-top: 3rem;
}
@media (max-width: 768px) {
  .etapes.etapes_long .step-box:first-of-type {
    margin-top: 0;
  }
}
.etapes.etapes_long .step-box:last-of-type {
  margin-bottom: 5rem;
}

.formulaire {
  max-width: var(--inner_content_size);
  background: var(--primary_color);
  margin: 2rem auto;
  padding: 2rem;
  display: flex;
  gap: 2rem;
  border-radius: 2rem;
}
@media (max-width: 768px) {
  .formulaire {
    width: 95%;
  }
}
.formulaire .gform_wrapper {
  flex: 1;
}
.formulaire .gform_wrapper .gform_title {
  display: none;
}
.formulaire .gform_wrapper .form_name {
  color: #fff;
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
@media (max-width: 768px) {
  .formulaire .gform_wrapper .form_name {
    font-size: 2rem;
  }
}
@media (max-width: 768px) {
  .formulaire .gform_wrapper .ginput_container_name {
    gap: 16px;
  }
}
.formulaire .gform_wrapper .ginput_container_name .name_first, .formulaire .gform_wrapper .ginput_container_name .name_last {
  margin-bottom: 0;
}
.formulaire .gform_wrapper .form_field input, .formulaire .gform_wrapper .form_field textarea {
  background: #FFF;
  border-radius: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
}
.formulaire .gform_wrapper .form_field input::-moz-placeholder, .formulaire .gform_wrapper .form_field textarea::-moz-placeholder {
  color: #949292;
  text-transform: uppercase;
  text-align: center;
  font-weight: 900;
}
.formulaire .gform_wrapper .form_field input::placeholder, .formulaire .gform_wrapper .form_field textarea::placeholder {
  color: #949292;
  text-transform: uppercase;
  text-align: center;
  font-weight: 900;
}
.formulaire .gform_wrapper .gform_button {
  display: block;
  margin: auto;
  font-size: 1.125rem;
  font-weight: 900;
  border-radius: 0.125rem;
  width: 12rem;
  height: 4rem;
  text-transform: uppercase;
  background: #000;
}
@media (max-width: 768px) {
  .formulaire .gform_wrapper .gform_button {
    font-size: 1rem;
  }
}
.formulaire .gform_wrapper .form_file_input .gfield_label {
  border: unset !important;
  clip: unset !important;
  -webkit-clip-path: unset !important;
  clip-path: unset !important;
  height: 3rem !important;
  width: 100% !important;
  margin: unset !important;
  overflow: unset !important;
  padding: 8px !important;
  position: unset !important;
  cursor: pointer;
  color: #949292;
  background-color: #fff;
  text-transform: uppercase;
  text-align: center;
  font-weight: 900;
  border-radius: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}
.formulaire .gform_wrapper .form_file_input .gfield_label .attach-icon {
  color: #949292;
  font-size: 1.25rem;
}
.formulaire .gform_wrapper .form_file_input input[type=file], .formulaire .gform_wrapper .form_file_input .gform_fileupload_rules {
  display: none;
}
.formulaire .form_illustration {
  width: 40%;
  border-radius: 12rem;
}
@media (max-width: 768px) {
  .formulaire .form_illustration {
    display: none;
  }
}

.instagram_banniere {
  display: flex;
  justify-content: center;
  position: relative;
}
.instagram_banniere img {
  flex: 1;
}
.instagram_banniere div {
  display: flex;
  gap: 0.5rem;
  position: absolute;
  left: 50%;
  bottom: -2rem;
  transform: translateX(-50%);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 1.5rem 2.5rem;
  background: #fff;
}
@media (max-width: 768px) {
  .instagram_banniere div {
    font-size: 1rem;
    width: 15.5rem;
    border-radius: 0.625rem;
    padding: 0.5rem 1.5rem;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
}
.instagram_banniere div .follow-us {
  font-size: 1.375rem;
  text-transform: capitalize;
  margin: 0;
}
@media (max-width: 768px) {
  .instagram_banniere div .follow-us {
    font-size: 1rem;
  }
}
.instagram_banniere div a {
  text-decoration: none;
  color: #000;
  font-weight: 700;
  font-size: 1.375rem;
}