/* ***********************************Styling for growth section start here ************** */
.mg10
{
	margin-bottom:15px;
	margin-left: auto;
    margin-right: auto;
    display: table;
} 
 .growth_hero {
    padding: 181px 0 103px 0;
  }
  .growth_hero .main_row {
    margin-bottom: 30px;
  }
  .growth_hero .page_heading {
    font-size: 44px;
    color: var(--white);
    text-transform: capitalize;
  }
  .growth_hero .header_main {
    background: #fff;
    padding: 40px 35px 20px 35px;
    border-radius: 10px 10px 0 0;
  }
  .growth_hero .header_main p {
    color: var(--blue);
  }
  .growth_hero .hdr_col {
    padding-top: 30px;
  }
  .growth_hero .hdr_col .row {
    border-radius: 0px 10px 0px 0px;
    border-top: 1px solid #ffffff69;
    border-right: 1px solid #ffffff69;
  }
  .growth_hero .hdr_col .background-black_g {
    border-radius: 0px 10px 0px 0px;
  }
  .growth_hero .header_main h3 {
    color: var(--blue);
  }
  .growth_hero .column_header {
    padding: 20px 0px;
  }
  .growth_hero .column_header h5 {
    color: var(--white);
    text-transform: none;
    margin-bottom: 25px;
    max-width: 117px;
    font-weight: 400;
  }
  
  .growth_hero .column_header p {
    color: var(--white);
    font-size: 14px;
    margin: 0;
  }
  
  .growth_hero .column_header h4 {
    color: var(--white);
    font-size: 18px;
  }
                                                               
  .growth_hero .accordion-item {
    background: none;
    border: none;
    padding: 1rem 0;
  }
  
  .growth_hero .growth_item {
    background: #fff;
  }
  
  .growth_hero .growth_item:nth-child(odd) {
    background: var(--ocean);
  }
  
  .growth_hero .growth_item h5 {
    font-weight: 400;
    text-transform: none;
  }
  
  .growth_hero .growth_item p {
    margin-bottom: 0px;
    font-size: 16px;
  }
  .growth_hero .icon_col p {
    color: var(--metallic);
  }
  .growth_hero .icon_col,
  .growth_hero .cont_col {
    border: 0.8px solid #22396326;
    border-top: 0px;
    border-bottom: 0px;
  }
  .growth_hero .growth_item:last-child {
    border-bottom: 1px solid #22396326;
    border-radius: 0 0 10px 10px;
  }
  .growth_hero .growth_item:last-child .cont_col {
    border-radius: 0 0px 0px 10px;
  }
  .growth_hero .growth_item:last-child .icon_col:last-child {
    border-radius: 0 0 10px 0;
  }
  .growth_hero .accordion-button:focus {
    border: 0px solid;
    box-shadow: none !important;
  }
  
  .growth_hero .accordion-button {
    border: none;
    background: transparent;
    padding: 0rem 1.25rem;
  }
  
  .growth_hero .accordion-button::after {
    background-image: url(../img/icon_down.svg);
  }
  
  .growth_hero .accordion-button:not(.collapsed)::after {
    background-image: url(../img/icon_up.svg);
    transform: rotate(-360deg);
  }
  .growth_hero .main_head .head_top .accordion-button:not(.collapsed)::after {
    background-image: url(../img/main_up_icon.svg);
    transform: rotate(-360deg);
  }
  .growth_hero .main_head .head_top .accordion-button::after {
    background-image: url(../img/main_down_icon.svg);
    width: 35px;
    height: 35px;
    background-size: 35px;
  }
  .growth_hero .accordion-button:not(.collapsed) {
    border: none;
    box-shadow: none;
    color: var(--opal);
  }
  .growth_hero.show-small-device .accordion-button:not(.collapsed) {
    background-color: var(--light_blue);
  }
                                                                                                      
  .growth_hero .accordion-button:not(.collapsed) h5 {
    color: var(--blue);

  }
  
  .growth_hero .accordion-body {
    padding: 0rem 1.25rem;
  }
  .growth_hero .accordion-body ul li {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 25px;
    color: var(--blue);
    font-family: var(--body_font);
}
  .growth_hero.show-small-device {
    display: none;
  }
  button.accordion-button.collapsed.background-light_blue {
    background-color: var(--light_blue);
}



  /* medai query  */
  @media only screen and (min-width: 1700px) {
    .growth_hero {
      background-size: 100% 72% !important;
    }
  }
  @media only screen and (max-width: 1030px) {
  }
  
  @media screen and (max-width: 769px) {
    .growth_hero.show-desktop {
      display: none;
    }
  
    .growth_hero.show-small-device {
      display: block;
      background: url(growth_bg.jpg) !important;
      background-size: cover !important;
      background-repeat: no-repeat !important;
    }
       
    
    .growth_hero {
      padding: 18% 20px 5%;
      background-size: contain !important;
      background-repeat: no-repeat !important;
    }
    .growth_hero .header_main h3{font-size: 22px;}
    .growth_hero .accordion-body {
      padding: 0rem;
    }
    .growth_hero .column_header {
      padding: 20px;
    }
    .growth_hero .accordion-button {
      border-radius: 0px !important;
    }
    .growth_hero .accordion-button {
      background: transparent;
    }
    .growth_hero .cont_col {
      max-width: 100%;
      margin: auto;
      padding: 0px;
    }
    .growth_hero .cont_col {
      box-shadow: 0px 0px 30px rgb(0 0 0 / 25%);
      border: none !important;
      border-radius: 0 0 10px 10px;
    }
  
    .growth_hero .accordion-item.main_head {
      padding-top: 0px;
      padding-bottom: 0px;
    }
    .growth_hero .accordion-item.main_head > .accordion-header h5 {
      color: #fff;
    }
    .growth_hero .header_main {
      margin: 0 auto 29px auto;
    }
    .growth_hero .accordion-button.background-blue {
      background: var(--blue) !important;
    }
    /* .growth_hero .accordion-button.background-light_blue {
      background: var(--light_blue);
    } */
    .growth_hero .accordion-button.background-black_g {
      background: var(--black_g) !important;
    }
  
    .growth_hero .accordion-button {
      padding: 0rem 20px;
    }
  
    .growth_hero .cont_col h5 {
      font-size: 16px;
      text-transform: none;
    }
  
    .growth_hero .cont_col img {
      max-width: 16px;
      margin-right: 5px;
    }
    .growth_hero .background-opal.column_header h5,
    .growth_hero .background-opal.column_header h4,
    .growth_hero .background-opal.column_header p {
      color: var(--black_g);
    }
    .growth_hero .accordion-button h5 {
      font-weight: 600;
      color: var(--blue);
    }
    .growth_hero .accordion-body ul,
    .growth_hero .accordion-body p {
      font-size: 14px;
    }
  
    .growth_hero .column_header h5 {
      font-size: 16px;
      max-width: 100%;
      margin-bottom: 20px;
      font-weight: 400;
    }
  
    .growth_hero .column_header h4 {
      font-size: 22px;
    }
  
    .growth_hero .column_header p {
      font-size: 14px;
      margin-bottom: 10px;
    }
    .growth_hero .growth_item p {
      margin-bottom: 5px;
      font-size: 14px;
    }
  }
  @media only screen and (max-width: 550px) {
  .growth_hero{
    padding: 105px 0 30px 0;
  }
}
  @media only screen and (max-width: 500px) {
    .growth_hero .page_heading {
      font-size: 36px;
      line-height: 42px;
  }
   
    .growth_hero .header_main h3 {
      font-size: 22px;
    }
    .growth_hero .accordion-button {
      padding: 0rem 10px;
    }
    .growth_hero .page_heading {
      font-size: 28px;
      line-height: 130%;
    }
    .growth_hero .cont_col{max-width: 100%;}
  }
  @media only screen and (max-width: 380px) {
  }
  @media only screen and (max-width: 325px) {
  }
  @media screen and (min-width: 1260px) and (max-width: 1700px) {
  }
  
  /* ****************************************Styling for what we do section start here ******************** */
  .what_we_do {
    padding: 0 0 5.6% 0;
    background: url(what_bg.png);
    background-position: bottom;
    background-size: contain;
    background-repeat: no-repeat;
  }
  
  .what_we_do .sec_header p {
    max-width: 601px;
  }
  
  .what_we_do .inner_wrpr {
    padding: 25px;
    border: 1px solid #e1e1e1;
    background: #fff;
    height: 100%;
  }
  
  .what_we_do .inner_wrpr li {
    color: var(--blue);
    margin-bottom: 20px;
  }
  .what_we_do .inner_wrpr p,
  .what_we_do .inner_wrpr span {
    color: var(--blue);
    font-family: var(--body_font);
  }
  
  .what_we_do .btn_hdr {
    color: #fff;
    border: none;
    box-shadow: none;
    padding: 0;
    margin-top: 30px;
  }
  
  .what_we_do .btn_hdr p {
    padding: 10px 20px;
    color: #fff;
    margin-bottom: 0px;
  }
  
  .what_we_do .spcer {
    height: 20px;
    background-color: #fff;
  }
 
  .small_side.local {
    order: 0;
}
.small_side.local.my_order_class{
  order: 2;
}
  .col-md-6.what_we_do_col.\32 {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}
  
  .flex-direction-column {
    flex-direction: column;
  }
  
  .inner_wrpr button {
    text-transform: uppercase;
    color: var(--white);
    font-size: 16px;
    background: #d3d7e0;
    padding: 20px;
    font-weight: 600;
    width: 100%;
    text-align: center;
    margin: 10px 0;
    display: block;
    border: none;
  }
  .inner_wrpr button:hover {
    color: var(--blue);
    background: var(--yellow);
  }
  
  .what_we_do .btn_hdr {
    text-transform: capitalize;
  }
  .what_we_do .btn_hdr.background-opal p {
    color: var(--black_g);
  }
  /* medai query  */
  @media only screen and (min-width: 1700px) {
  }
  @media only screen and (max-width: 1030px) {
  }
  @media only screen and (max-width:850px){
    .what_we_do .btn_hdr {
      padding: 16px 30px;
  }
  }
  @media only screen and (max-width: 780px) {
    .what_we_do {
      padding: 0 10px 30px 10px;
    }
    .what_we_do h2 {
      font-size: 28px;
    }
  }
  @media only screen and (max-width: 430px) {
    .what_we_do {
      padding: 50px 15px;
    }
    .what_we_do .inner_wrpr {
      padding: 30px 20px;
      
      background: #FFFFFF;
      box-shadow: 0px 4px 30px rgba(34, 57, 99, 0.15);
      border-radius: 0px;
      border:none;
    }
    .what_we_do .btn_hdr {
      padding: 10px 20px;
      color: #fff;
      text-transform: capitalize;
    }
    .what-do-last-col {
      margin-top: 0px;
    }
    .what_we_do .nav-tabs{
      border-bottom: 0px solid;
    }
    .nav-tabs .btn_hdr{
      /* background: #d3d7e0; */
    }
    .nav-tabs .btn_hdr.active.background-opal{background-color:var(--opal)}
    .nav-tabs .btn_hdr.active.background-black_g{background-color:var(--black_g)}
    .nav-tabs .btn_hdr.active.background-blue{background-color:var(--blue)}
    .nav-tabs .btn_hdr.active.background-ocean{background-color:var(--ocean)}
    .nav-tabs .btn_hdr.active.background-light_blue{background-color:var(--light_blue)}
    .what_we_do a {
      color: var(--blue);
      background: var(--yellow);
  }
  }
  @media only screen and (max-width: 380px) {
  }
  @media only screen and (max-width: 325px) {
  }
  @media screen and (min-width: 1260px) and (max-width: 1700px) {
  }
  
  /* ******************************************usecase slider section start here ******************** */
  
  .usecase_slider {
    padding: 8.38% 0 6.6% 0;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 1) 36%,
      rgba(70, 89, 125, 1) 36%,
      rgba(34, 57, 99, 1) 78%,
      rgba(255, 255, 255, 1) 78%
    );
  }
  .usecase_slider a {
    color: #ffa336;
    font-size: 16px;
  }
  
  .usecase_slider h1 {
    font-weight: 400;
    max-width: 800px;
    margin: auto;
  }
  
  .usecase_slider .container {
    background-color: var(--white);
  }
  
  .hms_outr {
    display: flex;
    width: 1010px;
    max-width: 90%;
    margin: 94px auto 0 auto;
    align-items: flex-start;
    justify-content: center;
  }
  
  .hms_outr .slick-dots {
    display: none;
  }
  
  .hms_outr .slider-for {
    width: 810px;
    max-width: 81%;
    margin-right: 1%;
  }
  
  .hms_outr .slider-nav {
    width: 180px;
    max-width: 18%;
  }
                              
  .hms_outr .slick-arrow {
    position: absolute;
    z-index: 1;
    border: none;
    width: 100%;
    font-size: 0;
    height: 26px;
    background: var(--yellow) url("../img/down_arr_22.svg") no-repeat center
      center;
  }
  
  .hms_outr .slick-prev {
    top: 0;
    display: none !important;
  }
  
  .hms_outr .slick-next {
    bottom: 14px;
  }
  
  .hms_outr .slick-vertical .slick-slide {
    opacity: 0.4;
  }
  
  .hms_outr .slick-vertical .slick-slide.slick-current {
    opacity: 1;
  }
  
  .hms_outr .slick-vertical .slick-slide img {
    margin: 0 0 13px 0;
  }
  
  .hms_outr .slider-for img {
    display: block;
    margin: 0 0 23px;
  }
  /* medai query  */
  @media only screen and (min-width: 1700px) {
  }
  @media only screen and (max-width: 1030px) {
  }
  @media only screen and (max-width: 780px) {
    section.usecase_slider .container {
      max-width: 738px;
    }
  }
  @media only screen and (max-width: 430px) {
  }
  @media only screen and (max-width: 380px) {
  }
  @media only screen and (max-width: 325px) {
  }
  @media screen and (min-width: 1260px) and (max-width: 1700px) {
  }
                                                   
  /* *******************************************************Styling for approach section start here ********************* */
  .approach {
    padding: 7% 0 7% 0;
    background: var(--ocean);
  }
  
  .approach .section_header .bttn {
    margin: 0;
  }
  
  .approach .timeline h4 {
    text-transform: none;
  }
  
  .approach .section_header p {
    max-width: 87%;
  }
  /* medai query  */
  @media only screen and (min-width: 1700px) {
  }
  @media only screen and (max-width: 1030px) {
  }
  @media only screen and (max-width: 780px) {
    .approach {
      padding: 9% 1% 7% 1%;
    }
    .approach .show-desktop {
      display: none;
    }
    .approach .timeline h4{
      font-size: 16px;
    }
  }
  @media only screen and (max-width: 500px) {
    section.client-slider {
      padding: 60px 0 60px 0;
  }
    .approach {
      padding: 50px 15px;
    }
    .approach h2 {
      
      line-height: 123%;
    }
    .approach .section_header p {
      max-width: 100%;
      margin-bottom: 30px;
    }
    .approach .bttn.buttn_yellow{max-width: 100%;width: 100%;}
  }
  @media only screen and (max-width: 380px) {
  }
  @media only screen and (max-width: 325px) {
  }
  @media screen and (min-width: 1260px) and (max-width: 1700px) {
  }
  
  /* ****************************************************timeline section start here ******************** */
  
  /* The actual timeline (the vertical ruler) */
  .timeline {
    position: relative;
    max-width: 1200px;
    margin: 50px auto 0;
    padding: 0 0px;
    display: flex;
  }
  
  /* The actual timeline (the vertical ruler) */
  /* .timeline::after {
      content: '';
      position: absolute;
      width: 86%;
      height: 2px;
      background-color: var(--opal);
      top: 19px;
      bottom: 0;
      left: 21px;
      margin-left: 15px;
  } */
  
  /* Container around content */
  .timeline .container {
    padding: 25px 34px 3px 0px;
    position: relative;
    background-color: inherit;
    width: 100%;
    border-top: 1px solid #d3d7e0;
  }
  .timeline .container:last-child {
    border-top: 0px solid #d3d7e0;
  }
  .number {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    background: #ffa336;
    text-align: center;
    position: absolute;
    top: -17px;
    left: 0px;
  }
  
  /* The circles on the timeline */
  /* .timeline  .container::after {
      content: '1';
      position: absolute;
      background: #F8B705;
      width: 25px;
      height: 25px;
      right: -11px;
      text-align: center;
      top: 10px;
      z-index: 1;
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      border-radius: 30px;
  } */
  
  /* Place the container to the left */
  .timeline .left {
    left: 0;
  }
  
  /* Place the container to the right */
  /* .timeline  .right {
      left: 15px;
  } */
  
  /* Fix the circle for containers on the right side */
  /* .timeline  .right::after {
      left: 0;
  } */
  /* medai query  */
  @media only screen and (min-width: 1700px) {
  }
  @media only screen and (max-width: 1030px) {
  }
  @media only screen and (max-width: 780px) {
  }
  @media only screen and (max-width: 500px) {
    .timeline .container {
      padding: 3px 10px 20px 25px;
      border-left: 1px solid #d3d7e0;
      border-top: 0px;
    }
    .timeline .container:last-child {
      border-top: 0px solid #d3d7e0;
      border-left: 0px;
    }
    .timeline {
      display: block;
      margin:0 auto;
    }
    .number {
      width: 30px;
      height: 30px;
      border-radius: 30px;
      background: #ffa336;
      text-align: center;
      position: absolute;
      top: 0px;
      left: -17px;
    }
    .timeline p {
      font-size: 18px;
    }
  }
  @media only screen and (max-width: 380px) {
  }
  @media only screen and (max-width: 325px) {
  }
  @media screen and (min-width: 1260px) and (max-width: 1700px) {
  }
  

  .active_side_div{
    opacity: 0;
    position: absolute;
    z-index: -9999;
  }
  .small_side .description_wraper_box {
    display: none;
}