/* -------------Nav position-------------*/

.highlight_nav{
  left: 11px;
  width: 78px;
}  

  /* ----------------------------------- */
  /*             Hero Section            */
  /* ----------------------------------- */
  
  .hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  h1 {
    font-size: 7vw;
    text-transform: uppercase;
    text-align: center;
    
    @media(min-width: 981px) and (max-width: 1400px){
      margin-top: 6vh;
    }

    @media(max-width: 980px){
      font-size: 9vw;
  }

    @media(max-width: 640px){
      font-size: 10vw;
  }
  }
  
  .hero p {
    font-size: 2.4rem;
    text-align: center;
    letter-spacing: 1px;


    @media(max-width: 980px){
        margin-top: 10px;
        font-size: 1.8rem;
    }
  }
  
  .hero svg {
    margin-top: 40px;
    animation: upNdown 3s infinite linear;
  }
  
  @keyframes upNdown {
    50% { 
      transform: translateY(-15px); 
    }
  }

  /* ----------------------------------- */
  /*             What We Do              */
  /* ----------------------------------- */

.services{
  position: relative;
    width: 90%;
    margin: 0 auto;

    padding-top: 20px;
    padding-bottom: 50px;

    @media(max-width: 980px){
      width: 90%;
      padding-bottom: 25px;
    }
}

.text-arrow_services{

  position: sticky;
  top: 20vh;

  margin-bottom: 50px;

    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    @media(max-width: 981px){
      font-size: 5.8rem;
    }

    @media(max-width: 680px){
      font-size: 4.8rem;     
    }
    @media(max-width: 980px){
      top: 15vh;
    }
}

.text-arrow_services h2{
    font-size: 5.5vw;
    text-transform: uppercase;

    line-height: 1em;

    white-space: nowrap;

    @media(max-width: 981px){
      font-size: 5.8rem;
    }

    @media(max-width: 680px){
      font-size: 4.8rem;     
    }
}

.line-1-staggered{
  overflow: hidden;
}

.line-2-staggered{
    overflow: hidden;
    margin-left: 80px;

    @media(max-width: 980px){
      margin-left: 28px;
    }
}

.text-arrow_services svg{
    width: 150px;

    @media(max-width: 980px){
      width: 80px;
    }
}

.text-arrow_services svg path {
  transform-box: fill-box;
  transform-origin: center center;
  transform: rotate(90deg);
}

.split-char {
  position: relative;
  opacity: 0;
  transform: translateY(5vw); 
  transition: transform 0.7s ease-in-out, opacity 0.7s ease-in-out; 

  display: inline-block;

  @media(max-width: 980px){
    transform: translateY(44px); 
  }
}

@media(prefers-reduced-motion){
  .split-char{
    opacity: 1;
    transform: translateY(0); 
    transition: none;
  }
}

.aniSplitChar {
  opacity: 1;
  transform: translateY(0); 
}


.split-char:nth-child(2){
  transition-delay: 0.15s;
}
.split-char:nth-child(3){
  transition-delay: 0.3s;
}
.split-char:nth-child(4){
  transition-delay: 0.45s;
}
.split-char:nth-child(5){
  transition-delay: 0.6s;
}
.split-char:nth-child(6){
  transition-delay: 0.75s;
}
.split-char:nth-child(7){
  transition-delay: 0.9s;
}



/*---------Animated services-------------*/

.container_services{
    
  background-color: var(--black);
    border-radius: 15px;
    overflow: hidden;

    padding: 50px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    opacity: 1;
    transform: translate3d(0px, 0px, 0px) scale(1, 1);


    @media(min-width: 981px){
    top: 10vh;
    position: sticky;
    height: 80vh;
    margin-bottom: 100px;
    }

    @media(max-width: 980px){
      flex-wrap: wrap;
      padding: 0px;
      gap: 20px;

      margin-bottom: 40px;
    }
}

.container_services:nth-child(1){
  z-index: 1;
}
.container_services:nth-child(1){
  z-index: 2;
}
.container_services:nth-child(1){
  z-index: 3;
}

.content_services{
  color: var(--white);

  width: 47.5%;

  line-height: 1.1em;

  display: flex;
  align-items: flex-start;
  flex-direction: column;

  @media(max-width: 981px){
    width: 100%;
    order: 1;

    padding: 0px 20px;
  }

}

.content_services h3{
  font-size: 5vw;
  line-height: 1.1em;

  @media(max-width: 981px){
    font-size: 3.8rem;
  }
}

/*Marquee*/

.services-panel{
  position: relative;

  display: flex;
  justify-content: flex-start;
  gap: 10px;

  margin: 30px 0px 25px 0px;
  padding: 2px 0px;

  width: 100%;

  overflow: hidden;
  white-space: nowrap;

  scrollbar-width: none;
  user-select: none;

  box-shadow: inset 10px 0 10px -10px rgba(59,57, 63, 0.9),
  inset -10px 0 10px -10px rgba(59, 57, 63, 0.9);

  border-radius: 25px;
}

.services-panel p{
  display: inline-block;
  padding: 8px 32px;
  font-size: 1.3rem;

  border: 1px solid var(--white);
  border-radius: 25px;

  white-space: nowrap;

}

/*----*/


/*Marquee End*/

p.des_services{
  font-family: 'Poppins Light', sans-serif;
}

.content_services a{
  z-index: 5;

  margin-top: 35px;
  color: var(--black);
  background-color: var(--white);

  border: 1px solid var(--white);
  padding: 3px 36px 9px 36px;
  border-radius: 30px;

  text-align: center;
  font-weight: 600;

  /* width: 100%; */
  text-decoration: none;

  transition: color 0.4s ease, background-color 0.4s ease, fill 0.4s ease;

  @media(max-height: 620px) and (min-width: 980px){
    display: none;
  }

  @media(max-width: 981px){
    margin-top: 24px;
    margin-bottom: 30px;
  }

}

.content_services a:hover{
  background-color: transparent;
  color: var(--white);
  fill: var(--white);
}


.content_services a p svg{
  width: 25px;
  position: relative;
  top: 7px;

  margin-left: 5px;

  fill: var(--black);

  transition: transform 0.4s ease, margin 0.4s ease;
}

.content_services a:hover p svg{
  fill: var(--white);
  transform: rotate(45deg);
  margin-left: 12px;
}

.image-container_services{

  width: 47.5%;
  max-height: 100%;
  position: relative;

  display: flex;
  justify-content: flex-end;

  @media(max-width: 981px){
    width: 100%;
  }
}

.image-container_services picture img{
  
  height: 100%;
  width: 100%;

  object-fit: cover;

  border-radius: 15px;

  @media(max-width: 981px){
    border-radius: 0;
  }
}

/*----------------Case studies--------------*/

.case-studies_heading{
  width: 80%;
  margin: 0 auto;
  margin-bottom: 80px;

  display: flex;
  justify-content: space-between;


  @media(max-width: 980px){
    width: 90%;
    flex-wrap: wrap;
    margin-bottom: 20px;
  }

}

.case-studies_heading h2{
  font-size: 5.5vw;
    text-transform: uppercase;

    line-height: 1em;

    white-space: nowrap;

    @media(max-width: 981px){
      font-size: 5.8rem;
    }

    @media(max-width: 680px){
      font-size: 4.8rem;     
    }

}

.case-studies_heading .cs_left{
  width: 55%;
  align-self: flex-end;

  @media(max-width: 980px){
    width: 100%;
    margin-bottom: 25px;
    order: 1;
  }
}

.case-studies_heading h3{

  font-size: 3vw;
  line-height: 1.1em;

  @media(max-width: 981px){
    font-size: 5vw;
  }

  @media(max-width: 680px){
    font-size: 7.5vw;
  }

}

.case-studies_heading p{

  font-size: 1.8rem;

  margin-top: 20px;
  margin-bottom: 80px;

  @media(max-width: 980px){
    margin-bottom: 60px;
  }
}

.case-studies_heading .cs_right{
  width:45%;

  @media(max-width: 980px){
    width: 100%;
    margin-bottom: 0px;
    margin-top: 20px;
  }
}


.case-studies_container{
  background-color: var(--black);

  padding-top: 100px;
  padding-bottom: 80px;

  @media(max-width: 980px){
    padding: 40px 0px;
  }

}

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

.case-studies{
  width: 80%;
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;

  @media(max-width: 1250px){
    grid-template-columns: repeat(2, 1fr);
  }

  @media(max-width: 980px){
    width: 90%;
    grid-template-columns: 1fr;
  }
}

.case-studies a{
  text-decoration: none;
}

.case-study_item{
  border-radius: 10px;
  overflow: hidden;

  transition: background 0.5s ease-in-out, color 0.5s ease-in-out;

}

.case-study_item img{
  width: 100%;
  height: 100%;
  display: block;
  
}

.case-study_item-content{
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 20px;

  text-transform: uppercase;

  border: 2px solid var(--white);
  border-top: none;
  border-radius: 0px 0px 10px 10px;
}

.case-study_item-content h4{

  font-size: 1.8rem;
}

.case-study_item-content svg{
  transform: rotate(-45deg);
  transition: transform 0.5s ease-in-out;
  font-size: 2.1rem;
  width: 32px;

  fill: var(--white);

  transition: transform 0.5s ease-in-out;
}

.case-study_item:hover svg{
  transform: rotate(45deg);
  fill: var(--white);
}

/**/


/*---------------FAQ's--------------------*/

.faqs_container{
  background-color: var(--black);

  padding: 120px 0px;
  @media(max-width: 980px){
    padding: 60px 0px;
  }
}

.faqs{
  width: 80%;
  margin: 0 auto;


  @media(max-width: 980px){
    width: 90%;
  }
}

.faqs_grid{
  margin-top: 5px;
  width: 100%;

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: 5px;

  @media(min-width:981px){
    margin-top: 10px;
  }
}

.faqs h2{
  font-size: 10rem;

  @media(max-width: 980px){
    font-size: 5.5rem;
  }
}

.faq_item{
  margin-top: 20px;
  padding: 4px 24px;

  border: 2px solid var(--white);
  border-radius: 10px;

  @media(max-width: 980px){
    padding: 4px 16px;
  }
}

.question{

  display: inline-flex;
  align-items: center;

  margin-top: 15px;
  margin-bottom: 15px;
}

.question h3{
  font-size: 3rem;
  font-weight: 500;

  @media(max-width: 980px){
    font-size: 2.4rem;
  }
}

.question svg{
  width: 22px;
  stroke-width: 16;

  fill: #fff;
  color: #fff;

  margin-right: 10px;

  transition: transform .7s ease;

  flex-shrink: 0;

  @media(max-width: 980px){
    width: 16px;
    align-self: center;
  }

}

.answer{
  max-height: 0;
  overflow: hidden;
  transition: max-height .7s ease, margin 0.6s ease;
}

.faq_item.active .answer{
  max-height: 400px;
  margin-bottom: 15px;
}
.faq_item.active svg{
  transform: rotate(45deg);
}

.answer p{
  font-size: 2rem;
  line-height: 1.5em;

  @media(max-width: 980px){
    font-size: 1.7rem;
  }
}


/**/