@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');



:root {
    font-family: 'Poppins';
    font-weight: 400;
    color-scheme: light dark;
    color: rgba(255, 255, 255, 0.87);
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins';
}

body {
	background: #110d0e; 
}

/* Css haut */

.contuner,.link {
  min-height: 5vh;
    width: 100%;
}

.text,.linkhaut {
  padding: 0 5%;
}

.info,.infolink {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.infolink {
  align-items: center;
}

.titrehaut {
  line-height: 0px;
  color: #fff;
  position: relative;
  font-weight: 700;
}


h1{
  color: #fff;
  font-size: 5rem;
  letter-spacing: 1px;
}

.titrehaut span.auto-input {
  font-size: 2em;
  margin: 0 5px;
  color: #3edcffda;
  filter: drop-shadow(0 0 15px #40ced3) drop-shadow(0 0 45px #40ced3);
}

.titrehaut span.typed-cursor {
  font-size: 2em;
  color: #3edcffda;
  filter: drop-shadow(0 0 15px #40ced3) drop-shadow(0 0 45px #40ced3);
}

.linktxt {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 650px;
  margin-top: 20px;
}


a#iconcontactus:after {
  font-size: 12px;
  letter-spacing: 1px;
  position: absolute;
  top: 5px;
  left: -99px;
  content: "Contact Us";
}

/*------------*/

#container {
    position: fixed;
    width: 100%;
    height: 100vh;
    left: 50%;
    top: 25%;
    transform: translate3d(-50%, -40%, 0);
    z-index: -1;
}

.contactus, .back {
    position: relative;
    font-size: 22px;
    cursor: pointer;
    width: 50%;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    color: #fff;
    font-style: normal;
    text-decoration: none;
}



.contactus:hover, .back:hover {
    color: #3edcffda !important;
    filter: drop-shadow(0 0 15px #40ced3) drop-shadow(0 0 45px #40ced3);
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

/* Style Css */
.contanier {
  min-height: 100vh;
  width: 100%;
}

.service-wrapper{
  padding: 3% 8%;
}

.service {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap:30px;
  margin-top: 42px;
  outline:none;
}

/*.card {
  height: 330px;
  width: 370px;
  background-color: rgb(47 42 42);
    padding: 3% 8%;
    border-radius: 8px;
    transition: 0.6s;
    cursor: pointer;
}*/

.card {
  height: 330px;
    width: 370px;
    background-color: rgb(47 42 42);
    padding: 3% 8%;
    border-radius: 8px;
    transition: 0.6s;
    cursor: pointer;
    filter: drop-shadow(0 0 3px #221e1f) drop-shadow(0 0 0px #221e1f);
  outline:none;
}

.card i {
color: #3edcffda;
margin-top: 40px;
margin-bottom: 15px;
font-size: 2.5rem;
}

.card h2 {
  color: #fff;
  font-size: 23px;
  margin: 10px 0;
  font-weight: 500;
}

.card p {
  text-align: left;
  width: 100%;
  margin: 20px 0;
  color: #e9e9e9;
}


.card:hover i {
  color: #fff;
  filter: drop-shadow(0 0 15px #90fafd) drop-shadow(0 0 8px #9dedf0);
  }


.card:hover,.card:focus {
  background: linear-gradient(90deg,#40ced3,#26acb1);
  transform: translateY(-8px);
    border-radius: 8px !important;
  outline:none;
  /*filter: drop-shadow(0 0 3px #40ced3) drop-shadow(0 0 0px #40ced3);*/
}

@media (max-width:1200px) {
  .cards {
    grid-template-columns: repeat(2,1fr);
  outline:none;
  }
  .card:hover,.card:focus {
    outline:none !important;
    }
}


@media (max-width:900px) {
  .cards {
    grid-template-columns: repeat(1,1fr);
  outline:none;
  }
  h1{
    font-size: 2.5rem;
  }
  .titrehaut span.auto-input,.titrehaut span.typed-cursor {
    font-size: 1em;
  }

}

@media (max-width:785px) {
  h1{
    font-size: 2rem;
  }
  .titrehaut span.auto-input,.titrehaut span.typed-cursor {
    font-size: 1em;
  }
}

@media (max-width:500px) {
  .card {
    height: 280px;
    width: 310px;
  outline:none;
  }
  .card i {
    margin-top: 20px;
    }
    p {
      width: 100%;
    }
    .service-wrapper {
      margin-bottom: 67px;
  }
  .linktxt {
    gap: 210px;
  }
  .card:hover,.card:focus {
    outline:none !important;
    border-radius: 8px !important;
    }

}