@import url('https://fonts.googleapis.com/css2?family=Amiri+Quran&family=Courgette&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');
@import url("./skin.css");
@import url("./basics.css");

:root {
  --bg-white: #F6F6FB;
  --dark-black: rgb(31, 31, 31);
  --light-black: #464646;
  --white-red: #F2E3D5;
  --orange-primary: #ee4141;
  --primary-red: #DB2B30;
}


/* -------- About hero Section ----------------------- */
.about-hero-section {
  background: rgba(31,31,31,0.7) url(./images/facade2.webp) no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    height: 78vh;  
    /* width: 100vw!important;  */
  

}

.text-cover {
  padding: 8px 50px;
  margin-bottom: 5px;
  background-color: rgba(0, 0, 0, 0.277);
}

.text-cover h1 {
  font-size: 1.8rem;
  margin-bottom: 5px;
  /* margin-top: 500px; */
  font-weight: 500;
}

.text-cover h2 {
  font-size: 1.8rem;
  margin-bottom: 5px;
  margin-top: 5px;
  font-weight: 500;
  padding: 0px !important;
}

/* -------- timeline section ( timeline.css ) ----------------------- */


/* -------- CEO section  ----------------------- */

.ceo-about {
  padding: 10px;
}

.ceo-title-header h1 {
  color: #000;
  margin-bottom: 5px;

  font-size: 1.5rem;
}

.ceo-about article {
  color: #333;
  font-size: 1rem;
}


.dlab-separator-outer {
  text-align: center !important;

}

.dlab-separator-outer-about {
  text-align: center !important;

}

/* -------- Company section ----------------------- */

.our-company-section {
  background-color: #000;

}

.about-company {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 30px;

}

.company-pic {
  width: 24%;
  padding: 10px;

}

.company-about {
  width: 50%;
  padding: 10px;
}

.company-pic img {
  width: 100%;
  border-radius: 5px;
  /* clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); */
  user-select: none;
  -webkit-user-drag: none;
}

.company-title-header {
  margin-bottom: 10px;
}

.company-title-header h1 {
  color: #fff;
  margin-bottom: 5px;
  font-size: 1.5rem;
}

.company-about article {
  color: #fafafa;
  font-size: 1rem;
}

/* -------- produits section ----------------------- */

/* -------- TEAM section ----------------------- */

.dlab-separator-outer-team {
  text-align: left !important;
}

.statut-worker {
  margin-top: -15px !important;
}

/* .slick-track {
  position: relative;
  top: 0px !important;
  left: 14% !important;

} */

.team-cards {
  width: 70%;
  justify-content: center;
  justify-items: center;
  display: flex;
  margin: auto !important;

}

.card-team {
  width: 280px;
  height: 376px;
  border-radius: 0px 20px 0px 20px;
  border: none;
  padding-left: 10px;
  padding-right: 10px;
  margin-left: 10px;
  margin-right: 10px;
  box-shadow: 8px 8px 48px -9px rgba(0, 0, 0, 0.2);
  transition: transform .2s;
  /* Animation */
}

.card-team:hover {
  transform: scale(1.2);
  /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  cursor: pointer;
}

.animate__animated.animate__zoomIn {
  --animate-duration: 2s;
}

:root {
  --animate-duration: 800ms;
  --animate-delay: 0.9s;
}

.card-team img {
  margin-top: 0px;
  width: 100%;
  height: 100%;
  border-radius: 0px 20px 0px 20px;
  border: #ee4141 4px solid;
}

/* .text-white{
  margin-left: 20px;
}
.text-name{
  margin-left: 2%;
} */
/* .footer-col-esa-identity{
  margin-left: -653px;
}
.footer-col-esa-newsletters{
  margin-left: 90%;
  margin-top: -159px;
}
.section-head-contact {
  width: 200px !important;} */
/* -------- Equipement section ----------------------- */


/* -------- @media ----------------------- */


@media screen and (min-width: 180px) and (max-width: 280px) {

  .text-cover h1 {
    font-size: 28px !important;
  }

  .text-cover h2 {
    font-size: 20px !important;
  }

  .big-title {
    font-size: 20px !important;
    font-weight: 700 !important;
  }

  .ceo-title-header h1 {
    font-size: 17px !important;
    font-weight: 700 !important;
  }

  .company-title-header h1 {
    font-size: 17px !important;
    font-weight: 700 !important;
    text-align: center !important;
  }

}

@media screen and (min-width: 281px) and (max-width: 400px) {

  .text-cover h1 {
    font-size: 28px !important;
  }

  .text-cover h2 {
    font-size: 20px !important;
  }

  .big-title {
    font-size: 20px !important;
    font-weight: 700 !important;
  }

  .ceo-title-header h1 {
    font-size: 17px !important;
    font-weight: 700 !important;
  }

  .company-title-header h1 {
    font-size: 17px !important;
    font-weight: 700 !important;
    text-align: center !important;
  }
}

@media screen and (min-width: 401px) and (max-width: 500px) {
  .text-cover h1 {
    font-size: 28px !important;
  }

  .text-cover h2 {
    font-size: 20px !important;
  }

  .big-title {
    font-size: 20px !important;
    font-weight: 700 !important;
  }

  .ceo-title-header h1 {
    font-size: 17px !important;
    font-weight: 700 !important;
  }

  .company-title-header h1 {
    font-size: 17px !important;
    font-weight: 700 !important;
    text-align: center !important;
  }
}

@media screen and (min-width: 501px) and (max-width: 600px) {
  .text-cover h1 {
    font-size: 28px !important;
  }

  .text-cover h2 {
    font-size: 20px !important;
  }

  .big-title {
    font-size: 22px !important;
    font-weight: 700 !important;
  }

  .ceo-title-header h1 {
    font-size: 17px !important;
    font-weight: 700 !important;
  }

  .company-title-header h1 {
    font-size: 17px !important;
    font-weight: 700 !important;
    text-align: center !important;
  }
}

@media screen and (min-width: 601px) and (max-width: 700px) {
  .text-cover h1 {
    font-size: 28px !important;
  }

  .text-cover h2 {
    font-size: 20px !important;
  }

  .big-title {
    font-size: 22px !important;
    font-weight: 700 !important;
  }

  .ceo-title-header h1 {
    font-size: 17px !important;
    font-weight: 700 !important;
  }

  .company-title-header h1 {
    font-size: 17px !important;
    font-weight: 700 !important;
    text-align: center !important;
  }
}

@media screen and (min-width: 701px) and (max-width: 800px) {
  .text-cover h1 {
    font-size: 28px !important;
  }

  .text-cover h2 {
    font-size: 20px !important;
  }

  .big-title {
    font-size: 22px !important;
    font-weight: 700 !important;
  }

  .ceo-title-header h1 {
    font-size: 17px !important;
    font-weight: 700 !important;
  }

  .company-title-header h1 {
    font-size: 17px !important;
    font-weight: 700 !important;
    text-align: center !important;
  }
}

@media screen and (min-width: 801px) and (max-width: 900px) {
  .text-cover h1 {
    font-size: 28px !important;
  }

  .text-cover h2 {
    font-size: 20px !important;
  }

  .big-title {
    font-size: 22px !important;
    font-weight: 700 !important;
  }

  .ceo-title-header h1 {
    font-size: 17px !important;
    font-weight: 700 !important;
  }

  .company-title-header h1 {
    font-size: 17px !important;
    font-weight: 700 !important;
    text-align: center !important;
  }
}

@media screen and (min-width: 901px) and (max-width: 1000px) {
  .text-cover h1 {
    font-size: 28px !important;
  }

  .text-cover h2 {
    font-size: 20px !important;
  }

  .big-title {
    font-size: 22px !important;
    font-weight: 700 !important;
  }

  .ceo-title-header h1 {
    font-size: 17px !important;
    font-weight: 700 !important;
  }

  .company-title-header h1 {
    font-size: 17px !important;
    font-weight: 700 !important;
    text-align: center !important;
  }
}
 @media screen and (max-width: 1170px) {
  .about-hero-section{
  background: rgba(31, 31, 31, 0.7) url(./images/facade2.webp) no-repeat;
  width: 100%;
  height: 77vh;
  background-size: cover;
  background-position: center top;
}
} 
@media screen and (max-width: 1000px) {
  .about-hero-section{
  background: rgba(31, 31, 31, 0.7) url(./images/facade2.webp) no-repeat;
  width: 100%;
  height: 77vh;
  background-size: cover;
  background-position: center top;
}
} 
@media screen and (max-width: 780px) {
  .about-hero-section{
  background: rgba(31, 31, 31, 0.7) url(./images/facade2.webp) no-repeat;
  width: 100vw;
  height: 60vh;
  background-size: cover;
  background-position: center top;
}
} 
@media screen and (max-width: 690px) {
  .about-hero-section{
  background: rgba(31, 31, 31, 0.7) url(./images/facade2.webp) no-repeat;
  width: 100vw;
  height: 55vh;
  background-size: cover;
  background-position: center top;
}
}
@media screen and (max-width: 630px) {
  .about-hero-section{
  background: rgba(31, 31, 31, 0.7) url(./images/facade2.webp) no-repeat;
  width: 100vw;
  height: 50vh;
  background-size: cover;
  background-position: center top;
}
}
@media screen and (max-width: 530px) {
  .about-hero-section{
  background: rgba(31, 31, 31, 0.7) url(./images/facade2.webp) no-repeat;
  width: 100vw;
  height: 45vh;
  background-size: cover;
  background-position: center top;
}
}
@media screen and (max-width: 460px) {
  .about-hero-section{
  background: rgba(31, 31, 31, 0.7) url(./images/facade2.webp) no-repeat;
  width: 100vw;
  height: 39vh;
  background-size: cover;
  background-position: center top;
}
}
@media screen and (max-width: 414px) {
  .about-hero-section{
  background: rgba(31, 31, 31, 0.7) url(./images/facade2.webp) no-repeat;
  width: 100vw;
  height: 35vh;
  background-size: cover;
  background-position: center top;
}
}
@media screen and (max-width: 370px) {
  .about-hero-section{
  background: rgba(31, 31, 31, 0.7) url(./images/facade2.webp) no-repeat;
  width: 100vw;
  height: 31vh;
  background-size: cover;
  background-position: center top;
}
}
@media screen and (max-width: 330px) {
  .about-hero-section{
  background: rgba(31, 31, 31, 0.7) url(./images/facade2.webp) no-repeat;
  width: 100vw;
  height: 28vh;
  background-size: cover;
  background-position: center top;
}
}
@media screen and (min-width: 1001px) and (max-width: 1204px) {
  .text-cover h1 {
    font-size: 28px !important;
  }

  .text-cover h2 {
    font-size: 20px !important;
  }

  .big-title {
    font-size: 22px !important;
    font-weight: 700 !important;
  }

  .ceo-title-header h1 {
    font-size: 17px !important;
    font-weight: 700 !important;
  }

  .company-title-header h1 {
    font-size: 17px !important;
    font-weight: 700 !important;
    text-align: center !important;
  }
}

@media screen and (min-width: 1205px) and (max-width: 1400px) {
  .text-cover h1 {
    font-size: 28px !important;
  }

  .text-cover h2 {
    font-size: 20px !important;
  }

  .big-title {
    font-size: 22px !important;
    font-weight: 700 !important;
  }

  .ceo-title-header h1 {
    font-size: 17px !important;
    font-weight: 700 !important;
  }

  .company-title-header h1 {
    font-size: 17px !important;
    font-weight: 700 !important;
    text-align: center !important;
  }
}

@media screen and (min-width: 1401px) {
  .text-cover h1 {
    font-size: 28px !important;
  }

  .text-cover h2 {
    font-size: 20px !important;
  }

  .big-title {
    font-size: 22px !important;
    font-weight: 700 !important;
  }

  .ceo-title-header h1 {
    font-size: 17px !important;
    font-weight: 700 !important;
  }

  .company-title-header h1 {
    font-size: 17px !important;
    font-weight: 700 !important;
    text-align: center !important;
  }
}



@media screen and (max-width: 1390px) {
  .ceo-paragraph {
    width: 100% !important;
    padding-right: 1.5rem !important;
  }
}

@media screen and (max-width: 1390px) {
  .ceo-about {
    width: 50% !important;
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }

  .company-pic {
    width: 34% !important;
  }
}

@media screen and (max-width: 1050px) {
  .ceo-row {
    flex-direction: column-reverse !important;
  }

  .company-pic {
    width: 49% !important;
  }

  .ceo-about {
    width: 60% !important;

  }

  .ceo-about {
    padding-top: 3rem !;
  }

  .ceo-title-header h1 {
    text-align: center !important;
  }

  .dlab-separator-outer-footer1 {
    overflow: hidden;
  }

  .company-title-header2 h1 {
    text-align: center !important;
    font-size: 20px !important;
  }

}

@media screen and (min-width: 1050px) {

  .ceo-title-header h1 {
    text-align: left !important;
  }

  .dlab-separator-outer-footer1 {
    overflow: hidden;
    width: 100px !important;
    text-align: left !important;
  }

  .company-title-header2 h1 {
    text-align: left !important;
    font-size: 20px !important;
  }

}


@media screen and (max-width: 900px) {
  .ceo-about {
    width: 80% !important;
    margin-bottom: 1.5rem !important;
  }

  .company-pic {
    width: 66% !important;
  }

}

@media screen and (max-width: 700px) {
  .ceo-about {
    width: 97% !important;

  }

}

@media screen and (max-width: 528px) {
  .ceo-title-header {
    margin-left: -10%;
  }
}

@media screen and (max-width: 527px) {
  .ceo-about {
    width: 100% !important;
    padding-right: 1rem !important;
    padding-left: 3rem !important;
  }

  .company-pic {
    width: 77% !important;
  }
}

@media screen and (max-width: 362px) {

  .ceo-title-header {
    margin-left: -18%;
  }
}

@media screen and (max-width: 768px) {
  .about-company {
    gap: 10px;
  }

  .company-pic {
    width: 100%;
  }

  .company-about {
    width: 100%;
  }

  .ceo-about {
    width: 100%;
  }
}


/* -------- END  @media ----------------------- */