@import url("../css/stylesheet.css");
/* $color-primary: #F5A401;
$color-primary-dark: #e28000; */
/* $color-primary: #1278F6;
$color-tertiary: #002244; */
html {
  box-sizing: border-box;
  scroll-behavior: smooth;
  font-size: 62.5%; }
  @media (min-width: 1800px) {
    html {
      font-size: 75%; } }
  @media (max-width: 1200px) {
    html {
      font-size: 56.25%; } }
  @media (max-width: 900px) {
    html {
      font-size: 50%; } }
  @media (max-width: 600px) {
    html {
      font-size: 37.5%; } }
  @media (max-width: 360px) {
    html {
      font-size: 31.25%; } }

* {
  margin: 0;
  padding: 0; }

*,
*::after,
*::before {
  box-sizing: inherit; }

body {
  width: 100%;
  min-height: 100vh;
  transition: ease-in-out .5s;
  background-color: #FFFFFF; }

.section-container {
  width: 100%;
  padding: 5rem 15rem; }

body {
  font-family: 'Century Gothic';
  font-weight: 200;
  color: #3D3D3D;
  font-size: 1.9rem; }

a {
  text-decoration: none; }

li {
  list-style: none; }

nav a {
  color: #FFFFFF;
  transition: ease-in-out .5s; }
  @media (max-width: 900px) {
    nav a {
      color: #3D3D3D; } }

nav a, footer a {
  font-weight: 700; }

h1 {
  /* background-color: rgba($color-black, .5); */
  font-family: 'Anjel Script';
  font-size: 7.5rem;
  color: #E6E6E6;
  text-align: center;
  padding: 1rem 5rem;
  margin-left: 5rem;
  border-radius: 1rem;
  /* background: rgba(26, 26, 26, 0.5);
    backdrop-filter: blur(1px);
    -moz-backdrop-filter: blur(1px);*/
  position: relative;
  /* &::before, &::after{
            content: '';
            display: inline-block;
            position: absolute;
            bottom: -.2rem;
            left: 3px;
            height: 2px;
            background-color: $color-primary;
            transition: ease-in-out .5s ;               

        }
        &::before{
            left: 7rem;  
            width: calc(45% - (1.6rem));
        }

        &::after{    
            left: 2rem; 
            width: 3rem;
        } */ }

/* h2{
    font-family: 'Anjel Script';

    font-size: 5rem;
    color: $color-dark-gray;
    display: flex;
    margin: 3rem 0;
    position: relative;
    justify-content: space-between;
    align-items: center;

    span{
        display: inline-block;
        height: 5rem;
        width: 5rem;
        margin-right: 3rem;
        border-radius: 50%;
        background-color: $color-primary;
        position: relative;

        &::after{
            content: '';
            width: 50%;
            height: 50%;
            border-radius: 50%;
            background-color: $color-white;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            transition: ease-in-out .5s;
        }    
    }

    p{
        display: inline-block;
        width: 85%;
    }

    &:hover span::after{
        transform-origin: bottom center;
        transform: rotate(90deg);
    }
   
} */
h2 {
  font-family: "Montserrat";
  font-size: 5rem;
  color: #3D3D3D;
  font-weight: 300;
  display: flex;
  margin: 9rem 0;
  position: relative;
  align-items: center;
  /* span{
        display: inline-block;
        height: 5rem;
        width: 5rem;
        margin-right: 3rem;
        border-radius: 50%;
        background-color: $color-primary;
        position: relative;

        &::after{
            content: '';
            width: 50%;
            height: 50%;
            border-radius: 50%;
            background-color: $color-white;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            transition: ease-in-out .5s;
        }    
    } */
  /* &:hover span::after{
        transform-origin: bottom center;
        transform: rotate(90deg);
    } */ }
  h2 p {
    display: inline-block; }

.header-text {
  text-align: center;
  color: #FFFFFF; }
  .header-text h2 {
    font-family: 'Cabin Sketch';
    font-size: 6rem;
    color: #61A360;
    margin: 1rem 0;
    display: flex;
    justify-content: center; }
    .header-text h2 p {
      font-family: 'Century Gothic';
      font-size: 4rem;
      color: #FFFFFF;
      display: inline-block;
      margin-right: 1rem; }
  .header-text p {
    font-weight: 500;
    font-size: 3rem; }

h4 {
  font-size: 2.7rem;
  font-weight: 400;
  margin: 3rem 0; }
  h4::first-letter {
    color: #61A360;
    font-size: 3.6rem;
    font-weight: 600; }

h4.cabinsketch {
  font-family: 'Cabin Sketch';
  font-size: 4rem;
  font-weight: 900; }
  h4.cabinsketch::first-letter {
    color: #61A360;
    font-size: 5rem;
    font-weight: 900; }

footer h3 {
  color: #3D3D3D;
  font-size: 3rem; }

.au_part p, .au_part li {
  color: #3D3D3D;
  line-height: 3.5rem;
  font-size: 2.1rem;
  font-weight: 500; }

.section-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }
  .section-title span {
    display: inline-block;
    text-align: center;
    font-family: "Montserrat";
    font-size: 16px;
    letter-spacing: 1.5rem;
    color: #cccccc;
    text-transform: uppercase;
    display: block;
    font-weight: 300; }
    @media (max-width: 1200px) {
      .section-title span {
        width: 100%;
        text-align: center; } }
  .section-title h2 {
    display: inline-block;
    font-family: "Montserrat";
    width: 100%;
    margin: 2rem 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap; }
    .section-title h2 span {
      display: inline-block;
      font-size: 3.8rem;
      color: #3D3D3D;
      letter-spacing: 10px;
      margin-right: .5rem;
      width: fit-content;
      /*  @include respond(tablet-lanscape){
                margin-right: 1.5rem;   
    
            } */ }
    .section-title h2 .span-thin {
      font-weight: 100; }
    .section-title h2 .span-bold {
      font-weight: 700; }

.cover {
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 100vh;
  width: 100%; }
  .cover .header-text {
    position: absolute;
    top: 40%;
    /*         transform: translateY(-50%);
 */
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    width: 60%; }
    .cover .header-text a {
      color: #FFFFFF;
      padding: .5rem 2rem;
      font-weight: 500;
      transition: all .25s ease-out; }

nav {
  width: 100%;
  height: 10rem;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(61, 61, 61, 0.2);
  box-shadow: 0 5px 10px rgba(61, 61, 61, 0.5);
  backdrop-filter: blur(3rem); }
  @media (max-width: 900px) {
    nav {
      background-color: transparent; } }
  nav div {
    display: flex;
    justify-content: center;
    align-items: center; }
  @media (max-width: 900px) {
    nav {
      display: flex;
      flex-direction: column;
      align-items: flex-end; } }
  nav ul {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center; }
    @media (max-width: 900px) {
      nav ul {
        overflow: scroll; } }
    nav ul li {
      display: inline-block;
      margin: 0 3rem;
      padding: .8rem;
      position: relative; }
      @media (max-width: 900px) {
        nav ul li {
          margin: 5rem 3rem;
          font-size: 5rem;
          display: inline-flex;
          flex-direction: column;
          align-items: center; } }
      nav ul li .nav-section_link {
        position: relative; }
        nav ul li .nav-section_link::before, nav ul li .nav-section_link::after {
          content: '';
          display: inline-block;
          position: absolute;
          bottom: -.2rem;
          left: 3px;
          width: 0%;
          height: 2px;
          background-color: #61A360;
          transition: ease-in-out .5s; }
      nav ul li:hover a::before {
        left: 1.6rem;
        width: calc(100% - (1.6rem)); }
      nav ul li:hover a::after {
        left: 0;
        width: .5rem; }
      nav ul li .nav_logo-box {
        display: inline-block;
        height: 7rem;
        display: flex;
        justify-content: center;
        align-items: center; }
        nav ul li .nav_logo-box::before, nav ul li .nav_logo-box::after {
          content: '';
          display: none; }
        nav ul li .nav_logo-box .nav-logo {
          height: 100%; }
    nav ul .active_tab a {
      color: #61A360; }
    @media (max-width: 900px) {
      nav ul {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        padding: 0;
        flex-direction: column;
        background-color: #FFFFFF;
        margin-left: -100%;
        transition: all 0.5s ease; } }
    @media (max-width: 900px) {
      nav ul.burger-menu {
        margin-left: 0; } }
  nav .nav__burger-menu {
    position: relative;
    top: 1rem;
    right: 2rem;
    width: 7rem;
    height: 8rem;
    padding: 1rem;
    border-radius: .5rem;
    /*background-color: rgba(255, 255, 255, 0.2);*/
    cursor: pointer;
    transition: 0.2s;
    display: none; }
    @media (max-width: 900px) {
      nav .nav__burger-menu {
        display: flex;
        justify-content: center;
        align-items: center; } }
    nav .nav__burger-menu::before {
      content: '';
      position: absolute;
      width: 5rem;
      height: 3px;
      background-color: #FFFFFF;
      transition: 0.2s;
      transform: translateY(-15px);
      box-shadow: 0 15px 0 #FFFFFF; }
    nav .nav__burger-menu::after {
      content: '';
      position: absolute;
      width: 5rem;
      height: 3px;
      background-color: #FFFFFF;
      transition: 0.2s;
      transform: translateY(15px); }
    nav .nav__burger-menu.astive {
      background-color: rgba(255, 255, 255, 0.2); }
      nav .nav__burger-menu.astive::before {
        transform: translateY(0) rotate(45deg);
        box-shadow: 0 0 0 #FFFFFF;
        background-color: #61A360; }
      nav .nav__burger-menu.astive::after {
        transform: translateY(0) rotate(-45deg);
        background-color: #61A360; }

footer {
  width: 100%;
  /* margin-top: 15rem; */
  padding: 3rem;
  background-color: #f1f1f1; }
  footer .footer_line_1 {
    width: 100%;
    padding: 3rem;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap; }
    footer .footer_line_1 .footer_col {
      width: 21%; }
      @media (max-width: 1200px) {
        footer .footer_line_1 .footer_col {
          margin: 3rem 0;
          width: 45%; } }
      @media (max-width: 600px) {
        footer .footer_line_1 .footer_col {
          width: 90%; } }
    footer .footer_line_1 .footer_col_1 {
      display: flex;
      flex-direction: column;
      justify-content: center;
      /* padding-left: 5rem; */ }
      footer .footer_line_1 .footer_col_1 .footer_logo_box {
        width: 56%; }
        footer .footer_line_1 .footer_col_1 .footer_logo_box img {
          width: 100%; }
      footer .footer_line_1 .footer_col_1 .footer_description {
        width: 65%;
        margin-top: 1rem; }
        footer .footer_line_1 .footer_col_1 .footer_description p {
          color: #3D3D3D;
          font-size: 1.7rem;
          margin: 5px; }
    footer .footer_line_1 .footer_col_2 {
      display: flex;
      flex-direction: column;
      justify-content: center; }
      footer .footer_line_1 .footer_col_2 .footer_contact li {
        color: #3D3D3D;
        font-size: 1.5rem;
        margin: 1.5rem 0;
        display: flex;
        align-items: center; }
        footer .footer_line_1 .footer_col_2 .footer_contact li span {
          display: inline-block;
          width: 3rem;
          height: 3rem;
          margin-right: 3rem; }
          footer .footer_line_1 .footer_col_2 .footer_contact li span svg {
            width: 100%;
            height: 100%;
            fill: #3D3D3D; }
    footer .footer_line_1 .footer_col_3 {
      display: flex;
      flex-direction: column;
      justify-content: center; }
      footer .footer_line_1 .footer_col_3 .footer_speed_link {
        display: flex;
        flex-direction: column; }
        footer .footer_line_1 .footer_col_3 .footer_speed_link a {
          color: #3D3D3D;
          font-size: 1.5rem;
          margin: 1.5rem 0;
          transition: ease-in-out .5s; }
          footer .footer_line_1 .footer_col_3 .footer_speed_link a:hover {
            transform: translateX(3%);
            color: #61A360; }
    footer .footer_line_1 .footer_col_4 {
      display: flex;
      flex-direction: column;
      justify-content: center; }
      footer .footer_line_1 .footer_col_4 .footer_contact {
        display: flex; }
        footer .footer_line_1 .footer_col_4 .footer_contact li {
          color: #3D3D3D;
          margin: 1.5rem 0;
          display: flex;
          align-items: center; }
          footer .footer_line_1 .footer_col_4 .footer_contact li span {
            display: inline-block;
            width: 3.6rem;
            height: 3.6rem;
            margin-right: 2.7rem;
            transition: ease-in-out .5s; }
            footer .footer_line_1 .footer_col_4 .footer_contact li span svg {
              width: 100%;
              height: 100%;
              fill: #3D3D3D;
              transition: ease-in-out .5s; }
              footer .footer_line_1 .footer_col_4 .footer_contact li span svg:hover {
                transform: translateY(-10%); }
            footer .footer_line_1 .footer_col_4 .footer_contact li span .linkedin:hover {
              fill: #25b5f8; }
            footer .footer_line_1 .footer_col_4 .footer_contact li span .facebook:hover {
              fill: #3a8bf5; }
            footer .footer_line_1 .footer_col_4 .footer_contact li span .instagram:hover {
              fill: #f84480; }
      footer .footer_line_1 .footer_col_4 .new_letter_box {
        width: 80%; }
        footer .footer_line_1 .footer_col_4 .new_letter_box span {
          color: #3D3D3D;
          font-size: 1.8rem; }
        footer .footer_line_1 .footer_col_4 .new_letter_box form {
          width: 100%;
          margin-top: 1rem; }
          footer .footer_line_1 .footer_col_4 .new_letter_box form .form_field {
            width: 100%;
            height: 4rem;
            display: flex;
            justify-content: center;
            align-items: center; }
            footer .footer_line_1 .footer_col_4 .new_letter_box form .form_field input {
              width: 80%;
              height: 100%;
              padding: .8rem;
              border: none;
              border-top-left-radius: 3px;
              border-bottom-left-radius: 3px;
              outline: none;
              font-family: 'nunito';
              color: #3D3D3D;
              font-size: 1.6rem; }
            footer .footer_line_1 .footer_col_4 .new_letter_box form .form_field span {
              width: 20%;
              height: 100%;
              background-color: #3D3D3D;
              display: flex;
              justify-content: center;
              align-items: center;
              border: none;
              border-top-right-radius: 3px;
              border-bottom-right-radius: 3px;
              transition: ease-in-out .5s; }
              footer .footer_line_1 .footer_col_4 .new_letter_box form .form_field span svg {
                height: 60%;
                fill: #FFFFFF;
                transition: ease-in-out .5s; }
              footer .footer_line_1 .footer_col_4 .new_letter_box form .form_field span:hover {
                background-color: #61A360; }
                footer .footer_line_1 .footer_col_4 .new_letter_box form .form_field span:hover svg {
                  transform: rotate(15deg); }
  footer .footer_line_2 {
    width: 100%;
    padding: 0 6rem;
    display: flex;
    justify-content: center;
    align-items: center; }
    footer .footer_line_2 .copyright {
      width: 80%;
      padding: 1rem 2rem;
      border-top: 1px solid #cacaca;
      text-align: center; }
      footer .footer_line_2 .copyright span {
        color: #3D3D3D;
        font-size: 1.5rem; }

@media (max-width: 1200px) {
  .section-container {
    padding: 5rem 3rem; } }

.section-container li {
  font-weight: 100;
  line-height: 4rem;
  padding-left: 2rem;
  position: relative;
  transition: ease-in-out .2s; }
  .section-container li::before {
    content: '';
    position: absolute;
    height: 1rem;
    width: 1rem;
    top: 1.5rem;
    left: 0;
    background-color: #61A360;
    clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
    transform: rotate(45deg);
    transition: ease-in-out .2s; }

.section-container .section-contain-style-1 {
  width: 100%;
  margin: 10rem auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: start;
  flex-wrap: wrap;
  /* .section_img-box-spc{
            position: relative;
            & img{
                width: 80%;
            }
            .img-1-spc{
                position: absolute;
                left: 0;
                top: 0;
            }

            .img-2-spc{
                position: absolute;
                right: 0;
                bottom: 0;
                z-index: 5;
            }
        } */ }
  @media (max-width: 1200px) {
    .section-container .section-contain-style-1 {
      padding: 5rem 5rem;
      margin: 5rem auto 0 auto; } }
  @media (max-width: 900px) {
    .section-container .section-contain-style-1 {
      justify-content: center; } }
  .section-container .section-contain-style-1 .section_text-box {
    width: 48%;
    padding: 2rem;
    text-align: justify;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(6px);
    -moz-backdrop-filter: blur(6px);
    position: relative;
    z-index: 5;
    transition: ease-in-out .5s; }
    @media (max-width: 900px) {
      .section-container .section-contain-style-1 .section_text-box {
        width: 100%;
        padding: 0;
        margin: 3rem 0; } }
    .section-container .section-contain-style-1 .section_text-box p {
      font-size: 2rem;
      line-height: 3rem;
      font-weight: 300; }
      .section-container .section-contain-style-1 .section_text-box p span {
        font-weight: 700; }
    .section-container .section-contain-style-1 .section_text-box a:hover {
      color: #1D1D1D; }
  .section-container .section-contain-style-1 .section_text-box-effect-1::after, .section-container .section-contain-style-1 .section_text-box-effect-1::before {
    content: '';
    width: 3rem;
    height: 4rem;
    background-color: #61A360;
    position: absolute;
    transition: ease-in-out .5s; }
  .section-container .section-contain-style-1 .section_text-box-effect-1::after {
    top: 0;
    left: 0;
    clip-path: polygon(100% 0, 100% 1px, 1px 1px, 1px 100%, 0 100%, 0 0); }
  .section-container .section-contain-style-1 .section_text-box-effect-1::before {
    bottom: 0;
    right: 0;
    clip-path: polygon(100% 0, 100% 1px, 1px 1px, 1px 100%, 0 100%, 0 0);
    transform: rotate(180deg); }
  .section-container .section-contain-style-1 .section_text-box-effect-1:hover::before {
    width: 10rem;
    height: 11rem; }
  .section-container .section-contain-style-1 .section_text-box-effect-1:hover::after {
    width: 10rem;
    height: 11rem; }
  .section-container .section-contain-style-1 .section_text-box-effect-2::after, .section-container .section-contain-style-1 .section_text-box-effect-2::before {
    content: '';
    width: 3rem;
    height: 4rem;
    background-color: #61A360;
    position: absolute;
    transition: ease-in-out 1s; }
  .section-container .section-contain-style-1 .section_text-box-effect-2::after {
    top: 0;
    left: 0;
    width: 5%;
    height: 15%;
    clip-path: polygon(100% 0, 100% 1px, 1px 1px, 1px 100%, 0 100%, 0 0); }
  .section-container .section-contain-style-1 .section_text-box-effect-2::before {
    bottom: 0;
    right: 0;
    width: 5%;
    height: 15%;
    clip-path: polygon(100% 0, 100% 1px, 1px 1px, 1px 100%, 0 100%, 0 0);
    transform: rotate(180deg); }
  .section-container .section-contain-style-1 .section_text-box-effect-2:hover::after {
    width: 100%;
    height: 100%; }
  .section-container .section-contain-style-1 .section_text-box-effect-2:hover::before {
    width: 100%;
    height: 100%; }
  .section-container .section-contain-style-1 .biographie-text-box p {
    line-height: 3.5rem;
    font-weight: 200;
    letter-spacing: 1px;
    font-size: 1.8rem; }
  .section-container .section-contain-style-1 .biographie-text-box .biographie-text-header {
    margin-bottom: 3rem; }
    .section-container .section-contain-style-1 .biographie-text-box .biographie-text-header h3 {
      font-size: 3.9rem;
      font-weight: 300; }
    .section-container .section-contain-style-1 .biographie-text-box .biographie-text-header span {
      font-weight: 700;
      letter-spacing: .6rem; }
  .section-container .section-contain-style-1 .philosophie-text-box {
    width: 50%; }
    @media (max-width: 900px) {
      .section-container .section-contain-style-1 .philosophie-text-box {
        width: 100%; } }
    .section-container .section-contain-style-1 .philosophie-text-box h2 {
      justify-content: start;
      margin: 1rem 0; }
      .section-container .section-contain-style-1 .philosophie-text-box h2 span {
        font-size: 3rem; }
        @media (max-width: 900px) {
          .section-container .section-contain-style-1 .philosophie-text-box h2 span {
            font-size: 3rem; } }
    .section-container .section-contain-style-1 .philosophie-text-box p {
      font-family: "Montserrat";
      line-height: 2.8rem;
      font-weight: 300;
      font-size: 1.7rem;
      color: #3D3D3D;
      text-align: justify; }
      @media (max-width: 900px) {
        .section-container .section-contain-style-1 .philosophie-text-box p {
          font-size: 2rem;
          line-height: 4rem; } }
    .section-container .section-contain-style-1 .philosophie-text-box .philosophie-span {
      font-family: "Montserrat";
      display: inline-block;
      font-size: 1.7rem;
      font-weight: 700;
      color: #3D3D3D; }
  .section-container .section-contain-style-1 .choose-us-text-box h2 {
    text-align: justify;
    justify-content: start; }
  .section-container .section-contain-style-1 .section_img-box {
    width: 48%; }
    @media (max-width: 900px) {
      .section-container .section-contain-style-1 .section_img-box {
        width: 100%; } }
    .section-container .section-contain-style-1 .section_img-box img {
      width: 100%; }
  .section-container .section-contain-style-1 .biographie-img-box {
    height: 69rem;
    position: relative;
    background-image: url(../../img/Photo.jpg);
    background-size: cover;
    background-repeat: no-repeat; }
    @media (max-width: 900px) {
      .section-container .section-contain-style-1 .biographie-img-box {
        margin: 5rem 0;
        width: 100%; } }
  .section-container .section-contain-style-1 .eq-img-box {
    position: relative; }
    .section-container .section-contain-style-1 .eq-img-box::before {
      content: '';
      width: 100%;
      height: 98%;
      position: absolute;
      top: 0;
      left: 0;
      clip-path: polygon(25% 0%, 100% 0, 100% 76%, 75% 100%, 0 100%, 0 25%);
      background-color: #61A360;
      transition: ease-in-out .5s; }
    .section-container .section-contain-style-1 .eq-img-box img {
      clip-path: polygon(25% 0%, 100% 0, 100% 76%, 75% 100%, 0 100%, 0 25%); }
    .section-container .section-contain-style-1 .eq-img-box:hover::before {
      transform: translate(-3%, -5%); }
  @media (max-width: 900px) {
    .section-container .section-contain-style-1 .durability-img-box {
      margin: 3rem 0; } }
  .section-container .section-contain-style-1 .durability-img-box img {
    width: 100%;
    clip-path: polygon(25% 0%, 100% 0, 100% 76%, 75% 100%, 0 100%, 0 25%); }
  .section-container .section-contain-style-1 .durability-img-box:hover::before {
    transform: translate(-3%, -5%); }
  .section-container .section-contain-style-1 .philosophie-img-box {
    width: 48%;
    height: 35rem;
    background-image: url(../img/13.1.jpg);
    background-size: cover;
    background-repeat: no-repeat; }
    @media (max-width: 900px) {
      .section-container .section-contain-style-1 .philosophie-img-box {
        margin: 5rem 0;
        width: 100%; } }
    .section-container .section-contain-style-1 .philosophie-img-box img {
      width: 100%; }
  @media (max-width: 900px) {
    .section-container .section-contain-style-1 .citation-img-box {
      margin: 3rem 0; } }

.section-container .section-contain-style-2 {
  width: 100%;
  padding: 3rem;
  position: relative;
  transition: ease-in-out .5s;
  /* display: flex;
        align-items: center;
        justify-content: center; */ }
  .section-container .section-contain-style-2 p {
    line-height: 4rem;
    font-weight: 100;
    text-align: justify; }

.section-container .quote-text-box {
  padding: 5rem; }
  .section-container .quote-text-box p {
    width: 100%;
    font-size: 2.5rem;
    font-weight: 500;
    color: #3D3D3D;
    text-align: center;
    display: flex;
    align-items: center; }
    @media (max-width: 900px) {
      .section-container .quote-text-box p {
        font-size: 2rem; } }
    .section-container .quote-text-box p span {
      display: inline-block;
      width: 9rem;
      height: 9rem;
      margin: 3rem; }
      @media (max-width: 1200px) {
        .section-container .quote-text-box p span {
          width: 8rem;
          height: 8rem;
          margin: 1rem; } }
      @media (max-width: 900px) {
        .section-container .quote-text-box p span {
          width: 12rem;
          height: 12rem; } }
      .section-container .quote-text-box p span svg {
        width: 100%;
        height: 100%;
        fill: #3D3D3D; }

.section-container .au_part_6 .au_part_6_contain {
  width: 100%;
  height: max-content;
  margin-top: 4rem;
  padding: 5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; }
  @media (max-width: 1200px) {
    .section-container .au_part_6 .au_part_6_contain {
      justify-content: center; } }
  .section-container .au_part_6 .au_part_6_contain .team_member {
    width: 33rem;
    height: 36rem;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    margin: 3rem 2rem; }
    @media (max-width: 900px) {
      .section-container .au_part_6 .au_part_6_contain .team_member {
        width: 75%;
        height: 40rem;
        margin: 5rem 0; } }
    .section-container .au_part_6 .au_part_6_contain .team_member .name_and_title {
      width: 100%;
      background-color: rgba(0, 0, 0, 0.6);
      position: absolute;
      bottom: 10%;
      color: #FFFFFF;
      padding: 1rem; }
  .section-container .au_part_6 .au_part_6_contain .team_member_1 {
    background-image: url(../../img/Photo_1.jpg); }
  .section-container .au_part_6 .au_part_6_contain .team_member_2 {
    background-image: url(../../img/Photo_2.jpg); }
  .section-container .au_part_6 .au_part_6_contain .team_member_3 {
    background-image: url(../../img/Photo_3.jpg); }
  .section-container .au_part_6 .au_part_6_contain .au_part_5_img_box {
    width: 45%;
    height: 66rem;
    position: relative;
    background-image: url(../../img/Photo.jpg);
    background-size: cover;
    background-repeat: no-repeat; }

.section-container .section-contain-style-4 {
  padding: 0rem 7rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; }
  .section-container .section-contain-style-4 .section-service-intro {
    width: 31%; }
    .section-container .section-contain-style-4 .section-service-intro-title {
      align-items: start; }
      .section-container .section-contain-style-4 .section-service-intro-title span {
        display: inline-block;
        text-align: justify;
        width: 22rem;
        font-family: "Montserrat";
        font-size: 16px;
        letter-spacing: 2rem;
        color: #cccccc;
        text-transform: uppercase;
        display: block;
        font-weight: 300; }
        @media (max-width: 900px) {
          .section-container .section-contain-style-4 .section-service-intro-title span {
            width: 100%; } }
      .section-container .section-contain-style-4 .section-service-intro-title h2 {
        display: inline-block;
        font-family: "Montserrat";
        width: 100%;
        margin: 2rem 0; }
        .section-container .section-contain-style-4 .section-service-intro-title h2 span {
          font-size: 3.8rem;
          color: #3D3D3D;
          width: 100%;
          letter-spacing: 10px; }
        .section-container .section-contain-style-4 .section-service-intro-title h2 .span-thin {
          font-weight: 100; }
        .section-container .section-contain-style-4 .section-service-intro-title h2 .span-bold {
          font-weight: 700; }
    .section-container .section-contain-style-4 .section-service-intro p {
      font-family: "Montserrat";
      text-align: justify;
      font-weight: 300;
      font-size: 16px;
      line-height: 1.7;
      color: gray; }
  .section-container .section-contain-style-4 .section_img-box {
    width: 55%; }
    .section-container .section-contain-style-4 .section_img-box img {
      width: 100%; }

.section-container .section-contain-style-5 .action-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; }
  @media (max-width: 900px) {
    .section-container .section-contain-style-5 .action-box {
      justify-content: center; } }
  .section-container .section-contain-style-5 .action-box .diagramme {
    width: 30%; }
    .section-container .section-contain-style-5 .action-box .diagramme img {
      width: 100%;
      height: 100%; }
    @media (max-width: 900px) {
      .section-container .section-contain-style-5 .action-box .diagramme {
        width: 60%; } }

.section-container .section-contain-style-5 .action-img {
  margin: 10rem 0;
  width: 100%;
  height: 70rem;
  background-size: cover;
  background-repeat: no-repeat;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, white 100%), url(../../img/04.jpg); }

/* @import "layout/cover";
@import "layout/services";
@import "layout/about_us";
@import "layout/contact";
@import "layout/realisations";
 */
.agency_cover {
  width: 100%;
  height: 75vh;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 100%, transparent 10%), url(../../img/home_img_4.jpg);
  background-size: cover;
  background-position: bottom;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 5rem; }
  @media (max-width: 900px) {
    .agency_cover {
      width: 100%;
      /* height: 30%;
        top: 0; */ } }

.our-team_cover {
  width: 100%;
  height: 75vh;
  background: linear-gradient(90deg, rgba(30, 79, 18, 0) 15%, rgba(0, 0, 0, 0) 100%, transparent 10%), url(../../img/Villa_5_a.jpg);
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 5rem; }
  @media (max-width: 900px) {
    .our-team_cover {
      width: 100%;
      /* height: 30%;
        top: 0; */ } }

.project_cover {
  min-height: 75vh;
  width: 100%;
  /* position: absolute;
    top: $navbar-height;
 */
  padding: 5rem;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 100%, transparent 10%), url(../../img/Villa_6_b.jpg);
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 5rem; }

.projects {
  width: 100%;
  padding: 5rem 15rem; }
  @media (max-width: 1200px) {
    .projects {
      padding: 5rem; } }
  .projects .projects_filter {
    width: 85%;
    margin: auto;
    margin-top: 10rem;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    align-items: center; }
    .projects .projects_filter ul {
      width: 100%;
      /* display: flex;
            justify-content: start;
            align-items: center;
            flex-wrap: wrap; */
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
      gap: 3rem; }
      @media (max-width: 900px) {
        .projects .projects_filter ul {
          grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } }
      @media (max-width: 600px) {
        .projects .projects_filter ul {
          grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); } }
      .projects .projects_filter ul li {
        border-radius: .8rem;
        background-color: #E6E6E6; }
        .projects .projects_filter ul li a {
          display: inline-block;
          padding: 1rem 1rem;
          width: 100%;
          height: 100%;
          color: #3D3D3D;
          font-weight: 500;
          transition: ease-in-out .5s; }
        .projects .projects_filter ul li:hover a {
          color: #61A360; }
      .projects .projects_filter ul .active_section {
        background-color: #61A360; }
        .projects .projects_filter ul .active_section a {
          color: #FFFFFF;
          font-weight: 700; }
  .projects .projects_grid {
    padding: 5rem;
    margin-top: 9rem; }
    .projects .projects_grid .images-container {
      position: relative;
      /* min-height: 100vh; */
      height: fit-content;
      display: grid;
      grid-template-columns: repeat(auto-fit, 27rem);
      gap: 3rem; }
      @media (max-width: 1200px) {
        .projects .projects_grid .images-container {
          grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr)); } }
      @media (max-width: 900px) {
        .projects .projects_grid .images-container {
          grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); } }
      .projects .projects_grid .images-container .image {
        width: 100%;
        height: 100%;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        cursor: pointer;
        position: relative; }
        .projects .projects_grid .images-container .image p {
          position: absolute;
          bottom: 3rem;
          left: 1rem;
          z-index: 4;
          color: #FFFFFF;
          font-size: 1.5rem;
          font-weight: 500;
          z-index: 10; }
        .projects .projects_grid .images-container .image span {
          display: inline-block;
          position: absolute;
          bottom: 1rem;
          left: 1rem;
          color: #FFFFFF;
          font-size: 1.5rem;
          font-weight: 500;
          z-index: 10; }
        .projects .projects_grid .images-container .image::after {
          content: '';
          display: inline-block;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 5;
          transition: ease-in-out .5s;
          background-color: rgba(0, 0, 0, 0.6); }
        .projects .projects_grid .images-container .image:hover::after {
          opacity: 0; }
        .projects .projects_grid .images-container .image img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: ease-in-out .5s; }
          .projects .projects_grid .images-container .image img:hover {
            transform: scale(1.1); }
    .projects .projects_grid .popup-image {
      position: fixed;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.9);
      height: 100%;
      width: 100%;
      z-index: 100;
      display: none;
      /* img{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 90rem;
                object-fit: cover;
            } */ }
      .projects .projects_grid .popup-image span {
        position: absolute;
        top: 0;
        right: 2.7rem;
        font-size: 6rem;
        font-weight: bolder;
        color: #FFFFFF;
        cursor: pointer;
        z-index: 100;
        transition: ease-in-out .5s; }
        .projects .projects_grid .popup-image span:hover {
          color: #1e4f12; }
      .projects .projects_grid .popup-image .clider {
        width: 100vw;
        height: 100vh;
        /*             height: 600px;
                 margin: auto;*/
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        overflow: hidden; }
        .projects .projects_grid .popup-image .clider .list {
          height: 100%;
          width: max-content;
          position: absolute;
          top: 0;
          left: 0;
          display: flex;
          align-items: center;
          transition: 1s; }
          .projects .projects_grid .popup-image .clider .list .ietm {
            width: 100vw;
            max-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center; }
          .projects .projects_grid .popup-image .clider .list img {
            /* width: 131rem;
                        max-width: 100vw;
                        height: 100%;
                        object-fit: cover; */
            /* width: 100%;
                        height: 100%;
                        aspect-ratio: 3/2 auto; */
            /* max-width: 100%;
                        max-height: 100%; */
            height: auto; }
      .projects .projects_grid .popup-image .bukkons {
        position: absolute;
        top: 45%;
        left: 5%;
        width: 90%;
        display: flex;
        justify-content: space-between; }
        .projects .projects_grid .popup-image .bukkons button {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          background-color: rgba(61, 61, 61, 0.7);
          backdrop-filter: blur(2px);
          color: #FFFFFF;
          border: none;
          font-weight: bold;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: ease-in-out .5s; }
          .projects .projects_grid .popup-image .bukkons button:hover {
            color: #61A360; }
      .projects .projects_grid .popup-image .dots {
        position: absolute;
        bottom: 10px;
        color: #FFFFFF;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 3rem;
        display: flex;
        justify-content: center;
        width: fit-content;
        background-color: rgba(61, 61, 61, 0.7);
        backdrop-filter: blur(2px); }
        .projects .projects_grid .popup-image .dots li {
          width: 10px;
          height: 10px;
          background-color: #fff;
          margin: 20px;
          border-radius: 20px;
          transition: 1s; }
          .projects .projects_grid .popup-image .dots li.active {
            width: 30px; }
      @media screen and (max-width: 768px) {
        .projects .projects_grid .popup-image .clider {
          height: 400px; } }

.services_section {
  width: 100%;
  padding: 10rem; }
  @media (max-width: 900px) {
    .services_section {
      padding: 5rem; } }

.services_box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap; }
  .services_box .service {
    width: 21rem;
    height: 21rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.3);
    margin: 4rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
    backdrop-filter: blur(6px);
    -moz-backdrop-filter: blur(6px); }
    @media (max-width: 900px) {
      .services_box .service {
        width: 18rem;
        height: 20rem;
        margin: 2rem;
        padding: 1rem; } }
    .services_box .service .service_icon {
      width: 100%;
      height: 70%; }
      @media (max-width: 900px) {
        .services_box .service .service_icon {
          width: 100%;
          height: 60%; } }
      .services_box .service .service_icon svg {
        width: 100%;
        height: 100%;
        fill: #3D3D3D; }
    .services_box .service .service_name {
      text-align: center; }
      .services_box .service .service_name span {
        font-size: 1.5rem;
        font-weight: 300; }

.contact_cover {
  width: 100%;
  height: 75vh;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 15%, rgba(0, 0, 0, 0.1) 100%, transparent 10%), url(../../img/home_img_4.jpg);
  background-size: cover;
  background-position: bottom;
  display: flex;
  justify-content: center;
  align-items: center; }

.contact {
  width: 100%;
  padding: 20rem 10rem; }
  @media (max-width: 900px) {
    .contact {
      padding: 10rem 3rem; } }
  .contact .contact-card-recto {
    width: 80%;
    margin: 15rem auto;
    /* box-shadow: 0 30px 50px #636363; */
    height: 40rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* background-color: $color-light-gray; */ }
    @media (max-width: 1200px) {
      .contact .contact-card-recto {
        width: 100%; } }
    @media (max-width: 1000px) {
      .contact .contact-card-recto {
        width: 80%;
        height: auto;
        flex-wrap: wrap;
        margin: 9rem auto; } }
    @media (max-width: 600px) {
      .contact .contact-card-recto {
        width: 90%; } }
    .contact .contact-card-recto .left-side {
      width: 50%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-image: url(../../img/Villa_5_a.jpg);
      background-size: cover;
      background-repeat: no-repeat; }
      @media (max-width: 1000px) {
        .contact .contact-card-recto .left-side {
          height: 40rem;
          width: 100%; } }
      .contact .contact-card-recto .left-side .contact_logo_box {
        width: 66%;
        height: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center; }
        .contact .contact-card-recto .left-side .contact_logo_box a {
          display: flex;
          align-items: center;
          justify-content: center; }
          .contact .contact-card-recto .left-side .contact_logo_box a img {
            width: 80%; }
        .contact .contact-card-recto .left-side .contact_logo_box p {
          padding-top: 2rem;
          color: #FFFFFF;
          font-weight: 500; }
    .contact .contact-card-recto .right-side {
      width: 50%;
      height: 100%;
      display: flex;
      flex-direction: column;
      position: relative;
      display: flex;
      justify-content: center;
      margin-left: 5rem; }
      @media (max-width: 1000px) {
        .contact .contact-card-recto .right-side {
          width: 100%;
          margin-left: 0; } }
      .contact .contact-card-recto .right-side .right-side_header {
        height: 20%;
        margin-top: 3rem;
        padding: 1rem;
        display: flex;
        justify-content: left;
        align-items: center; }
        .contact .contact-card-recto .right-side .right-side_header h3 {
          color: #3D3D3D;
          margin-left: 2rem;
          font-size: 3rem;
          padding: 1rem;
          position: relative;
          width: 90%;
          text-align: center; }
          @media (max-width: 1200px) {
            .contact .contact-card-recto .right-side .right-side_header h3 {
              font-size: 2.6rem;
              width: 80%;
              text-align: center; } }
          .contact .contact-card-recto .right-side .right-side_header h3::before {
            content: '';
            width: 50%;
            height: 2px;
            background-color: #61A360;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 0; }
      .contact .contact-card-recto .right-side .contact_element {
        height: 50%;
        width: 100%;
        display: flex;
        z-index: 1; }
        .contact .contact-card-recto .right-side .contact_element ul {
          height: 100%;
          width: 100%;
          padding: 1rem;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center; }
          .contact .contact-card-recto .right-side .contact_element ul li {
            width: 90%;
            display: flex;
            align-items: center;
            margin: 1.5rem 0; }
            .contact .contact-card-recto .right-side .contact_element ul li span {
              width: 3rem;
              height: 3rem;
              margin-right: 1rem; }
              .contact .contact-card-recto .right-side .contact_element ul li span svg {
                width: 100%;
                height: 100%;
                overflow: visible;
                fill: #3D3D3D;
                transition: .5s ease-in-out; }
      .contact .contact-card-recto .right-side .contact_text {
        margin-left: 2rem; }
        .contact .contact-card-recto .right-side .contact_text ul {
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          color: #FFFFFF; }
          .contact .contact-card-recto .right-side .contact_text ul li {
            margin: 1rem 0; }
  .contact .contact-card-verso {
    width: 90%;
    margin: 15rem auto 0 auto;
    height: 60rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: relative; }
    .contact .contact-card-verso form {
      width: 90%;
      margin-top: 4rem; }
      .contact .contact-card-verso form .form_first_line, .contact .contact-card-verso form .form_second_line, .contact .contact-card-verso form .form_third_line {
        display: flex;
        justify-content: space-between; }
        .contact .contact-card-verso form .form_first_line .formular-field, .contact .contact-card-verso form .form_second_line .formular-field, .contact .contact-card-verso form .form_third_line .formular-field {
          width: 48%;
          margin: 1.5rem 0; }
          .contact .contact-card-verso form .form_first_line .formular-field .form-input, .contact .contact-card-verso form .form_second_line .formular-field .form-input, .contact .contact-card-verso form .form_third_line .formular-field .form-input {
            width: 100%;
            border: none;
            height: 4.5rem;
            background-color: #f1f1f1;
            padding: .4rem 1.6rem;
            transition: ease-in-out 0.5s;
            position: relative;
            backdrop-filter: blur(1rem);
            -webkit-backdrop-filter: blur(1rem);
            color: var(--color-dark-gray); }
            .contact .contact-card-verso form .form_first_line .formular-field .form-input::placeholder, .contact .contact-card-verso form .form_second_line .formular-field .form-input::placeholder, .contact .contact-card-verso form .form_third_line .formular-field .form-input::placeholder {
              font-family: 'nunito';
              font-size: 1.5rem; }
      .contact .contact-card-verso form .form_third_line .formular-field {
        width: 100%; }
        .contact .contact-card-verso form .form_third_line .formular-field .form-input {
          height: 12rem; }

.archi_cover {
  width: 100%;
  height: 75vh;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 100%, transparent 10%), url(../../img/Aero.jpg);
  background-size: cover;
  background-position: top;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 5rem; }
  @media (max-width: 900px) {
    .archi_cover {
      width: 100%;
      /* height: 30%;
        top: 0; */ } }

.developpement_cover {
  width: 100%;
  height: 75vh;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 100%, transparent 10%), url(../../img/Image1.jpg);
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center; }

.services_intro {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  padding: 5rem 5rem; }
  @media (max-width: 900px) {
    .services_intro {
      justify-content: center; } }
  .services_intro .services_intro_text {
    width: 30%; }
    @media (max-width: 900px) {
      .services_intro .services_intro_text {
        width: 100%; } }
    .services_intro .services_intro_text .section-title {
      align-items: start; }
      .services_intro .services_intro_text .section-title span {
        display: inline-block;
        text-align: justify;
        width: 22rem;
        font-family: "Montserrat";
        font-size: 16px;
        letter-spacing: 2rem;
        color: #cccccc;
        text-transform: uppercase;
        display: block;
        font-weight: 300; }
        @media (max-width: 900px) {
          .services_intro .services_intro_text .section-title span {
            width: 100%; } }
      .services_intro .services_intro_text .section-title h2 {
        display: inline-block;
        font-family: "Montserrat";
        width: 100%;
        margin: 2rem 0; }
        .services_intro .services_intro_text .section-title h2 span {
          font-size: 3.8rem;
          color: #3D3D3D;
          width: 100%;
          letter-spacing: 10px; }
        .services_intro .services_intro_text .section-title h2 .span-thin {
          font-weight: 100; }
        .services_intro .services_intro_text .section-title h2 .span-bold {
          font-weight: 700; }
    .services_intro .services_intro_text p {
      font-family: "Montserrat";
      text-align: justify;
      font-weight: 300;
      font-size: 16px;
      line-height: 1.7;
      color: gray; }
  .services_intro .services_intro_img {
    width: 55%; }
    @media (max-width: 900px) {
      .services_intro .services_intro_img {
        margin: 5rem 0;
        width: 100%; } }
    .services_intro .services_intro_img img {
      width: 100%; }

.services_box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 5rem 0;
  flex-wrap: wrap;
  padding: 5rem 5rem; }
  .services_box .service-line {
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; }
    .services_box .service-line-1 .service_02, .services_box .service-line-3 .service_02 {
      width: 45%; }
      @media (max-width: 900px) {
        .services_box .service-line-1 .service_02, .services_box .service-line-3 .service_02 {
          width: 90%; } }
    .services_box .service-line-2 .service_02 {
      width: 30%; }
      @media (max-width: 900px) {
        .services_box .service-line-2 .service_02 {
          width: 90%; } }
  .services_box .service_02 {
    height: 10rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 1rem 2rem;
    margin: 1.2rem;
    box-shadow: 0 5px 10px rgba(61, 61, 61, 0.5); }
    @media (max-width: 900px) {
      .services_box .service_02 {
        flex-direction: column;
        min-height: 12.6rem; } }
    .services_box .service_02:hover svg {
      fill: #3D3D3D;
      transform: rotate(144deg); }
    .services_box .service_02-green {
      background-color: #61A360; }
      .services_box .service_02-green h5 {
        color: #FFFFFF; }
      .services_box .service_02-green svg {
        fill: #FFFFFF; }
    .services_box .service_02-white h5 {
      color: #3D3D3D; }
    .services_box .service_02-white svg {
      fill: #61A360; }
    .services_box .service_02 .service_name {
      width: calc((100% - 7rem)); }
      .services_box .service_02 .service_name h5 {
        font-size: 1.7rem;
        font-weight: 900;
        text-align: center; }
    .services_box .service_02 .service_icon {
      width: 5rem;
      height: 5rem;
      margin-right: 2rem; }
      .services_box .service_02 .service_icon span {
        display: inline-block;
        width: 100%;
        height: 100%; }
        .services_box .service_02 .service_icon span svg {
          width: 100%;
          height: 100%;
          transition: ease-in-out .9s; }
      @media (max-width: 900px) {
        .services_box .service_02 .service_icon {
          margin: .8rem 0; } }

.container_3 {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  box-shadow: 0 30px 50px #dbdbdb;
  height: 100vh;
  overflow: hidden; }
  .container_3 .plide .otem {
    width: 14.4rem;
    height: 10.5rem;
    position: absolute;
    top: 80%;
    transform: translate(0, -50%);
    border-radius: 10px;
    box-shadow: 0 30px 50px #5050506e;
    background-position: 50% 50%;
    background-size: cover;
    display: inline-block;
    transition: .5s; }
    @media (max-width: 900px) {
      .container_3 .plide .otem {
        width: 11rem;
        height: 15rem; } }
    .container_3 .plide .otem:nth-child(1), .container_3 .plide .otem:nth-child(2) {
      top: 0;
      left: 0;
      transform: translate(0, 0);
      border-radius: 0;
      width: 100%;
      height: 100%; }
    .container_3 .plide .otem:nth-child(3) {
      left: calc(67% -  ((21.6rem ) + 1.6rem)); }
    .container_3 .plide .otem:nth-child(4) {
      left: calc(67% - 7.2rem); }
    .container_3 .plide .otem:nth-child(5) {
      left: calc(67% + ((7.2rem ) + 1.6rem)); }
    .container_3 .plide .otem:nth-child(n + 6) {
      left: calc(67% +  ((21.6rem ) + 3.2rem));
      opacity: 0; }
    @media (max-width: 900px) {
      .container_3 .plide .otem:nth-child(3) {
        left: calc(68% -  ((16.5rem ) + 1.6rem)); }
      .container_3 .plide .otem:nth-child(4) {
        left: calc(68% - 5.5rem); }
      .container_3 .plide .otem:nth-child(5) {
        left: calc(68% + ((5.5rem ) + 1.6rem)); }
      .container_3 .plide .otem:nth-child(n + 6) {
        left: calc(68% +  ((16.5rem ) + 3.2rem));
        opacity: 0; } }
    .container_3 .plide .otem:nth-child(2) .content {
      display: block; }
    .container_3 .plide .otem .content {
      position: absolute;
      top: 50%;
      left: 20%;
      width: 45rem;
      text-align: left;
      color: #FFFFFF;
      transform: translate(0, -50%);
      display: none;
      z-index: 5; }
      .container_3 .plide .otem .content .name {
        font-size: 4rem;
        text-transform: uppercase;
        font-weight: bold;
        opacity: 0;
        animation: animate 1s ease-in-out 1 forwards; }
      .container_3 .plide .otem .content .des {
        margin-top: 10px;
        margin-bottom: 20px;
        opacity: 0;
        animation: animate 1s ease-in-out .3s 1 forwards;
        line-height: 3rem; }
        @media (max-width: 900px) {
          .container_3 .plide .otem .content .des {
            font-size: 2.5rem; } }
      .container_3 .plide .otem .content .cutton {
        opacity: 0;
        animation: animate 1s ease-in-out .3s 1 forwards;
        z-index: 5; }
  .container_3 .slider-button {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    z-index: 0; }
    .container_3 .slider-button button {
      width: 10rem;
      height: 10rem;
      margin: 0 .5rem;
      border-radius: 8px;
      border: none;
      color: #FFFFFF;
      background: transparent;
      transition: ease-in-out .5s;
      cursor: pointer; }
      .container_3 .slider-button button i {
        font-size: 8rem; }
        @media (max-width: 900px) {
          .container_3 .slider-button button i {
            font-size: 6rem; } }
      .container_3 .slider-button button:nth-child(1) {
        position: absolute;
        left: 10%; }
        @media (max-width: 900px) {
          .container_3 .slider-button button:nth-child(1) {
            left: 3%; } }
      .container_3 .slider-button button:nth-child(2) {
        position: absolute;
        right: 10%; }
        @media (max-width: 900px) {
          .container_3 .slider-button button:nth-child(2) {
            right: 3%; } }
      .container_3 .slider-button button:hover {
        background: rgba(61, 61, 61, 0.5);
        color: #FFFFFF;
        font-weight: bolder; }

@keyframes animate {
  from {
    opacity: 0;
    transform: translate(0, 100px);
    filter: blur(33px); }
  to {
    opacity: 1;
    transform: translate(0);
    filter: blur(0); } }

.otem_1 {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 100%, transparent 10%), url(../../img/home_img_1.jpg);
  /* background: linear-gradient(90deg,
                                rgba($color-black, .8) 15%,
                                rgba($color-black, .4) 100%,
                                transparent 10%),
                url(../../img/home_img_1.jpg); */ }

.otem_2 {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 100%, transparent 10%), url(../../img/home_img_2.jpg);
  /* background: linear-gradient(90deg,
                                rgba($color-black, .8) 15%,
                                rgba($color-black, .4) 100%,
                                transparent 10%),
                url(../../img/home_img_2.jpg); */ }

.otem_3 {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 100%, transparent 10%), url(../../img/home_img_3.jpg);
  /* background: linear-gradient(90deg,
                                rgba($color-black, .8) 15%,
                                rgba($color-black, .4) 100%,
                                transparent 10%),
                url(../../img/home_img_3.jpg); */ }

.otem_4 {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 100%, transparent 10%), url(../../img/home_img_4.jpg);
  /* background: linear-gradient(90deg,
                                rgba($color-black, .8) 15%,
                                rgba($color-black, .4) 100%,
                                transparent 10%),
                url(../../img/home_img_4.jpg); */ }

.otem_5 {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 100%, transparent 10%), url(../../img/home_img_7.jpg);
  /* background: linear-gradient(90deg,
                                rgba($color-black, .8) 15%,
                                rgba($color-black, .4) 100%,
                                transparent 10%),
                    url(../../img/home_img_7.jpg); */ }

.otem_6 {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 100%, transparent 10%), url(../../img/home_img_6.jpg);
  /* background: linear-gradient(90deg,
                                rgba($color-black, .8) 15%,
                                rgba($color-black, .4) 100%,
                                transparent 10%),
                        url(../../img/home_img_6.jpg); */ }

.clider {
  width: 100%;
  max-width: 100vw;
  height: 600px;
  margin: auto;
  position: relative;
  overflow: hidden; }
  .clider .list {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    display: flex;
    width: max-content;
    transition: 1s; }
    .clider .list img {
      width: 131rem;
      max-width: 100vw;
      height: 100%;
      object-fit: cover; }

.bukkons {
  position: absolute;
  top: 45%;
  left: 5%;
  width: 90%;
  display: flex;
  justify-content: space-between; }
  .bukkons button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #fff5;
    color: #fff;
    border: none;
    font-weight: bold; }
    .bukkons button i {
      font-size: 3.6rem; }

.dots {
  position: absolute;
  bottom: 10px;
  color: #fff;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center; }
  .dots li {
    width: 10px;
    height: 10px;
    background-color: #fff;
    margin: 20px;
    border-radius: 20px;
    transition: 1s; }
    .dots li.active {
      width: 30px; }

@media screen and (max-width: 768px) {
  .clider {
    height: 400px; } }

.cutton {
  min-width: 12rem;
  margin: 3rem 0;
  display: inline-block;
  transition: ease-in-out .5s;
  position: relative;
  font-size: 2rem;
  font-weight: 700;
  color: #FFFFFF;
  text-align: center;
  padding: .8rem 2rem;
  cursor: pointer;
  background-color: #61A360;
  transition: all .25s ease-out; }
  @media (max-width: 900px) {
    .cutton {
      font-size: 2.5rem; } }
  .cutton::before, .cutton::after {
    content: '';
    width: 20%;
    height: 100%;
    background: #61A360;
    position: absolute;
    top: 0;
    transition: all ease .6s;
    transition-delay: .2s; }
  .cutton::before {
    left: 0;
    clip-path: polygon(100% 0, 100% 1px, 1px 1px, 1px 97%, 100% 97%, 100% 100%, 0 100%, 0 0); }
  .cutton::after {
    right: 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 97%, 97% 97%, 97% 1px, 0 1px); }
  .cutton:hover {
    /* color: $color-white;
        background-position: left bottom; */
    background-color: transparent; }
    .cutton:hover::after, .cutton:hover::before {
      width: 50%; }
    .cutton:hover button {
      color: #3D3D3D; }
  .cutton button {
    width: 100%;
    background-color: transparent;
    border: none;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 1.7rem;
    transition: ease-in-out .5s; }

.totop-button {
  width: 5rem;
  height: 5rem;
  position: fixed;
  bottom: 13rem;
  right: 5rem;
  background-color: #E6E6E6;
  border-radius: .8rem;
  z-index: 99;
  pointer-events: none;
  transition: ease-in-out .5s;
  opacity: 0; }
  .totop-button svg {
    fill: #3D3D3D;
    transition: ease-in-out .5s; }
  .totop-button:hover {
    background-color: #61A360; }
    .totop-button:hover svg {
      fill: #FFFFFF; }
  @media (max-width: 900px) {
    .totop-button {
      bottom: 20rem; } }
  .totop-button a {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center; }
    .totop-button a svg {
      fill: #3D3D3D;
      width: 2rem; }
  .totop-button.apear {
    pointer-events: auto;
    opacity: 1; }

@media (min-width: 900px) {
  .onglet-dropdown:hover .Qsn-dropdown-box {
    display: flex;
    max-height: 500px;
    visibility: visible; } }

.onglet-dropdown:focus .Qsn-dropdown-box {
  display: flex;
  max-height: 500px;
  visibility: visible; }
  @media (max-width: 900px) {
    .onglet-dropdown:focus .Qsn-dropdown-box {
      display: flex;
      max-height: 500px;
      visibility: visible;
      position: static;
      box-shadow: none; } }

@media (max-width: 900px) {
  .onglet-dropdown:hover, .onglet-dropdown:focus {
    margin: 1rem 3rem; } }

.Qsn-dropdown-box {
  position: absolute;
  display: none;
  width: max-content;
  max-height: 0;
  flex-flow: column nowrap;
  top: 100%;
  margin-top: 3px;
  padding: .5rem;
  z-index: 999;
  border-radius: 5px;
  visibility: hidden;
  overflow: hidden;
  background-color: rgba(61, 61, 61, 0.2);
  box-shadow: 0 5px 10px rgba(61, 61, 61, 0.2);
  transition: all ease-in-out .5s;
  backdrop-filter: blur(3rem); }
  @media (max-width: 900px) {
    .Qsn-dropdown-box {
      background-color: transparent; } }
  .Qsn-dropdown-box .Qsn-dropdown-item {
    display: inline-block;
    width: 100%;
    padding: .5rem .75rem;
    border-radius: 5px;
    transition: ease-in-out .3s;
    position: relative;
    /* &:first-child::after{
            content: '';
            margin-top: 2px;
            width: 100%;
            height: 1px;
            background-color:  $color-white;
            position: absolute;
            bottom: 0;
            left: 0;
        } */ }
    @media (max-width: 900px) {
      .Qsn-dropdown-box .Qsn-dropdown-item {
        text-align: center; } }
    @media (max-width: 900px) {
      .Qsn-dropdown-box .Qsn-dropdown-item a {
        color: #7e7e7e;
        font-weight: 300;
        font-size: 4rem; } }
    .Qsn-dropdown-box .Qsn-dropdown-item:hover {
      background-color: rgba(255, 255, 255, 0.2); }

.ep-dropdown-left .Qsn-dropdown-box {
  left: 0; }

.ep-dropdown-right .Qsn-dropdown-box {
  right: 0; }

.dev_process {
  display: flex;
  justify-content: space-around;
  margin: auto;
  position: relative; }
  .dev_process::after {
    content: "";
    width: 2px;
    height: 62rem;
    background: linear-gradient(180deg, crimson 15%, gold 30%, #0e8afd 45%, #9c46ff 60%, #ff8800 80%, #6fd807 100%);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1; }
    @media (max-width: 900px) {
      .dev_process::after {
        display: none; } }
  .dev_process .dev_step_text {
    position: relative; }
    .dev_process .dev_step_text::after {
      content: "";
      width: 2rem;
      height: 2rem;
      background-color: #f1f1f1;
      transform: rotate(45deg);
      position: absolute; }
    .dev_process .dev_step_text::before {
      width: 3rem;
      height: 3rem;
      border-radius: 50%;
      background-color: #FFFFFF;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
      position: absolute;
      z-index: 5;
      font-family: "Montserrat";
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 2rem;
      font-weight: 700;
      color: #3D3D3D; }
      @media (max-width: 900px) {
        .dev_process .dev_step_text::before {
          display: none; } }
  .dev_process .dev_process_left {
    margin: 0 2rem; }
    .dev_process .dev_process_left .step_side {
      border-top-left-radius: 1rem;
      border-bottom-left-radius: 1rem; }
    .dev_process .dev_process_left .dev_step_text {
      position: relative; }
      .dev_process .dev_process_left .dev_step_text::after {
        right: -1rem; }
      .dev_process .dev_process_left .dev_step_text::before {
        right: -14rem; }
    @media (max-width: 900px) {
      .dev_process .dev_process_left {
        margin: 0 0rem 0 0rem;
        position: relative;
        left: 15%; } }
  .dev_process .dev_process_right {
    margin: 11rem 2rem 0 2rem; }
    .dev_process .dev_process_right .step_side {
      border-top-right-radius: 1rem;
      border-bottom-right-radius: 1rem; }
    .dev_process .dev_process_right .dev_step_text {
      position: relative; }
      .dev_process .dev_process_right .dev_step_text::after {
        left: -1rem; }
      .dev_process .dev_process_right .dev_step_text::before {
        left: -14rem; }
    @media (max-width: 900px) {
      .dev_process .dev_process_right {
        margin: 14rem 0rem 0 0rem;
        position: relative;
        right: 15%; } }
  .dev_process .dev_step {
    height: 12rem;
    width: 40rem;
    display: flex;
    justify-content: center;
    margin: 8rem 0;
    border-radius: 1rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transition: ease-in-out .5s;
    z-index: 50;
    background-color: #f1f1f1; }
    @media (max-width: 900px) {
      .dev_process .dev_step {
        height: 12rem;
        width: 30rem;
        margin: 16rem 0; } }
    .dev_process .dev_step_1 .step_side {
      background: linear-gradient(180deg, crimson 15%, #8f011d 100%); }
    .dev_process .dev_step_1:hover {
      transform: translateX(1rem); }
    .dev_process .dev_step_1 .dev_step_text::before {
      content: "1"; }
    .dev_process .dev_step_2 .step_side {
      background: linear-gradient(180deg, gold 15%, #d49c00 100%); }
    .dev_process .dev_step_2:hover {
      transform: translateX(-1rem); }
    .dev_process .dev_step_2 .dev_step_text::before {
      content: "2"; }
    .dev_process .dev_step_3 .step_side {
      background: linear-gradient(180deg, #0e8afd 15%, #00559b 100%); }
    .dev_process .dev_step_3:hover {
      transform: translateX(1rem); }
    .dev_process .dev_step_3 .dev_step_text::before {
      content: "3"; }
    .dev_process .dev_step_4 .step_side {
      background: linear-gradient(180deg, #9c46ff 15%, #481868 100%); }
    .dev_process .dev_step_4:hover {
      transform: translateX(-1rem); }
    .dev_process .dev_step_4 .dev_step_text::before {
      content: "4"; }
    .dev_process .dev_step_5 .step_side {
      background: linear-gradient(180deg, #ff8800 15%, #be5c00 100%); }
    .dev_process .dev_step_5:hover {
      transform: translateX(1rem); }
    .dev_process .dev_step_5 .dev_step_text::before {
      content: "5"; }
    .dev_process .dev_step_6 .step_side {
      background: linear-gradient(180deg, #6fd807 15%, #458505 100%); }
    .dev_process .dev_step_6:hover {
      transform: translateX(-1rem); }
    .dev_process .dev_step_6 .dev_step_text::before {
      content: "6"; }
    .dev_process .dev_step .step_side {
      width: 20%;
      height: 100%;
      display: flex;
      flex-direction: column;
      position: relative; }
      @media (max-width: 900px) {
        .dev_process .dev_step .step_side {
          padding: .5rem 0; } }
      .dev_process .dev_step .step_side .dev_step_icon {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center; }
        @media (max-width: 900px) {
          .dev_process .dev_step .step_side .dev_step_icon {
            height: 70%; } }
        .dev_process .dev_step .step_side .dev_step_icon span {
          display: inline-block;
          height: 100%;
          width: 100%;
          padding: 1rem;
          display: flex;
          justify-content: center;
          align-items: center; }
          .dev_process .dev_step .step_side .dev_step_icon span svg {
            width: 90%;
            height: 90%;
            fill: #FFFFFF; }
    .dev_process .dev_step .dev_step_text {
      width: 80%;
      height: 100%;
      padding: 2rem;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: "Montserrat";
      font-weight: 300; }
    .dev_process .dev_step .dev_step_number-first {
      width: 100%;
      height: 30%;
      display: none; }
      @media (max-width: 900px) {
        .dev_process .dev_step .dev_step_number-first {
          display: flex;
          justify-content: center;
          align-items: center; } }
      .dev_process .dev_step .dev_step_number-first span {
        display: inline-block;
        font-size: 3rem;
        font-weight: 900;
        color: #FFFFFF; }

      .projects .projects_grid .images-container{
        justify-content: center;
      }

@media (max-width: 900px) {
  nav{
    position: fixed;
  }
  nav ul{
    justify-content: flex-start;
  }

  nav ul li{
    margin: 2rem 0;
  }

  .Qsn-dropdown-box {
    position: relative;
    display: flex;
    visibility: visible;
    max-height: none;
    top: 0;
    box-shadow: none;
  }
}