body{ font-family: 'SF Pro Text';}

.hero{font-size: 88px;}
.side{opacity: 40%; color: #121212; line-height: 140%;}
.l-p{color: #121212; line-height: 130%;}
.l-p1{color: #121212; line-height: 100%;}
.l-p2{color: #121212; line-height: 150%;}
.hero-img{width: 100%; height: 750px; background-image: url(../images/hero.png); background-repeat: no-repeat; border-radius: 24px;}
.client{margin-right: 100px; height: 301px;}
.client-btn{right: 45px;bottom: 33px;}
.image {width: 90px;height: 90px;border-radius: 50%;overflow: hidden;position: absolute;z-index: 1;right: 81px;bottom: 24px;}
.image img {width: 100%;height: 100%;object-fit: cover;border-radius: 50%;}
/* Circular text */
.circular-text {position: absolute;width: 130px;height: 130px;z-index: 2;right: 61px;bottom: 4px;}
svg {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
text {font-size: 12px;fill: #000;letter-spacing: .8px;font-weight: 700;}
/* Animation */@keyframes rotate {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}
.circular-text svg {animation: rotate 10s linear infinite;}
.b-t{border-top: 1px solid rgba(18, 18, 18, .2)}
.t-c{color:rgba(18, 18, 18, .4)}
.vision-f{font-size: 64px; font-weight: bold;}
.ground-middle-img{background-image: url("../images/image687.png"); width: 437px; height: 400px; background-repeat: no-repeat;}
.img-mid-p{top:80px; left: 45px;}
.img-mid-p1{top:154px; right: 45px;}
.img-mid-p2{bottom:64px; right: 193px;}
.roadblock{border-bottom: 1px solid rgba(18, 18, 18, .2);}
.trelo{background-image: url("../images/image701.png"); border-radius: 24px; width: 100%; height: 560px;}
.blue-img{top:86px; left: 328px;}
.page-container {position: relative;width: 100%;height: 778px;overflow: hidden;}
/* Each page styling */
.page {display: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: white;opacity: 0;transition: opacity 1s ease-in-out;}
.page.active {display: block;opacity: 1;}
/* Arrow styling (top-right and top-left corners) */
.arrow {position: absolute;top: 20px;width: 80px;height: 40px;cursor: pointer;}
/* Specific positioning for previous (left) and next (right) arrows */
.prev-arrow {right: 125px;background-image: url("../images/arrow-left.png");/* Makes the arrow point left */}
.next-arrow {right: 20px;background-image: url("../images/arrow-right.png");}
/* Page content */
.page-content {height: 100%;}
.emp{max-width: 704px; background-color: #F4F4F4; height: auto; border-radius: 24px;}
.op{opacity: 40%;}
.client-round{border-radius: 16px; width: 100px; height: 100px; border: 1px solid #E1E1E1;}
.Portfolios-below{background-image: url("../images/black-left.png"); background-repeat: no-repeat; height: 600px; background-size: contain;}
  .Portfolios-inner{width: 90%; height: 80px; background-color: rgb(225, 225, 225, 0.08);}
  .Portfolios-inner{bottom: 10px;bottom: 24px;left: 24px; border-radius: 40px;}
  .Portfolios-inner p{color: #fff;}
  .Portfolios-below1{background-image: url("../images/black-right.png"); background-repeat: no-repeat; height: 600px; background-size: contain;}
  .popup {display: none;position: fixed;padding: 10px;width: 280px;left: 50%;margin-left: -150px;height: 180px;top: 50%;margin-top: -100px;background: #FFF;border: 3px solid #F04A49;z-index: 20;}
  #popup:after {position: fixed;content: "";top: 0;left: 0;bottom: 0;right: 0;background: rgba(0,0,0,0.5);z-index: -2;}
  #popup:before {position: absolute;content: "";top: 0;left: 0;bottom: 0;right: 0;background: #FFF;z-index: -1;}
  
  /* Styling buttons & webpage */
  
  .popupk {display: none;position: fixed;padding: 10px;width: 579px;left: 50%;margin-left: -150px;height: 350px;top: 50%;background: #FFF;margin-top: -100px;z-index: 20;}
  
  #popupk:after {position: fixed;content: "";top: 0;left: 0;bottom: 0;right: 0;background: rgba(0,0,0,0.5);z-index: -2;}
  
  #popupk:before {position: absolute;content: "";top: 0;left: 0;bottom: 0;right: 0;background: #FFF;z-index: -1;}

  .responsive-iframe{width: 100%; height: 90%;}

  @media screen and (max-width:1600px){

    .hero{font-size: 72px;}
    .circular-text {right: -4px;}
    .image {right: 17px;}
    .vision-f {font-size: 58px;font-weight: bold;}
    .ground-middle-img {background-image: url(../images/image687.png);background-size: contain;width: 416px;height: 379px;background-repeat: no-repeat;
    }
    .blue-img {top: 86px;left: 235px;}
    .cc{padding-top: 151px;}
    .Portfolios-below{background-image: url("../images/black-left.png"); background-repeat: no-repeat; height: 538px; background-size: contain;}
    .Portfolios-below1{background-image: url("../images/black-right.png"); background-repeat: no-repeat; height: 538px; background-size: contain;}
  }

  @media screen and (max-width:1440px){
    .hero{font-size: 64px;}
    .image {width: 70px;height: 70px;bottom: 42px; right: -37px;}
    .circular-text {width: 100px;height: 100px;right: -52px;bottom: 27px;}
    .vision-f {font-size: 50px;font-weight: bold;}
    .ground-middle-img { width: 361px;height: 330px;}
    .blue-img {top: 86px;left: 164px;}
    .cc-3{padding-top: 147px;}
    .cc{padding-top: 196px;}
    .page-container { height: 696px;}
    .client-round {width: 80px;height: 80px;}
    .Portfolios-below {background-size: contain;height: 471px;}
    .Portfolios-inner {height: 70px;}
    .Portfolios-below1 {background-size: contain;height: 471px;}
  }

  @media screen and (max-width:1024px){
    .hero{font-size: 54px;}
    .vision-f {font-size: 44px;font-weight: bold;}
    .image { width: 60px;height: 60px;bottom: -18px;right: -30px;}
    .circular-text {width: 90px;height: 90px;right: -45px;bottom: -32px;}
    .client {height: auto;}
    .ground-middle-img { width: 308px;height: 278px;}
    .img-mid-p {width: 40px;left: 28px;} .img-mid-p1 {width: 40px;top: 108px;} .img-mid-p2 {width: 40px;bottom: 57px;right: 151px;}
    .blue-img {top: 86px;left: 100px;}
    .cc-4{padding-top: 154px;}
    .Portfolios-below {background-size: contain;height: 404px;}
    .Portfolios-inner {height: 70px;}
    .Portfolios-below1 {background-size: contain;height: 404px;}


  }

  @media screen and (max-width:820px){
    .ground-middle-img {width: 243px;height: 278px;
  }    .img-mid-p2 {width: 40px;bottom: 84px;right: 113px;
}    .img-mid-p1 {width: 40px;top: 68px;
}    .Portfolios-below1 {background-size: contain;height: 325px;}
.Portfolios-below {background-size: contain;height: 325px;}
.image {bottom: 9px;}
.circular-text {bottom: -6px};
  }
  @media screen and (max-width:768px){
    .hero{font-size: 60px;}
    .m-a{margin: auto;}
    .client {margin-right: 54px;}
    .image {bottom: 19px;}
    .circular-text {bottom: 4px;}
    .hero-img {background-position: center;}
    .ground-middle-img {width: 230px;height: 213px;}
    .trelo {height: 453px;}
    .blue-img {top: 51px;left: 62px;}
    .vision-f {font-size: 33px;font-weight: bold;}
    .client-round {width: 100px;height: 100px;}
  .page-container {height: 645px;}
  .Portfolios-below {background-size: contain;height: 308px;}
    .Portfolios-inner {height: 60px;}
    .Portfolios-below1 {background-size: contain;height: 308px;}
    .img-mid-p {top: 49px;}
    .img-mid-p2 {width: 40px;bottom: 42px;right: 107px;}
    .img-mid-p1 {right: 36px;top: 69px;}
    .popupk {display: none;position: fixed;padding: 10px;width: 579px;left: 28%;margin-left: -150px;height: 350px;top: 20%;background: #FFF;z-index: 20;
  }
  
  }

  @media screen and (max-width:480px){
    .hero{font-size: 32px;}
    .hero-img {height: 187px;background-size: contain;}
    .none{display: none;}
    .circular-text {width: 70px;height: 70px;right: -35px;bottom: -21px}
    .image {width: 50px;height: 50px;bottom: -11px;right: -24px;}
    .vision-f {font-size: 25px;font-weight: bold;}
  .ground-middle-img {width: 100%;height: 335px;}
  .img-mid-p {width: 48px;left: 33px;}
  .img-mid-p1 {width: 48px;right: 54px;}
  .img-mid-p2 {width: 48px;bottom: 70px;right: 166px;}
  .trelo {height: 287px;}
  .blue-img {top: 34px;left: 38px;width: 80px;}
  .arrow {position: absolute;top: 0px;width: 40px;height: 20px;cursor: pointer;}
  .prev-arrow {right: 74px;background-image: url(../images/arrow-left.png);background-size: contain;}
  .next-arrow {right: 20px;background-image: url(../images/arrow-right.png);background-size: contain;}
  .page-container {height: 1059px;}
  .cc-3{padding-top: 50px;}
  .cc {padding-top: 65px;}
  .cc-4 {padding-top: 63px;}
  .client-round {width: 89px;height: 89px;}
  .Portfolios-below {background-size: contain;height: 274px;}
  .Portfolios-below1 {background-size: contain;height: 372px;}
  .Portfolios-inner {left: 15px;}
  .popupk {display: none;position: fixed;padding: 10px;width: 356px;left: 44%;margin-left: -150px;height: 230px;top: 46%;margin-top: -100px;background: #FFF;z-index: 20;}
.responsive-iframe{width: 100%; height: 90%;}
  }