@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500&display=swap');

:root{
    --bg-prime:  #D7E0EB;
    --bg-light:  #F9FBFC;
    --bg-dark:   #F0EFEF;
    --clr-black: #000000;
    --clr-white: #ffffff;
    --clr-accent: #F3DFD4;
    --clr-lite-black: #1A1A1A;
    --font-secondary: 'Archivo Black', sans-serif;
}
body,.site-wrapper{
  overflow-x: hidden;
}
*,::before,::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Space Grotesk', sans-serif;

}
.hidden{
  overflow: hidden !important;
}
h1,h2,h3{
    font-family: var(--font-secondary);
    }
    h1{
        font-size: 80px;
        color: var(--clr-black);
        font-size: calc(20px + (70 - 20) * ((100vw - 300px) / (1600 - 300)));
        padding: 30px 0px;
        text-transform: capitalize;
    }

a{
    text-decoration: none;
    color: var(--clr-white);
}

ul li{
    list-style: none;
}
.flexCenter{
    display: flex;
    justify-content: center;
    align-items: center;
}
.cwrap{
overflow-x:hidden;
}
.start-logo img{
  width: 100%;
  max-width: 14%;
  padding-top:20px
}
#home{
/* height: 100vh; */
background: var(--bg-light);

overflow: hidden;
}
.navigation{
    background: var(--clr-lite-black);
    width: 100%;
    max-width: 80%;
    margin: 0 auto;
    margin-top: 20px;
    position: relative;
    z-index: 100;
}
.navigation ul li a{
  position: relative;
  transition: 1s all;
}
.navigation ul li a:hover{
  color: var(--bg-prime);
}
.navigation > ul li a{
  font-size: 18px;
  position:relative;

}
.aactive{
  -webkit-text-fill-color: var(--clr-black) !important;
text-decoration: underline;
color: #000000;
}
.navigation > ul li a:not(.navigation ul li:last-of-type a):before{
  content: "";
  width: 0%;
  height: 2px;
  background: var(--clr-white);
  position: absolute;
  bottom: -2px;
  transition: 0.5s all cubic-bezier(.86,-0.13,.36,.99);
}
.navigation > ul li a:hover:before{
  width: 100% !important;
}
.navigation > ul li a.active:before{
  width: 100% !important;
}
.trigger-menu-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 23;
  transition: transform 0.4s;
}
.scroll-down .trigger-menu-wrapper {
  transform: none;
}
.scroll-up .trigger-menu-wrapper {

  transform: translateY(-200%);
}
.navigation ul li:last-of-type a{
    background: var(--clr-white);
    color: var(--clr-black);
    padding: 8px 25px;
    border-radius: 40px;
    display: block;
}
.c-btn-lg{
    background-color: var(--clr-black);
    padding: 15px 40px;
    border-radius: 40px;
    text-transform: uppercase;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
    position: relative;
    display: block;
    z-index: 20;
    position: relative;
    transition: .7s all !important;
}
.c-btn-lg:hover{
  padding: 15px 50px;
  color: var(--clr-white);
}
.hero-content{
  padding-top: 100px;
}
.hero-content .actions{
    position: relative;
}
/*.hero-content .actions::before{*/
/*    content: "";*/
/*    position: absolute;*/
/*    width: 50px;*/
/*    height: 50px;*/
/*    border: 7px solid #83CA9E;*/
/*    bottom: -20px;*/
/*    right: -20px;*/
/*    border-radius: 50%;*/
/*    z-index: 1;*/
/*}*/
.hero-content p{
    font-size: calc(10px + (25 - 10) * ((100vw - 300px) / (1600 - 300)));
    max-width: 62ch;
    padding: 20px 0px;
}

/* elements */
.slider-item.featured{
  position: relative;
  overflow: visible !important;
}

.owl-stage-outer{
  overflow: visible !important;
}
/*#home::before{*/
/*    content: "";*/
/*      position: absolute;*/
/*      top: 20px;*/
/*      left: 40px;*/
/*      background: url(assets/dots.png) no-repeat;*/
/*    background-size: contain;*/
/*    width: 70px;*/
/*    height: 140px;*/
/*    animation: 1s ease slideinDown ;*/

/*    }*/
/*  #home::after{*/
/*    content: "";*/
/*      position: absolute;*/
/*      top: 130px;*/
/*      left: 70px;*/
/*      background: #FAA719;*/
/*    border-radius: 50%;*/
/*    width: 70px;*/
/*    height: 70px;*/
/*    animation: 1s ease slideinUpLeft ;*/

/*    }*/
  /*#home .container::before{*/
  /*  content: "";*/
  /*    position: absolute;*/
  /*    top: 20px;*/
  /*    right: 40px;*/
  /*    background: url(assets/dots.png) no-repeat;*/
  /*  background-size: contain;*/
  /*  width: 70px;*/
  /*  height: 140px;*/
  /*}*/
  /*#home .container::after{*/
  /*  content: "";*/
  /*    position: absolute;*/
  /*    top: 130px;*/
  /*    right: 10px;*/
  /*    background: #F57025;*/
  /*  border-radius: 50%;*/
  /*  width: 70px;*/
  /*  height: 70px;*/
  /*  animation: 1s ease slideinUpLeft ;*/
  /*}*/
  .cube{
    position: absolute;
    top: 30%;
    left: 5%;
    width: 100%;
    max-width: 6%;
  }
  .red-circle{
    position: absolute;
    bottom: -10%;
    left: 9%;
    width: 200px;
    height: 200px;
    animation: 2s ease 0.5s both slideinRotate;
  }
  .red-circle img{
    width: 100%;
    object-fit: contain;

  }
 .squigly{
  position: absolute;
  bottom: 20%;
  left: 8%;
  animation: 2s ease 0.5s both slideinLeft;
 }
 .cwrap{
    position: relative;
    height: 100vh;
    overflow: hidden;
 }
 /*.cwrap::before{*/
 /*   content: "";*/
 /*   position: absolute;*/
 /*   bottom: 0px;*/
 /*   left: -1%;*/
 /*   width: 80px;*/
 /*   height: 80px;*/
 /*   border: 15px solid #83CA9E;*/
 /*   border-radius: 50%;*/
 /*   animation: slideinLeft 1s;*/
 /*}*/

/* .cwrap::after{*/
/*  content: "";*/
/*  position: absolute;*/
/*  bottom: -10px;*/
/*  left: 6%;*/
/*  width: 20px;*/
/*  height: 120px;*/
/*  background: url(assets/dots2.png) no-repeat;*/
/*  background-size: contain;*/
/*  animation: 1s ease slideinUp;*/
/*}*/
.grey-circle::before{
content: "";
position: absolute;
bottom: 3%;
right: 20%;
width: 70px;
height: 70px;
border-radius: 50%;
border: 15px solid #949399;
animation: 1s ease slideinDownLeft;
}
.grey-circle::after{
  content: "";
  position: absolute;
  bottom: 3%;
  right: 16%;
  width: 20px;
  height: 120px;
  background: url(assets/dots2.png) no-repeat;
  background-size: contain;
  animation: 1s ease slideinUp;
  }
  .blue-circle{
    position: absolute;
    bottom: 0%;
    right: 0%;
    width: 180px;
    height: 180px;
    animation: 2s ease 0.5s both slideinRotate;
  }
  .blue-circle img{
    width: 100%;
    object-fit: contain;

  }
  /* === portfolio Slider */
 .hero-portfolio{
  background: var(--bg-dark);
  padding-bottom: 100px;
      position: relative;

 }
 .hero-portfolio .slider-item{
  position: relative;
  overflow: visible !important;
}
/*.hero-portfolio .owl-item:nth-of-type(2)::before{*/
/*  content: "";*/
/*  position: absolute;*/
/*  width: 200px;*/
/*  height: 200px;*/
/*  top: -15%;*/
/*  left: -15%;*/
/*  background: url("/assets/latestprojects.png") no-repeat;*/
/*    background-size: auto;*/
/*  background-size: contain;*/
/*  z-index: 27;*/
/*}*/
/* .portfolio-slider-container{
  overflow-x: hidden;
} */
 .owl-dots{
  display: none
}
  .slider-item{
    width: 100%;
    transition: .8s all;

  }
  .slider-item:hover{
    transform: scale(1.1);
  }
  .owl-nav{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 350px
  }
  .portfolio-slider-container .owl-prev,
  .portfolio-slider-container .owl-next{
    width: 100px;
    height: 50px;
    position: relative !important;
  }
  .portfolio-slider-container .owl-prev i,
  .portfolio-slider-container .owl-next i{
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
  }


  .portfolio-slider-container .owl-prev::before{
  content: "";
  position: absolute;
  left: -106%;
  top: 49%;
  width: 100px;
  height: 4px;
  background-color: var(--clr-black);
  transition: 1s all cubic-bezier(.86,-0.13,.36,.99);
  }
  .portfolio-slider-container .owl-prev::after{
  content: "";
  width: 16px;
  height: 16px;
  background: transparent;
  border-left: 4px solid var(--clr-black);
  border-top: 4px solid var(--clr-black);
  position: absolute;
  left: -106%;
  top: 36%;
  transform: rotate(-50deg);
  transition: 1s all cubic-bezier(.86,-0.13,.36,.99);
  }
  .portfolio-slider-container .owl-prev:hover:before{
    width: 150px;
    left: -145%;
  }
  .portfolio-slider-container .owl-prev:hover:after{
    left: -145%;
  }
  /* next */
  .portfolio-slider-container .owl-next::before{
    content: "";
    position: absolute;
    right: -87%;
    top: 49%;
    width: 100px;
    height: 4px;
    background-color: var(--clr-black);
    transition: 1s all cubic-bezier(.86,-0.13,.36,.99);
    }
  .portfolio-slider-container .owl-next::after{
    content: "";
    width: 16px;
    height: 16px;
    background: transparent;
    border-left: 4px solid var(--clr-black);
    border-top: 4px solid var(--clr-black);
    position: absolute;
    right: -87%;
    top: 36%;
    transform: rotate(130deg);
    transition: 1s all cubic-bezier(.86,-0.13,.36,.99);
    }
  .portfolio-slider-container .owl-next:hover:before{
      width: 150px;
      right: -129%;
    }
  .portfolio-slider-container .owl-next:hover:after{
      right: -129%;
    }

     /* =============== mobile menu ==================*/

 .switch{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: 3%;
  right: 5%;
  z-index: 55;
  cursor: pointer;

  opacity: 0;
  z-index: 23;
 }
 .burger_line{
  display: block;
  width: 37px;
  height: 2px;
  margin-bottom: 5px;
  position: relative;

  background: #000000;
  border-radius: 3px;

  z-index: 22;

  transform-origin: 4px 0px;

  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
 }

 .line-cont{
  position: absolute;
  right: 5%;
  top: 4%;

 }
 .mobile-menu{
  position: fixed;
  width: 100%;
  height: 100%;
  padding: 50px;
  inset: 0;
  background: #ffffff;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transform: translate(100%, 0);
  z-index: 40;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  overflow: hidden;
 }
 .switch:checked ~ .mobile-menu
{
  transform: none;
}
.switch:checked ~ .line-cont span:first-of-type{
  opacity: 0;
}
.switch:checked ~ .line-cont span:nth-child(2){
  transform: rotate(40deg) translate(1px, -10px);
}
.switch:checked ~ .line-cont span:nth-child(3){
  transform: rotate(-40deg) translate(1px, 5px);
}
.mobile-menu_logo{
  display:flex;
  justify-content:space-between;
  align-items:center;

}
.mobilex {
  width: 50px;
  height: 50px;
 cursor: pointer;
  padding: 10px
}
.mobilex span{
    background: #000;
  width: 100%;
  height: 2px;
  display: block;
  margin: 10px 0px;

}
.mobilex span:nth-child(1){
  transform: rotate(-50deg) translate(-5px ,7px);
}
.mobilex span:nth-child(2){
  transform: rotate(50deg) translate(0px ,-4px);
}

.mobile-menu_menu{
  padding-left: 0px;
  padding-top: 80px;
  position: relative;
}
.mobile-menu_menu::before{
  content: "";
  position: absolute;
  width: 230px;
  height: 230px;
  border: 5px solid #1BADF2;
  transform: rotate(60deg);
  bottom: -44%;
  right: -42%;
}
.mobile-menu_menu::after{
  content: "";
  position: absolute;
  width: 230px;
  height: 230px;
  background: #EA343F;
  border-radius: 50%;
  bottom: -65%;
  left: -25%;
  transition: transform 1.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
.mobile-menu_menu li a{
  font-size: 33px;
  font-weight: 800;
  -webkit-text-stroke: 1px var(--clr-lite-black);
-webkit-text-fill-color: transparent;
transition: .5s all;
}
.mobile-menu_menu li a:hover{
  -webkit-text-fill-color: var(--clr-black);
  text-decoration: underline;
  color: #000000;
  -webkit-font-smoothing: antialiased;
}
 /*====================== Testimonials ================= */
 #testimonials{
  height: 110vh;
  position: relative;
  padding: 50px 0px;
 }

 .subhead{
  color: #EB3540;
  text-decoration: underline;
 }
 .heading-h2{
  font-size: calc(22px + (40 - 22) * ((100vw - 300px) / (1600 - 300)));
  color: var(--clr-lite-black);
  position: relative;
  z-index: 1 !important;
  text-transform: capitalize;
  line-height: 1.5;
  /* margin: 20px 0px; */
 }
 .heading-h2 span,.spu{
  font-family: var(--font-secondary);
  position: relative;
 }
  /* .spu::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -22px;
  background: url(assets/text-underline.svg) no-repeat;
  background-size: contain;
  width: 100%;
  height: 30px;
 } */
 .spu svg{
  position: absolute;
  left: 0;
  bottom: -16px;
 }
 .testimonials-container ul button:not(.active){
  filter: grayscale(100%);
}
.testimonials-container ul li button:hover{
    filter: grayscale(0%);
}
 /*=== testimonials items ===*/
 .nav-tabs{
  border: none;
 }
 .testimonials-container{
  position: relative;
  width: 100%;
  height: 100vh;

}
.tab-content{
  position: absolute;

  width: 500px;
  padding: 0px 30px 10px 30px;
  height: 500px;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  background: var(--bg-prime);
  border-radius: 50% !important;
  overflow: hidden;

}
.testimonials-container ul li{
  position: absolute;
  box-shadow: 0px 5px 8px 4px #1A1A1A26;
z-index: 2;

}
.testimonials-container ul li button{
  background:var(--clr-white) !important;
  width:200px;
  border-radius: 0px !important;
  position: relative;
  padding: 12px 60px 12px 12px !important;
}

.testimonials-container ul li button.active{
  outline: 2px solid #EA343F !important;
}

.test1{
  top: 15%;
  left: 12%;
}
.test2{
  top: 30%;
  left: 22%;
}
.test3{
  top: 52%;
  left: 15%;
}
.test4{
  top: 70%;
  left: 25%;
}
.test5{
  top: 15%;
  right: 25%;
}
.test6{
  top: 30%;
  right: 15%;
}
.test7{
  top: 52%;
  right: 23%;
}
.test8{
  top: 70%;
  right: 8%;
}

/*====== testimonial img and flag ======*/

.testimonials-container ul li button img{

  object-fit: contain;
  width: 100%;
  max-width: 124px;
  height: 30px;

}
.testimonials-container ul .test6 button img{
  object-fit: cover;
  max-width: 70px;
}
.testimonials-container ul li button::before{
  content: "";
  position: absolute;
  bottom: -20px;
  right: -20px;

  width: 50px;
  height: 31px;
  box-shadow: 0px 5px 8px 4px #1A1A1A26;
}
.testimonials-container ul .test1 button::before{
  background: url(assets/testimonials/test1flag.png) no-repeat;
  background-size: contain;
}
.testimonials-container ul .test2 button::before{
  background: url(assets/testimonials/test3flag.png) no-repeat;
  background-size: contain;
}
.testimonials-container ul .test3 button::before{
  background: url(assets/testimonials/test3flag.png) no-repeat;
  background-size: contain;
}
.testimonials-container ul .test4 button::before{
  background: url(assets/testimonials/test4flag.png) no-repeat;
  background-size: contain;
}
.testimonials-container ul .test5 button::before{
  background: url(assets/testimonials/test4flag.png) no-repeat;
  background-size: contain;
}
.testimonials-container ul .test6 button::before{
  background: url(assets/testimonials/test1flag.png) no-repeat;
  background-size: contain;
}
.testimonials-container ul .test7 button::before{
  background: url(assets/testimonials/test2flag.png) no-repeat;
  background-size: contain;
}
.testimonials-container ul .test8 button::before{
  background: url(assets/testimonials/test4flag.png) no-repeat;
  background-size: contain;
}
/*========== tab content ============*/
.tab-pane{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.tab-pane h1{
  color: #EA343F;
}
.tab-pane .content-text{
  color: #777777;
  font-size: 20px;
  line-height: 1.7;
}
.testimonial-user h5{
  font-size: 25px;
  font-weight: 700;
  margin-top: 30px;
}
.testimonial-user p{
  font-size: 20px;
}
/*== Elements == */

/*#testimonials::before{*/
/*  content: "";*/
/*  position: absolute;*/
/*  background: url("assets/squigly-circle.png") no-repeat;*/
/*  background-size: contain;*/
/*  width: 150px;*/
/*  height: 150px;*/
/*  left: -3%;*/
/*  top: -3%;*/
/*  animation: loading 8s linear infinite;*/

/* }*/
 #testimonials::after{
  content: "";
  position: absolute;
  background: url("assets/dots2.png") no-repeat;
  background-size: contain;
  width: 30px;
  height: 60px;
  bottom: 0;
  left: 0;

 }
#testimonials .squigly-lines{
  position: absolute;
  bottom: 10%;
  left: 3%;
  width: 80px;
  height: 20px;
}
#testimonials .red-circle{
  width: 150px;
height: 150px;
  bottom: -5%;
  left: 4%;
  z-index: 23;
}
/* =================software development section========================= */
#softdev{
  position: relative;
  padding: 100px 0px;
  background: var(--bg-prime);
}
/*#softdev::before{*/
/*  content: "";*/
/*  position: absolute;*/
/*  top: 0;*/
/*  right: 0;*/
/*  width: 200px;*/
/*  height: 200px;*/
/*  background: url(assets/tricolor.png) no-repeat;*/
/*  background-size: contain;*/
/*}*/
#softdev::after{
  content: "";
  position: absolute;
  bottom: -5%;
  left: 6%;
  width: 50px;
  height: 100px;
  background: url(assets/dots.png) no-repeat;
  background-size: contain;
}
#softdev .sec-line1{
  position: absolute;
  top: -10%;
  left: 0;
  right: 0;
  margin: 0 auto;
}
 .sec-line2{
  position: absolute;
  bottom: -5%;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 2;
}
#softdev a.c-btn-lg{
  width: 100% !important;
max-width: 190px !important;
margin: 20px auto !important;
}
.line-animate-svg{
  position: absolute;
 left: -5%;
 top: 0;

}
.line-animate-svg .line{
  width: 300px;
  height: 100vh;
}
.softdev_cards-wrap{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px;
  padding: 80px 0px;
}
.softdev_cards-wrap > * {
  flex: 1 1 20%;
}
.softdev_cards-card{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 20px;

  padding: 20px;
}
.softdev_cards-card{
  max-width: 25ch;
}
.softdev_cards-card-img img{
  width:100%;
  max-width: 70%;
}

.another-testimonial{
  background: #6c757d;
  padding: 20px;
  border-radius: 10px;
  width: 100%;
  max-width: 100%;
  margin: 30px auto;
  position: relative;
  z-index: 4;
}
.another-testimonial-wrap{
  position: relative;
}
.orange-circle{
  content: "";
  position: absolute;
  bottom: -35%;
  right: -8%;
  width: 200px;
  height: 200px;
  background: url(assets/orange-circle.png) no-repeat;
  background-size: contain;
  z-index: 1;

}
.another-testimonial p{
  color: var(--clr-white);
  font-size: calc(10px + (20 - 10) * ((100vw - 300px) / (1600 - 300)));
  max-width: 75ch;
  margin-top: 20px;
  position: relative;
}
.another-testimonial p::before{
  content: " ,, ";
  position: absolute;
  top: -150px;
  left: 0;
  color: #F5AD7F;
  font-size: 100px;
  font-family: var(--font-secondary);
}
.another-testimonial p::after{
  content: "";
  position: absolute;
  top: -90px;
  left: 8%;
  background: url(assets/username.png) no-repeat;
  background-size: contain;
  width: 100px;
  height: 100px;

}
/* =========== our benefits ======= */
#ourBenefits{
  padding: 180px 0px;
  position: relative;
  overflow-y: visible;
}
/*#ourBenefits::before{*/
/*  content: "";*/
/*  position: absolute;*/
/*  left: -1%;*/
/*  bottom: 20%;*/
/*  width: 80px;*/
/*  height: 80px;*/
/*  background: url(assets/hex-star-yellow.png) no-repeat;*/
/*  background-size: contain;*/
/*  animation: loading 8s linear infinite;*/
/*}*/
/*#ourBenefits::after{*/
/*  content: "";*/
/*  position: absolute;*/
/*  right: -2%;*/
/*  top: 40%;*/
/*  width: 100px;*/
/*  height: 100px;*/
/*  background: url(assets/hex-star-green.png) no-repeat;*/
/*  background-size: contain;*/
/*  animation: loading 8s linear infinite;*/
/*}*/
/*#ourBenefits .heading-h2::before{*/
/*  content: "";*/
/*  position: absolute;*/
/*  top: -60px;*/
/*  left: 6%;*/
/*  right: 0;*/
/*  margin: 0 auto;*/
/*  background: url("assets/ocstar-green.png") no-repeat;*/
/*  background-size: contain;*/
/*  width: 40px;*/
/*  height: 40px;*/
/*}*/
#ourBenefits .heading-h2::after{
  content: "";
  position: absolute;
  top: -90px;
  left: 0;
  right: 0;
  margin: 0 auto;
  background: url("assets/ocstar-yellow.png") no-repeat;
  background-size: contain;
  width: 30px;
  height: 30px;
}
.ul-green{
  position: relative;
  font-family: var(--font-secondary);
}
.ul-green svg{
  position: absolute;
  left: 0;
  bottom: -15px;
}


.ourBenefits_benefits-wrap{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 40px;
  border: 5px solid var(--clr-black);
  border-radius: 20px;
  position: relative;
}
.ourBenefits_benefits-wrap::before{
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  top: -5%;
  right: -2%;
  background: url("assets/curved-line.svg") no-repeat;
  background-size: contain;
}
/*.ourBenefits_benefits-wrap::before{*/
/*  content: "";*/
/*  position: absolute;*/
/*  width: 60px;*/
/*  height: 60px;*/
/*  top: -15%;*/
/*  left: -10%;*/
/*  background: transparent;*/
/*  border: 10px solid #83CA9E;*/
/*  border-radius: 50%;*/
/*  animation-name: floating;*/
/*animation-duration: 3s;*/
/*animation-iteration-count: infinite;*/
/*animation-timing-function: ease-in-out;*/
/*}*/
.ourBenefits_benefits-wrap > *{
  flex: 1 1 50%;
}
.ourBenefits_benefits-card{
  padding: 20px;
  min-height: 250px;
}
.ourBenefits_benefits-card p{
  font-size: 24px;
  font-weight: 500;
  margin-top: 20px;
}
.ourBenefits_benefits-wrap .ourBenefits_benefits-card:nth-child(1){
  border-bottom: 2px solid var(--clr-black);
  border-right: 2px solid var(--clr-black);
}
.ourBenefits_benefits-wrap .ourBenefits_benefits-card:nth-child(2){
  border-bottom: 2px solid var(--clr-black);
  border-left: 2px solid var(--clr-black);
}
.ourBenefits_benefits-wrap .ourBenefits_benefits-card:nth-child(3){
  border-top: 2px solid var(--clr-black);
  border-right: 2px solid var(--clr-black);
}
.ourBenefits_benefits-wrap .ourBenefits_benefits-card:nth-child(4){
  border-top: 2px solid var(--clr-black);
  border-left: 2px solid var(--clr-black);
}
/* elements */
#ourBenefits .squigly{
  bottom: 3%;
  left: 5%;
  width: 60px;
}
.orange-dot-circle{
  position: absolute;
  left: 7%;
  bottom: -5%;
  width: 150px;
  height: 150px;
  z-index: 2;
}
/*============ Who we are ============ */
#whoWeare{

  position: relative;
background: var(--bg-prime);
padding: 150px 0px;
}
.whoWeare_cards-wrap{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5rem;
  flex-wrap: wrap;
  padding: 4rem 0rem;

}
.whoWeare_cards-wrap > *{
flex: 1 1 45%;
position: relative;
}
.whoWeare_cards-card{
  border: 3px solid var(--clr-black);
  border-radius: 20px;
  padding: 20px;
  min-height: 250px;
}
.whoWeare_cards-card p{
  font-size: 24px;
  font-weight: bold;
  margin-top: 20px;
}
#whoWeare .container > p{
  font-size: 28px;
  font-weight: 400;
  margin-top: 30px;
  max-width: 60ch;
}
#whoWeare .container > p a{
  color: var(--clr-black);
  text-decoration: underline;
}
/* elements */
.card-curved-red{
  position: absolute;
  width: 15%;
  right: -3.6%;
}
.card-curved-green{
  position: absolute;
  width: 15%;
  left: -3.6%;
  top: -11%;
}

/*#whoWeare::before{*/
/*  content: "";*/
/*  position: absolute;*/
/*  width: 60px;*/
/*  height: 60px;*/
/*  top: 7%;*/
/*  left: 0%;*/
/*  background: transparent;*/
/*  border: 10px solid #83CA9E;*/
/*  border-radius: 50%;*/
/*  animation-name: floating;*/
/*animation-duration: 3s;*/
/*animation-iteration-count: infinite;*/
/*animation-timing-function: ease-in-out;*/
/*}*/
#whoWeare::after{
  content: "";
  position: absolute;
  width: 40px;
  height: 80px;
  top: 0%;
  left: 5%;
  background: url(assets/dots.png) no-repeat;
  background-size: contain;


}
.spar-circle{
  position: absolute;
  top: -6%;
  right: -4%;
  width: 200px;
  height: 200px;
}
.squigly-circle-colored{
  position: absolute;
  bottom: -6%;
  right: -1%;
  width: 200px;
  height: 200px;
  animation: loading 8s linear infinite;
}
.qline{
  position: absolute;
  left: 2%;
  bottom: -11%;
  width: 140px;
}

/* ==============faq===================== */

#faq{
  position: relative;
  padding: 220px 0px 180px 0px;
  isolation: isolate;
}

.accordion-button:focus{
  box-shadow: none;
}
.accordion-button{
  padding: 30px 20px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  color: var(--clr-black) !important;
  font-size: 30px;
  /* background-color: transparent !important; */
}
.accordion-button:not(.collapsed){

  border: none !important;
  box-shadow: none;
  background-color: transparent;
}
.accordion-item{
  border: none;
  border-bottom: 1px solid #979797 !important;
}
.accordion-button:not(.collapsed)::after{
  background-image:url(assets/minus.png);
}
.accordion-button::after{
  background-image:url(assets/plus.png);
}
.accordion-body{
  font-size: 24px;
  padding-bottom: 40px;
}
/* elements */

#faq .heading-h2::before {

  content: "";
  position: absolute;
  top: -60px;
  left: 6%;
  right: 0;
  margin: 0 auto;
  background: url("assets/ocstar-green.png") no-repeat;
      background-size: auto;
  background-size: contain;
  width: 40px;
  height: 40px;

}
#faq .heading-h2::after {
  content: "";
  position: absolute;
  top: -90px;
  left: 0;
  right: 0;
  margin: 0 auto;
  background: url("assets/ocstar-yellow.png") no-repeat;
    background-size: auto;
  background-size: contain;
  width: 30px;
  height: 30px;
}
/*#faq::before{*/
/*  content: "";*/
/*  background: url(assets/green-hat.webp) no-repeat;*/
/*  background-size: contain;*/
/*  position: absolute;*/
/*  left: -10%;*/
/*  bottom: 0;*/
/*  width: 40%;*/
/*  height: 40%;*/
/*  z-index: -1;*/
/*}*/
/*#faq::after{*/
/*  content: "";*/
/*  background: url(assets/yellow-hat.webp) no-repeat;*/
/*  background-size: contain;*/
/*  position: absolute;*/
/*  right: -34%;*/
/*  top: 0;*/
/*  width: 40%;*/
/*  height: 40%;*/
/*}*/
#faq .squigly-circle{
position: absolute;
width: 150px;
height: 150px;
left: -2%;
top: 5%;
animation: loading 8s linear infinite;
}
/* =========technologies========== */
#technologies{
  background: var(--bg-prime);
  position: relative;
  padding: 130px 0px;
}
.tecnologies_cards-wrap{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap:10px;
  flex-wrap: wrap;
  padding: 5rem 0rem;
}
.tecnologies_cards-wrap > *{
  flex: 1 1 18%;
  padding: 20px;
}
.tecnologies_cards-card h6{
  padding: 20px 0px;
  font-weight: 500;
  font-size: 22px;
  text-transform: uppercase;
}
/* elements */
#technologies .heading-h2{
  /*padding-bottom: 100px;*/
}
#technologies .heading-h2 span{
  position: relative;
}

/*#technologies::before{*/
/*content: "";*/
/*position: absolute;*/
/*left: -1%;*/
/*bottom: 10%;*/
/*width: 150px;*/
/*height: 150px;*/
/*background: url(assets/hex-star-yellow.png) no-repeat;*/
/*  background-size: auto;*/
/*background-size: contain;*/
/*animation: loading 8s linear infinite;*/
/*}*/
/*#technologies::after{*/
/*content: "";*/
/*position: absolute;*/
/*top: -10%;*/
/*right: 0;*/
/*width: 300px;*/
/*height: 300px;*/
/*background: url(assets/tricolor.png) no-repeat;*/
/*  background-size: auto;*/
/*background-size: contain;*/
/*}*/
.curved-tosection{
  position: absolute;
  top: -5%;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 2.5%
}
.twodots-lines{
  position: absolute;
  bottom: -120%;
  width: 100%;
  max-width: 85%;
  left: 0;
  right: 0;
  margin: 0 auto;

}
/* ============socials author details=========== */
#socials{
  position: relative;
  padding: 150px 0px;
}
.author_details{
  padding: 40px 0px
}
.author_details > img{
  width: 50%;
  max-width: 28%;
    padding: 30px

}
.author_details-socials{
  display: flex;
  justify-content: center;
  align-items: center;
 gap: 20px;
  padding: 20px 0px;
}
.author_details-socials img{
  width: 30px;
}
.author_cta{
  background: #F9FBFC;
  padding: 100px 0px 50px 0px;
  position: relative;
}
.author_cta-card{
  background: var(--clr-accent);
  border-radius: 20px;
  padding: 30px;
  display:flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.author_cta-card-details{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;

}
.author_cta-card-details p{
  max-width: 35ch;
}
.author_cta-card-details .actions{
  padding-top: 50px;
}
.author_cta-card-img{
  display: flex;
  justify-content: center;
  align-items: center;
}
.author_cta-card-img img{
  width: 100%;
  max-width: 80%;
}
/* elements */
/*#socials::before{*/
/*  content: "";*/
/*position: absolute;*/
/*width: 60px;*/
/*height: 60px;*/
/*top: 9%;*/
/*right: 17%;*/
/*background: transparent;*/
/*border: 10px solid #83CA9E;*/
/*border-radius: 50%;*/
/*animation-name: floating;*/
/*animation-duration: 3s;*/
/*animation-iteration-count: infinite;*/
/*animation-timing-function: ease-in-out;*/
/*}*/
#contact {
    background: var(--bg-prime);
}
#socials .squigly {
  top: 10%;
  left: 10%;
}
#socials .dots{
  position: absolute;
  top: 0;
  width: 70px;
}
#socials::after{
  content: "";
width: 70px;
height: 70px;
position: absolute;
top: 110px;
left: 40px;
background: #000;
border-radius: 50%;
}
#socials .orange-circle2{
  position: absolute;
  right: -2%;
  top: 5%;
}
/* ============= footer ============= */
#site-footer{
  background-color: var(--clr-lite-black);
  padding: 50px 0px;
}
.footer-wrap{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.footer_col-nav li{
  margin: 10px 0px;
}
.footer_col.fcol1 {
  color: #fff;
  flex-basis: 50%;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;

}
.footer_col.fcol1 img{
  text-align: center;
}
.footer_col.fcol1 p{

  max-width: 35ch;
    padding: 50px 0px 0px 0px;
}
/*=========== our focus section ========== */
#focus-tl{
  padding: 200px 0px 200px 0px;
  position: relative;
}
.focus_tl-wrap{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap:50px;
  flex-wrap: wrap;
  position: relative;
}
.focus_tl-col{
  display: flex;
  flex-direction: column;
  gap:50px;
}
.focus_tl-wrap > *{
  flex: 1 1 47%;
}
.focus_tl-col .focus_tl-col-head{
  text-align:center;

  text-transform: capitalize;
  border: 4px solid var(--clr-lite-black);
  padding:5px;
  border-radius: 20px;
  line-height:1.4;
  min-height: 100px;
  display: flex;
  position: relative;
  background: var(--clr-white);
}
.focus_tl-col .focus_tl-col-head h3{
  margin: auto;
  max-width: 22ch;
}
/*  */
.focus_tl-col .focus_tl-col-head h3{
  margin: auto;
  max-width: 22ch;
}
.focus_tl-col .focus-item{
  border: 3px solid;
  padding: 20px 20px;
  border-radius: 20px;
  position: relative;
    text-align: center;
}
.focus_tl-col.col1 .focus-item.lg{
  /*min-height: 100px;*/
}

.focus_tl-col.col1 .focus-item.lg:nth-child(2){
  /*background: #DEFDF3;*/
  border-color: var(--clr-accent);
}
.focus_tl-col.col1 .focus-item.lg:nth-child(3){
  /*background: #E2F3FF;*/
  border-color: var(--clr-accent);
}
.focus_tl-col.col1 .focus-item.lg:nth-child(4){
  /*background: #FFE9E8;*/
  border-color: var(--clr-accent);
}
.focus_tl-col.col1 .focus-item.lg:nth-child(5){
  /*background: #FFF6DE;*/
  border-color: var(--clr-accent);
}
.focus_tl-col .focus-item::before,
.focus_tl-col .focus-item::after{
  content: "";
  position: absolute;

}
.focus_tl-col.col1 .focus-item.lg::before{
  width: 3px;
  height: 47px;
  top: -58%;
  left: 51%;
}
.focus_tl-col.col1 .focus-item.lg::after{
  width: 15px;
  height: 15px;
  border-radius: 50%;
  top: -10px;
  left: 50%;
}

.focus_tl-col.col1 .focus-item.lg:nth-child(2)::before,
.focus_tl-col.col1 .focus-item.lg:nth-child(2)::after{
  background: var(--clr-accent);
}
.focus_tl-col.col1 .focus-item.lg:nth-child(3)::before,
.focus_tl-col.col1 .focus-item.lg:nth-child(3)::after{
  background: var(--clr-accent);
}
.focus_tl-col.col1 .focus-item.lg:nth-child(4)::before,
.focus_tl-col.col1 .focus-item.lg:nth-child(4)::after{
  background: var(--clr-accent);
}
.focus_tl-col.col1 .focus-item.lg:nth-child(5)::before,
.focus_tl-col.col1 .focus-item.lg:nth-child(5)::after{
  background: var(--clr-accent);
}
.focus_tl-col .focus-item.sm{
  max-width: 70%;
  align-self:center;
  width:100%;
  margin-top: 18px ;
}
.focus_tl-col .focus-item.sm h5{
  display: flex;
  justify-content: center;
  align-items: center;
}
.focus_tl-col.col2 .focus_tl-col-head::before{
  content: "";
  width: 3px;
  height: 37.4rem;
  background: var(--clr-accent);
  position: absolute;
  top: 100%;
  left: 6%;
}

@media(max-width: 4088px) {
    .focus_tl-col.col1 .focus_tl-col-head::before{
        content: "";
        width: 3px;
        height: 41.4rem;
        background: var(--clr-accent);
        position: absolute;
        top: 100%;
        left: 6%;
    }
}

@media(max-width: 1088px) {
    .focus_tl-col.col1 .focus_tl-col-head::before{
        content: "";
        width: 3px;
        height: 48.4rem;
        background: var(--clr-accent);
        position: absolute;
        top: 100%;
        left: 6%;
    }
}

.focus_tl-col.col2 .focus-item.sm:nth-child(2){
  /*background: #DEFDF3;*/
  border-color: var(--clr-accent);
}
.focus_tl-col.col2 .focus-item.sm:nth-child(3){
   /*background: #E2F3FF;*/
  border-color: var(--clr-accent);
}
.focus_tl-col.col2 .focus-item.sm:nth-child(4){
 /*background: #FFE9E8;*/
  border-color: var(--clr-accent);
}
.focus_tl-col.col2 .focus-item.sm:nth-child(5){
    /*background: #FFE9E8;*/
    border-color: var(--clr-accent);
}
.focus_tl-col.col2 .focus-item.sm::before{
  width: 50px;
  height: 3px;
   top: 50%;
  left: -12%;
}
.focus_tl-col.col2 .focus-item.sm::after{
  width: 15px;
  height: 15px;
  border-radius: 50%;
  top: 44%;
  left: -2%;
}
 .focus_tl-col.col2 .focus-item.sm:nth-child(2)::before,
.focus_tl-col.col2 .focus-item.sm:nth-child(2)::after{
  background: var(--clr-accent);
}
.focus_tl-col.col2 .focus-item.sm:nth-child(3)::before,
.focus_tl-col.col2 .focus-item.sm:nth-child(3)::after{
  background: var(--clr-accent);
}
.focus_tl-col.col2 .focus-item.sm:nth-child(4)::before,
.focus_tl-col.col2 .focus-item.sm:nth-child(4)::after{
  background: var(--clr-accent);
}
.focus_tl-col.col2 .focus-item.sm:nth-child(5)::before,
.focus_tl-col.col2 .focus-item.sm:nth-child(5)::after{
    background: var(--clr-accent);
}

.focus_tl-col.col1 .focus-item.sm:nth-child(2){
    /*background: #DEFDF3;*/
    border-color: var(--clr-accent);
}
.focus_tl-col.col1 .focus-item.sm:nth-child(3){
    /*background: #E2F3FF;*/
    border-color: var(--clr-accent);
}
.focus_tl-col.col1 .focus-item.sm:nth-child(4){
    /*background: #FFE9E8;*/
    border-color: var(--clr-accent);
}
.focus_tl-col.col1 .focus-item.sm:nth-child(5){
    /*background: #FFE9E8;*/
    border-color: var(--clr-accent);
}
.focus_tl-col.col1 .focus-item.sm::before{
    width: 50px;
    height: 3px;
    top: 50%;
    left: -12%;
}
.focus_tl-col.col1 .focus-item.sm::after{
    width: 15px;
    height: 15px;
    border-radius: 50%;
    top: 44%;
    left: -2%;
}
.focus_tl-col.col1 .focus-item.sm:nth-child(2)::before,
.focus_tl-col.col1 .focus-item.sm:nth-child(2)::after{
    background: var(--clr-accent);
}
.focus_tl-col.col1 .focus-item.sm:nth-child(3)::before,
.focus_tl-col.col1 .focus-item.sm:nth-child(3)::after{
    background: var(--clr-accent);
}
.focus_tl-col.col1 .focus-item.sm:nth-child(4)::before,
.focus_tl-col.col1 .focus-item.sm:nth-child(4)::after{
    background: var(--clr-accent);
}
.focus_tl-col.col1 .focus-item.sm:nth-child(5)::before,
.focus_tl-col.col1 .focus-item.sm:nth-child(5)::after{
    background: var(--clr-accent);
}
/* elements */
.focus-tl-pointer{
  position: absolute;
  left: 50%;
  top: -46.6%;
  transform: translateX(-50%);
  width: 60%;
}
/*.focus_tl-wrap::before{*/
/*  content: "";*/
/*  background: url(assets/dtstars.png) no-repeat;*/
/*  background-size: contain;*/
/*  position: absolute;*/
/*  left: -10%;*/
/*  top: -10%;*/
/*  width: 100px;*/
/*  height: 100px;*/
/*}*/
/*#focus-tl::before{*/
/*  content: "";*/
/*  width: 200px;*/
/*  height: 200px;*/
/*  position: absolute;*/
/*  right: -3%;*/
/*  top:50%;*/
/*  border: 4px solid var(--clr-black);*/
/*  transform: rotate(-30deg);*/
/*}*/
/*#focus-tl::after{*/
/*  content: "";*/
/*  width: 500px;*/
/*  height: 500px;*/
/*  position: absolute;*/
/*  left: -16%;*/
/*  bottom: 0;*/
/*  background: url(assets/Vector1.webp) no-repeat;*/
/*  background-size: contain;*/
/*  z-index: -1;*/
/*}*/
.twopoints-line{
  position: absolute;
  right: 10%;
  bottom: 10%;
  width: 400px;
}
#focus-tl .squigly{
  right: 1px !important;
  bottom: 0 !important;
}
/* ============ Build ========= */
#build{
  background: var(--bg-light);
  padding: 200px 0px 100px 0px;
  position: relative;
}
.build_card{
  background-color: var(--bg-prime);
  padding: 30px;
  border-radius: 20px;
  margin: 50px 0px;
}
.build_card-cards-wrap{
  display: flex;
  justify-content: space-around;
  align-items:center;
  text-align: center;
  flex-wrap: wrap;
}
.build_card p{
  text-align: center;
  font-size: 25px
}
.build_card-card{
  padding: 40px;
}
.build_card-card h6{
  font-weight: 600;
  font-size: 17px;
  padding-top:30px
}
/* elements */
/*#build::before{*/
/*  content: "";*/
/*  position: absolute;*/
/*  left: -4%;*/
/*  bottom: 15%;*/
/*  background: url(assets/hex-star-green.png) no-repeat;*/
/*  background-size: contain;*/
/*  width: 170px;*/
/*  height: 170px;*/
/*  animation: loading 8s linear infinite;*/
/*}*/
/*#build::after{*/
/*  content: "";*/
/*  position: absolute;*/
/*  right: 0%;*/
/*  bottom: 1%;*/
/*  background: url(assets/half-circle.png) no-repeat;*/
/*  background-size: contain;*/
/*  width:  100px;*/
/*  height: 500px;*/

/*}*/
#build .heading-h2::before{
  content: "";
  position: absolute;
  top: -60px;
  left: 6%;
  right: 0;
  margin: 0 auto;
  background: url("assets/ocstar-green.png") no-repeat;
  background-size: contain;
  width: 40px;
  height: 40px;
}
#build .heading-h2::after{
  content: "";
  position: absolute;
  top: -90px;
  left: 0;
  right: 0;
  margin: 0 auto;
  background: url("assets/ocstar-yellow.png") no-repeat;
  background-size: contain;
  width: 30px;
  height: 30px;
}
.curved-line2{
  position: absolute;
  top: -10%;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 160px;

}
/* ========== Pricing ========== */
#pricing{
  background-color: var(--bg-prime);
  padding: 150px 0px 200px 0px;
  position: relative;
}


.pricing_wrap{
  display: flex;
  flex-direction: column;
  border-radius:20px;
  margin-top:100px;
  position: relative;
  z-index: 2;
}
.pricing_grid{
  background: var(--clr-white);
  border-radius:20px 20px 0px 0px;
  display: flex;
  justify-content: center;
  align-items: flex-start;

}
.pricing_grid > * {
  flex: 1 1 30%;
}
.pricing-cta{
  background-color: var(--clr-lite-black);
  padding: 20px 50px;
   border-radius:0px 0px 20px 20px;
  color: var(--clr-white);
  display:flex;
  justify-content: space-between;
  align-items: center;
}
.pricing_grid_col .pricing_grid_col-top{
  padding: 30px;
  border-bottom: 3px solid var(--clr-accent);
  height:333px;
  position: relative;
  isolation: isolate;
}

.pricing_grid_col .pricing_grid_col-bottom{
  padding: 30px;
  min-height: 200px;
}
.pricing_grid_col:not(.pricing_grid_col.col3){
  border-right: 3px solid var(--clr-accent)
}
.pricing_grid_col.col2 .pricing_grid_col-top::before{
  content: "";
   background: #000;
   position: absolute;
     inset:4%;
   border-radius: 20px;
   z-index: -1;
   top: -10%;

 }
 .pricing_grid_col.col2 .pricing_grid_col-top {
   color: #fff !important;
 }
 .pricing_grid_col-top h3{
  font-size: calc(32px + (35 - 32) * ((100vw - 300px) / (1600 - 300)));
}
.pricing_grid_col-top p{
  font-size: calc(14px + (18 - 14) * ((100vw - 300px) / (1600 - 300)));
  max-width: 20ch;
  margin-top: 15px;
}
.pricing_grid_col-bottom h6{
  font-size: calc(18px + (22 - 18) * ((100vw - 300px) / (1600 - 300)));
  line-height: 70px
}
.pricing_grid_col-bottom p{
  line-height: 30px
}
 .price-btn{
  background: var(--clr-black);
  color: var(--clr-white);
  padding: 7px 20px;
  border: none;
  border-radius: 20px;
  position: absolute;
  bottom: 15%;
}
.pricing_grid_col.col2 .pricing_grid_col-top .price-btn{
  background: var(--clr-white) !important;
  color: var(--clr-black);
}

/* elements */
#pricing::before{
  content: "";
  width: 80px;
  height: 160px;
  position: absolute;
  top: 0;
  left: 0;
  background: url(assets/dots.png) no-repeat;
  background-size: contain;
}
/*#pricing::after{*/
/*  content: "";*/
/*  width: 80px;*/
/*  height: 80px;*/
/*  position: absolute;*/
/*  top: 120px;*/
/*  left: 40px;*/
/*  background: #F57025;*/
/*  border-radius: 50%;*/
/*}*/
#pricing .squigly{
  top: 45px;
  animation: none;
}
#pricing .squigly2{
  position: absolute;
  top: 0;
  right: 176px;
  width: 70px;
}
#pricing .dots2 {
  position: absolute;
  top: 60px;
  right: 16%;
  width: 20px;
  height: 80px;
}
#pricing .red-circle2{
  position: absolute;
  top: 20px;
  right: -30px;
  width: 200px;
}
.spinner {
  animation: rotate 2s linear infinite;
  z-index: 2;
  position: absolute;
  top: 3%;
  right: 24%;

  width: 50px;
  height: 50px;
}
.spinner .path {
  stroke: #F24E3D;
  stroke-linecap: round;
  animation: dash 1.5s ease-in-out infinite;
}

#pricing .container{
  position: relative;
}
/*#pricing .container::before {*/
/*  content: "";*/
/*  position: absolute;*/
/*  width: 60px;*/
/*  height: 60px;*/
/*  top: -6%;*/
/*  right: 5%;*/
/*  background: transparent;*/
/*  border: 10px solid #83CA9E;*/
/*  border-radius: 50%;*/
/*  animation-name: floating;*/
/*  animation-duration: 3s;*/
/*  animation-iteration-count: infinite;*/
/*  animation-timing-function: ease-in-out;*/
/*}*/
/*#pricing .container::after{*/
/*  content: "";*/
/*  position: absolute;*/
/*  border: 2px solid #F24E3D;*/
/*  width: 60px;*/
/*  height: 60px;*/
/*  border-radius: 50%;*/
/*  bottom: -30px;*/
/*  right: 20%;*/
/*}*/
/*.pricing_wrap::before{*/
/*  content: "";*/
/*  position: absolute;*/
/*  border: 15px solid #949399;*/
/*  width: 80px;*/
/*  height: 80px;*/
/*  border-radius: 50%;*/
/*  bottom: -18%;*/
/*  right: 10%;*/
/*}*/
#pricing .dots3{
  position: absolute;
  bottom: 100px;
  right: 16%;
  width: 20px;
  height: 80px;
}
#pricing .blue-circle{
  position: absolute;
  bottom: 3%;
  transform: rotate(-60deg) !important;
}
.price-btn-b{
  background: var(--clr-white);
  color: var(--clr-black);
  padding: 8px 30px;
  border-radius: 20px;
}
.qline2{
  position: absolute;
  bottom: 10%;
  left: 2%;

}
.footer_col-nav li a{
  position: relative;
}
.footer_col-nav li a:hover{
  color: #fff;

}
.footer_col-nav li a::before{
  content: "";
  position: absolute;
  width: 0%;
  height: 1px;
  background: #fff;
  bottom:0;
  left: 0;
  transition: 0.5s all cubic-bezier(.86,-0.13,.36,.99);
}
.footer_col-nav li a:hover:before{
  width: 100%
}
  /*================ keyframes ================== */

@keyframes floating {
  0% { transform: translate(0,  0px); }
  50%  { transform: translate(0, 15px); }
  100%   { transform: translate(0, -0px); }
}

 @keyframes slideinLeft {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0%);
    opacity: 1;
  }
}
@keyframes slideinDown {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }

  50%{
    transform: translateY(10%);
    opacity: 0.5;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}
@keyframes slideinUp {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }

  50%{
    transform: translateY(-10%);
    opacity: 0.5;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}

@keyframes slideinUpLeft {
  0% {
    transform: translate(100% , 100%);

    opacity: 0;
  }

  100% {
    transform: translate(0% , 0%);
    opacity: 1;
  }
}
@keyframes slideinDownLeft {
  0% {
    transform: translate(100% , -100%);

    opacity: 0;
  }

  100% {
    transform: translate(0% , 0%);
    opacity: 1;
  }
}
@keyframes slideinRotate {
  0% {
    transform: translate(100% , 100%) rotate(120deg);



  }

  100% {
    transform: translate(0% , 0%)  rotate(0deg);
    opacity: 1;
  }
}
@keyframes slideinRotate2 {
  0% {
    transform: translate(100% , 100%) rotate(0deg);



  }

  100% {
    transform: translate(0% , 0%)  rotate(140deg);
    opacity: 1;
  }
}
@keyframes loading {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
 }
 @keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}
.hamburger-menu-container{
  display: none;
}
/* === media query tablet === */

@media(max-width: 1088px){
  .navigation{
    max-width: 90%;
  }
  .navigation > ul li a{
    font-size: 12px
  }
}

/* === media query mobile ===*/
@media(max-width: 722px){


  .start-logo {
    justify-content: flex-start !important;
  }
  .start-logo img{
    max-width: 34%;
    position: relative;
    z-index: 4;
  }

  .navigation li a img {
    max-width: 70%
  }

  .pricing_grid{
    flex-direction: column;
  }



.pricing_grid{
  background: transparent;
}
  .pricing_grid_col{
    background: var(--clr-white);
    width: 100%;
    margin-bottom: 20px;
    border-radius: 20px
  }
  .pricing_grid_col.col2 .pricing_grid_col-top::before{
    inset: 0;
  top: 0%;
    border-radius: 20px 20px 0px 0px;
  }
  .pricing-cta{
    border-radius: 20px;
    flex-direction: column;
    text-align: center
  }
  /* elements */
  #pricing::before {
    width: 82px;
    height: 116px;
      top: -1.5%;
    }
    #pricing::after {
      width: 50px;
      height: 50px;
      top: 58px;
    }
    #pricing .squigly {
      top: -7px;
      left: 19%;
    }
    #pricing .squigly2 {
      top: -2%;
      right: 49px;
      width: 42px;
    }
   #pricing .spinner {
      width: 30px;
      height: 30px;
      top: -1%;
      right: 40%;
    }
    #pricing .red-circle2 {
      top: -43px;
      width: 121px;
    }
    #pricing .dots2 {
      top: -10px;
      right: 20%;
      width: 14px;
      height: 52px;
    }
    #pricing .container::before {
      width: 38px;
      height: 38px;
      top: -8%;
      right: 28%;
      border: 7px solid #83CA9E;
    }
    #pricing .blue-circle {
      bottom: -1%;
      right: -10%;
    }

  .container, .container-sm {
    max-width: 540px;
  }
  .accordion-button{
    font-size: 20px;
  }
  .accordion-body {
    font-size: 14px;
  }
  #focus-tl{
    isolation: isolate;
  }
  #focus-tl::before {

    width: 50px;
    height: 50px;

    right: -3%;
    top: 40%;
    z-index: -1;
    transform: rotate(-30deg);
  }
  #focus-tl::after {
    content: "";
    width: 200px;
    height: 200px;
    z-index: -1;
    left: -30%;
    bottom: 0;
    background: url(assets/Vector1.png) no-repeat;
      background-size: auto;
    background-size: contain;
  }
  .twopoints-line {
    position: absolute;
    right: 10%;
    bottom: 4%;
    width: 160px;
    z-index: -1;
  }
  .focus-tl-pointer{
    display: none;
  }


#build::before {

  left: -4%;
  bottom: 5%;
  width: 70px;
  height: 70px;

}
#build::after {
  width: 39px;
height: 190px;
bottom: 40%;
}
.build_card{
  max-width: 300px;
  margin: 30px auto
}

.whoWeare_cards-card p{
  font-size: 18px;
}
.whoWeare_cards-card img{
  width: 80px;
}
.whoWeare_cards-card{
  min-height: 183px;
}
.whoWeare_cards-card::before{
  display: none;
}
.squigly-circle-colored {
  width: 100px;
  height: 100px;
}
.qline {
  left: 7%;
  bottom: -5%;
  width: 70px;
}
.footer_col{
  width: 100%;
  text-align: center;
}


}
@media(max-width: 500px){
    .cwrap{
    height:100vh;
    }
    .heading-h2{
      font-size: calc(32px + (40 - 32) * ((100vw - 300px) / (1600 - 300)));
    }
  .navigation{
    display: none !important;
  }
  #home::before{
    top: 0;
    left: 0;
    width: 40px;
    height: 80px;
  }
  #home::after{
    top: 50px;
      left: 20px;
    width: 40px;
    height: 40px
  }
  #home .container::before{
    top: 0;
    right: 50px;
     width: 30px;
    height: 60px;
  }
  #home .container::after{
     top: 45px;
      right: 30px;
    width: 25px;
    height: 25px;
  }
  .hero-portfolio .owl-item:nth-of-type(2)::before{
    width: 100px;
    height: 100px;
  }
  .hero-content {
    padding-top: 100px;
  }
  .hero-content h1{
    font-size: 40px;
  }
  .hero-content p{
    font-size: 15px;
  }
  .cube{
top: 16%;
max-width: 14%;
  }
  /*======= carosel navigation =======*/
  .owl-nav{
    padding-right: 100px;

  }
  .portfolio-slider-container .owl-prev:focus-visible, .portfolio-slider-container .owl-next:focus-visible{
    outline: none;
  }
  .portfolio-slider-container .owl-prev i, .portfolio-slider-container .owl-next i{
    font-size: 13px;
  }
  .portfolio-slider-container .owl-prev::before,
  .portfolio-slider-container .owl-next::before{
    height: 2px;
    width: 50px;
      right: -63%;
  }
  .portfolio-slider-container .owl-prev::after,
  .portfolio-slider-container .owl-next::after{
    border-left: 1px solid var(--clr-black);
  border-top: 1px solid var(--clr-black);
  }
  .portfolio-slider-container .owl-prev::before{
    left: -80%;
  }
  .portfolio-slider-container .owl-prev::after{
    left: -80%;
    width: 10px;
  height: 10px;
    top: 40%;

  }
    .portfolio-slider-container .owl-prev,
  .portfolio-slider-container .owl-next{
    width: 60px
  }
    .tab-content {

     width: 350px !important;
      height: 350px !important;
        max-width: 90%;
    }
    .tab-pane .content-text {
  font-size: 14px !important;
}
    .testimonial-user h5 {
        font-size: 20px;
    }
    .testimonial-user p {
  font-size: 13px;
}

  /* mobile menu */


.grey-circle::before{
  bottom:20%;
  right: 85%
}
.red-circle{
  width: 120px;
height: 120px;
bottom: -7%;
  animation: 2s ease 0.5s both slideinRotate2;
}
.squigly{
  bottom:2%;
  left: 27%;
  width: 50px;
}

.blue-circle{
  width: 120px;
height: 120px;
  bottom: -7%;
}
.grey-circle::after{
  position: absolute;
bottom: 8%;
right: 7%;
width: 100px;
height: 17px;
background: url(assets/squigly.png) no-repeat;
background-size: contain;

}
.softdev_cards-wrap{
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: center;
}
.softdev_cards-card-img img {
width: 100%;
max-width: 106%;
}
.pricing_grid_col .pricing_grid_col-top{
  height: 270px;
}
.portfolio-slider-container .owl-prev:hover:before{
   width: 85px;
}
.portfolio-slider-container .owl-next:hover::before{
   width: 85px;
}
.portfolio-slider-container .owl-next::after{
   top: 41%;
   width: 10px;
   height: 10px;
   right: -63%;
}

.focus_tl-col.col1 .focus-item.lg::before{
  z-index: -1;
  height: 100px;
}
    .ourBenefits_benefits-wrap{
      flex-direction: column;
    }
    .ourBenefits_benefits-card{
      border: none !important;
      border-bottom: 4px solid var(--clr-black) !important;
      width: 100%;
    }


    #softdev .sec-line1{
      top: -4%;
      height: 106px;
    }
    #faq::after{
      display: none;
      }
    #technologies::after{
      top: -5%;
      right: -2%;
      width: 190px;
      height: 190px;
    }
    #technologies .heading-h2 span::after{
      height: 100%;
      background-size: contain;
      margin: 0 auto;
      background-position: center;
    }
    .author_details > img{
      max-width: 71%;
    }
      .spar-circle{
    top: -3%;
    right: -7%;
    width: 100px;
    height: 100px;
  }
    /* elements */
    #socials .orange-circle2{
      width: 130px;
      right: -8%;
      top: -4%;
    }
    .spinner{
      width: 30px;
      height: 30px;
      top: -3%;
      right: 32%;
    }
    #socials::before{
      width: 35px;
      height: 35px;
      border: 7px solid #83CA9E;
      top: 0%;
      right: 24%;
    }
    #socials .dots {
      width: 51px;
  }
    #socials .squigly {
    top: 4%;
    left: 22%;
  }
    #socials::after {
    width: 40px;
    height: 40px;
    top: 80px;
    left: 30px;
  }
    .author_cta-card{
      max-width: 80% !important;
      margin: 0 auto;
    }
    .author_cta-card-details .actions{
      padding:30px 0px
    }
    .author_cta-card-img img{
      max-width: 100%;
    }
    .footer_col.fcol1{
      flex-basis: 100%;
      align-items: center;
    }
    .curved-tosection{
      top: -2%
    }
    .another-testimonial p::before{
      font-size: 82px;
      top: -128px;
    }
    .another-testimonial p::after{
       top: -51px !important;
    left: 61px;
      width: 78px;
  height: 65px;
    }
    .focus_tl-col.col2 .focus-item.sm::before {
      width: 34px;}

      .curved-line2{
        top: -3%;
        height: 85px;
      }

      #faq::before{
        left: -28%;
      }
      .focus_tl-col.col1 .focus-item.lg::before{
        left: 51.3%;
      }
      .tecnologies_cards-wrap{
        flex-direction: column;
        align-items: center;
      }
      .ourBenefits_benefits-card{
        min-height: 205px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
      }
      .ourBenefits_benefits-card:last-child{
        border-bottom: none !important;
      }


    }
@media(min-width: 1920px){
  .navigation{
    max-width: 75%
  }
}
/* laptop */
@media(max-width: 1366px){


  .tab-content{
    width: 400px;
    height: 400px;
    top: 37%;

  }
  .tab-pane .content-text{
    font-size: 16px;
  }
  .test1 {
  top: 6%;
  left: 5%;
}
  .test2 {
  top: 22%;
  left: 16%;
}
  .test3 {
  top: 37%;
  left: 5%;
}
   .test4 {
  top: 54%;
  left: 15%;
}
   .test5 {
  top: 6%;
  right: 15%;
}
    .test6 {
 top: 22%;
  right: 5%;
}
  .test7 {
 top: 37%;
  right: 15%;
}
   .test8 {
 top: 54%;
  right: 4%;
}
  #testimonials{
    overflow: visible;
    padding: 50px 10px;
  }
  .testimonials-container ul li button{
    width: 182px;
    height: 56px;
  }
  .testimonials-container ul li button img{
    max-width: 81px;
  }
  .testimonials-container ul li button::before{
    width: 35px;
    height: 21px;
    bottom: -10px;
    right: -10px;
  }



  #softdev{
    height: auto;
    padding: 100px 0px
  }

  #ourBenefits{
    height: auto;
    padding: 100px 0px 100px 0px;
  }
  .ourBenefits_benefits-card img{
    width: 50px
  }
  .ourBenefits_benefits-card p {
    font-size: 18px;

  }
  .ourBenefits_benefits-card{
    min-height: 210px;
  }
  .line-animate-svg{
    display: none;
  }

#softdev::before {
  top: -36px;
  width: 95px;
  height: 117px;
}
.navigation > ul li a{
  font-size: 14px;
}
#ourBenefits .heading-h2::before{
  top: -30px;
  width: 30px;
height: 30px;
}
 #ourBenefits .heading-h2::after{
  top: -50px;
  width: 15px;
height: 15px;
}
.sec-line2{
  height: 100px;
  bottom:-3%;
}
.focus-tl-pointer {
top: -42%;
width: 56%;
}
.qline{
  bottom: -19%;
width: 85px;
}
.focus_tl-wrap::before{
  left: -3%;
top: -14%;
width: 74px;
height: 74px;
}
}
/* tablet */
@media(max-width: 938px){
  .hamburger-menu-container{
    display: block !important;
  }
  .navigation{
    display: none !important;
  }
  .mobile-menu{
    transform: translate(200%, 0);
    width: 100%;
  }
}
@media(max-width: 375px){
  .focus_tl-col.col1 .focus-item.lg::before{
    left: 52%;
  }
}
@media(max-width: 1100px){

  .ourBenefits_benefits-card{
    min-height: 280px;
  }


  #testimonials{
    height: auto !important;
    padding: 100px 0px 150px 0px;
  }
  .testimonials-container{
    height: auto;
    display: flex;
    flex-direction: column-reverse;
    gap: 30px;
    margin-top: 50px
  }
    .tab-pane{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
  .tab-content {
  width: 450px;
  height: 450px;
 position: unset;
    transform: none;
    margin: auto;
}
  .testimonials-container ul{
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    overflow-x: scroll;
    padding: 20px;

  }
  .testimonials-container ul li{
    position: unset;
  }
  .tab-pane .content-text {
  font-size: 19px;
}
  #testimonials::after{
    display: none
  }
  #testimonials .red-circle {
  width: 90px;
  height: 90px;
  bottom: 2%;
  left: 1%;
}
  #testimonials .squigly-lines {
  bottom: 12%;
  left: -1%;
  width: 50px;
  height: 15px;
}
.another-testimonial p{
  font-size: 20px;
  max-width: 100%;
  line-height: 2;
}
.another-testimonial p::after {
  top: -70px;
  left: 70px;
}
.focus-tl-pointer {
  display: none
}
#focus-tl::before{
  display: none;
}
#focus-tl::after {
  width: 474px;
  height: 440px;
  left: -34%;
}
.twopoints-line {
  right: 10%;
  bottom: 2%;
  width: 193px;
}
#build::after{
  right: -8%;
}
    .testimonials-container ul li:nth-child(3){
  order: -1 !important;
}
.curved-tosection{
  width: 6%
}
.author_cta-card-img{
  flex: 1;
}
.qline2{
  display: none;
}
}


/* end of media query */