body{font-family: "Inter", sans-serif;}
.container-fluid {width: 100%;max-width: 1600px !important; margin-left: auto;margin-right: auto;}
.hero{background-color: #e0edd7; border-radius: 24px; height: 800px; background-image: url("../images/Grid.png");}
.hero h1{font-size: 136px; line-height: 100%;}
.hero-right {width: 50%;position: relative;}
.head-aus{font-size: 88px; font-weight: 700;} 
.mobile {position: absolute;top: 100px;right: -100px;transition: transform 1.1s ease; /* Smooth transition for transform */}
.mobile1 {position: absolute;top: -40px;left: -20px;transition: transform 0.5s ease; /* Smooth transition for transform */}
.mobile {transform: translate(0, 0); /* Initial position */}
.mobile1 {  transform: translate(0, 0); /* Initial position */}
.hero:hover .mobile {transform: translate(20px, -20px); /* Moves 100px to the right */}
.hero:hover .mobile1 {transform: translate(-20px, 20px); /* Moves 100px down */}
.hero-below{bottom: 0px;}
.l-h{line-height: 160%;}
.circle{width: 72px; height: 72px; border-radius: 20px;box-shadow: 0px 8px 20px rgb(0, 0, 0, 0.08);transform: rotate(14deg); top:10px; left: 44%;}
.circle1{width: 72px; height: 72px; border-radius: 20px;box-shadow: 0px 8px 20px rgb(0, 0, 0, 0.1);transform: rotate(-24deg); top:81px; left: 51%;}
.circle2{right: -82px; bottom: 0;}
.img-rt{transform: rotate(-21deg);}
.app-user{background-color: #EBF6F4; border-radius: 24px;}
.int-currency{background-color: #F0F6EB; border-radius: 24px;}
.challenge {position: relative;}
.position-absolute1{position: absolute;}
.challenge::before{
    content: '';width: 50px; height: 50px;position: absolute;background-image: url("../images/chall.png");top: 39px;left: 0;background-repeat: no-repeat;background-position: center;}
.Technical::before{
    content: '';width: 50px; height: 50px;position: absolute;background-image: url("../images/right.png");top: 39px;left: 0;background-repeat: no-repeat;background-position: center;}
.tech-contain::before{
    content: '';position: absolute;background-image: url("../images/Vector.png");top: 26px;left: 22px;background-repeat: no-repeat;background-position: center;height: 316px;width: 2px;}
.tech-contain1::before{
    content: '';position: absolute;background-image: url("../images/Vector.png");top: 26px;left: 22px;background-repeat: no-repeat;background-position: center;height: 261px;
    width: 2px;
}
.tech-contain2::before{
    content: '';position: absolute;background-image: url("../images/Vector.png");top: 26px;left: 22px;background-repeat: no-repeat;background-position: center;height: 292px;
    width: 2px;
}
.Global{background-color: #ECEBF6; border-radius: 24px;}
.lang-bottom-left{ border-radius: 24px; height: 490px; border: 1px solid #E3E3E3;}
.java{width: 80px; height: 80px; background-color: #F8F8F8; border-radius: 16px;}


 .section-item {flex: 1;margin: 10px;overflow: hidden;background-color: #fff;transition: flex 0.1s ease;position: relative; height: 676px;}
.section-item img {width: 100%;height: auto;}
.section-item.expanded {flex: 1;}

/* .section-item:hover {flex: 1.8;z-index: 10;} */
.section-item:hover p {display: block;}
.opct{padding: 65px; height: 263px;}
.opct p{display: none;}
  .opct1{padding: 65px; height: 263px;}
  .opct1:hover{padding: 65px 65px 65px 65px}
  .opct1 p{display: none;}

  .opct2{padding: 65px; height: 263px;}
  .opct2 p{display: none;} 
  
  .tab-active{
    flex: 1.8;z-index: 10;
  }

  .tab-active p{
    display: block;
  }
  
  
  

  .track-left{background-color: #F0F6EB; height: 671px; border-radius: 24px;}
  .track-below {max-width: 640px;height: 365px;background-image: url(../images/task.png);margin-left: 58px;margin-top: 43px; background-repeat: no-repeat;}
  .track-middle{background-color: #EBF6F4; height: 671px; border-radius: 24px;}
  .track-below1{max-width: 640px; height: 365px; background-image: url("../images/T-com.png"); margin-left: 58px; margin-top: 43px;background-repeat: no-repeat;}
  .track-right{background-color: #ECEBF6; height: 671px; border-radius: 24px;}
  .track-below2{max-width: 640px; background-image: url("../images/image597.png"); margin-left: 58px; height: 365px;margin-top: 43px;background-repeat: no-repeat;}
  /* Button styles */
.tab-btn.tab-btn {padding: 16px;border: none;cursor: pointer;margin-right: 10px;transition: background-color 0.3s ease;color: #fff; /* White text */border-radius: 5px;font-size: 24px;color: #000;
  }
 .tab-btn[data-tab="advancements"] {background-image: url(../images/green-bc.png);width: 311px;background-color: transparent;background-repeat: no-repeat; /* Green for Client's Advancements */}
  .tab-btn[data-tab="benefits"] {background-color: #F0F6EB; /* Blue for User Benefits */}
  .tab-btn.active[data-tab="benefits"] {background-color: #F0F6EB; /* Darker blue when active */} 
  .tab-btn:hover { opacity: 0.9; /* Slight dimming effect on hover */}
  .tab-content { transition: opacity 0.5s ease; max-width: 100%; padding-left: 20px;}
  .content-box {background-color: #fff;border-radius: 10px;margin-bottom: 15px;}
  .box1{ border-radius: 24px; border: 1px solid #E3E3E3;}
  .growth{background-color: #F0F6EB; border-radius: 24px; background-image: url("../images/Grid.png");}
  .growth-left{padding-top: 185px; padding-bottom: 185px;}
  .g-h{font-size: 64px;}
  .wizard-above-left{max-width: 459px;  border-radius: 200px; height: 278px;}
  .Portfolios-below{background-image: url("../images/black-left.png"); background-repeat: no-repeat; height: 600px; background-position: center;}
  .Portfolios-inner{width: 90%; height: 80px; background-color: rgb(225, 225, 225, 0.08);bottom: 10px;bottom: 24px;left: 24px; border-radius: 40px;}
  .Portfolios-inner1{width: 90%; height: 80px; background-color: rgb(225, 225, 225, 0.08);bottom: 10px;bottom: 24px;left: 24px; border-radius: 40px;}
  
  .Portfolios-inner1 p{color: #fff;}
  .Portfolios-inner p{color: #fff;}
  .Portfolios-below1{background-image: url("../images/black-right.png"); background-repeat: no-repeat; height: 600px; background-position: center;}
  
  @media screen and (max-width:1600px){
    .container-fluid {width: 100%;max-width: 1440px !important; margin-left: auto;margin-right: auto;}
    .hero h1{font-size: 112px; line-height: 100%;}
    .head-aus{font-size: 76px; font-weight: 700;} 
    .g-h {font-size: 58px;}
    .circle {top: -91px;left: 40%;}
    .circle1{top: -62px;left: 49%;}
    /* .tech-contain2::before {content: '';position: absolute;background-image: url(../images/Vector.png);top: 26px;left: 22px;background-repeat: no-repeat;background-position: center;height: 235px;width: 2px;
    } */
    .section-item {height: 638px;}
    .track-left{background-color: #F0F6EB; height: 638px; border-radius: 24px;}
    .track-below {max-width: 640px;height: 638px;background-image: url(../images/task.png);margin-left: 58px;margin-top: 43px; background-repeat: no-repeat;}
    .track-middle{background-color: #EBF6F4; height: 638px; border-radius: 24px;}
    .track-below1{max-width: 640px; height: 638px; background-image: url("../images/T-com.png"); margin-left: 58px; margin-top: 43px; background-repeat: no-repeat;}
    .track-right{background-color: #ECEBF6; height: 638px; border-radius: 24px;}
    .track-below2{max-width: 640px; background-image: url("../images/image597.png"); margin-left: 58px; height: 638px;margin-top: 43px; background-repeat: no-repeat;}
  }

  @media screen and (max-width:1440px){
    .container-fluid {width: 100%;max-width: 1200px !important; margin-left: auto;margin-right: auto;}
    .hero h1{font-size: 88px; line-height: 100%;}
    .head-aus{font-size: 64px; font-weight: 700;} 
    .g-h {font-size: 40px;}
    .tech-contain2::before {content: '';position: absolute;background-image: url(../images/Vector.png);top: 26px;left: 22px;background-repeat: no-repeat;background-position: center;height: 250px;width: 2px;
    }
    .circle2 {right: -102px;bottom: -9px;
    }
    .top-p{padding-top: 89px;}
    .tech-contain::before{
        content: '';position: absolute;background-image: url("../images/Vector.png");top: 26px;left: 22px;background-repeat: no-repeat;background-position: center;height: 306px;width: 2px;}
  }

  @media screen and (max-width:1024px){
    .container-fluid {width: 100%;max-width: 950px !important; margin-left: auto;margin-right: auto;}
    .container {width: 100%; max-width: 900px;}
    .hero-below {bottom: 0;}
    .hero {height: 575px;}
    .mobile {top: 45px; bottom: 0; left: 61px;}
    .hero h1 {font-size: 64px;}
    .top-m{ margin-top: -20px;}
    .head-aus {font-size: 53px;}
    .circle2 {right: -257px;}
    .g-h {font-size: 34px;}
    .top-p {padding-top: 196px;}
    .tech-contain2::before {height: 274px;}
    .top-img{padding-top: 208px;}
    .tech-contain1::before {height: 273px;}
    .tab-btn[data-tab="advancements"] {width: 226px;}
    .tab-btn.tab-btn {font-size: 16px;}
    .dd{margin-right: 10px;}
    .Portfolios-inner {bottom: 24px;left: 24px;border-radius: 40px; height: 66px;}
    .Portfolios-inner1 {bottom: 24px;left: 24px;border-radius: 40px; height: 66px;}
    .growth-left {
    padding-top: 118px;
    padding-bottom: 185px;
}
  }

  @media screen and (max-width:768px){
    .container-fluid {width: 90%;max-width: 768px !important; margin-left: auto;margin-right: auto;}
    .position-absolute1{position: static;}
    .hero {
      height: auto;}
      .mobile {
        position: static;}
        .hero-left{margin-bottom: 50px;}
        .hero-right {
          width: 100%;
          position: relative;}

          .circle {
            top: 20px;
            left: 50%;
        }
        .top-p {padding-top: 48px;}
    .circle1{ top: 70px;left: 60%;}
    .circle2 {
      right: -12px;
      bottom: -15px;
  }
  .wizard-above-left {height: 150px;}
  .img-right{max-width: 768px; width: 90%; margin: auto;}
  .lock{display: none;}
  .lang-bottom-left {
    border-radius: 24px;
    height: 435px; margin-bottom: 20px;}
    .growth-left {
      padding-top: 84px;
      padding-bottom: 24px;
  }
  .m-a{margin: auto;}
  .top-img {
    padding-top: 76px;
}
.Portfolios-below{background-image: url("../images/black-left1.png"); background-repeat: no-repeat; height: 600px; background-position: center;}
  .Portfolios-below1{background-image: url("../images/black-right.png"); background-repeat: no-repeat; height: 600px; background-position: center; background-size: contain;}
  .Portfolios-inner1 {}
  .Portfolios-inner {bottom: 63px;}
  .opct p{display: block;}
  .opct1 p{display: block;}
  .opct2 p{display: block;}
}
  @media screen and (max-width:480px){
  .hero h1 {
    font-size: 48px;}
    .lock{display: none;}
    .head-aus {
      font-size: 28px;}
      .g-h {
        font-size: 22px;
    }
    .Technical::before {
      top: 30px;}
      .tech-contain::before {height: 358px;
        left: 22px; background-repeat: repeat;}
        .tech-contain2::before {
          height: 303px;
      }
      .tech-contain1::before {
        height: 302px;
    }
    .top-p {
      padding-top: 0px;
  }
  .Portfolios-below{background-image: url("../images/black-left1.png"); background-repeat: no-repeat; height: 326px; background-position: center; background-size: contain;}
  .Portfolios-below1{background-image: url("../images/black-right.png"); background-repeat: no-repeat; height: 326px; background-position: center; background-size: contain;}
  .Portfolios-inner1 {}
  .Portfolios-inner {bottom: 63px;}
  }