/* Lines
------------------------------------------------ */

.lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 999;
}

.lines .line {
  position: relative;
  height: 100vh;
  border-left: 1px solid rgba(156, 156, 156, 0.1)
}

.lines .line:last-child {
  border-right: 1px solid rgba(156, 156, 156, 0.1)
}

/* Elements 
------------------------------------------------ */

.element-5 {
  position: relative;
}

@media(min-width:767px) {
.element-1,
.element-2,
.element-3,
.element-4,
.element-5,
.element-6,
.element-7 {
  position: relative;
}

.element-1::before,
.element-1::after,
.element-2::before,
.element-2::after,
.element-3::before,
.element-3::after,
.element-4::before,
.element-4::after,
.element-5::before,
.element-5::after,
.element-6::before,
.element-6::after,
.element-7::after {
  position: absolute;
  content: ""
}

.element-1::before {
  top: -10px;
  right: 24%;
  width: 70px;
  height: 70px;
  border-radius: 24px;
  background: var(--color-accent-1);
}

.element-1::after {
  top: 60px;
  right: 38%;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: var(--color-dark-1);
}

.element-2::before {
  top: -205px;
  left: 40px;
  width: 117px;
  height: 117px;
  border-radius: 24px;
  background: var(--color-accent-1);
}

.element-2::after {
  top: -80px;
  left: 190px;
  width: 58px;
  height: 58px;
  border-radius: 24px;
  background: #fff;
}

.element-3::before {
  top: -94px;
  left: -100px;
  width: 229px;
  height: 229px;
  border-radius: 32px;
  background: var(--color-accent-1);
  z-index: -1;
}

.element-3::after {
  top: -178px;
  left: 155px;
  width: 85px;
  height: 85px;
  border-radius: 24px;
  background: var(--color-dark-1);
}
.element-4::before {
  top: -94px;
  right: -100px;
  width: 229px;
  height: 229px;
  border-radius: 32px;
  background: var(--color-accent-1);
  z-index: -1;
}

.element-4::after {
  top: -178px;
  right: 155px;
  width: 85px;
  height: 85px;
  border-radius: 24px;
  background: var(--color-dark-1);
}
.element-5::before {
  top: -94px;
  left: -100px;
  width: 229px;
  height: 229px;
  border-radius: 32px;
  background: var(--color-accent-1);
  z-index: -1;
}

.element-5::after {
  top: -178px;
  left: 155px;
  width: 85px;
  height: 85px;
  border-radius: 24px;
  background: var(--color-dark-1);
}
.element-6::before {
  top: -44px;
  left: -60px;
  width: 38px;
  height: 38px;
  border-radius: 100%;
  background: var(--color-dark-1);
  z-index: -1;
}

.element-6::after {
  top: 18px;
  left: -105px;
  width: 18px;
  height: 18px;
  border-radius: 100%;
  background: var(--color-dark-1);
}

.element-7::after {
  top: 58px;
  left: -105px;
  width: 18px;
  height: 18px;
  border-radius: 100%;
  background: var(--color-accent-1);
}
}

.underline-text {
  position: relative
}

.underline-text::before {
  position: absolute;
  content: "";
  bottom: 10px;
  left: 0;
  right: -14px;
  height: 20px;
  background: var(--color-accent-1);
  opacity: .6;
  z-index: -1;
}

/* Breadcrumbs 
----------------------------------------------- */

.breadcrumbs-wrap,
.taxonomy-wrap {
  display: flex;
}

.breadcrumbs-wrap .material-icons,
.taxonomy-wrap .material-icons {
  font-size: 15px;
}

/* Hero
----------------------------------------------- */

.hero h1 {
  font-weight: 700;
}

@keyframes FadeIn {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  40% {
    opacity: 0;
  }

  60% {
    opacity: 1;
  }

  80% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

#Path_439,
#Path_440,
#Path_441,
#Path_442,
#Path_443,
#Path_448,
#Path_444,
#Path_445,
#Path_447 {
  opacity: 0;
  animation: FadeIn 10s infinite forwards;
}


#Path_442 {
  animation-delay: .5s;
}

#Path_440 {
  animation-delay: 1s;
}

#Path_441 {
  animation-delay: 1.5s;
}

#Path_439 {
  animation-delay: 2s;
}

#Path_443 {
  animation-delay: 2.5s;
}


#Path_448 {
  animation-delay: .5s;
}

#Path_444 {
  animation-delay: 1.5s;
}

#Path_445 {
  animation-delay: 2s;
}

#Path_447 {
  animation-delay: 2.5s;
}


/* Your contact
----------------------------------------------- */

.your-contact-wrap {
  position: relative
}

.your-contact-wrap::before {
  position: absolute;
  content: "";
  top: -80px;
  bottom: -80px;
  left: -120px;
  right: -120px;
  border-radius: 20px;
  background: var(--color-light-1);
  box-shadow: 0px 3px 50px #00000014
}

.your-contact-wrap .svg-icon {
  width: 60px;
  height: 60px;
  text-align: center
}

.your-contact-wrap form input[type="text"] {
  padding-left: 15px;
  padding-right: 15px;
}

.swiper-slide .swiper-card-img svg rect {
  transition: .3s ease-in-out
}

.swiper-slide-active .swiper-card-img svg rect {
  fill: var(--color-accent-1)
}

.swiper-card-img {
  border-radius: 45px
}

.svg-icon {
  padding: 12px;
}

/* Service
----------------------------------------------- */

@media(max-width:767px) {
  .section-slider-projects {
    text-align: center;
  }
}


/* How we work
----------------------------------------------- */

.q-tabs {
  overflow: hidden;
}

.q-tabs input {
  display: none;
}

.q-tabs input#tab1:checked~.line {
  left: 0%;
}

.q-tabs input#tab1:checked~.content-container #c1 {
  opacity: 1;
}

.q-tabs input#tab2:checked~.line {
  left: 25%;
}

.q-tabs input#tab2:checked~.content-container #c2 {
  opacity: 1;
}

.q-tabs input#tab3:checked~.line {
  left: 50%;
}

.q-tabs input#tab3:checked~.content-container #c3 {
  opacity: 1;
}

.q-tabs input#tab4:checked~.line {
  left: 75%;
}

.q-tabs input#tab4:checked~.content-container #c4 {
  opacity: 1;
}

.q-tabs label {
  display: inline-flex;
  background: #F5F5F5;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 77px;
  border-radius: 70px;
  box-shadow: 0px 3px 6px #00000029;
  transition: 0.25s ease;
  cursor: pointer;
}

.q-tabs-svg {
  position: relative;
  z-index: 0;
}

.q-tabs-svg::before {
  position: absolute;
  content: "";
  top: -15px;
  bottom: -15px;
  left: -25px;
  right: -15px;
  background: var(--color-accent-1);
  border-radius: 50%;
  opacity: 0;
  transition: .3s ease-in-out;
  z-index: -1;
  width: 60px
}

.q-tabs-title {
  display: none;
  margin-left: 22px;
  color: #fff
}

.q-tabs input:checked + label {
  width: 200px;
  background: var(--color-dark-1)
}

.q-tabs input:checked + label svg {
  transform: scale(.8);
}

.q-tabs input:checked + label .q-tabs-svg {
  transform: translateX(-15px);
}

.q-tabs input:checked+label svg path {
  stroke: #fff;
}

.q-tabs input:checked+label .q-tabs-svg::before {
  opacity: 1;
}

.q-tabs input:checked+label #Vector {
  stroke: transparent !important;
}

.q-tabs input:checked+label .q-tabs-title {
  display: block;
}

.q-tabs .content-container {
  position: relative;
  height: 100%;
  min-height: 350px
}

.q-tabs .content-container .content {
  position: absolute;
  padding: 10px;
  width: 100%;
  top: 0;
  opacity: 0;
  transition: 0.25s ease;
  color: #333;
}

@media(min-width:768px) {
  .how-we-work::before {
    position: absolute;
    content: url("../img/general/shape-right.svg");
    top: -200px;
    right: -440px;
    z-index: 0
  }  
  .q-tabs .content-container {
    min-height: 200px
  }
}

/* Qamitech number
------------------------------------------------ */

@media(min-width:768px) {
.qamitech-number::before {
  position: absolute;
  content: url("../img/general/shape-left.svg");
  top: -240px;
  left: -440px;
  z-index: 0
}
}


/* High Level
  ---------------------------------------------- */

.high-level-card {
  position: relative;
  border-radius: 20px;
  transition: .3s ease-in-out
}

.high-level-card::before {
  position: absolute;
  content: url("../img/general/ArrowUpRightLight.svg");
  top: calc(50% - 15px);
  right: 50px;
  opacity: .5;
  transition: .3s ease-in-out
}

.high-level-card h3 {
  font-weight: 500;
  opacity: .6;
  transition: .3s ease-in-out
}

.high-level-card:hover {
  background: transparent;
}

.high-level-card:hover h3,
.high-level-card:hover::before {
  opacity: 1;
}


/* FAQ
------------------------------------------------ */


#rank-math-faq .rank-math-list-item {
  transition: .3s;
}

#rank-math-faq .rank-math-question {
  margin: 0;
  padding: 30px 56px 0 0;
  cursor: pointer;
  position: relative;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: block;
  transition: .3s ease-in-out;
}

#rank-math-faq .rank-math-question:after {
  content: url("../img/general/ArrowRight.svg");
  position: absolute;
  top: calc(50% + 20px);
  right: 0;
  width: 50px;
  text-align: center;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: .3s ease-in-out;
}

#rank-math-faq .rank-math-question.collapse:after {
  content: url("../img/general/ArrowUpRight.svg")
}

.rank-math-question.collapse ~ .rank-math-list-item {
  background: var(--color-gray-2);
}

.rank-math-question.collapse h4 {
  font-weight: 600;
}

#rank-math-faq .rank-math-answer {
  margin: 0;
  padding: 15px 0;
  display: none
}

#rank-math-faq .rank-math-answer p {
  opacity: .7;
}

#rank-math-faq .RMFA-quesion-button {
  all: unset !important
}

.rank-math-question.collapse,
.rank-math-answer.collapse {
  position: relative;
}

.rank-math-question.collapse::before
.rank-math-answer.collapse::before {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  left: -40px;
  right: -50px;
  background: var(--color-gray-1);
  border-radius: 20px;
}

@media(min-width:768px) {
  #rank-math-faq .rank-math-list-item {
    padding: 10px 50px;
  }
}


/* Latest post
  ---------------------------------------------- */

  .latest-post-link {
    position: relative;
  }

  .latest-post-link::before {
    position: absolute;
    content: "";
    bottom: -3px;
    left: 2px;
    width: calc(100% - 13px);
    height: 2px;
    background: var(--color-dark-2);
  }

  /* Latest post
  ---------------------------------------------- */
.latest-post-item img {
  border-radius: 20px;
}


/* Contact with us
  ---------------------------------------------- */

.contact-us-wrap {
  position: relative;
  padding: 20px;
  background: var(--color-dark-2);
  border-radius: 22px;
  z-index: 9
}

.contact-us::before {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  left: -25px;
  right: -25px;
  background: var(--color-dark-1);
  z-index: 0;
}

@media(min-width:768px) {
.contact-us-wrap {
  padding: 80px 120px
}
.contact-us::before {
  top: 50%;
  bottom: 0;
  left: 0;
  right: 0;
}
}


/* Calculate section
------------------------------------------------ */

.calculate-section::before {
  position: absolute;
  content: url("../img/general/shape-right.svg");
  top: -70px;
  right: -440px;
  z-index: 1;
}

.calculate-section::after {
  position: absolute;
  content: url("../img/general/shape-left.svg");
  top: -450px;
  left: -440px;
  z-index: 0
}


/* Footer
  ---------------------------------------------- */

.newsletter-form input {
  padding: 10px;
  width: fit-content;
  background: transparent;
  color: #fff;
  border: none;
  border-bottom: 1px solid #fff2;
}



.service-icons svg rect {
  transition: .3s cubic-bezier(0.39, 0.575, 0.565, 1);
}

.service-icons svg:hover rect {
  fill: var(--color-accent-1);
}

/* Contact page
--------------------------------------- */

.contact-section::before {
  position: absolute;
  content: url("../img/general/shape-left-2.svg");
  top: 440px;
  right: -120px;
  z-index: 1;
}

.contact-icons svg rect {
  transition: .3s cubic-bezier(0.39, 0.575, 0.565, 1);
}

.contact-icons svg:hover rect {
  fill: var(--color-accent-1);
}