@font-face {
    font-family: Nexa;
    src: url("/font/Nexa-ExtraLight.ttf");
 }
 
 @font-face {
    font-family: Nexa;
    src: url("/font/Nexa-Heavy.ttf");
    font-weight: bold;
 }
 
 * {
    font-family: Nexa;
 }
 
 .focusselect:focus {
     box-shadow: 0 0 !important;
 }
 
 .button {
     color: black;
     border: none;
     background-color: transparent;
     padding-top: 6px;
     padding-bottom: 6px;
 }
 
 .button.active {
     color: black;
     border: none;
     background-color: rgba(255, 220, 110, 0.32);
 }
 
 .button:hover {
     color: black;
     border: none;
     background-color: rgba(255, 220, 110, 0.32);
 }

 .buttoncontact {
    color: white;
    border: none;
    background-color: black;
    padding-top: 6px;
    padding-bottom: 6px;
}

.buttoncontact.active {
    color: black;
    border: none;
    background-color: #FFDC6E;
}

.buttoncontact:hover {
    color: black;
    border: none;
    background-color: #FFDC6E;
}

.buttonRequestAQuote {
   color: white;
   border: none;
   background-color: #DE3157;
   padding-top: 6px;
   padding-bottom: 6px;
}

.buttonRequestAQuote.active {
   color: white;
   border: none;
   background-color:rgb(194, 37, 71);
}

.buttonRequestAQuote:hover {
   color: white;
   border: none;
   background-color: rgb(194, 37, 71);
}
 
 .homesection {
     min-height: 100vh;
     background-color: #FBDE7A;
     background-image: url("/images/bg.png"), url("/images/bg1.png"), url("/images/bg2.png");
     background-position: bottom right, top right, bottom left;
     background-size: 250px, auto, auto;
     background-repeat: no-repeat;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
 }
 
 @media screen and (max-width: 1200px) {
     .navbar-collapse {
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         height: 100vh;
         display: flex;
         align-items: center;
         justify-content: center;
         text-align: center;
         background-color: #fff;
     }
     .navbar-toggler,
     .navbar-brand {
         z-index: 1;
     }
     .navbar-toggler:focus {
         box-shadow: none;
     }
     .navbar-collapse.show {
         transition: all 0.5s;
     }

     .homesecmargintop {
        margin-top: 100px;
     }
 }
 
 @media screen and (min-width: 1200px) {
   .navbar-nav {
     margin-left: auto;
   }

   .homesecmargintop {
    margin-top: 250px;
 }
 }
 
 .nmargin {
     margin-top: -130px;
 }

 .borderhomeslide {
    width: 100%;
    margin: 0.2em auto;
    position: relative;
 }

 .borderhomeslide::after {
    content: "";
    position: absolute;
    height: 3px;
    background: #DE3157;
    top: 100%;
    width: 50%;
    left: 50%;
    transform: translateX(-50%);
 }
 
 .borderhome {
     width: 200px;
     margin: 0.2em auto;
     position: relative;
 }
 
 .borderhome::after {
     content: "";
     position: absolute;
     height: 3px;
     background: #FBDE7A;
     top: 100%;
     width: 50%;
     left: 50%;
     transform: translateX(-50%);
 }
 
 .borderhome2 {
     width: 100%;
     margin: 0.2em auto;
     position: relative;
 }
 
 .borderhome2::after {
     content: "";
     position: absolute;
     height: 3px;
     background: #FBDE7A;
     top: 100%;
     width: 50%;
     left: 50%;
     transform: translateX(-50%);
 }

 .offer {
    background-image: url("/images/left.png"), url("/images/left.png"), url("/images/right.png");
     background-position: left top, left bottom, right;
     background-repeat: no-repeat;
 }

 .projects {
    background-image: url("/images/leftyellow.png"), url("/images/rightyellow.png");
     background-position: top -55px left 0, bottom right;
     background-repeat: no-repeat;
 }

 .clients {
    background-image: url("/images/leftred.png"), url("/images/rightred.png");
     background-position: left top, right bottom;
     background-repeat: no-repeat;
 }

 .mySlides {
    display: none;
}
 .slideshow-container {
  }
  .prev, .next {
    cursor: pointer;
  }
  .prev:hover, .next:hover {
    background-image: url("/images/bg.png");
  }

 @media screen and (min-width: 576px) {
 .hr-lines{
    position: relative;
    max-width: 350px;
    margin: 10px auto;
    text-align: center;
  }

 .hr-lines:before{
    content:" ";
    display: block;
    height: 2px;
    width: 80px;
    position: absolute;
    top: 50%;
    left: 0;
    background: black;
  }

  .hr-white{
     position: relative;
     max-width: 350px;
     margin: 10px auto;
     text-align: center;
   }
 
  .hr-white:before{
     content:" ";
     display: block;
     height: 2px;
     width: 80px;
     position: absolute;
     top: 50%;
     left: 0;
     background: white;
   }
}

  .color-red {
    color: #DE3157;
  }

  .color-yellow {
    color: #FADE7B;
  }

  .bg-yellow {
    background-color: #FADE7B;
  }
 
 .darkbackground {
     background-color: #3F3F3F;
 }
 
 .web-development:hover {
     background-color: #FC7F1A;
     transition: all 0.5s;
 }
 .web-development:hover img {
     transform: scale(1.2);
     transition: all 0.5s;
 }
 .web-development button {
     visibility: hidden;
     will-change: transform;
     transition: transform 450ms;
     transform: translateY(50px);
 }
 .web-development:hover button {
     visibility: visible;
     transition: transform 250ms;
     transform: translateY(-10px);
 }
 
 .uiux-design:hover {
     background-color: #FADDD4;
     transition: all 0.5s;
 }
 .uiux-design:hover img {
     transform: scale(1.1);
     transition: all 0.5s;
 }
 .uiux-design button {
     visibility: hidden;
     will-change: transform;
     transition: transform 450ms;
     transform: translateY(50px);
 }
 .uiux-design:hover button {
     visibility: visible;
     transition: transform 250ms;
     transform: translateY(-10px);
 }
 
 .mobile-development:hover {
     background-color: #BA68C8;
     transition: all 0.5s;
 }
 .mobile-development:hover img {
     transform: scale(1.1);
     transition: all 0.5s;
 }
 .mobile-development button {
     visibility: hidden;
     will-change: transform;
     transition: transform 450ms;
     transform: translateY(50px);
 }
 .mobile-development:hover button {
     visibility: visible;
     transition: transform 250ms;
     transform: translateY(-10px);
 }
 
 .digital-marketing:hover {
     background-color: #FFC727;
     transition: all 0.5s;
 }
 .digital-marketing:hover img {
     transform: scale(1.2);
     transition: all 0.5s;
 }
 .digital-marketing button {
     visibility: hidden;
     will-change: transform;
     transition: transform 450ms;
     transform: translateY(50px);
 }
 .digital-marketing:hover button {
     visibility: visible;
     transition: transform 250ms;
     transform: translateY(-10px);
 }
 
 .brand:hover {
     background-color: #9393E8;
     transition: all 0.5s;
 }
 .brand:hover img {
     transform: scale(1.1);
     transition: all 0.5s;
 }
 .brand button {
     visibility: hidden;
     will-change: transform;
     transition: transform 450ms;
     transform: translateY(50px);
 }
 .brand:hover button {
     visibility: visible;
     transition: transform 250ms;
     transform: translateY(-10px);
 }
 
 .cloud-development:hover {
     background-color: #EEFFB2;
     transition: all 0.5s;
 }
 .cloud-development:hover img {
     transform: scale(1.1);
     transition: all 0.5s;
 }
 .cloud-development button {
     visibility: hidden;
     will-change: transform;
     transition: transform 450ms;
     transform: translateY(50px);
 }
 .cloud-development:hover button {
     visibility: visible;
     transition: transform 250ms;
     transform: translateY(-10px);
 }

 @media screen and (max-width: 576px) {
    .adc {
        background-image: url("/images/Mask group.png");
        height: 150px;
        width: 150px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 150px;
     }
     .vegas {
        background-image: url("/images/v1.png");
        height: 150px;
        width: 150px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 200px;
     }
     .promoxe {
        background-image: url("/images/Plan de travail 1.png");
        height: 150px;
        width: 150px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 180px;
     }
     .oueslati {
        background-image: url("/images/Logo1 - 1.png");
        height: 150px;
        width: 150px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 140px;
     }
     .mach {
        background-image: url("/images/MACH.png");
        height: 150px;
        width: 150px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 180px;
     }
     .daood {
        background-image: url("/images/Artboard 1.png");
        height: 150px;
        width: 150px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 170px;
     }
     .eatup {
        background-image: url("/images/Plan de travail 1@300x.png");
        height: 150px;
        width: 150px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 250px;
     }
     .horizon {
        background-image: url("/images/Logo 2.png");
        height: 150px;
        width: 150px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 130px;
     }
    }

    @media screen and (min-width: 576px) {
 .adc {
    background-image: url("/images/Mask group.png");
    height: 150px;
    width: 150px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
 }
 .vegas {
    background-image: url("/images/v1.png");
    height: 150px;
    width: 150px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
 }
 .promoxe {
    background-image: url("/images/Plan de travail 1.png");
    height: 150px;
    width: 150px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
 }
 .oueslati {
    background-image: url("/images/Logo1 - 1.png");
    height: 150px;
    width: 150px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 70%;
 }
 .mach {
    background-image: url("/images/MACH.png");
    height: 150px;
    width: 150px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
 }
 .daood {
    background-image: url("/images/Artboard 1.png");
    height: 150px;
    width: 150px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
 }
 .eatup {
    background-image: url("/images/Plan de travail 1@300x.png");
    height: 150px;
    width: 150px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 130%;
 }
 .horizon {
    background-image: url("/images/Logo 2.png");
    height: 150px;
    width: 150px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 80%;
 }
}