/*=========================================
        ORDOACTIVE SERVICES
=========================================*/

.oa-services {
  padding: 120px 0;
  background: #fff;
  overflow: hidden;
  position: relative;
  background: #0057b80d;
}
.oa-services::before {
  content: "";
  background-image: url("/assets/images/service-shape.png");
  position: absolute;
  width: 345px;
  height: 470px;
  bottom: 6%;
  right: 0;
  background-size: contain;
  background-repeat: no-repeat;
}
.oa-services .container {
  max-width: 1320px;
  margin: auto;
}

.oa-content {
  width: 100%;
}

.oa-content-image {
  margin: 25px 0;
}

.oa-content-image img {
  width: 100%;
  border-radius: 20px;
  display: block;
}

/*=========================================
        HEADING
=========================================*/

.oa-heading {
  text-align: center;
  margin-bottom: 70px;
}

/*=========================================
        WRAPPER
=========================================*/

.oa-wrapper {
  display: grid;
  grid-template-columns: 540px 1fr;
  gap: 90px;
  align-items: center;
}

/*=========================================
        LEFT SIDE
=========================================*/

.oa-tabs {
  position: relative;
  padding-left: 65px;
}

/*=========================================
        TIMELINE
=========================================*/

.oa-timeline {
  position: absolute;
  left: 18px;
  top: 15px;
  width: 2px;
  height: calc(100% - 30px);
  background: #d9e4f3;
}

.oa-progress {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
  background: #0057b8;
  transition: 0.5s ease;
}

/*=========================================
        SERVICE TAB
=========================================*/

.oa-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 30px 0;
  cursor: pointer;
  transition: 0.35s;
  border-bottom: 1px solid #0057b8;
}

/*=========================================
        DOT
=========================================*/

.oa-dot {
  position: absolute;
  left: -55px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #c9d8eb;
  transition: 0.35s;
}

/*=========================================
        ICON
=========================================*/

.oa-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f8fc;
  color: #0057b8;
  font-size: 22px;
  transition: 0.35s;
}

/*=========================================
        TITLE
=========================================*/

.oa-text {
  flex: 1;
}

.oa-text h4 {
  font-size: 20px;
  line-height: 1.45;
  color: #10233f;
  margin: 0;
  transition: 0.35s;
}

/*=========================================
        ARROW
=========================================*/

.oa-arrow {
  color: #b5c2d1;
  transition: 0.35s;
}

.oa-arrow i {
  font-size: 18px;
}

/*=========================================
        HOVER
=========================================*/

.oa-tab:hover .oa-text h4 {
  color: #0057b8;
  transform: translateX(6px);
}

.oa-tab:hover .oa-icon {
  background: #0057b8;
  color: #fff;
  transform: scale(1.08);
}

.oa-tab:hover .oa-arrow {
  color: #0057b8;
  transform: translateX(8px);
}

.oa-tab:hover .oa-dot {
  border-color: #0057b8;
  transform: scale(1.2);
}

/*=========================================
        ACTIVE
=========================================*/

.oa-tab.active .oa-text h4 {
  color: #0057b8;
}

.oa-tab.active .oa-icon {
  background: #0057b8;
  color: #fff;
}

.oa-tab.active .oa-arrow {
  color: #0057b8;
}

.oa-tab.active .oa-dot {
  background: #0057b8;
  border-color: #0057b8;
  box-shadow: 0 0 0 8px rgba(0, 87, 184, 0.12);
}

/*=========================================
        COMPLETED
=========================================*/

.oa-tab.completed .oa-dot {
  background: #0057b8;
  border-color: #0057b8;
}

/*=========================================
        RIGHT CONTENT
=========================================*/

.oa-content {
  display: grid;
  gap: 70px;
  align-items: center;
}

/*=========================================
        CONTENT TEXT
=========================================*/

.oa-content-text {
  opacity: 0;
  transform: translateY(40px);
  transition: 0.6s ease;
}

.oa-content-text.show {
  opacity: 1;
  transform: translateY(0);
}

.oa-content-text h3 {
  font-size: 20px;
  line-height: 40px;
  color: #10233f;
  margin-bottom: 0px;
  /* font-weight: 700; */
  /* font-family: "Lato", sans-serif !important; */
}

.oa-content-text p {
  font-size: 17px;
  line-height: 1.9;
  color: #667085;
  margin-bottom: 35px;
}

/*=========================================
        BUTTON
=========================================*/

.oa-btn i {
  transition: 0.35s;
}

.oa-btn:hover {
  background: #003f86;
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0, 87, 184, 0.25);
}

.oa-btn:hover i {
  transform: translateX(6px);
}

/*=========================================
        IMAGE AREA
=========================================*/

.oa-content-image {
 position: relative;
  opacity: 0;
  transform: translateX(50px);
  transition: 0.7s ease;
}

.oa-content-image.show {
  opacity: 1;
  transform: translateX(0);
}

.oa-content-image img {
  width: 100%;
  display: block;
  border-radius: 24px;
  transition: 0.45s;
  max-width: 460px;
  height: 250px;
}
/*=========================================
        IMAGE HOVER
=========================================*/

.oa-content-image:hover img {
  transform: scale(1.03);
}

/*=========================================
        CONTENT ANIMATION
=========================================*/

@keyframes fadeUp {
  from {
    opacity: 0;

    transform: translateY(30px);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }
}

@keyframes fadeLeft {
  from {
    opacity: 0;

    transform: translateX(40px);
  }

  to {
    opacity: 1;

    transform: translateX(0);
  }
}
/*=========================================
        LARGE LAPTOP
=========================================*/

@media (max-width: 1400px) {
  .oa-wrapper {
    grid-template-columns: 380px 1fr;
    gap: 70px;
    margin: 0 40px;
}

  .oa-content {
    gap: 60px;
  }

  .oa-tabs {
    padding-left: 80px;
}

  .oa-timeline {
    left: 32px;
    top: 27px;
}

h3#serviceTitle {
    margin-top: 8px;
}

p#contentDescription {
     margin-top: 0px; 
}

h2#contentLabel {
    font-size: 28px;
}

.content-box ul {
    grid-row-gap: 10px;
}

ul#capabilityList {
    margin: 10px 0;
}

h3#capabilityTitle {
    margin-bottom: 0px;
}

.capability-tabs {
     padding-top: 0px;
}

.capability-content {
    padding-top: 10px;
}

}

/*=========================================
        LAPTOP
=========================================*/

@media (max-width: 1200px) {
  .oa-services {
    padding: 100px 0;
  }
  .oa-heading h2 {
    font-size: 32px;
  }
  .oa-content {
    /* grid-template-columns: 1fr; */
    gap: 50px;
  }
  .oa-content-image {
    max-width: 650px;
    margin: auto;
  }
  .oa-content-text p {
    font-size: 16px;
    line-height: 1.5;
}
.oa-content-text h3 {
    font-size: 19px;
}
.oa-text h4 {
    font-size: 19px;
}
h2#contentLabel {
    font-size: 25px;
}
.capability-content {
   
    max-width: 90%;
    margin: 0 auto;
}
}

/*=========================================
        TABLET
=========================================*/

@media (max-width: 991px) {
  .oa-wrapper {
     grid-template-columns: 1fr; 

    gap: 60px;
  }

  .oa-tabs {
    padding-left: 50px;
  }

  .oa-timeline {
    left: 17px;
  }

  .oa-dot {
    left: -40px;
  }

  .oa-heading {
    margin-bottom: 50px;
  }

  .oa-heading h2 {
    font-size: 36px;
  }

  .oa-heading h3 {
    font-size: 20px;
  }

  .oa-content {
    grid-template-columns: 1fr;
  }

  .oa-content-text {
    order: 2;

    text-align: center;
  }

  .oa-content-image {
    order: 1;

    margin: auto;
  }

 .oa-content-text h3 {
    font-size: 25px;
}


}

/*=========================================
        MOBILE
=========================================*/

@media (max-width: 767px) {
  .oa-services {
    padding: 80px 0;
  }

  .oa-heading h2 {
    font-size: 30px;

    line-height: 1.3;
  }

 
  .oa-tabs {
    padding-left: 40px;
  }

  .oa-timeline {
    left: 16px;
  }

  .oa-dot {
    left: -30px;

    width: 14px;

    height: 14px;
  }

  .oa-tab {
    gap: 15px;

    padding: 16px 0;
  }

  .oa-icon {
    width: 48px;

    height: 48px;

    font-size: 18px;
  }

  .oa-text h4 {
    font-size: 17px;

    line-height: 1.5;
  }

  .oa-arrow {
    display: none;
  }

  .oa-content {
    gap: 35px;
  }

  .oa-content-text h3 {
    font-size: 28px;
  }

  .oa-btn {
    padding: 14px 28px;

    font-size: 15px;
  }
}

/*=========================================
        SMALL MOBILE
=========================================*/

@media (max-width: 480px) {
  .oa-heading h2 {
    font-size: 23px;
  }

  .oa-heading h3 {
    font-size: 15px;
  }

  .oa-tabs {
    padding-left: 32px;
  }

  .oa-dot {
    left: -25px;

    width: 12px;

    height: 12px;
  }

  .oa-icon {
    width: 42px;

    height: 42px;

    font-size: 16px;
  }

  .oa-text h4 {
    font-size: 15px;
  }

  .oa-content-text h3 {
    font-size: 24px;
  }

  .oa-btn {
    width: 100%;

    justify-content: center;
  }
  
}

/*=========================================
        SCROLL ANIMATION
=========================================*/

.oa-wrapper {
  opacity: 1;

  transform: none;
}

/*=========================================
        SMOOTH TRANSITIONS
=========================================*/

.oa-tab,
.oa-icon,
.oa-dot,
.oa-arrow,
.oa-text h4,
.oa-content-image img,
.oa-btn {
  transition: all 0.35s ease;
}