/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.about-page {
  overflow: hidden; }
  .about-page .global-offices-section .wrap-plus {
    display: block; }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.mission-and-values {
  position: relative;
  margin: 165px 0;
  z-index: 2; }
  .mission-and-values .mission .wrap-plus {
    left: var(--sideGridWidth);
    top: 0;
    transform: translate(-48%, -48%); }
  .mission-and-values .mission .image {
    margin: 0 var(--sideGridWidth);
    height: 533px; }
    .mission-and-values .mission .image img {
      height: 100%;
      width: 100%;
      background-color: #7d7c82; }
  .mission-and-values .mission .title-description {
    position: relative;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    margin-left: calc(var(--sideGridWidth) + var(--singleGridWidth) - 0px);
    width: calc(var(--singleGridWidth) * 6 - 1px);
    margin-top: -84px;
    padding: 55px 0 115px 77px;
    overflow: hidden; }
    .mission-and-values .mission .title-description .grid-line {
      position: absolute;
      top: 0;
      left: -1px;
      height: 100%; }
      .mission-and-values .mission .title-description .grid-line .single-grid {
        background-color: #ecf1f2;
        position: absolute;
        width: 1px;
        height: 100%; }
        .mission-and-values .mission .title-description .grid-line .single-grid.one {
          transform: translateX(calc(var(--singleGridWidth) * 1)); }
        .mission-and-values .mission .title-description .grid-line .single-grid.two {
          transform: translateX(calc(var(--singleGridWidth) * 2)); }
        .mission-and-values .mission .title-description .grid-line .single-grid.three {
          transform: translateX(calc(var(--singleGridWidth) * 3)); }
        .mission-and-values .mission .title-description .grid-line .single-grid.four {
          transform: translateX(calc(var(--singleGridWidth) * 4)); }
        .mission-and-values .mission .title-description .grid-line .single-grid.five {
          transform: translateX(calc(var(--singleGridWidth) * 5)); }
        .mission-and-values .mission .title-description .grid-line .single-grid.six {
          transform: translateX(calc(var(--singleGridWidth) * 6)); }
      .mission-and-values .mission .title-description .grid-line .grid-one {
        opacity: 0; }
    .mission-and-values .mission .title-description .title {
      z-index: 1;
      font-family: "Roboto-Medium";
      font-size: var(--font24);
      color: #26252e;
      font-weight: 500;
      line-height: 36px;
      font-family: "Roboto-Medium";
      margin-bottom: 33px; }
    .mission-and-values .mission .title-description .description {
      z-index: 1;
      font-family: "Roboto-Medium";
      font-size: 53px;
      color: #26252e;
      font-weight: 500;
      line-height: 83px;
      font-family: "Roboto-Medium"; }
  .mission-and-values .values {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 1360px; }
    .mission-and-values .values .vertical-text {
      position: absolute;
      z-index: 1;
      transform: rotate(-90deg);
      transform-origin: left top;
      top: 263px;
      left: calc(var(--sideGridWidth) + 3px);
      font-family: "Roboto-Medium";
      font-style: normal;
      font-weight: 500;
      font-size: var(--font20);
      line-height: 32px;
      text-align: right;
      letter-spacing: 0.02em;
      color: #26252e; }
    .mission-and-values .values .wrap-plus {
      position: absolute;
      top: 0;
      left: calc(var(--sideGridWidth) + calc(var(--singleGridWidth) * 7)); }
    .mission-and-values .values .title {
      position: relative;
      z-index: 1;
      margin: 0 calc( var(--sideGridWidth) + var(--singleGridWidth) + calc(var(--singleGridWidth) / 2));
      margin-bottom: 43px;
      font-family: "Roboto-Medium";
      font-size: var(--font24);
      color: #26252e;
      font-weight: 500;
      line-height: 36px;
      font-family: "Roboto-Medium"; }
      .mission-and-values .values .title span {
        position: relative;
        margin-top: 5px;
        display: inline-block; }
    .mission-and-values .values .grid-line {
      z-index: -1; }
    .mission-and-values .values .description-background {
      position: absolute;
      background-color: #ecf1f2;
      top: calc(80px + 87px);
      height: 1195px;
      width: calc(100% - var(--sideGridWidth));
      left: 0; }
    .mission-and-values .values .additional-grid-block {
      top: calc(80px + 87px);
      height: 1195px; }
    .mission-and-values .values .description {
      position: relative;
      z-index: 1;
      margin: 0 calc(var(--sideGridWidth) + var(--singleGridWidth)); }
      .mission-and-values .values .description .row-values-description {
        display: flex; }
        .mission-and-values .values .description .row-values-description .title-description-section {
          position: relative;
          min-height: 400px;
          width: 50%;
          background: #26252e;
          padding: 37px 37px 0 70px;
          overflow: hidden; }
          .mission-and-values .values .description .row-values-description .title-description-section .title-section {
            font-family: "Roboto-Medium";
            font-size: var(--font36);
            color: #ffffff;
            font-weight: 500;
            line-height: 60px;
            letter-spacing: 0.01em;
            font-family: "Roboto-Medium";
            margin-bottom: 51px; }
          .mission-and-values .values .description .row-values-description .title-description-section .description-section {
            font-family: "Roboto-Regular";
            font-size: var(--font16);
            color: #ffffff;
            font-weight: 400;
            line-height: 30px;
            letter-spacing: 0.01em; }
          .mission-and-values .values .description .row-values-description .title-description-section .background-letter {
            position: absolute;
            top: 71px;
            left: -110px;
            font-family: "Roboto-Medium";
            font-size: 354px;
            color: #ecf1f2;
            font-weight: 500;
            font-family: "Roboto-Medium";
            font-weight: 500;
            opacity: 0.1; }
            .mission-and-values .values .description .row-values-description .title-description-section .background-letter.c-and-s {
              top: 75px;
              left: -62px; }
            .mission-and-values .values .description .row-values-description .title-description-section .background-letter.letter-s {
              font-size: 324px;
              top: 121px;
              left: -27px; }
        .mission-and-values .values .description .row-values-description .image-section {
          width: 50%;
          height: 400px; }
          .mission-and-values .values .description .row-values-description .image-section img {
            height: 100%;
            width: 100%;
            background-color: #7d7c82; }
        .mission-and-values .values .description .row-values-description.quality {
          flex-direction: row-reverse; }

@media screen and (min-width: 1025px) and (max-width: calc(1366px - 1px)) {
  .mission-and-values .mission .title-description {
    border-left: 1px solid #eaf1f4;
    padding: 55px 20px 115px 77px; }
    .mission-and-values .mission .title-description .grid-line .single-grid.two {
      left: 0px; }
    .mission-and-values .mission .title-description .grid-line .single-grid.four {
      left: -1px; }
    .mission-and-values .mission .title-description .description {
      font-family: "Roboto-Medium";
      font-size: 48px;
      color: #26252e;
      font-weight: 500;
      line-height: 83px; }
  .mission-and-values .values .description .row-values-description .title-description-section .title-section {
    margin-bottom: 30px; }
  .mission-and-values .values .description .row-values-description .title-description-section .description-section {
    font-size: var(--font18); } }

@media screen and (min-width: 1366px) and (max-width: calc(1440px - 1px)) {
  .mission-and-values .mission .title-description {
    border-left: 1px solid #eaf1f4;
    padding: 55px 20px 115px 77px; }
    .mission-and-values .mission .title-description .grid-line .single-grid.two {
      left: 0px; }
    .mission-and-values .mission .title-description .grid-line .single-grid.four {
      left: -1px; }
    .mission-and-values .mission .title-description .description {
      font-family: "Roboto-Medium";
      font-size: 51px;
      color: #26252e;
      font-weight: 500;
      line-height: 83px; }
  .mission-and-values .values .description .row-values-description .title-description-section .description-section {
    font-size: 14px; } }

@media screen and (min-width: 1440px) and (max-width: calc(1920px - 1px)) {
  .mission-and-values .mission .title-description {
    border-left: 1px solid #eaf1f4; }
    .mission-and-values .mission .title-description .grid-line .single-grid.three {
      left: 0px; }
    .mission-and-values .mission .title-description .grid-line .single-grid.two {
      left: 0px; }
    .mission-and-values .mission .title-description .grid-line .single-grid.four, .mission-and-values .mission .title-description .grid-line .single-grid.five {
      left: -1px; } }

@media screen and (min-width: 1920px) {
  .mission-and-values .mission .title-description {
    border-left: 1px solid #eaf1f4; }
    .mission-and-values .mission .title-description .grid-line .single-grid.three, .mission-and-values .mission .title-description .grid-line .single-grid.one, .mission-and-values .mission .title-description .grid-line .single-grid.two {
      left: -0.5px; }
    .mission-and-values .mission .title-description .grid-line .single-grid.four, .mission-and-values .mission .title-description .grid-line .single-grid.five {
      left: -1px; } }

@media screen and (max-width: 1024px) {
  .mission-and-values {
    position: relative;
    margin: 165px 0;
    margin-top: 0;
    z-index: 2; }
    .mission-and-values .mission .wrap-plus {
      display: none; }
    .mission-and-values .mission .image {
      margin: 0 auto;
      height: 200px;
      width: 100%;
      background-color: #7d7c82; }
    .mission-and-values .mission .title-description {
      position: relative;
      background-color: #ffffff;
      display: flex;
      flex-direction: column;
      margin: 0;
      margin-left: calc(var(--sideGridWidth) + 1px);
      margin-top: -84px;
      width: calc(4 * var(--singleGridWidth) - 2px);
      overflow: hidden;
      padding: 0; }
      .mission-and-values .mission .title-description .title {
        padding-top: 24px;
        padding-left: 18px;
        z-index: 1;
        font-family: "Roboto-Medium";
        font-size: 14px;
        color: #26252e;
        font-weight: 500;
        line-height: 20px;
        margin-bottom: 15px;
        font-family: "Roboto-Regular"; }
      .mission-and-values .mission .title-description .description {
        padding-left: 18px;
        z-index: 1;
        font-family: "Roboto-Medium";
        font-size: 20px;
        color: #26252e;
        font-weight: 500;
        line-height: 28px;
        font-family: "Roboto-Regular"; }
    .mission-and-values .mission .grid-line .single-grid {
      height: 100%;
      width: 1px;
      position: absolute;
      top: 0; }
      .mission-and-values .mission .grid-line .single-grid.three {
        transform: translateX(calc(var(--singleGridWidth) * 3 - 1px)) !important; }
      .mission-and-values .mission .grid-line .single-grid.four,
      .mission-and-values .mission .grid-line .single-grid .five,
      .mission-and-values .mission .grid-line .single-grid .six {
        display: none; }
    .mission-and-values .values {
      position: relative;
      z-index: 1;
      width: 100%;
      min-height: 1472px; }
      .mission-and-values .values .vertical-text {
        display: none; }
      .mission-and-values .values .wrap-plus {
        position: absolute;
        top: 0;
        left: calc(var(--sideGridWidth) + calc(var(--singleGridWidth) * 4)); }
      .mission-and-values .values .title {
        position: relative;
        z-index: 1;
        margin: 0 auto;
        margin-top: 30px;
        margin-left: calc(var(--sideGridWidth) + 18px);
        margin-bottom: 43px;
        font-family: "Roboto-Medium";
        font-size: 14px;
        color: #26252e;
        font-weight: 500;
        line-height: 22px;
        font-family: "Roboto-Medium"; }
      .mission-and-values .values .description-background {
        position: absolute;
        background-color: #ecf1f2;
        height: 1500px;
        width: 100%;
        left: 0; }
      .mission-and-values .values .additional-grid-block {
        height: 1500px; }
      .mission-and-values .values .grid-line .grid-six,
      .mission-and-values .values .grid-line .grid-seven,
      .mission-and-values .values .grid-line .grid-eight {
        display: none; }
      .mission-and-values .values .description {
        position: relative;
        z-index: 1;
        margin: 0 auto;
        width: calc(4 * var(--singleGridWidth)); }
        .mission-and-values .values .description .row-values-description {
          display: flex;
          width: 100%; }
          .mission-and-values .values .description .row-values-description .title-description-section {
            position: relative;
            min-height: 250px;
            width: 100%;
            background: #26252e;
            padding: 36px;
            overflow: hidden; }
            .mission-and-values .values .description .row-values-description .title-description-section .title-section {
              font-family: "Roboto-Medium";
              font-size: 20px;
              color: #ffffff;
              font-weight: 500;
              line-height: 24px;
              letter-spacing: 0.01em;
              font-family: "Roboto-Medium";
              margin-bottom: 24px; }
            .mission-and-values .values .description .row-values-description .title-description-section .description-section {
              font-family: "Roboto-Regular";
              font-size: 14px;
              color: #ffffff;
              font-weight: 400;
              line-height: 24px;
              letter-spacing: 0.01em; }
            .mission-and-values .values .description .row-values-description .title-description-section .background-letter {
              position: absolute;
              top: unset;
              bottom: -28px;
              left: -20px;
              font-family: "Roboto-Medium";
              font-size: 150px;
              color: #ecf1f2;
              font-weight: 500;
              font-family: "Roboto-Medium";
              font-weight: 500;
              opacity: 0.1; }
              .mission-and-values .values .description .row-values-description .title-description-section .background-letter.c-and-s {
                top: unset;
                bottom: -25px;
                line-height: 100%;
                left: -16px; }
              .mission-and-values .values .description .row-values-description .title-description-section .background-letter.letter-s {
                font-size: 150px;
                bottom: -38px; }
          .mission-and-values .values .description .row-values-description .image-section {
            width: 100%;
            height: 250px; }
            .mission-and-values .values .description .row-values-description .image-section img {
              height: 100%;
              width: 100%; }
          .mission-and-values .values .description .row-values-description.quality {
            flex-direction: column; }
          .mission-and-values .values .description .row-values-description.create-customer-value {
            flex-direction: column; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.our-story-section {
  margin-bottom: 166px;
  height: auto;
  width: 100%;
  position: relative; }
  .our-story-section .our-bg {
    height: 904px;
    position: relative; }
    .our-story-section .our-bg .bg {
      height: 100%;
      width: calc(4 * var(--singleGridWidth) + var(--sideGridWidth));
      background: #ecf1f2; }
  .our-story-section .side-section-title {
    top: 550px;
    left: var(--sideGridWidth);
    position: absolute;
    font-family: "Roboto-Medium";
    font-style: normal;
    font-weight: 500;
    font-size: var(--font20);
    line-height: 32px;
    text-align: right;
    letter-spacing: 0.02em;
    color: #26252e;
    transform: translateX(calc(-50% + 15px)) rotate(-90deg) !important;
    z-index: 1; }
  .our-story-section .dash-line-ww {
    position: absolute;
    width: var(--singleGridWidth);
    height: 1px;
    right: var(--sideGridWidth);
    background: rgba(38, 37, 46, 0.3);
    top: 0; }
  .our-story-section .our-story-content {
    position: absolute;
    top: 0;
    min-height: 904px;
    width: calc(6 * var(--singleGridWidth));
    left: 50%;
    transform: translateX(-50%); }
    .our-story-section .our-story-content .os-header-block {
      position: relative;
      margin-top: 149px; }
      .our-story-section .our-story-content .os-header-block .dash-line {
        width: 114px;
        height: 7px;
        background-color: #000000; }
      .our-story-section .our-story-content .os-header-block .highlights-text {
        position: absolute;
        left: calc(100% * 2 / 6);
        top: 0;
        font-family: "Roboto-Medium";
        font-style: normal;
        font-weight: 500;
        font-size: var(--font24);
        color: #26252e; }
      .our-story-section .our-story-content .os-header-block .mobile-our-story {
        display: none; }
    .our-story-section .our-story-content .our-story-data {
      height: auto;
      width: calc(100% * 4 / 6);
      margin-left: calc(100% * 2 / 6);
      margin-top: 60px;
      position: relative;
      padding-top: 20px; }
      .our-story-section .our-story-content .our-story-data .osh-text {
        position: absolute;
        top: 0;
        left: -50%;
        font-family: "Roboto-Medium";
        font-style: normal;
        font-weight: 500;
        font-size: var(--font60);
        line-height: 90px;
        color: #26252e; }
      .our-story-section .our-story-content .our-story-data .data-item {
        display: flex;
        position: relative;
        align-items: center;
        width: 100%;
        margin-bottom: 30px; }
        .our-story-section .our-story-content .our-story-data .data-item .year {
          float: left;
          font-family: "Roboto-Thin";
          font-style: normal;
          font-weight: 300;
          font-size: var(--font48);
          line-height: 56px;
          letter-spacing: -0.01em;
          color: #26252e;
          opacity: 0.8;
          width: 25%; }
        .our-story-section .our-story-content .our-story-data .data-item .black-squre {
          position: absolute;
          height: 12px;
          width: 12px;
          background: #26252e;
          border-left: 2px solid #ffffff;
          border-bottom: 2px solid #ffffff;
          transform: translate(-50%, -50%) rotate(45deg);
          top: 50%;
          left: 25%; }
        .our-story-section .our-story-content .our-story-data .data-item .description {
          display: flex;
          flex-direction: column;
          display: block;
          position: relative;
          width: 75%;
          padding: 0 40px;
          font-family: "Roboto-Regular";
          font-style: normal;
          font-weight: normal;
          word-wrap: break-word;
          font-size: var(--font20);
          line-height: 30px;
          align-items: left;
          letter-spacing: 0.02em;
          color: rgba(38, 37, 46, 0.7);
          top: 31px; }
          .our-story-section .our-story-content .our-story-data .data-item .description .desc {
            font-weight: bolder; }
  .our-story-section .story-bg {
    left: -27px;
    position: absolute;
    top: 1450px;
    font-family: "Roboto-Medium";
    font-style: normal;
    font-weight: 500;
    font-size: 250px;
    line-height: 156px;
    display: flex;
    align-items: center;
    color: #ecf1f2; }
  .our-story-section .only-story-text-and-description {
    position: relative;
    margin: 0 auto;
    width: calc(6 * var(--singleGridWidth));
    min-height: 195px;
    margin-top: 740px; }
    .our-story-section .only-story-text-and-description .story-text {
      font-family: "Roboto-Medium";
      font-style: normal;
      font-weight: 500;
      font-size: var(--font24);
      line-height: 36px;
      color: #26252e;
      padding-top: 10px; }
    .our-story-section .only-story-text-and-description .story-description {
      margin-top: 60px;
      font-family: "Roboto-Regular";
      font-style: normal;
      font-weight: normal;
      font-size: 20px;
      line-height: 30px;
      display: flex;
      align-items: center;
      letter-spacing: 0.02em;
      color: #26252e;
      opacity: 0.7; }
    .our-story-section .only-story-text-and-description .read-more-section .read-description {
      font-family: "Roboto-Regular";
      font-style: normal;
      font-weight: normal;
      font-size: var(--font20);
      line-height: 30px;
      letter-spacing: 0.02em;
      color: #26252e;
      opacity: 0.7; }

@media screen and (min-width: calc(1366px)) and (max-width: calc(1440px - 1px)) {
  .our-story-section .story-bg {
    font-size: 248px; } }

@media screen and (min-width: 1025px) and (max-width: calc(1366px - 1px)) {
  .our-story-section .our-story-content .our-story-data .osh-text {
    font-size: var(--font56); } }

@media screen and (max-width: 1024px) {
  .our-story-section {
    margin-bottom: 32px;
    height: auto;
    margin-top: 100px;
    width: 100%;
    position: relative; }
    .our-story-section .our-bg {
      height: 674px;
      position: relative; }
      .our-story-section .our-bg .bg {
        height: 100%;
        width: calc(1.5 * var(--singleGridWidth) + var(--sideGridWidth));
        background: #ecf1f2; }
    .our-story-section .dash-line-ww {
      position: absolute;
      width: var(--singleGridWidth);
      right: var(--sideGridWidth); }
    .our-story-section .side-section-title {
      top: 400px;
      font-size: 12px;
      line-height: 18px; }
    .our-story-section .our-story-content {
      position: absolute;
      top: 0;
      min-height: 674px;
      width: 100%;
      left: 0;
      transform: translateX(0%); }
      .our-story-section .our-story-content .os-header-block {
        position: relative;
        margin-top: 72px;
        width: 100%; }
        .our-story-section .our-story-content .os-header-block .dash-line {
          width: 50px;
          margin-left: calc(var(--sideGridWidth) + calc(var(--singleGridWidth) / 2)); }
        .our-story-section .our-story-content .os-header-block .highlights-text {
          margin-top: 30px;
          position: relative;
          left: unset;
          margin-left: calc(var(--sideGridWidth) + calc(var(--singleGridWidth) / 2));
          font-size: 14px; }
        .our-story-section .our-story-content .os-header-block .mobile-our-story {
          margin-top: 25px;
          margin-left: calc(var(--sideGridWidth) + calc(var(--singleGridWidth) / 2));
          display: block;
          font-family: "Roboto-Regular";
          font-style: normal;
          font-weight: 500;
          font-size: 30px;
          line-height: 40px;
          color: #26252e; }
      .our-story-section .our-story-content .our-story-data {
        height: auto;
        width: calc(3.5 * var(--singleGridWidth));
        margin-left: calc(var(--sideGridWidth) + calc(var(--singleGridWidth) / 2));
        position: relative;
        margin-top: 0;
        padding-top: 30px; }
        .our-story-section .our-story-content .our-story-data .osh-text {
          display: none; }
        .our-story-section .our-story-content .our-story-data .data-item {
          display: flex;
          position: relative;
          align-items: center;
          width: 100%;
          margin-bottom: 23px; }
          .our-story-section .our-story-content .our-story-data .data-item .year {
            font-size: 20px;
            line-height: 24px;
            width: 25%; }
          .our-story-section .our-story-content .our-story-data .data-item .black-squre {
            left: 28.5%;
            height: 7.5px;
            width: 7.5px;
            border-left: 0.5px solid #ffffff;
            border-bottom: 0.5px solid #ffffff; }
          .our-story-section .our-story-content .our-story-data .data-item .description {
            font-size: 12px;
            line-height: 20px;
            padding: 0;
            padding-left: 29px; }
    .our-story-section .story-bg {
      left: -20px;
      top: 650px;
      font-size: 108px;
      line-height: 127px;
      z-index: -1; }
    .our-story-section .only-story-text-and-description {
      width: calc(var(--singleGridWidth) * 3);
      min-height: 195px;
      margin-top: 625px;
      margin-left: calc(var(--sideGridWidth) + var(--singleGridWidth)); }
      .our-story-section .only-story-text-and-description .story-text {
        font-size: 14px;
        line-height: 20px; }
      .our-story-section .only-story-text-and-description .story-description {
        margin-top: 30px;
        font-size: 12px;
        line-height: 20px; } }

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .our-story-section .only-story-text-and-description {
    margin-top: 300px; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.development-methodology-page {
  margin-top: 90px; }
  .development-methodology-page .dedicated-team-management {
    margin-bottom: var(--margin166); }

@media screen and (max-width: 1024px) {
  .development-methodology-page {
    margin-top: 72px; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.capabilities-page {
  overflow: hidden;
  margin-top: 90px;
  position: relative; }
  .capabilities-page .agenda-items {
    display: flex; }
    .capabilities-page .agenda-items ul {
      margin: 0;
      padding: 0;
      margin-right: 90px; }
      .capabilities-page .agenda-items ul li {
        list-style: none;
        margin-bottom: 10px; }
        .capabilities-page .agenda-items ul li:hover {
          cursor: pointer; }
  .capabilities-page .down-arrow {
    height: 175px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; }
    .capabilities-page .down-arrow svg {
      z-index: 1; }
      .capabilities-page .down-arrow svg path {
        stroke: #000000; }

@media screen and (max-width: 1024px) {
  .capabilities-page {
    margin-top: 70px;
    position: relative; }
    .capabilities-page .agenda-items ul {
      margin-right: 0; }
    .capabilities-page .down-arrow {
      height: 72px; }
      .capabilities-page .down-arrow svg {
        height: 22px;
        width: 16px; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.development-methodology {
  position: relative;
  padding-bottom: 215px;
  margin-bottom: 165px; }
  .development-methodology .wrap-plus {
    left: var(--sideGridWidth);
    top: -14px; }
  .development-methodology .vertical-title {
    font-family: "Roboto-Medium";
    font-size: var(--font20);
    color: #26252e;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: 0.02em;
    position: absolute;
    z-index: 2;
    transform: rotate(-90deg);
    transform-origin: top left;
    bottom: 458px;
    left: var(--sideGridWidth); }
  .development-methodology .methodology-content {
    display: flex;
    position: relative;
    z-index: 2; }
    .development-methodology .methodology-content .methodology-left-side {
      margin-left: calc(var(--sideGridWidth) + var(--singleGridWidth));
      width: calc(var(--singleGridWidth) * 3);
      margin-top: 94px; }
      .development-methodology .methodology-content .methodology-left-side .title {
        font-family: "Roboto-Medium";
        font-size: var(--font59);
        color: #26252e;
        font-weight: 500;
        line-height: 90px;
        width: 270px;
        margin: 58px 0 65px; }
      .development-methodology .methodology-content .methodology-left-side .agile-methodology {
        width: 100%;
        height: 496px;
        padding: 75px 73px 72px 74px;
        background-color: #26252e; }
        .development-methodology .methodology-content .methodology-left-side .agile-methodology .agile-title {
          font-family: "Roboto-Medium";
          font-size: var(--font24);
          color: #ffffff;
          font-weight: 500;
          line-height: 36px;
          margin-bottom: 44px; }
        .development-methodology .methodology-content .methodology-left-side .agile-methodology .agile-description {
          font-family: "Roboto-Regular";
          font-size: var(--font20);
          color: #ffffff;
          font-weight: 400;
          line-height: 30px;
          letter-spacing: 0.02em;
          opacity: 0.7;
          display: -webkit-box;
          overflow: hidden;
          -webkit-box-orient: vertical;
          -moz-box-orient: vertical;
          -ms-box-orient: vertical;
          box-orient: vertical;
          -webkit-line-clamp: 9;
          -moz-line-clamp: 9;
          -ms-line-clamp: 9;
          line-clamp: 9; }
    .development-methodology .methodology-content .methodology-right-side .image {
      height: 660px;
      width: calc(var(--singleGridWidth) * 4);
      background-color: #7d7c82; }
      .development-methodology .methodology-content .methodology-right-side .image img {
        width: 100%;
        height: 100%; }
    .development-methodology .methodology-content .methodology-right-side .read-more {
      width: calc(var(--singleGridWidth) * 2);
      height: 330px;
      background-color: #ffffff; }
      .development-methodology .methodology-content .methodology-right-side .read-more .read-more-content {
        padding: 234px 0 0 71px; }
        .development-methodology .methodology-content .methodology-right-side .read-more .read-more-content a {
          display: flex;
          align-items: center; }
          .development-methodology .methodology-content .methodology-right-side .read-more .read-more-content a .text {
            font-family: "Roboto-Regular";
            font-size: var(--font20);
            color: #16c36e;
            font-weight: 400;
            line-height: 23px;
            margin-right: 18px;
            opacity: 0.7; }
  .development-methodology .bottom-border-line {
    height: 1px;
    width: var(--singleGridWidth);
    background-color: #26252e;
    opacity: 0.3;
    position: absolute;
    left: calc(var(--sideGridWidth) + var(--singleGridWidth) * 7);
    bottom: -1px; }
  .development-methodology .background-capabilities {
    position: absolute;
    bottom: 0;
    height: 640px;
    width: 100%;
    z-index: 1; }
    .development-methodology .background-capabilities .bg-color {
      position: absolute;
      height: 100%;
      width: 100%;
      background-color: #ecf1f2; }
    .development-methodology .background-capabilities .capabilities-text {
      position: absolute;
      z-index: 2;
      bottom: 82px;
      left: -45px;
      font-family: "Roboto-Medium";
      font-size: 210px;
      color: #ffffff;
      font-weight: 500;
      line-height: 36px; }

@media screen and (min-width: calc(1366px)) and (max-width: calc(1440px - 1px)) {
  .development-methodology .background-capabilities .capabilities-text {
    font-size: 197px; }
  .development-methodology .vertical-title {
    bottom: 474px; } }

@media screen and (max-width: 1024px) {
  .development-methodology {
    padding-bottom: 88px;
    margin-bottom: 72px; }
    .development-methodology .wrap-plus {
      top: 4px;
      left: auto;
      right: 0;
      transform: translate(-47%, -50%); }
    .development-methodology .vertical-title {
      font-family: "Roboto-Medium";
      font-size: var(--font20);
      color: #26252e;
      font-weight: 500;
      line-height: 18px;
      bottom: 426px; }
    .development-methodology .methodology-content {
      flex-direction: column;
      width: 100%; }
      .development-methodology .methodology-content .methodology-left-side {
        margin-left: auto;
        margin-right: var(--sideGridWidth);
        width: calc(var(--singleGridWidth) * 3 + 36px);
        margin-top: 0; }
        .development-methodology .methodology-content .methodology-left-side .title {
          line-height: 40px;
          width: 120px;
          margin: 26px 0 36px; }
        .development-methodology .methodology-content .methodology-left-side .agile-methodology {
          height: 252px;
          padding: 36px; }
          .development-methodology .methodology-content .methodology-left-side .agile-methodology .agile-title {
            font-family: "Roboto-Medium";
            font-size: 14px;
            color: #ffffff;
            font-weight: 500;
            line-height: 20px;
            margin-bottom: 20px; }
          .development-methodology .methodology-content .methodology-left-side .agile-methodology .agile-description {
            display: -webkit-box;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -moz-box-orient: vertical;
            -ms-box-orient: vertical;
            box-orient: vertical;
            -webkit-line-clamp: 7;
            -moz-line-clamp: 7;
            -ms-line-clamp: 7;
            line-clamp: 7;
            line-height: 20px; }
      .development-methodology .methodology-content .methodology-right-side {
        display: flex; }
        .development-methodology .methodology-content .methodology-right-side .image {
          height: 232px;
          width: calc(var(--singleGridWidth) * 3 + var(--sideGridWidth)); }
        .development-methodology .methodology-content .methodology-right-side .read-more {
          width: var(--singleGridWidth);
          height: var(--singleGridWidth); }
          .development-methodology .methodology-content .methodology-right-side .read-more .read-more-content {
            padding: 10px 10px; }
            .development-methodology .methodology-content .methodology-right-side .read-more .read-more-content a {
              align-items: flex-end; }
              .development-methodology .methodology-content .methodology-right-side .read-more .read-more-content a .text {
                width: 32px;
                line-height: 16px;
                margin-right: 10px; }
              .development-methodology .methodology-content .methodology-right-side .read-more .read-more-content a svg {
                width: 4px;
                height: 7px;
                margin-bottom: 5px; }
                .development-methodology .methodology-content .methodology-right-side .read-more .read-more-content a svg path {
                  stroke-width: 2px; }
    .development-methodology .bottom-border-line {
      display: none; }
    .development-methodology .background-capabilities {
      height: 510px; }
      .development-methodology .background-capabilities .capabilities-text {
        font-family: "Roboto-Medium";
        font-size: 64px;
        color: #ffffff;
        font-weight: 500;
        line-height: 75px;
        bottom: -3px;
        left: -27px;
        height: 75px; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.certification {
  position: relative;
  height: 990px;
  margin-bottom: var(--margin166); }
  .certification .vertical-text {
    position: absolute;
    font-family: "Roboto-Medium";
    font-size: var(--font20);
    color: #26252e;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: 0.02em;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: top left;
    left: var(--sideGridWidth);
    bottom: 395px; }
  .certification .certification-main-content {
    height: 100%;
    margin-left: calc(var(--sideGridWidth) + var(--singleGridWidth));
    width: calc(var(--singleGridWidth) * 6); }
    .certification .certification-main-content .row {
      width: 100%;
      height: calc(50% - 11.5px);
      display: flex; }
      .certification .certification-main-content .row.first {
        margin-bottom: 23px; }
      .certification .certification-main-content .row .image {
        position: relative;
        height: 100%;
        width: calc(50% - 11px);
        background-color: #7d7c82; }
        .certification .certification-main-content .row .image:first-child {
          margin-right: 22px; }
        .certification .certification-main-content .row .image .background-image {
          background-size: cover;
          height: 100%;
          width: 100%; }
        .certification .certification-main-content .row .image .logo {
          position: absolute;
          z-index: 1;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%); }
        .certification .certification-main-content .row .image .shadow {
          position: absolute;
          top: 0;
          left: 0;
          height: 100%;
          width: 100%;
          background-color: #26252e;
          opacity: 0.5; }
      .certification .certification-main-content .row .description-read-more {
        height: 100%;
        width: calc(50% - 11px);
        background: #ecf1f2;
        display: flex;
        padding: 180px 114px 0;
        flex-direction: column; }
        .certification .certification-main-content .row .description-read-more .description {
          font-family: "Roboto-Regular";
          font-size: var(--font20);
          color: #26252e;
          font-weight: 400;
          line-height: 30px;
          opacity: 0.6;
          letter-spacing: 0.02em;
          display: -webkit-box;
          overflow: hidden;
          -webkit-box-orient: vertical;
          -moz-box-orient: vertical;
          -ms-box-orient: vertical;
          box-orient: vertical;
          -webkit-line-clamp: 4;
          -moz-line-clamp: 4;
          -ms-line-clamp: 4;
          line-clamp: 4;
          margin-bottom: 40px; }
        .certification .certification-main-content .row .description-read-more .read-more {
          display: flex;
          align-items: center; }
          .certification .certification-main-content .row .description-read-more .read-more span {
            font-family: "Roboto-Regular";
            font-size: var(--font20);
            color: #16c36e;
            font-weight: 400;
            line-height: 23px;
            opacity: 0.8;
            margin-right: 18px; }
          .certification .certification-main-content .row .description-read-more .read-more svg {
            width: 8.5px;
            height: 14px; }
    .certification .certification-main-content .centered-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
      width: 412.5px;
      height: 225px;
      background: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center; }
      .certification .certification-main-content .centered-text span {
        font-family: "Roboto-Medium";
        font-size: 39px;
        color: #26252e;
        font-weight: 500;
        line-height: 90px; }

@media screen and (min-width: 1025px) and (max-width: calc(1366px - 1px)) {
  .certification .certification-main-content .row .description-read-more {
    padding: 20% 15%; }
    .certification .certification-main-content .row .description-read-more .description {
      margin-bottom: 30px; } }

@media screen and (max-width: 1024px) {
  .certification {
    height: 260px; }
    .certification .vertical-text {
      display: none; }
    .certification .certification-main-content {
      width: calc(100% - var(--sideGridWidth) * 2);
      margin: 0 var(--sideGridWidth);
      padding: 0 14px; }
      .certification .certification-main-content .row {
        height: calc(50% - 4px); }
        .certification .certification-main-content .row.first {
          margin-bottom: 8px; }
        .certification .certification-main-content .row .image {
          width: 50%; }
          .certification .certification-main-content .row .image:first-child {
            margin-right: 8px; }
          .certification .certification-main-content .row .image .logo {
            width: 70px; }
        .certification .certification-main-content .row .description-read-more {
          width: calc(50% - 4px);
          padding: 0;
          display: flex;
          align-items: center;
          justify-content: center; }
          .certification .certification-main-content .row .description-read-more .description {
            display: none; }
          .certification .certification-main-content .row .description-read-more .read-more {
            display: flex;
            align-items: center; }
            .certification .certification-main-content .row .description-read-more .read-more span {
              margin-right: 0; }
            .certification .certification-main-content .row .description-read-more .read-more svg {
              display: none; }
      .certification .certification-main-content .centered-text {
        width: 144px;
        height: 72px; }
        .certification .certification-main-content .centered-text span {
          font-family: "Roboto-Medium";
          font-size: 14px;
          color: #26252e;
          font-weight: 500;
          line-height: 20px; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.technical-capabilities {
  position: relative;
  height: 720px;
  width: 100%;
  margin-bottom: var(--margin166); }
  .technical-capabilities .vertical-text {
    position: absolute;
    font-family: "Roboto-Medium";
    font-size: var(--font20);
    color: #ffffff;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: 0.02em;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: top left;
    left: var(--sideGridWidth);
    bottom: 30%; }
  .technical-capabilities .technical-capabilities-content {
    display: flex;
    height: 100%;
    width: 100%; }
    .technical-capabilities .technical-capabilities-content .image {
      width: 50%;
      height: 100%;
      background-color: #7d7c82; }
      .technical-capabilities .technical-capabilities-content .image img {
        height: 100%;
        width: 100%; }
    .technical-capabilities .technical-capabilities-content .title-description {
      position: relative;
      height: 100%;
      width: 50%;
      background: #26252e;
      padding: 143px 165px 0 184px; }
      .technical-capabilities .technical-capabilities-content .title-description .bold-line {
        background: white;
        margin-bottom: 45px; }
      .technical-capabilities .technical-capabilities-content .title-description .title {
        font-family: "Roboto-Medium";
        font-size: var(--font59);
        color: #ffffff;
        font-weight: 500;
        line-height: 90px;
        margin-bottom: 30px; }
      .technical-capabilities .technical-capabilities-content .title-description .description {
        font-family: "Roboto-Regular";
        font-size: var(--font20);
        color: rgba(255, 255, 255, 0.7);
        font-weight: 400;
        line-height: 30px;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        -ms-box-orient: vertical;
        box-orient: vertical;
        -webkit-line-clamp: 4;
        -moz-line-clamp: 4;
        -ms-line-clamp: 4;
        line-clamp: 4;
        letter-spacing: 0.02em;
        opacity: 0.7; }
      .technical-capabilities .technical-capabilities-content .title-description .slide-right-button {
        position: absolute;
        right: 0;
        bottom: 0;
        height: 83px;
        width: 83px; }

@media screen and (min-width: 1025px) and (max-width: calc(1366px - 1px)) {
  .technical-capabilities .technical-capabilities-content .title-description {
    padding: 20% 15%; } }

@media screen and (max-width: 1024px) {
  .technical-capabilities {
    height: 320px;
    margin-top: 360px; }
    .technical-capabilities .vertical-text {
      display: none; }
    .technical-capabilities .technical-capabilities-content {
      flex-direction: column-reverse;
      width: 100%; }
      .technical-capabilities .technical-capabilities-content .image {
        width: 100%;
        height: 320px; }
        .technical-capabilities .technical-capabilities-content .image img {
          height: 100%;
          width: 100%; }
      .technical-capabilities .technical-capabilities-content .title-description {
        width: 100%;
        padding: 50px 52px; }
        .technical-capabilities .technical-capabilities-content .title-description .bold-line {
          margin-bottom: 26px; }
        .technical-capabilities .technical-capabilities-content .title-description .title {
          line-height: 40px;
          margin-bottom: 24px; }
        .technical-capabilities .technical-capabilities-content .title-description .description {
          line-height: 20px; }
        .technical-capabilities .technical-capabilities-content .title-description .slide-right-button {
          height: 36px;
          width: 36px; }
          .technical-capabilities .technical-capabilities-content .title-description .slide-right-button svg path {
            stroke-width: 3px; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.certification-page {
  margin-top: 90px; }
  @media (min-width: 768px) and (max-width: 1024px) {
    .certification-page {
      overflow: hidden; } }
  .certification-page .dedicated-team-management {
    margin-bottom: var(--margin166); }
  .certification-page .testimo-section {
    position: relative; }
    .certification-page .testimo-section .vertical-text {
      position: absolute;
      top: 30%;
      left: var(--sideGridWidth);
      font-family: "Roboto-Regular";
      font-style: normal;
      font-weight: 500;
      font-size: var(--font20);
      line-height: 32px;
      letter-spacing: 0.02em;
      color: #26252e;
      transform: rotate(-90deg);
      margin-left: -35px; }

@media screen and (max-width: 1024px) {
  .certification-page {
    margin-top: 72px; }
    .certification-page .testimo-section .vertical-text {
      display: none; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.blogs-details-page {
  margin-top: 90px;
  background: #ecf1f2;
  height: auto;
  position: relative;
  z-index: 1; }
  .blogs-details-page .wrap-top-plus {
    position: absolute;
    top: 105px;
    left: calc(-1 * var(--singleGridWidth)); }
    .blogs-details-page .wrap-top-plus .wrap-plus {
      left: 0;
      top: 0; }
  .blogs-details-page .wrap-bottom-plus {
    position: absolute;
    bottom: 404px;
    left: calc(-1 * var(--singleGridWidth)); }
    .blogs-details-page .wrap-bottom-plus .wrap-plus {
      left: 0;
      top: 0; }
  .blogs-details-page .blogs-content {
    z-index: 1;
    position: relative;
    left: var(--sideGridWidth);
    width: calc(var(--singleGridWidth) * 8 - 1px);
    height: auto;
    padding: 116px 49px 40px 48px;
    background: #ffffff;
    border-bottom: 2px solid rgba(38, 37, 46, 0.2); }
    .blogs-details-page .blogs-content .blogs-top-line {
      height: 7px;
      width: 92px;
      background: #000000; }
    .blogs-details-page .blogs-content .blogs-title {
      font-family: "Roboto-Regular";
      font-size: 24px;
      color: #26252e;
      font-weight: 600;
      line-height: 36px;
      width: calc(var(--singleGridWidth) * 3 + 60px);
      margin-top: 58px; }
    .blogs-details-page .blogs-content .blogs-description {
      font-family: "Roboto-Regular";
      font-size: 20px;
      color: #26252e;
      font-weight: normal;
      line-height: 30px;
      padding-top: 50px;
      padding-bottom: 195px; }
      .blogs-details-page .blogs-content .blogs-description .blogs-description-header {
        scroll-margin-top: 100px; }
    .blogs-details-page .blogs-content .blogs-description-two {
      font-family: "Roboto-Regular";
      font-size: 20px;
      color: #26252e;
      font-weight: normal;
      line-height: 30px; }
      .blogs-details-page .blogs-content .blogs-description-two .blogs-description-header {
        scroll-margin-top: 100px; }
    .blogs-details-page .blogs-content .blog-details-content {
      display: grid;
      grid-template-columns: calc(100% - 349px) 300px;
      gap: 49px; }
      .blogs-details-page .blogs-content .blog-details-content .divider {
        background-color: black;
        height: 6px;
        width: 80px;
        margin-bottom: 58px; }
      .blogs-details-page .blogs-content .blog-details-content .long-divider {
        border-top: 2px solid rgba(38, 37, 46, 0.2); }
    .blogs-details-page .blogs-content .right-block-contact {
      width: 100%;
      border: 2px solid #434eba;
      position: relative;
      display: flex;
      justify-content: center; }
      .blogs-details-page .blogs-content .right-block-contact__content {
        padding: 20px;
        padding-bottom: 78px;
        display: flex;
        flex-direction: column;
        gap: 19px; }
      .blogs-details-page .blogs-content .right-block-contact__button {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 54px;
        background-color: #434eba;
        font-family: "Roboto-Medium";
        font-size: 20px;
        color: #ffffff;
        font-weight: 500;
        line-height: 35px;
        border: none; }
      .blogs-details-page .blogs-content .right-block-contact .contact-title {
        font-family: "Roboto-Medium";
        font-size: 20px;
        color: #26252e;
        font-weight: 500;
        line-height: 34px; }
      .blogs-details-page .blogs-content .right-block-contact .contact-description {
        font-family: "Roboto-Regular";
        font-size: 16px;
        color: #26252e;
        font-weight: 400;
        line-height: 26px;
        opacity: 0.7; }
    .blogs-details-page .blogs-content .right-block-content {
      position: sticky;
      top: 50px; }
      .blogs-details-page .blogs-content .right-block-content__title {
        font-family: "Roboto-Medium";
        font-size: 24px;
        color: #26252e;
        font-weight: 500;
        line-height: 36px;
        padding: 32px 0px; }
      .blogs-details-page .blogs-content .right-block-content__list {
        font-family: "Roboto-Regular";
        font-size: 20px;
        color: #3C3B43;
        font-weight: 400;
        line-height: 30px;
        opacity: 0.7;
        max-height: 55vh;
        overflow: auto;
        margin-bottom: 32px; }
        .blogs-details-page .blogs-content .right-block-content__list ul {
          list-style-type: none;
          padding: 0;
          margin: 0; }
        .blogs-details-page .blogs-content .right-block-content__list li {
          margin-bottom: 18px;
          padding-right: 5px;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          position: relative; }
          .blogs-details-page .blogs-content .right-block-content__list li a:link {
            color: #3C3B43; }
            .blogs-details-page .blogs-content .right-block-content__list li a:link:hover {
              color: #434eba; }
          .blogs-details-page .blogs-content .right-block-content__list li a:visited {
            color: unset; }
        .blogs-details-page .blogs-content .right-block-content__list--pl15 {
          font-family: "Roboto-Regular";
          font-size: 20px;
          color: #434eba;
          font-weight: 400;
          line-height: 30px;
          padding-left: 11px; }
        .blogs-details-page .blogs-content .right-block-content__list--pl15::before {
          content: '';
          display: block;
          height: 100%;
          width: 5px;
          background-color: #434eba;
          position: absolute;
          left: 0; }
      .blogs-details-page .blogs-content .right-block-content__list::-webkit-scrollbar {
        width: 4px; }
      .blogs-details-page .blogs-content .right-block-content__list::-webkit-scrollbar-track {
        background-color: #ebebeb;
        border-radius: 20px; }
      .blogs-details-page .blogs-content .right-block-content__list::-webkit-scrollbar-thumb {
        box-shadow: inset 0 0 6px #434eba;
        border-radius: 20px; }
    .blogs-details-page .blogs-content .right-block-share {
      border-top: 1px solid #434eba;
      padding-bottom: 40px; }
      .blogs-details-page .blogs-content .right-block-share__content {
        font-family: "Roboto-Regular";
        font-size: 26px;
        color: #434eba;
        font-weight: 600;
        line-height: 22px;
        display: flex;
        gap: 20px; }
        .blogs-details-page .blogs-content .right-block-share__content span:hover {
          cursor: pointer;
          color: #000000; }
    .blogs-details-page .blogs-content .bottom-line-bg {
      height: 7px;
      width: 92px;
      background: #000000;
      clear: both;
      position: relative;
      margin-top: 116px; }
    .blogs-details-page .blogs-content .clear {
      width: 100%;
      clear: both; }
    .blogs-details-page .blogs-content .bottom-title {
      font-family: "Roboto-Regular";
      font-size: 24px;
      color: #26252e;
      font-weight: 600;
      line-height: 36px;
      width: calc(var(--singleGridWidth) * 3 + 60px);
      padding-top: 58px; }
    .blogs-details-page .blogs-content .bottom-description {
      font-family: "Roboto-Regular";
      font-size: 20px;
      color: #26252e;
      font-weight: normal;
      line-height: 30px;
      padding-top: 30px; }
    .blogs-details-page .blogs-content .blogs-video {
      height: 500px;
      position: relative;
      margin-bottom: 116px; }
      .blogs-details-page .blogs-content .blogs-video .content-video {
        height: 500px !important;
        width: 100% !important;
        margin-top: 48px; }
    .blogs-details-page .blogs-content .blogs-details-slider {
      width: 100%;
      position: relative;
      margin-top: 40px;
      margin-bottom: 48px; }
  .blogs-details-page .additional-grid-block .middlie-grid .grid-item:nth-child(8) {
    display: none; }
  .blogs-details-page .blogs-article-block {
    width: 100%;
    height: auto;
    background: #ffffff;
    position: relative;
    display: block;
    padding: 440px 0px 100px 0px;
    margin-top: -400px; }
    .blogs-details-page .blogs-article-block .share-box {
      margin-top: 82px;
      position: relative;
      height: 166px;
      width: calc(var(--singleGridWidth) * 6);
      left: calc(var(--singleGridWidth) + var(--sideGridWidth));
      display: flex;
      justify-content: space-between;
      align-items: center; }
      .blogs-details-page .blogs-article-block .share-box .share-icon {
        width: calc(var(--singleGridWidth) + 21px);
        font-family: "Roboto-Medium";
        font-size: 14px;
        color: #ffffff;
        font-weight: 500;
        line-height: 14px;
        text-transform: uppercase; }
      .blogs-details-page .blogs-article-block .share-box .facebook-bg {
        background-color: #3b5998;
        height: 40px;
        display: flex;
        justify-content: flex-start;
        align-items: center; }
        .blogs-details-page .blogs-article-block .share-box .facebook-bg .icon-image {
          margin-left: 14px;
          height: 20px;
          width: 20px; }
        .blogs-details-page .blogs-article-block .share-box .facebook-bg .icon-text {
          margin-left: 11px; }
      .blogs-details-page .blogs-article-block .share-box .twitter-bg {
        background-color: #1da1f2;
        height: 40px;
        display: flex;
        justify-content: flex-start;
        align-items: center; }
        .blogs-details-page .blogs-article-block .share-box .twitter-bg .icon-image {
          margin-left: 14px;
          height: 20px;
          width: 20px; }
        .blogs-details-page .blogs-article-block .share-box .twitter-bg .icon-text {
          margin-left: 11px; }
      .blogs-details-page .blogs-article-block .share-box .linkedin-bg {
        background-color: #0077b5;
        height: 40px;
        display: flex;
        justify-content: flex-start;
        align-items: center; }
        .blogs-details-page .blogs-article-block .share-box .linkedin-bg .icon-image {
          margin-left: 14px;
          height: 20px;
          width: 20px; }
        .blogs-details-page .blogs-article-block .share-box .linkedin-bg .icon-text {
          margin-left: 11px; }
      .blogs-details-page .blogs-article-block .share-box .google-bg {
        background-color: #dd4b39;
        height: 40px;
        display: flex;
        justify-content: flex-start;
        align-items: center; }
        .blogs-details-page .blogs-article-block .share-box .google-bg .icon-image {
          margin-left: 14px;
          height: 20px;
          width: 20px; }
        .blogs-details-page .blogs-article-block .share-box .google-bg .icon-text {
          margin-left: 11px; }
      .blogs-details-page .blogs-article-block .share-box .pinterest-bg {
        background-color: #bd081c;
        height: 40px;
        display: flex;
        justify-content: flex-start;
        align-items: center; }
        .blogs-details-page .blogs-article-block .share-box .pinterest-bg .icon-image {
          margin-left: 14px;
          height: 20px;
          width: 20px; }
        .blogs-details-page .blogs-article-block .share-box .pinterest-bg .icon-text {
          margin-left: 11px; }
    .blogs-details-page .blogs-article-block .author-box {
      position: relative;
      height: 166px;
      width: calc(var(--singleGridWidth) * 8);
      left: var(--sideGridWidth);
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      align-items: center;
      background-color: #ecf1f2;
      padding: 20px 40px;
      font-family: "Roboto-Medium";
      font-size: var(--font14);
      color: #26252e;
      font-weight: 500;
      line-height: 10px; }
      .blogs-details-page .blogs-article-block .author-box .author-information {
        display: flex; }
        .blogs-details-page .blogs-article-block .author-box .author-information .author-image {
          height: 96px;
          width: 96px;
          padding: 20px 20px 20px 14px;
          background-color: #434eba; }
        .blogs-details-page .blogs-article-block .author-box .author-information .author-image path {
          fill: white; }
      .blogs-details-page .blogs-article-block .author-box .author-details {
        display: flex;
        flex-direction: column;
        gap: 12px;
        justify-content: center;
        margin-left: 34px;
        color: #26252e;
        font-family: "Roboto-Medium";
        font-size: 22px;
        color: #26252e;
        font-weight: 500;
        line-height: 10px; }
      .blogs-details-page .blogs-article-block .author-box .author-heading {
        font-family: "Roboto-Regular";
        font-size: 24px;
        color: #26252e;
        font-weight: 400;
        line-height: 48px;
        opacity: 0.7; }
        .blogs-details-page .blogs-article-block .author-box .author-heading__tags {
          display: flex;
          gap: 12px;
          font-family: "Roboto-Regular";
          font-size: 20px;
          color: #434eba;
          font-weight: 600;
          line-height: 24px; }
          .blogs-details-page .blogs-article-block .author-box .author-heading__tags span {
            background-color: #ffffff;
            border-radius: 20px;
            padding: 12px 18px;
            cursor: pointer; }
          .blogs-details-page .blogs-article-block .author-box .author-heading__tags span:hover {
            background-color: #434eba;
            color: #ffffff; }
      .blogs-details-page .blogs-article-block .author-box .authors-all-post {
        align-self: flex-end; }
      .blogs-details-page .blogs-article-block .author-box .author-categories {
        position: relative;
        padding-left: 24px; }
        .blogs-details-page .blogs-article-block .author-box .author-categories .author-middle-bar {
          position: absolute;
          left: 0;
          height: 100%;
          width: 2px;
          border-radius: 10px;
          background-color: #ffffff; }
  .blogs-details-page .article-next-prev-block {
    margin: 80px 0px 40px 0px;
    height: 166px;
    left: calc(var(--singleGridWidth) + var(--sideGridWidth));
    display: flex;
    gap: 40px;
    align-items: center; }
    .blogs-details-page .article-next-prev-block .prev-block {
      width: calc(var(--singleGridWidth) * 3 - 31px);
      height: 166px;
      display: flex;
      align-items: center;
      cursor: pointer; }
      .blogs-details-page .article-next-prev-block .prev-block .prev-icon {
        background: #434eba;
        width: var(--singleGridWidth);
        height: 166px;
        display: flex;
        align-items: center;
        justify-content: center; }
      .blogs-details-page .article-next-prev-block .prev-block .image-block {
        position: relative;
        height: 166px; }
        .blogs-details-page .article-next-prev-block .prev-block .image-block img {
          height: 100%;
          width: 100%;
          object-fit: cover;
          background-color: #7d7c82; }
        .blogs-details-page .article-next-prev-block .prev-block .image-block .overlay {
          background: rgba(38, 37, 46, 0.8);
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0; }
        .blogs-details-page .article-next-prev-block .prev-block .image-block .previous-article {
          position: absolute;
          top: 31px;
          padding-inline: 38px;
          font-family: "Roboto-Thin";
          font-size: 16px;
          color: #ffffff;
          font-weight: 300;
          line-height: 30px;
          letter-spacing: 0.01em;
          display: inline-block;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical; }
        .blogs-details-page .article-next-prev-block .prev-block .image-block .article-title {
          position: absolute;
          top: 65px;
          padding-inline: 38px;
          font-family: "Roboto-Medium";
          font-size: 20px;
          color: #ffffff;
          font-weight: 500;
          line-height: 30px;
          letter-spacing: 0.01em;
          display: inline-block;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical; }
    .blogs-details-page .article-next-prev-block .next-block {
      width: calc(var(--singleGridWidth) * 3 - 31px);
      height: 166px;
      display: flex;
      align-items: center;
      cursor: pointer; }
      .blogs-details-page .article-next-prev-block .next-block .prev-icon {
        background: #434eba;
        width: 166px;
        height: 166px;
        display: flex;
        align-items: center;
        justify-content: center; }
      .blogs-details-page .article-next-prev-block .next-block .image-block {
        position: relative;
        height: 166px;
        width: fit-content; }
        .blogs-details-page .article-next-prev-block .next-block .image-block img {
          height: 100%;
          width: calc(100%);
          object-fit: cover;
          background-color: #7d7c82; }
        .blogs-details-page .article-next-prev-block .next-block .image-block .overlay {
          background: rgba(38, 37, 46, 0.8);
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0; }
        .blogs-details-page .article-next-prev-block .next-block .image-block .previous-article {
          position: absolute;
          top: 31px;
          padding-inline: 38px;
          font-family: "Roboto-Thin";
          font-size: 16px;
          color: #ffffff;
          font-weight: 300;
          line-height: 30px;
          letter-spacing: 0.01em;
          display: inline-block;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical; }
        .blogs-details-page .article-next-prev-block .next-block .image-block .article-title {
          position: absolute;
          top: 65px;
          padding-inline: 38px;
          font-family: "Roboto-Medium";
          font-size: 20px;
          color: #ffffff;
          font-weight: 500;
          line-height: 26px;
          letter-spacing: 0.01em;
          display: inline-block;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical; }
  .blogs-details-page .top-plus-icon {
    position: absolute;
    left: 100px;
    top: 300px;
    height: 30px;
    width: 30px;
    z-index: 993; }
    .blogs-details-page .top-plus-icon .wrap-plus {
      left: 0;
      top: 0; }
  .blogs-details-page .other-blog-title {
    padding-left: var(--sideGridWidth);
    font-family: "Roboto-Regular";
    font-size: 36px;
    color: #3C3B43;
    font-weight: normal;
    line-height: 60px;
    padding-bottom: 40px;
    background: #ffffff; }

@media screen and (min-width: 1025px) and (max-width: calc(1366px - 1px)) {
  .blogs-details-page .blogs-content .blogs-title {
    font-size: var(--font24); }
  .blogs-details-page .blogs-content .blogs-description {
    font-size: var(--font20); }
  .blogs-details-page .blogs-article-block .article-next-prev-block .prev-block .prev-icon {
    width: var(--singleGridWidth); }
  .blogs-details-page .blogs-article-block .article-next-prev-block .prev-block .image-block {
    width: 65%; }
    .blogs-details-page .blogs-article-block .article-next-prev-block .prev-block .image-block .previous-article {
      font-family: "Roboto-Medium";
      font-size: 14px;
      color: #ffffff;
      font-weight: 500;
      line-height: 30px; }
    .blogs-details-page .blogs-article-block .article-next-prev-block .prev-block .image-block .article-title {
      font-family: "Roboto-Medium";
      font-size: 15px;
      color: #ffffff;
      font-weight: 500;
      line-height: 30px; }
  .blogs-details-page .blogs-article-block .article-next-prev-block .next-block .prev-icon {
    width: var(--singleGridWidth); }
  .blogs-details-page .blogs-article-block .article-next-prev-block .next-block .image-block {
    width: 65%; }
    .blogs-details-page .blogs-article-block .article-next-prev-block .next-block .image-block .previous-article {
      font-family: "Roboto-Medium";
      font-size: 14px;
      color: #ffffff;
      font-weight: 500;
      line-height: 30px; }
    .blogs-details-page .blogs-article-block .article-next-prev-block .next-block .image-block .article-title {
      font-family: "Roboto-Medium";
      font-size: 15px;
      color: #ffffff;
      font-weight: 500;
      line-height: 30px; } }

@media screen and (min-width: 1366px) and (max-width: calc(1440px - 1px)) {
  .blogs-details-page .blogs-content .blogs-title {
    font-family: "Roboto-Medium";
    font-size: 22px;
    color: #26252e;
    font-weight: 500;
    line-height: 36px; }
  .blogs-details-page .blogs-content .blogs-description {
    font-family: "Roboto-Regular";
    font-size: 18px;
    color: #26252e;
    font-weight: normal;
    line-height: 30px; }
  .blogs-details-page .blogs-content .blogs-description-two {
    font-family: "Roboto-Regular";
    font-size: 18px;
    color: #26252e;
    font-weight: normal;
    line-height: 30px; }
  .blogs-details-page .blogs-article-block .article-next-prev-block .prev-block .prev-icon {
    width: var(--singleGridWidth); }
  .blogs-details-page .blogs-article-block .article-next-prev-block .prev-block .image-block {
    width: 65%; }
    .blogs-details-page .blogs-article-block .article-next-prev-block .prev-block .image-block .previous-article {
      font-family: "Roboto-Medium";
      font-size: 14px;
      color: #ffffff;
      font-weight: 500;
      line-height: 30px; }
    .blogs-details-page .blogs-article-block .article-next-prev-block .prev-block .image-block .article-title {
      font-family: "Roboto-Medium";
      font-size: 18px;
      color: #ffffff;
      font-weight: 500;
      line-height: 30px; }
  .blogs-details-page .blogs-article-block .article-next-prev-block .next-block .prev-icon {
    width: var(--singleGridWidth); }
  .blogs-details-page .blogs-article-block .article-next-prev-block .next-block .image-block {
    width: 65%; }
    .blogs-details-page .blogs-article-block .article-next-prev-block .next-block .image-block .previous-article {
      font-family: "Roboto-Medium";
      font-size: 14px;
      color: #ffffff;
      font-weight: 500;
      line-height: 30px; }
    .blogs-details-page .blogs-article-block .article-next-prev-block .next-block .image-block .article-title {
      font-family: "Roboto-Medium";
      font-size: 18px;
      color: #ffffff;
      font-weight: 500;
      line-height: 30px; } }

@media screen and (max-width: 1024px) {
  .blogs-details-page {
    margin-top: 72px;
    background: #ecf1f2;
    height: auto;
    position: relative;
    z-index: 1; }
    .blogs-details-page .blogs-content {
      z-index: 1;
      position: relative;
      left: calc(var(--sideGridWidth));
      width: calc(var(--singleGridWidth) * 4);
      height: auto;
      padding-top: 48px;
      padding-left: 20px;
      padding-right: 20px;
      padding-bottom: 28px;
      background: #ffffff; }
      .blogs-details-page .blogs-content .blog-details-content {
        display: flex; }
        .blogs-details-page .blogs-content .blog-details-content .right-block {
          display: none; }
      .blogs-details-page .blogs-content .blogs-top-line {
        height: 7px;
        width: 50px;
        background: #000000; }
      .blogs-details-page .blogs-content .blogs-title {
        font-family: "Roboto-Regular";
        font-size: 14px;
        color: #26252e;
        font-weight: 600;
        line-height: 20px;
        width: calc(var(--singleGridWidth) * 3);
        margin-top: 30px; }
      .blogs-details-page .blogs-content .blogs-description {
        font-family: "Roboto-Regular";
        font-size: 12px;
        color: #26252e;
        font-weight: normal;
        line-height: 20px;
        padding-top: 20px;
        letter-spacing: 0.02em;
        padding-bottom: 30px; }
      .blogs-details-page .blogs-content .blogs-description-two {
        font-family: "Roboto-Regular";
        font-size: 12px;
        color: #26252e;
        font-weight: normal;
        line-height: 20px;
        letter-spacing: 0.02em; }
      .blogs-details-page .blogs-content .bottom-line-bg {
        height: 7px;
        width: 50px;
        background: #000000;
        clear: both;
        position: relative;
        margin-top: 46px; }
      .blogs-details-page .blogs-content .clear {
        width: 100%;
        clear: both; }
      .blogs-details-page .blogs-content .bottom-title {
        font-family: "Roboto-Regular";
        font-size: 14px;
        color: #26252e;
        font-weight: 600;
        line-height: 30px;
        width: calc(var(--singleGridWidth) * 3);
        padding-top: 20px; }
      .blogs-details-page .blogs-content .bottom-description {
        font-family: "Roboto-Regular";
        font-size: 12px;
        color: #26252e;
        font-weight: normal;
        line-height: 20px;
        padding-top: 10px;
        letter-spacing: 0.02em; }
      .blogs-details-page .blogs-content .blogs-video {
        height: 144px;
        position: relative; }
        .blogs-details-page .blogs-content .blogs-video .content-video {
          height: 144px !important;
          width: 100% !important;
          margin-top: 20px; }
      .blogs-details-page .blogs-content .blogs-details-slider {
        width: 100%;
        position: relative;
        margin-top: 20px;
        margin-bottom: 10px; }
    .blogs-details-page .blogs-article-block {
      width: 100%;
      background: #ffffff;
      margin-top: -60px;
      position: relative;
      display: block;
      padding: 440px 0px 100px 0px;
      margin-top: -400px;
      overflow: hidden; }
      .blogs-details-page .blogs-article-block .share-box {
        display: block;
        height: auto;
        width: 90%;
        margin: 5px auto;
        left: 1%; }
        .blogs-details-page .blogs-article-block .share-box .share-icon {
          width: calc(var(--singleGridWidth) * 3.9);
          font-family: "Roboto-Medium";
          font-size: 14px;
          color: #ffffff;
          font-weight: 500;
          line-height: 14px;
          text-transform: uppercase;
          margin: 5px 0px; }
        .blogs-details-page .blogs-article-block .share-box .facebook-bg {
          margin-top: 70px; }
        .blogs-details-page .blogs-article-block .share-box .google-bg {
          margin-bottom: 40px; }
      .blogs-details-page .blogs-article-block .author-box {
        margin-top: 12px;
        position: relative;
        height: auto;
        width: calc(var(--singleGridWidth) * 4);
        left: var(--sideGridWidth);
        grid-template-columns: auto;
        background-color: #ecf1f2;
        padding: 20px 25px 20px var(--sideGridWidth);
        font-family: "Roboto-Medium";
        font-size: var(--font14);
        color: #26252e;
        font-weight: 500;
        line-height: 10px; }
        .blogs-details-page .blogs-article-block .author-box .author-information {
          display: flex; }
          .blogs-details-page .blogs-article-block .author-box .author-information .author-details {
            margin-left: 15px;
            color: #26252e; }
        .blogs-details-page .blogs-article-block .author-box .authors-all-post {
          align-self: flex-end; }
        .blogs-details-page .blogs-article-block .author-box .author-categories {
          padding-left: 0px; }
          .blogs-details-page .blogs-article-block .author-box .author-categories .author-middle-bar {
            display: none; }
          .blogs-details-page .blogs-article-block .author-box .author-categories .author-details {
            margin-left: 0px;
            padding-top: 20px; }
            .blogs-details-page .blogs-article-block .author-box .author-categories .author-details .author-heading {
              display: none; }
            .blogs-details-page .blogs-article-block .author-box .author-categories .author-details .author-heading__tags {
              font-family: "Roboto-Regular";
              font-size: 14px;
              color: #434eba;
              font-weight: 600;
              line-height: 20px;
              max-width: calc(var(--singleGridWidth) * 4);
              flex-wrap: wrap; }
    .blogs-details-page .article-next-prev-block {
      margin: 40px 0px;
      position: relative;
      height: auto;
      width: calc(var(--singleGridWidth) * 3);
      left: 0px;
      flex-direction: column;
      gap: 0px;
      justify-content: unset;
      align-items: unset; }
      .blogs-details-page .article-next-prev-block .prev-block {
        margin-bottom: 24px;
        width: calc(var(--singleGridWidth) * 3);
        height: 72px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer; }
        .blogs-details-page .article-next-prev-block .prev-block .prev-icon {
          background: #434eba;
          width: 72px;
          height: 72px;
          display: flex;
          align-items: center;
          justify-content: center; }
          .blogs-details-page .article-next-prev-block .prev-block .prev-icon img {
            height: 14px;
            width: 14px; }
        .blogs-details-page .article-next-prev-block .prev-block .image-block {
          position: relative;
          height: 72px;
          width: calc(100% - 72px); }
          .blogs-details-page .article-next-prev-block .prev-block .image-block img {
            height: 100%;
            width: calc(100%);
            object-fit: cover; }
          .blogs-details-page .article-next-prev-block .prev-block .image-block .overlay {
            background: rgba(38, 37, 46, 0.5);
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0; }
          .blogs-details-page .article-next-prev-block .prev-block .image-block .previous-article {
            opacity: 0.7;
            position: absolute;
            top: 18px;
            left: 50%;
            transform: translate(-50%, 0%);
            width: 124px;
            font-family: "Roboto-Regular";
            font-size: 11px;
            color: #ffffff;
            font-weight: normal;
            line-height: 16px;
            letter-spacing: 0.02em;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical; }
          .blogs-details-page .article-next-prev-block .prev-block .image-block .article-title {
            position: absolute;
            top: 48px;
            left: 50%;
            transform: translate(-50%, -30%);
            width: 124px;
            font-family: "Roboto-Regular";
            font-size: 12px;
            color: #ffffff;
            font-weight: normal;
            line-height: 16px;
            letter-spacing: 0.01em;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical; }
      .blogs-details-page .article-next-prev-block .next-block {
        width: calc(var(--singleGridWidth) * 3);
        height: 72px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        margin-left: calc(var(--sideGridWidth) * 3); }
        .blogs-details-page .article-next-prev-block .next-block .prev-icon {
          background: #434eba;
          width: 72px;
          height: 72px;
          display: flex;
          align-items: center;
          justify-content: center; }
          .blogs-details-page .article-next-prev-block .next-block .prev-icon img {
            height: 14px;
            width: 14px; }
        .blogs-details-page .article-next-prev-block .next-block .image-block {
          position: relative;
          height: 72px;
          width: calc(100% - 72px); }
          .blogs-details-page .article-next-prev-block .next-block .image-block img {
            height: 100%;
            width: calc(100%);
            object-fit: cover; }
          .blogs-details-page .article-next-prev-block .next-block .image-block .overlay {
            background: rgba(38, 37, 46, 0.5);
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0; }
          .blogs-details-page .article-next-prev-block .next-block .image-block .previous-article {
            position: absolute;
            top: 18px;
            left: 50%;
            transform: translate(-50%, 0%);
            width: 124px;
            opacity: 0.7;
            font-family: "Roboto-Regular";
            font-size: 11px;
            color: #ffffff;
            font-weight: normal;
            line-height: 16px;
            letter-spacing: 0.02em;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical; }
          .blogs-details-page .article-next-prev-block .next-block .image-block .article-title {
            position: absolute;
            top: 48px;
            left: 50%;
            transform: translate(-50%, -30%);
            width: 124px;
            font-family: "Roboto-Regular";
            font-size: 12px;
            color: #ffffff;
            font-weight: normal;
            line-height: 16px;
            letter-spacing: unset;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical; }
    .blogs-details-page .other-blog-title {
      padding-left: calc(var(--sideGridWidth));
      font-family: "Roboto-Regular";
      font-size: 26px;
      color: #3C3B43;
      font-weight: normal;
      line-height: 30px;
      padding-bottom: 20px; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.blogs-details-page {
  margin-top: 90px;
  background: #ecf1f2;
  height: auto;
  position: relative;
  z-index: 1; }
  .blogs-details-page .wrap-top-plus {
    position: absolute;
    top: 105px;
    left: calc(-1 * var(--singleGridWidth)); }
    .blogs-details-page .wrap-top-plus .wrap-plus {
      left: 0;
      top: 0; }
  .blogs-details-page .wrap-bottom-plus {
    position: absolute;
    bottom: 404px;
    left: calc(-1 * var(--singleGridWidth)); }
    .blogs-details-page .wrap-bottom-plus .wrap-plus {
      left: 0;
      top: 0; }
  .blogs-details-page .blogs-content {
    z-index: 1;
    position: relative;
    left: var(--sideGridWidth);
    width: calc(var(--singleGridWidth) * 8 - 1px);
    height: auto;
    padding: 116px 49px 40px 48px;
    background: #ffffff;
    border-bottom: 2px solid rgba(38, 37, 46, 0.2); }
    .blogs-details-page .blogs-content .blogs-top-line {
      height: 7px;
      width: 92px;
      background: #000000; }
    .blogs-details-page .blogs-content .blogs-title {
      font-family: "Roboto-Regular";
      font-size: 24px;
      color: #26252e;
      font-weight: 600;
      line-height: 36px;
      width: calc(var(--singleGridWidth) * 3 + 60px);
      margin-top: 58px; }
    .blogs-details-page .blogs-content .blogs-description {
      font-family: "Roboto-Regular";
      font-size: 20px;
      color: #26252e;
      font-weight: normal;
      line-height: 30px;
      padding-top: 50px;
      padding-bottom: 195px; }
      .blogs-details-page .blogs-content .blogs-description .blogs-description-header {
        scroll-margin-top: 100px; }
    .blogs-details-page .blogs-content .blogs-description-two {
      font-family: "Roboto-Regular";
      font-size: 20px;
      color: #26252e;
      font-weight: normal;
      line-height: 30px; }
      .blogs-details-page .blogs-content .blogs-description-two .blogs-description-header {
        scroll-margin-top: 100px; }
    .blogs-details-page .blogs-content .blog-details-content {
      display: grid;
      grid-template-columns: calc(100% - 349px) 300px;
      gap: 49px; }
      .blogs-details-page .blogs-content .blog-details-content .divider {
        background-color: black;
        height: 6px;
        width: 80px;
        margin-bottom: 58px; }
      .blogs-details-page .blogs-content .blog-details-content .long-divider {
        border-top: 2px solid rgba(38, 37, 46, 0.2); }
    .blogs-details-page .blogs-content .right-block-contact {
      width: 100%;
      border: 2px solid #434eba;
      position: relative;
      display: flex;
      justify-content: center; }
      .blogs-details-page .blogs-content .right-block-contact__content {
        padding: 20px;
        padding-bottom: 78px;
        display: flex;
        flex-direction: column;
        gap: 19px; }
      .blogs-details-page .blogs-content .right-block-contact__button {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 54px;
        background-color: #434eba;
        font-family: "Roboto-Medium";
        font-size: 20px;
        color: #ffffff;
        font-weight: 500;
        line-height: 35px;
        border: none; }
      .blogs-details-page .blogs-content .right-block-contact .contact-title {
        font-family: "Roboto-Medium";
        font-size: 20px;
        color: #26252e;
        font-weight: 500;
        line-height: 34px; }
      .blogs-details-page .blogs-content .right-block-contact .contact-description {
        font-family: "Roboto-Regular";
        font-size: 16px;
        color: #26252e;
        font-weight: 400;
        line-height: 26px;
        opacity: 0.7; }
    .blogs-details-page .blogs-content .right-block-content {
      position: sticky;
      top: 50px; }
      .blogs-details-page .blogs-content .right-block-content__title {
        font-family: "Roboto-Medium";
        font-size: 24px;
        color: #26252e;
        font-weight: 500;
        line-height: 36px;
        padding: 32px 0px; }
      .blogs-details-page .blogs-content .right-block-content__list {
        font-family: "Roboto-Regular";
        font-size: 20px;
        color: #3C3B43;
        font-weight: 400;
        line-height: 30px;
        opacity: 0.7;
        max-height: 55vh;
        overflow: auto;
        margin-bottom: 32px; }
        .blogs-details-page .blogs-content .right-block-content__list ul {
          list-style-type: none;
          padding: 0;
          margin: 0; }
        .blogs-details-page .blogs-content .right-block-content__list li {
          margin-bottom: 18px;
          padding-right: 5px;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          position: relative; }
          .blogs-details-page .blogs-content .right-block-content__list li a:link {
            color: #3C3B43; }
            .blogs-details-page .blogs-content .right-block-content__list li a:link:hover {
              color: #434eba; }
          .blogs-details-page .blogs-content .right-block-content__list li a:visited {
            color: unset; }
        .blogs-details-page .blogs-content .right-block-content__list--pl15 {
          font-family: "Roboto-Regular";
          font-size: 20px;
          color: #434eba;
          font-weight: 400;
          line-height: 30px;
          padding-left: 11px; }
        .blogs-details-page .blogs-content .right-block-content__list--pl15::before {
          content: '';
          display: block;
          height: 100%;
          width: 5px;
          background-color: #434eba;
          position: absolute;
          left: 0; }
      .blogs-details-page .blogs-content .right-block-content__list::-webkit-scrollbar {
        width: 4px; }
      .blogs-details-page .blogs-content .right-block-content__list::-webkit-scrollbar-track {
        background-color: #ebebeb;
        border-radius: 20px; }
      .blogs-details-page .blogs-content .right-block-content__list::-webkit-scrollbar-thumb {
        box-shadow: inset 0 0 6px #434eba;
        border-radius: 20px; }
    .blogs-details-page .blogs-content .right-block-share {
      border-top: 1px solid #434eba;
      padding-bottom: 40px; }
      .blogs-details-page .blogs-content .right-block-share__content {
        font-family: "Roboto-Regular";
        font-size: 26px;
        color: #434eba;
        font-weight: 600;
        line-height: 22px;
        display: flex;
        gap: 20px; }
        .blogs-details-page .blogs-content .right-block-share__content span:hover {
          cursor: pointer;
          color: #000000; }
    .blogs-details-page .blogs-content .bottom-line-bg {
      height: 7px;
      width: 92px;
      background: #000000;
      clear: both;
      position: relative;
      margin-top: 116px; }
    .blogs-details-page .blogs-content .clear {
      width: 100%;
      clear: both; }
    .blogs-details-page .blogs-content .bottom-title {
      font-family: "Roboto-Regular";
      font-size: 24px;
      color: #26252e;
      font-weight: 600;
      line-height: 36px;
      width: calc(var(--singleGridWidth) * 3 + 60px);
      padding-top: 58px; }
    .blogs-details-page .blogs-content .bottom-description {
      font-family: "Roboto-Regular";
      font-size: 20px;
      color: #26252e;
      font-weight: normal;
      line-height: 30px;
      padding-top: 30px; }
    .blogs-details-page .blogs-content .blogs-video {
      height: 500px;
      position: relative;
      margin-bottom: 116px; }
      .blogs-details-page .blogs-content .blogs-video .content-video {
        height: 500px !important;
        width: 100% !important;
        margin-top: 48px; }
    .blogs-details-page .blogs-content .blogs-details-slider {
      width: 100%;
      position: relative;
      margin-top: 40px;
      margin-bottom: 48px; }
  .blogs-details-page .additional-grid-block .middlie-grid .grid-item:nth-child(8) {
    display: none; }
  .blogs-details-page .blogs-article-block {
    width: 100%;
    height: auto;
    background: #ffffff;
    position: relative;
    display: block;
    padding: 440px 0px 100px 0px;
    margin-top: -400px; }
    .blogs-details-page .blogs-article-block .share-box {
      margin-top: 82px;
      position: relative;
      height: 166px;
      width: calc(var(--singleGridWidth) * 6);
      left: calc(var(--singleGridWidth) + var(--sideGridWidth));
      display: flex;
      justify-content: space-between;
      align-items: center; }
      .blogs-details-page .blogs-article-block .share-box .share-icon {
        width: calc(var(--singleGridWidth) + 21px);
        font-family: "Roboto-Medium";
        font-size: 14px;
        color: #ffffff;
        font-weight: 500;
        line-height: 14px;
        text-transform: uppercase; }
      .blogs-details-page .blogs-article-block .share-box .facebook-bg {
        background-color: #3b5998;
        height: 40px;
        display: flex;
        justify-content: flex-start;
        align-items: center; }
        .blogs-details-page .blogs-article-block .share-box .facebook-bg .icon-image {
          margin-left: 14px;
          height: 20px;
          width: 20px; }
        .blogs-details-page .blogs-article-block .share-box .facebook-bg .icon-text {
          margin-left: 11px; }
      .blogs-details-page .blogs-article-block .share-box .twitter-bg {
        background-color: #1da1f2;
        height: 40px;
        display: flex;
        justify-content: flex-start;
        align-items: center; }
        .blogs-details-page .blogs-article-block .share-box .twitter-bg .icon-image {
          margin-left: 14px;
          height: 20px;
          width: 20px; }
        .blogs-details-page .blogs-article-block .share-box .twitter-bg .icon-text {
          margin-left: 11px; }
      .blogs-details-page .blogs-article-block .share-box .linkedin-bg {
        background-color: #0077b5;
        height: 40px;
        display: flex;
        justify-content: flex-start;
        align-items: center; }
        .blogs-details-page .blogs-article-block .share-box .linkedin-bg .icon-image {
          margin-left: 14px;
          height: 20px;
          width: 20px; }
        .blogs-details-page .blogs-article-block .share-box .linkedin-bg .icon-text {
          margin-left: 11px; }
      .blogs-details-page .blogs-article-block .share-box .google-bg {
        background-color: #dd4b39;
        height: 40px;
        display: flex;
        justify-content: flex-start;
        align-items: center; }
        .blogs-details-page .blogs-article-block .share-box .google-bg .icon-image {
          margin-left: 14px;
          height: 20px;
          width: 20px; }
        .blogs-details-page .blogs-article-block .share-box .google-bg .icon-text {
          margin-left: 11px; }
      .blogs-details-page .blogs-article-block .share-box .pinterest-bg {
        background-color: #bd081c;
        height: 40px;
        display: flex;
        justify-content: flex-start;
        align-items: center; }
        .blogs-details-page .blogs-article-block .share-box .pinterest-bg .icon-image {
          margin-left: 14px;
          height: 20px;
          width: 20px; }
        .blogs-details-page .blogs-article-block .share-box .pinterest-bg .icon-text {
          margin-left: 11px; }
    .blogs-details-page .blogs-article-block .author-box {
      position: relative;
      height: 166px;
      width: calc(var(--singleGridWidth) * 8);
      left: var(--sideGridWidth);
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      align-items: center;
      background-color: #ecf1f2;
      padding: 20px 40px;
      font-family: "Roboto-Medium";
      font-size: var(--font14);
      color: #26252e;
      font-weight: 500;
      line-height: 10px; }
      .blogs-details-page .blogs-article-block .author-box .author-information {
        display: flex; }
        .blogs-details-page .blogs-article-block .author-box .author-information .author-image {
          height: 96px;
          width: 96px;
          padding: 20px 20px 20px 14px;
          background-color: #434eba; }
        .blogs-details-page .blogs-article-block .author-box .author-information .author-image path {
          fill: white; }
      .blogs-details-page .blogs-article-block .author-box .author-details {
        display: flex;
        flex-direction: column;
        gap: 12px;
        justify-content: center;
        margin-left: 34px;
        color: #26252e;
        font-family: "Roboto-Medium";
        font-size: 22px;
        color: #26252e;
        font-weight: 500;
        line-height: 10px; }
      .blogs-details-page .blogs-article-block .author-box .author-heading {
        font-family: "Roboto-Regular";
        font-size: 24px;
        color: #26252e;
        font-weight: 400;
        line-height: 48px;
        opacity: 0.7; }
        .blogs-details-page .blogs-article-block .author-box .author-heading__tags {
          display: flex;
          gap: 12px;
          font-family: "Roboto-Regular";
          font-size: 20px;
          color: #434eba;
          font-weight: 600;
          line-height: 24px; }
          .blogs-details-page .blogs-article-block .author-box .author-heading__tags span {
            background-color: #ffffff;
            border-radius: 20px;
            padding: 12px 18px;
            cursor: pointer; }
          .blogs-details-page .blogs-article-block .author-box .author-heading__tags span:hover {
            background-color: #434eba;
            color: #ffffff; }
      .blogs-details-page .blogs-article-block .author-box .authors-all-post {
        align-self: flex-end; }
      .blogs-details-page .blogs-article-block .author-box .author-categories {
        position: relative;
        padding-left: 24px; }
        .blogs-details-page .blogs-article-block .author-box .author-categories .author-middle-bar {
          position: absolute;
          left: 0;
          height: 100%;
          width: 2px;
          border-radius: 10px;
          background-color: #ffffff; }
  .blogs-details-page .article-next-prev-block {
    margin: 80px 0px 40px 0px;
    height: 166px;
    left: calc(var(--singleGridWidth) + var(--sideGridWidth));
    display: flex;
    gap: 40px;
    align-items: center; }
    .blogs-details-page .article-next-prev-block .prev-block {
      width: calc(var(--singleGridWidth) * 3 - 31px);
      height: 166px;
      display: flex;
      align-items: center;
      cursor: pointer; }
      .blogs-details-page .article-next-prev-block .prev-block .prev-icon {
        background: #434eba;
        width: var(--singleGridWidth);
        height: 166px;
        display: flex;
        align-items: center;
        justify-content: center; }
      .blogs-details-page .article-next-prev-block .prev-block .image-block {
        position: relative;
        height: 166px; }
        .blogs-details-page .article-next-prev-block .prev-block .image-block img {
          height: 100%;
          width: 100%;
          object-fit: cover;
          background-color: #7d7c82; }
        .blogs-details-page .article-next-prev-block .prev-block .image-block .overlay {
          background: rgba(38, 37, 46, 0.8);
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0; }
        .blogs-details-page .article-next-prev-block .prev-block .image-block .previous-article {
          position: absolute;
          top: 31px;
          padding-inline: 38px;
          font-family: "Roboto-Thin";
          font-size: 16px;
          color: #ffffff;
          font-weight: 300;
          line-height: 30px;
          letter-spacing: 0.01em;
          display: inline-block;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical; }
        .blogs-details-page .article-next-prev-block .prev-block .image-block .article-title {
          position: absolute;
          top: 65px;
          padding-inline: 38px;
          font-family: "Roboto-Medium";
          font-size: 20px;
          color: #ffffff;
          font-weight: 500;
          line-height: 30px;
          letter-spacing: 0.01em;
          display: inline-block;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical; }
    .blogs-details-page .article-next-prev-block .next-block {
      width: calc(var(--singleGridWidth) * 3 - 31px);
      height: 166px;
      display: flex;
      align-items: center;
      cursor: pointer; }
      .blogs-details-page .article-next-prev-block .next-block .prev-icon {
        background: #434eba;
        width: 166px;
        height: 166px;
        display: flex;
        align-items: center;
        justify-content: center; }
      .blogs-details-page .article-next-prev-block .next-block .image-block {
        position: relative;
        height: 166px;
        width: fit-content; }
        .blogs-details-page .article-next-prev-block .next-block .image-block img {
          height: 100%;
          width: calc(100%);
          object-fit: cover;
          background-color: #7d7c82; }
        .blogs-details-page .article-next-prev-block .next-block .image-block .overlay {
          background: rgba(38, 37, 46, 0.8);
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0; }
        .blogs-details-page .article-next-prev-block .next-block .image-block .previous-article {
          position: absolute;
          top: 31px;
          padding-inline: 38px;
          font-family: "Roboto-Thin";
          font-size: 16px;
          color: #ffffff;
          font-weight: 300;
          line-height: 30px;
          letter-spacing: 0.01em;
          display: inline-block;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical; }
        .blogs-details-page .article-next-prev-block .next-block .image-block .article-title {
          position: absolute;
          top: 65px;
          padding-inline: 38px;
          font-family: "Roboto-Medium";
          font-size: 20px;
          color: #ffffff;
          font-weight: 500;
          line-height: 26px;
          letter-spacing: 0.01em;
          display: inline-block;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical; }
  .blogs-details-page .top-plus-icon {
    position: absolute;
    left: 100px;
    top: 300px;
    height: 30px;
    width: 30px;
    z-index: 993; }
    .blogs-details-page .top-plus-icon .wrap-plus {
      left: 0;
      top: 0; }
  .blogs-details-page .other-blog-title {
    padding-left: var(--sideGridWidth);
    font-family: "Roboto-Regular";
    font-size: 36px;
    color: #3C3B43;
    font-weight: normal;
    line-height: 60px;
    padding-bottom: 40px;
    background: #ffffff; }

@media screen and (min-width: 1025px) and (max-width: calc(1366px - 1px)) {
  .blogs-details-page .blogs-content .blogs-title {
    font-size: var(--font24); }
  .blogs-details-page .blogs-content .blogs-description {
    font-size: var(--font20); }
  .blogs-details-page .blogs-article-block .article-next-prev-block .prev-block .prev-icon {
    width: var(--singleGridWidth); }
  .blogs-details-page .blogs-article-block .article-next-prev-block .prev-block .image-block {
    width: 65%; }
    .blogs-details-page .blogs-article-block .article-next-prev-block .prev-block .image-block .previous-article {
      font-family: "Roboto-Medium";
      font-size: 14px;
      color: #ffffff;
      font-weight: 500;
      line-height: 30px; }
    .blogs-details-page .blogs-article-block .article-next-prev-block .prev-block .image-block .article-title {
      font-family: "Roboto-Medium";
      font-size: 15px;
      color: #ffffff;
      font-weight: 500;
      line-height: 30px; }
  .blogs-details-page .blogs-article-block .article-next-prev-block .next-block .prev-icon {
    width: var(--singleGridWidth); }
  .blogs-details-page .blogs-article-block .article-next-prev-block .next-block .image-block {
    width: 65%; }
    .blogs-details-page .blogs-article-block .article-next-prev-block .next-block .image-block .previous-article {
      font-family: "Roboto-Medium";
      font-size: 14px;
      color: #ffffff;
      font-weight: 500;
      line-height: 30px; }
    .blogs-details-page .blogs-article-block .article-next-prev-block .next-block .image-block .article-title {
      font-family: "Roboto-Medium";
      font-size: 15px;
      color: #ffffff;
      font-weight: 500;
      line-height: 30px; } }

@media screen and (min-width: 1366px) and (max-width: calc(1440px - 1px)) {
  .blogs-details-page .blogs-content .blogs-title {
    font-family: "Roboto-Medium";
    font-size: 22px;
    color: #26252e;
    font-weight: 500;
    line-height: 36px; }
  .blogs-details-page .blogs-content .blogs-description {
    font-family: "Roboto-Regular";
    font-size: 18px;
    color: #26252e;
    font-weight: normal;
    line-height: 30px; }
  .blogs-details-page .blogs-content .blogs-description-two {
    font-family: "Roboto-Regular";
    font-size: 18px;
    color: #26252e;
    font-weight: normal;
    line-height: 30px; }
  .blogs-details-page .blogs-article-block .article-next-prev-block .prev-block .prev-icon {
    width: var(--singleGridWidth); }
  .blogs-details-page .blogs-article-block .article-next-prev-block .prev-block .image-block {
    width: 65%; }
    .blogs-details-page .blogs-article-block .article-next-prev-block .prev-block .image-block .previous-article {
      font-family: "Roboto-Medium";
      font-size: 14px;
      color: #ffffff;
      font-weight: 500;
      line-height: 30px; }
    .blogs-details-page .blogs-article-block .article-next-prev-block .prev-block .image-block .article-title {
      font-family: "Roboto-Medium";
      font-size: 18px;
      color: #ffffff;
      font-weight: 500;
      line-height: 30px; }
  .blogs-details-page .blogs-article-block .article-next-prev-block .next-block .prev-icon {
    width: var(--singleGridWidth); }
  .blogs-details-page .blogs-article-block .article-next-prev-block .next-block .image-block {
    width: 65%; }
    .blogs-details-page .blogs-article-block .article-next-prev-block .next-block .image-block .previous-article {
      font-family: "Roboto-Medium";
      font-size: 14px;
      color: #ffffff;
      font-weight: 500;
      line-height: 30px; }
    .blogs-details-page .blogs-article-block .article-next-prev-block .next-block .image-block .article-title {
      font-family: "Roboto-Medium";
      font-size: 18px;
      color: #ffffff;
      font-weight: 500;
      line-height: 30px; } }

@media screen and (max-width: 1024px) {
  .blogs-details-page {
    margin-top: 72px;
    background: #ecf1f2;
    height: auto;
    position: relative;
    z-index: 1; }
    .blogs-details-page .blogs-content {
      z-index: 1;
      position: relative;
      left: calc(var(--sideGridWidth));
      width: calc(var(--singleGridWidth) * 4);
      height: auto;
      padding-top: 48px;
      padding-left: 20px;
      padding-right: 20px;
      padding-bottom: 28px;
      background: #ffffff; }
      .blogs-details-page .blogs-content .blog-details-content {
        display: flex; }
        .blogs-details-page .blogs-content .blog-details-content .right-block {
          display: none; }
      .blogs-details-page .blogs-content .blogs-top-line {
        height: 7px;
        width: 50px;
        background: #000000; }
      .blogs-details-page .blogs-content .blogs-title {
        font-family: "Roboto-Regular";
        font-size: 14px;
        color: #26252e;
        font-weight: 600;
        line-height: 20px;
        width: calc(var(--singleGridWidth) * 3);
        margin-top: 30px; }
      .blogs-details-page .blogs-content .blogs-description {
        font-family: "Roboto-Regular";
        font-size: 12px;
        color: #26252e;
        font-weight: normal;
        line-height: 20px;
        padding-top: 20px;
        letter-spacing: 0.02em;
        padding-bottom: 30px; }
      .blogs-details-page .blogs-content .blogs-description-two {
        font-family: "Roboto-Regular";
        font-size: 12px;
        color: #26252e;
        font-weight: normal;
        line-height: 20px;
        letter-spacing: 0.02em; }
      .blogs-details-page .blogs-content .bottom-line-bg {
        height: 7px;
        width: 50px;
        background: #000000;
        clear: both;
        position: relative;
        margin-top: 46px; }
      .blogs-details-page .blogs-content .clear {
        width: 100%;
        clear: both; }
      .blogs-details-page .blogs-content .bottom-title {
        font-family: "Roboto-Regular";
        font-size: 14px;
        color: #26252e;
        font-weight: 600;
        line-height: 30px;
        width: calc(var(--singleGridWidth) * 3);
        padding-top: 20px; }
      .blogs-details-page .blogs-content .bottom-description {
        font-family: "Roboto-Regular";
        font-size: 12px;
        color: #26252e;
        font-weight: normal;
        line-height: 20px;
        padding-top: 10px;
        letter-spacing: 0.02em; }
      .blogs-details-page .blogs-content .blogs-video {
        height: 144px;
        position: relative; }
        .blogs-details-page .blogs-content .blogs-video .content-video {
          height: 144px !important;
          width: 100% !important;
          margin-top: 20px; }
      .blogs-details-page .blogs-content .blogs-details-slider {
        width: 100%;
        position: relative;
        margin-top: 20px;
        margin-bottom: 10px; }
    .blogs-details-page .blogs-article-block {
      width: 100%;
      background: #ffffff;
      margin-top: -60px;
      position: relative;
      display: block;
      padding: 440px 0px 100px 0px;
      margin-top: -400px;
      overflow: hidden; }
      .blogs-details-page .blogs-article-block .share-box {
        display: block;
        height: auto;
        width: 90%;
        margin: 5px auto;
        left: 1%; }
        .blogs-details-page .blogs-article-block .share-box .share-icon {
          width: calc(var(--singleGridWidth) * 3.9);
          font-family: "Roboto-Medium";
          font-size: 14px;
          color: #ffffff;
          font-weight: 500;
          line-height: 14px;
          text-transform: uppercase;
          margin: 5px 0px; }
        .blogs-details-page .blogs-article-block .share-box .facebook-bg {
          margin-top: 70px; }
        .blogs-details-page .blogs-article-block .share-box .google-bg {
          margin-bottom: 40px; }
      .blogs-details-page .blogs-article-block .author-box {
        margin-top: 12px;
        position: relative;
        height: auto;
        width: calc(var(--singleGridWidth) * 4);
        left: var(--sideGridWidth);
        grid-template-columns: auto;
        background-color: #ecf1f2;
        padding: 20px 25px 20px var(--sideGridWidth);
        font-family: "Roboto-Medium";
        font-size: var(--font14);
        color: #26252e;
        font-weight: 500;
        line-height: 10px; }
        .blogs-details-page .blogs-article-block .author-box .author-information {
          display: flex; }
          .blogs-details-page .blogs-article-block .author-box .author-information .author-details {
            margin-left: 15px;
            color: #26252e; }
        .blogs-details-page .blogs-article-block .author-box .authors-all-post {
          align-self: flex-end; }
        .blogs-details-page .blogs-article-block .author-box .author-categories {
          padding-left: 0px; }
          .blogs-details-page .blogs-article-block .author-box .author-categories .author-middle-bar {
            display: none; }
          .blogs-details-page .blogs-article-block .author-box .author-categories .author-details {
            margin-left: 0px;
            padding-top: 20px; }
            .blogs-details-page .blogs-article-block .author-box .author-categories .author-details .author-heading {
              display: none; }
            .blogs-details-page .blogs-article-block .author-box .author-categories .author-details .author-heading__tags {
              font-family: "Roboto-Regular";
              font-size: 14px;
              color: #434eba;
              font-weight: 600;
              line-height: 20px;
              max-width: calc(var(--singleGridWidth) * 4);
              flex-wrap: wrap; }
    .blogs-details-page .article-next-prev-block {
      margin: 40px 0px;
      position: relative;
      height: auto;
      width: calc(var(--singleGridWidth) * 3);
      left: 0px;
      flex-direction: column;
      gap: 0px;
      justify-content: unset;
      align-items: unset; }
      .blogs-details-page .article-next-prev-block .prev-block {
        margin-bottom: 24px;
        width: calc(var(--singleGridWidth) * 3);
        height: 72px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer; }
        .blogs-details-page .article-next-prev-block .prev-block .prev-icon {
          background: #434eba;
          width: 72px;
          height: 72px;
          display: flex;
          align-items: center;
          justify-content: center; }
          .blogs-details-page .article-next-prev-block .prev-block .prev-icon img {
            height: 14px;
            width: 14px; }
        .blogs-details-page .article-next-prev-block .prev-block .image-block {
          position: relative;
          height: 72px;
          width: calc(100% - 72px); }
          .blogs-details-page .article-next-prev-block .prev-block .image-block img {
            height: 100%;
            width: calc(100%);
            object-fit: cover; }
          .blogs-details-page .article-next-prev-block .prev-block .image-block .overlay {
            background: rgba(38, 37, 46, 0.5);
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0; }
          .blogs-details-page .article-next-prev-block .prev-block .image-block .previous-article {
            opacity: 0.7;
            position: absolute;
            top: 18px;
            left: 50%;
            transform: translate(-50%, 0%);
            width: 124px;
            font-family: "Roboto-Regular";
            font-size: 11px;
            color: #ffffff;
            font-weight: normal;
            line-height: 16px;
            letter-spacing: 0.02em;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical; }
          .blogs-details-page .article-next-prev-block .prev-block .image-block .article-title {
            position: absolute;
            top: 48px;
            left: 50%;
            transform: translate(-50%, -30%);
            width: 124px;
            font-family: "Roboto-Regular";
            font-size: 12px;
            color: #ffffff;
            font-weight: normal;
            line-height: 16px;
            letter-spacing: 0.01em;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical; }
      .blogs-details-page .article-next-prev-block .next-block {
        width: calc(var(--singleGridWidth) * 3);
        height: 72px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        margin-left: calc(var(--sideGridWidth) * 3); }
        .blogs-details-page .article-next-prev-block .next-block .prev-icon {
          background: #434eba;
          width: 72px;
          height: 72px;
          display: flex;
          align-items: center;
          justify-content: center; }
          .blogs-details-page .article-next-prev-block .next-block .prev-icon img {
            height: 14px;
            width: 14px; }
        .blogs-details-page .article-next-prev-block .next-block .image-block {
          position: relative;
          height: 72px;
          width: calc(100% - 72px); }
          .blogs-details-page .article-next-prev-block .next-block .image-block img {
            height: 100%;
            width: calc(100%);
            object-fit: cover; }
          .blogs-details-page .article-next-prev-block .next-block .image-block .overlay {
            background: rgba(38, 37, 46, 0.5);
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0; }
          .blogs-details-page .article-next-prev-block .next-block .image-block .previous-article {
            position: absolute;
            top: 18px;
            left: 50%;
            transform: translate(-50%, 0%);
            width: 124px;
            opacity: 0.7;
            font-family: "Roboto-Regular";
            font-size: 11px;
            color: #ffffff;
            font-weight: normal;
            line-height: 16px;
            letter-spacing: 0.02em;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical; }
          .blogs-details-page .article-next-prev-block .next-block .image-block .article-title {
            position: absolute;
            top: 48px;
            left: 50%;
            transform: translate(-50%, -30%);
            width: 124px;
            font-family: "Roboto-Regular";
            font-size: 12px;
            color: #ffffff;
            font-weight: normal;
            line-height: 16px;
            letter-spacing: unset;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical; }
    .blogs-details-page .other-blog-title {
      padding-left: calc(var(--sideGridWidth));
      font-family: "Roboto-Regular";
      font-size: 26px;
      color: #3C3B43;
      font-weight: normal;
      line-height: 30px;
      padding-bottom: 20px; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.career-form {
  margin-top: 90px; }
  .career-form .career-eyecatch {
    width: 100%;
    background: #ecf1f2;
    height: 671px;
    position: relative; }
    .career-form .career-eyecatch .text-block {
      position: relative;
      z-index: 1;
      padding-top: 107px;
      margin-left: var(--secondGridLeft); }
      .career-form .career-eyecatch .text-block .title {
        font-family: "Roboto-Medium";
        font-size: 60px;
        color: #26252e;
        font-weight: 500;
        line-height: 90px;
        margin: 48px 0; }
      .career-form .career-eyecatch .text-block .description {
        font-family: "Roboto-Regular";
        font-size: var(--font20);
        color: rgba(38, 37, 46, 0.7);
        font-weight: 400;
        line-height: 30px;
        letter-spacing: 0.02em;
        max-width: 496px; }
  .career-form .career-section {
    position: relative; }
    .career-form .career-section .additional-grid-block .side-grid-left {
      border-right: 1px solid #eaf1f4; }
    .career-form .career-section .additional-grid-block .side-grid-right {
      border-left: 1px solid #eaf1f4; }
    .career-form .career-section .side-title {
      left: var(--sideGridWidth);
      top: 1000px; }
    .career-form .career-section .wrap-plus {
      top: 99.5%;
      left: var(--sideGridWidth); }
  .career-form .career-description {
    position: relative;
    top: -144px;
    background: #ffffff;
    width: calc(var(--singleGridWidth) * 8);
    margin-left: var(--sideGridWidth);
    padding: 0 270px 0 224px; }
    .career-form .career-description .job-location {
      color: #434eba;
      font-family: "Roboto-Medium";
      font-size: var(--font24);
      color: #434eba;
      font-weight: 500;
      line-height: 30px;
      padding-top: 75px; }
    .career-form .career-description .job-title {
      font-family: "Roboto-Medium";
      font-size: 36px;
      color: #26252e;
      font-weight: 500;
      line-height: 60px;
      margin-top: 45px; }
    .career-form .career-description .job-description {
      font-family: "Roboto-Regular";
      font-size: 20px;
      color: rgba(38, 37, 46, 0.7);
      font-weight: 400;
      line-height: 30px;
      letter-spacing: 0.02em;
      margin-top: 48px; }
    .career-form .career-description .job-subtitle {
      font-family: "Roboto-Medium";
      font-size: 24px;
      color: #26252e;
      font-weight: 500;
      line-height: 36px;
      margin-top: 83px; }
    .career-form .career-description .job-sub-description {
      margin-top: 48px;
      font-family: "Roboto-Regular";
      font-size: 20px;
      color: rgba(38, 37, 46, 0.7);
      font-weight: 400;
      line-height: 30px; }
      .career-form .career-description .job-sub-description p {
        letter-spacing: 0.02em;
        margin-bottom: 43px; }
      .career-form .career-description .job-sub-description ul {
        margin-bottom: 43px; }
        .career-form .career-description .job-sub-description ul li {
          margin: 30px 0px;
          list-style-type: square;
          cursor: auto; }
    .career-form .career-description .job-info-link {
      font-family: "Roboto-Medium";
      font-size: 24px;
      color: #26252e;
      font-weight: 500;
      line-height: 36px;
      margin-top: 83px;
      /* And other times this */ }
      @media (max-width: 768px) {
        .career-form .career-description .job-info-link {
          font-size: 16px; } }
      .career-form .career-description .job-info-link .job-details-link:hover {
        text-decoration: underline; }
    .career-form .career-description .application-form {
      max-width: 880px;
      padding-right: 54px; }
      .career-form .career-description .application-form .form-title {
        font-family: "Roboto-Medium";
        font-size: 36px;
        color: #26252e;
        font-weight: 500;
        line-height: 60px;
        margin-bottom: 48px;
        margin-top: 83px; }
      .career-form .career-description .application-form .personal-info {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between; }
        .career-form .career-description .application-form .personal-info .input-wrapper {
          margin-bottom: 62px; }
        .career-form .career-description .application-form .personal-info input::placeholder {
          opacity: 0.7; }
        .career-form .career-description .application-form .personal-info input::-webkit-outer-spin-button,
        .career-form .career-description .application-form .personal-info input::-webkit-inner-spin-button {
          -webkit-appearance: none;
          margin: 0; }
        .career-form .career-description .application-form .personal-info input[type='number'] {
          -moz-appearance: textfield; }
      .career-form .career-description .application-form .address {
        width: 100%; }
        .career-form .career-description .application-form .address .input-wrapper {
          width: 100%; }
        .career-form .career-description .application-form .address input::placeholder {
          opacity: 0.7; }
      .career-form .career-description .application-form .offer-letter {
        margin-top: 60px; }
        .career-form .career-description .application-form .offer-letter textarea::placeholder {
          opacity: 0.7; }
      .career-form .career-description .application-form .attach-cv {
        margin-top: 86px; }
        .career-form .career-description .application-form .attach-cv .file-icon-with-text {
          height: 100px; }
    .career-form .career-description .buttons {
      max-width: 390px;
      margin-top: 83px;
      display: flex;
      justify-content: space-between; }
      .career-form .career-description .buttons .input-button-section {
        top: 0; }
        .career-form .career-description .buttons .input-button-section button {
          background: inherit;
          letter-spacing: 0.02em; }
      .career-form .career-description .buttons .cancel {
        background: #26252e; }
      .career-form .career-description .buttons .cancel,
      .career-form .career-description .buttons .apply {
        cursor: pointer; }

@media screen and (min-width: 1025px) and (max-width: calc(1366px - 1px)) {
  .career-description {
    padding: 0 170px 0 170px !important; }
  .career-form .career-description .job-description {
    font-size: var(--font20); }
  .career-form .career-description .job-sub-description p {
    font-size: var(--font20); } }

@media screen and (max-width: 1024px) {
  .career-form .career-eyecatch {
    height: 430px; }
    .career-form .career-eyecatch .text-block {
      position: relative;
      z-index: 1;
      padding-top: 72px;
      margin-left: calc(var(--secondGridLeft) - 36px); }
      .career-form .career-eyecatch .text-block .title {
        font-family: "Roboto-Medium";
        font-size: 30px;
        color: #26252e;
        font-weight: 500;
        line-height: 40px;
        margin: 30px 0; }
      .career-form .career-eyecatch .text-block .description {
        font-family: "Roboto-Regular";
        font-size: 12px;
        color: rgba(38, 37, 46, 0.7);
        font-weight: 400;
        line-height: 20px;
        max-width: 216px; }
  .career-form .career-section .wrap-plus {
    top: 99.7%;
    left: var(--sideGridWidth); }
  .career-form .career-description {
    position: relative;
    top: -89px;
    background: #ffffff;
    width: calc(var(--singleGridWidth) * 4);
    margin-left: var(--sideGridWidth);
    padding: 0 36px; }
    .career-form .career-description .job-location {
      color: #434eba;
      font-family: "Roboto-Medium";
      font-size: 14px;
      color: #434eba;
      font-weight: 500;
      line-height: 20px;
      padding-top: 36px; }
    .career-form .career-description .job-title {
      font-family: "Roboto-Medium";
      font-size: 20px;
      color: #26252e;
      font-weight: 500;
      line-height: 24px;
      margin-top: 24px; }
    .career-form .career-description .job-description {
      font-family: "Roboto-Regular";
      font-size: 12px;
      color: rgba(38, 37, 46, 0.7);
      font-weight: 400;
      line-height: 20px;
      letter-spacing: 0.02em;
      margin-top: 24px; }
    .career-form .career-description .job-subtitle {
      font-family: "Roboto-Medium";
      font-size: 14px;
      color: #26252e;
      font-weight: 500;
      line-height: 20px;
      margin-top: 36px; }
    .career-form .career-description .job-sub-description {
      margin-top: 24px; }
      .career-form .career-description .job-sub-description p {
        font-family: "Roboto-Regular";
        font-size: 12px;
        color: rgba(38, 37, 46, 0.7);
        font-weight: 400;
        line-height: 20px;
        letter-spacing: 0.02em;
        margin-bottom: 30px; }
    .career-form .career-description .application-form {
      max-width: 100%;
      padding-right: 0; }
      .career-form .career-description .application-form .form-title {
        font-family: "Roboto-Medium";
        font-size: 20px;
        color: #26252e;
        font-weight: 500;
        line-height: 24px;
        margin-bottom: 24px;
        margin-top: 48px; }
      .career-form .career-description .application-form .personal-info {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between; }
        .career-form .career-description .application-form .personal-info .input-wrapper {
          margin-bottom: 46px; }
      .career-form .career-description .application-form .address {
        width: 100%; }
        .career-form .career-description .application-form .address .input-wrapper {
          width: 100%; }
      .career-form .career-description .application-form .offer-letter {
        margin-top: 46px; }
      .career-form .career-description .application-form .attach-cv {
        margin-top: 46px; }
    .career-form .career-description .buttons {
      max-width: 100%;
      margin-top: 65px;
      display: flex;
      justify-content: space-between; }
      .career-form .career-description .buttons .input-button-section {
        top: 0;
        width: 100px;
        height: 36px; }
        .career-form .career-description .buttons .input-button-section button {
          background: inherit; }
      .career-form .career-description .buttons .cancel {
        background: #26252e; }
      .career-form .career-description .buttons .cancel,
      .career-form .career-description .buttons .apply {
        cursor: pointer; }
        .career-form .career-description .buttons .cancel button,
        .career-form .career-description .buttons .apply button {
          font-size: 12px; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.file-input-wrapper h3 {
  display: inline-block;
  font-family: "Roboto-Medium";
  font-style: normal;
  font-weight: 500;
  font-size: 24px;
  line-height: 36px;
  color: #26252e;
  margin: 17px 0; }

.file-input-wrapper .file-drop-zone {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background: #ffffff;
  opacity: 0.7;
  border: 2px dashed rgba(38, 37, 46, 0.3);
  box-sizing: border-box;
  height: 180px;
  font-size: 20px;
  padding: 13px;
  cursor: pointer; }

.file-input-wrapper .file-drop-zone-file-added {
  opacity: 1; }

.file-input-wrapper #file-input {
  display: none; }

.file-input-wrapper .file-icon-with-text {
  display: flex;
  width: 500px;
  flex-direction: column;
  align-items: center; }
  .file-input-wrapper .file-icon-with-text .file-description {
    display: inline-block;
    font-family: "Roboto-Regular";
    font-size: 20px;
    color: #ecf1f2;
    font-weight: 400;
    line-height: 30px;
    margin-top: 20px;
    letter-spacing: 0.02em; }

.file-input-wrapper .error {
  color: #ff0000;
  position: relative;
  top: 20px; }

@media screen and (max-width: 1024px) {
  .file-input-wrapper h3 {
    font-size: 14px;
    line-height: 20px; }
  .file-input-wrapper .file-icon-with-text {
    width: 90px;
    align-items: center; }
    .file-input-wrapper .file-icon-with-text img {
      width: 24px;
      height: 30px; }
    .file-input-wrapper .file-icon-with-text .file-description {
      font-family: "Roboto-Regular";
      font-size: 12px;
      color: #ecf1f2;
      font-weight: 400;
      line-height: 20px; }
  .file-input-wrapper .error {
    color: #ff0000;
    position: relative;
    top: 20px; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.career-confirmation {
  margin-top: 90px; }
  .career-confirmation .career-confirmation-eyecatch {
    width: 100%;
    background: #ecf1f2;
    height: 671px;
    position: relative; }
    .career-confirmation .career-confirmation-eyecatch .text-block {
      position: relative;
      z-index: 1;
      padding-top: 107px;
      margin-left: var(--secondGridLeft); }
      .career-confirmation .career-confirmation-eyecatch .text-block .title {
        font-family: "Roboto-Medium";
        font-size: 60px;
        color: #26252e;
        font-weight: 500;
        line-height: 90px;
        margin: 48px 0; }
      .career-confirmation .career-confirmation-eyecatch .text-block .description {
        font-family: "Roboto-Regular";
        font-size: 20px;
        color: rgba(38, 37, 46, 0.7);
        font-weight: 400;
        line-height: 30px;
        max-width: 496px; }
    .career-confirmation .career-confirmation-eyecatch .goto-toppage {
      position: absolute;
      bottom: 0;
      display: flex;
      align-items: center;
      background: #ffffff;
      height: 142px;
      width: calc(var(--singleGridWidth) * 8);
      left: var(--sideGridWidth); }
      .career-confirmation .career-confirmation-eyecatch .goto-toppage .input-button-section {
        margin-left: var(--singleGridWidth);
        top: 0; }
    .career-confirmation .career-confirmation-eyecatch .side-title {
      top: 248px;
      left: var(--sideGridWidth); }

@media screen and (max-width: 1024px) {
  .career-confirmation .career-confirmation-eyecatch {
    height: 430px;
    margin-bottom: 12px; }
    .career-confirmation .career-confirmation-eyecatch .text-block {
      position: relative;
      z-index: 1;
      padding-top: 72px;
      margin-left: calc(var(--secondGridLeft) - 36px); }
      .career-confirmation .career-confirmation-eyecatch .text-block .title {
        font-family: "Roboto-Medium";
        font-size: 30px;
        color: #26252e;
        font-weight: 500;
        line-height: 40px;
        margin: 30px 0; }
      .career-confirmation .career-confirmation-eyecatch .text-block .description {
        font-family: "Roboto-Regular";
        font-size: 12px;
        color: rgba(38, 37, 46, 0.7);
        font-weight: 400;
        line-height: 20px;
        max-width: 216px; }
    .career-confirmation .career-confirmation-eyecatch .goto-toppage {
      height: 100px;
      width: calc(var(--singleGridWidth) * 4);
      bottom: -12px; }
      .career-confirmation .career-confirmation-eyecatch .goto-toppage .input-button-section {
        top: 0;
        width: 100px;
        height: 36px;
        margin-left: calc(var(--singleGridWidth) - 30px); }
        .career-confirmation .career-confirmation-eyecatch .goto-toppage .input-button-section button {
          background: inherit;
          font-size: 12px; }
    .career-confirmation .career-confirmation-eyecatch .side-title {
      top: 180px; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.career-page .eye-catch-read-more .read-more-body .left .description .read-more-section .read-description {
  padding-right: 55px; }

@media screen and (min-width: calc(1366px)) and (max-width: calc(1440px - 1px)) {
  .career-page .eye-catch-read-more .read-more-body .left .description .read-more-section .read-description {
    padding-right: 0px; } }

@media screen and (max-width: 1024px) {
  .career-page .eye-catch-read-more .read-more-body .left .description .read-more-section .read-description {
    padding-right: 0px; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.bjit-events {
  position: relative;
  width: 100%;
  height: auto;
  margin-bottom: var(--margin166); }
  .bjit-events .wrap-plus {
    left: auto;
    right: var(--sideGridWidth);
    top: 0;
    transform: translate(48%, -50%); }
  .bjit-events .vertical-text {
    font-family: "Roboto-Medium";
    font-size: var(--font20);
    color: #26252e;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: 0.02em;
    position: absolute;
    z-index: 1;
    left: var(--sideGridWidth);
    top: 186px;
    transform: translateX(-100%) rotate(-90deg);
    transform-origin: top right; }
  .bjit-events .background-events {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 498px); }
    .bjit-events .background-events .bg-color {
      height: 100%;
      width: calc(var(--sideGridWidth) + var(--singleGridWidth) * 7);
      background: #ecf1f2; }
    .bjit-events .background-events .grid-line {
      height: 100%;
      width: 100%; }

@media screen and (max-width: 1024px) {
  .bjit-events .vertical-text {
    top: 112px;
    line-height: 18px; }
  .bjit-events .module-title-description .description {
    margin-left: 0;
    width: calc(var(--singleGridWidth) * 2); }
  .bjit-events .background-events {
    height: calc(100% - 234px); }
    .bjit-events .background-events .bg-color {
      height: 100%;
      width: calc( var(--sideGridWidth) + var(--singleGridWidth) * 3 + var(--singleGridWidth) / 2); }
    .bjit-events .background-events .grid-line .grid-five {
      display: none; } }

@media (min-width: 768px) and (max-width: 1024px) {
  .bjit-events .vertical-text {
    top: 90px; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.clients-page {
  margin-top: 90px; }
  .clients-page .agenda-items {
    display: flex; }
    .clients-page .agenda-items ul {
      margin: 0;
      padding: 0;
      margin-right: 10px;
      list-style: none; }
      .clients-page .agenda-items ul li {
        font-family: "Roboto-Regular";
        font-style: normal;
        font-weight: normal;
        letter-spacing: 0.01em;
        color: #26252e;
        font-size: 16px;
        margin-bottom: 10px; }
        .clients-page .agenda-items ul li:hover {
          cursor: pointer; }
  .clients-page .tag_text {
    display: none !important; }
  .clients-page .down-arrow {
    height: 175px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; }
    .clients-page .down-arrow svg {
      z-index: 1; }
      .clients-page .down-arrow svg path {
        stroke: #000000; }
  .clients-page .cob-our-clients {
    position: relative; }
    .clients-page .cob-our-clients .side-title {
      top: 360px;
      left: var(--sideGridWidth); }
  .clients-page .cob-testimonials {
    margin-top: var(--margin166);
    position: relative; }
    .clients-page .cob-testimonials .side-title {
      top: 305px;
      left: var(--sideGridWidth); }
  .clients-page .cob-why-choose-bjit {
    margin-top: 150px; }
    .clients-page .cob-why-choose-bjit .who-we-are-section {
      margin-bottom: var(--margin116); }
  .clients-page .cob-view-more-section {
    margin-top: 116px;
    margin-bottom: var(--margin166); }
    .clients-page .cob-view-more-section .view-more-block {
      right: calc(var(--sideGridWidth) + calc(var(--singleGridWidth) * 2)); }
  .clients-page .eye-catch-read-more .read-more-body .left .description .read-more-section .read-description {
    padding-right: 55px; }

@media screen and (min-width: 1920px) {
  .clients-page .cob-our-clients .side-title {
    top: 366px; } }

@media screen and (min-width: calc(1366px)) and (max-width: calc(1440px - 1px)) {
  .clients-page .agenda-items {
    display: flex; }
    .clients-page .agenda-items ul {
      margin: 0;
      padding: 0;
      margin-right: 10px;
      list-style: none; }
      .clients-page .agenda-items ul li {
        font-family: "Roboto-Regular";
        font-style: normal;
        font-weight: normal;
        letter-spacing: 0.01em;
        color: #26252e;
        font-size: 14px;
        margin-bottom: 10px; }
        .clients-page .agenda-items ul li:hover {
          cursor: pointer; }
  .clients-page .eye-catch-read-more .read-more-body .left .description .read-more-section .read-description {
    padding-right: 0px; }
  .clients-page .cob-our-clients .side-title {
    top: 325px; } }

@media screen and (max-width: 1024px) {
  .clients-page {
    margin-top: 72px; }
    .clients-page .agenda-items ul {
      margin-right: 57px; }
      .clients-page .agenda-items ul:last-child {
        margin-right: 0; }
      .clients-page .agenda-items ul li {
        font-size: 12px; }
        .clients-page .agenda-items ul li a {
          font-size: 12px; }
    .clients-page .down-arrow {
      height: 72px; }
      .clients-page .down-arrow svg {
        width: 16px;
        height: 22px;
        z-index: 1; }
        .clients-page .down-arrow svg path {
          stroke: #000000; }
    .clients-page .cob-testimonials {
      margin-top: 60px; }
    .clients-page .cob-why-choose-bjit {
      margin-top: 0; }
      .clients-page .cob-why-choose-bjit .who-we-are-section {
        margin-top: 0; }
    .clients-page .cob-view-more-section {
      margin-top: 158px;
      margin-bottom: 0; }
      .clients-page .cob-view-more-section .view-more-block {
        left: calc(var(--sideGridWidth) + calc(var(--singleGridWidth) * 0.5)); }
    .clients-page .cob-our-clients .side-title {
      display: none; }
    .clients-page .cob-our-clients .wrap-ourclients .wrap-plus {
      display: none; }
    .clients-page .cob-our-clients .wrap-ourclients .section-header .header-title {
      width: calc(var(--singleGridWidth) * 3); }
    .clients-page .eye-catch-read-more .read-more-body .left .description .read-more-section .read-description {
      padding-right: 0px; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.contact-page {
  margin-top: 90px;
  position: relative; }
  .contact-page .agenda-items {
    display: flex; }
    .contact-page .agenda-items ul {
      margin: 0;
      padding: 0;
      margin-right: 10px; }
      .contact-page .agenda-items ul li {
        list-style: none;
        font-size: var(--font16);
        line-height: 24px; }
        .contact-page .agenda-items ul li:hover {
          cursor: default; }
  .contact-page .down-arrow {
    height: 175px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; }
    .contact-page .down-arrow svg {
      z-index: 1;
      width: 22px;
      height: 31px; }
      .contact-page .down-arrow svg path {
        stroke: #000000; }

@media screen and (max-width: 1024px) {
  .contact-page {
    margin-top: 72px; }
    .contact-page .eye-catch-basic {
      height: 300px; }
    .contact-page .agenda-items {
      justify-content: space-between; }
      .contact-page .agenda-items ul {
        flex-basis: 110px;
        margin-right: 0; }
        .contact-page .agenda-items ul li {
          font-size: 12px;
          line-height: 16px;
          margin-bottom: 15px; }
    .contact-page .down-arrow {
      height: 90px; }
      .contact-page .down-arrow svg {
        width: 16px;
        height: 22px; }
    .contact-page .eye-catch-read-more .read-more-body .right {
      padding: 24px 10px 0 24px; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.contact-confirm-message {
  position: relative;
  height: auto; }
  .contact-confirm-message .side-title {
    position: absolute;
    left: 4.1%;
    z-index: 2;
    font-family: "Roboto-Medium";
    font-style: normal;
    top: 910px;
    font-weight: 500;
    font-size: 20px;
    letter-spacing: 0.02em;
    color: #000000;
    transform: translateX(calc(-50% + 15px)) rotate(-90deg); }
  .contact-confirm-message .content-section {
    position: relative;
    width: 100%;
    height: 821px; }
    .contact-confirm-message .content-section .fixedPosition {
      position: fixed !important;
      top: -10px !important; }
    .contact-confirm-message .content-section .fadeOut {
      opacity: 0 !important; }
    .contact-confirm-message .content-section .content-body {
      position: absolute;
      left: calc(4.1% + calc(91.8%/ 8));
      height: 100%;
      width: calc(100% - calc(calc(4.1% + calc(91.8%/ 8)) * 2));
      padding-top: 215px;
      z-index: 1; }
      .contact-confirm-message .content-section .content-body .bold-line {
        position: relative;
        width: 114px;
        height: 7px;
        background-color: #000000;
        margin-top: -15px; }
      .contact-confirm-message .content-section .content-body .title-section {
        position: relative;
        padding-top: 50px; }
        .contact-confirm-message .content-section .content-body .title-section .title {
          font-family: "Roboto-Medium";
          font-style: normal;
          font-weight: 500;
          font-size: 60px;
          line-height: 90px;
          color: #000000; }
      .contact-confirm-message .content-section .content-body .text {
        margin-top: 66px;
        width: calc(100% / 2);
        position: relative;
        font-family: "Roboto-Regular";
        font-style: normal;
        font-weight: normal;
        font-size: 20px;
        line-height: 30px;
        display: flex;
        align-items: center;
        letter-spacing: 0.02em;
        color: #26252e;
        opacity: 0.6; }
    .contact-confirm-message .content-section .bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #ecf1f2; }
  .contact-confirm-message .form-section {
    position: relative;
    width: var(--midileGridWidth);
    height: 633px;
    margin-bottom: 1px; }
    .contact-confirm-message .form-section .form-body {
      position: absolute;
      bottom: 0px;
      left: var(--sideGridWidth);
      width: var(--midileGridWidth);
      height: 935px;
      background-color: #ffffff;
      z-index: 1;
      padding-top: 45px;
      border-left: 1px solid #ecf1f2;
      border-right: 1px solid #ecf1f2; }
      .contact-confirm-message .form-section .form-body .input-row-section {
        margin-left: calc(91.8vw / 8);
        width: calc(calc(91.8vw / 8) * 5);
        display: flex;
        justify-content: space-between;
        margin-bottom: 45px; }
        .contact-confirm-message .form-section .form-body .input-row-section:nth-child(3) {
          margin-bottom: 83px; }
        .contact-confirm-message .form-section .form-body .input-row-section .field-website input,
        .contact-confirm-message .form-section .form-body .input-row-section .field-phone input {
          opacity: 10%; }
        .contact-confirm-message .form-section .form-body .input-row-section .field-name input,
        .contact-confirm-message .form-section .form-body .input-row-section .field-email input,
        .contact-confirm-message .form-section .form-body .input-row-section .field-message input {
          opacity: 70%; }
        .contact-confirm-message .form-section .form-body .input-row-section .filed-section {
          width: 45%; }
          .contact-confirm-message .form-section .form-body .input-row-section .filed-section h4 {
            font-family: "Roboto-Medium";
            font-style: normal;
            font-weight: 500;
            font-size: 24px;
            line-height: 36px;
            color: #26252e;
            margin: 17px 0; }
          .contact-confirm-message .form-section .form-body .input-row-section .filed-section input {
            width: 100%;
            background: #ffffff;
            opacity: 0.3;
            border: 1px solid #26252e;
            box-sizing: border-box;
            height: 59px;
            padding: 13px;
            font-size: var(--font20);
            line-height: 30px;
            color: #26252e; }
          .contact-confirm-message .form-section .form-body .input-row-section .filed-section input::placeholder {
            font-family: "Roboto-Regular";
            font-style: normal;
            font-weight: normal;
            font-size: 20px;
            line-height: 30px;
            letter-spacing: 0.02em;
            color: #26252e;
            opacity: 0.1; }
          .contact-confirm-message .form-section .form-body .input-row-section .filed-section .error {
            color: #ff0000;
            position: relative;
            top: 10px; }
        .contact-confirm-message .form-section .form-body .input-row-section .input-textarea-section {
          width: 100%; }
          .contact-confirm-message .form-section .form-body .input-row-section .input-textarea-section h4 {
            font-family: "Roboto-Medium";
            font-style: normal;
            font-weight: 500;
            font-size: 24px;
            line-height: 36px;
            color: #26252e;
            margin: 17px 0; }
          .contact-confirm-message .form-section .form-body .input-row-section .input-textarea-section textarea {
            width: 100%;
            background: #ffffff;
            opacity: 50%;
            border: 1px solid #26252e;
            box-sizing: border-box;
            height: 180px;
            padding: 13px;
            resize: none;
            font-size: var(--font20);
            line-height: 30px;
            color: #26252e; }
          .contact-confirm-message .form-section .form-body .input-row-section .input-textarea-section textarea::placeholder {
            font-family: "Roboto-Medium";
            font-style: normal;
            font-weight: normal;
            font-size: 20px;
            line-height: 30px;
            letter-spacing: 0.02em;
            color: #26252e;
            opacity: 0.1; }
          .contact-confirm-message .form-section .form-body .input-row-section .input-textarea-section .error {
            color: #ff0000;
            position: relative;
            top: 10px; }
          .contact-confirm-message .form-section .form-body .input-row-section .input-textarea-section .submit-button {
            width: 390px;
            height: 90px;
            float: right;
            display: flex;
            justify-content: space-between; }
        .contact-confirm-message .form-section .form-body .input-row-section .input-button-section {
          position: relative;
          top: 51px;
          height: 60px;
          width: 180px;
          display: flex;
          justify-content: center;
          background-color: #434eba;
          overflow: hidden;
          outline: none; }
          .contact-confirm-message .form-section .form-body .input-row-section .input-button-section span {
            height: 100%; }
          .contact-confirm-message .form-section .form-body .input-row-section .input-button-section button {
            font-family: "Roboto-Regular";
            font-size: 20px;
            height: 100%;
            color: #ffffff;
            background-color: #434eba;
            border: 0px; }
      .contact-confirm-message .form-section .form-body .submit-button-area {
        margin-left: calc(1240px / 8);
        width: calc(calc(1240px / 8) * 5);
        margin-bottom: 45px;
        display: flex;
        justify-content: flex-end; }
        .contact-confirm-message .form-section .form-body .submit-button-area .buttons {
          width: 390px;
          margin-top: 0px;
          display: flex;
          justify-content: space-between; }
          .contact-confirm-message .form-section .form-body .submit-button-area .buttons .input-button-section {
            top: 0; }
            .contact-confirm-message .form-section .form-body .submit-button-area .buttons .input-button-section button {
              background: inherit; }
          .contact-confirm-message .form-section .form-body .submit-button-area .buttons .cancel {
            background: #26252e; }
          .contact-confirm-message .form-section .form-body .submit-button-area .buttons .cancel,
          .contact-confirm-message .form-section .form-body .submit-button-area .buttons .apply {
            cursor: pointer; }
  .contact-confirm-message .wrap-plus {
    top: 99%;
    bottom: 0;
    z-index: 2;
    left: var(--sideGridWidth); }
  .contact-confirm-message .disabled-input {
    background: #ecf1f2 !important;
    pointer-events: none;
    cursor: not-allowed; }

@media screen and (min-width: 1440px) {
  .contact-confirm-message {
    position: relative;
    height: auto; }
    .contact-confirm-message .side-title {
      left: calc(calc(100% - 1320px) / 2); }
    .contact-confirm-message .content-section .content-body {
      left: calc( calc(calc(100% - 1320px) / 2) + calc(1320px/ 8));
      width: calc(100% - calc(calc( calc(calc(100% - 1320px) / 2) + calc(1320px/ 8)) * 2)); }
    .contact-confirm-message .form-section .form-body {
      bottom: -2px;
      width: var(--midileGridWidth);
      padding-left: 65px; }
      .contact-confirm-message .form-section .form-body .input-row-section {
        margin-left: calc(1320px/ 8);
        width: calc(calc(1320px/ 8) * 5); }
      .contact-confirm-message .form-section .form-body .submit-button-area {
        margin-left: calc(1320px/ 8);
        width: calc(calc(1320px/ 8) * 5);
        margin-bottom: 45px;
        display: flex;
        justify-content: flex-end; }
    .contact-confirm-message .wrap-plus {
      top: 99.1%; }
  .plus-icon {
    left: calc(calc(calc(100vw - 1320px) / 2) + 165px); } }

@media screen and (min-width: 1366px) and (max-width: calc(1440px - 1px)) {
  .contact-confirm-message {
    position: relative;
    height: auto; }
    .contact-confirm-message .side-title {
      left: calc(calc(100% - 1240px) / 2);
      top: 910px;
      font-size: 18px;
      padding-top: 10px; }
    .contact-confirm-message .bg {
      height: 718px; }
    .contact-confirm-message .content-section {
      height: 793px; }
      .contact-confirm-message .content-section .fixedPosition {
        top: -20px !important; }
      .contact-confirm-message .content-section .content-body {
        left: calc( calc(calc(100% - 1240px) / 2) + calc(1240px/ 8));
        width: calc(100% - calc(calc( calc(calc(100% - 1240px) / 2) + calc(1240px/ 8)) * 2)); }
        .contact-confirm-message .content-section .content-body .bold-line {
          width: 110px; }
        .contact-confirm-message .content-section .content-body .title-section {
          padding-top: 42px; }
          .contact-confirm-message .content-section .content-body .title-section .title {
            font-size: 58px; }
        .contact-confirm-message .content-section .content-body .text {
          margin-top: 46px;
          font-size: 18px; }
    .contact-confirm-message .form-section {
      height: 615px; }
      .contact-confirm-message .form-section .form-body {
        bottom: -2px;
        width: var(--midileGridWidth);
        padding-left: 65px; }
        .contact-confirm-message .form-section .form-body .input-row-section {
          margin-left: calc(1240px/ 8);
          width: calc(calc(1240px/ 8) * 5); }
          .contact-confirm-message .form-section .form-body .input-row-section .filed-section h4 {
            font-size: 22px; }
          .contact-confirm-message .form-section .form-body .input-row-section .filed-section input::placeholder {
            font-size: 18px; }
          .contact-confirm-message .form-section .form-body .input-row-section .input-textarea-section {
            width: 100%; }
            .contact-confirm-message .form-section .form-body .input-row-section .input-textarea-section h4 {
              font-size: 22px; }
            .contact-confirm-message .form-section .form-body .input-row-section .input-textarea-section textarea::placeholder {
              font-size: 18px; }
        .contact-confirm-message .form-section .form-body .submit-button-area {
          margin-left: calc(1240px / 8);
          width: calc(calc(1240px / 8) * 5);
          margin-bottom: 45px;
          display: flex;
          justify-content: flex-end; }
          .contact-confirm-message .form-section .form-body .submit-button-area .input-button-section button {
            font-size: 18px; }
    .contact-confirm-message .wrap-plus {
      top: 99.1%; }
  .plus-icon {
    left: calc(calc(calc(100% - 1240px) / 2) + calc(1240px/ 8)); } }

@media screen and (max-width: 1024px) {
  .contact-confirm-message .side-title {
    font-size: 12px;
    line-height: 18px;
    top: 718px; }
  .contact-confirm-message .content-section {
    height: 463px; }
    .contact-confirm-message .content-section .content-body {
      padding-top: 162px; }
      .contact-confirm-message .content-section .content-body .bold-line {
        width: 60px; }
      .contact-confirm-message .content-section .content-body .title-section {
        position: relative;
        padding-top: 20px; }
        .contact-confirm-message .content-section .content-body .title-section .title {
          font-size: 30px;
          line-height: 40px; }
      .contact-confirm-message .content-section .content-body .text {
        font-weight: 400;
        font-size: 12px;
        line-height: 20px;
        opacity: 0.7;
        width: 216px;
        margin-top: 24px; }
  .contact-confirm-message .form-section {
    height: 729px; }
    .contact-confirm-message .form-section .form-body {
      padding-top: 13px;
      bottom: -60px; }
      .contact-confirm-message .form-section .form-body .input-row-section {
        height: auto;
        flex-direction: column;
        width: calc(100% - 71px - 18px);
        margin-bottom: 0; }
        .contact-confirm-message .form-section .form-body .input-row-section .filed-section {
          width: 100%;
          margin-bottom: 27px; }
          .contact-confirm-message .form-section .form-body .input-row-section .filed-section h4 {
            font-weight: 400;
            font-size: 14px;
            line-height: 20px; }
          .contact-confirm-message .form-section .form-body .input-row-section .filed-section input {
            height: 40px; }
          .contact-confirm-message .form-section .form-body .input-row-section .filed-section input::placeholder {
            font-size: 12px;
            line-height: 20px; }
          .contact-confirm-message .form-section .form-body .input-row-section .filed-section .error {
            top: -2px;
            font-size: 10px; }
        .contact-confirm-message .form-section .form-body .input-row-section .input-textarea-section {
          width: 100%; }
          .contact-confirm-message .form-section .form-body .input-row-section .input-textarea-section h4 {
            font-size: 14px;
            line-height: 20px; }
          .contact-confirm-message .form-section .form-body .input-row-section .input-textarea-section textarea {
            height: 100px;
            overflow: scroll; }
          .contact-confirm-message .form-section .form-body .input-row-section .input-textarea-section textarea::placeholder {
            font-size: 14px;
            line-height: 20px; }
          .contact-confirm-message .form-section .form-body .input-row-section .input-textarea-section .error {
            top: -2px;
            font-size: 10px; }
        .contact-confirm-message .form-section .form-body .input-row-section .input-button-section {
          height: 36px;
          width: 100px;
          position: relative;
          top: 0;
          margin-top: 60px; }
          .contact-confirm-message .form-section .form-body .input-row-section .input-button-section .marquee {
            width: 100%; }
          .contact-confirm-message .form-section .form-body .input-row-section .input-button-section button {
            font-size: 12px; }
      .contact-confirm-message .form-section .form-body .submit-button-area {
        height: auto;
        flex-direction: column;
        margin-left: 71px;
        width: calc(100% - 71px - 18px);
        margin-bottom: 0;
        margin-top: 30px;
        height: 36px; }
        .contact-confirm-message .form-section .form-body .submit-button-area .buttons {
          width: 216px;
          margin-top: 20px;
          display: flex;
          justify-content: space-between;
          height: 36px; }
          .contact-confirm-message .form-section .form-body .submit-button-area .buttons .input-button-section {
            width: 100px;
            top: 0px;
            height: 36px; }
            .contact-confirm-message .form-section .form-body .submit-button-area .buttons .input-button-section button {
              background: inherit;
              font-size: 12px;
              padding: 0px;
              height: 36px; }
          .contact-confirm-message .form-section .form-body .submit-button-area .buttons .cancel {
            background: #26252e; }
          .contact-confirm-message .form-section .form-body .submit-button-area .buttons .cancel,
          .contact-confirm-message .form-section .form-body .submit-button-area .buttons .apply {
            cursor: pointer; }
  .contact-confirm-message .wrap-plus {
    top: 99.4%;
    left: var(--sideGridWidth); } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.faq-page {
  margin-top: 90px;
  position: relative; }
  .faq-page .agenda-items {
    display: flex; }
    .faq-page .agenda-items ul {
      margin: 0;
      padding: 0;
      margin-right: 10px; }
      .faq-page .agenda-items ul li {
        list-style: none;
        font-size: var(--font16);
        line-height: 25px; }
        .faq-page .agenda-items ul li:hover {
          cursor: pointer; }
  .faq-page .down-arrow {
    height: var(--margin166);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; }
    .faq-page .down-arrow svg {
      z-index: 1;
      width: 22px;
      height: 31px; }
      .faq-page .down-arrow svg path {
        stroke: #000000; }
  .faq-page .faq-section {
    margin-top: 0; }
  .faq-page .eye-catch-read-more .read-more-body .left .description .read-more-section .read-description {
    padding-right: 55px; }

@media screen and (min-width: calc(1366px)) and (max-width: calc(1440px - 1px)) {
  .faq-page .eye-catch-read-more .read-more-body .left .description .read-more-section .read-description {
    padding-right: 0px; } }

@media screen and (max-width: 1024px) {
  .faq-page {
    margin-top: 72px; }
    .faq-page .eye-catch-basic {
      height: 300px; }
    .faq-page .agenda-items {
      justify-content: space-between; }
      .faq-page .agenda-items ul {
        flex-basis: 110px;
        margin-right: 0; }
        .faq-page .agenda-items ul li {
          font-size: 12px;
          line-height: 16px;
          margin-bottom: 15px; }
    .faq-page .down-arrow {
      height: 90px; }
      .faq-page .down-arrow svg {
        width: 16px;
        height: 22px; }
    .faq-page .eye-catch-read-more .read-more-body .right {
      padding: 24px 10px 0 24px; }
    .faq-page .eye-catch-read-more .read-more-body .left .description .read-more-section .read-description {
      padding-right: 0px; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.global-office-details {
  position: relative; }
  .global-office-details .breadcrumb-area {
    position: relative;
    padding-left: var(--secondGridLeft);
    display: flex;
    align-items: center;
    z-index: 2;
    background-color: #434eba;
    height: 139px; }
    .global-office-details .breadcrumb-area .breadcrumb-details {
      display: flex;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #ffffff;
      width: calc(100% - calc(var(--secondGridLeft))); }
      .global-office-details .breadcrumb-area .breadcrumb-details a {
        color: #ffffff; }
  .global-office-details .eye-catch-details {
    height: 660px;
    position: relative;
    background-size: cover; }
    .global-office-details .eye-catch-details .shadow {
      position: absolute;
      background: #26252e;
      opacity: 0.5;
      height: inherit;
      width: 100%;
      top: 0;
      right: 0;
      z-index: 1; }
    .global-office-details .eye-catch-details .eye-catch-body {
      z-index: 2;
      position: relative; }
      .global-office-details .eye-catch-details .eye-catch-body .vertical-text {
        position: absolute;
        left: var(--sideGridWidth);
        top: 34px;
        font-family: "Roboto-Medium";
        font-size: 20px;
        color: #ffffff;
        font-weight: 500;
        line-height: 32px;
        font-style: normal;
        letter-spacing: 0.02em;
        transform: rotate(-90deg);
        transform-origin: left top; }
      .global-office-details .eye-catch-details .eye-catch-body .details-title {
        position: relative;
        left: var(--secondGridLeft);
        top: 202px;
        font-family: "Roboto-Bold";
        font-style: normal;
        font-family: "Roboto-Medium";
        font-size: 59px;
        color: #ffffff;
        font-weight: 500;
        line-height: 69px;
        display: flex;
        align-items: center;
        color: #ffffff;
        display: flex;
        align-items: center;
        width: calc((var(--singleGridWidth) * 3) + 50px);
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden; }
      .global-office-details .eye-catch-details .eye-catch-body .details-description {
        position: absolute;
        width: 496px;
        height: 60px;
        left: var(--secondGridLeft);
        top: 350px;
        font-family: "Roboto-Regular";
        font-size: 20px;
        color: #ffffff;
        font-weight: 400;
        line-height: 30px;
        font-style: normal;
        display: flex;
        align-items: center;
        letter-spacing: 0.02em;
        opacity: 0.7; }
      .global-office-details .eye-catch-details .eye-catch-body .searvice-area {
        position: absolute;
        height: 60px;
        left: var(--secondGridLeft);
        top: 176px;
        font-style: normal;
        width: calc((var(--singleGridWidth) * 2) + 50px); }
        .global-office-details .eye-catch-details .eye-catch-body .searvice-area .list {
          width: 100%;
          font-family: "Roboto-Regular";
          font-size: 16px;
          color: #ffffff;
          font-weight: 400;
          line-height: 30px;
          letter-spacing: 0.01em;
          position: relative; }
      .global-office-details .eye-catch-details .eye-catch-body .area-item-diamond {
        display: block;
        width: 21.22px;
        height: 21.21px;
        transform: rotate(-45deg) !important;
        position: absolute;
        background: #434eba;
        top: 6px;
        left: -35px; }
  .global-office-details .drop-down-bottom {
    position: absolute;
    bottom: 0px;
    left: calc(50% - 31px);
    width: 60px;
    height: 60px;
    cursor: pointer;
    z-index: 3; }
    .global-office-details .drop-down-bottom img {
      object-fit: cover;
      border: 0;
      cursor: pointer;
      background-color: #7d7c82; }

@media screen and (min-width: 1025px) and (max-width: calc(1366px - 1px)) {
  .global-office-details .eye-catch-details .eye-catch-body .details-title {
    font-family: "Roboto-Medium";
    font-size: 56px;
    color: #ffffff;
    font-weight: 500;
    line-height: 69px; }
  .global-office-details .eye-catch-details .eye-catch-body .details-description {
    font-size: var(--font20) !important; } }

@media screen and (max-width: 1024px) {
  .global-office-details {
    position: relative; }
    .global-office-details .breadcrumb-area {
      padding-left: calc(var(--secondGridLeft));
      height: 80px;
      width: 100%;
      z-index: 2; }
      .global-office-details .breadcrumb-area .breadcrumb-details {
        width: calc((var(--singleGridWidth) * 3) - 10px);
        display: flex;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #ffffff; }
        .global-office-details .breadcrumb-area .breadcrumb-details a {
          color: #ffffff; }
    .global-office-details .eye-catch-details {
      height: 300px; }
      .global-office-details .eye-catch-details .eye-catch-body .vertical-text {
        position: absolute;
        left: calc(var(--sideGridWidth));
        top: 30px;
        font-family: "Roboto-Medium";
        font-size: 12px;
        color: #ffffff;
        font-weight: 500;
        line-height: 18px;
        font-style: normal;
        letter-spacing: 0.02em;
        transform: rotate(-90deg);
        transform-origin: left top; }
      .global-office-details .eye-catch-details .eye-catch-body .details-title {
        position: absolute;
        left: var(--secondGridLeft);
        top: 77px;
        font-family: "Roboto-Bold";
        font-size: 30px;
        color: #ffffff;
        font-weight: 700;
        line-height: 35px;
        font-style: normal;
        display: flex;
        align-items: center;
        width: calc((var(--singleGridWidth) * 3));
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        overflow: hidden; }
      .global-office-details .eye-catch-details .eye-catch-body .details-description {
        position: absolute;
        left: var(--secondGridLeft);
        top: 140px;
        width: calc((var(--singleGridWidth) * 3));
        font-family: "Roboto-Regular";
        font-size: 12px;
        color: #ffffff;
        font-weight: 400;
        line-height: 20px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        text-overflow: ellipsis; }
      .global-office-details .eye-catch-details .eye-catch-body .searvice-area {
        display: none; }
      .global-office-details .eye-catch-details .eye-catch-body .area-item-diamond {
        display: none; }
    .global-office-details .drop-down-bottom {
      position: absolute;
      bottom: 0px;
      left: calc(50% - 19px);
      width: 36px;
      height: 36px;
      cursor: pointer;
      z-index: 3; }
      .global-office-details .drop-down-bottom img {
        object-fit: cover;
        border: 0;
        cursor: pointer;
        width: 36px;
        height: 36px; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.global-office-page {
  margin-top: 90px;
  height: auto;
  position: relative;
  z-index: 1; }

.go-country-block {
  height: 400px;
  background: #ecf1f2;
  position: relative;
  margin-top: 166px;
  margin-bottom: 91px; }

.go-top-line {
  width: 113px;
  background: #000000;
  height: 7px;
  position: relative;
  left: var(--secondGridLeft);
  top: 109px; }

.go-country-name {
  font-family: "Roboto-Medium";
  font-size: 60px;
  color: #000000;
  font-weight: 500;
  line-height: 90px;
  position: relative;
  left: var(--secondGridLeft);
  top: 167px;
  width: calc(var(--singleGridWidth) * 4);
  z-index: 4; }

.go-next-prev-slider {
  position: absolute;
  width: calc(var(--singleGridWidth));
  right: var(--secondGridLeft);
  top: 163px;
  display: flex;
  align-items: center;
  height: 83px; }

.go-previous-icon {
  z-index: 4;
  height: 100%;
  opacity: 0.8;
  width: calc(var(--singleGridWidth) / 2);
  background: #26252e;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transform: rotate(180deg); }
  .go-previous-icon:hover {
    opacity: 1; }

.go-next-icon {
  z-index: 4;
  height: 100%;
  width: calc(var(--singleGridWidth) / 2);
  background: #26252e;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.8; }
  .go-next-icon:hover {
    opacity: 1; }

.go-content-block {
  display: block;
  position: relative; }

.go-location-name {
  font-family: "Roboto-Medium";
  font-size: 36px;
  color: #26252e;
  font-weight: 500;
  line-height: 60px;
  position: relative;
  left: var(--secondGridLeft);
  top: 0px;
  width: calc(var(--singleGridWidth) * 6); }

.go-description {
  font-family: "Roboto-Regular";
  font-size: var(--font20);
  color: #26252e;
  font-weight: normal;
  line-height: 30px;
  position: relative;
  left: var(--secondGridLeft);
  top: 30px;
  width: calc(var(--singleGridWidth) * 6);
  opacity: 0.7;
  margin-bottom: 90px; }

.go-contact-information {
  height: auto;
  left: var(--secondGridLeft);
  display: flex;
  width: calc(var(--singleGridWidth) * 6);
  position: relative; }

.go-contact-information-title {
  position: relative;
  font-family: "Roboto-Medium";
  font-size: var(--font24);
  color: #26252e;
  font-weight: 500;
  line-height: 28px;
  padding-bottom: 60px; }

.go-left-side {
  position: relative;
  font-family: "Roboto-Regular";
  font-size: var(--font20);
  color: #26252e;
  font-weight: normal;
  line-height: 30px;
  height: 100%;
  width: calc(var(--singleGridWidth) * 3); }

.go-contact-information-option {
  display: flex;
  height: auto;
  padding-bottom: 30px; }

.go-option-label {
  width: var(--singleGridWidth);
  letter-spacing: 0.02em;
  font-family: "Roboto-Regular";
  font-size: var(--font20);
  color: #26252e;
  font-weight: normal;
  line-height: 30px; }

.go-option-description {
  width: calc(var(--singleGridWidth) * 1.2);
  letter-spacing: 0.02em;
  font-family: "Roboto-Regular";
  font-size: var(--font20);
  color: #26252e;
  font-weight: normal;
  line-height: 30px;
  opacity: 0.5; }

.go-bjit-text {
  text-shadow: -1px -1px 0 rgba(38, 37, 46, 0.05), 1px -1px 0 rgba(38, 37, 46, 0.05), -1px 1px 0 rgba(38, 37, 46, 0.05), 1px 1px 0 rgba(38, 37, 46, 0.05);
  font-family: "Roboto-Regular";
  font-size: 400px;
  color: #ffffff;
  font-weight: normal;
  line-height: 130px;
  position: absolute;
  transform: rotate(-90deg);
  top: 370px;
  left: -106px;
  z-index: -1; }

.go-right-side {
  height: 100%;
  width: calc(var(--singleGridWidth) * 3);
  position: relative;
  max-width: 100%; }

.go-address-map-block {
  margin-top: 50px;
  position: relative; }

.go-local-team-block {
  position: relative;
  padding-top: 124px;
  padding-bottom: var(--margin166);
  width: 100%;
  overflow: hidden; }

.contactus {
  font-family: "Roboto-Medium";
  font-size: var(--font20);
  color: #26252e;
  font-weight: 500;
  line-height: 32px;
  width: 120px;
  position: relative;
  transform: rotate(-90deg);
  left: calc(var(--sideGridWidth) - 42px);
  top: 540px;
  letter-spacing: 0.02em; }

.local-team {
  font-family: "Roboto-Medium";
  font-size: var(--font24);
  color: #26252e;
  font-weight: 500;
  line-height: 36px;
  position: relative;
  left: var(--secondGridLeft);
  width: calc(var(--singleGridWidth) * 2); }

.local-stroke {
  text-shadow: -1px -1px 0 #ecf1f2, 1px -1px 0 #ecf1f2, -1px 1px 0 #ecf1f2, 1px 1px 0 #ecf1f2;
  font-family: "Roboto-Regular";
  font-size: 240px;
  color: #ffffff;
  font-weight: normal;
  line-height: 200px;
  z-index: -1;
  position: absolute;
  left: -20px; }

.desktop-view {
  display: block !important; }

.sp-team {
  display: none; }

.top-team {
  height: auto;
  margin-top: 90px;
  display: flex !important;
  position: relative;
  justify-content: flex-start;
  left: calc(var(--singleGridWidth) / 2 + var(--sideGridWidth));
  width: calc(var(--singleGridWidth) * 5 + var(--singleGridWidth) / 2); }

.team {
  width: var(--singleGridWidth);
  margin-right: calc(var(--singleGridWidth) / 2); }

.bg-photo {
  width: var(--singleGridWidth);
  height: var(--singleGridWidth);
  background-color: #ecf1f2;
  font-size: initial;
  background-color: #7d7c82; }
  .bg-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover; }

.team-name {
  font-family: "Roboto-Regular";
  font-size: var(--font24);
  color: #26252e;
  font-weight: normal;
  line-height: 40px;
  padding-top: 20px;
  width: calc(var(--singleGridWidth) * 1.4); }

.team-designation {
  font-family: "Roboto-Regular";
  font-size: var(--font20);
  color: #26252e;
  font-weight: normal;
  line-height: 30px;
  padding-top: 20px;
  letter-spacing: 0.02em;
  opacity: 0.7;
  font-size: 20px; }

.bottom-team {
  height: auto;
  margin-top: 90px;
  display: flex !important;
  position: relative;
  justify-content: flex-start;
  left: calc(var(--singleGridWidth) * 1.5 + var(--sideGridWidth));
  width: calc(var(--singleGridWidth) * 5 + var(--singleGridWidth) / 2); }

.team-stroke {
  text-shadow: -1px -1px 0 #ecf1f2, 1px -1px 0 #ecf1f2, -1px 1px 0 #ecf1f2, 1px 1px 0 #ecf1f2;
  font-family: "Roboto-Regular";
  font-size: 240px;
  color: #ffffff;
  font-weight: normal;
  line-height: 200px;
  z-index: -1;
  position: absolute;
  right: -60px;
  bottom: 240px; }

.go-bottom-line {
  height: 2px;
  width: var(--singleGridWidth);
  position: relative;
  left: var(--sideGridWidth);
  margin-top: 116px;
  border-bottom: 2px solid rgba(38, 37, 46, 0.2); }

@media screen and (min-width: 1025px) and (max-width: calc(1366px - 1px)) {
  .team-designation {
    font-size: var(--font20); } }

@media screen and (min-width: calc(1366px)) and (max-width: calc(1440px - 1px)) {
  .desktop-view {
    font-size: 224px; } }

@media screen and (max-width: 1024px) {
  .global-office-page {
    margin-top: 72px;
    position: relative;
    z-index: 1; }
  .go-country-block {
    height: 238px;
    background: #ecf1f2;
    position: relative;
    margin-top: 72px;
    margin-bottom: 48px; }
  .go-top-line {
    width: 50px;
    background: #000000;
    height: 7px;
    position: relative;
    left: var(--secondGridLeft);
    top: 72px; }
  .go-country-name {
    font-family: "Roboto-Regular";
    font-size: 30px;
    color: #000000;
    font-weight: normal;
    line-height: 40px;
    position: relative;
    left: var(--secondGridLeft);
    top: 102px;
    width: calc(var(--singleGridWidth) * 3); }
  .go-next-prev-slider {
    position: absolute;
    width: calc(var(--singleGridWidth));
    left: var(--secondGridLeft);
    right: unset;
    top: 170px;
    display: flex;
    align-items: center;
    height: 36px; }
  .go-previous-icon {
    z-index: 4;
    height: 100%;
    width: calc(var(--singleGridWidth) / 2);
    background: #26252e;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer; }
    .go-previous-icon img {
      height: 16px;
      width: 16px; }
  .go-next-icon {
    z-index: 4;
    height: 100%;
    width: calc(var(--singleGridWidth) / 2);
    background: #26252e;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer; }
    .go-next-icon:hover {
      opacity: 0.8; }
    .go-next-icon img {
      height: 16px;
      width: 16px; }
  .go-content-block {
    display: block;
    position: relative;
    z-index: 2; }
  .go-location-name {
    font-family: "Roboto-Regular";
    font-size: var(--font20);
    color: #26252e;
    font-weight: normal;
    line-height: 24px;
    position: relative;
    left: var(--secondGridLeft);
    top: 0px;
    width: calc(var(--singleGridWidth) * 3); }
  .go-description {
    font-family: "Roboto-Regular";
    font-size: 12px;
    color: #26252e;
    font-weight: normal;
    line-height: 20px;
    position: relative;
    left: var(--secondGridLeft);
    top: 30px;
    width: calc(var(--singleGridWidth) * 3);
    opacity: 0.7;
    margin-bottom: 48px;
    letter-spacing: 0.02em; }
  .go-contact-information {
    height: auto;
    left: var(--secondGridLeft);
    display: block;
    width: calc(var(--singleGridWidth) * 3);
    position: relative; }
  .go-left-side {
    position: relative;
    font-family: "Roboto-Regular";
    font-size: var(--font20);
    color: #26252e;
    font-weight: normal;
    line-height: 30px;
    height: auto;
    margin-bottom: 70px;
    width: calc(var(--singleGridWidth) * 3); }
  .go-contact-information-title {
    position: relative;
    font-family: "Roboto-Regular";
    font-size: 14px;
    color: #26252e;
    font-weight: 600;
    line-height: 20px;
    padding-bottom: 30px; }
  .go-contact-information-option {
    display: flex;
    height: auto;
    padding-bottom: 10px; }
  .go-option-label {
    width: var(--singleGridWidth);
    letter-spacing: 0.02em;
    font-family: "Roboto-Regular";
    font-size: 12px;
    color: #26252e;
    font-weight: 600;
    line-height: 20px; }
  .go-option-description {
    width: calc(var(--singleGridWidth) * 2);
    letter-spacing: 0.02em;
    font-family: "Roboto-Medium";
    font-size: 12px;
    color: #26252e;
    font-weight: 500;
    line-height: 20px;
    opacity: 0.5; }
  .go-bjit-text {
    text-shadow: -1px -1px 0 rgba(38, 37, 46, 0.05), 1px -1px 0 rgba(38, 37, 46, 0.05), -1px 1px 0 rgba(38, 37, 46, 0.05), 1px 1px 0 rgba(38, 37, 46, 0.05);
    font-family: "Roboto-Regular";
    font-size: 180px;
    color: #ffffff;
    font-weight: normal;
    line-height: 130px;
    position: absolute;
    transform: rotate(-90deg);
    top: 180px;
    left: -72px;
    z-index: -1; }
  .go-right-side {
    display: block;
    clear: both;
    height: 366px;
    width: calc(var(--singleGridWidth) * 3); }
  .go-address-map-block iframe {
    height: 420px; }
  .go-local-team-block {
    position: relative;
    padding-top: 48px;
    padding-bottom: 72px;
    width: 100%;
    overflow: hidden; }
  .contactus {
    font-family: "Roboto-Medium";
    font-size: var(--font20);
    color: #26252e;
    font-weight: 500;
    line-height: 32px;
    width: 120px;
    position: relative;
    transform: rotate(-90deg);
    left: calc(var(--sideGridWidth) - 30px);
    top: -450px; }
  .local-team {
    font-family: "Roboto-Medium";
    font-size: 14px;
    color: #26252e;
    font-weight: 500;
    line-height: 20px;
    position: relative;
    left: var(--secondGridLeft);
    width: calc(var(--singleGridWidth) * 3); }
  .local-stroke {
    text-shadow: -1px -1px 0 #ecf1f2, 1px -1px 0 #ecf1f2, -1px 1px 0 #ecf1f2, 1px 1px 0 #ecf1f2;
    font-family: "Roboto-Regular";
    font-size: 100px;
    color: #ffffff;
    font-weight: normal;
    line-height: 100px;
    z-index: -1;
    position: absolute;
    left: -5px; }
  .top-team {
    border: 1px solid red;
    height: auto;
    margin-top: 40px;
    display: grid;
    grid-template-columns: auto auto auto;
    position: relative;
    justify-content: space-between;
    left: calc(var(--singleGridWidth) / 2 + var(--sideGridWidth));
    width: calc(var(--singleGridWidth) * 3 + var(--singleGridWidth) / 2); }
  .team {
    width: var(--singleGridWidth); }
  .bg-photo {
    width: var(--singleGridWidth);
    height: var(--singleGridWidth);
    background-color: #ecf1f2; }
  .team-name {
    font-family: "Roboto-Regular";
    font-size: var(--font24);
    color: #26252e;
    font-weight: normal;
    line-height: 40px;
    padding-top: 20px; }
  .team-designation {
    font-family: "Roboto-Regular";
    font-size: var(--font20);
    color: #26252e;
    font-weight: normal;
    line-height: 30px;
    padding-top: 20px;
    letter-spacing: 0.02em;
    opacity: 0.7; }
  .desktop-view {
    display: none !important; }
  .mobile-view {
    display: block; }
  .bottom-team {
    height: auto;
    margin-top: 90px;
    display: flex;
    position: relative;
    justify-content: space-between;
    left: calc(var(--singleGridWidth) * 3 + var(--sideGridWidth));
    width: calc(var(--singleGridWidth) * 3); }
  .sp-team {
    height: auto;
    margin-top: 40px;
    display: grid;
    grid-template-columns: auto auto auto;
    position: relative;
    z-index: 3;
    justify-content: space-between;
    left: calc(var(--singleGridWidth) / 2 + var(--sideGridWidth));
    width: calc(var(--singleGridWidth) * 3 + var(--singleGridWidth) / 2); }
  .go-sp-team {
    width: var(--singleGridWidth);
    margin-bottom: 30px; }
  .go-sp-team-bg-photo {
    width: var(--singleGridWidth);
    height: var(--singleGridWidth);
    background-color: #ecf1f2;
    overflow: hidden; }
    .go-sp-team-bg-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover; }
  .go-sp-team-name {
    font-family: "Roboto-Regular";
    font-size: 14px;
    color: #26252e;
    font-weight: normal;
    line-height: 20px;
    padding-top: 10px;
    letter-spacing: 0.02em; }
  .go-sp-team-designation {
    font-family: "Roboto-Regular";
    font-size: 12px;
    color: #26252e;
    font-weight: normal;
    line-height: 18px;
    padding-top: 10px;
    letter-spacing: 0.02em;
    opacity: 0.7; }
  .team-stroke {
    text-shadow: -1px -1px 0 #ecf1f2, 1px -1px 0 #ecf1f2, -1px 1px 0 #ecf1f2, 1px 1px 0 #ecf1f2;
    font-family: "Roboto-Regular";
    font-size: 80px;
    color: #ffffff;
    font-weight: normal;
    line-height: 80px;
    z-index: -1;
    position: absolute;
    left: calc(var(--singleGridWidth) / 2);
    bottom: 0; }
  .go-bottom-line {
    height: 2px;
    width: var(--singleGridWidth);
    position: relative;
    left: var(--sideGridWidth);
    margin-top: 48px;
    border-bottom: 2px solid rgba(38, 37, 46, 0.2); } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.global-content-slider {
  width: calc(var(--singleGridWidth) * 3);
  height: 840px;
  position: relative; }
  .global-content-slider .slider-item {
    width: calc(var(--singleGridWidth) * 3);
    height: 840px; }
    .global-content-slider .slider-item .feature-img {
      position: relative;
      left: 0;
      bottom: 0 !important; }
      .global-content-slider .slider-item .feature-img img {
        width: calc(var(--singleGridWidth) * 3);
        height: 840px;
        object-fit: cover;
        background-color: #7d7c82; }
  .global-content-slider .next-prev-slider {
    position: absolute;
    width: calc(var(--singleGridWidth));
    left: -78px;
    bottom: 0px;
    display: flex;
    align-items: center;
    height: 83px;
    z-index: 2; }
    .global-content-slider .next-prev-slider .previous-icon {
      z-index: 4;
      height: 100%;
      width: calc(var(--singleGridWidth) / 2);
      background: rgba(41, 41, 48, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transform: rotate(180deg); }
      .global-content-slider .next-prev-slider .previous-icon:hover {
        opacity: 0.7; }
    .global-content-slider .next-prev-slider .next-icon {
      z-index: 4;
      height: 100%;
      width: calc(var(--singleGridWidth) / 2);
      background: rgba(41, 41, 48, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer; }
      .global-content-slider .next-prev-slider .next-icon:hover {
        opacity: 0.7; }

@media screen and (max-width: 1024px) {
  .global-content-slider {
    width: calc(var(--singleGridWidth) * 3);
    height: 366px;
    position: relative;
    z-index: 3; }
    .global-content-slider .slider-item {
      width: 100%;
      height: 366px; }
      .global-content-slider .slider-item .feature-img {
        height: 366px;
        width: calc(var(--singleGridWidth) * 3); }
        .global-content-slider .slider-item .feature-img img {
          width: calc(var(--singleGridWidth) * 3);
          height: 366px;
          object-fit: cover;
          z-index: 3; }
      .global-content-slider .slider-item .img-caption {
        font-family: "Roboto-Regular";
        font-size: 11px;
        color: #26252e;
        font-weight: normal;
        line-height: 16px;
        margin-top: 15px;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        letter-spacing: 0.02em; }
        .global-content-slider .slider-item .img-caption img {
          object-fit: cover;
          width: 100%;
          height: 100%; }
      .global-content-slider .slider-item:focus {
        outline: none; }
    .global-content-slider .next-prev-slider {
      position: absolute;
      width: 72px;
      right: unset;
      left: -36px;
      bottom: 0px;
      top: unset;
      display: flex;
      align-items: center;
      height: 36px;
      z-index: 4; }
      .global-content-slider .next-prev-slider .previous-icon {
        z-index: 4;
        height: 36px;
        width: 36px;
        background: rgba(41, 41, 48, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer; }
        .global-content-slider .next-prev-slider .previous-icon img {
          width: 16px;
          height: 16px; }
        .global-content-slider .next-prev-slider .previous-icon:hover {
          opacity: 0.7; }
      .global-content-slider .next-prev-slider .next-icon {
        z-index: 4;
        height: 100%;
        width: 36px;
        background: rgba(41, 41, 48, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer; }
        .global-content-slider .next-prev-slider .next-icon img {
          width: 16px;
          height: 16px; }
        .global-content-slider .next-prev-slider .next-icon:hover {
          opacity: 0.7; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.news-details-eyecatch {
  height: 810px;
  position: relative;
  background-size: cover;
  background-color: #7d7c82;
  overflow: hidden; }
  .news-details-eyecatch .eye-catch-body {
    position: relative; }
    .news-details-eyecatch .eye-catch-body .eye-catch-cover {
      object-fit: cover;
      z-index: 2; }
      .news-details-eyecatch .eye-catch-body .eye-catch-cover img {
        height: auto;
        width: 100vw; }
    .news-details-eyecatch .eye-catch-body .shadow {
      position: absolute;
      background: #26252e;
      opacity: 0.5;
      height: 100%;
      width: 100vw;
      top: 0;
      right: 0;
      left: 0;
      z-index: 1; }
    .news-details-eyecatch .eye-catch-body .breadcrumb {
      position: absolute;
      left: var(--secondGridLeft);
      top: 56px;
      display: flex;
      z-index: 2; }
    .news-details-eyecatch .eye-catch-body .vertical-text {
      position: absolute;
      left: var(--sideGridWidth);
      top: 225px;
      font-family: "Roboto-Medium";
      font-size: 20px;
      color: #ffffff;
      font-weight: 500;
      line-height: 32px;
      font-style: normal;
      letter-spacing: 0.02em;
      transform: rotate(-90deg);
      transform-origin: left top;
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      width: 180px;
      z-index: 2; }
    .news-details-eyecatch .eye-catch-body .title {
      position: absolute;
      left: var(--secondGridLeft);
      top: 220px;
      font-family: "Roboto-Medium";
      font-size: 36px;
      color: #ffffff;
      font-weight: 500;
      line-height: 50px;
      font-style: normal;
      display: flex;
      align-items: center;
      letter-spacing: 0.015em;
      width: calc(var(--singleGridWidth) * 5);
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      z-index: 2; }
    .news-details-eyecatch .eye-catch-body .description {
      position: absolute;
      width: calc(var(--singleGridWidth) * 3);
      left: calc(var(--secondGridLeft) + var(--singleGridWidth));
      top: 418px;
      font-family: "Roboto-Regular";
      font-size: 20px;
      color: #ffffff;
      font-weight: 400;
      line-height: 30px;
      font-style: normal;
      align-items: center;
      letter-spacing: 0.02em;
      opacity: 0.7;
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      z-index: 2; }
  .news-details-eyecatch .bottom-navigation {
    height: 83px;
    background: #434eba;
    width: calc(var(--singleGridWidth) * 8 - 1px);
    left: calc(var(--sideGridWidth));
    position: absolute;
    bottom: 0;
    z-index: 2; }
    .news-details-eyecatch .bottom-navigation .navigation-text {
      font-family: "Roboto-Regular";
      font-size: 20px;
      color: #ffffff;
      font-weight: 400;
      line-height: 30px;
      position: relative;
      top: 31px;
      left: 60px;
      width: calc(var(--singleGridWidth) * 2);
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical; }
    .news-details-eyecatch .bottom-navigation .navigation-date {
      font-family: "Roboto-Regular";
      font-size: 20px;
      color: #ffffff;
      font-weight: 400;
      line-height: 30px;
      position: absolute;
      top: 31px;
      right: 60px; }
    .news-details-eyecatch .bottom-navigation .navigation-icon {
      cursor: pointer;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); }

@media screen and (min-width: 1025px) and (max-width: calc(1366px - 1px)) {
  .news-details-eyecatch .eye-catch-body .title {
    font-size: var(--font36); }
  .news-details-eyecatch .eye-catch-body .description {
    font-size: var(--font20); } }

@media screen and (min-width: 1366px) and (max-width: calc(1440px - 1px)) {
  .news-details-eyecatch .eye-catch-body .title {
    font-family: "Roboto-Medium";
    font-size: 34px;
    color: #ffffff;
    font-weight: 500;
    line-height: 50px; }
  .news-details-eyecatch .eye-catch-body .description {
    font-family: "Roboto-Regular";
    font-size: 18px;
    color: #ffffff;
    font-weight: 400;
    line-height: 30px; }
  .news-details-eyecatch .bottom-navigation .navigation-icon {
    width: 22px;
    height: 30.5px; } }

@media screen and (max-width: 1024px) {
  .news-details-eyecatch {
    height: 380px; }
    .news-details-eyecatch .eye-catch-body .breadcrumb {
      top: 30px;
      height: 20px;
      overflow: hidden; }
    .news-details-eyecatch .eye-catch-body .vertical-text {
      top: 141px;
      font-family: "Roboto-Medium";
      font-size: 12px;
      color: #ffffff;
      font-weight: 500;
      line-height: 18px;
      width: 110px; }
    .news-details-eyecatch .eye-catch-body .title {
      top: 68px;
      font-family: "Roboto-Medium";
      font-size: 20px;
      color: #ffffff;
      font-weight: 500;
      line-height: 28px;
      width: calc(var(--singleGridWidth) * 3);
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 6;
      -webkit-box-orient: vertical; }
    .news-details-eyecatch .eye-catch-body .description {
      width: calc(var(--singleGridWidth) * 3);
      top: 252px;
      left: var(--secondGridLeft);
      font-family: "Roboto-Medium";
      font-size: 12px;
      color: #ffffff;
      font-weight: 500;
      line-height: 20px;
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical; }
    .news-details-eyecatch .bottom-navigation {
      height: 36px;
      background: #434eba;
      width: calc(var(--singleGridWidth) * 4);
      left: var(--sideGridWidth);
      position: absolute;
      bottom: 0;
      z-index: 2; }
      .news-details-eyecatch .bottom-navigation .navigation-text {
        font-family: "Roboto-Regular";
        font-size: 11px;
        color: #ffffff;
        font-weight: 400;
        line-height: 16px;
        position: relative;
        top: 13px;
        left: 18px;
        width: calc(var(--singleGridWidth) * 1);
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        letter-spacing: 0.02em; }
      .news-details-eyecatch .bottom-navigation .navigation-date {
        font-family: "Roboto-Regular";
        font-size: 11px;
        color: #ffffff;
        font-weight: 400;
        line-height: 16px;
        position: absolute;
        top: 13px;
        right: 18px;
        letter-spacing: 0.02em; }
      .news-details-eyecatch .bottom-navigation .navigation-icon {
        cursor: pointer;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 14px;
        width: 18px; }
        .news-details-eyecatch .bottom-navigation .navigation-icon img {
          height: 14px;
          width: 18px; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.news-details-page {
  margin-top: 90px;
  background: #ffffff;
  height: auto;
  position: relative;
  z-index: 1; }
  .news-details-page .wrap-top-plus {
    position: absolute;
    top: 105px;
    left: calc(-1 * var(--singleGridWidth)); }
    .news-details-page .wrap-top-plus .wrap-plus {
      left: 0;
      top: 0; }
  .news-details-page .wrap-bottom-plus {
    position: absolute;
    bottom: 404px;
    left: calc(-1 * var(--singleGridWidth)); }
    .news-details-page .wrap-bottom-plus .wrap-plus {
      left: 0;
      top: 0; }
  .news-details-page .news-content {
    z-index: 1;
    position: relative;
    left: calc(var(--sideGridWidth));
    width: calc(var(--singleGridWidth) * 8);
    height: auto;
    padding-top: 116px;
    padding-left: 60px;
    padding-right: 60px;
    margin-bottom: 116px;
    background: #ffffff; }
    .news-details-page .news-content .bold-line {
      position: relative;
      width: 114px;
      height: 7px;
      left: calc(var(--singleGridWidth) - var(--sideGridWidth));
      background-color: #000000;
      margin-bottom: 58px; }
    .news-details-page .news-content .news-content-hr {
      margin-top: 96px;
      position: relative;
      width: calc(var(--singleGridWidth) * 6 - 2px);
      left: calc(var(--singleGridWidth) - var(--sideGridWidth));
      border-top: 1px solid rgba(38, 37, 46, 0.2); }
    .news-details-page .news-content .news-top-line {
      height: 7px;
      width: 92px;
      background: #000000; }
    .news-details-page .news-content .news-title {
      font-family: "Roboto-Regular";
      font-size: 24px;
      color: #26252e;
      font-weight: 600;
      line-height: 36px;
      width: calc(var(--singleGridWidth) * 3 + 60px);
      margin-top: 58px; }
    .news-details-page .news-content .news-description {
      font-family: "Roboto-Regular";
      font-size: 20px;
      color: #26252e;
      font-weight: normal;
      line-height: 30px;
      padding-top: 30px;
      padding-bottom: 116px; }
    .news-details-page .news-content .news-description-two {
      font-family: "Roboto-Regular";
      font-size: 20px;
      color: #26252e;
      font-weight: normal;
      line-height: 30px;
      position: relative;
      width: calc(var(--singleGridWidth) * 6 - 2px);
      left: calc(var(--singleGridWidth) - 60px); }
    .news-details-page .news-content .bottom-line-bg {
      height: 7px;
      width: 92px;
      background: #000000;
      clear: both;
      position: relative;
      margin-top: 195px; }
    .news-details-page .news-content .clear {
      width: 100%;
      clear: both; }
    .news-details-page .news-content .bottom-title {
      font-family: "Roboto-Regular";
      font-size: 24px;
      color: #26252e;
      font-weight: 600;
      line-height: 36px;
      width: calc(var(--singleGridWidth) * 3 + 60px);
      padding-top: 58px; }
    .news-details-page .news-content .bottom-description {
      font-family: "Roboto-Regular";
      font-size: 20px;
      color: #26252e;
      font-weight: normal;
      line-height: 30px;
      padding-top: 30px; }
    .news-details-page .news-content .news-video {
      height: 500px;
      position: relative;
      margin-bottom: 116px; }
      .news-details-page .news-content .news-video .content-video {
        height: 500px !important;
        width: 100% !important;
        margin-top: 48px; }
    .news-details-page .news-content .news-details-slider {
      width: 100%;
      position: relative;
      margin-top: 50px;
      margin-bottom: 48px;
      left: calc(var(--sideGridWidth) - 60px); }
  .news-details-page .additional-grid-block .middlie-grid .grid-item:nth-child(8) {
    display: none; }
  .news-details-page .article-next-prev-block {
    margin-top: 116px;
    position: relative;
    height: 166px;
    width: calc(var(--singleGridWidth) * 6);
    left: calc(var(--singleGridWidth) - 60px);
    display: flex;
    justify-content: space-between;
    align-items: center; }
    .news-details-page .article-next-prev-block .prev-block {
      width: calc(var(--singleGridWidth) * 3 - 31px);
      height: 166px;
      display: flex;
      align-items: center;
      justify-content: space-between; }
      .news-details-page .article-next-prev-block .prev-block .prev-icon {
        background: #434eba;
        width: var(--singleGridWidth);
        height: 166px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer; }
      .news-details-page .article-next-prev-block .prev-block .image-block {
        position: relative;
        height: 166px;
        width: 65%; }
        .news-details-page .article-next-prev-block .prev-block .image-block img {
          height: 100%;
          width: 100%;
          object-fit: cover;
          background-color: #7d7c82; }
        .news-details-page .article-next-prev-block .prev-block .image-block .overlay {
          background: rgba(38, 37, 46, 0.5);
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0; }
        .news-details-page .article-next-prev-block .prev-block .image-block .previous-article {
          position: absolute;
          top: 31px;
          left: 50%;
          transform: translate(-50%, 0%);
          width: 180px;
          font-family: "Roboto-Regular";
          font-size: 16px;
          color: #ffffff;
          font-weight: normal;
          line-height: 30px;
          letter-spacing: 0.01em;
          display: inline-block;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical; }
        .news-details-page .article-next-prev-block .prev-block .image-block .article-title {
          position: absolute;
          top: 85px;
          left: 50%;
          transform: translate(-50%, -30%);
          width: 180px;
          font-family: "Roboto-Regular";
          font-size: 20px;
          color: #ffffff;
          font-weight: normal;
          line-height: 30px;
          letter-spacing: 0.01em;
          display: inline-block;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical; }
    .news-details-page .article-next-prev-block .next-block {
      width: calc(var(--singleGridWidth) * 3 - 31px);
      height: 166px;
      display: flex;
      align-items: center;
      justify-content: space-between; }
      .news-details-page .article-next-prev-block .next-block .prev-icon {
        background: #434eba;
        width: 166px;
        height: 166px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer; }
      .news-details-page .article-next-prev-block .next-block .image-block {
        position: relative;
        height: 166px;
        width: 65%; }
        .news-details-page .article-next-prev-block .next-block .image-block img {
          height: 100%;
          width: calc(100%);
          object-fit: cover;
          background-color: #7d7c82; }
        .news-details-page .article-next-prev-block .next-block .image-block .overlay {
          background: rgba(38, 37, 46, 0.5);
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0; }
        .news-details-page .article-next-prev-block .next-block .image-block .previous-article {
          position: absolute;
          top: 31px;
          left: 50%;
          transform: translate(-50%, 0%);
          width: 180px;
          font-family: "Roboto-Regular";
          font-size: 16px;
          color: #ffffff;
          font-weight: normal;
          line-height: 30px;
          letter-spacing: 0.01em;
          display: inline-block;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical; }
        .news-details-page .article-next-prev-block .next-block .image-block .article-title {
          position: absolute;
          top: 85px;
          left: 50%;
          transform: translate(-50%, -30%);
          width: 180px;
          font-family: "Roboto-Regular";
          font-size: 20px;
          color: #ffffff;
          font-weight: normal;
          line-height: 30px;
          letter-spacing: 0.01em;
          display: inline-block;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical; }
  .news-details-page .news-article-block {
    width: 100%;
    background: #ffffff;
    margin-top: -116px;
    position: relative;
    display: block;
    padding-top: 10px;
    padding-bottom: 116px; }
    .news-details-page .news-article-block .author-box {
      margin-top: 116px;
      position: relative;
      height: 200px;
      width: calc(var(--singleGridWidth) * 6);
      left: calc(var(--singleGridWidth) + var(--sideGridWidth));
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      background-color: #ecf1f2;
      padding: 52px 48px; }
      .news-details-page .news-article-block .author-box .author-information {
        display: flex; }
        .news-details-page .news-article-block .author-box .author-information .author-image {
          height: 96px;
          width: 96px;
          padding: 20px 20px 20px 14px;
          background-color: #434eba; }
        .news-details-page .news-article-block .author-box .author-information .author-image path {
          fill: white; }
        .news-details-page .news-article-block .author-box .author-information .author-details {
          margin-left: 34px; }
          .news-details-page .news-article-block .author-box .author-information .author-details .author-details-heading {
            font-family: "Roboto-Regular";
            font-size: var(--font24);
            color: #26252e;
            font-weight: 400;
            line-height: 48px;
            opacity: 0.8; }
          .news-details-page .news-article-block .author-box .author-information .author-details .author-details-title {
            font-family: "Roboto-Regular";
            font-size: var(--font26);
            color: #26252e;
            font-weight: normal;
            line-height: 48px;
            opacity: 0.9; }
      .news-details-page .news-article-block .author-box .share-post {
        display: flex;
        gap: 100px; }
        .news-details-page .news-article-block .author-box .share-post .author-center-line {
          display: flex;
          justify-content: center;
          align-items: center;
          border: 1px solid #ffffff;
          height: 119px; }
        .news-details-page .news-article-block .author-box .share-post .share-post-heading {
          font-family: "Roboto-Regular";
          font-size: var(--font24);
          color: #26252e;
          font-weight: normal;
          line-height: 36px; }
        .news-details-page .news-article-block .author-box .share-post .share-post-share-box {
          margin-top: 32px;
          position: relative;
          display: flex;
          align-items: center; }
          .news-details-page .news-article-block .author-box .share-post .share-post-share-box .share-icon {
            height: 40px;
            margin-right: 24px; }
          .news-details-page .news-article-block .author-box .share-post .share-post-share-box .facebook-bg {
            display: flex;
            justify-content: flex-start;
            align-items: center; }
            .news-details-page .news-article-block .author-box .share-post .share-post-share-box .facebook-bg .icon-image {
              height: 40px;
              width: 40px; }
          .news-details-page .news-article-block .author-box .share-post .share-post-share-box .twitter-bg {
            display: flex;
            justify-content: flex-start;
            align-items: center; }
            .news-details-page .news-article-block .author-box .share-post .share-post-share-box .twitter-bg .icon-image {
              height: 40px;
              width: 40px; }
          .news-details-page .news-article-block .author-box .share-post .share-post-share-box .linkedin-bg {
            display: flex;
            justify-content: flex-start;
            align-items: center; }
            .news-details-page .news-article-block .author-box .share-post .share-post-share-box .linkedin-bg .icon-image {
              height: 40px;
              width: 40px; }
          .news-details-page .news-article-block .author-box .share-post .share-post-share-box .link-bg {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            cursor: pointer; }
            .news-details-page .news-article-block .author-box .share-post .share-post-share-box .link-bg .icon-image {
              height: 40px;
              width: 40px; }
  .news-details-page .top-plus-icon {
    position: absolute;
    left: 100px;
    top: 300px;
    border: 2px soli red;
    height: 30px;
    width: 30px;
    z-index: 993; }
    .news-details-page .top-plus-icon .wrap-plus {
      left: 0;
      top: 0; }
  .news-details-page .other-new-title {
    padding-left: calc(var(--singleGridWidth) + var(--sideGridWidth));
    font-family: "Roboto-Regular";
    font-size: 36px;
    color: #3C3B43;
    font-weight: normal;
    line-height: 60px;
    padding-bottom: 40px; }

@media screen and (min-width: 1441px) {
  .news-details-page .news-content .bold-line {
    left: calc(var(--singleGridWidth) - 60px); }
  .news-details-page .news-content .news-content-hr {
    left: calc(var(--singleGridWidth) - 60px); }
  .news-details-page .news-content .news-details-slider {
    left: 0; } }

@media screen and (min-width: 1025px) and (max-width: calc(1366px - 1px)) {
  .news-details-page .news-content .news-title {
    font-size: var(--font24); }
  .news-details-page .news-content .news-description {
    font-size: var(--font20); }
  .news-details-page .news-content .news-details-slider {
    left: calc(var(--sideGridWidth) - 60px); }
  .news-details-page .news-content .article-next-prev-block .prev-block .prev-icon {
    width: var(--singleGridWidth); }
  .news-details-page .news-content .article-next-prev-block .prev-block .image-block {
    width: 65%; }
    .news-details-page .news-content .article-next-prev-block .prev-block .image-block .previous-article {
      font-family: "Roboto-Medium";
      font-size: 14px;
      color: #ffffff;
      font-weight: 500;
      line-height: 30px; }
    .news-details-page .news-content .article-next-prev-block .prev-block .image-block .article-title {
      font-family: "Roboto-Medium";
      font-size: 15px;
      color: #ffffff;
      font-weight: 500;
      line-height: 30px; }
  .news-details-page .news-content .article-next-prev-block .next-block .prev-icon {
    width: var(--singleGridWidth); }
  .news-details-page .news-content .article-next-prev-block .next-block .image-block {
    width: 65%; }
    .news-details-page .news-content .article-next-prev-block .next-block .image-block .previous-article {
      font-family: "Roboto-Medium";
      font-size: 14px;
      color: #ffffff;
      font-weight: 500;
      line-height: 30px; }
    .news-details-page .news-content .article-next-prev-block .next-block .image-block .article-title {
      font-family: "Roboto-Medium";
      font-size: 15px;
      color: #ffffff;
      font-weight: 500;
      line-height: 30px; } }

@media screen and (min-width: 1366px) and (max-width: calc(1440px - 1px)) {
  .news-details-page .news-content .bold-line {
    left: calc(var(--singleGridWidth) - 60px); }
  .news-details-page .news-content .news-title {
    font-family: "Roboto-Medium";
    font-size: 22px;
    color: #26252e;
    font-weight: 500;
    line-height: 36px; }
  .news-details-page .news-content .news-description {
    font-family: "Roboto-Regular";
    font-size: 18px;
    color: #26252e;
    font-weight: normal;
    line-height: 30px; }
  .news-details-page .news-content .news-description-two {
    font-family: "Roboto-Regular";
    font-size: 18px;
    color: #26252e;
    font-weight: normal;
    line-height: 30px; }
  .news-details-page .news-content .news-details-slider {
    left: calc(var(--sideGridWidth) - 60px); }
  .news-details-page .news-article-block .article-next-prev-block .prev-block .prev-icon {
    width: var(--singleGridWidth); }
  .news-details-page .news-article-block .article-next-prev-block .prev-block .image-block {
    width: 65%; }
    .news-details-page .news-article-block .article-next-prev-block .prev-block .image-block .previous-article {
      font-family: "Roboto-Medium";
      font-size: 14px;
      color: #ffffff;
      font-weight: 500;
      line-height: 30px; }
    .news-details-page .news-article-block .article-next-prev-block .prev-block .image-block .article-title {
      font-family: "Roboto-Medium";
      font-size: 18px;
      color: #ffffff;
      font-weight: 500;
      line-height: 30px; }
  .news-details-page .news-article-block .article-next-prev-block .next-block .prev-icon {
    width: var(--singleGridWidth); }
  .news-details-page .news-article-block .article-next-prev-block .next-block .image-block {
    width: 65%; }
    .news-details-page .news-article-block .article-next-prev-block .next-block .image-block .previous-article {
      font-family: "Roboto-Medium";
      font-size: 14px;
      color: #ffffff;
      font-weight: 500;
      line-height: 30px; }
    .news-details-page .news-article-block .article-next-prev-block .next-block .image-block .article-title {
      font-family: "Roboto-Medium";
      font-size: 18px;
      color: #ffffff;
      font-weight: 500;
      line-height: 30px; } }

@media screen and (max-width: 1024px) {
  .news-details-page {
    margin-top: 72px;
    background: #ecf1f2;
    height: auto;
    position: relative;
    z-index: 1; }
    .news-details-page .news-content {
      z-index: 1;
      position: relative;
      left: calc(var(--sideGridWidth));
      width: calc(var(--singleGridWidth) * 4);
      height: auto;
      padding-top: 48px;
      padding-left: 20px;
      padding-right: 20px;
      padding-bottom: 48px;
      background: #ffffff; }
      .news-details-page .news-content .bold-line {
        width: 60px;
        left: calc(var(--sideGridWidth) / 2); }
      .news-details-page .news-content .news-content-hr {
        width: calc(100% - (var(--sideGridWidth) / 2) * 2);
        left: calc(var(--sideGridWidth) / 2); }
      .news-details-page .news-content .news-top-line {
        height: 7px;
        width: 50px;
        background: #000000; }
      .news-details-page .news-content .news-title {
        font-family: "Roboto-Regular";
        font-size: 14px;
        color: #26252e;
        font-weight: 600;
        line-height: 20px;
        width: calc(var(--singleGridWidth) * 3);
        margin-top: 30px; }
      .news-details-page .news-content .news-description {
        font-family: "Roboto-Regular";
        font-size: 12px;
        color: #26252e;
        font-weight: normal;
        line-height: 20px;
        padding-top: 20px;
        letter-spacing: 0.02em;
        padding-bottom: 0px; }
      .news-details-page .news-content .news-description-two {
        font-family: "Roboto-Regular";
        font-size: 12px;
        color: #26252e;
        font-weight: normal;
        line-height: 20px;
        letter-spacing: 0.02em;
        width: calc(100% - (var(--sideGridWidth) / 2) * 2);
        left: calc(var(--sideGridWidth) / 2); }
      .news-details-page .news-content .bottom-line-bg {
        height: 7px;
        width: 50px;
        background: #000000;
        clear: both;
        position: relative;
        margin-top: 46px; }
      .news-details-page .news-content .clear {
        width: 100%;
        clear: both; }
      .news-details-page .news-content .bottom-title {
        font-family: "Roboto-Regular";
        font-size: 14px;
        color: #26252e;
        font-weight: 600;
        line-height: 30px;
        width: calc(var(--singleGridWidth) * 3);
        padding-top: 20px; }
      .news-details-page .news-content .bottom-description {
        font-family: "Roboto-Regular";
        font-size: 12px;
        color: #26252e;
        font-weight: normal;
        line-height: 20px;
        padding-top: 10px;
        letter-spacing: 0.02em; }
      .news-details-page .news-content .news-video {
        height: 144px;
        position: relative; }
        .news-details-page .news-content .news-video .content-video {
          height: 144px !important;
          width: 100% !important;
          margin-top: 20px; }
      .news-details-page .news-content .news-details-slider {
        width: 100%;
        position: relative;
        margin-top: 20px;
        margin-bottom: 10px;
        left: calc(var(--sideGridWidth) - var(--sideGridWidth)); }
      .news-details-page .news-content .article-next-prev-block {
        margin-top: 96px;
        position: relative;
        width: calc(var(--singleGridWidth) * 3);
        left: -20px;
        display: block;
        justify-content: unset;
        align-items: unset; }
        .news-details-page .news-content .article-next-prev-block .prev-block {
          margin-bottom: 24px;
          width: calc(var(--singleGridWidth) * 3);
          height: 72px;
          display: flex;
          align-items: center;
          justify-content: space-between; }
          .news-details-page .news-content .article-next-prev-block .prev-block .prev-icon {
            background: #434eba;
            width: 72px;
            height: 72px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer; }
            .news-details-page .news-content .article-next-prev-block .prev-block .prev-icon img {
              height: 10px;
              width: 14px; }
          .news-details-page .news-content .article-next-prev-block .prev-block .image-block {
            position: relative;
            height: 72px;
            width: calc(100% - 72px); }
            .news-details-page .news-content .article-next-prev-block .prev-block .image-block img {
              height: 100%;
              width: calc(100%);
              object-fit: cover; }
            .news-details-page .news-content .article-next-prev-block .prev-block .image-block .overlay {
              background: rgba(38, 37, 46, 0.5);
              position: absolute;
              left: 0;
              right: 0;
              top: 0;
              bottom: 0; }
            .news-details-page .news-content .article-next-prev-block .prev-block .image-block .previous-article {
              opacity: 0.7;
              position: absolute;
              top: 18px;
              left: 50%;
              transform: translate(-50%, 0%);
              width: 124px;
              font-family: "Roboto-Regular";
              font-size: 11px;
              color: #ffffff;
              font-weight: normal;
              line-height: 16px;
              letter-spacing: 0.02em;
              display: inline-block;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical; }
            .news-details-page .news-content .article-next-prev-block .prev-block .image-block .article-title {
              position: absolute;
              top: 48px;
              left: 50%;
              transform: translate(-50%, -30%);
              width: 124px;
              font-family: "Roboto-Regular";
              font-size: 12px;
              color: #ffffff;
              font-weight: normal;
              line-height: 16px;
              letter-spacing: 0.01em;
              display: inline-block;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical; }
        .news-details-page .news-content .article-next-prev-block .next-block {
          width: calc(var(--singleGridWidth) * 3);
          height: 72px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-left: var(--singleGridWidth); }
          .news-details-page .news-content .article-next-prev-block .next-block .prev-icon {
            background: #434eba;
            width: 72px;
            height: 72px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer; }
            .news-details-page .news-content .article-next-prev-block .next-block .prev-icon img {
              height: 10px;
              width: 14px; }
          .news-details-page .news-content .article-next-prev-block .next-block .image-block {
            position: relative;
            height: 72px;
            width: calc(100% - 72px); }
            .news-details-page .news-content .article-next-prev-block .next-block .image-block img {
              height: 100%;
              width: calc(100%);
              object-fit: cover; }
            .news-details-page .news-content .article-next-prev-block .next-block .image-block .overlay {
              background: rgba(38, 37, 46, 0.5);
              position: absolute;
              left: 0;
              right: 0;
              top: 0;
              bottom: 0; }
            .news-details-page .news-content .article-next-prev-block .next-block .image-block .previous-article {
              position: absolute;
              top: 18px;
              left: 50%;
              transform: translate(-50%, 0%);
              width: 124px;
              opacity: 0.7;
              font-family: "Roboto-Regular";
              font-size: 11px;
              color: #ffffff;
              font-weight: normal;
              line-height: 16px;
              letter-spacing: 0.02em;
              display: inline-block;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical; }
            .news-details-page .news-content .article-next-prev-block .next-block .image-block .article-title {
              position: absolute;
              top: 48px;
              left: 50%;
              transform: translate(-50%, -30%);
              width: 124px;
              font-family: "Roboto-Regular";
              font-size: 12px;
              color: #ffffff;
              font-weight: normal;
              line-height: 16px;
              letter-spacing: unset;
              display: inline-block;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical; }
    .news-details-page .news-article-block {
      width: 100%;
      background: #ffffff;
      margin-top: -60px;
      position: relative;
      display: block;
      padding-top: 10px;
      padding-bottom: 50px; }
      .news-details-page .news-article-block .author-box {
        margin-top: 50px;
        position: relative;
        height: auto;
        width: calc(var(--singleGridWidth) * 4);
        left: calc(var(--sideGridWidth));
        display: block;
        justify-content: space-between;
        align-items: center;
        background-color: #ecf1f2;
        padding: 20px 25px 20px 40px;
        font-family: "Roboto-Medium";
        font-size: var(--font14);
        color: #26252e;
        font-weight: 500;
        line-height: 10px; }
        .news-details-page .news-article-block .author-box .author-information {
          display: flex; }
          .news-details-page .news-article-block .author-box .author-information .author-details {
            margin-left: 15px;
            color: #26252e; }
        .news-details-page .news-article-block .author-box .share-post .author-center-line {
          display: none; }
        .news-details-page .news-article-block .author-box .share-post .share-post-heading {
          display: none; }
    .news-details-page .other-new-title {
      background: #ffffff;
      padding-left: calc(var(--sideGridWidth));
      font-family: "Roboto-Regular";
      font-size: 26px;
      color: #3C3B43;
      font-weight: normal;
      line-height: 30px;
      padding-bottom: 20px; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.details-content-slider {
  width: calc(var(--singleGridWidth) * 6 - 1px);
  left: calc(var(--singleGridWidth) - var(--sideGridWidth));
  height: 579px;
  position: relative; }
  .details-content-slider .slider-item {
    width: 100%;
    height: 496px; }
    .details-content-slider .slider-item .feature-img {
      position: relative;
      left: 0;
      width: 100%;
      height: auto; }
      .details-content-slider .slider-item .feature-img img {
        width: 100%;
        height: 496px;
        background-color: #7d7c82; }
    .details-content-slider .slider-item .img-caption {
      font-family: "Roboto-Regular";
      font-size: 16px;
      color: #26252e;
      font-weight: normal;
      line-height: 25px;
      margin-top: 15px;
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      letter-spacing: 0.02em;
      opacity: 0.7; }
      .details-content-slider .slider-item .img-caption img {
        object-fit: cover;
        width: 100%;
        height: 100%; }
    .details-content-slider .slider-item:focus {
      outline: none; }
  .details-content-slider .next-prev-slider {
    position: absolute;
    width: calc(var(--singleGridWidth));
    right: 0px;
    bottom: 84px;
    display: flex;
    align-items: center;
    height: 83px; }
    .details-content-slider .next-prev-slider .previous-icon {
      z-index: 4;
      height: 100%;
      width: calc(var(--singleGridWidth) / 2);
      background: rgba(41, 41, 48, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer; }
      .details-content-slider .next-prev-slider .previous-icon:hover {
        opacity: 0.7; }
    .details-content-slider .next-prev-slider .next-icon {
      z-index: 4;
      height: 100%;
      width: calc(var(--singleGridWidth) / 2);
      background: rgba(41, 41, 48, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer; }
      .details-content-slider .next-prev-slider .next-icon:hover {
        opacity: 0.7; }

@media screen and (min-width: 1441px) {
  .details-content-slider {
    left: calc(var(--singleGridWidth) - 60px); } }

@media screen and (min-width: calc(1366px)) and (max-width: calc(1440px - 1px)) {
  .details-content-slider .slider-item .img-caption {
    font-family: "Roboto-Regular";
    font-size: 14px;
    color: #26252e;
    font-weight: normal;
    line-height: 25px; } }

@media screen and (max-width: 1024px) {
  .details-content-slider {
    width: calc(100% - (var(--sideGridWidth) / 2) * 2);
    left: calc(var(--sideGridWidth) / 2);
    height: 300px;
    position: relative; }
    .details-content-slider .slider-item {
      width: 100%;
      height: 300px; }
      .details-content-slider .slider-item .feature-img {
        height: 220px;
        width: 100%; }
        .details-content-slider .slider-item .feature-img img {
          width: 100%;
          height: 220px;
          object-fit: cover; }
      .details-content-slider .slider-item .img-caption {
        font-family: "Roboto-Regular";
        font-size: 11px;
        color: #26252e;
        font-weight: normal;
        line-height: 16px;
        margin-top: 15px;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        letter-spacing: 0.02em; }
        .details-content-slider .slider-item .img-caption img {
          object-fit: cover;
          width: 100%;
          height: 100%; }
      .details-content-slider .slider-item:focus {
        outline: none; }
    .details-content-slider .next-prev-slider {
      position: absolute;
      width: 72px;
      right: 0;
      bottom: unset;
      top: 184px;
      display: flex;
      align-items: center;
      height: 36px; }
      .details-content-slider .next-prev-slider .previous-icon {
        z-index: 4;
        height: 36px;
        width: 36px;
        background: rgba(41, 41, 48, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer; }
        .details-content-slider .next-prev-slider .previous-icon img {
          width: 16px;
          height: 16px; }
        .details-content-slider .next-prev-slider .previous-icon:hover {
          opacity: 0.7; }
      .details-content-slider .next-prev-slider .next-icon {
        z-index: 4;
        height: 100%;
        width: 36px;
        background: rgba(41, 41, 48, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer; }
        .details-content-slider .next-prev-slider .next-icon img {
          width: 16px;
          height: 16px; }
        .details-content-slider .next-prev-slider .next-icon:hover {
          opacity: 0.7; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.news-page {
  margin-top: 90px;
  position: relative;
  overflow: hidden; }
  .news-page .news-paginations {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: calc(var(--singleGridWidth) * 8);
    left: calc(var(--sideGridWidth));
    margin: 0px 0px 66px 0px; }
    .news-page .news-paginations .list-title {
      font-family: "Roboto-Medium";
      font-size: var(--font24);
      color: #26252e;
      font-weight: 500;
      line-height: 60px; }
    .news-page .news-paginations .pagination {
      width: calc(var(--singleGridWidth) * 3); }
  .news-page .bottom-pagination {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--margin166);
    right: calc(var(--sideGridWidth));
    position: relative;
    z-index: 2; }
  .news-page .news-data-list {
    min-height: 200px;
    position: relative;
    height: auto;
    width: calc(var(--singleGridWidth) * 8);
    left: var(--sideGridWidth);
    margin-bottom: 53px;
    z-index: 0; }
  .news-page .bottom-border-line {
    position: absolute;
    bottom: var(--margin166);
    left: var(--sideGridWidth);
    height: 1px;
    background-color: #000000;
    opacity: 0.2;
    width: calc(var(--singleGridWidth) * 2); }
  .news-page .sort-date {
    width: calc(var(--singleGridWidth) * 2 - 20px);
    position: absolute;
    top: 0;
    left: calc(var(--singleGridWidth) * 1);
    display: flex;
    height: 60px;
    justify-content: space-between;
    align-items: center; }
    .news-page .sort-date .sort-title {
      letter-spacing: 0.02em;
      font-family: "Roboto-Regular";
      font-size: var(--font20);
      color: #26252e;
      font-weight: normal;
      line-height: 30px;
      position: absolute;
      left: unset;
      right: calc(var(--singleGridWidth) * 2);
      z-index: 3;
      width: 75px; }
    .news-page .sort-date .technology-list {
      position: relative;
      width: 300px;
      background: #ffffff;
      border: 1px solid rgba(38, 37, 46, 0.3);
      box-sizing: border-box;
      height: 60px;
      z-index: 2; }
      .news-page .sort-date .technology-list .item-technology {
        width: 240px;
        padding-left: 20px;
        padding-top: 16px;
        text-align: left;
        font-family: "Roboto-Medium";
        font-size: 19px;
        color: #26252e;
        font-weight: 500;
        line-height: 30px; }
      .news-page .sort-date .technology-list .drop-down-box {
        width: 60px;
        height: 58.3px;
        background: #434eba;
        position: absolute;
        right: 0;
        top: 0;
        cursor: pointer; }
        .news-page .sort-date .technology-list .drop-down-box img {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%); }
      .news-page .sort-date .technology-list .drop-down-list {
        width: 300px;
        height: 248px;
        margin-top: 16px;
        overflow: scroll;
        z-index: 4;
        background: #ffffff;
        margin-top: 13px;
        margin-left: -1px;
        border: 1px solid rgba(38, 37, 46, 0.3);
        scrollbar-width: none;
        -ms-overflow-style: none; }
        .news-page .sort-date .technology-list .drop-down-list::-webkit-scrollbar {
          display: none; }
        .news-page .sort-date .technology-list .drop-down-list .item {
          display: flex;
          align-items: center;
          width: 100%;
          padding-left: 33px;
          height: 60px;
          cursor: pointer;
          font-family: "Roboto-Regular";
          font-size: var(--font18);
          color: #26252e;
          font-weight: normal;
          line-height: 20px;
          text-align: left; }
          .news-page .sort-date .technology-list .drop-down-list .item .sub-item {
            width: 90%; }
        .news-page .sort-date .technology-list .drop-down-list .item-hoverable:hover {
          background-color: #ecf1f2; }
        .news-page .sort-date .technology-list .drop-down-list .item--active {
          background-color: black;
          color: #ffffff; }
          .news-page .sort-date .technology-list .drop-down-list .item--active:hover {
            background-color: black; }
          .news-page .sort-date .technology-list .drop-down-list .item--active .item {
            color: unset; }
  .news-page .down-arrow {
    height: 110px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2; }
    .news-page .down-arrow svg {
      z-index: 1; }
      .news-page .down-arrow svg path {
        stroke: #000000; }
  .news-page .reset-button {
    width: 60px;
    height: 59px;
    background: #434eba;
    color: white;
    position: absolute;
    top: 0;
    left: calc(var(--singleGridWidth) * 3);
    font-size: 20px;
    box-sizing: border-box;
    border: 1px solid rgba(209, 208, 213, 0.51);
    align-items: center; }
  .news-page .reset-button:hover {
    opacity: 0.9; }

@media screen and (min-width: 1025px) and (max-width: calc(1366px - 1px)) {
  .news-page .sort-date .technology-list {
    width: unset; }
    .news-page .sort-date .technology-list .item-technology {
      font-size: var(--font18); }
  .news-page .sort-date .drop-down-list {
    width: unset !important; } }

@media screen and (max-width: 1024px) {
  .news-page {
    margin-top: 72px;
    width: 100%; }
    .news-page .category-section {
      position: relative;
      display: flex;
      justify-content: center;
      text-align: center;
      flex-wrap: wrap;
      width: auto;
      left: auto; }
    .news-page .news-paginations {
      flex-direction: column;
      width: calc(var(--singleGridWidth) * 4);
      margin: 0px 0px 40px 0px;
      left: unset; }
      .news-page .news-paginations .list-title {
        font-family: "Roboto-Medium";
        font-size: 14px;
        color: #26252e;
        font-weight: 500;
        line-height: 20px;
        margin-top: 10px;
        text-align: left; }
      .news-page .news-paginations .pagination {
        margin-top: 55px;
        width: calc(var(--singleGridWidth) * 4); }
    .news-page .news-data-list {
      width: calc(var(--singleGridWidth) * 4); }
    .news-page .sort-date {
      width: calc(var(--singleGridWidth) * 4);
      right: calc(var(--sideGridWidth));
      left: 0px;
      height: 60px;
      position: absolute;
      top: 0px;
      display: flex;
      height: 36px;
      justify-content: space-between;
      align-items: center; }
      .news-page .sort-date .sort-title {
        letter-spacing: 0.02em;
        font-family: "Roboto-Regular";
        font-size: 12px;
        color: #26252e;
        font-weight: normal;
        line-height: 12px;
        position: absolute;
        left: calc(var(--sideGridWidth));
        right: unset;
        z-index: 3;
        width: unset; }
      .news-page .sort-date .technology-list {
        width: calc(var(--singleGridWidth) * 3);
        box-sizing: border-box;
        height: 36px;
        z-index: 2;
        position: absolute;
        right: 0;
        left: unset; }
        .news-page .sort-date .technology-list .item-technology {
          width: 180px;
          padding-left: 20px;
          padding-top: 8px;
          font-family: "Roboto-Medium";
          font-size: 12px;
          color: #26252e;
          font-weight: 500;
          line-height: 20px; }
        .news-page .sort-date .technology-list .drop-down-box {
          width: 36px;
          height: 34px;
          background: #434eba;
          position: absolute;
          right: 0;
          top: 0;
          cursor: pointer; }
          .news-page .sort-date .technology-list .drop-down-box img {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            height: 16px;
            width: 14px; }
        .news-page .sort-date .technology-list .drop-down-list {
          width: calc(var(--singleGridWidth) * 3);
          height: 110px;
          margin-top: 5px;
          overflow: scroll;
          z-index: 4;
          scrollbar-width: none;
          -ms-overflow-style: none; }
          .news-page .sort-date .technology-list .drop-down-list::-webkit-scrollbar {
            display: none; }
          .news-page .sort-date .technology-list .drop-down-list .item {
            display: flex;
            align-items: center;
            width: 100%;
            padding-left: 50px;
            height: 35px;
            border-bottom: 1px solid rgba(38, 37, 46, 0.3);
            cursor: pointer;
            font-family: "Roboto-Regular";
            font-size: 12px;
            color: #26252e;
            font-weight: normal;
            line-height: 20px; }
            .news-page .sort-date .technology-list .drop-down-list .item:hover {
              background-color: #434eba;
              color: #ffffff; }
            .news-page .sort-date .technology-list .drop-down-list .item .main-cat {
              padding-left: 20px; }
          .news-page .sort-date .technology-list .drop-down-list .item--active {
            background-color: black;
            color: #ffffff; }
            .news-page .sort-date .technology-list .drop-down-list .item--active .item {
              color: unset; }
    .news-page .down-arrow {
      height: 72px; }
      .news-page .down-arrow svg {
        width: 16px;
        height: 22px;
        z-index: 1; }
        .news-page .down-arrow svg path {
          stroke: #000000; }
    .news-page .reset-button {
      width: 36px;
      height: 36px;
      margin-top: 47px;
      font-size: 16px;
      left: unset;
      right: calc(var(--singleGridWidth) * 0); }
    .news-page .reset-button:hover {
      opacity: 0.9; } }

@charset "UTF-8";
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.privacy-policy {
  position: relative;
  width: calc(var(--singleGridWidth) * 8);
  left: calc(var(--sideGridWidth));
  padding: 120px 0;
  font-family: "Roboto-Medium";
  font-size: var(--font16);
  color: #3C3B43;
  font-weight: 500;
  line-height: 25px; }
  .privacy-policy__indent {
    padding: 15px 0 0 50px; }
    .privacy-policy__indent li::marker {
      font-size: 19px; }
  .privacy-policy__link {
    color: #3C3B43; }
  .privacy-policy__linegap {
    padding-bottom: 10px; }
  .privacy-policy h1,
  .privacy-policy h2,
  .privacy-policy h3,
  .privacy-policy h4 {
    color: #434eba; }
  .privacy-policy h4 {
    font-style: italic; }

.switch-content {
  display: flex;
  justify-content: flex-end; }

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px; }

.switch input {
  opacity: 0;
  width: 0;
  height: 0; }

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s; }

.slider:before {
  position: absolute;
  content: '';
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s; }

.round-language {
  display: flex;
  justify-content: space-between;
  margin-top: 1px;
  padding: 4px 8px; }

.round-language-color {
  color: white; }

.text-size {
  font-size: 14px; }

input:checked + .slider {
  background-color: #383691; }

input:focus + .slider {
  box-shadow: 0 0 1px #383691; }

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px); }

.slider.round {
  border-radius: 34px; }

.slider.round:before {
  border-radius: 50%; }

.bengali-list {
  list-style-type: none;
  counter-reset: bengali-counter; }

.bengali-list li {
  counter-increment: bengali-counter;
  position: relative;
  padding-left: 25px; }

.bengali-list li::before {
  content: counter(bengali-counter, bengali) ". ";
  position: absolute;
  left: 0;
  font-size: 16px;
  font-family: 'Noto Sans Bengali', sans-serif; }

@counter-style bengali {
  system: cyclic;
  symbols: '\995' '\996' '\997' '\998' '\999' '\99A' '\99B' '\99C' '\99D' '\99E' '\99F' '\9A0' '\9A1' '\9A2' '\9A3' '\9A4' '\9A5' '\9A6' '\9A7' '\9A8' '\9AA' '\9AB' '\9AC' '\9AD' '\9AE' '\9AF' '\9B0' '\9B2' '\9B6' '\9B7' '\9B8' '\9B9'; }

@media screen and (max-width: 1024px) {
  .privacy-policy {
    width: calc(var(--singleGridWidth) * 4); }
    .privacy-policy__indent li::marker {
      font-size: 15px; }
  .bengali-list li::before {
    font-size: 13px; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.remote-developers {
  margin-top: 90px; }

@media screen and (max-width: 1024px) {
  .remote-developers {
    margin-top: 72px; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.left-aligned-section {
  height: auto;
  position: relative;
  margin-top: var(--margin166);
  display: flex;
  flex-direction: row; }
  .left-aligned-section .wrap-plus {
    position: absolute;
    top: -15px;
    left: var(--sideGridWidth); }
  .left-aligned-section .management-verticle-text {
    font-family: "Roboto-Medium";
    font-size: var(--font20);
    color: #26252e;
    font-weight: 500;
    line-height: 32px;
    position: absolute;
    top: 150px;
    left: var(--sideGridWidth);
    transform: translateX(-100%) rotate(-90deg);
    transform-origin: right top; }
  .left-aligned-section .clutch-left-section {
    position: relative;
    display: flex;
    z-index: 1;
    flex-direction: column;
    width: calc(var(--sideGridWidth) + var(--singleGridWidth) * 4);
    padding-left: calc(var(--sideGridWidth) + var(--singleGridWidth)); }
    .left-aligned-section .clutch-left-section .management-top-line {
      width: 113px;
      height: 7px;
      background-color: #000000;
      position: relative;
      margin-top: -3px; }
    .left-aligned-section .clutch-left-section .management-title {
      font-family: "Roboto-Medium";
      font-size: var(--font48);
      color: #26252e;
      font-weight: 500;
      line-height: 70px;
      position: relative;
      width: calc(var(--singleGridWidth) * 2);
      margin-top: 58px; }
    .left-aligned-section .clutch-left-section .management-description {
      font-family: "Roboto-Regular";
      font-size: 22px;
      color: #26252e;
      font-weight: 400;
      line-height: 42px;
      position: relative;
      width: calc(var(--singleGridWidth) * 2);
      opacity: 0.8;
      margin: 24px 0px 71px 0px; }
  .left-aligned-section .clutch-right-section {
    position: relative;
    height: 660px; }
    .left-aligned-section .clutch-right-section .right-bg-color {
      background: #ecf1f2;
      width: calc(var(--sideGridWidth) + var(--singleGridWidth) * 3);
      height: calc(100% - 83px);
      position: absolute;
      left: var(--singleGridWidth);
      z-index: -1; }
    .left-aligned-section .clutch-right-section .feature-image {
      position: relative;
      width: calc(var(--singleGridWidth) * 4);
      height: calc(100% - 83px);
      margin-top: 83px;
      background-color: #7d7c82; }
      .left-aligned-section .clutch-right-section .feature-image img {
        height: 100%;
        width: 100%;
        object-fit: cover; }
  .left-aligned-section .bottom-border {
    display: block;
    position: absolute;
    bottom: 0;
    height: 1px;
    background-color: rgba(38, 37, 46, 0.3);
    width: calc(var(--singleGridWidth) * 2);
    left: calc(var(--sideGridWidth) + var(--singleGridWidth)); }

@media screen and (max-width: 1024px) {
  .left-aligned-section {
    position: relative;
    margin-top: 72px;
    flex-direction: column;
    padding-bottom: 84px; }
    .left-aligned-section .wrap-plus {
      position: absolute;
      top: -7.5px;
      left: var(--sideGridWidth); }
    .left-aligned-section .clutch-left-section {
      padding-left: 0; }
      .left-aligned-section .clutch-left-section .management-top-line {
        width: 50px;
        height: 7px;
        background-color: #000000;
        position: absolute;
        left: calc(var(--sideGridWidth) + var(--singleGridWidth));
        margin-top: -3px; }
      .left-aligned-section .clutch-left-section .management-title {
        font-size: 30px;
        line-height: 40px;
        left: calc(var(--sideGridWidth) + var(--singleGridWidth));
        width: calc(var(--singleGridWidth) * 2);
        margin-top: 30px; }
      .left-aligned-section .clutch-left-section .management-description {
        left: calc(var(--sideGridWidth) + var(--singleGridWidth));
        width: calc(calvar(--singleGridWidth) * 3);
        letter-spacing: 0.02em;
        color: rgba(38, 37, 46, 0.8);
        font-size: 12px;
        line-height: 20px;
        margin-top: 24px; }
    .left-aligned-section .clutch-right-section {
      height: 216px;
      margin-top: 36px; }
      .left-aligned-section .clutch-right-section .right-bg-color {
        background: #ecf1f2;
        width: calc(var(--sideGridWidth) + var(--singleGridWidth) * 2);
        height: 216px;
        position: absolute;
        left: calc(var(--sideGridWidth) + var(--singleGridWidth) * 2);
        top: 0; }
      .left-aligned-section .clutch-right-section .feature-image {
        margin-left: calc(var(--sideGridWidth) + var(--singleGridWidth));
        width: calc(var(--singleGridWidth) * 3);
        height: 216px;
        margin-top: 36px; }
        .left-aligned-section .clutch-right-section .feature-image img {
          height: 100%;
          width: 100%;
          object-fit: cover; }
    .left-aligned-section .management-verticle-text {
      top: 295px;
      font-size: 12px;
      line-height: 18px; }
    .left-aligned-section .mobile-bottom-border {
      display: none; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.text-section {
  font-family: "Roboto-Bold";
  margin-top: 10px; }

.right-aligned-section {
  height: 675px;
  position: relative;
  margin-top: var(--margin166);
  margin-bottom: var(--margin166); }
  .right-aligned-section .wrap-plus {
    position: absolute;
    top: -15px;
    left: unset;
    right: calc(var(--sideGridWidth) - 28px); }
  .right-aligned-section .verticle-text {
    font-family: "Roboto-Medium";
    font-size: var(--font20);
    color: #000000;
    font-weight: 500;
    line-height: 32px;
    position: absolute;
    z-index: 1;
    top: 201px;
    left: var(--sideGridWidth);
    transform: translateX(-100%) rotate(-90deg);
    transform-origin: right top; }
  .right-aligned-section .title-description-with-image {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row; }
    .right-aligned-section .title-description-with-image .background-image {
      position: relative;
      height: 100%;
      width: calc(var(--sideGridWidth) + var(--singleGridWidth) * 3);
      background-color: #7d7c82; }
      .right-aligned-section .title-description-with-image .background-image .left-bg-color {
        background: #ecf1f2;
        width: calc(var(--sideGridWidth) + var(--singleGridWidth));
        height: 100%;
        position: absolute;
        top: 0;
        left: 0; }
      .right-aligned-section .title-description-with-image .background-image .feature-image {
        position: absolute;
        left: calc(var(--sideGridWidth) + var(--singleGridWidth));
        width: calc(var(--singleGridWidth) * 2);
        height: 100%;
        top: 0; }
        .right-aligned-section .title-description-with-image .background-image .feature-image img {
          height: 100%;
          width: calc(var(--singleGridWidth) * 2);
          object-fit: cover; }
    .right-aligned-section .title-description-with-image .bar-title-description {
      padding-top: 93px;
      margin-left: var(--singleGridWidth); }
      .right-aligned-section .title-description-with-image .bar-title-description .management-top-line {
        width: 113px;
        height: 7px;
        background-color: #000000;
        position: relative;
        margin-bottom: 58px; }
      .right-aligned-section .title-description-with-image .bar-title-description .management-title {
        font-family: "Roboto-Medium";
        font-size: var(--font60);
        color: #26252e;
        font-weight: 500;
        line-height: 90px;
        position: relative;
        width: calc(var(--singleGridWidth) * 3);
        margin-bottom: 34px; }
      .right-aligned-section .title-description-with-image .bar-title-description .management-description {
        font-family: "Roboto-Regular";
        font-size: var(--font20);
        color: #26252e;
        font-weight: 400;
        line-height: 34px;
        position: relative;
        width: calc(var(--singleGridWidth) * 3 - 0px);
        letter-spacing: 0.02em;
        opacity: 0.7; }
        .right-aligned-section .title-description-with-image .bar-title-description .management-description ul {
          font-family: "Roboto-Medium";
          font-size: 22px;
          color: #26252e;
          font-weight: 500;
          line-height: 36px;
          opacity: 0.7; }
  .right-aligned-section .mobile-bottom-border {
    border-bottom: 1px solid #26252e;
    position: absolute;
    right: var(--sideGridWidth);
    width: calc(var(--singleGridWidth));
    bottom: 0;
    opacity: 0.3;
    display: block; }

@media screen and (max-width: 1024px) {
  .right-aligned-section {
    height: auto;
    position: relative;
    width: 100%;
    padding-bottom: 48px; }
    .right-aligned-section .left-bg-color {
      background: #ecf1f2;
      width: calc(var(--sideGridWidth) + var(--singleGridWidth));
      height: 290px;
      position: absolute;
      left: 0;
      top: 400px; }
    .right-aligned-section .wrap-plus {
      position: absolute;
      top: -8px;
      left: unset;
      right: calc(var(--sideGridWidth) - 15px); }
    .right-aligned-section .feature-image {
      position: absolute;
      left: calc(var(--sideGridWidth) + var(--singleGridWidth));
      width: calc(var(--singleGridWidth) * 2);
      height: 290px;
      top: 400px; }
      .right-aligned-section .feature-image img {
        height: 290px;
        width: calc(var(--singleGridWidth) * 2);
        object-fit: cover; }
    .right-aligned-section .verticle-text {
      font-family: "Roboto-Medium";
      font-size: 12px;
      color: #000000;
      font-weight: 500;
      line-height: 18px;
      top: 88px; }
    .right-aligned-section .title-description-with-image {
      flex-direction: column-reverse;
      height: auto; }
      .right-aligned-section .title-description-with-image .background-image {
        position: relative;
        height: 290px;
        width: calc(var(--sideGridWidth) + var(--singleGridWidth) * 3); }
      .right-aligned-section .title-description-with-image .bar-title-description {
        margin-bottom: 36px;
        padding-top: 0;
        margin-left: calc(var(--sideGridWidth) + var(--singleGridWidth)); }
        .right-aligned-section .title-description-with-image .bar-title-description .management-top-line {
          width: 50px;
          height: 7px;
          margin-bottom: 27px; }
        .right-aligned-section .title-description-with-image .bar-title-description .management-title {
          line-height: 40px;
          width: calc(var(--singleGridWidth) * 2.5);
          margin-bottom: 24px; }
        .right-aligned-section .title-description-with-image .bar-title-description .management-description {
          line-height: 20px;
          width: calc(var(--singleGridWidth) * 3); }
    .right-aligned-section .mobile-bottom-border {
      border-bottom: 1px solid #26252e;
      position: absolute;
      right: 0;
      width: calc(var(--sideGridWidth) + var(--singleGridWidth));
      bottom: 0;
      opacity: 0.3;
      display: block; } }

@media screen and (min-width: 1025px) and (max-width: calc(1366px - 1px)) {
  .right-aligned-section {
    margin-top: var(--singleGridWidth);
    margin-bottom: 0px; }
    .right-aligned-section .title-description-with-image .bar-title-description {
      padding-top: 75px; }
      .right-aligned-section .title-description-with-image .bar-title-description .management-title {
        font-size: var(--font56);
        width: calc(var(--singleGridWidth) * 4);
        margin-bottom: 30px; }
      .right-aligned-section .title-description-with-image .bar-title-description .management-description .read-more-section .read-description {
        font-size: var(--font20);
        width: calc(var(--singleGridWidth) * 3.1); }
      .right-aligned-section .title-description-with-image .bar-title-description .management-top-line {
        margin-bottom: 30px; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.custom-slider {
  margin-top: var(--margin166);
  min-height: 1006px;
  position: relative;
  overflow: visible;
  width: 100%; }
  .custom-slider .bottom-line {
    position: absolute;
    bottom: 0;
    right: 0;
    left: unset;
    width: calc(calc(var(--singleGridWidth) * 2) + var(--sideGridWidth));
    height: 1px;
    background: rgba(38, 37, 46, 0.3); }
  .custom-slider .wrap-plus {
    top: -14px;
    right: calc(var(--sideGridWidth) - 30px);
    left: unset; }
  .custom-slider .bg-with-grid-line .left-bg-color {
    background: #ecf1f2;
    height: 100%;
    width: calc((var(--singleGridWidth) * 5) + var(--sideGridWidth));
    position: absolute;
    z-index: -1; }
  .custom-slider .dd-header-block {
    position: relative;
    z-index: 2;
    margin-left: calc(var(--sideGridWidth) + var(--singleGridWidth)); }
    .custom-slider .dd-header-block .vertical-line-top {
      width: 113px;
      height: 7px;
      background-color: #000000;
      left: var(--secondGridLeft);
      margin-bottom: 53px; }
    .custom-slider .dd-header-block .dedicated-team-title {
      font-family: "Roboto-Medium";
      font-size: 58px;
      color: #000000;
      font-weight: 500;
      line-height: 90px;
      left: var(--secondGridLeft);
      width: calc((var(--singleGridWidth) * 3.7));
      margin-bottom: 48px; }
    .custom-slider .dd-header-block .dedicated-team-description {
      font-family: "Roboto-Regular";
      font-size: var(--font20);
      color: rgba(38, 37, 46, 0.7);
      font-weight: normal;
      line-height: 34px;
      left: calc((var(--singleGridWidth) * 2) + var(--sideGridWidth));
      width: calc(var(--singleGridWidth) * 4);
      margin-bottom: 83px; }
  .custom-slider .dedicated-verticle-text {
    font-family: "Roboto-Medium";
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 32px;
    letter-spacing: 0.02em;
    color: #26252e;
    position: absolute;
    bottom: 320px;
    left: var(--sideGridWidth);
    transform: rotate(-90deg);
    transform-origin: left top; }
  .custom-slider .work-dedicated-verticle-text {
    font-family: "Roboto-Medium";
    font-style: normal;
    font-weight: 500;
    font-size: var(--font20);
    line-height: 32px;
    letter-spacing: 0.02em;
    color: #26252e;
    position: absolute;
    bottom: 210px;
    left: var(--sideGridWidth);
    transform: rotate(-90deg);
    transform-origin: left top; }
  .custom-slider .small-vertical {
    bottom: 220px !important; }
  .custom-slider .team-slider-area {
    position: relative;
    z-index: 2;
    margin-left: calc(var(--sideGridWidth) + 80px);
    height: 315px;
    width: 93%; }
    .custom-slider .team-slider-area .slick-initialized {
      max-width: 1320px; }
    .custom-slider .team-slider-area .slick-slide .slider-item {
      display: flex !important;
      justify-content: flex-start; }
      .custom-slider .team-slider-area .slick-slide .slider-item:focus {
        outline: none; }
    .custom-slider .team-slider-area .slick-slider .slick-prev,
    .custom-slider .team-slider-area .slick-slider .slick-next {
      display: none !important; }
    .custom-slider .team-slider-area .image-content-area {
      position: relative;
      width: 24%;
      height: 315px;
      cursor: pointer; }
      .custom-slider .team-slider-area .image-content-area img {
        width: 100%;
        height: 100%; }
      .custom-slider .team-slider-area .image-content-area .overlay-bg {
        background: rgba(38, 37, 46, 0.5);
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0; }
      .custom-slider .team-slider-area .image-content-area .top-content-block {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center; }
        .custom-slider .team-slider-area .image-content-area .top-content-block .overlay-icon {
          display: block;
          z-index: 1;
          position: absolute;
          width: auto;
          height: auto;
          overflow: hidden; }
        .custom-slider .team-slider-area .image-content-area .top-content-block .overlay-icon-work-details {
          z-index: 1;
          position: absolute;
          top: 100px;
          object-fit: contain;
          height: auto;
          width: auto; }
        .custom-slider .team-slider-area .image-content-area .top-content-block .caption {
          z-index: 2;
          position: absolute;
          bottom: 67px;
          left: 42.5px;
          width: 230px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          font-family: "Roboto-Regular";
          font-size: var(--font20);
          color: #ffffff;
          font-weight: normal;
          line-height: 36px;
          text-align: center; }
        .custom-slider .team-slider-area .image-content-area .top-content-block .caption-work-details {
          z-index: 2;
          position: absolute;
          bottom: 37px;
          width: 90%;
          height: 70px;
          font-family: "Roboto-Regular";
          font-size: 24px;
          color: #ffffff;
          font-weight: normal;
          line-height: 36px;
          text-align: center;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis; }
        .custom-slider .team-slider-area .image-content-area .top-content-block .overlay-details {
          display: none;
          font-family: "Roboto-Regular";
          font-size: 20px;
          color: #ffffff;
          font-weight: 400;
          line-height: 26px;
          z-index: 2;
          position: absolute;
          left: 13px;
          top: 120px;
          width: 95%;
          height: 70px; }
      .custom-slider .team-slider-area .image-content-area:hover .overlay-bg {
        background: rgba(38, 37, 46, 0.95); }
      .custom-slider .team-slider-area .image-content-area:hover .overlay-icon-work-details {
        display: none; }
      .custom-slider .team-slider-area .image-content-area:hover .caption-work-details {
        text-align: left;
        bottom: unset;
        top: 24px;
        left: 13px;
        border-bottom: 1px solid #ffffff;
        font-family: "Roboto-Regular";
        font-size: 20px;
        color: #ffffff;
        font-weight: normal;
        line-height: 30px;
        padding-bottom: 14px; }
      .custom-slider .team-slider-area .image-content-area:hover .overlay-details {
        display: block; }
    .custom-slider .team-slider-area .image-content-area:nth-child(1) {
      margin-right: 20px; }
    .custom-slider .team-slider-area .image-content-area:nth-child(2) {
      margin-right: 20px; }
    .custom-slider .team-slider-area .image-content-area:nth-child(3) {
      margin-right: 20px; }
    .custom-slider .team-slider-area .image-content-area:nth-child(4) {
      margin-right: 0px; }
  .custom-slider .dot-line-block {
    padding-top: 48px;
    position: relative;
    display: block;
    z-index: 3;
    margin-left: calc(var(--sideGridWidth) + 68px); }
    .custom-slider .dot-line-block .dot-item {
      margin-right: 8px;
      float: left;
      height: 8px;
      width: 8px;
      background-color: #000000;
      opacity: 0.3;
      outline: none;
      cursor: pointer; }
    .custom-slider .dot-line-block .active {
      width: 48px;
      opacity: 1; }
  .custom-slider .wrap-slider-next-pre {
    margin-left: calc(calc(var(--singleGridWidth) * 6) + calc(var(--sideGridWidth)));
    height: calc(var(--singleGridWidth) / 2);
    width: var(--singleGridWidth);
    display: flex;
    margin-bottom: 115px;
    justify-content: space-between;
    background-color: #26252e;
    z-index: 3;
    overflow: hidden; }
    .custom-slider .wrap-slider-next-pre .next-pre-box {
      width: calc(100% / 2);
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      background-color: #26252e;
      outline: none; }
    .custom-slider .wrap-slider-next-pre :hover {
      background-color: #000000; }
    .custom-slider .wrap-slider-next-pre .pre {
      transform: rotate(180deg); }

.no-slider-height {
  height: 880px; }

@media screen and (min-width: 1591px) and (max-width: 1919px) {
  .custom-slider {
    overflow: hidden; } }

@media screen and (min-width: 1280px) and (max-width: calc(1366px - 1px)) {
  .custom-slider {
    margin-top: var(--singleGridWidth); }
    .custom-slider .team-slider-area .image-content-area {
      width: calc( calc(var(--singleGridWidth) * 2) - calc(var(--singleGridWidth) / 7.1)) !important;
      height: calc( calc(var(--singleGridWidth) * 2) - calc(var(--singleGridWidth) / 6)) !important; } }

@media screen and (min-width: 1025px) and (max-width: calc(1366px - 1px)) {
  .custom-slider {
    margin-top: var(--singleGridWidth); }
    .custom-slider .team-slider-area .image-content-area {
      position: relative;
      width: calc( calc(var(--singleGridWidth) * 2) - calc(var(--singleGridWidth) / 6));
      height: calc( calc(var(--singleGridWidth) * 2) - calc(var(--singleGridWidth) / 6)); }
      .custom-slider .team-slider-area .image-content-area img {
        width: 100%;
        height: 100%; }
      .custom-slider .team-slider-area .image-content-area .overlay-bg {
        background: rgba(38, 37, 46, 0.5);
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0; }
      .custom-slider .team-slider-area .image-content-area .overlay-icon {
        z-index: 2;
        position: absolute;
        top: 25%;
        left: calc(50% - 20.5px);
        object-fit: contain;
        height: 50px;
        width: 50px; }
      .custom-slider .team-slider-area .image-content-area .overlay-icon-work-details {
        z-index: 2;
        position: absolute;
        top: 25%;
        left: calc(50% - 20.5px);
        object-fit: contain;
        height: 50px;
        width: 50px; }
      .custom-slider .team-slider-area .image-content-area .caption {
        z-index: 2;
        position: absolute;
        bottom: 10%;
        left: 9%;
        width: 90%;
        height: 70px;
        font-family: "Roboto-Regular";
        font-size: var(--font18);
        color: #ffffff;
        font-weight: normal;
        line-height: 25px;
        text-align: center;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis; }
      .custom-slider .team-slider-area .image-content-area .caption-work-details {
        z-index: 2;
        position: absolute;
        bottom: 10%;
        height: 70px;
        font-family: "Roboto-Regular";
        font-size: var(--font18);
        color: #ffffff;
        font-weight: normal;
        line-height: 25px;
        text-align: center;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        left: 9%;
        width: 90%; }
    .custom-slider .team-slider-area .image-content-area:nth-child(1) {
      margin-right: calc(var(--singleGridWidth) / 6); }
    .custom-slider .team-slider-area .image-content-area:nth-child(2) {
      margin-right: calc(var(--singleGridWidth) / 6); }
    .custom-slider .team-slider-area .image-content-area:nth-child(3) {
      margin-right: calc(var(--singleGridWidth) / 6); }
    .custom-slider .team-slider-area .image-content-area:nth-child(4) {
      margin-right: 0px; } }

@media screen and (min-width: 1366px) and (max-width: calc(1440px - 1px)) {
  .custom-slider {
    margin-top: 156px !important; }
    .custom-slider .wrap-plus {
      top: -14px;
      right: calc(var(--sideGridWidth) - 28px);
      left: unset; }
    .custom-slider .team-slider-area {
      width: 92%;
      margin-left: 108px; }
      .custom-slider .team-slider-area .slick-slide .slider-item .image-content-area {
        width: 24%;
        height: 297px; } }

@media screen and (min-width: 1440px) and (max-width: calc(1440px + 150px)) {
  .custom-slider {
    overflow: hidden; }
    .custom-slider .wrap-plus {
      top: 0px; } }

@media screen and (min-width: 1920px) {
  .custom-slider {
    overflow: hidden; }
    .custom-slider .wrap-plus {
      top: 0;
      right: calc(var(--sideGridWidth) - 30px);
      left: unset; }
    .custom-slider .team-slider-area {
      margin-left: calc(var(--sideGridWidth) + 80px); }
      .custom-slider .team-slider-area .slick-initialized {
        max-width: 1320px; }
    .custom-slider .dot-line-block {
      margin-left: calc(var(--sideGridWidth) + 90px); } }

@media screen and (max-width: 1024px) {
  .work-dedicated-height {
    height: 588px !important; }
  .custom-slider {
    margin-top: 72px;
    min-height: 642px;
    position: relative;
    overflow: hidden;
    padding-top: 0px; }
    .custom-slider .wrap-plus {
      right: calc(var(--sideGridWidth) - 16px);
      top: 0px; }
    .custom-slider .bottom-line {
      width: calc(var(--sideGridWidth) + var(--singleGridWidth));
      bottom: -48px;
      background: rgba(0, 0, 0, 0.3); }
    .custom-slider .bg-with-grid-line .left-bg-color {
      width: calc((var(--singleGridWidth) * 3) + var(--sideGridWidth)); }
    .custom-slider .bg-with-grid-line .grid-two {
      left: calc(var(--singleGridWidth) + var(--sideGridWidth)); }
    .custom-slider .bg-with-grid-line .grid-three {
      left: calc(calc(var(--singleGridWidth) * 2) + var(--sideGridWidth)); }
    .custom-slider .bg-with-grid-line .grid-four {
      left: calc(calc(var(--singleGridWidth) * 3) + var(--sideGridWidth)); }
    .custom-slider .bg-with-grid-line .grid-five {
      left: calc(calc(var(--singleGridWidth) * 4) + var(--sideGridWidth)); }
    .custom-slider .bg-with-grid-line .grid-six {
      display: none; }
    .custom-slider .left-bg-color {
      background: #ecf1f2;
      height: 548px;
      width: calc((var(--singleGridWidth) * 3) + var(--sideGridWidth));
      position: absolute;
      z-index: -1; }
    .custom-slider .dd-header-block .vertical-line-top {
      width: 50px;
      height: 7px;
      background-color: #000000;
      margin-bottom: 30px;
      position: relative;
      top: -3px;
      left: unset; }
    .custom-slider .dd-header-block .dedicated-team-title {
      font-family: "Roboto-Medium";
      font-size: 30px;
      color: #26252e;
      font-weight: 500;
      line-height: 40px;
      width: calc(var(--singleGridWidth) * 2 + 10px);
      z-index: 2;
      margin-bottom: 24px;
      letter-spacing: unset; }
    .custom-slider .dd-header-block .dedicated-team-description {
      font-family: "Roboto-Regular";
      font-size: 12px;
      color: rgba(38, 37, 46, 0.7);
      font-weight: normal;
      line-height: 20px;
      width: calc(calc(var(--singleGridWidth) * 2));
      margin-bottom: 36px;
      margin-left: 40px; }
    .custom-slider .dedicated-verticle-text {
      font-family: "Roboto-Medium";
      font-size: 12px;
      color: #000000;
      font-weight: 500;
      line-height: 18px;
      position: absolute;
      bottom: 80px;
      left: var(--sideGridWidth);
      transform: rotate(-90deg);
      transform-origin: left top; }
    .custom-slider .work-dedicated-verticle-text {
      font-family: "Roboto-Medium";
      font-size: 12px;
      color: #000000;
      font-weight: 500;
      line-height: 18px;
      position: absolute;
      bottom: 205px;
      left: var(--sideGridWidth);
      transform: rotate(-90deg);
      transform-origin: left top; }
    .custom-slider .team-slider-area {
      height: 262px;
      left: calc(var(--sideGridWidth) + 40px);
      width: 84%;
      margin-left: 0;
      overflow: hidden; }
      .custom-slider .team-slider-area .image-content-area {
        position: relative;
        width: 126px;
        height: 126px; }
        .custom-slider .team-slider-area .image-content-area .overlay-bg {
          background: rgba(38, 37, 46, 0.5);
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0; }
        .custom-slider .team-slider-area .image-content-area .top-content-block .overlay-icon {
          position: static;
          top: 17px;
          left: 35px;
          width: 30px;
          height: 30px;
          margin-bottom: 19px; }
        .custom-slider .team-slider-area .image-content-area .top-content-block .overlay-icon-work-details {
          position: static;
          top: 17px;
          left: 35px;
          width: 30px;
          height: 30px; }
        .custom-slider .team-slider-area .image-content-area .top-content-block .caption {
          position: static;
          bottom: 22px;
          width: 100%;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          font-family: "Roboto-Regular";
          font-size: 12px;
          color: #ffffff;
          font-weight: normal;
          line-height: 20px;
          text-align: center; }
        .custom-slider .team-slider-area .image-content-area .top-content-block .caption-work-details {
          position: static;
          padding-top: 10px;
          width: 90%;
          font-family: "Roboto-Regular";
          font-size: 12px;
          color: #ffffff;
          font-weight: normal;
          line-height: 20px;
          text-align: center;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis; }
      .custom-slider .team-slider-area .slick-slide .slider-item {
        flex-wrap: wrap; }
        .custom-slider .team-slider-area .slick-slide .slider-item .image-content-area {
          width: 48%;
          margin-bottom: 10px; }
      .custom-slider .team-slider-area .image-content-area:nth-child(1) {
        margin-right: 10px; }
      .custom-slider .team-slider-area .image-content-area:nth-child(2) {
        margin-right: 0px; }
      .custom-slider .team-slider-area .image-content-area:nth-child(3) {
        margin-right: 10px; }
      .custom-slider .team-slider-area .image-content-area:nth-child(4) {
        margin-right: 0px; }
    .custom-slider .dot-line-block {
      padding-top: 24px;
      margin-left: calc(var(--sideGridWidth) + 42px); }
    .custom-slider .wrap-slider-next-pre {
      position: relative;
      width: var(--singleGridWidth);
      height: 36px;
      margin-left: calc(var(--singleGridWidth) * 3 + 20px); }
      .custom-slider .wrap-slider-next-pre img {
        width: 18px;
        height: 14px; }
  .no-slider-height {
    height: 582px; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.highlights {
  position: relative; }

.highlights-background {
  position: absolute;
  top: 0;
  left: calc(var(--sideGridWidth) + var(--singleGridWidth) * 4);
  width: calc((4 * var(--singleGridWidth)) + var(--sideGridWidth));
  height: 812px;
  background-color: #ecf1f2;
  z-index: 1; }

.highlights-block {
  position: relative;
  display: flex;
  margin: var(--singleGridWidth) 0px var(--singleGridWidth) var(--sideGridWidth); }
  .highlights-block .photo-and-name {
    width: calc(var(--singleGridWidth) * 4);
    z-index: 1; }
  .highlights-block .highlights-photo {
    width: calc(var(--singleGridWidth) * 4); }
    .highlights-block .highlights-photo img {
      width: 100%;
      height: auto;
      background-color: #7d7c82; }
  .highlights-block .highlights-bottom {
    margin-top: 50px;
    text-align: center; }
  .highlights-block .highlights-name {
    font-family: "Roboto-Bold";
    font-size: 32px;
    color: #434eba;
    font-weight: 700;
    line-height: 55px; }
  .highlights-block .highlights-designation {
    font-family: "Roboto-Regular";
    font-size: 28px;
    color: rgba(38, 37, 46, 0.7);
    font-weight: 400;
    line-height: 55px; }
  .highlights-block .title-and-description {
    width: calc(var(--singleGridWidth) * 3.6);
    padding-left: 106px;
    z-index: 1; }
  .highlights-block .top-bar {
    margin: 94px 0px 70px 0px;
    width: 114px;
    height: 7px;
    background-color: #000000; }
  .highlights-block .highlights-title {
    font-family: "Roboto-Medium";
    font-size: 58px;
    color: #000000;
    font-weight: 500;
    line-height: 90px; }
  .highlights-block .highlights-description {
    font-family: "Roboto-Regular";
    font-size: var(--font24);
    color: rgba(34, 34, 34, 0.8);
    font-weight: 400;
    line-height: 40px;
    margin-top: 48px; }

@media screen and (max-width: 1024px) {
  .highlights-background {
    left: var(--sideGridWidth);
    width: calc(4 * var(--singleGridWidth));
    height: 390px; }
  .highlights-block {
    width: calc(var(--singleGridWidth) * 4);
    flex-direction: column-reverse;
    gap: 40px; }
    .highlights-block .highlights-bottom {
      margin-top: 30px; }
    .highlights-block .highlights-name {
      font-family: "Roboto-Bold";
      font-size: 18px;
      color: #434eba;
      font-weight: 700;
      line-height: 28px; }
    .highlights-block .highlights-designation {
      font-family: "Roboto-Regular";
      font-size: 14px;
      color: rgba(38, 37, 46, 0.7);
      font-weight: 400;
      line-height: 24px; }
    .highlights-block .title-and-description {
      padding-left: 36px; }
    .highlights-block .top-bar {
      margin-bottom: 24px;
      width: 50px;
      height: 7px; }
    .highlights-block .highlights-title {
      font-family: "Roboto-Medium";
      font-size: 30px;
      color: #000000;
      font-weight: 500;
      line-height: 40px; }
    .highlights-block .highlights-description {
      font-family: "Roboto-Regular";
      font-size: 12px;
      color: rgba(34, 34, 34, 0.8);
      font-weight: 400;
      line-height: 20px;
      margin: 30px 0px; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.resources-page {
  margin-top: 90px;
  position: relative; }
  .resources-page .agenda-items {
    display: flex; }
    .resources-page .agenda-items ul {
      margin: 0;
      padding: 0;
      margin-right: 90px; }
      .resources-page .agenda-items ul li {
        list-style: none;
        margin-bottom: 10px; }
        .resources-page .agenda-items ul li:hover {
          cursor: default; }
  .resources-page .down-arrow {
    height: 175px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; }
    .resources-page .down-arrow svg {
      z-index: 1; }
      .resources-page .down-arrow svg path {
        stroke: #000000; }
  .resources-page .eye-catch-read-more .read-more-body .left .description .read-more-section .read-description {
    padding-right: 55px; }

@media screen and (min-width: calc(1366px)) and (max-width: calc(1440px - 1px)) {
  .resources-page .eye-catch-read-more .read-more-body .left .description .read-more-section .read-description {
    padding-right: 0px; } }

@media screen and (max-width: 1024px) {
  .resources-page {
    margin-top: 70px;
    position: relative; }
    .resources-page .agenda-items ul {
      margin-right: 0; }
    .resources-page .down-arrow {
      height: 72px; }
      .resources-page .down-arrow svg {
        height: 22px;
        width: 16px; }
    .resources-page .eye-catch-read-more .read-more-body .left .description .read-more-section .read-description {
      padding-right: 0px; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.development-modules {
  position: relative;
  margin-bottom: var(--margin166);
  padding-bottom: 83px; }
  .development-modules .vertical-text {
    font-family: "Roboto-Medium";
    font-size: var(--font20);
    color: #26252e;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: 0.02em;
    position: absolute;
    z-index: 1;
    transform: rotate(-90deg) translateX(-100%);
    transform-origin: top left;
    left: var(--sideGridWidth);
    top: 95px; }
  .development-modules .wrap-plus {
    position: absolute;
    top: 0;
    left: calc(var(--singleGridWidth) * 6);
    transform: translate(-52%, -35%); }
  .development-modules .title-bar-description {
    position: relative;
    z-index: 2;
    margin-left: calc(var(--sideGridWidth) + var(--singleGridWidth));
    margin-bottom: 83px; }
    .development-modules .title-bar-description .bold-line {
      margin-bottom: 55px; }
    .development-modules .title-bar-description .title {
      font-family: "Roboto-Medium";
      font-size: var(--font59);
      color: #26252e;
      font-weight: 500;
      line-height: 90px;
      margin-bottom: 48px; }
    .development-modules .title-bar-description .description {
      margin-left: var(--singleGridWidth);
      font-family: "Roboto-Regular";
      font-size: var(--font20);
      color: rgba(38, 37, 46, 0.7);
      font-weight: 400;
      line-height: 30px;
      letter-spacing: 0.02em;
      width: calc(var(--singleGridWidth) * 4); }
      .development-modules .title-bar-description .description .read-more {
        opacity: 0.8;
        cursor: pointer;
        font-family: "Roboto-Medium";
        font-size: var(--font20);
        color: #16c36e;
        font-weight: 500;
        line-height: 23px; }
        .development-modules .title-bar-description .description .read-more svg {
          width: 15px;
          height: 10px; }
          .development-modules .title-bar-description .description .read-more svg path {
            stroke: #16c36e;
            stroke-width: 2px; }
  .development-modules .modules-list {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    margin: 0 var(--sideGridWidth); }
  .development-modules .background {
    top: 4px;
    left: 0;
    position: absolute;
    height: calc(100% - 4px);
    width: 100%; }
    .development-modules .background .bg-color {
      height: 100%;
      width: calc(100% - var(--singleGridWidth) - var(--sideGridWidth));
      background-color: #ecf1f2; }

@media screen and (max-width: 1024px) {
  .development-modules {
    padding-bottom: 36px; }
    .development-modules .vertical-text {
      line-height: 18px; }
    .development-modules .wrap-plus {
      left: calc(var(--singleGridWidth) * 3); }
    .development-modules .title-bar-description {
      margin-bottom: 36px; }
      .development-modules .title-bar-description .bold-line {
        margin-bottom: 27px; }
      .development-modules .title-bar-description .title {
        line-height: 40px;
        margin-bottom: 24px; }
      .development-modules .title-bar-description .description {
        font-family: "Roboto-Regular";
        font-size: 12;
        color: rgba(38, 37, 46, 0.7);
        font-weight: 400;
        line-height: 20px;
        margin-left: calc(var(--singleGridWidth) / 2);
        width: calc(var(--singleGridWidth) * 2 + calc(var(--singleGridWidth) / 2)); }
        .development-modules .title-bar-description .description .read-more {
          line-height: 20px; }
          .development-modules .title-bar-description .description .read-more svg {
            width: 10px;
            height: 7px; }
    .development-modules .modules-list {
      flex-wrap: wrap;
      margin: 0; }
    .development-modules .background .grid-line .grid-four,
    .development-modules .background .grid-line .grid-five {
      display: none; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.module-grid {
  width: calc(var(--singleGridWidth) + 142px);
  height: 307px;
  padding: 12px 0 0 35px;
  background-color: #26252e;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  flex-direction: column; }
  .module-grid .header {
    font-family: "Roboto-Medium";
    font-size: 36px;
    color: #ffffff;
    font-weight: 500;
    line-height: 60px;
    margin-bottom: 15px; }
  .module-grid .title-item-with-details {
    display: flex;
    justify-content: space-between;
    height: 100%; }
    .module-grid .title-item-with-details .title-item-list {
      display: flex;
      flex-direction: column;
      padding-top: 37px;
      justify-content: space-between; }
      .module-grid .title-item-with-details .title-item-list .title {
        font-family: "Roboto-Medium";
        font-size: var(--font20);
        color: #ffffff;
        font-weight: 500;
        line-height: 30px;
        letter-spacing: 0.02em; }
      .module-grid .title-item-with-details .title-item-list .item-list {
        display: flex;
        flex-direction: column;
        font-family: "Roboto-Regular";
        font-size: var(--font20);
        color: #ffffff;
        font-weight: 400;
        line-height: 30px;
        letter-spacing: 0.02em;
        margin-bottom: 21px; }
    .module-grid .title-item-with-details .details-navigation {
      width: 83px;
      height: 100%;
      background-color: #434eba; }
      .module-grid .title-item-with-details .details-navigation a {
        text-decoration: none;
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding-top: 35px; }
        .module-grid .title-item-with-details .details-navigation a .details {
          font-family: "Roboto-Regular";
          font-size: var(--font20);
          color: #ffffff;
          font-weight: 400;
          line-height: 23px;
          transform: translateX(-67.5%) rotate(-90deg);
          transform-origin: top right;
          margin-bottom: 58px; }
        .module-grid .title-item-with-details .details-navigation a svg {
          width: 15px; }
  .module-grid .background-number {
    font-family: "Roboto-Bold";
    font-size: 150px;
    color: #ffffff;
    font-weight: 700;
    line-height: 30px;
    letter-spacing: 0.02em;
    opacity: 0.2;
    position: absolute;
    bottom: 0;
    left: -7px; }

@media screen and (min-width: calc(1366px - 1px)) and (max-width: calc(1440px - 1px)) {
  .module-grid .title-item-with-details .details-navigation a .details {
    font-family: "Roboto-Regular";
    font-size: var(--font20);
    color: #ffffff;
    font-weight: 400;
    line-height: 23px;
    transform: translateX(-71%) rotate(-90deg); } }

@media screen and (max-width: 1024px) {
  .module-grid {
    padding: 10px 0 0 16px;
    margin-bottom: 8px;
    width: calc(var(--singleGridWidth) * 2 + var(--sideGridWidth) - 4px);
    height: 156px; }
    .module-grid .header {
      font-size: 20px;
      line-height: 24px;
      margin-bottom: 2px; }
    .module-grid .title-item-with-details {
      height: calc(100% - 36px); }
      .module-grid .title-item-with-details .title-item-list {
        padding-top: 16px; }
        .module-grid .title-item-with-details .title-item-list .title {
          line-height: 20px;
          letter-spacing: normal; }
        .module-grid .title-item-with-details .title-item-list .item-list {
          font-weight: 300;
          line-height: 16px;
          margin-bottom: 10px; }
      .module-grid .title-item-with-details .details-navigation {
        position: relative;
        z-index: 2;
        width: 36px; }
        .module-grid .title-item-with-details .details-navigation a {
          padding-top: 10px; }
          .module-grid .title-item-with-details .details-navigation a .details {
            line-height: 20px;
            margin-bottom: 26px;
            transform: translateX(-76.5%) rotate(-90deg); }
          .module-grid .title-item-with-details .details-navigation a svg {
            width: 15px;
            height: 48px; }
    .module-grid .background-number {
      font-size: 60px;
      opacity: 0.15;
      line-height: 70px;
      bottom: -26px; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.module-one {
  position: relative;
  padding-bottom: 116px;
  margin-bottom: var(--margin166); }
  .module-one .vertical-text {
    font-family: "Roboto-Medium";
    font-size: var(--font20);
    color: #26252e;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: 0.02em;
    position: absolute;
    z-index: 1;
    left: var(--sideGridWidth);
    top: 376px;
    transform: translateX(-100%) rotate(-90deg);
    transform-origin: top right; }
  .module-one .background-text {
    font-family: "Roboto-Medium";
    font-size: var(--font250);
    color: #ecf1f2;
    font-weight: 500;
    line-height: 231px;
    position: absolute;
    top: 228px;
    left: -55px; }
  .module-one .bottom-border-line {
    background-color: #26252e;
    opacity: 0.3;
    height: 1px;
    position: absolute;
    bottom: 0;
    left: var(--sideGridWidth);
    width: calc(var(--singleGridWidth) * 5); }
  .module-one .module-items-structure {
    margin-top: 83px;
    display: flex;
    margin-left: calc(var(--singleGridWidth) * 2 + var(--sideGridWidth)); }
    .module-one .module-items-structure .row-one,
    .module-one .module-items-structure .row-two,
    .module-one .module-items-structure .row-three {
      display: flex;
      flex-direction: column; }
    .module-one .module-items-structure .row-one {
      width: calc(var(--singleGridWidth) * 2); }
    .module-one .module-items-structure .row-two {
      width: 77px;
      padding-top: 164px; }
    .module-one .module-items-structure .row-three {
      padding-top: 160px;
      width: calc(var(--singleGridWidth) * 2); }

@media screen and (max-width: 1024px) {
  .module-one {
    padding-bottom: 48px; }
    .module-one .vertical-text {
      top: 148px;
      line-height: 18px; }
    .module-one .background-text {
      font-family: "Roboto-Medium";
      font-size: 80px;
      color: #ecf1f2;
      font-weight: 500;
      line-height: 90px;
      top: 169px;
      left: -26px;
      opacity: 0.5; }
    .module-one .bottom-border-line {
      bottom: 0;
      left: 0;
      width: calc(var(--sideGridWidth) + var(--singleGridWidth) * 2); }
    .module-one .module-items-structure {
      margin-top: 36px;
      margin-left: calc(var(--singleGridWidth) + var(--sideGridWidth) + 32px); }
      .module-one .module-items-structure .row-one {
        width: calc(var(--singleGridWidth) + 8px); }
      .module-one .module-items-structure .row-two {
        width: 24px;
        padding-top: 65px; }
      .module-one .module-items-structure .row-three {
        padding-top: 60px;
        width: calc(var(--singleGridWidth) + 8px); } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.module-title-description {
  position: relative;
  z-index: 2;
  margin-left: calc(var(--sideGridWidth) + var(--singleGridWidth)); }
  .module-title-description .bold-line {
    margin-bottom: 55px;
    top: 0; }
  .module-title-description .title {
    font-family: "Roboto-Medium";
    font-size: var(--font59);
    color: #26252e;
    font-weight: 500;
    line-height: 90px;
    margin-bottom: 48px; }
  .module-title-description .description {
    margin-left: var(--singleGridWidth);
    font-family: "Roboto-Regular";
    font-size: var(--font20);
    color: rgba(38, 37, 46, 0.7);
    font-weight: 400;
    line-height: 30px;
    letter-spacing: 0.02em;
    width: calc(var(--singleGridWidth) * 3); }
    .module-title-description .description .read-more {
      margin-left: 8px;
      opacity: 0.8;
      cursor: pointer;
      font-family: "Roboto-Medium";
      font-size: var(--font20);
      color: #16c36e;
      font-weight: 500;
      line-height: 23px; }
      .module-title-description .description .read-more svg {
        width: 15px;
        height: 10px; }
        .module-title-description .description .read-more svg path {
          stroke: #16c36e;
          stroke-width: 2px; }

@media screen and (max-width: 1024px) {
  .module-title-description .bold-line {
    margin-bottom: 27px;
    top: 0; }
  .module-title-description .title {
    line-height: 40px;
    margin-bottom: 24px; }
  .module-title-description .description {
    line-height: 20px;
    margin-left: calc(var(--singleGridWidth) / 2);
    width: calc(var(--singleGridWidth) * 2 + calc(var(--singleGridWidth) / 2)); }
    .module-title-description .description .read-more svg {
      width: 10px;
      height: 7px; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.module-color-item-box {
  position: relative;
  height: 83px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Roboto-Medium";
  font-size: var(--font20);
  color: #ffffff;
  font-weight: 500;
  line-height: 36px;
  text-align: center; }

@media screen and (max-width: 1024px) {
  .module-color-item-box {
    height: 36px;
    line-height: 16px; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.module-diamond-item {
  position: relative;
  height: 77px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center; }

@media screen and (max-width: 1024px) {
  .module-diamond-item {
    height: 24px; }
    .module-diamond-item svg {
      height: 6px;
      width: 6px; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.module-engineer-type {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #ecf1f2; }
  .module-engineer-type span {
    font-family: "Roboto-Regular";
    font-size: var(--font20);
    color: #26252e;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: 0.02em;
    opacity: 0.7;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 83px; }

@media screen and (max-width: 1024px) {
  .module-engineer-type span {
    height: 41.3px; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.module-two {
  position: relative;
  padding-bottom: 116px;
  margin-bottom: var(--margin166);
  overflow: hidden; }
  .module-two .vertical-text {
    font-family: "Roboto-Medium";
    font-size: var(--font20);
    color: #26252e;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: 0.02em;
    position: absolute;
    z-index: 1;
    left: var(--sideGridWidth);
    top: 402px;
    transform: translateX(-100%) rotate(-90deg);
    transform-origin: top right; }
  .module-two .background-text {
    font-family: "Roboto-Medium";
    font-size: var(--font250);
    color: #ecf1f2;
    font-weight: 500;
    line-height: 231px;
    position: absolute;
    top: 315px;
    right: -54px; }
  .module-two .bottom-border-line {
    background-color: #26252e;
    opacity: 0.3;
    height: 1px;
    position: absolute;
    bottom: 0;
    left: calc(var(--sideGridWidth) + var(--singleGridWidth) * 6);
    width: calc(var(--singleGridWidth) * 2); }
  .module-two .module-items-structure {
    margin-top: 83px;
    display: flex;
    margin-left: calc(var(--singleGridWidth) + var(--sideGridWidth)); }
    .module-two .module-items-structure .row-one,
    .module-two .module-items-structure .row-two,
    .module-two .module-items-structure .row-three {
      display: flex;
      flex-direction: column; }
    .module-two .module-items-structure .row-one {
      width: calc(var(--singleGridWidth) * 2); }
    .module-two .module-items-structure .row-two {
      width: 77px;
      padding-top: 164px; }
    .module-two .module-items-structure .row-three {
      padding-top: 160px;
      width: calc(var(--singleGridWidth) * 2); }

@media screen and (max-width: 1024px) {
  .module-two {
    padding-bottom: 48px; }
    .module-two .vertical-text {
      top: 191px;
      line-height: 18px; }
    .module-two .background-text {
      font-family: "Roboto-Medium";
      font-size: 80px;
      color: #ecf1f2;
      font-weight: 500;
      line-height: 90px;
      top: 165px;
      left: auto;
      right: -26px;
      opacity: 0.5; }
    .module-two .bottom-border-line {
      bottom: 0;
      left: auto;
      right: 0;
      width: calc(var(--sideGridWidth) + var(--singleGridWidth)); }
    .module-two .module-items-structure {
      margin-top: 36px;
      margin-left: calc(var(--singleGridWidth) + var(--sideGridWidth)); }
      .module-two .module-items-structure .row-one {
        width: calc(var(--singleGridWidth) + 8px); }
      .module-two .module-items-structure .row-two {
        width: 24px;
        padding-top: 65px; }
      .module-two .module-items-structure .row-three {
        padding-top: 60px;
        width: calc(var(--singleGridWidth) + 8px); } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.module-three {
  position: relative;
  padding-bottom: 116px;
  margin-bottom: var(--margin166); }
  .module-three .vertical-text {
    font-family: "Roboto-Medium";
    font-size: var(--font20);
    color: #26252e;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: 0.02em;
    position: absolute;
    z-index: 1;
    left: var(--sideGridWidth);
    top: 325px;
    transform: translateX(-100%) rotate(-90deg);
    transform-origin: top right; }
  .module-three .background-text {
    font-family: "Roboto-Medium";
    font-size: var(--font250);
    color: #ecf1f2;
    font-weight: 500;
    line-height: 231px;
    position: absolute;
    top: 145px;
    right: calc(var(--sideGridWidth) + var(--singleGridWidth)); }
  .module-three .bottom-border-line {
    background-color: #26252e;
    opacity: 0.3;
    height: 1px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc(var(--singleGridWidth) * 7 + var(--sideGridWidth)); }
  .module-three .module-items-structure {
    margin-top: 83px;
    display: flex;
    margin-left: calc(var(--singleGridWidth) / 2 + var(--sideGridWidth)); }
    .module-three .module-items-structure .row-one,
    .module-three .module-items-structure .row-two {
      display: flex;
      flex-direction: column; }
    .module-three .module-items-structure .row-one {
      width: calc(var(--singleGridWidth) * 2); }
    .module-three .module-items-structure .row-two {
      width: calc(var(--singleGridWidth) / 2);
      padding-top: 3px; }
    .module-three .module-items-structure .other-vendors {
      display: flex;
      flex-direction: column;
      width: 100%; }
      .module-three .module-items-structure .other-vendors .title {
        font-family: "Roboto-Medium";
        font-size: var(--font20);
        color: #26252e;
        font-weight: 500;
        line-height: 36px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        height: 83px;
        background: #ecf1f2; }
      .module-three .module-items-structure .other-vendors .items {
        font-family: "Roboto-Regular";
        font-size: var(--font20);
        color: rgba(38, 37, 46, 0.7);
        font-weight: 400;
        line-height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 83px;
        text-align: center;
        background: #ffffff;
        border: 1px solid #ecf1f2; }

@media screen and (max-width: 1024px) {
  .module-three {
    padding-bottom: 48px;
    overflow: hidden; }
    .module-three .vertical-text {
      top: 111px;
      line-height: 18px; }
    .module-three .background-text {
      font-family: "Roboto-Medium";
      font-size: 80px;
      color: #ecf1f2;
      font-weight: 500;
      line-height: 90px;
      top: 111px;
      right: 0;
      left: -7px;
      opacity: 0.5;
      width: 120%; }
    .module-three .bottom-border-line {
      bottom: 0;
      left: 0;
      width: calc(var(--sideGridWidth) + var(--singleGridWidth) * 3); }
    .module-three .module-items-structure {
      margin-top: 36px;
      margin-left: var(--sideGridWidth); }
      .module-three .module-items-structure .row-one {
        width: calc(var(--singleGridWidth) + 8px); }
      .module-three .module-items-structure .row-two {
        width: 24px;
        padding-top: 3px; }
      .module-three .module-items-structure .other-vendors {
        display: flex;
        flex-direction: column;
        width: 100%; }
        .module-three .module-items-structure .other-vendors .title {
          line-height: 16px;
          height: 48px; }
        .module-three .module-items-structure .other-vendors .items {
          height: 92px;
          line-height: 16px; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.module-four {
  position: relative;
  margin-bottom: var(--margin166); }
  .module-four .vertical-text {
    font-family: "Roboto-Medium";
    font-size: var(--font20);
    color: #26252e;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: 0.02em;
    position: absolute;
    z-index: 1;
    left: var(--sideGridWidth);
    top: 486px;
    transform: translateX(-100%) rotate(-90deg);
    transform-origin: top right; }
  .module-four .background-text {
    font-family: "Roboto-Medium";
    font-size: var(--font250);
    color: #ecf1f2;
    font-weight: 500;
    line-height: 231px;
    position: absolute;
    top: 231px;
    left: -55px; }
  .module-four .module-items-structure {
    margin-top: 83px;
    display: flex;
    margin-left: calc(var(--singleGridWidth) + var(--sideGridWidth)); }
    .module-four .module-items-structure .row-one,
    .module-four .module-items-structure .row-two,
    .module-four .module-items-structure .row-three {
      display: flex;
      flex-direction: column; }
    .module-four .module-items-structure .row-one {
      width: calc(var(--singleGridWidth) * 2); }
    .module-four .module-items-structure .row-two {
      width: calc(var(--singleGridWidth) / 1.99); }

@media screen and (max-width: 1024px) {
  .module-four {
    padding-bottom: 48px; }
    .module-four .vertical-text {
      top: 111px;
      line-height: 18px; }
    .module-four .background-text {
      font-family: "Roboto-Medium";
      font-size: 80px;
      color: #ecf1f2;
      font-weight: 500;
      line-height: 90px;
      top: 169px;
      left: -26px;
      opacity: 0.5; }
    .module-four .bottom-border-line {
      bottom: 0;
      left: 0;
      width: calc(var(--sideGridWidth) + var(--singleGridWidth) * 2); }
    .module-four .module-items-structure {
      margin-top: 36px;
      margin-left: var(--sideGridWidth); }
      .module-four .module-items-structure .row-one {
        width: calc(var(--singleGridWidth) + 8px); }
      .module-four .module-items-structure .row-two {
        width: 24px; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.contact-page {
  margin-top: 90px;
  position: relative; }
  .contact-page .agenda-items {
    display: flex; }
    .contact-page .agenda-items ul {
      margin: 0;
      padding: 0;
      margin-right: 10px; }
      .contact-page .agenda-items ul li {
        list-style: none;
        font-size: var(--font16);
        line-height: 24px; }
        .contact-page .agenda-items ul li:hover {
          cursor: default; }
  .contact-page .down-arrow {
    height: 175px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; }
    .contact-page .down-arrow svg {
      z-index: 1;
      width: 22px;
      height: 31px; }
      .contact-page .down-arrow svg path {
        stroke: #000000; }

@media screen and (max-width: 1024px) {
  .contact-page {
    margin-top: 72px; }
    .contact-page .eye-catch-basic {
      height: 300px; }
    .contact-page .agenda-items {
      justify-content: space-between; }
      .contact-page .agenda-items ul {
        flex-basis: 110px;
        margin-right: 0; }
        .contact-page .agenda-items ul li {
          font-size: 12px;
          line-height: 16px;
          margin-bottom: 15px; }
    .contact-page .down-arrow {
      height: 90px; }
      .contact-page .down-arrow svg {
        width: 16px;
        height: 22px; }
    .contact-page .eye-catch-read-more .read-more-body .right {
      padding: 24px 10px 0 24px; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.contact-us {
  position: relative;
  height: auto; }
  .contact-us .side-title {
    position: absolute;
    left: 4.1%;
    z-index: 2;
    font-family: "Roboto-Medium";
    font-style: normal;
    top: 910px;
    font-weight: 500;
    font-size: 20px;
    letter-spacing: 0.02em;
    color: #000000;
    transform: translateX(calc(-50% + 15px)) rotate(-90deg); }
  .contact-us .content-section {
    position: relative;
    width: 100%;
    height: 753px; }
    .contact-us .content-section .fixedPosition {
      position: fixed !important;
      top: -10px !important; }
    .contact-us .content-section .fadeOut {
      opacity: 0 !important; }
    .contact-us .content-section .content-body {
      position: absolute;
      left: var(--secondGridLeft);
      height: 100%;
      width: calc(100% - calc(calc(4.1% + calc(91.8%/ 8)) * 2));
      padding-top: 215px;
      z-index: 1; }
      .contact-us .content-section .content-body .bold-line {
        position: relative;
        width: 114px;
        height: 7px;
        background-color: #000000;
        margin-top: -15px; }
      .contact-us .content-section .content-body .title-section {
        position: relative;
        padding-top: 50px; }
        .contact-us .content-section .content-body .title-section .title {
          font-family: "Roboto-Medium";
          font-style: normal;
          font-weight: 500;
          font-size: 59px;
          line-height: 90px;
          color: #000000; }
      .contact-us .content-section .content-body .text {
        margin-top: 66px;
        width: calc(100% / 2);
        position: relative;
        font-family: "Roboto-Regular";
        font-style: normal;
        font-weight: normal;
        font-size: 20px;
        line-height: 30px;
        display: flex;
        align-items: center;
        letter-spacing: 0.02em;
        color: #26252e;
        opacity: 0.6; }
    .contact-us .content-section .bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #ecf1f2; }
  .contact-us .form-section-sent {
    position: relative;
    width: 100%;
    height: 721px;
    margin-bottom: 1px; }
    .contact-us .form-section-sent .form-body-sent {
      position: absolute;
      bottom: 0px;
      left: var(--sideGridWidth);
      width: var(--midileGridWidth);
      height: 1000px;
      background-color: #ffffff;
      z-index: 1;
      padding-top: 90px;
      border-left: 1px solid #ecf1f2;
      border-right: 1px solid #ecf1f2; }
      .contact-us .form-section-sent .form-body-sent .input-row-section {
        padding-left: 56px;
        margin-left: calc(91.8vw / 8);
        width: calc(calc(91.8vw / 8) * 5);
        display: flex;
        justify-content: space-between;
        margin-bottom: 45px; }
        .contact-us .form-section-sent .form-body-sent .input-row-section .filed-section {
          width: 45%; }
          .contact-us .form-section-sent .form-body-sent .input-row-section .filed-section h4 {
            font-family: "Roboto-Medium";
            font-style: normal;
            font-weight: 500;
            font-size: 24px;
            line-height: 36px;
            color: #26252e;
            margin: 17px 0; }
          .contact-us .form-section-sent .form-body-sent .input-row-section .filed-section input {
            width: 100%;
            background: #ffffff;
            opacity: 0.3;
            border: 1px solid #26252e;
            box-sizing: border-box;
            height: 59px;
            padding: 13px; }
          .contact-us .form-section-sent .form-body-sent .input-row-section .filed-section input::placeholder {
            font-family: "Roboto-Regular";
            font-style: normal;
            font-weight: normal;
            font-size: var(--font20);
            line-height: 30px;
            letter-spacing: 0.02em;
            color: #26252e;
            opacity: 0.1; }
          .contact-us .form-section-sent .form-body-sent .input-row-section .filed-section .error {
            color: #ff0000;
            position: relative;
            top: 10px; }
          .contact-us .form-section-sent .form-body-sent .input-row-section .filed-section .filed-value {
            font-family: "Roboto-Regular";
            font-size: var(--font20);
            color: #26252e;
            font-weight: normal;
            line-height: 30px;
            opacity: 0.7;
            letter-spacing: 0.02em;
            word-break: break-all; }
        .contact-us .form-section-sent .form-body-sent .input-row-section .input-textarea-section {
          width: 100%; }
          .contact-us .form-section-sent .form-body-sent .input-row-section .input-textarea-section .filed-value {
            height: 150px;
            overflow-y: scroll;
            -ms-overflow-style: none;
            scrollbar-width: none; }
          .contact-us .form-section-sent .form-body-sent .input-row-section .input-textarea-section .filed-value::-webkit-scrollbar {
            display: none; }
          .contact-us .form-section-sent .form-body-sent .input-row-section .input-textarea-section h4 {
            font-family: "Roboto-Medium";
            font-style: normal;
            font-weight: 500;
            font-size: 24px;
            line-height: 36px;
            color: #26252e;
            margin: 17px 0; }
          .contact-us .form-section-sent .form-body-sent .input-row-section .input-textarea-section textarea {
            width: 100%;
            background: #ffffff;
            opacity: 0.3;
            border: 1px solid #26252e;
            box-sizing: border-box;
            height: 89px;
            padding: 13px;
            resize: none; }
          .contact-us .form-section-sent .form-body-sent .input-row-section .input-textarea-section textarea::placeholder {
            font-family: "Roboto-Medium";
            font-style: normal;
            font-weight: normal;
            font-size: 20px;
            line-height: 30px;
            letter-spacing: 0.02em;
            color: #26252e;
            opacity: 0.1; }
          .contact-us .form-section-sent .form-body-sent .input-row-section .input-textarea-section .error {
            color: #ff0000;
            position: relative;
            top: 10px; }
          .contact-us .form-section-sent .form-body-sent .input-row-section .input-textarea-section .submit-button {
            width: 390px;
            height: 90px;
            float: right;
            display: flex;
            justify-content: space-between; }
        .contact-us .form-section-sent .form-body-sent .input-row-section .input-button-section {
          position: relative;
          top: 51px;
          height: 60px;
          width: 180px;
          display: flex;
          justify-content: center;
          background-color: #434eba;
          overflow: hidden;
          outline: none; }
          .contact-us .form-section-sent .form-body-sent .input-row-section .input-button-section span {
            height: 100%; }
          .contact-us .form-section-sent .form-body-sent .input-row-section .input-button-section button {
            font-family: "Roboto-Regular";
            font-size: 20px;
            height: 100%;
            color: #ffffff;
            background-color: #434eba;
            border: 0px; }
      .contact-us .form-section-sent .form-body-sent .submit-button-area {
        margin-left: calc(1240px / 8);
        width: calc(calc(1240px / 8) * 5);
        margin-bottom: 45px;
        display: flex;
        justify-content: flex-end; }
        .contact-us .form-section-sent .form-body-sent .submit-button-area .buttons {
          width: 390px;
          margin-top: 0px;
          display: flex;
          justify-content: space-between; }
          .contact-us .form-section-sent .form-body-sent .submit-button-area .buttons .input-button-section {
            top: 0; }
            .contact-us .form-section-sent .form-body-sent .submit-button-area .buttons .input-button-section button {
              background: inherit; }
          .contact-us .form-section-sent .form-body-sent .submit-button-area .buttons .cancel {
            background: #26252e; }
          .contact-us .form-section-sent .form-body-sent .submit-button-area .buttons .cancel,
          .contact-us .form-section-sent .form-body-sent .submit-button-area .buttons .apply {
            cursor: pointer; }
  .contact-us .wrap-plus {
    top: 99.15%;
    bottom: 0;
    z-index: 2;
    left: var(--sideGridWidth); }
  .contact-us .disabled-input {
    background: #ecf1f2 !important;
    pointer-events: none;
    cursor: not-allowed; }

@media screen and (min-width: 1440px) {
  .contact-us {
    position: relative;
    height: auto; }
    .contact-us .side-title {
      left: calc(calc(100% - 1320px) / 2); }
    .contact-us .content-section .content-body {
      left: calc( calc(calc(100% - 1320px) / 2) + calc(1320px/ 8));
      width: calc(100% - calc(calc( calc(calc(100% - 1320px) / 2) + calc(1320px/ 8)) * 2)); }
    .contact-us .form-section-sent .form-body-sent {
      left: var(--sideGridWidth);
      width: var(--midileGridWidth); }
      .contact-us .form-section-sent .form-body-sent .input-row-section {
        padding-left: 56px;
        margin-left: calc(1320px/ 8);
        width: calc(calc(1320px/ 8) * 5); }
      .contact-us .form-section-sent .form-body-sent .submit-button-area {
        margin-left: calc(1320px/ 8);
        width: calc(calc(1320px/ 8) * 5);
        margin-bottom: 45px;
        display: flex;
        justify-content: flex-end; }
  .plus-icon {
    left: calc(calc(calc(100vw - 1320px) / 2) + 165px); } }

@media screen and (min-width: 1366px) and (max-width: calc(1440px - 1px)) {
  .contact-us {
    position: relative;
    height: auto; }
    .contact-us .side-title {
      left: calc(calc(100% - 1240px) / 2);
      top: 910px;
      font-size: 18px;
      padding-top: 10px; }
    .contact-us .bg {
      height: 718px; }
    .contact-us .content-section {
      height: 703px; }
      .contact-us .content-section .fixedPosition {
        top: -20px !important; }
      .contact-us .content-section .content-body {
        left: calc( calc(calc(100% - 1240px) / 2) + calc(1240px/ 8));
        width: calc(100% - calc(calc( calc(calc(100% - 1240px) / 2) + calc(1240px/ 8)) * 2)); }
        .contact-us .content-section .content-body .bold-line {
          width: 110px; }
        .contact-us .content-section .content-body .title-section {
          padding-top: 42px; }
          .contact-us .content-section .content-body .title-section .title {
            font-size: 56px; }
        .contact-us .content-section .content-body .text {
          margin-top: 46px;
          font-size: 18px; }
    .contact-us .form-section-sent .form-body-sent {
      left: var(--sideGridWidth);
      width: var(--midileGridWidth); }
      .contact-us .form-section-sent .form-body-sent .input-row-section {
        padding-left: 56px;
        margin-left: calc(1240px/ 8);
        width: calc(calc(1240px/ 8) * 5); }
        .contact-us .form-section-sent .form-body-sent .input-row-section .filed-section h4 {
          font-size: 22px; }
        .contact-us .form-section-sent .form-body-sent .input-row-section .filed-section input::placeholder {
          font-size: 18px; }
        .contact-us .form-section-sent .form-body-sent .input-row-section .input-textarea-section {
          width: 100%; }
          .contact-us .form-section-sent .form-body-sent .input-row-section .input-textarea-section h4 {
            font-size: 22px; }
          .contact-us .form-section-sent .form-body-sent .input-row-section .input-textarea-section textarea::placeholder {
            font-size: 18px; }
        .contact-us .form-section-sent .form-body-sent .input-row-section .input-button-section button {
          font-size: 18px; }
      .contact-us .form-section-sent .form-body-sent .submit-button-area {
        margin-left: calc(1240px / 8);
        width: calc(calc(1240px / 8) * 5);
        margin-bottom: 45px;
        display: flex;
        justify-content: flex-end; }
  .plus-icon {
    left: calc(calc(calc(100% - 1240px) / 2) + calc(1240px/ 8)); } }

@media screen and (max-width: 1024px) {
  .contact-us .side-title {
    font-size: 12px;
    line-height: 18px;
    top: 718px; }
  .contact-us .content-section {
    height: 463px; }
    .contact-us .content-section .content-body {
      padding-top: 162px; }
      .contact-us .content-section .content-body .bold-line {
        width: 60px; }
      .contact-us .content-section .content-body .title-section {
        position: relative;
        padding-top: 20px; }
        .contact-us .content-section .content-body .title-section .title {
          font-size: 30px;
          line-height: 40px; }
      .contact-us .content-section .content-body .text {
        font-weight: 400;
        font-size: 12px;
        line-height: 20px;
        opacity: 0.7;
        width: 216px;
        margin-top: 24px; }
  .contact-us .form-section-sent {
    height: 544px; }
    .contact-us .form-section-sent .form-body-sent {
      left: var(--sideGridWidth);
      width: var(--midileGridWidth);
      padding-top: 13px; }
      .contact-us .form-section-sent .form-body-sent .input-row-section {
        height: auto;
        flex-direction: column;
        margin-left: -15px;
        width: calc(100% - 71px - 18px);
        margin-bottom: 0; }
        .contact-us .form-section-sent .form-body-sent .input-row-section .filed-section {
          width: 100%;
          margin-bottom: 27px; }
          .contact-us .form-section-sent .form-body-sent .input-row-section .filed-section h4 {
            font-weight: 400;
            font-size: 14px;
            line-height: 20px; }
          .contact-us .form-section-sent .form-body-sent .input-row-section .filed-section input {
            height: 40px; }
          .contact-us .form-section-sent .form-body-sent .input-row-section .filed-section input::placeholder {
            font-size: 12px;
            line-height: 20px; }
          .contact-us .form-section-sent .form-body-sent .input-row-section .filed-section .error {
            top: -2px;
            font-size: 10px; }
          .contact-us .form-section-sent .form-body-sent .input-row-section .filed-section .filed-value {
            font-family: "Roboto-Regular";
            font-size: 12px;
            color: #26252e;
            font-weight: normal;
            line-height: 20px;
            opacity: 0.7;
            letter-spacing: 0.02em; }
        .contact-us .form-section-sent .form-body-sent .input-row-section .input-textarea-section {
          width: 100%; }
          .contact-us .form-section-sent .form-body-sent .input-row-section .input-textarea-section h4 {
            font-size: 14px;
            line-height: 20px; }
          .contact-us .form-section-sent .form-body-sent .input-row-section .input-textarea-section textarea {
            height: 100px;
            overflow: scroll; }
          .contact-us .form-section-sent .form-body-sent .input-row-section .input-textarea-section textarea::placeholder {
            font-size: 14px;
            line-height: 20px; }
          .contact-us .form-section-sent .form-body-sent .input-row-section .input-textarea-section .error {
            top: -2px;
            font-size: 10px; }
        .contact-us .form-section-sent .form-body-sent .input-row-section .input-button-section {
          height: 36px;
          width: 100px;
          position: relative;
          top: 0;
          margin-top: 60px; }
          .contact-us .form-section-sent .form-body-sent .input-row-section .input-button-section .marquee {
            width: 100%; }
          .contact-us .form-section-sent .form-body-sent .input-row-section .input-button-section button {
            font-size: 12px; }
      .contact-us .form-section-sent .form-body-sent .submit-button-area {
        height: auto;
        flex-direction: column;
        margin-left: 71px;
        width: calc(100% - 71px - 18px);
        margin-bottom: 0;
        margin-top: 30px;
        height: 36px; }
        .contact-us .form-section-sent .form-body-sent .submit-button-area .buttons {
          width: 216px;
          margin-top: 20px;
          display: flex;
          justify-content: space-between;
          height: 36px; }
          .contact-us .form-section-sent .form-body-sent .submit-button-area .buttons .input-button-section {
            width: 100px;
            top: 0px;
            height: 36px; }
            .contact-us .form-section-sent .form-body-sent .submit-button-area .buttons .input-button-section button {
              background: inherit;
              font-size: 12px;
              padding: 0px;
              height: 36px; }
          .contact-us .form-section-sent .form-body-sent .submit-button-area .buttons .cancel {
            background: #26252e; }
          .contact-us .form-section-sent .form-body-sent .submit-button-area .buttons .cancel,
          .contact-us .form-section-sent .form-body-sent .submit-button-area .buttons .apply {
            cursor: pointer; }
  .contact-us .wrap-plus {
    top: 99.4%;
    left: var(--sideGridWidth); } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.detail-page {
  margin-top: 90px;
  width: 100%; }

@media screen and (max-width: 1024px) {
  .detail-page {
    margin-top: 72px;
    width: 100%; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.service-details-page {
  overflow: hidden;
  margin-top: 90px;
  width: 100%; }
  .service-details-page .service-details-margin {
    margin-top: var(--singleGridWidth); }
  .service-details-page .service-details-benefits {
    margin-top: var(--singleGridWidth);
    margin-bottom: calc(var(--singleGridWidth) * 2); }

@media screen and (max-width: 1024px) {
  .service-details-page {
    margin-top: 72px;
    width: 100%; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.services-page {
  margin-top: 90px;
  position: relative; }
  .services-page .service-agenda-items {
    display: flex;
    min-height: 150px;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none; }
    .services-page .service-agenda-items ul {
      margin: 0;
      padding: 0;
      margin-right: 10px; }
      .services-page .service-agenda-items ul li {
        list-style: none;
        font-size: var(--font18);
        margin-bottom: 10px; }
        .services-page .service-agenda-items ul li:hover {
          cursor: pointer; }
    .services-page .service-agenda-items .agenda-right {
      margin-right: 0px; }
      .services-page .service-agenda-items .agenda-right li {
        list-style: none;
        font-size: var(--font18);
        margin-bottom: 10px; }
    .services-page .service-agenda-items .agenda-left {
      margin-right: 40px; }
      .services-page .service-agenda-items .agenda-left li {
        list-style: none;
        font-size: var(--font18);
        margin-bottom: 10px; }
  .services-page .service-agenda-items::-webkit-scrollbar {
    display: none; }
  .services-page .down-arrow {
    height: 175px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; }
    .services-page .down-arrow svg {
      z-index: 1;
      width: 22px;
      height: 31px; }
      .services-page .down-arrow svg path {
        stroke: #000000; }

@media screen and (min-width: 1366px) and (max-width: calc(1440px - 1px)) {
  .services-page {
    margin-top: 90px;
    position: relative; }
    .services-page .service-agenda-items {
      display: flex; }
      .services-page .service-agenda-items ul {
        margin: 0;
        padding: 0;
        margin-right: 10px; }
        .services-page .service-agenda-items ul li {
          list-style: none;
          font-size: var(--font16);
          margin-bottom: 10px; }
          .services-page .service-agenda-items ul li:hover {
            cursor: pointer; }
      .services-page .service-agenda-items .agenda-right {
        margin-right: 0px; }
        .services-page .service-agenda-items .agenda-right li {
          list-style: none;
          font-size: var(--font16);
          margin-bottom: 10px; }
      .services-page .service-agenda-items .agenda-left {
        margin-right: 40px; }
        .services-page .service-agenda-items .agenda-left li {
          list-style: none;
          font-size: var(--font16);
          margin-bottom: 10px; }
    .services-page .down-arrow {
      height: 175px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative; }
      .services-page .down-arrow svg {
        z-index: 1;
        width: 22px;
        height: 31px; }
        .services-page .down-arrow svg path {
          stroke: #000000; } }

@media screen and (min-width: 1025px) and (max-width: calc(1366px - 1px)) {
  .services-page .eye-catch-basic {
    height: 600px !important; }
  .services-page .service-agenda-items ul {
    margin-right: 10px; }
    .services-page .service-agenda-items ul li {
      list-style: none;
      font-size: var(--font16);
      margin-bottom: 10px; }
      .services-page .service-agenda-items ul li:hover {
        cursor: pointer; }
  .services-page .service-agenda-items .agenda-right {
    margin-right: 10px; }
    .services-page .service-agenda-items .agenda-right li {
      list-style: none;
      font-size: var(--font16);
      margin-bottom: 10px; }
  .services-page .service-agenda-items .agenda-left {
    margin-right: 10px; }
    .services-page .service-agenda-items .agenda-left li {
      list-style: none;
      font-size: var(--font16);
      margin-bottom: 10px; }
  .services-page .down-arrow {
    height: 175px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; }
    .services-page .down-arrow svg {
      z-index: 1;
      width: 22px;
      height: 31px; }
      .services-page .down-arrow svg path {
        stroke: #000000; } }

@media screen and (max-width: 1024px) {
  .services-page {
    margin-top: 72px; }
    .services-page .eye-catch-basic {
      height: 300px; }
    .services-page .agenda-items {
      justify-content: space-between; }
      .services-page .agenda-items ul {
        flex-basis: 110px;
        margin-right: 0; }
        .services-page .agenda-items ul li {
          font-size: 12px;
          margin-bottom: 15px; }
    .services-page .down-arrow {
      height: 90px; }
      .services-page .down-arrow svg {
        width: 16px;
        height: 22px; }
    .services-page .eye-catch-read-more .read-more-body .right {
      padding: 24px 10px 0 24px; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.work-details-page {
  margin-top: 90px;
  width: 100%;
  overflow: hidden; }
  .work-details-page .wd-software-used {
    margin-top: var(--margin166);
    position: relative; }
    .work-details-page .wd-software-used .wrap-plus {
      left: var(--sideGridWidth);
      top: 0;
      transform: translate(-50%, -50%);
      z-index: 1; }
  .work-details-page .wd-language-used {
    margin-top: 0; }
  .work-details-page .wd-view-more-section {
    margin-top: 116px; }
  .work-details-page .wd-solution-section .right-block .text-block .description .read-more-section .read-description {
    font-family: "Roboto-Regular";
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0.02em;
    color: #26252e; }

@media screen and (min-width: 1025px) and (max-width: calc(1366px - 1px)) {
  .work-details-page .wd-view-more-section .wrap-view-more .view-more-block {
    right: var(--sideGridWidth); } }

@media screen and (max-width: 1024px) {
  .work-details-page {
    margin-top: 72px; }
    .work-details-page .wd-software-used {
      margin-top: 120px; }
      .work-details-page .wd-software-used .wrap-plus {
        display: none; }
    .work-details-page .wd-language-used {
      margin-top: 0px; }
    .work-details-page .wd-view-more-section {
      margin-top: 48px;
      margin-bottom: 32px; }
      .work-details-page .wd-view-more-section .wrap-view-more {
        bottom: 0; }
      .work-details-page .wd-view-more-section .view-more-block {
        left: calc(var(--singleGridWidth) + var(--sideGridWidth)); }
    .work-details-page .wd-solution-section .right-block .text-block .description .read-more-section .read-description {
      font-size: 12px;
      line-height: 20px; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.concept-block {
  margin-top: 141px;
  position: relative;
  height: 1057px;
  overflow: hidden; }
  .concept-block .concept-section {
    margin-top: 15px; }
    .concept-block .concept-section .wrap-plus {
      left: var(--sideGridWidth);
      top: -12px;
      margin-top: 15px; }
    .concept-block .concept-section .concept-bg {
      margin-left: var(--sideGridWidth);
      width: calc(var(--singleGridWidth) * 8);
      height: 644px;
      background: #ecf1f2;
      position: relative; }
      .concept-block .concept-section .concept-bg .text-block {
        margin-left: var(--singleGridWidth);
        position: relative;
        z-index: 2; }
        .concept-block .concept-section .concept-bg .text-block .bold-line {
          top: -3.5px; }
        .concept-block .concept-section .concept-bg .text-block .title {
          font-family: "Roboto-Medium";
          font-style: normal;
          font-weight: 500;
          font-size: var(--font59);
          line-height: 90px;
          color: #26252e;
          margin-top: 58px;
          margin-bottom: 48px; }
        .concept-block .concept-section .concept-bg .text-block .description {
          max-width: calc(var(--singleGridWidth) * 5);
          font-family: "Roboto-Regular";
          font-style: normal;
          font-weight: normal;
          letter-spacing: 0.02em;
          font-size: var(--font20);
          line-height: 30px;
          color: rgba(38, 37, 46, 0.7); }
          .concept-block .concept-section .concept-bg .text-block .description .read-more-section .read-description {
            color: #26252e; }
      .concept-block .concept-section .concept-bg .side-title {
        position: absolute;
        z-index: 2;
        font-family: "Roboto-Medium";
        font-style: normal;
        top: 239px;
        font-weight: 500;
        font-size: 20px;
        letter-spacing: 0.02em;
        color: #000000;
        transform: translateX(calc(-50% + 15px)) rotate(-90deg); }
    .concept-block .concept-section .slider-wrapper {
      position: absolute;
      top: 390px;
      z-index: 2; }
    .concept-block .concept-section .bottom-line {
      position: absolute;
      left: var(--secondGridLeft);
      bottom: 0;
      width: calc(var(--singleGridWidth) * 2);
      height: 1px;
      background: rgba(38, 37, 46, 0.3); }

@media screen and (max-width: 1024px) {
  .concept-block {
    height: auto;
    margin-top: 0px; }
    .concept-block .concept-section {
      margin-top: 72px;
      padding-top: 14px;
      padding-bottom: 48px;
      position: relative;
      height: auto;
      overflow: none; }
      .concept-block .concept-section .wrap-plus {
        top: 6px;
        margin-top: 0px; }
      .concept-block .concept-section .grid-line .grid-one,
      .concept-block .concept-section .grid-line .grid-five,
      .concept-block .concept-section .grid-line .grid-six,
      .concept-block .concept-section .grid-line .grid-seven,
      .concept-block .concept-section .grid-line .grid-eight,
      .concept-block .concept-section .grid-line .grid-nine {
        display: none; }
      .concept-block .concept-section .grid-line .grid-two {
        left: var(--singleGridWidth); }
      .concept-block .concept-section .grid-line .grid-three {
        left: calc(var(--singleGridWidth) * 2); }
      .concept-block .concept-section .grid-line .grid-four {
        left: calc(var(--singleGridWidth) * 3); }
      .concept-block .concept-section .concept-bg {
        margin-left: var(--sideGridWidth);
        width: calc(var(--singleGridWidth) * 4);
        height: auto;
        background: #ecf1f2;
        position: relative; }
        .concept-block .concept-section .concept-bg .text-block {
          margin-left: var(--singleGridWidth);
          position: relative;
          z-index: 2;
          min-height: 230px; }
          .concept-block .concept-section .concept-bg .text-block .bold-line {
            position: relative;
            width: 50px;
            top: -4px; }
          .concept-block .concept-section .concept-bg .text-block .title {
            font-size: 30px;
            line-height: 40px;
            margin-top: 30px;
            margin-bottom: 24px; }
          .concept-block .concept-section .concept-bg .text-block .description {
            max-width: 180px !important;
            font-size: 12px;
            line-height: 20px;
            padding-bottom: 36px; }
        .concept-block .concept-section .concept-bg .side-title {
          top: 185px;
          font-weight: 500;
          font-size: 12px;
          letter-spacing: 0.02em;
          font-family: "Roboto-Medium"; }
      .concept-block .concept-section .slider-wrapper {
        position: static; }
      .concept-block .concept-section .bottom-line {
        width: var(--singleGridWidth); } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.concept-slider-section {
  position: relative;
  width: 100%;
  height: 550px; }
  .concept-slider-section .overflow-text {
    position: absolute;
    font-family: "Roboto-Regular";
    font-style: normal;
    font-weight: 500;
    font-size: 210px;
    line-height: 36px;
    display: flex;
    align-items: center;
    color: #ecf1f2;
    top: 460px;
    left: -3%; }
  .concept-slider-section .slick-slider .slick-prev,
  .concept-slider-section .slick-slider .slick-next {
    display: none !important; }
  .concept-slider-section .slick-list {
    height: 550px;
    padding: 0px calc(var(--singleGridWidth) * 1.6); }
    .concept-slider-section .slick-list .slick-track {
      height: 550px; }
    .concept-slider-section .slick-list .slick-slide {
      margin: 0 42px;
      width: calc(var(--singleGridWidth) * 6);
      background-color: #7d7c82; }
      .concept-slider-section .slick-list .slick-slide .concept-image {
        max-width: 100%;
        height: 100%; }
  .concept-slider-section .dot-line-block {
    position: absolute;
    bottom: 37px;
    left: calc(var(--secondGridLeft) + 40px);
    display: block;
    z-index: 1; }
    .concept-slider-section .dot-line-block .dot-item {
      margin-right: 8px;
      float: left;
      height: 8px;
      width: 8px;
      background-color: #ffffff;
      opacity: 0.3;
      outline: none;
      cursor: pointer; }
    .concept-slider-section .dot-line-block .active {
      width: 48px;
      opacity: 1; }
  .concept-slider-section .wrap-slider-next-pre {
    position: absolute;
    bottom: 0;
    height: calc(var(--singleGridWidth) / 2);
    width: var(--singleGridWidth);
    display: flex;
    justify-content: space-between;
    background-color: #26252e;
    z-index: 1;
    left: calc(var(--sideGridWidth) + calc(var(--singleGridWidth) * 6));
    overflow: hidden; }
    .concept-slider-section .wrap-slider-next-pre .next-pre-box {
      width: calc(100% / 2);
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      background-color: #26252e;
      outline: none; }
    .concept-slider-section .wrap-slider-next-pre :hover {
      background-color: #000000; }
    .concept-slider-section .wrap-slider-next-pre .pre {
      transform: rotate(180deg); }

@keyframes fade-in {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@media screen and (min-width: 1920px) {
  .concept-slider-section .side-title {
    left: calc(var(--sideGridWidth)); }
  .concept-slider-section .slick-list {
    padding: 0px 5% 9px 458px; } }

@media screen and (min-width: 1025px) and (max-width: calc(1366px - 1px)) {
  .concept-slider-section .slick-list {
    padding: 0px calc(var(--singleGridWidth) + calc(var(--singleGridWidth)) / 2.3); }
    .concept-slider-section .slick-list .slick-slide {
      margin: 0;
      margin: 0 calc(var(--singleGridWidth) / 3); } }

@media screen and (min-width: 1366px) and (max-width: calc(1440px - 1px)) {
  .concept-slider-section .slick-list {
    padding: 0px 5% 9px 211px; } }

@media screen and (max-width: 1024px) {
  .concept-slider-section {
    height: 160px; }
    .concept-slider-section .slick-list {
      height: 160px;
      padding: 0px 5% 9px 16px; }
      .concept-slider-section .slick-list .slick-track {
        height: 160px; }
      .concept-slider-section .slick-list .slick-slide {
        width: calc(var(--singleGridWidth) * 4);
        overflow: hidden; }
        .concept-slider-section .slick-list .slick-slide .concept-image {
          max-width: 288px;
          height: 160px; }
    .concept-slider-section .dot-line-block {
      left: calc(var(--sideGridWidth) + 20px);
      bottom: 16px; }
      .concept-slider-section .dot-line-block .dot-item {
        width: 4px;
        height: 4px; }
      .concept-slider-section .dot-line-block .active {
        width: 24px;
        height: 4px; }
    .concept-slider-section .wrap-slider-next-pre {
      height: 36px;
      left: calc(var(--sideGridWidth) + calc(var(--singleGridWidth) * 3)); }
      .concept-slider-section .wrap-slider-next-pre .next-pre-box svg {
        width: 13px;
        height: 13px; } }

@media screen and (min-width: 375px) and (max-width: 425px) {
  .concept-slider-section .slick-list {
    height: 160px;
    padding: 0px 5% 9px 21px; }
    .concept-slider-section .slick-list .slick-slide {
      overflow: hidden; }
      .concept-slider-section .slick-list .slick-slide .concept-image {
        max-width: 400px;
        height: auto; } }

@media screen and (min-width: 375px) and (max-width: 420px) {
  .concept-slider-section .slick-list {
    padding: 0px 5% 9px 19px; }
    .concept-slider-section .slick-list .slick-slide {
      overflow: hidden; }
      .concept-slider-section .slick-list .slick-slide .concept-image {
        max-width: 100%;
        height: auto;
        object-fit: cover; } }

@media (min-width: 768px) and (max-width: 1024px) {
  .concept-slider-section .slick-list {
    padding-left: var(--sideGridWidth); }
  .concept-slider-section .wrap-slider-next-pre {
    left: calc(var(--sideGridWidth) + calc(var(--singleGridWidth) * 2)); } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.wd-solution-section {
  position: relative;
  margin-top: var(--margin166);
  width: calc(var(--secondGridLeft) + calc(var(--singleGridWidth) * 6));
  display: flex;
  justify-content: space-between; }
  .wd-solution-section .left-block {
    position: relative; }
    .wd-solution-section .left-block .bg {
      width: calc(var(--secondGridLeft) + var(--singleGridWidth));
      height: 766px;
      position: relative;
      background: #ecf1f2; }
      .wd-solution-section .left-block .bg .grid-line .grid-one {
        left: var(--sideGridWidth); }
      .wd-solution-section .left-block .bg .grid-line .grid-two {
        left: var(--secondGridLeft); }
    .wd-solution-section .left-block .side-title {
      display: none; }
    .wd-solution-section .left-block .solution-image {
      position: absolute;
      top: 83px;
      z-index: 1;
      height: 600px;
      left: var(--secondGridLeft);
      width: calc(var(--singleGridWidth) * 3);
      background-color: #7d7c82; }
      .wd-solution-section .left-block .solution-image img {
        max-width: 100%;
        height: 100%; }
  .wd-solution-section .right-block {
    margin-top: 83px;
    width: calc(var(--singleGridWidth) * 2); }
    .wd-solution-section .right-block .title {
      font-family: "Roboto-Medium";
      font-style: normal;
      font-weight: 500;
      font-size: var(--font59);
      line-height: 90px;
      color: #26252e;
      margin: 58px 0 48px; }
    .wd-solution-section .right-block .description {
      font-family: "Roboto-Regular";
      font-style: normal;
      font-weight: normal;
      font-size: 20px;
      line-height: 30px;
      color: rgba(38, 37, 46, 0.7);
      letter-spacing: 0.02em; }
  .wd-solution-section .bottom-line {
    left: calc(var(--sideGridWidth) + var(--singleGridWidth) * 5);
    background-color: rgba(38, 37, 46, 0.3); }

@media screen and (min-width: 1920px) {
  .wd-solution-section {
    position: relative;
    margin-top: var(--margin166);
    margin-bottom: 100px;
    width: calc(var(--secondGridLeft) + calc(var(--singleGridWidth) * 6));
    display: flex;
    justify-content: space-between; }
    .wd-solution-section .left-block {
      position: relative; }
      .wd-solution-section .left-block .bg {
        width: calc(var(--secondGridLeft) + var(--singleGridWidth));
        height: 766px;
        background: #ecf1f2; }
        .wd-solution-section .left-block .bg .grid-line .grid-one {
          left: var(--sideGridWidth); }
        .wd-solution-section .left-block .bg .grid-line .grid-two {
          left: var(--secondGridLeft); }
        .wd-solution-section .left-block .bg .grid-line .grid-three {
          left: calc(var(--sideGridWidth) - var(--singleGridWidth)); }
      .wd-solution-section .left-block .side-title {
        display: none; }
      .wd-solution-section .left-block .solution-image {
        position: absolute;
        top: 83px;
        z-index: 1;
        height: 600px;
        left: var(--secondGridLeft);
        width: calc(var(--singleGridWidth) * 3); }
        .wd-solution-section .left-block .solution-image img {
          max-width: 100%;
          height: 100%; }
    .wd-solution-section .right-block {
      margin-top: 83px;
      width: calc(var(--singleGridWidth) * 2); }
      .wd-solution-section .right-block .title {
        font-family: "Roboto-Medium";
        font-style: normal;
        font-weight: 500;
        font-size: var(--font59);
        line-height: 90px;
        color: #26252e;
        margin: 58px 0 48px; }
      .wd-solution-section .right-block .description {
        font-family: "Roboto-Regular";
        font-style: normal;
        font-weight: normal;
        font-size: 20px;
        line-height: 30px;
        color: rgba(38, 37, 46, 0.7);
        letter-spacing: 0.02em; }
    .wd-solution-section .bottom-line {
      left: calc(var(--sideGridWidth) + var(--singleGridWidth) * 5);
      background-color: rgba(38, 37, 46, 0.3); } }

@media screen and (max-width: 1024px) {
  .wd-solution-section {
    width: 100%;
    margin-top: 72px;
    flex-direction: column;
    position: relative;
    margin-bottom: 0px; }
    .wd-solution-section .left-block {
      width: 100%; }
      .wd-solution-section .left-block .bg {
        height: 334px; }
      .wd-solution-section .left-block .solution-image {
        height: 262px;
        top: 36px; }
        .wd-solution-section .left-block .solution-image img {
          object-fit: cover;
          width: 100%; }
      .wd-solution-section .left-block .side-title {
        position: absolute;
        z-index: 2;
        font-family: "Roboto-Medium";
        font-style: normal;
        top: 157px;
        font-weight: 500;
        font-size: 12px;
        letter-spacing: 0.02em;
        color: #000000;
        line-height: 18px;
        transform: rotate(-90deg);
        display: block; }
    .wd-solution-section .right-block {
      order: -1;
      width: 100%;
      margin-top: 0; }
      .wd-solution-section .right-block .text-block {
        width: calc(var(--singleGridWidth) * 3);
        margin-left: var(--secondGridLeft); }
      .wd-solution-section .right-block .bold-line {
        width: 50px;
        height: 7px; }
      .wd-solution-section .right-block .title {
        font-size: 30px;
        line-height: 40px;
        margin: 27px 0; }
      .wd-solution-section .right-block .description {
        font-size: 12px;
        line-height: 20px;
        margin-bottom: 36px; }
    .wd-solution-section .bottom-line {
      left: calc(var(--sideGridWidth) + calc(var(--singleGridWidth) * 3));
      width: calc(var(--sideGridWidth) + var(--singleGridWidth)); } }

@media (min-width: 768px) and (max-width: 1024px) {
  .wd-solution-section {
    overflow: hidden; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.work-page {
  margin-top: 90px;
  position: relative; }
  .work-page .agenda-items {
    display: flex; }
    .work-page .agenda-items ul {
      margin: 0;
      padding: 0;
      margin-right: 70px; }
      .work-page .agenda-items ul li {
        list-style: none;
        margin-bottom: 10px; }
        .work-page .agenda-items ul li:hover {
          cursor: pointer; }
        .work-page .agenda-items ul li a {
          font-family: "Roboto-Medium";
          font-style: normal;
          font-weight: normal;
          font-size: var(--font16);
          letter-spacing: 0.01em;
          color: rgba(38, 37, 46, 0.5); }
  .work-page .eye-catch-basic .eye-catch-body .title-description .title {
    letter-spacing: 0; }
  .work-page .eye-catch-read-more .read-more-body .left .description .read-description {
    padding-right: 55px; }
  .work-page .down-arrow {
    height: 175px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2; }
    .work-page .down-arrow svg {
      z-index: 1; }
      .work-page .down-arrow svg path {
        stroke: #000000; }
  .work-page .works-and-pagination-area {
    height: 283px;
    position: relative;
    margin-top: -150px;
    margin-bottom: 0; }
    .work-page .works-and-pagination-area .bg-title {
      text-align: right;
      font-family: "Roboto-Medium";
      font-size: 340px;
      color: #ecf1f2;
      font-weight: 500;
      line-height: 90%;
      position: absolute;
      width: calc(var(--sideGridWidth) + var(--singleGridWidth) * 5);
      right: calc(var(--singleGridWidth) * 4);
      z-index: -1;
      top: -20px;
      left: -61px; }
    .work-page .works-and-pagination-area .input-areas {
      z-index: 2;
      position: relative;
      left: calc(var(--sideGridWidth));
      width: calc(var(--singleGridWidth) * 8);
      justify-content: space-between;
      top: 140px; }
      .work-page .works-and-pagination-area .input-areas .search-area {
        width: calc(var(--singleGridWidth) * 4);
        height: 60px;
        display: flex; }
        .work-page .works-and-pagination-area .input-areas .search-area input {
          height: 60px;
          width: calc(var(--singleGridWidth) * 2);
          padding: 13px 30px;
          border: 1px solid rgba(38, 37, 46, 0.3);
          box-sizing: border-box;
          -webkit-appearance: none;
          border-radius: 0;
          font-family: "Roboto-Regular";
          font-size: var(--font20);
          color: #26252e;
          font-weight: normal;
          line-height: 30px; }
          .work-page .works-and-pagination-area .input-areas .search-area input:focus {
            outline: none; }
          .work-page .works-and-pagination-area .input-areas .search-area input::placeholder {
            letter-spacing: 0.02em;
            font-family: "Roboto-Regular";
            font-size: 20px;
            color: rgba(0, 0, 0, 0.4);
            font-weight: normal;
            line-height: 30px; }
        .work-page .works-and-pagination-area .input-areas .search-area .search-box {
          width: 60px;
          height: 60px;
          background: #434eba;
          position: relative;
          cursor: pointer; }
          .work-page .works-and-pagination-area .input-areas .search-area .search-box img {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 23px;
            height: 23px;
            transform: translate(-50%, -50%); }
      .work-page .works-and-pagination-area .input-areas .sort-area {
        width: calc(var(--singleGridWidth) * 2 - 20px);
        position: absolute;
        top: 0;
        right: calc(var(--singleGridWidth) * 3);
        display: flex;
        height: 60px;
        justify-content: space-between;
        align-items: center; }
        .work-page .works-and-pagination-area .input-areas .sort-area .sort-title {
          letter-spacing: 0.02em;
          font-family: "Roboto-Regular";
          font-size: var(--font20);
          color: #26252e;
          font-weight: normal;
          line-height: 30px;
          position: absolute;
          left: unset;
          right: calc(var(--singleGridWidth) * 2);
          z-index: 3;
          width: 75px; }
        .work-page .works-and-pagination-area .input-areas .sort-area .technology-list {
          position: relative;
          width: 300px;
          background: #ffffff;
          border: 1px solid rgba(38, 37, 46, 0.3);
          box-sizing: border-box;
          height: 60px;
          z-index: 2;
          margin-left: 10px; }
          .work-page .works-and-pagination-area .input-areas .sort-area .technology-list .item-technology {
            width: 240px;
            padding-left: 20px;
            padding-top: 16px;
            font-family: "Roboto-Medium";
            font-size: 19px;
            color: #26252e;
            font-weight: 500;
            line-height: 30px; }
          .work-page .works-and-pagination-area .input-areas .sort-area .technology-list .drop-down-box {
            width: 60px;
            height: 58px;
            background: #434eba;
            position: absolute;
            right: 0;
            top: 0;
            cursor: pointer; }
            .work-page .works-and-pagination-area .input-areas .sort-area .technology-list .drop-down-box img {
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%); }
          .work-page .works-and-pagination-area .input-areas .sort-area .technology-list .drop-down-list {
            width: 300px;
            height: 248px;
            margin-top: 16px;
            border: 1px solid rgba(38, 37, 46, 0.3);
            overflow: scroll;
            z-index: 4;
            background: #ffffff;
            margin-top: 13px;
            margin-left: -1px;
            scrollbar-width: none;
            -ms-overflow-style: none; }
            .work-page .works-and-pagination-area .input-areas .sort-area .technology-list .drop-down-list::-webkit-scrollbar {
              display: none; }
            .work-page .works-and-pagination-area .input-areas .sort-area .technology-list .drop-down-list .item {
              display: flex;
              align-items: center;
              width: 100%;
              padding-left: 33px;
              height: 60px;
              cursor: pointer;
              font-family: "Roboto-Regular";
              font-size: var(--font18);
              color: #26252e;
              font-weight: normal;
              line-height: 20px; }
              .work-page .works-and-pagination-area .input-areas .sort-area .technology-list .drop-down-list .item .sub-item {
                width: 90%; }
            .work-page .works-and-pagination-area .input-areas .sort-area .technology-list .drop-down-list .item-hoverable:hover {
              background-color: #ecf1f2; }
            .work-page .works-and-pagination-area .input-areas .sort-area .technology-list .drop-down-list .item-disabled {
              font-size: 16px;
              line-height: 30px;
              color: rgba(38, 37, 46, 0.3);
              margin-bottom: 0px;
              margin-top: 10px;
              height: 30px; }
              .work-page .works-and-pagination-area .input-areas .sort-area .technology-list .drop-down-list .item-disabled:hover {
                cursor: default; }
            .work-page .works-and-pagination-area .input-areas .sort-area .technology-list .drop-down-list .active-dropdown-item {
              background-color: black !important;
              color: #ffffff; }
            .work-page .works-and-pagination-area .input-areas .sort-area .technology-list .drop-down-list hr {
              height: 0.75px;
              margin: 0px 25px 0px 33px;
              border: none;
              background-color: rgba(0, 0, 0, 0.3); }
      .work-page .works-and-pagination-area .input-areas .tech-paginations {
        display: flex;
        justify-content: flex-end;
        width: 400px;
        position: absolute;
        right: 0px;
        top: 0; }
  .work-page .images-galary {
    position: relative;
    height: auto;
    max-width: 100%;
    min-height: 150px;
    z-index: 1;
    overflow: hidden; }
    .work-page .images-galary .galary-list-item {
      position: relative;
      height: 560px;
      width: 100%; }
      .work-page .images-galary .galary-list-item .eyecatch-desktop {
        position: absolute;
        bottom: 0px;
        height: 278px;
        left: var(--sideGridWidth);
        max-width: calc(var(--singleGridWidth) * 3 + var(--sideGridWidth));
        border-radius: 10px; }
        .work-page .images-galary .galary-list-item .eyecatch-desktop img {
          object-fit: contain; }
      .work-page .images-galary .galary-list-item .galary-number {
        font-family: "Roboto-Thin";
        font-size: 120px;
        color: #ffffff;
        font-weight: 200;
        line-height: 120px;
        position: absolute;
        left: var(--sideGridWidth);
        top: 52px;
        z-index: 5; }
      .work-page .images-galary .galary-list-item .galary-title {
        z-index: 2;
        font-family: "Roboto-Medium";
        font-size: var(--font24);
        color: #ffffff;
        font-weight: 500;
        line-height: 36px;
        position: relative;
        left: calc(var(--sideGridWidth) + var(--singleGridWidth) * 4);
        padding-top: 80px; }
      .work-page .images-galary .galary-list-item .galary-description {
        z-index: 2;
        font-family: "Roboto-Regular";
        font-size: var(--font20);
        color: rgba(255, 255, 255, 0.7);
        font-weight: normal;
        line-height: 30px;
        position: relative;
        left: calc(var(--sideGridWidth) + var(--singleGridWidth) * 4);
        margin-top: 15px;
        width: calc(var(--singleGridWidth) * 2 - 30px);
        word-break: break-word;
        letter-spacing: 0.02em; }
      .work-page .images-galary .galary-list-item .sample-project {
        position: relative;
        left: calc(var(--sideGridWidth) + var(--singleGridWidth) * 4);
        padding-top: 30px;
        z-index: 1; }
        .work-page .images-galary .galary-list-item .sample-project a {
          font-family: "Roboto-Regular";
          font-size: 20px;
          color: rgba(22, 195, 110, 0.8);
          font-weight: normal;
          line-height: 30px;
          display: flex;
          align-items: center; }
        .work-page .images-galary .galary-list-item .sample-project img {
          margin-left: 10px; }
      .work-page .images-galary .galary-list-item .overlay-bg {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        opacity: 0.5; }
  .work-page .bottom-section {
    position: relative;
    margin-top: 80px;
    margin-bottom: 160px;
    display: flex;
    justify-content: flex-end; }
    .work-page .bottom-section .bottom-paginations {
      display: flex;
      justify-content: flex-end;
      width: 400px;
      align-items: center;
      right: var(--sideGridWidth);
      position: absolute; }

@media screen and (min-width: 1025px) and (max-width: calc(1366px - 1px)) {
  .work-page .works-and-pagination-area .input-areas .sort-area .technology-list {
    width: calc(var(--singleGridWidth) * 2.2); }
    .work-page .works-and-pagination-area .input-areas .sort-area .technology-list .drop-down-list {
      width: calc(var(--singleGridWidth) * 2.2); }
    .work-page .works-and-pagination-area .input-areas .sort-area .technology-list .item-technology {
      font-size: var(--font18); }
  .work-page .works-and-pagination-area .input-areas .sort-area .sort-title {
    right: calc(var(--singleGridWidth) * 1.7); }
  .work-page .images-galary .galary-list-item .galary-description {
    width: calc(var(--singleGridWidth) * 3); } }

@media screen and (min-width: 1920px) {
  .work-page .works-and-pagination-area .bg-title {
    font-size: 325px;
    top: -10px;
    left: 14px; } }

@media screen and (min-width: calc(1366px)) and (max-width: calc(1440px - 1px)) {
  .work-page .works-and-pagination-area .bg-title {
    font-size: 325px;
    top: -10px;
    left: -66px; }
  .work-page .works-and-pagination-area .input-areas .sort-area {
    width: calc(var(--singleGridWidth) * 2 - 20px); }
    .work-page .works-and-pagination-area .input-areas .sort-area .technology-list .drop-down-list {
      width: 280px;
      margin-top: 12px;
      margin-left: -1px; }
  .work-page .eye-catch-read-more .read-more-body .left .description .read-description {
    padding-right: 0px; } }

@media screen and (max-width: 1024px) {
  .work-page {
    margin-top: 72px; }
    .work-page .agenda-items ul {
      margin-right: 57px;
      margin-top: 50px; }
      .work-page .agenda-items ul:last-child {
        margin-right: 0; }
      .work-page .agenda-items ul li a {
        font-size: 12px; }
    .work-page .down-arrow {
      height: 72px; }
      .work-page .down-arrow svg {
        width: 16px;
        height: 22px;
        z-index: 1; }
        .work-page .down-arrow svg path {
          stroke: #000000; }
    .work-page .eye-catch-read-more .read-more-body .left .description .read-description {
      padding-right: 0px; }
    .work-page .works-and-pagination-area {
      height: 356px;
      position: relative;
      overflow: hidden; }
      .work-page .works-and-pagination-area .bg-title {
        text-align: right;
        font-family: "Roboto-Medium";
        font-size: 130px;
        color: #ecf1f2;
        font-weight: 500;
        line-height: 152px;
        position: absolute;
        width: 368px;
        right: unset;
        left: -30px;
        z-index: -1;
        top: 80px; }
      .work-page .works-and-pagination-area .input-areas {
        z-index: 2;
        display: unset;
        position: absolute;
        left: var(--sideGridWidth);
        width: calc(var(--singleGridWidth) * 4);
        justify-content: space-between;
        top: 150px; }
        .work-page .works-and-pagination-area .input-areas .search-area {
          width: calc(var(--singleGridWidth) * 4);
          height: 36px;
          display: flex; }
          .work-page .works-and-pagination-area .input-areas .search-area input {
            height: 36px;
            width: calc(var(--singleGridWidth) * 4 - 30px);
            padding: 0px 20px;
            border: 1px solid rgba(38, 37, 46, 0.3);
            box-sizing: border-box;
            font-family: "Roboto-Regular";
            font-size: 12px;
            color: #26252e;
            font-weight: normal;
            line-height: 20px; }
            .work-page .works-and-pagination-area .input-areas .search-area input:focus {
              outline: none; }
            .work-page .works-and-pagination-area .input-areas .search-area input::placeholder {
              letter-spacing: 0.02em;
              font-family: "Roboto-Regular";
              font-size: 12px;
              color: rgba(0, 0, 0, 0.4);
              font-weight: normal;
              line-height: 20px; }
          .work-page .works-and-pagination-area .input-areas .search-area .search-box {
            width: 36px;
            height: 36px;
            background: #434eba;
            position: relative;
            cursor: pointer; }
            .work-page .works-and-pagination-area .input-areas .search-area .search-box img {
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
              width: 18px;
              height: 18px; }
        .work-page .works-and-pagination-area .input-areas .sort-area {
          width: calc(var(--singleGridWidth) * 4);
          right: calc(var(--sideGridWidth));
          left: 0px;
          height: 60px;
          position: absolute;
          top: 60px;
          display: flex;
          height: 36px;
          justify-content: space-between;
          align-items: center; }
          .work-page .works-and-pagination-area .input-areas .sort-area .sort-title {
            letter-spacing: 0.02em;
            font-family: "Roboto-Regular";
            font-size: 12px;
            color: #26252e;
            font-weight: normal;
            line-height: 12px;
            position: absolute;
            left: calc(var(--sideGridWidth));
            right: unset;
            z-index: 3;
            width: unset; }
          .work-page .works-and-pagination-area .input-areas .sort-area .technology-list {
            width: calc(var(--singleGridWidth) * 3);
            background: #ffffff;
            border: 1px solid rgba(38, 37, 46, 0.3);
            box-sizing: border-box;
            height: 36px;
            z-index: 2;
            position: absolute;
            right: 0;
            left: unset; }
            .work-page .works-and-pagination-area .input-areas .sort-area .technology-list .item-technology {
              width: 180px;
              padding-left: 20px;
              padding-top: 8px;
              font-family: "Roboto-Medium";
              font-size: 12px;
              color: #26252e;
              font-weight: 500;
              line-height: 20px; }
            .work-page .works-and-pagination-area .input-areas .sort-area .technology-list .drop-down-box {
              width: 36px;
              height: 34px;
              background: #434eba;
              position: absolute;
              right: 0;
              top: 0;
              cursor: pointer; }
              .work-page .works-and-pagination-area .input-areas .sort-area .technology-list .drop-down-box img {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                height: 16px;
                width: 14px; }
            .work-page .works-and-pagination-area .input-areas .sort-area .technology-list .drop-down-list {
              width: calc(var(--singleGridWidth) * 3);
              height: 110px;
              margin-top: 5px;
              border: 1px solid rgba(38, 37, 46, 0.3);
              overflow: scroll;
              z-index: 4;
              background: #ffffff;
              scrollbar-width: none;
              -ms-overflow-style: none; }
              .work-page .works-and-pagination-area .input-areas .sort-area .technology-list .drop-down-list::-webkit-scrollbar {
                display: none; }
              .work-page .works-and-pagination-area .input-areas .sort-area .technology-list .drop-down-list .item {
                display: flex;
                align-items: center;
                width: 100%;
                padding-left: 50px;
                height: 35px;
                border-bottom: 1px solid rgba(38, 37, 46, 0.3);
                cursor: pointer;
                font-family: "Roboto-Regular";
                font-size: 12px;
                color: #26252e;
                font-weight: normal;
                line-height: 20px; }
                .work-page .works-and-pagination-area .input-areas .sort-area .technology-list .drop-down-list .item:hover {
                  background-color: #434eba;
                  color: #ffffff; }
                .work-page .works-and-pagination-area .input-areas .sort-area .technology-list .drop-down-list .item .main-cat {
                  padding-left: 20px; }
                .work-page .works-and-pagination-area .input-areas .sort-area .technology-list .drop-down-list .item .item-disabled {
                  color: gray !important; }
        .work-page .works-and-pagination-area .input-areas .tech-paginations {
          display: flex;
          justify-content: flex-end;
          width: calc(var(--singleGridWidth) * 3);
          position: absolute;
          right: 0px;
          top: 130px; }
    .work-page .images-galary {
      position: relative;
      height: auto;
      max-width: 100%;
      z-index: 1;
      overflow: hidden; }
      .work-page .images-galary .galary-list-item {
        position: relative;
        height: 460px;
        width: 100%; }
        .work-page .images-galary .galary-list-item .eyecatch-image {
          position: absolute;
          bottom: 0px;
          height: 167px;
          left: var(--sideGridWidth);
          width: calc(var(--singleGridWidth) * 4); }
          .work-page .images-galary .galary-list-item .eyecatch-image .eyecatch-mobile {
            position: absolute;
            margin-left: auto;
            margin-right: auto;
            bottom: 0px;
            object-fit: contain;
            height: 100%;
            width: calc(var(--singleGridWidth) * 4);
            border: 0; }
          .work-page .images-galary .galary-list-item .eyecatch-image img {
            height: 100%;
            border: 0; }
        .work-page .images-galary .galary-list-item .galary-number {
          font-family: "Roboto-Thin";
          font-size: 60px;
          color: #ffffff;
          font-weight: 200;
          line-height: 50px;
          position: absolute;
          left: var(--sideGridWidth);
          top: 36px;
          z-index: 5; }
        .work-page .images-galary .galary-list-item .galary-title {
          z-index: 2;
          font-family: "Roboto-Regular";
          font-size: 14px;
          color: #ffffff;
          font-weight: normal;
          line-height: 20px;
          position: relative;
          left: calc( var(--sideGridWidth) + var(--singleGridWidth) + var(--singleGridWidth) / 2);
          padding-top: 36px; }
        .work-page .images-galary .galary-list-item .galary-description {
          z-index: 2;
          font-family: "Roboto-Regular";
          font-size: 12px;
          color: rgba(255, 255, 255, 0.7);
          font-weight: normal;
          line-height: 20px;
          position: relative;
          left: calc( var(--sideGridWidth) + var(--singleGridWidth) + var(--singleGridWidth) / 2);
          padding-top: 0px;
          margin-top: 16px;
          width: calc(var(--singleGridWidth) * 2);
          word-break: break-word;
          letter-spacing: 0.02em;
          display: -webkit-box;
          -webkit-line-clamp: 9;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          width: calc(var(--singleGridWidth) * 2 + var(--singleGridWidth) / 2); }
        .work-page .images-galary .galary-list-item .sample-project {
          position: relative;
          left: calc( var(--sideGridWidth) + var(--singleGridWidth) + var(--singleGridWidth) / 2);
          padding-top: 20px;
          z-index: 1; }
          .work-page .images-galary .galary-list-item .sample-project a {
            font-family: "Roboto-Regular";
            font-size: 12px;
            color: #16c36e;
            font-weight: normal;
            line-height: 20px;
            display: flex;
            align-items: center; }
          .work-page .images-galary .galary-list-item .sample-project img {
            margin-left: 10px;
            width: 12px;
            height: 12px; }
        .work-page .images-galary .galary-list-item .overlay-bg {
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          opacity: 0.5; }
    .work-page .bottom-section {
      position: relative;
      margin-top: 36px;
      margin-bottom: 72px;
      display: flex;
      justify-content: flex-end; }
      .work-page .bottom-section .bottom-paginations {
        display: flex;
        justify-content: flex-end;
        width: calc(var(--singleGridWidth) * 3);
        align-items: center;
        right: var(--sideGridWidth);
        position: absolute; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.work-pagination-common {
  display: flex;
  justify-content: flex-end;
  align-items: center; }
  .work-pagination-common .page-number {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: "Roboto-Regular";
    font-size: var(--font24);
    color: #26252e;
    font-weight: normal;
    line-height: 28px; }
    .work-pagination-common .page-number:hover {
      color: #434eba; }
  .work-pagination-common .previous-page {
    cursor: pointer; }
    .work-pagination-common .previous-page img {
      transform: rotate(-180deg);
      height: 22px;
      width: 30px;
      object-fit: contain; }
  .work-pagination-common .next-page {
    cursor: pointer; }
    .work-pagination-common .next-page img {
      height: 22px;
      width: 30px;
      object-fit: contain; }
  .work-pagination-common .active-page {
    background: #434eba;
    color: #ffffff; }
    .work-pagination-common .active-page:hover {
      color: #ffffff;
      cursor: default; }
  .work-pagination-common .disabled {
    opacity: 0.3;
    pointer-events: none; }
    .work-pagination-common .disabled:hover {
      cursor: not-allowed; }
  .work-pagination-common .hide-page {
    display: none; }
  .work-pagination-common .show-page {
    display: block; }
  .work-pagination-common .show {
    visibility: visible; }
  .work-pagination-common .hide {
    visibility: hidden; }

@media screen and (max-width: 1024px) {
  .work-pagination-common {
    display: flex;
    justify-content: flex-end;
    align-items: center; }
    .work-pagination-common .page-number {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-family: "Roboto-Regular";
      font-size: 14px;
      color: #26252e;
      font-weight: normal;
      line-height: 24px; }
      .work-pagination-common .page-number:hover {
        color: #434eba; }
    .work-pagination-common .previous-page {
      cursor: pointer; }
      .work-pagination-common .previous-page img {
        transform: rotate(-180deg);
        height: 14px;
        width: 22px;
        object-fit: contain; }
    .work-pagination-common .next-page {
      cursor: pointer; }
      .work-pagination-common .next-page img {
        height: 14px;
        width: 22px;
        object-fit: contain; }
    .work-pagination-common .active-page {
      background: #434eba;
      color: #ffffff; }
      .work-pagination-common .active-page:hover {
        color: #ffffff; }
    .work-pagination-common .disabled {
      opacity: 0.3;
      pointer-events: none;
      cursor: not-allowed; }
    .work-pagination-common .hide-page {
      display: none; }
    .work-pagination-common .show-page {
      display: block; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.blog-block {
  width: 100%;
  max-width: 100%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  grid-column-gap: 80px;
  z-index: 2;
  position: relative; }
  .blog-block .blog-background {
    position: absolute;
    left: calc( calc(var(--singleGridWidth) * 4) - calc(var(--singleGridWidth) / 7.5));
    font-family: "Roboto-Bold";
    font-size: 350px;
    color: #ecf1f2;
    font-weight: 700;
    line-height: 410px; }
  .blog-block .left-side-bg-color {
    background: #ecf1f2;
    position: absolute;
    top: 83px;
    left: calc(0px - var(--sideGridWidth));
    bottom: 166px;
    width: calc(var(--singleGridWidth) * 4 + var(--sideGridWidth));
    z-index: -1; }
  .blog-block .blog-feature {
    cursor: pointer;
    margin-bottom: 83px;
    position: relative;
    z-index: 1;
    border: 1px solid rgba(5, 12, 83, 0.1); }
    .blog-block .blog-feature .feature-image {
      display: flex;
      justify-content: center; }
      .blog-block .blog-feature .feature-image img {
        height: 240px;
        background-color: #7d7c82; }
    .blog-block .blog-feature .blog-title {
      font-family: "Roboto-Medium";
      font-size: var(--font18);
      color: #26252e;
      font-weight: 500;
      line-height: 28px;
      display: -webkit-box;
      max-width: calc(var(--singleGridWidth) * 2 + 70px);
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      letter-spacing: 0.02em;
      margin-top: 20px; }
    .blog-block .blog-feature .blog-description {
      margin-top: 10px;
      font-family: "Roboto-Regular";
      font-size: var(--font16);
      color: #26252e;
      font-weight: normal;
      line-height: 24px;
      letter-spacing: 0.02em;
      display: block;
      display: -webkit-box;
      max-width: calc(var(--singleGridWidth) * 2 + 70px);
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      opacity: 0.7; }
    .blog-block .blog-feature .blog-date {
      display: flex;
      gap: 11px;
      margin: 18px 25px 33px 25px;
      font-family: "Roboto-Regular";
      font-size: var(--font16);
      color: #26252e;
      font-weight: normal;
      line-height: 19px; }
      .blog-block .blog-feature .blog-date .dim {
        opacity: 0.8; }
      .blog-block .blog-feature .blog-date .highlight {
        font-family: "Roboto-Medium";
        font-size: var(--font16);
        color: #26252e;
        font-weight: 500;
        line-height: 19px; }
    .blog-block .blog-feature .feature-tag {
      font-family: "Roboto-Medium";
      font-size: var(--font16);
      color: #ffffff;
      font-weight: 500;
      line-height: 18.75px;
      position: absolute;
      z-index: 2;
      top: 221px;
      left: 25px;
      padding: 10px 20px;
      background-color: #434eba; }
    .blog-block .blog-feature:hover {
      box-shadow: 0px 0px 14px 4px rgba(5, 12, 83, 0.1); }

@media screen and (min-width: 1025px) and (max-width: 1079px) {
  .blog-block {
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-column-gap: 29.5px; }
    .blog-block .blog-background {
      top: 18%;
      left: calc(var(--sideGridWidth) + var(--singleGridWidth) * 3 + 75px);
      font-family: "Roboto-Bold";
      font-size: 200px;
      color: #ecf1f2;
      font-weight: 700;
      line-height: 240px; }
    .blog-block .blog-feature {
      min-width: 284px;
      max-width: 300px;
      background-color: #ffffff;
      margin-bottom: 30px; }
      .blog-block .blog-feature .feature-image img {
        width: 100%;
        height: 200px; }
      .blog-block .blog-feature .blog-title {
        margin-inline: 25px;
        margin-top: 35px; }
      .blog-block .blog-feature .blog-description {
        margin-inline: 25px; }
      .blog-block .blog-feature .feature-tag {
        top: 180px;
        padding: 6px 12px; } }

@media screen and (min-width: 1080px) and (max-width: 1179px) {
  .blog-block {
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-column-gap: 30px; }
    .blog-block .blog-background {
      top: 19%;
      left: calc(var(--sideGridWidth) + var(--singleGridWidth) * 3.5);
      font-family: "Roboto-Bold";
      font-size: 220px;
      color: #ecf1f2;
      font-weight: 700;
      line-height: 240px; }
    .blog-block .blog-feature {
      min-width: 300px;
      max-width: 340px;
      margin-bottom: 30px;
      background-color: #ffffff; }
      .blog-block .blog-feature .feature-image img {
        width: 100%;
        height: 220px; }
      .blog-block .blog-feature .blog-title {
        margin-inline: 25px;
        margin-top: 35px; }
      .blog-block .blog-feature .blog-description {
        margin-inline: 25px; }
      .blog-block .blog-feature .feature-tag {
        top: 205px;
        padding: 6px 12px; } }

@media screen and (min-width: 1180px) and (max-width: 1279px) {
  .blog-block {
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-column-gap: 30px; }
    .blog-block .blog-background {
      top: 19%;
      left: calc(var(--sideGridWidth) + var(--singleGridWidth) * 3.5);
      font-family: "Roboto-Bold";
      font-size: 240px;
      color: #ecf1f2;
      font-weight: 700;
      line-height: 240px; }
    .blog-block .blog-feature {
      min-width: 330px;
      max-width: 360px;
      margin-bottom: 30px;
      background-color: #ffffff; }
      .blog-block .blog-feature .feature-image img {
        width: 100%;
        height: 240px; }
      .blog-block .blog-feature .blog-title {
        margin-inline: 25px;
        margin-top: 35px; }
      .blog-block .blog-feature .blog-description {
        margin-inline: 25px; }
      .blog-block .blog-feature .feature-tag {
        top: 225px;
        padding: 8px 16px; } }

@media screen and (min-width: calc(1366px)) and (max-width: calc(1440px - 1px)) {
  .blog-block {
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-column-gap: 30px; }
    .blog-block .blog-background {
      top: 20%;
      left: calc(var(--sideGridWidth) + var(--singleGridWidth) * 4);
      font-family: "Roboto-Bold";
      font-size: 240px;
      color: #ecf1f2;
      font-weight: 700;
      line-height: 240px; }
    .blog-block .blog-feature {
      min-width: 360px;
      max-width: 400px;
      margin-bottom: 30px;
      background-color: #ffffff; }
      .blog-block .blog-feature .feature-image img {
        width: 100%;
        height: 240px; }
      .blog-block .blog-feature .blog-title {
        margin-inline: 25px;
        margin-top: 35px; }
      .blog-block .blog-feature .blog-description {
        margin-inline: 25px; }
      .blog-block .blog-feature .feature-tag {
        top: 220px;
        padding: 9px 18px; } }

@media screen and (min-width: 1440px) {
  .blog-block {
    grid-template-columns: repeat(3, 420px);
    grid-column-gap: 30px;
    position: relative;
    margin-bottom: 53px; }
    .blog-block .blog-feature {
      background-color: #ffffff;
      width: 420px;
      margin-bottom: 30px;
      border: 1px solid rgba(5, 12, 83, 0.1); }
      .blog-block .blog-feature .feature-image img {
        width: 100%;
        height: 240px; }
      .blog-block .blog-feature .blog-title {
        font-family: "Roboto-Medium";
        font-size: var(--font18);
        color: #26252e;
        font-weight: 500;
        line-height: 28px;
        margin: 44px 25px 18px 25px;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis; }
      .blog-block .blog-feature .blog-description {
        font-family: "Roboto-Regular";
        font-size: var(--font16);
        color: #26252e;
        font-weight: 400;
        line-height: 24px;
        margin-inline: 25px; }
      .blog-block .blog-feature .blog-date {
        display: flex;
        gap: 11px;
        margin: 18px 25px 33px 25px;
        font-family: "Roboto-Regular";
        font-size: var(--font16);
        color: #26252e;
        font-weight: normal;
        line-height: 19px; }
        .blog-block .blog-feature .blog-date .dim {
          opacity: 0.8; }
        .blog-block .blog-feature .blog-date .highlight {
          font-family: "Roboto-Medium";
          font-size: var(--font16);
          color: #26252e;
          font-weight: 500;
          line-height: 19px; }
      .blog-block .blog-feature .feature-tag {
        font-family: "Roboto-Medium";
        font-size: var(--font16);
        color: #ffffff;
        font-weight: 500;
        line-height: 18.75px;
        position: absolute;
        z-index: 2;
        top: 221px;
        left: 25px;
        padding: 10px 20px;
        background-color: #434eba; }
      .blog-block .blog-feature:hover {
        box-shadow: 0px 0px 14px 4px rgba(5, 12, 83, 0.1); }
    .blog-block .blog-background {
      position: absolute;
      top: 18%;
      left: 695px;
      font-family: "Roboto-Bold";
      font-size: 280px;
      color: #ecf1f2;
      font-weight: 700;
      line-height: 328px; } }

@media screen and (min-width: 1920px) {
  .blog-block .blog-background {
    position: absolute;
    top: 16%;
    left: calc(var(--sideGridWidth) + var(--singleGridWidth) * 3 - 45px);
    font-family: "Roboto-Bold";
    font-size: 350px;
    color: #ecf1f2;
    font-weight: 700;
    line-height: 410px; } }

@media screen and (max-width: 1024px) {
  .blog-block {
    width: 100%;
    max-width: 100%;
    display: flex;
    grid-template-columns: unset;
    grid-column-gap: 60px;
    z-index: 2;
    position: relative;
    justify-content: center;
    align-items: center; }
    .blog-block .blog-background {
      top: 7.25%;
      left: calc(var(--sideGridWidth) + var(--singleGridWidth) * 2);
      font-family: "Roboto-Bold";
      font-size: 76px;
      color: #ecf1f2;
      font-weight: 700;
      line-height: 89px; }
    .blog-block .left-side-bg-color {
      background: #ecf1f2;
      position: absolute;
      top: 36px;
      left: calc(0px - var(--sideGridWidth));
      bottom: 36px;
      width: calc(var(--singleGridWidth) * 2 + var(--sideGridWidth));
      z-index: -1; }
    .blog-block .blog-feature {
      width: calc(var(--singleGridWidth) * 4);
      margin-bottom: 36px;
      position: relative;
      z-index: 1;
      background-color: #ffffff; }
      .blog-block .blog-feature .feature-image {
        height: 240px; }
        .blog-block .blog-feature .feature-image img {
          width: 100%;
          object-fit: contain;
          height: 100%;
          background-color: #7d7c82; }
      .blog-block .blog-feature .blog-title {
        font-family: "Roboto-Regular";
        font-size: 14px;
        color: #26252e;
        font-weight: 600;
        line-height: 20px;
        display: -webkit-box;
        max-width: calc(var(--singleGridWidth) * 2 + 70px);
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        letter-spacing: 0.02em;
        margin: 44px 25px 18px 25px;
        z-index: 1; }
      .blog-block .blog-feature .blog-description {
        margin-top: 10px;
        margin-inline: 25px;
        font-family: "Roboto-Regular";
        font-size: var(--font20);
        color: #26252e;
        font-weight: normal;
        line-height: 20px;
        letter-spacing: 0.02em;
        display: block;
        display: -webkit-box;
        max-width: calc(var(--singleGridWidth) * 4);
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        opacity: 0.7; } }

.loader-wrapper {
  display: flex;
  justify-content: center;
  align-items: center; }

.loader {
  border-radius: 50%;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #0069d9;
  width: 50px;
  position: absolute;
  left: calc(50% - 25px);
  top: calc(50% - 25px);
  height: 50px;
  -webkit-animation: spin 2s linear infinite;
  /* Safari */
  animation: spin 2s linear infinite;
  z-index: 999; }

.small {
  width: 20px;
  height: 20px;
  position: static; }

/* Safari */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg); } }

@keyframes spin {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.blog-page {
  margin-top: 90px;
  position: relative;
  overflow: hidden; }
  .blog-page .category-section {
    position: relative;
    display: flex;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
    width: calc(var(--singleGridWidth) * 8);
    left: calc(var(--sideGridWidth)); }
  .blog-page .blogs-paginations {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: calc(var(--singleGridWidth) * 8);
    margin: 0px 0px 66px 0px; }
    .blog-page .blogs-paginations .list-title {
      font-family: "Roboto-Medium";
      font-size: var(--font24);
      color: #26252e;
      font-weight: 500;
      line-height: 60px; }
    .blog-page .blogs-paginations .pagination {
      width: calc(var(--singleGridWidth) * 3); }
  .blog-page .blog-paginations {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: calc(var(--singleGridWidth) * 8);
    left: calc(var(--sideGridWidth));
    margin: 83px 0px; }
    .blog-page .blog-paginations .list-title {
      font-family: "Roboto-Medium";
      font-size: var(--font24);
      color: #26252e;
      font-weight: 500;
      line-height: 60px; }
    .blog-page .blog-paginations .pagination {
      width: calc(var(--singleGridWidth) * 3); }
  .blog-page .bottom-pagination {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--margin166);
    right: calc(var(--sideGridWidth));
    position: relative;
    z-index: 2; }
  .blog-page .blog-data-list {
    min-height: 200px;
    position: relative;
    height: auto;
    width: calc(var(--singleGridWidth) * 8);
    left: var(--sideGridWidth);
    z-index: 0; }
  .blog-page .bottom-border-line {
    position: absolute;
    bottom: var(--margin166);
    left: var(--sideGridWidth);
    height: 1px;
    background-color: #000000;
    opacity: 0.2;
    width: calc(var(--singleGridWidth) * 2); }
  .blog-page .sort-category {
    width: calc(var(--singleGridWidth) * 2 - 20px);
    position: absolute;
    top: 0;
    left: calc(var(--singleGridWidth) * 3);
    display: flex;
    height: 60px;
    justify-content: space-between;
    align-items: center; }
    .blog-page .sort-category .sort-title {
      letter-spacing: 0.02em;
      font-family: "Roboto-Regular";
      font-size: var(--font20);
      color: #26252e;
      font-weight: normal;
      line-height: 30px;
      position: absolute;
      left: unset;
      right: calc(var(--singleGridWidth) * 2);
      z-index: 3;
      width: 75px; }
    .blog-page .sort-category .technology-list {
      position: relative;
      width: 300px;
      background: #ffffff;
      border: 1px solid rgba(38, 37, 46, 0.3);
      box-sizing: border-box;
      height: 60px;
      z-index: 2; }
      .blog-page .sort-category .technology-list .item-technology {
        width: 240px;
        padding-left: 20px;
        padding-top: 16px;
        text-align: left;
        font-family: "Roboto-Medium";
        font-size: 19px;
        color: #26252e;
        font-weight: 500;
        line-height: 30px; }
      .blog-page .sort-category .technology-list .drop-down-box {
        width: 60px;
        height: 58.3px;
        background: #434eba;
        position: absolute;
        right: 0;
        top: 0;
        cursor: pointer; }
        .blog-page .sort-category .technology-list .drop-down-box img {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%); }
      .blog-page .sort-category .technology-list .drop-down-list {
        width: 300px;
        height: 248px;
        margin-top: 16px;
        border: 1px solid rgba(38, 37, 46, 0.3);
        overflow: scroll;
        z-index: 4;
        background: #ffffff;
        margin-top: 13px;
        margin-left: -1px;
        scrollbar-width: none;
        -ms-overflow-style: none; }
        .blog-page .sort-category .technology-list .drop-down-list::-webkit-scrollbar {
          display: none; }
        .blog-page .sort-category .technology-list .drop-down-list .item {
          display: flex;
          align-items: center;
          width: 100%;
          padding-left: 33px;
          height: 60px;
          cursor: pointer;
          font-family: "Roboto-Regular";
          font-size: var(--font18);
          color: #26252e;
          font-weight: normal;
          line-height: 20px;
          text-align: left; }
          .blog-page .sort-category .technology-list .drop-down-list .item .sub-item {
            width: 90%; }
        .blog-page .sort-category .technology-list .drop-down-list .item-hoverable:hover {
          background-color: #ecf1f2; }
        .blog-page .sort-category .technology-list .drop-down-list .item--active {
          background-color: black;
          color: #ffffff; }
          .blog-page .sort-category .technology-list .drop-down-list .item--active:hover {
            background-color: black; }
  .blog-page .sort-date {
    width: calc(var(--singleGridWidth) * 2 - 20px);
    position: absolute;
    top: 0;
    left: calc(var(--singleGridWidth) * 1);
    display: flex;
    height: 60px;
    justify-content: space-between;
    align-items: center; }
    .blog-page .sort-date .sort-title {
      letter-spacing: 0.02em;
      font-family: "Roboto-Regular";
      font-size: var(--font20);
      color: #26252e;
      font-weight: normal;
      line-height: 30px;
      position: absolute;
      left: unset;
      right: calc(var(--singleGridWidth) * 2);
      z-index: 3;
      width: 75px; }
    .blog-page .sort-date .technology-list {
      position: relative;
      width: 300px;
      background: #ffffff;
      border: 1px solid rgba(38, 37, 46, 0.3);
      box-sizing: border-box;
      height: 60px;
      z-index: 2; }
      .blog-page .sort-date .technology-list .item-technology {
        width: 240px;
        padding-left: 20px;
        padding-top: 16px;
        text-align: left;
        font-family: "Roboto-Medium";
        font-size: 19px;
        color: #26252e;
        font-weight: 500;
        line-height: 30px; }
      .blog-page .sort-date .technology-list .drop-down-box {
        width: 60px;
        height: 58.3px;
        background: #434eba;
        position: absolute;
        right: 0;
        top: 0;
        cursor: pointer; }
        .blog-page .sort-date .technology-list .drop-down-box img {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%); }
      .blog-page .sort-date .technology-list .drop-down-list {
        width: 300px;
        height: 248px;
        margin-top: 16px;
        overflow: scroll;
        z-index: 4;
        background: #ffffff;
        margin-top: 13px;
        margin-left: -1px;
        border: 1px solid rgba(38, 37, 46, 0.3);
        scrollbar-width: none;
        -ms-overflow-style: none; }
        .blog-page .sort-date .technology-list .drop-down-list::-webkit-scrollbar {
          display: none; }
        .blog-page .sort-date .technology-list .drop-down-list .item {
          display: flex;
          align-items: center;
          width: 100%;
          padding-left: 33px;
          height: 60px;
          cursor: pointer;
          font-family: "Roboto-Regular";
          font-size: var(--font18);
          color: #26252e;
          font-weight: normal;
          line-height: 20px;
          text-align: left; }
          .blog-page .sort-date .technology-list .drop-down-list .item .sub-item {
            width: 90%; }
        .blog-page .sort-date .technology-list .drop-down-list .item-hoverable:hover {
          background-color: #ecf1f2; }
        .blog-page .sort-date .technology-list .drop-down-list .item--active {
          background-color: black;
          color: #ffffff; }
          .blog-page .sort-date .technology-list .drop-down-list .item--active:hover {
            background-color: black; }
  .blog-page .down-arrow {
    height: 110px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2; }
    .blog-page .down-arrow svg {
      z-index: 1; }
      .blog-page .down-arrow svg path {
        stroke: #000000; }
  .blog-page .reset-button {
    width: 60px;
    height: 59px;
    background: #434eba;
    color: white;
    position: absolute;
    top: 0;
    left: calc(var(--singleGridWidth) * 5);
    font-size: 20px;
    box-sizing: border-box;
    border: 1px solid rgba(209, 208, 213, 0.51);
    align-items: center; }
  .blog-page .reset-button:hover {
    opacity: 0.9; }

@media screen and (min-width: 1025px) and (max-width: calc(1366px - 1px)) {
  .blog-page .sort-category .technology-list,
  .blog-page .sort-date .technology-list {
    width: unset; }
    .blog-page .sort-category .technology-list .item-technology,
    .blog-page .sort-date .technology-list .item-technology {
      font-size: var(--font18); }
  .blog-page .sort-category .drop-down-list,
  .blog-page .sort-date .drop-down-list {
    width: unset !important; } }

@media screen and (max-width: 1024px) {
  .blog-page .category-section {
    position: relative;
    display: flex;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
    width: auto;
    left: auto; }
  .blog-page .blogs-paginations {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: calc(var(--singleGridWidth) * 4);
    margin: 0px 0px 36px 0px; }
    .blog-page .blogs-paginations .list-title {
      font-family: "Roboto-Medium";
      font-size: 14px;
      color: #26252e;
      font-weight: 500;
      line-height: 20px;
      margin-top: 10px;
      text-align: left; }
    .blog-page .blogs-paginations .pagination {
      width: calc(var(--singleGridWidth) * 4);
      margin-top: 115px; }
  .blog-page .bottom-pagination {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    right: calc(var(--sideGridWidth));
    position: relative; }
  .blog-page .blog-data-list {
    position: relative;
    height: auto;
    width: calc(var(--singleGridWidth) * 4);
    left: var(--sideGridWidth); }
  .blog-page .bottom-border-line {
    width: var(--singleGridWidth); }
  .blog-page .sort-category {
    width: calc(var(--singleGridWidth) * 4);
    right: calc(var(--sideGridWidth));
    left: 0px;
    height: 60px;
    position: absolute;
    top: 50px;
    display: flex;
    height: 36px;
    justify-content: space-between;
    align-items: center; }
    .blog-page .sort-category .sort-title {
      letter-spacing: 0.02em;
      font-family: "Roboto-Regular";
      font-size: 12px;
      color: #26252e;
      font-weight: normal;
      line-height: 12px;
      position: absolute;
      left: calc(var(--sideGridWidth));
      right: unset;
      z-index: 3;
      width: unset; }
    .blog-page .sort-category .technology-list {
      width: calc(var(--singleGridWidth) * 2);
      box-sizing: border-box;
      height: 36px;
      z-index: 2;
      position: absolute;
      right: 0;
      left: unset; }
      .blog-page .sort-category .technology-list .item-technology {
        width: 180px;
        padding-left: 20px;
        padding-top: 8px;
        font-family: "Roboto-Medium";
        font-size: 12px;
        color: #26252e;
        font-weight: 500;
        line-height: 20px; }
      .blog-page .sort-category .technology-list .drop-down-box {
        width: 36px;
        height: 34px;
        background: #434eba;
        position: absolute;
        right: 0;
        top: 0;
        cursor: pointer; }
        .blog-page .sort-category .technology-list .drop-down-box img {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          height: 16px;
          width: 14px; }
      .blog-page .sort-category .technology-list .drop-down-list {
        width: calc(var(--singleGridWidth) * 2);
        height: 110px;
        margin-top: 5px;
        overflow: scroll;
        z-index: 4;
        scrollbar-width: none;
        -ms-overflow-style: none; }
        .blog-page .sort-category .technology-list .drop-down-list::-webkit-scrollbar {
          display: none; }
        .blog-page .sort-category .technology-list .drop-down-list .item {
          display: flex;
          align-items: center;
          width: 100%;
          padding-left: 50px;
          height: 35px;
          border-bottom: 1px solid rgba(38, 37, 46, 0.3);
          cursor: pointer;
          font-family: "Roboto-Regular";
          font-size: 12px;
          color: #26252e;
          font-weight: normal;
          line-height: 20px; }
          .blog-page .sort-category .technology-list .drop-down-list .item:hover {
            background-color: #434eba;
            color: #ffffff; }
          .blog-page .sort-category .technology-list .drop-down-list .item .main-cat {
            padding-left: 20px; }
        .blog-page .sort-category .technology-list .drop-down-list .item--active {
          background-color: black;
          color: #ffffff; }
          .blog-page .sort-category .technology-list .drop-down-list .item--active .item {
            color: unset; }
  .blog-page .sort-date {
    width: calc(var(--singleGridWidth) * 4);
    right: calc(var(--sideGridWidth));
    left: 0px;
    height: 60px;
    position: absolute;
    top: 0px;
    display: flex;
    height: 36px;
    justify-content: space-between;
    align-items: center; }
    .blog-page .sort-date .sort-title {
      letter-spacing: 0.02em;
      font-family: "Roboto-Regular";
      font-size: 12px;
      color: #26252e;
      font-weight: normal;
      line-height: 12px;
      position: absolute;
      left: calc(var(--sideGridWidth));
      right: unset;
      z-index: 3;
      width: unset; }
    .blog-page .sort-date .technology-list {
      width: calc(var(--singleGridWidth) * 3);
      box-sizing: border-box;
      height: 36px;
      z-index: 2;
      position: absolute;
      right: 0;
      left: unset; }
      .blog-page .sort-date .technology-list .item-technology {
        width: 180px;
        padding-left: 20px;
        padding-top: 8px;
        font-family: "Roboto-Medium";
        font-size: 12px;
        color: #26252e;
        font-weight: 500;
        line-height: 20px; }
      .blog-page .sort-date .technology-list .drop-down-box {
        width: 36px;
        height: 34px;
        background: #434eba;
        position: absolute;
        right: 0;
        top: 0;
        cursor: pointer; }
        .blog-page .sort-date .technology-list .drop-down-box img {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          height: 16px;
          width: 14px; }
      .blog-page .sort-date .technology-list .drop-down-list {
        width: calc(var(--singleGridWidth) * 3);
        height: 110px;
        margin-top: 5px;
        overflow: scroll;
        z-index: 4;
        scrollbar-width: none;
        -ms-overflow-style: none; }
        .blog-page .sort-date .technology-list .drop-down-list::-webkit-scrollbar {
          display: none; }
        .blog-page .sort-date .technology-list .drop-down-list .item {
          display: flex;
          align-items: center;
          width: 100%;
          padding-left: 50px;
          height: 35px;
          border-bottom: 1px solid rgba(38, 37, 46, 0.3);
          cursor: pointer;
          font-family: "Roboto-Regular";
          font-size: 12px;
          color: #26252e;
          font-weight: normal;
          line-height: 20px; }
          .blog-page .sort-date .technology-list .drop-down-list .item:hover {
            background-color: #434eba;
            color: #ffffff; }
          .blog-page .sort-date .technology-list .drop-down-list .item .main-cat {
            padding-left: 20px; }
        .blog-page .sort-date .technology-list .drop-down-list .item--active {
          background-color: black;
          color: #ffffff; }
          .blog-page .sort-date .technology-list .drop-down-list .item--active .item {
            color: unset; }
  .blog-page .down-arrow {
    height: 72px; }
    .blog-page .down-arrow svg {
      width: 16px;
      height: 22px;
      z-index: 1; }
      .blog-page .down-arrow svg path {
        stroke: #000000; }
  .blog-page .reset-button {
    width: 36px;
    height: 36px;
    margin-top: 95px;
    font-size: 16px;
    left: unset;
    right: calc(var(--singleGridWidth) * 0); } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.no-data-found {
  font-family: "Roboto-Medium";
  font-size: var(--font24);
  color: #26252e;
  font-weight: 500;
  line-height: 24px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.technology-detail-page {
  margin-top: 90px;
  overflow: hidden; }
  .technology-detail-page .margin-top {
    margin-bottom: var(--singleGridWidth); }
  .technology-detail-page .cob-our-clients {
    margin-top: var(--singleGridWidth);
    position: relative; }
    .technology-detail-page .cob-our-clients .side-title {
      top: 360px;
      left: var(--sideGridWidth); }
    .technology-detail-page .cob-our-clients div#ourWorkTagText {
      display: none; }

@media screen and (max-width: 1024px) {
  .technology-detail-page {
    margin-top: 72px; }
    .technology-detail-page .what-is-technology {
      margin: 72px 0; }
    .technology-detail-page .who-we-are-section .vertical-text {
      top: 110px; }
    .technology-detail-page .cob-our-clients {
      position: relative; }
      .technology-detail-page .cob-our-clients .side-title {
        top: 360px;
        left: var(--sideGridWidth); } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.what-we-do-section {
  position: relative;
  min-height: 1000px;
  margin-top: 156px; }
  .what-we-do-section .wrap-plus {
    left: var(--sideGridWidth);
    top: -15px; }
  .what-we-do-section .vertical-text {
    position: absolute;
    z-index: 1;
    transform: rotate(-90deg);
    transform-origin: left top;
    top: 310px;
    left: calc(var(--sideGridWidth));
    font-family: "Roboto-Medium";
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 32px;
    text-align: right;
    letter-spacing: 0.02em;
    color: #26252e; }
  .what-we-do-section .vertical-text-long {
    position: absolute;
    z-index: 1;
    transform: rotate(-90deg);
    transform-origin: left top;
    top: 370px;
    left: calc(var(--sideGridWidth));
    font-family: "Roboto-Medium";
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 32px;
    text-align: right;
    letter-spacing: 0.02em;
    color: #26252e; }
  .what-we-do-section .content-div {
    position: relative;
    margin-left: var(--secondGridLeft); }
    .what-we-do-section .content-div .dash-line {
      position: relative;
      height: 7px;
      width: 113px;
      background-color: #000000;
      top: -3.5px; }
    .what-we-do-section .content-div .section-title {
      margin-top: 55px;
      font-family: "Roboto-Medium";
      font-weight: 500;
      font-size: var(--font59);
      line-height: 90px;
      color: #26252e;
      margin-left: -4px;
      width: calc(var(--singleGridWidth) * 4); }
    .what-we-do-section .content-div .section-description {
      margin-top: 43px;
      font-family: "Roboto-Regular";
      font-style: normal;
      font-weight: 400;
      font-size: 20px;
      line-height: 30px;
      display: flex;
      align-items: center;
      letter-spacing: 0.02em;
      color: rgba(38, 37, 46, 0.7);
      width: calc(var(--singleGridWidth) * 4); }
  .what-we-do-section .dash-think-line {
    top: -2px;
    right: var(--sideGridWidth);
    height: 1px;
    width: calc(var(--singleGridWidth) * 2);
    position: absolute;
    background: rgba(38, 37, 46, 0.3); }
  .what-we-do-section .wrap-data-div {
    margin-top: 83px;
    margin-left: var(--sideGridWidth);
    width: calc(var(--singleGridWidth) * 8);
    display: block;
    position: relative; }
    .what-we-do-section .wrap-data-div .single-div {
      width: 100%;
      height: 471px;
      margin-right: 12px;
      transition: all 0.25s linear;
      display: flex;
      flex-direction: row; }
      .what-we-do-section .wrap-data-div .single-div:nth-child(odd) {
        flex-direction: row-reverse; }
      .what-we-do-section .wrap-data-div .single-div .item-img {
        height: 100%;
        width: calc(100% - calc(var(--singleGridWidth) * 3));
        background-color: #7d7c82; }
      .what-we-do-section .wrap-data-div .single-div .wrap-div {
        position: relative;
        height: 100%;
        width: calc(var(--singleGridWidth) * 3);
        background: #26252e;
        padding: 56px 72px; }
      .what-we-do-section .wrap-data-div .single-div .wrap-div-white {
        position: relative;
        height: 100%;
        width: calc(var(--singleGridWidth) * 3);
        padding: 56px 72px;
        background: #ecf1f2; }
        .what-we-do-section .wrap-data-div .single-div .wrap-div-white .item-text {
          color: #26252e; }
        .what-we-do-section .wrap-data-div .single-div .wrap-div-white .item-description {
          color: rgba(38, 37, 46, 0.7); }
      .what-we-do-section .wrap-data-div .single-div .item-text {
        font-family: "Roboto-Medium";
        font-weight: 500;
        font-size: 24px;
        line-height: 36px;
        display: flex;
        align-items: center;
        color: #ffffff; }
      .what-we-do-section .wrap-data-div .single-div .item-description {
        margin-top: 30px;
        font-family: "Roboto-Regular";
        font-style: normal;
        font-weight: normal;
        font-size: 20px;
        line-height: 30px;
        letter-spacing: 0.02em;
        color: rgba(255, 255, 255, 0.7); }

@media screen and (min-width: 1025px) and (max-width: 1279px) {
  .what-we-do-section {
    margin-top: var(--singleGridWidth); }
    .what-we-do-section .wrap-data-div .single-div .wrap-div {
      padding: 10% 3% !important; }
    .what-we-do-section .wrap-data-div .single-div .wrap-div-white {
      padding: 10% 3% !important; }
    .what-we-do-section .wrap-data-div .single-div .item-text {
      font-size: var(--font20) !important; }
    .what-we-do-section .wrap-data-div .single-div .item-description {
      font-size: var(--font18) !important; } }

@media screen and (min-width: 1025px) and (max-width: calc(1366px - 1px)) {
  .what-we-do-section {
    margin-top: var(--singleGridWidth);
    margin-bottom: 0px !important; }
    .what-we-do-section .wrap-data-div .single-div .wrap-div {
      padding: 7% 5% 10% 5%; }
    .what-we-do-section .wrap-data-div .single-div .wrap-div-white {
      padding: 7% 5% 10% 5%; }
    .what-we-do-section .wrap-data-div .single-div .item-text {
      font-size: var(--font22); }
    .what-we-do-section .wrap-data-div .single-div .item-description {
      font-size: var(--font20); } }

@media screen and (min-width: 1440px) {
  .what-we-do-section {
    position: relative;
    margin-top: 166px !important; } }

@media screen and (max-width: 1024px) {
  .what-we-do-section {
    position: relative;
    margin-bottom: 72px;
    margin-top: 72px;
    min-height: auto; }
    .what-we-do-section .wrap-plus {
      left: var(--sideGridWidth);
      top: -7.5px; }
    .what-we-do-section .vertical-text {
      top: 185px;
      font-size: 12px;
      line-height: 18px; }
    .what-we-do-section .vertical-text-long {
      top: 245px;
      font-size: 12px;
      line-height: 18px; }
    .what-we-do-section .content-div {
      position: relative;
      margin-left: var(--secondGridLeft); }
      .what-we-do-section .content-div .dash-line {
        width: 50px; }
      .what-we-do-section .content-div .section-title {
        font-size: 30px;
        line-height: 40px;
        width: calc(var(--singleGridWidth) * 2);
        margin-top: 24px;
        margin-left: -1px; }
      .what-we-do-section .content-div .section-description {
        margin-top: 16px;
        font-size: 12px;
        line-height: 20px;
        width: calc(var(--singleGridWidth) * 3); }
    .what-we-do-section .dash-think-line {
      right: var(--sideGridWidth);
      width: var(--singleGridWidth); }
    .what-we-do-section .wrap-data-div {
      margin-top: 48px;
      margin-left: var(--sideGridWidth);
      width: calc(var(--singleGridWidth) * 4);
      display: block;
      position: relative; }
      .what-we-do-section .wrap-data-div .single-div {
        width: 100%;
        height: auto;
        flex-direction: column-reverse; }
        .what-we-do-section .wrap-data-div .single-div:nth-child(odd) {
          flex-direction: column-reverse; }
        .what-we-do-section .wrap-data-div .single-div .item-img {
          height: 164px;
          width: 100%; }
        .what-we-do-section .wrap-data-div .single-div .wrap-div {
          height: 296px;
          width: calc(var(--singleGridWidth) * 4);
          padding: 30px 36px; }
        .what-we-do-section .wrap-data-div .single-div .wrap-div-white {
          height: 296px;
          width: calc(var(--singleGridWidth) * 4);
          padding: 30px 36px; }
        .what-we-do-section .wrap-data-div .single-div .item-text {
          font-size: 14px;
          line-height: 20px; }
        .what-we-do-section .wrap-data-div .single-div .item-description {
          margin-top: 16px;
          font-size: 12px;
          line-height: 20px; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.description-holder > div {
  height: 50px; }

.benefit-for-customer {
  position: relative;
  margin-bottom: var(--margin166);
  height: auto; }
  .benefit-for-customer .wrap-plus {
    transform: translate(-50%, -50%);
    top: 0;
    left: calc(var(--singleGridWidth) * 4 + var(--sideGridWidth)); }
  .benefit-for-customer .title-and-bar {
    display: flex;
    flex-direction: column;
    padding-left: calc(var(--sideGridWidth) + var(--singleGridWidth));
    position: relative; }
    .benefit-for-customer .title-and-bar .title {
      font-family: "Roboto-Medium";
      font-size: var(--font59);
      color: #26252e;
      font-weight: 500;
      line-height: 90px;
      width: calc(calc(var(--singleGridWidth) * 2) + 50px);
      margin-top: 54.5px;
      margin-bottom: 83px; }
    .benefit-for-customer .title-and-bar .bold-line {
      position: relative;
      top: 0; }
    .benefit-for-customer .title-and-bar .vertical-text {
      font-family: "Roboto-Medium";
      font-size: var(--font20);
      color: #26252e;
      font-weight: 500;
      line-height: 32px;
      position: absolute;
      left: var(--sideGridWidth);
      transform: translateX(-100%) rotate(-90deg);
      transform-origin: right top;
      top: 60px; }
  .benefit-for-customer .image-and-description {
    position: relative;
    display: flex;
    width: 100%;
    z-index: 2; }
    .benefit-for-customer .image-and-description .image {
      height: 100%;
      height: 550px;
      width: calc(var(--sideGridWidth) + calc(var(--singleGridWidth) * 4) + 82px);
      background-color: #7d7c82; }
      .benefit-for-customer .image-and-description .image img {
        width: 100%;
        height: 100%;
        background-size: cover; }
    .benefit-for-customer .image-and-description .description {
      font-family: "Roboto-Regular";
      font-size: var(--font20);
      color: #26252e;
      font-weight: 400;
      line-height: 30px;
      letter-spacing: 0.02em;
      opacity: 0.7;
      width: calc(var(--singleGridWidth) * 2.3);
      margin-left: calc(var(--singleGridWidth) - 82px);
      margin-bottom: 40px; }
      .benefit-for-customer .image-and-description .description .read-more {
        opacity: 0.8;
        cursor: pointer;
        font-family: "Roboto-Medium";
        font-size: var(--font20);
        color: #16c36e;
        font-weight: 500;
        line-height: 23px; }
        .benefit-for-customer .image-and-description .description .read-more svg {
          width: 15px;
          height: 10px; }
          .benefit-for-customer .image-and-description .description .read-more svg path {
            stroke: #16c36e;
            stroke-width: 2px; }
      .benefit-for-customer .image-and-description .description p {
        font-weight: 700; }
  .benefit-for-customer .background-benefit-customer {
    position: absolute;
    height: 100%;
    bottom: 0;
    z-index: 1;
    width: 100%; }
    .benefit-for-customer .background-benefit-customer .bg-color {
      position: absolute;
      bottom: 0;
      height: 100%;
      background-color: #ecf1f2;
      width: calc(var(--singleGridWidth) * 4 + var(--sideGridWidth));
      left: calc(var(--singleGridWidth) * 4 + var(--sideGridWidth)); }
    .benefit-for-customer .background-benefit-customer .grid-line .grid-two,
    .benefit-for-customer .background-benefit-customer .grid-line .grid-three,
    .benefit-for-customer .background-benefit-customer .grid-line .grid-four,
    .benefit-for-customer .background-benefit-customer .grid-line .grid-five {
      display: none; }

@media screen and (min-width: 1025px) and (max-width: calc(1366px - 1px)) {
  .benefit-for-customer {
    margin-top: var(--singleGridWidth) !important; } }

@media screen and (max-width: 1024px) {
  .benefit-for-customer {
    padding-bottom: 36px;
    margin-top: 72px !important; }
    .benefit-for-customer .wrap-plus {
      transform: translate(-50%, -50%);
      top: 0;
      left: calc(var(--singleGridWidth) * 4 + var(--sideGridWidth)); }
    .benefit-for-customer .title-and-bar .title {
      width: calc(var(--singleGridWidth) * 3);
      line-height: 40px;
      margin-top: 26px;
      margin-bottom: 60px; }
    .benefit-for-customer .title-and-bar .vertical-text {
      line-height: 18px;
      top: 80px;
      left: var(--sideGridWidth); }
    .benefit-for-customer .image-and-description {
      flex-direction: column-reverse; }
      .benefit-for-customer .image-and-description .image {
        height: 184px;
        width: calc(var(--sideGridWidth) + calc(var(--singleGridWidth) * 3) + 36px); }
      .benefit-for-customer .image-and-description .description {
        line-height: 20px;
        width: calc(var(--singleGridWidth) * 2);
        margin-left: calc( var(--singleGridWidth) + calc(var(--singleGridWidth) / 2) + var(--sideGridWidth));
        margin-bottom: 36px; }
        .benefit-for-customer .image-and-description .description .read-more {
          line-height: 20px; }
          .benefit-for-customer .image-and-description .description .read-more svg {
            width: 10px;
            height: 7px; }
    .benefit-for-customer .background-benefit-customer {
      height: calc(100% - 120px); }
      .benefit-for-customer .background-benefit-customer .bg-color {
        width: calc(var(--singleGridWidth) * 3 + var(--sideGridWidth));
        left: calc(var(--singleGridWidth) + var(--sideGridWidth)); }
      .benefit-for-customer .background-benefit-customer .grid-line .grid-two,
      .benefit-for-customer .background-benefit-customer .grid-line .grid-three,
      .benefit-for-customer .background-benefit-customer .grid-line .grid-four,
      .benefit-for-customer .background-benefit-customer .grid-line .grid-five {
        display: block; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.technology-page {
  margin-top: 90px;
  position: relative; }
  .technology-page .agenda-items {
    display: flex; }
    .technology-page .agenda-items ul {
      margin: 0;
      padding: 0;
      margin-right: 70px; }
      .technology-page .agenda-items ul li {
        list-style: none;
        margin-bottom: 10px; }
        .technology-page .agenda-items ul li:hover {
          cursor: pointer; }
        .technology-page .agenda-items ul li a {
          font-family: "Roboto-Regular";
          font-style: normal;
          font-weight: normal;
          font-size: 16px;
          letter-spacing: 0.01em;
          color: rgba(38, 37, 46, 0.5); }
  .technology-page .down-arrow {
    height: 166px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; }
    .technology-page .down-arrow svg {
      z-index: 1; }
      .technology-page .down-arrow svg path {
        stroke: #000000; }

@media screen and (min-width: 1366px) and (max-width: calc(1440px - 1px)) {
  .technology-page .down-arrow {
    height: 156px; } }

@media screen and (max-width: 1024px) {
  .technology-page {
    margin-top: 72px; }
    .technology-page .agenda-items ul {
      margin-right: 57px; }
      .technology-page .agenda-items ul:last-child {
        margin-right: 0; }
      .technology-page .agenda-items ul li a {
        font-size: 12px; }
    .technology-page .down-arrow {
      height: 72px; }
      .technology-page .down-arrow svg {
        width: 16px;
        height: 22px;
        z-index: 1; }
        .technology-page .down-arrow svg path {
          stroke: #000000; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.our-technology-grid {
  width: calc(calc(var(--singleGridWidth) * 3) + 112px);
  height: auto; }
  .our-technology-grid .image-title-description {
    cursor: pointer;
    position: relative;
    z-index: 1;
    height: calc(calc(var(--singleGridWidth) * 3) + 112px);
    width: 100%;
    background-size: cover;
    background-position: top left; }
    .our-technology-grid .image-title-description .shadow {
      position: absolute;
      background: #26252e;
      opacity: 0.5;
      height: inherit;
      width: 100%;
      top: 0;
      right: 0;
      z-index: 1; }
    .our-technology-grid .image-title-description .title-description {
      padding: 133px 138px 153px;
      position: relative;
      z-index: 1; }
      .our-technology-grid .image-title-description .title-description .title {
        font-family: "Roboto-Medium";
        font-size: var(--font24);
        color: #ffffff;
        font-weight: 500;
        line-height: 36px;
        margin-bottom: 44px; }
      .our-technology-grid .image-title-description .title-description .description {
        font-family: "Roboto-Regular";
        font-size: var(--font20);
        color: #ffffff;
        font-weight: 400;
        line-height: 30px;
        letter-spacing: 0.02em;
        opacity: 0.7;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        -ms-box-orient: vertical;
        box-orient: vertical;
        -webkit-line-clamp: 6;
        -moz-line-clamp: 6;
        -ms-line-clamp: 6;
        line-clamp: 6; }
  .our-technology-grid .read-more {
    position: relative;
    width: 100%;
    height: 166px;
    display: flex;
    justify-content: space-between;
    padding-left: 52px; }
    .our-technology-grid .read-more .text {
      cursor: pointer;
      font-family: "Roboto-Regular";
      font-size: var(--font20);
      color: #16c36e;
      font-weight: 400;
      line-height: 23px;
      opacity: 0.8;
      position: relative;
      z-index: 2;
      height: calc(100% / 2);
      display: flex;
      align-items: center; }
    .our-technology-grid .read-more a {
      width: 83px;
      height: calc(100% / 2);
      position: relative;
      z-index: 2;
      padding: 0;
      margin: 0;
      text-decoration: none; }

@media screen and (min-width: 1025px) and (max-width: calc(1366px - 1px)) {
  .our-technology-grid .image-title-description .title-description {
    padding: 20%; } }

@media screen and (max-width: 1024px) {
  .our-technology-grid .image-title-description {
    height: 320px; }
    .our-technology-grid .image-title-description .title-description {
      padding: 68px 52px;
      position: relative;
      z-index: 1; }
      .our-technology-grid .image-title-description .title-description .title {
        line-height: 20px;
        margin-bottom: 44px; }
      .our-technology-grid .image-title-description .title-description .description {
        line-height: 20px;
        opacity: 0.7; }
  .our-technology-grid .read-more {
    height: 72px;
    padding-left: 16px; }
    .our-technology-grid .read-more .text {
      line-height: 20px; }
    .our-technology-grid .read-more a {
      width: 36px;
      height: calc(100% / 2); } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.next-pre-box {
  width: 100%;
  height: 100%;
  background: #434eba;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer; }
  .next-pre-box.slide-right-button {
    background-color: #434eba; }

.next:hover {
  opacity: 1; }

@media screen and (max-width: 1024px) {
  .next-pre-box svg {
    width: 14px;
    height: 10px; }
    .next-pre-box svg path {
      stroke: white;
      stroke-width: 3px; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.service-our-technology {
  position: relative;
  padding-bottom: calc(var(--margin166) - 83px); }
  .service-our-technology .service-header-background {
    position: absolute;
    width: calc(var(--singleGridWidth) * 4.67);
    height: 850px;
    margin-left: calc(var(--sideGridWidth));
    background: #ecf1f2; }
  .service-our-technology .bar-title-description {
    width: calc(var(--singleGridWidth) * 3);
    position: absolute;
    z-index: 2;
    left: var(--singleGridWidth);
    top: 113px; }
    .service-our-technology .bar-title-description .bold-line {
      margin-bottom: 48px; }
    .service-our-technology .bar-title-description .title {
      font-family: "Roboto-Medium";
      font-size: var(--font59);
      color: #26252e;
      font-weight: 500;
      line-height: 90px;
      margin-bottom: 48px; }
    .service-our-technology .bar-title-description .description {
      font-family: "Roboto-Regular";
      font-size: var(--font20);
      color: rgba(38, 37, 46, 0.7);
      font-weight: 400;
      line-height: 30px;
      letter-spacing: 0.02em; }
  .service-our-technology .wrap-plus {
    top: -13px;
    left: var(--sideGridWidth);
    z-index: 0; }
  .service-our-technology .vertical-text {
    position: absolute;
    left: var(--sideGridWidth);
    top: 320px;
    transform: rotate(-90deg);
    transform-origin: left top;
    font-family: "Roboto-Medium";
    font-size: var(--font20);
    color: #26252e;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: 0.02em; }
  .service-our-technology .section-title {
    position: absolute;
    top: 1270px;
    font-family: "Roboto-Medium";
    font-style: normal;
    font-weight: 500;
    font-size: 210px;
    line-height: 36px;
    display: flex;
    align-items: center;
    color: #ecf1f2;
    left: calc(var(--sideGridWidth) - 6px); }
  .service-our-technology .our-technology-grid-details {
    position: relative;
    z-index: 2;
    max-width: 1214px;
    display: flex;
    margin-left: calc(var(--sideGridWidth) + var(--singleGridWidth));
    flex-wrap: wrap; }
    .service-our-technology .our-technology-grid-details .our-technology-grid {
      width: 50%; }
      .service-our-technology .our-technology-grid-details .our-technology-grid:first-child {
        margin-left: 50%; }
      .service-our-technology .our-technology-grid-details .our-technology-grid:nth-child(even) {
        margin-top: -230px; }
  .service-our-technology .vertical-background {
    position: absolute;
    z-index: -1;
    top: 690px;
    left: var(--sideGridWidth);
    height: 1238px;
    width: 802px;
    background: #ecf1f2; }
  .service-our-technology .vertical-title {
    position: absolute;
    left: var(--sideGridWidth);
    bottom: 346px;
    z-index: -1;
    font-family: "Roboto-Medium";
    font-size: 210px;
    color: #ecf1f2;
    font-weight: 500;
    line-height: 160px;
    transform: rotate(-90deg);
    transform-origin: top left; }
  .service-our-technology .bottom-background {
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: var(--sideGridWidth);
    height: 790px;
    width: calc(var(--singleGridWidth) * 8);
    background: #ecf1f2; }
  .service-our-technology .bottom-bold-line {
    position: absolute;
    bottom: 0;
    left: calc(var(--sideGridWidth) + var(--singleGridWidth));
    width: calc(var(--singleGridWidth) * 2);
    border: 1px solid #26252e;
    opacity: 0.3; }

@media screen and (min-width: 1025px) and (max-width: calc(1366px - 1px)) {
  .service-our-technology .service-header-background {
    width: calc(var(--singleGridWidth) * 4.75); }
  .service-our-technology .bar-title-description .title {
    font-size: var(--font56);
    line-height: 80px;
    margin-bottom: 20px; } }

@media screen and (min-width: 1366px) and (max-width: calc(1440px - 1px)) {
  .service-our-technology .service-header-background {
    width: calc(var(--singleGridWidth) * 4.7); }
  .service-our-technology .bar-title-description .title {
    font-size: 56px; }
  .service-our-technology .bar-title-description .description {
    font-size: 18px; }
  .service-our-technology .section-title {
    font-size: 195px;
    top: 1210px; } }

@media screen and (max-width: 1024px) {
  .service-our-technology {
    padding-bottom: 0;
    margin-bottom: 0; }
    .service-our-technology .service-header-background {
      width: calc(var(--singleGridWidth) * 4);
      position: static;
      height: 300px; }
    .service-our-technology .bar-title-description {
      top: 72px;
      left: calc(var(--singleGridWidth) + var(--sideGridWidth)); }
      .service-our-technology .bar-title-description .bold-line {
        width: 50px;
        margin-bottom: 30px; }
      .service-our-technology .bar-title-description .title {
        font-size: 30px;
        line-height: 40px;
        margin-bottom: 24px; }
      .service-our-technology .bar-title-description .description {
        font-size: 12px;
        line-height: 20px;
        max-width: 180px; }
    .service-our-technology .wrap-plus {
      display: none; }
    .service-our-technology .vertical-text {
      top: 193px; }
    .service-our-technology .section-title {
      top: 1018px;
      left: -26px;
      font-size: 80px;
      line-height: 94px;
      font-size: 80px; }
    .service-our-technology .our-technology-grid-details {
      margin-left: 0; }
      .service-our-technology .our-technology-grid-details .our-technology-grid {
        width: 100%;
        margin: 0; }
        .service-our-technology .our-technology-grid-details .our-technology-grid:first-child {
          margin-left: 0; }
        .service-our-technology .our-technology-grid-details .our-technology-grid:nth-child(even) {
          margin-top: 0; }
    .service-our-technology .bottom-bold-line {
      display: none; }
    .service-our-technology .bottom-background {
      height: 72px;
      width: calc(var(--singleGridWidth) * 4);
      bottom: 0;
      z-index: 0; }
      .service-our-technology .bottom-background .grid-line-extra {
        display: none; }
    .service-our-technology .our-technology-grid .image-title-description .title-description .title {
      font-size: 14px;
      line-height: 20px;
      margin-bottom: 24px; }
    .service-our-technology .our-technology-grid .image-title-description .title-description .description {
      font-size: 12px;
      line-height: 20px;
      opacity: 0.7; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.our-service {
  position: relative;
  margin-bottom: 0;
  padding-bottom: 166px; }
  .our-service .bar-title-description {
    width: calc(var(--singleGridWidth) * 3);
    position: absolute;
    z-index: 2;
    left: calc(var(--sideGridWidth) + var(--singleGridWidth));
    top: 113px; }
    .our-service .bar-title-description .bold-line {
      position: relative;
      width: 114px;
      height: 7px;
      background-color: #000000;
      margin-bottom: 48px; }
    .our-service .bar-title-description .title {
      font-family: "Roboto-Medium";
      font-size: var(--font59);
      color: #26252e;
      font-weight: 500;
      line-height: 90px;
      margin-bottom: 48px; }
    .our-service .bar-title-description .description {
      font-family: "Roboto-Regular";
      font-size: var(--font20);
      color: rgba(38, 37, 46, 0.7);
      font-weight: 400;
      line-height: 30px;
      letter-spacing: 0.02em; }
  .our-service .wrap-plus {
    top: 0;
    left: calc(var(--sideGridWidth) + 1px); }
  .our-service .vertical-text {
    position: absolute;
    left: var(--sideGridWidth);
    top: 370px;
    transform: rotate(-90deg);
    transform-origin: left top;
    font-family: "Roboto-Medium";
    font-size: var(--font20);
    color: #26252e;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: 0.02em; }
  .our-service .our-technology-grid-details {
    position: relative;
    z-index: 2;
    max-width: 1214px;
    display: flex;
    margin-left: calc(var(--sideGridWidth) + var(--singleGridWidth));
    flex-wrap: wrap; }
    .our-service .our-technology-grid-details .our-technology-grid {
      width: 50%; }
      .our-service .our-technology-grid-details .our-technology-grid:first-child {
        margin-left: 50%; }
      .our-service .our-technology-grid-details .our-technology-grid:nth-child(even) {
        margin-top: -230px; }
  .our-service .vertical-background {
    position: absolute;
    z-index: -1;
    top: 690px;
    left: var(--sideGridWidth);
    height: 1238px;
    width: 802px;
    background: #ecf1f2; }
  .our-service .vertical-title {
    position: absolute;
    left: calc(var(--sideGridWidth) + 7px);
    bottom: 0px;
    z-index: -1;
    font-family: "Roboto-Medium";
    font-size: var(--font210);
    color: #ecf1f2;
    font-weight: 500;
    line-height: 157px;
    transform: rotate(-90deg);
    transform-origin: top left; }
  .our-service .grid-line {
    height: 1238px;
    position: absolute;
    bottom: 0;
    width: 100%; }
    .our-service .grid-line .bottom-background {
      position: absolute;
      z-index: -1;
      left: calc(var(--sideGridWidth) + calc(var(--singleGridWidth) * 3));
      height: 1238px;
      width: calc(var(--singleGridWidth) * 5);
      background: #ecf1f2; }
    .our-service .grid-line .grid-one,
    .our-service .grid-line .grid-two,
    .our-service .grid-line .grid-three,
    .our-service .grid-line .grid-four,
    .our-service .grid-line .grid-nine {
      display: none; }
  .our-service .bottom-bold-line {
    position: absolute;
    bottom: 0;
    margin-left: var(--sideGridWidth);
    width: var(--singleGridWidth);
    border: 1px solid #26252e;
    opacity: 0.3; }

@media screen and (min-width: 1025px) and (max-width: 1079px) {
  .our-service .vertical-title {
    left: calc(var(--sideGridWidth) - 27px) !important;
    bottom: -90px !important;
    font-size: 125px !important; } }

@media screen and (min-width: 1080px) and (max-width: 1179px) {
  .our-service .vertical-title {
    left: calc(var(--sideGridWidth) - 19px) !important;
    bottom: -120px !important;
    font-size: 147px !important; } }

@media screen and (min-width: 1180px) and (max-width: 1279px) {
  .our-service .vertical-title {
    left: calc(var(--sideGridWidth) - 8px) !important;
    bottom: -125px !important;
    font-size: 173px !important; } }

@media screen and (min-width: 1025px) and (max-width: calc(1366px - 1px)) {
  .our-service .bar-title-description .bold-line {
    margin-bottom: 30px; }
  .our-service .bar-title-description .title {
    font-size: 48px;
    line-height: 80px;
    margin-bottom: 20px; }
  .our-service .bar-title-description .description {
    font-size: var(--font20); }
  .our-service .vertical-title {
    left: calc(var(--sideGridWidth) - 2px);
    bottom: -90px;
    font-size: 190px; } }

@media screen and (min-width: calc(1366px)) and (max-width: calc(1440px - 1px)) {
  .our-service .vertical-title {
    left: calc(var(--sideGridWidth) + 4px);
    font-size: 204px; } }

@media screen and (min-width: calc(1920px)) {
  .our-service .vertical-title {
    left: calc(var(--sideGridWidth) + 7px); } }

@media screen and (max-width: 1024px) {
  .our-service {
    margin-bottom: 0;
    padding-bottom: 84px; }
    .our-service .bar-title-description {
      top: 0; }
      .our-service .bar-title-description .bold-line {
        margin-bottom: 30px;
        width: 50px; }
      .our-service .bar-title-description .title {
        width: 80px;
        margin-bottom: 24px;
        line-height: 40px; }
      .our-service .bar-title-description .description {
        line-height: 20px; }
    .our-service .wrap-plus {
      top: -5px; }
    .our-service .vertical-text {
      line-height: 18px;
      top: 180px; }
    .our-service .our-technology-grid-details {
      padding: 261px 0 0px 0;
      margin-left: 0; }
      .our-service .our-technology-grid-details .our-technology-grid {
        width: 100%;
        margin: 0; }
        .our-service .our-technology-grid-details .our-technology-grid:first-child {
          margin-left: 0%; }
        .our-service .our-technology-grid-details .our-technology-grid:nth-child(even) {
          margin-top: 0px; }
    .our-service .vertical-background {
      display: none; }
    .our-service .vertical-title {
      display: none; }
    .our-service .grid-line {
      bottom: 48px; }
      .our-service .grid-line .bottom-background {
        left: calc(var(--sideGridWidth) + var(--singleGridWidth));
        width: calc(var(--singleGridWidth) * 3); }
      .our-service .grid-line .grid-six,
      .our-service .grid-line .grid-eight {
        display: none; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.our-service {
  position: relative;
  margin-bottom: 0;
  padding-bottom: 166px; }
  .our-service .bar-title-description {
    width: calc(var(--singleGridWidth) * 3);
    position: absolute;
    z-index: 2;
    left: calc(var(--sideGridWidth) + var(--singleGridWidth));
    top: 113px; }
    .our-service .bar-title-description .bold-line {
      position: relative;
      width: 114px;
      height: 7px;
      background-color: #000000;
      margin-bottom: 48px; }
    .our-service .bar-title-description .title {
      font-family: "Roboto-Medium";
      font-size: var(--font59);
      color: #26252e;
      font-weight: 500;
      line-height: 90px;
      margin-bottom: 48px; }
    .our-service .bar-title-description .description {
      font-family: "Roboto-Regular";
      font-size: var(--font20);
      color: rgba(38, 37, 46, 0.7);
      font-weight: 400;
      line-height: 30px;
      letter-spacing: 0.02em; }
  .our-service .wrap-plus {
    top: 0;
    left: calc(var(--sideGridWidth) + 1px); }
  .our-service .vertical-text {
    position: absolute;
    left: var(--sideGridWidth);
    top: 370px;
    transform: rotate(-90deg);
    transform-origin: left top;
    font-family: "Roboto-Medium";
    font-size: var(--font20);
    color: #26252e;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: 0.02em; }
  .our-service .our-technology-grid-details {
    position: relative;
    z-index: 2;
    max-width: 1214px;
    display: flex;
    margin-left: calc(var(--sideGridWidth) + var(--singleGridWidth));
    flex-wrap: wrap; }
    .our-service .our-technology-grid-details .our-technology-grid {
      width: 50%; }
      .our-service .our-technology-grid-details .our-technology-grid:first-child {
        margin-left: 50%; }
      .our-service .our-technology-grid-details .our-technology-grid:nth-child(even) {
        margin-top: -230px; }
  .our-service .vertical-background {
    position: absolute;
    z-index: -1;
    top: 690px;
    left: var(--sideGridWidth);
    height: 1238px;
    width: 802px;
    background: #ecf1f2; }
  .our-service .vertical-title {
    position: absolute;
    left: calc(var(--sideGridWidth) + 7px);
    bottom: 0px;
    z-index: -1;
    font-family: "Roboto-Medium";
    font-size: var(--font210);
    color: #ecf1f2;
    font-weight: 500;
    line-height: 157px;
    transform: rotate(-90deg);
    transform-origin: top left; }
  .our-service .grid-line {
    height: 1238px;
    position: absolute;
    bottom: 0;
    width: 100%; }
    .our-service .grid-line .bottom-background {
      position: absolute;
      z-index: -1;
      left: calc(var(--sideGridWidth) + calc(var(--singleGridWidth) * 3));
      height: 1238px;
      width: calc(var(--singleGridWidth) * 5);
      background: #ecf1f2; }
    .our-service .grid-line .grid-one,
    .our-service .grid-line .grid-two,
    .our-service .grid-line .grid-three,
    .our-service .grid-line .grid-four,
    .our-service .grid-line .grid-nine {
      display: none; }
  .our-service .bottom-bold-line {
    position: absolute;
    bottom: 0;
    margin-left: var(--sideGridWidth);
    width: var(--singleGridWidth);
    border: 1px solid #26252e;
    opacity: 0.3; }

@media screen and (min-width: 1025px) and (max-width: 1079px) {
  .our-service .vertical-title {
    left: calc(var(--sideGridWidth) - 27px) !important;
    bottom: -90px !important;
    font-size: 125px !important; } }

@media screen and (min-width: 1080px) and (max-width: 1179px) {
  .our-service .vertical-title {
    left: calc(var(--sideGridWidth) - 19px) !important;
    bottom: -120px !important;
    font-size: 147px !important; } }

@media screen and (min-width: 1180px) and (max-width: 1279px) {
  .our-service .vertical-title {
    left: calc(var(--sideGridWidth) - 8px) !important;
    bottom: -125px !important;
    font-size: 173px !important; } }

@media screen and (min-width: 1025px) and (max-width: calc(1366px - 1px)) {
  .our-service .bar-title-description .bold-line {
    margin-bottom: 30px; }
  .our-service .bar-title-description .title {
    font-size: 48px;
    line-height: 80px;
    margin-bottom: 20px; }
  .our-service .bar-title-description .description {
    font-size: var(--font20); }
  .our-service .vertical-title {
    left: calc(var(--sideGridWidth) - 2px);
    bottom: -90px;
    font-size: 190px; } }

@media screen and (min-width: calc(1366px)) and (max-width: calc(1440px - 1px)) {
  .our-service .vertical-title {
    left: calc(var(--sideGridWidth) + 4px);
    font-size: 204px; } }

@media screen and (min-width: calc(1920px)) {
  .our-service .vertical-title {
    left: calc(var(--sideGridWidth) + 7px); } }

@media screen and (max-width: 1024px) {
  .our-service {
    margin-bottom: 0;
    padding-bottom: 84px; }
    .our-service .bar-title-description {
      top: 0; }
      .our-service .bar-title-description .bold-line {
        margin-bottom: 30px;
        width: 50px; }
      .our-service .bar-title-description .title {
        width: 80px;
        margin-bottom: 24px;
        line-height: 40px; }
      .our-service .bar-title-description .description {
        line-height: 20px; }
    .our-service .wrap-plus {
      top: -5px; }
    .our-service .vertical-text {
      line-height: 18px;
      top: 180px; }
    .our-service .our-technology-grid-details {
      padding: 261px 0 0px 0;
      margin-left: 0; }
      .our-service .our-technology-grid-details .our-technology-grid {
        width: 100%;
        margin: 0; }
        .our-service .our-technology-grid-details .our-technology-grid:first-child {
          margin-left: 0%; }
        .our-service .our-technology-grid-details .our-technology-grid:nth-child(even) {
          margin-top: 0px; }
    .our-service .vertical-background {
      display: none; }
    .our-service .vertical-title {
      display: none; }
    .our-service .grid-line {
      bottom: 48px; }
      .our-service .grid-line .bottom-background {
        left: calc(var(--sideGridWidth) + var(--singleGridWidth));
        width: calc(var(--singleGridWidth) * 3); }
      .our-service .grid-line .grid-six,
      .our-service .grid-line .grid-eight {
        display: none; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.our-technology {
  position: relative;
  margin-bottom: 0;
  padding-bottom: 166px; }
  .our-technology .bar-title-description {
    width: calc(var(--singleGridWidth) * 3);
    position: absolute;
    z-index: 2;
    left: calc(var(--sideGridWidth) + var(--singleGridWidth));
    top: 113px; }
    .our-technology .bar-title-description .bold-line {
      position: relative;
      width: 114px;
      height: 7px;
      background-color: #000000;
      margin-bottom: 48px; }
    .our-technology .bar-title-description .title {
      font-family: "Roboto-Medium";
      font-size: var(--font59);
      color: #26252e;
      font-weight: 500;
      line-height: 90px;
      margin-bottom: 48px; }
    .our-technology .bar-title-description .description {
      font-family: "Roboto-Regular";
      font-size: var(--font20);
      color: rgba(38, 37, 46, 0.7);
      font-weight: 400;
      line-height: 30px;
      letter-spacing: 0.02em; }
  .our-technology .wrap-plus {
    top: 0;
    left: calc(var(--sideGridWidth) + 1px); }
  .our-technology .vertical-text {
    position: absolute;
    left: var(--sideGridWidth);
    top: 370px;
    transform: rotate(-90deg);
    transform-origin: left top;
    font-family: "Roboto-Medium";
    font-size: var(--font20);
    color: #26252e;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: 0.02em; }
  .our-technology .our-technology-grid-details {
    position: relative;
    z-index: 2;
    max-width: 1214px;
    display: flex;
    margin-left: calc(var(--sideGridWidth) + var(--singleGridWidth));
    flex-wrap: wrap; }
    .our-technology .our-technology-grid-details .our-technology-grid {
      width: 50%; }
      .our-technology .our-technology-grid-details .our-technology-grid:first-child {
        margin-left: 50%; }
      .our-technology .our-technology-grid-details .our-technology-grid:nth-child(even) {
        margin-top: -230px; }
  .our-technology .vertical-background {
    position: absolute;
    z-index: -1;
    top: 690px;
    left: var(--sideGridWidth);
    height: 1238px;
    width: 802px;
    background: #ecf1f2; }
  .our-technology .vertical-title {
    position: absolute;
    left: calc(var(--sideGridWidth) + 7px);
    bottom: 0px;
    z-index: -1;
    font-family: "Roboto-Medium";
    font-size: var(--font210);
    color: #ecf1f2;
    font-weight: 500;
    line-height: 157px;
    transform: rotate(-90deg);
    transform-origin: top left; }
  .our-technology .grid-line {
    height: 1238px;
    position: absolute;
    bottom: 0;
    width: 100%; }
    .our-technology .grid-line .bottom-background {
      position: absolute;
      z-index: -1;
      left: calc(var(--sideGridWidth) + calc(var(--singleGridWidth) * 3));
      height: 1238px;
      width: calc(var(--singleGridWidth) * 5);
      background: #ecf1f2; }
    .our-technology .grid-line .grid-one,
    .our-technology .grid-line .grid-two,
    .our-technology .grid-line .grid-three,
    .our-technology .grid-line .grid-four,
    .our-technology .grid-line .grid-nine {
      display: none; }
  .our-technology .bottom-bold-line {
    position: absolute;
    bottom: 0;
    margin-left: var(--sideGridWidth);
    width: var(--singleGridWidth);
    border: 1px solid #26252e;
    opacity: 0.3; }

@media screen and (min-width: 1025px) and (max-width: 1079px) {
  .our-technology .vertical-title {
    left: calc(var(--sideGridWidth) - 27px) !important;
    bottom: -90px !important;
    font-size: 125px !important; } }

@media screen and (min-width: 1080px) and (max-width: 1179px) {
  .our-technology .vertical-title {
    left: calc(var(--sideGridWidth) - 19px) !important;
    bottom: -120px !important;
    font-size: 147px !important; } }

@media screen and (min-width: 1180px) and (max-width: 1279px) {
  .our-technology .vertical-title {
    left: calc(var(--sideGridWidth) - 8px) !important;
    bottom: -125px !important;
    font-size: 173px !important; } }

@media screen and (min-width: 1025px) and (max-width: calc(1366px - 1px)) {
  .our-technology .bar-title-description .bold-line {
    margin-bottom: 30px; }
  .our-technology .bar-title-description .title {
    font-size: 48px;
    line-height: 80px;
    margin-bottom: 20px; }
  .our-technology .bar-title-description .description {
    font-size: var(--font20); }
  .our-technology .vertical-title {
    left: calc(var(--sideGridWidth) - 2px);
    bottom: -90px;
    font-size: 190px; } }

@media screen and (min-width: calc(1366px)) and (max-width: calc(1440px - 1px)) {
  .our-technology .vertical-title {
    left: calc(var(--sideGridWidth) + 4px);
    font-size: 204px; } }

@media screen and (min-width: calc(1920px)) {
  .our-technology .vertical-title {
    left: calc(var(--sideGridWidth) + 7px); } }

@media screen and (max-width: 1024px) {
  .our-technology {
    margin-bottom: 0;
    padding-bottom: 84px; }
    .our-technology .bar-title-description {
      top: 0; }
      .our-technology .bar-title-description .bold-line {
        margin-bottom: 30px;
        width: 50px; }
      .our-technology .bar-title-description .title {
        width: 80px;
        margin-bottom: 24px;
        line-height: 40px; }
      .our-technology .bar-title-description .description {
        line-height: 20px; }
    .our-technology .wrap-plus {
      top: -5px; }
    .our-technology .vertical-text {
      line-height: 18px;
      top: 180px; }
    .our-technology .our-technology-grid-details {
      padding: 261px 0 0px 0;
      margin-left: 0; }
      .our-technology .our-technology-grid-details .our-technology-grid {
        width: 100%;
        margin: 0; }
        .our-technology .our-technology-grid-details .our-technology-grid:first-child {
          margin-left: 0%; }
        .our-technology .our-technology-grid-details .our-technology-grid:nth-child(even) {
          margin-top: 0px; }
    .our-technology .vertical-background {
      display: none; }
    .our-technology .vertical-title {
      display: none; }
    .our-technology .grid-line {
      bottom: 48px; }
      .our-technology .grid-line .bottom-background {
        left: calc(var(--sideGridWidth) + var(--singleGridWidth));
        width: calc(var(--singleGridWidth) * 3); }
      .our-technology .grid-line .grid-six,
      .our-technology .grid-line .grid-eight {
        display: none; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.detail-page {
  margin-top: 90px;
  width: 100%; }
  @media (min-width: 768px) and (max-width: 1024px) {
    .detail-page {
      overflow: hidden; } }

@media screen and (max-width: 1024px) {
  .detail-page {
    margin-top: 72px;
    width: 100%; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.details {
  position: relative; }
  .details .breadcrumb-area {
    position: relative;
    padding-left: var(--secondGridLeft);
    display: flex;
    align-items: center;
    z-index: 2;
    background-color: #434eba;
    height: 139px; }
    .details .breadcrumb-area .breadcrumb-details {
      display: flex;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #ffffff;
      width: calc(100% - calc(var(--secondGridLeft))); }
      .details .breadcrumb-area .breadcrumb-details a {
        color: #ffffff; }
  .details .vertical-text {
    position: absolute;
    z-index: 3;
    left: var(--sideGridWidth);
    top: 60px;
    font-family: "Roboto-Medium";
    font-size: var(--font20);
    color: #ffffff;
    font-weight: 500;
    line-height: 32px;
    font-style: normal;
    letter-spacing: 0.02em;
    transform: translateX(-100%) rotate(-90deg);
    transform-origin: right top; }
  .details .eye-catch-details {
    height: 660px;
    position: relative;
    background-size: cover; }
    .details .eye-catch-details .shadow {
      position: absolute;
      background: #26252e;
      opacity: 0.5;
      height: inherit;
      width: 100%;
      top: 0;
      right: 0;
      z-index: 1; }
    .details .eye-catch-details .eye-catch-body {
      z-index: 2;
      position: relative; }
      .details .eye-catch-details .eye-catch-body .details-title-description {
        position: absolute;
        left: var(--fourGridLeft);
        top: 156px; }
        .details .eye-catch-details .eye-catch-body .details-title-description .details-title {
          position: relative;
          font-family: "Roboto-Bold";
          font-size: var(--font59);
          color: #ffffff;
          font-weight: 700;
          line-height: 69px;
          width: calc(calc(var(--singleGridWidth) * 3) + 50px);
          display: -webkit-box;
          overflow: hidden;
          -webkit-box-orient: vertical;
          -moz-box-orient: vertical;
          -ms-box-orient: vertical;
          box-orient: vertical;
          -webkit-line-clamp: 7;
          -moz-line-clamp: 7;
          -ms-line-clamp: 7;
          line-clamp: 7;
          margin-bottom: 48px;
          top: auto;
          margin-left: -4px; }
        .details .eye-catch-details .eye-catch-body .details-title-description .details-description {
          position: relative;
          font-family: "Roboto-Regular";
          font-size: var(--font20);
          color: #ffffff;
          font-weight: 400;
          line-height: 30px;
          letter-spacing: 0.02em;
          opacity: 0.7;
          width: calc(var(--singleGridWidth) * 3);
          display: -webkit-box;
          overflow: hidden;
          -webkit-box-orient: vertical;
          -moz-box-orient: vertical;
          -ms-box-orient: vertical;
          box-orient: vertical;
          -webkit-line-clamp: 10;
          -moz-line-clamp: 10;
          -ms-line-clamp: 10;
          line-clamp: 10; }
      .details .eye-catch-details .eye-catch-body .searvice-area {
        position: relative;
        height: 172px;
        left: var(--secondGridLeft);
        top: 176px;
        font-style: normal;
        width: calc((var(--singleGridWidth) * 2) + 50px); }
        .details .eye-catch-details .eye-catch-body .searvice-area .list {
          font-family: "Roboto-Regular";
          font-size: var(--font16);
          color: #ffffff;
          font-weight: 400;
          line-height: 30px;
          letter-spacing: 0.01em;
          position: relative; }
          .details .eye-catch-details .eye-catch-body .searvice-area .list p a {
            color: #ffffff;
            cursor: pointer; }
          .details .eye-catch-details .eye-catch-body .searvice-area .list .disabled-link {
            cursor: default; }
      .details .eye-catch-details .eye-catch-body .area-item-diamond {
        display: block;
        width: 30px;
        height: 30px;
        position: absolute;
        top: 0;
        left: -38px; }
        .details .eye-catch-details .eye-catch-body .area-item-diamond img {
          width: 30px;
          height: 30px; }
  .details .drop-down-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 0px;
    left: calc(50% - 31px);
    width: 60px;
    height: 60px;
    cursor: pointer;
    z-index: 3;
    background-color: #434eba; }
    .details .drop-down-bottom svg {
      width: 22px;
      height: 31px; }
      .details .drop-down-bottom svg path {
        stroke-width: 2px; }

@media screen and (min-width: 1025px) and (max-width: calc(1366px - 1px)) {
  .details {
    position: relative; }
    .details .breadcrumb-area {
      position: relative;
      padding-left: var(--secondGridLeft);
      display: flex;
      align-items: center;
      z-index: 2;
      background-color: #434eba;
      height: 139px; }
      .details .breadcrumb-area .breadcrumb-details {
        display: flex;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #ffffff;
        width: calc(100% - calc(var(--secondGridLeft))); }
        .details .breadcrumb-area .breadcrumb-details a {
          color: #ffffff; }
    .details .vertical-text {
      position: absolute;
      z-index: 3;
      left: var(--sideGridWidth);
      top: 60px;
      font-family: "Roboto-Medium";
      font-size: var(--font20);
      color: #ffffff;
      font-weight: 500;
      line-height: 32px;
      font-style: normal;
      letter-spacing: 0.02em;
      transform: translateX(-100%) rotate(-90deg);
      transform-origin: right top; }
    .details .eye-catch-details {
      height: 660px;
      position: relative;
      background-size: cover; }
      .details .eye-catch-details .shadow {
        position: absolute;
        background: #26252e;
        opacity: 0.5;
        height: inherit;
        width: 100%;
        top: 0;
        right: 0;
        z-index: 1; }
      .details .eye-catch-details .eye-catch-body {
        z-index: 2;
        position: relative; }
        .details .eye-catch-details .eye-catch-body .details-title-description {
          position: absolute;
          left: var(--fourGridLeft);
          top: 156px; }
          .details .eye-catch-details .eye-catch-body .details-title-description .details-title {
            position: relative;
            font-family: "Roboto-Bold";
            font-size: var(--font56);
            color: #ffffff;
            font-weight: 700;
            line-height: 69px;
            width: calc(calc(var(--singleGridWidth) * 4)) !important;
            display: -webkit-box;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -moz-box-orient: vertical;
            -ms-box-orient: vertical;
            box-orient: vertical;
            -webkit-line-clamp: 7;
            -moz-line-clamp: 7;
            -ms-line-clamp: 7;
            line-clamp: 7;
            margin-bottom: 48px;
            top: auto;
            margin-left: -4px; }
          .details .eye-catch-details .eye-catch-body .details-title-description .details-description {
            position: relative;
            font-family: "Roboto-Regular";
            font-size: var(--font20);
            color: #ffffff;
            font-weight: 400;
            line-height: 30px;
            letter-spacing: 0.02em;
            opacity: 0.7;
            width: calc(var(--singleGridWidth) * 3);
            display: -webkit-box;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -moz-box-orient: vertical;
            -ms-box-orient: vertical;
            box-orient: vertical;
            -webkit-line-clamp: 10;
            -moz-line-clamp: 10;
            -ms-line-clamp: 10;
            line-clamp: 10; }
        .details .eye-catch-details .eye-catch-body .searvice-area {
          position: relative;
          height: 172px;
          left: var(--secondGridLeft);
          top: 176px;
          font-style: normal;
          width: calc((var(--singleGridWidth) * 2) + 50px); }
          .details .eye-catch-details .eye-catch-body .searvice-area .list {
            font-family: "Roboto-Regular";
            font-size: var(--font16);
            color: #ffffff;
            font-weight: 400;
            line-height: 30px;
            letter-spacing: 0.01em;
            position: relative; }
            .details .eye-catch-details .eye-catch-body .searvice-area .list p a {
              color: #ffffff;
              cursor: pointer; }
            .details .eye-catch-details .eye-catch-body .searvice-area .list .disabled-link {
              cursor: default; }
        .details .eye-catch-details .eye-catch-body .area-item-diamond {
          display: block;
          width: 30px;
          height: 30px;
          position: absolute;
          top: 0;
          left: -38px; }
          .details .eye-catch-details .eye-catch-body .area-item-diamond img {
            width: 30px;
            height: 30px; }
    .details .drop-down-bottom {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      bottom: 0px;
      left: calc(50% - 31px);
      width: 60px;
      height: 60px;
      cursor: pointer;
      z-index: 3;
      background-color: #434eba; }
      .details .drop-down-bottom svg {
        width: 22px;
        height: 31px; }
        .details .drop-down-bottom svg path {
          stroke-width: 2px; } }

@media screen and (max-width: 1024px) {
  .details {
    position: relative; }
    .details .breadcrumb-area {
      padding-left: calc(var(--secondGridLeft));
      height: 80px;
      width: 100%;
      z-index: 2; }
      .details .breadcrumb-area .breadcrumb-details {
        width: calc((var(--singleGridWidth) * 3) - 10px);
        display: flex;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #ffffff; }
        .details .breadcrumb-area .breadcrumb-details a {
          color: #ffffff; }
    .details .vertical-text {
      line-height: 18px;
      top: 30px; }
    .details .eye-catch-details {
      height: 300px; }
      .details .eye-catch-details .eye-catch-body .details-title-description {
        left: var(--secondGridLeft);
        top: 52px; }
        .details .eye-catch-details .eye-catch-body .details-title-description .details-title {
          position: relative;
          line-height: 35px;
          width: calc(var(--singleGridWidth) * 3.2);
          display: -webkit-box;
          overflow: hidden;
          -webkit-box-orient: vertical;
          -moz-box-orient: vertical;
          -ms-box-orient: vertical;
          box-orient: vertical;
          -webkit-line-clamp: 7;
          -moz-line-clamp: 7;
          -ms-line-clamp: 7;
          line-clamp: 7;
          margin-bottom: 7px;
          margin-left: -1px; }
        .details .eye-catch-details .eye-catch-body .details-title-description .details-description {
          position: relative;
          letter-spacing: normal;
          line-height: 20px;
          width: calc(var(--singleGridWidth) * 3.1);
          display: -webkit-box;
          overflow: hidden;
          -webkit-box-orient: vertical;
          -moz-box-orient: vertical;
          -ms-box-orient: vertical;
          box-orient: vertical;
          -webkit-line-clamp: 10;
          -moz-line-clamp: 10;
          -ms-line-clamp: 10;
          line-clamp: 10; }
      .details .eye-catch-details .eye-catch-body .searvice-area {
        display: none; }
      .details .eye-catch-details .eye-catch-body .area-item-diamond {
        display: none; }
    .details .drop-down-bottom {
      position: absolute;
      bottom: 0px;
      left: calc(50% - 19px);
      width: 36px;
      height: 36px; }
      .details .drop-down-bottom svg {
        width: 10px;
        height: 14px; }
        .details .drop-down-bottom svg path {
          stroke-width: 3px; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.common-options {
  width: 100%;
  position: relative;
  display: block;
  padding-top: 119px; }
  .common-options .option-container {
    position: relative;
    left: calc(var(--sideGridWidth) + var(--singleGridWidth));
    width: calc(var(--singleGridWidth) * 6); }
    .common-options .option-container .top-line-white {
      height: 7px;
      background: #ffffff;
      position: relative;
      top: 0;
      width: 113px; }
    .common-options .option-container .top-line-dark {
      height: 7px;
      background: #26252e;
      position: relative;
      top: 0;
      width: 113px; }
    .common-options .option-container .option-title-white {
      font-family: "Roboto-Medium";
      font-size: var(--font59);
      color: #ffffff;
      font-weight: 500;
      line-height: 90px;
      position: relative;
      margin-top: 48px;
      text-transform: capitalize; }
    .common-options .option-container .option-title-dark {
      font-family: "Roboto-Medium";
      font-size: var(--font59);
      color: #26252e;
      font-weight: 500;
      line-height: 90px;
      position: relative;
      margin-top: 48px;
      text-transform: capitalize; }
    .common-options .option-container .option-list {
      position: relative;
      margin-top: 83px;
      display: grid;
      grid-template-columns: repeat(5, 166px);
      grid-gap: auto;
      justify-content: space-between;
      row-gap: 48px; }
      .common-options .option-container .option-list .list {
        min-height: 226px;
        max-height: 256px;
        width: 166px;
        overflow: hidden;
        margin-bottom: 0px; }
        .common-options .option-container .option-list .list .icon-bg {
          width: 166px;
          height: 166px;
          position: relative;
          outline: none;
          overflow: hidden; }
          .common-options .option-container .option-list .list .icon-bg img {
            height: auto;
            width: auto;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            outline: none; }
        .common-options .option-container .option-list .list .white-icon-bg {
          background: #ffffff; }
        .common-options .option-container .option-list .list .dark-icon-bg {
          background: #ecf1f2; }
        .common-options .option-container .option-list .list .option-name-white {
          font-family: "Roboto-Medium";
          font-size: var(--font20);
          color: #ffffff;
          font-weight: 500;
          line-height: 30px;
          text-align: center;
          padding-top: 30px;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          letter-spacing: 0.02em; }
        .common-options .option-container .option-list .list .option-name-dark {
          font-family: "Roboto-Medium";
          font-size: var(--font20);
          color: #26252e;
          font-weight: 500;
          line-height: 30px;
          text-align: center;
          padding-top: 30px;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          letter-spacing: 0.02em; }

.blue-bg {
  background: #434eba;
  padding-bottom: 166px; }

.white-bg {
  background: none;
  padding-bottom: 166px; }

@media screen and (min-width: 1025px) and (max-width: calc(1366px - 1px)) {
  .common-options .option-container .option-list {
    grid-template-columns: repeat(5, var(--singleGridWidth)); }
    .common-options .option-container .option-list .list {
      width: var(--singleGridWidth); }
      .common-options .option-container .option-list .list .icon-bg {
        width: var(--singleGridWidth);
        height: var(--singleGridWidth); }
  .blue-bg {
    background: #434eba;
    padding-bottom: var(--singleGridWidth); }
  .white-bg {
    background: none;
    padding-bottom: var(--singleGridWidth); } }

@media screen and (min-width: 1366px) and (max-width: calc(1440px - 1px)) {
  .common-options .option-container .option-list {
    position: relative;
    margin-top: 83px;
    display: grid;
    grid-template-columns: repeat(5, 156px);
    grid-gap: auto;
    justify-content: space-between;
    row-gap: 48px; }
    .common-options .option-container .option-list .list .icon-bg {
      width: 156px;
      height: 156px; }
  .blue-bg {
    background: #434eba;
    padding-bottom: 156px; }
  .white-bg {
    background: none;
    padding-bottom: 156px; } }

@media screen and (max-width: 1024px) {
  .common-options {
    width: 100%;
    position: relative;
    display: block;
    padding-bottom: 72px;
    padding-top: 72px; }
    .common-options .option-container {
      position: relative;
      left: calc(var(--sideGridWidth) + calc(var(--singleGridWidth) / 2));
      width: calc(var(--singleGridWidth) * 3 + calc(var(--singleGridWidth) / 2)); }
      .common-options .option-container .top-line-white {
        height: 7px;
        background: #ffffff;
        position: relative;
        width: 50px; }
      .common-options .option-container .top-line-dark {
        height: 7px;
        background: #26252e;
        position: relative;
        width: 50px; }
      .common-options .option-container .option-title-white {
        font-family: "Roboto-Medium";
        font-size: 30px;
        color: #ffffff;
        font-weight: 500;
        line-height: 40px;
        position: relative;
        margin-top: 30px;
        width: 180px; }
      .common-options .option-container .option-title-dark {
        font-family: "Roboto-Medium";
        font-size: 30px;
        color: #26252e;
        font-weight: 500;
        line-height: 40px;
        position: relative;
        margin-top: 30px;
        width: 180px; }
      .common-options .option-container .option-list {
        position: relative;
        padding-top: 36px;
        display: grid;
        grid-template-columns: repeat(3, var(--singleGridWidth));
        grid-gap: auto;
        margin: 0 auto;
        row-gap: 30px; }
        .common-options .option-container .option-list .list {
          min-height: 102px;
          max-height: 250px;
          overflow: hidden;
          margin-bottom: 0px;
          width: var(--singleGridWidth); }
          .common-options .option-container .option-list .list .icon-bg {
            width: var(--singleGridWidth);
            height: var(--singleGridWidth);
            position: relative; }
            .common-options .option-container .option-list .list .icon-bg img {
              max-width: calc(var(--singleGridWidth) / 2);
              max-height: calc(var(--singleGridWidth) / 2);
              position: absolute;
              display: flex;
              justify-content: center;
              align-items: center;
              object-fit: contain; }
          .common-options .option-container .option-list .list .white-icon-bg {
            background: #ffffff; }
          .common-options .option-container .option-list .list .dark-icon-bg {
            background: #ecf1f2; }
          .common-options .option-container .option-list .list .option-name-white {
            font-family: "Roboto-Medium";
            font-size: 12px;
            color: #ffffff;
            font-weight: 500;
            line-height: 20px;
            text-align: center;
            padding-top: 10px;
            margin-bottom: 0px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis; }
          .common-options .option-container .option-list .list .option-name-dark {
            font-family: "Roboto-Medium";
            font-size: 12px;
            color: #26252e;
            font-weight: 500;
            line-height: 20px;
            text-align: center;
            padding-top: 10px;
            margin-bottom: 0px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis; }
  .blue-bg {
    background: #434eba; }
  .white-bg {
    background: none; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.diagram-module {
  position: relative;
  width: 100%;
  height: auto;
  margin-bottom: var(--margin166);
  margin-top: 166px; }
  .diagram-module .wrap-plus {
    left: auto;
    right: var(--sideGridWidth);
    top: 0;
    transform: translate(48%, -50%); }
  .diagram-module .vertical-text {
    font-family: "Roboto-Medium";
    font-size: var(--font20);
    color: #26252e;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: 0.02em;
    position: absolute;
    z-index: 1;
    left: var(--sideGridWidth);
    bottom: 960px;
    transform: translateX(-100%) rotate(-90deg);
    transform-origin: top right; }
  .diagram-module .vertical-text-small {
    font-family: "Roboto-Medium";
    font-size: var(--font20);
    color: #26252e;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: 0.02em;
    position: absolute;
    z-index: 1;
    left: var(--sideGridWidth);
    bottom: 900px;
    transform: translateX(-100%) rotate(-90deg);
    transform-origin: top right; }
  .diagram-module .background-events {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 373px); }
    .diagram-module .background-events .bg-color {
      height: 100%;
      width: calc(var(--sideGridWidth) + var(--singleGridWidth) * 7);
      background: #ecf1f2; }
    .diagram-module .background-events .grid-line {
      height: 100%;
      width: 100%; }

@media screen and (min-width: 1025px) and (max-width: calc(1366px - 1px)) {
  .diagram-module {
    margin-top: var(--singleGridWidth);
    margin-bottom: 0px; }
  .module-title-description {
    width: calc(var(--singleGridWidth) * 5.2); }
    .module-title-description .title {
      font-size: var(--font59); } }

@media screen and (min-width: 1440px) {
  .diagram-module .vertical-text {
    font-family: "Roboto-Medium";
    font-size: var(--font20);
    color: #26252e;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: 0.02em;
    position: absolute;
    z-index: 1;
    left: var(--sideGridWidth);
    bottom: 990px;
    transform: translateX(-100%) rotate(-90deg);
    transform-origin: top right; } }

@media screen and (max-width: 1024px) {
  .diagram-module {
    margin-top: 72px;
    height: auto; }
    .diagram-module .vertical-text {
      bottom: 350px;
      line-height: 18px; }
    .diagram-module .vertical-text-small {
      bottom: 280px; }
    .diagram-module .module-title-description .title {
      width: calc(var(--singleGridWidth) * 2); }
    .diagram-module .module-title-description .description {
      margin-left: 0;
      width: calc(var(--singleGridWidth) * 2 + 20px); }
    .diagram-module .background-events {
      height: calc(100% - 70px); }
      .diagram-module .background-events .bg-color {
        height: 100%;
        width: calc( var(--sideGridWidth) + var(--singleGridWidth) * 3 + var(--singleGridWidth) / 2); }
      .diagram-module .background-events .grid-line .grid-five {
        display: none; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.diagram-slider {
  position: relative;
  left: var(--sideGridWidth);
  width: calc(100% - var(--sideGridWidth) * 2);
  height: 660px;
  z-index: 1;
  margin-top: 60px;
  overflow: hidden; }
  .diagram-slider .slick-prev,
  .diagram-slider .slick-next {
    display: none !important; }
  .diagram-slider .slick-track {
    display: flex; }
  .diagram-slider .wrap-image {
    position: relative;
    width: 100%;
    height: 785px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #7d7c82; }
    .diagram-slider .wrap-image:focus {
      outline: none; }
    .diagram-slider .wrap-image img {
      height: calc(100% - 124px);
      width: 100%; }
  .diagram-slider .title-description {
    background-color: #434eba;
    position: absolute;
    bottom: 0;
    right: 0;
    height: 248px;
    width: calc(var(--singleGridWidth) * 3);
    padding: 53px 71px 55px 60px; }
    .diagram-slider .title-description .title {
      font-family: "Roboto-Medium";
      font-size: var(--font20);
      color: #ffffff;
      font-weight: 500;
      line-height: 30px;
      letter-spacing: 0.02em;
      margin-bottom: 20px;
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -moz-box-orient: vertical;
      -ms-box-orient: vertical;
      box-orient: vertical;
      -webkit-line-clamp: 1;
      -moz-line-clamp: 1;
      -ms-line-clamp: 1;
      line-clamp: 1; }
    .diagram-slider .title-description .description {
      font-family: "Roboto-Thin";
      font-size: var(--font20);
      color: #ffffff;
      font-weight: 300;
      line-height: 30px;
      letter-spacing: 0.02em;
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -moz-box-orient: vertical;
      -ms-box-orient: vertical;
      box-orient: vertical;
      -webkit-line-clamp: 3;
      -moz-line-clamp: 3;
      -ms-line-clamp: 3;
      line-clamp: 3; }
  .diagram-slider .dot-line-block {
    position: absolute;
    z-index: 1;
    bottom: 184px;
    left: 60px; }
    .diagram-slider .dot-line-block .dot-item {
      margin-right: 8px;
      float: left;
      height: 8px;
      width: 8px;
      background-color: #000000;
      opacity: 0.3;
      outline: none;
      cursor: pointer; }
    .diagram-slider .dot-line-block .active {
      width: 48px;
      background-color: #ffffff;
      opacity: 1; }
  .diagram-slider .wrap-slider-next-pre {
    position: absolute;
    bottom: 0;
    height: calc(var(--singleGridWidth) / 2);
    width: var(--singleGridWidth);
    display: flex;
    justify-content: space-between;
    background-color: #26252e;
    z-index: 1;
    overflow: hidden; }
    .diagram-slider .wrap-slider-next-pre .next-pre-box {
      width: calc(100% / 2);
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      background-color: #26252e;
      outline: none; }
    .diagram-slider .wrap-slider-next-pre :hover {
      background-color: #000000; }
    .diagram-slider .wrap-slider-next-pre .pre {
      transform: rotate(180deg); }

@media screen and (max-width: 1024px) {
  .diagram-slider {
    z-index: 1;
    margin-top: 6px;
    height: 150px; }
    .diagram-slider .dot-line-block {
      left: 16px;
      top: 124px; }
      .diagram-slider .dot-line-block .dot-item {
        width: 4px;
        height: 4px; }
      .diagram-slider .dot-line-block .active {
        width: 24px; }
    .diagram-slider .wrap-slider-next-pre {
      width: var(--singleGridWidth);
      height: 36px;
      top: calc(144px - 36px);
      right: 0;
      -webkit-tap-highlight-color: transparent; }
      .diagram-slider .wrap-slider-next-pre svg {
        width: 14px;
        height: 10px; }
        .diagram-slider .wrap-slider-next-pre svg path {
          stroke-width: 2px; }
    .diagram-slider .wrap-image {
      position: relative;
      width: 100%;
      height: 270px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: transparent; }
      .diagram-slider .wrap-image:focus {
        outline: none; }
      .diagram-slider .wrap-image img {
        height: calc(100% - 126px);
        width: 100%; }
    .diagram-slider .title-description {
      height: 126px;
      width: 100%;
      padding: 18px 18px 16px; }
      .diagram-slider .title-description .title {
        line-height: 20px;
        margin-bottom: 10px; }
      .diagram-slider .title-description .description {
        line-height: 20px; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.event-slider {
  position: relative;
  left: var(--sideGridWidth);
  width: calc(100% - var(--sideGridWidth) * 2);
  height: 784px;
  z-index: 1;
  margin-top: 60px;
  overflow: hidden; }
  .event-slider .slick-prev,
  .event-slider .slick-next {
    display: none !important; }
  .event-slider .slick-track {
    display: flex; }
  .event-slider .wrap-image {
    position: relative;
    width: 100%;
    height: 784px;
    display: flex;
    justify-content: center;
    align-items: center; }
    .event-slider .wrap-image:focus {
      outline: none; }
    .event-slider .wrap-image img {
      height: calc(100% - 124px);
      width: 100%;
      background-color: #7d7c82; }
  .event-slider .title-description {
    background-color: #434eba;
    position: absolute;
    bottom: 0;
    right: 0;
    height: 248px;
    width: calc(var(--singleGridWidth) * 3);
    padding: 53px 71px 55px 60px; }
    .event-slider .title-description .title {
      font-family: "Roboto-Medium";
      font-size: var(--font20);
      color: #ffffff;
      font-weight: 500;
      line-height: 30px;
      letter-spacing: 0.02em;
      margin-bottom: 20px;
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -moz-box-orient: vertical;
      -ms-box-orient: vertical;
      box-orient: vertical;
      -webkit-line-clamp: 1;
      -moz-line-clamp: 1;
      -ms-line-clamp: 1;
      line-clamp: 1; }
    .event-slider .title-description .description {
      font-family: "Roboto-Thin";
      font-size: var(--font20);
      color: #ffffff;
      font-weight: 300;
      line-height: 30px;
      letter-spacing: 0.02em;
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -moz-box-orient: vertical;
      -ms-box-orient: vertical;
      box-orient: vertical;
      -webkit-line-clamp: 3;
      -moz-line-clamp: 3;
      -ms-line-clamp: 3;
      line-clamp: 3; }
  .event-slider .dot-line-block {
    position: absolute;
    z-index: 1;
    bottom: 184px;
    left: 60px; }
    .event-slider .dot-line-block .dot-item {
      margin-right: 8px;
      float: left;
      height: 8px;
      width: 8px;
      background-color: #000000;
      opacity: 0.3;
      outline: none;
      cursor: pointer; }
    .event-slider .dot-line-block .active {
      width: 48px;
      background-color: #ffffff;
      opacity: 1; }
  .event-slider .wrap-slider-next-pre {
    position: absolute;
    bottom: 0;
    height: calc(var(--singleGridWidth) / 2);
    width: var(--singleGridWidth);
    display: flex;
    justify-content: space-between;
    background-color: #26252e;
    z-index: 1;
    overflow: hidden; }
    .event-slider .wrap-slider-next-pre .next-pre-box {
      width: calc(100% / 2);
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      background-color: #26252e;
      outline: none; }
    .event-slider .wrap-slider-next-pre :hover {
      background-color: #000000; }
    .event-slider .wrap-slider-next-pre .pre {
      transform: rotate(180deg); }

@media screen and (max-width: 1024px) {
  .event-slider {
    z-index: 1;
    margin-top: 36px;
    height: 270px; }
    .event-slider .dot-line-block {
      left: 16px;
      top: 124px; }
      .event-slider .dot-line-block .dot-item {
        width: 4px;
        height: 4px; }
      .event-slider .dot-line-block .active {
        width: 24px; }
    .event-slider .wrap-slider-next-pre {
      width: var(--singleGridWidth);
      height: 36px;
      top: calc(144px - 36px);
      right: 0;
      -webkit-tap-highlight-color: transparent; }
      .event-slider .wrap-slider-next-pre svg {
        width: 14px;
        height: 10px; }
        .event-slider .wrap-slider-next-pre svg path {
          stroke-width: 2px; }
    .event-slider .wrap-image {
      position: relative;
      width: 100%;
      height: 270px;
      display: flex;
      justify-content: center;
      align-items: center; }
      .event-slider .wrap-image:focus {
        outline: none; }
      .event-slider .wrap-image img {
        height: calc(100% - 126px);
        width: 100%; }
    .event-slider .title-description {
      height: 126px;
      width: 100%;
      padding: 18px 18px 16px; }
      .event-slider .title-description .title {
        line-height: 20px;
        margin-bottom: 10px; }
      .event-slider .title-description .description {
        line-height: 20px; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.what-we-offer {
  position: relative;
  margin-bottom: var(--margin166);
  padding-bottom: 83px; }
  .what-we-offer .wrap-plus {
    left: var(--sideGridWidth);
    top: 0;
    transform: translate(-49%, -50%); }
  .what-we-offer .vertical-text {
    font-family: "Roboto-Medium";
    font-size: var(--font20);
    color: #26252e;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: 0.02em;
    position: absolute;
    z-index: 1;
    left: var(--sideGridWidth);
    top: 763px;
    transform: translateX(-100%) rotate(-90deg);
    transform-origin: top right; }
  .what-we-offer .background-what-we-offer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    .what-we-offer .background-what-we-offer .bg-color {
      height: 100%;
      margin-left: var(--sideGridWidth);
      width: calc(var(--singleGridWidth) * 6);
      background: #ecf1f2; }
    .what-we-offer .background-what-we-offer .grid-line {
      height: 100%;
      width: 100%; }
  .what-we-offer .title-bar-description {
    padding-top: 114px; }
    .what-we-offer .title-bar-description .description {
      width: calc(var(--singleGridWidth) * 4); }
  .what-we-offer .offer-list {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: calc(var(--singleGridWidth) * 6);
    margin-left: calc(var(--singleGridWidth) + var(--sideGridWidth));
    margin-top: 48px; }
    .what-we-offer .offer-list .what-we-offer-grid {
      display: flex;
      flex-direction: column;
      background-color: #434eba;
      padding: 50px 30px 30px;
      width: calc(var(--singleGridWidth) * 2 - 13px);
      height: calc(var(--singleGridWidth) * 2 - 13px);
      margin-top: 20px; }
      .what-we-offer .offer-list .what-we-offer-grid .icon-row {
        margin-bottom: 36px; }
        .what-we-offer .offer-list .what-we-offer-grid .icon-row img {
          height: 48px;
          width: 48px; }
      .what-we-offer .offer-list .what-we-offer-grid .title-and-description {
        display: flex;
        flex-direction: column; }
        .what-we-offer .offer-list .what-we-offer-grid .title-and-description .title {
          font-family: "Roboto-Medium";
          font-size: var(--font20);
          color: #ffffff;
          font-weight: 500;
          line-height: 36px;
          letter-spacing: 0.02em;
          margin-bottom: 15px; }
        .what-we-offer .offer-list .what-we-offer-grid .title-and-description .description {
          font-family: "Roboto-Regular";
          font-size: var(--font20);
          color: #ffffff;
          font-weight: 400;
          line-height: 36px;
          letter-spacing: 0.02em;
          opacity: 0.7; }
  .what-we-offer .bottom-border-line {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 2px;
    background-color: #26252e;
    opacity: 0.1;
    width: calc(var(--sideGridWidth) + var(--singleGridWidth)); }

@media screen and (max-width: 1024px) {
  .what-we-offer {
    padding-bottom: 84px; }
    .what-we-offer .vertical-text {
      top: 658px;
      line-height: 18px; }
    .what-we-offer .background-what-we-offer {
      height: calc(100% - 48px); }
      .what-we-offer .background-what-we-offer .bg-color {
        width: calc(var(--singleGridWidth) * 3); }
    .what-we-offer .title-bar-description {
      padding-top: 69px; }
      .what-we-offer .title-bar-description .title {
        width: calc(var(--singleGridWidth) * 2); }
      .what-we-offer .title-bar-description .description {
        width: calc(var(--singleGridWidth) + var(--singleGridWidth) / 2); }
    .what-we-offer .offer-list {
      position: relative;
      z-index: 1;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      width: calc(var(--singleGridWidth) * 3 + var(--singleGridWidth) / 2);
      margin-left: calc(var(--sideGridWidth) + var(--singleGridWidth) / 2);
      margin-top: 26px; }
      .what-we-offer .offer-list .what-we-offer-grid {
        flex-direction: row;
        padding: 16px;
        width: 100%;
        height: 102px;
        margin-top: 10px; }
        .what-we-offer .offer-list .what-we-offer-grid .icon-row {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 0; }
          .what-we-offer .offer-list .what-we-offer-grid .icon-row img {
            height: 36px;
            width: 36px; }
        .what-we-offer .offer-list .what-we-offer-grid .title-and-description {
          margin-left: 22px; }
          .what-we-offer .offer-list .what-we-offer-grid .title-and-description .title {
            line-height: 20px;
            margin-bottom: 10px; }
          .what-we-offer .offer-list .what-we-offer-grid .title-and-description .description {
            line-height: 20px; } }

/* Offer list box making height auto due to overlaping... */
@media screen and (min-width: 1025px) and (max-width: calc(1366px - 1px)) {
  .what-we-offer .offer-list .what-we-offer-grid {
    height: auto; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.career-opportunities {
  position: relative;
  margin-bottom: var(--margin166); }
  .career-opportunities .bar-and-title {
    position: relative;
    margin-left: calc(var(--singleGridWidth) + var(--sideGridWidth)); }
    .career-opportunities .bar-and-title .bold-line {
      margin-bottom: 55px; }
    .career-opportunities .bar-and-title .title {
      margin-bottom: 83px;
      font-family: "Roboto-Medium";
      font-size: var(--font59);
      color: #26252e;
      font-weight: 500;
      line-height: 90px;
      width: calc(var(--singleGridWidth) * 2.5); }
  .career-opportunities .map {
    position: relative;
    height: 700px;
    background-color: #ecf1f2; }
    .career-opportunities .map .gm-style-iw-c {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%); }
  .career-opportunities .career-tab {
    margin: 0 var(--sideGridWidth);
    position: relative; }
    .career-opportunities .career-tab .country-tab {
      background-color: #ecf1f2;
      display: flex;
      flex-wrap: wrap; }
      .career-opportunities .career-tab .country-tab .country {
        background-color: #ecf1f2;
        width: calc(var(--singleGridWidth) + var(--singleGridWidth) / 3);
        height: 116px;
        border: none;
        padding: 0;
        font-family: "Roboto-Medium";
        font-size: var(--font24);
        color: #26252e;
        font-weight: 500;
        line-height: 36px; }
        .career-opportunities .career-tab .country-tab .country.active-country {
          background-color: #434eba;
          color: #ffffff; }
    .career-opportunities .career-tab .left-side-career-opportuniies-title {
      position: absolute;
      transform: rotate(-90deg);
      top: 80%;
      left: -74px;
      letter-spacing: 0.02em;
      font-family: "Roboto-Medium";
      font-size: var(--font20);
      color: #26252e;
      font-weight: 500;
      line-height: 32px; }
    .career-opportunities .career-tab .job-opportunities {
      margin-top: 116px;
      margin-left: var(--singleGridWidth);
      width: calc(var(--singleGridWidth) * 6); }
      .career-opportunities .career-tab .job-opportunities .no-vacancy {
        font-family: "Roboto-Medium";
        font-size: var(--font24);
        color: #26252e;
        font-weight: 500;
        line-height: 32px; }

@media screen and (max-width: 1024px) {
  .career-opportunities .bar-and-title {
    position: relative;
    margin-left: calc(var(--singleGridWidth) + var(--sideGridWidth)); }
    .career-opportunities .bar-and-title .bold-line {
      margin-bottom: 27px; }
    .career-opportunities .bar-and-title .title {
      margin-bottom: 36px;
      line-height: 40px; }
  .career-opportunities .map {
    height: 320px; }
    .career-opportunities .map #map {
      height: 320px; }
  .career-opportunities .career-tab {
    margin: 0 var(--sideGridWidth); }
    .career-opportunities .career-tab .country-tab .country {
      --webkit-tap-highlight-color: none;
      width: calc(var(--singleGridWidth) + var(--singleGridWidth) / 3);
      height: 48px; }
    .career-opportunities .career-tab .job-opportunities {
      margin-top: 48px;
      margin-left: var(--singleGridWidth);
      width: calc(var(--singleGridWidth) * 3); }
    .career-opportunities .career-tab .left-side-career-opportuniies-title {
      left: -45px; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.job-description {
  position: relative;
  margin-bottom: 83px; }
  .job-description .title {
    font-family: "Roboto-Medium";
    font-size: var(--font24);
    color: #26252e;
    font-weight: 500;
    line-height: 36px;
    margin-bottom: 20px; }
  .job-description .description {
    font-family: "Roboto-Regular";
    font-size: var(--font20);
    color: rgba(38, 37, 46, 0.7);
    font-weight: 400;
    line-height: 30px;
    letter-spacing: 0.01em;
    margin-bottom: 30px; }
    .job-description .description .read-more {
      margin-left: 8px;
      opacity: 0.8;
      cursor: pointer;
      font-family: "Roboto-Medium";
      font-size: var(--font20);
      color: #16c36e;
      font-weight: 500;
      line-height: 23px; }
      .job-description .description .read-more svg {
        width: 15px;
        height: 10px; }
        .job-description .description .read-more svg path {
          stroke: #16c36e;
          stroke-width: 2px; }
  .job-description .apply-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    background-color: #26252e;
    width: calc(var(--singleGridWidth) + var(--singleGridWidth) / 3);
    height: 60px;
    padding: 0 50px 0 36px;
    box-sizing: border-box; }
    .job-description .apply-link span {
      font-family: "Roboto-Regular";
      font-size: var(--font20);
      color: #ffffff;
      font-weight: 400;
      line-height: 23px; }
    .job-description .apply-link .arrow {
      transform: rotate(-90deg); }
      .job-description .apply-link .arrow svg {
        height: 74px;
        width: 14px; }

@media screen and (min-width: 1025px) and (max-width: calc(1366px - 1px)) {
  .job-description .apply-link span {
    margin-left: -17px; }
  .job-description .apply-link .arrow svg {
    width: 10px; } }

@media screen and (max-width: 1024px) {
  .job-description {
    margin-bottom: 36px; }
    .job-description .title {
      line-height: 20px;
      margin-bottom: 10px; }
    .job-description .description {
      line-height: 20px;
      margin-bottom: 16px; }
      .job-description .description .read-more {
        line-height: 20px; }
        .job-description .description .read-more svg {
          width: 10px;
          height: 7px; }
    .job-description .apply-link {
      width: calc(var(--singleGridWidth) * 2 - var(--singleGridWidth) / 18);
      height: 36px;
      padding: 0 30px 0 20px; }
      .job-description .apply-link span {
        line-height: 20px; }
      .job-description .apply-link .arrow svg {
        height: 50px;
        width: 10px; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.map-element {
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: auto; }
  .map-element .country-container .info-window .box-area .show-details-box {
    filter: drop-shadow(0 0 24px rgba(38, 37, 46, 0.48)); }
  .map-element .country-center {
    fill: #26252e; }
  .map-element .active-country {
    fill: #434eba; }
  .map-element .country-center:hover {
    fill: #434eba; }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.module-title-description {
  position: relative;
  z-index: 2;
  margin-left: calc(var(--sideGridWidth) + var(--singleGridWidth)); }
  .module-title-description .bold-line {
    margin-bottom: 55px;
    top: 0; }
  .module-title-description .title {
    font-family: "Roboto-Medium";
    font-size: var(--font59);
    color: #26252e;
    font-weight: 500;
    line-height: 90px;
    margin-bottom: 48px; }
  .module-title-description .description {
    margin-left: var(--singleGridWidth);
    font-family: "Roboto-Regular";
    font-size: var(--font20);
    color: rgba(38, 37, 46, 0.7);
    font-weight: 400;
    line-height: 30px;
    letter-spacing: 0.02em;
    width: calc(var(--singleGridWidth) * 4); }
    .module-title-description .description .read-more {
      margin-left: 8px;
      opacity: 0.8;
      cursor: pointer;
      background-color: transparent;
      border: none;
      font-family: "Roboto-Medium";
      font-size: var(--font20);
      color: #16c36e;
      font-weight: 500;
      line-height: 23px; }
      .module-title-description .description .read-more svg {
        width: 15px;
        height: 10px; }
        .module-title-description .description .read-more svg path {
          stroke: #16c36e;
          stroke-width: 2px; }

@media screen and (max-width: 1024px) {
  .module-title-description .bold-line {
    margin-bottom: 27px;
    top: 0; }
  .module-title-description .title {
    line-height: 40px;
    margin-bottom: 24px; }
  .module-title-description .description {
    line-height: 20px;
    margin-left: calc(var(--singleGridWidth) / 2);
    width: calc(var(--singleGridWidth) * 2 + calc(var(--singleGridWidth) / 2)); }
    .module-title-description .description .read-more svg {
      width: 10px;
      height: 7px; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.contact-page {
  margin-top: 90px;
  position: relative; }
  .contact-page .agenda-items {
    display: flex; }
    .contact-page .agenda-items ul {
      margin: 0;
      padding: 0;
      margin-right: 10px; }
      .contact-page .agenda-items ul li {
        cursor: pointer !important;
        list-style: none;
        font-size: var(--font16);
        line-height: 25px; }
        .contact-page .agenda-items ul li:hover {
          cursor: pointer !important; }
  .contact-page .down-arrow {
    height: 175px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; }
    .contact-page .down-arrow svg {
      z-index: 1;
      width: 22px;
      height: 31px; }
      .contact-page .down-arrow svg path {
        stroke: #000000; }
  .contact-page .eye-catch-read-more .left .description .read-description {
    padding-right: 55px; }

.global-offices-section {
  margin-top: var(--margin166); }
  .global-offices-section .wrap-plus {
    display: none; }

.form-section .form-body {
  border-bottom: 1px solid #ecf1f2; }

@media screen and (min-width: calc(1366px)) and (max-width: calc(1440px - 1px)) {
  .contact-page .eye-catch-read-more .left .description .read-description {
    padding-right: 0px; } }

@media screen and (max-width: 1024px) {
  .contact-page {
    margin-top: 72px; }
    .contact-page .eye-catch-basic {
      height: 300px; }
    .contact-page .agenda-items {
      cursor: pointer !important;
      justify-content: space-between; }
      .contact-page .agenda-items ul {
        flex-basis: 110px;
        margin-right: 0; }
        .contact-page .agenda-items ul li {
          cursor: pointer !important;
          font-size: 12px;
          line-height: 16px;
          margin-bottom: 15px; }
    .contact-page .down-arrow {
      height: 90px; }
      .contact-page .down-arrow svg {
        width: 16px;
        height: 22px; }
    .contact-page .eye-catch-read-more .read-more-body .right {
      padding: 24px 10px 0 24px; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.global-offices-section {
  margin-bottom: calc(var(--margin166) - 11px);
  height: auto;
  width: 100%;
  margin-top: 160px;
  position: relative; }
  .global-offices-section .global-office-bg {
    margin-bottom: 96px;
    width: 100%;
    position: relative;
    width: 100%;
    height: auto;
    padding-bottom: 129px;
    padding-top: 1px; }
    .global-offices-section .global-office-bg .bg {
      position: absolute;
      height: 100%;
      top: 0;
      width: calc(7 * var(--singleGridWidth) + var(--sideGridWidth));
      background: #ecf1f2; }
    .global-offices-section .global-office-bg .global-office-content {
      position: relative;
      margin-top: 110px;
      width: 100%; }
      .global-offices-section .global-office-bg .global-office-content .dash-line {
        width: 114px;
        height: 7px;
        background-color: #000000;
        margin-left: calc(var(--singleGridWidth) + var(--sideGridWidth)); }
      .global-offices-section .global-office-bg .global-office-content .global-oofice-text {
        margin-top: 60px;
        width: calc(5 * var(--singleGridWidth));
        margin-left: calc(var(--singleGridWidth) + var(--sideGridWidth));
        font-family: "Roboto-Medium";
        font-style: normal;
        font-weight: 500;
        font-size: var(--font60);
        line-height: 90px;
        display: flex;
        color: #26252e;
        position: relative; }
      .global-offices-section .global-office-bg .global-office-content .global-oofice-description {
        margin-top: 50px;
        width: calc(5 * var(--singleGridWidth));
        margin-left: calc(var(--singleGridWidth) + var(--sideGridWidth));
        font-family: "Roboto-Regular";
        font-style: normal;
        font-weight: normal;
        font-size: 20px;
        line-height: 30px;
        display: flex;
        align-items: center;
        letter-spacing: 0.02em;
        color: rgba(38, 37, 46, 0.7);
        word-wrap: break-word; }
        .global-offices-section .global-office-bg .global-office-content .global-oofice-description .read-description {
          font-family: "Roboto-Regular";
          font-style: normal;
          font-weight: normal;
          font-size: 20px;
          line-height: 30px;
          letter-spacing: 0.02em;
          color: #26252e;
          opacity: 0.7; }
  .global-offices-section .side-section-title {
    top: 1390px;
    left: var(--sideGridWidth);
    position: absolute;
    font-family: "Roboto-Medium";
    font-style: normal;
    font-weight: 500;
    font-size: var(--font22);
    line-height: 32px;
    text-align: right;
    letter-spacing: 0.02em;
    color: #26252e;
    transform: translateX(calc(-50% + 15px)) rotate(-90deg) !important;
    z-index: 1; }
  .global-offices-section .office-bg-text {
    top: 1320px;
    left: calc(var(--sideGridWidth) - 2px);
    position: absolute;
    font-family: "Roboto-Medium";
    font-style: normal;
    font-weight: 500;
    font-size: 280px;
    line-height: 100%;
    text-transform: uppercase;
    -webkit-text-stroke: 1px #26252e;
    -webkit-text-fill-color: transparent;
    opacity: 0.2;
    transform: rotate(270deg) translateY(-157%);
    z-index: 1; }
  .global-offices-section .wrap-plus {
    top: -15px;
    left: calc(calc(6 * var(--singleGridWidth)) + var(--sideGridWidth)); }
  .global-offices-section .office-data-area {
    position: relative;
    margin: 0 auto;
    margin-top: 90px;
    width: calc(8 * var(--singleGridWidth)); }
    .global-offices-section .office-data-area .office-item {
      position: relative;
      min-height: 263px; }
      .global-offices-section .office-data-area .office-item:last-child {
        min-height: 0; }
    .global-offices-section .office-data-area .countery {
      font-family: "Roboto-Medium";
      font-style: normal;
      font-weight: 500;
      font-size: var(--font36);
      line-height: 60px;
      display: flex;
      align-items: center;
      color: #26252e;
      padding-left: calc(100% * (1 / 8)); }
    .global-offices-section .office-data-area .city {
      margin-top: 50px;
      font-family: "Roboto-Medium";
      font-style: normal;
      font-weight: 500;
      font-size: var(--font24);
      line-height: 36px;
      display: flex;
      align-items: center;
      color: #26252e;
      padding-left: calc(100% * (1 / 8)); }
      .global-offices-section .office-data-area .city .flag {
        padding-right: 18px; }
    .global-offices-section .office-data-area .dash-line {
      position: absolute;
      height: 2px;
      background-color: rgba(38, 37, 46, 0.2);
      width: calc(100% * (5 / 8));
      top: 25px;
      right: 0; }
    .global-offices-section .office-data-area .description {
      font-family: "Roboto-Regular";
      font-style: normal;
      font-weight: normal;
      font-size: var(--font20);
      line-height: 30px;
      display: flex;
      align-items: center;
      letter-spacing: 0.02em;
      color: #26252e;
      opacity: 0.7;
      padding-left: calc(100% * (1 / 8));
      margin-top: 17px; }
    .global-offices-section .office-data-area .w-left-arrow {
      position: absolute;
      top: 100px;
      left: calc(100% * (4 / 8));
      height: 83px;
      width: 83px;
      background: #434eba;
      display: flex;
      justify-content: center;
      align-items: center;
      transform: translateX(-100%);
      cursor: pointer; }
      .global-offices-section .office-data-area .w-left-arrow:hover img {
        animation: marquee-about 500ms linear 1; }
    .global-offices-section .office-data-area .wrap-chat-icon {
      transform: translate(-100%, 0);
      position: absolute;
      top: 100px;
      left: calc(100% * (5 / 8));
      height: 83px;
      width: 83px;
      display: flex;
      background: #ecf1f2;
      justify-content: center;
      align-items: center;
      overflow: hidden; }
      .global-offices-section .office-data-area .wrap-chat-icon:hover img {
        animation: marquee-about 500ms linear 1; }

@media screen and (min-width: calc(1366px)) and (max-width: calc(1440px - 1px)) {
  .global-offices-section .office-bg-text {
    font-size: 260px;
    top: 1292px; }
  .global-offices-section .side-section-title {
    top: 1360px; } }

@media screen and (min-width: 1025px) and (max-width: calc(1366px - 1px)) {
  .global-offices-section .global-office-bg .global-office-content .global-oofice-description {
    font-size: var(--font20); }
  .global-offices-section .office-data-area .description {
    font-size: var(--font16); } }

@media screen and (max-width: 1024px) {
  .global-offices-section {
    margin-bottom: 20px;
    height: auto;
    width: 100%;
    margin-top: 72px;
    position: relative; }
    .global-offices-section .office-bg-text {
      font-size: 120px;
      opacity: 0.1; }
    .global-offices-section .side-section-title {
      top: 885px;
      font-size: 18px; }
    .global-offices-section .office-bg-text {
      top: 811px; }
    .global-offices-section .global-office-bg {
      margin-bottom: 48px;
      height: auto;
      padding-bottom: 36px; }
      .global-offices-section .global-office-bg .bg {
        height: 100%;
        width: calc(calc(3.5 * var(--singleGridWidth)) + var(--sideGridWidth));
        background: #ecf1f2; }
      .global-offices-section .global-office-bg .global-office-content {
        position: relative;
        width: 100%;
        margin-top: 72px; }
        .global-offices-section .global-office-bg .global-office-content .side-section-title,
        .global-offices-section .global-office-bg .global-office-content .office-bg-text {
          top: 1100px; }
        .global-offices-section .global-office-bg .global-office-content .global-office-bg {
          margin-bottom: 48px;
          height: 430px; }
          .global-offices-section .global-office-bg .global-office-content .global-office-bg .bg {
            height: 100%;
            width: calc(calc(3.5 * var(--singleGridWidth)) + var(--sideGridWidth));
            background: #ecf1f2; }
        .global-offices-section .global-office-bg .global-office-content .dash-line {
          width: 50px;
          height: 7px;
          background-color: #000000;
          margin-left: calc(var(--sideGridWidth) + var(--singleGridWidth)); }
        .global-offices-section .global-office-bg .global-office-content .global-oofice-text {
          margin-top: 30px;
          width: calc(2 * var(--singleGridWidth));
          margin-left: calc(var(--sideGridWidth) + var(--singleGridWidth));
          font-size: 30px;
          line-height: 40px; }
        .global-offices-section .global-office-bg .global-office-content .global-oofice-description {
          margin-top: 20px;
          width: calc(2 * var(--singleGridWidth));
          margin-left: calc(var(--sideGridWidth) + var(--singleGridWidth));
          font-size: 12px !important;
          line-height: 20px; }
          .global-offices-section .global-office-bg .global-office-content .global-oofice-description .custom-expand-collups-area .area-content .expand-btn {
            background: #ecf1f2; }
          .global-offices-section .global-office-bg .global-office-content .global-oofice-description .read-description {
            font-size: 12px !important;
            letter-spacing: 0.08em;
            line-height: 19px; }
    .global-offices-section .wrap-plus {
      top: -7.5px;
      left: calc(calc(3 * var(--singleGridWidth)) + var(--sideGridWidth)); }
    .global-offices-section .office-data-area {
      position: relative;
      margin: 0 auto;
      margin-top: 50px;
      padding-bottom: 0;
      width: calc(3.5 * var(--singleGridWidth));
      margin-left: calc(var(--sideGridWidth) + calc(var(--singleGridWidth) / 2)); }
      .global-offices-section .office-data-area .office-item {
        position: relative;
        min-height: 160px; }
      .global-offices-section .office-data-area .countery {
        font-size: 20px;
        line-height: 24px;
        padding-left: 0; }
      .global-offices-section .office-data-area .city {
        margin-top: 25px;
        font-size: 14px;
        line-height: 20px;
        padding-left: 0; }
      .global-offices-section .office-data-area .dash-line {
        width: calc(var(--singleGridWidth) * 1.5);
        top: 5px; }
      .global-offices-section .office-data-area .description {
        font-size: 12px;
        line-height: 20px;
        padding-left: 0;
        width: 50%; }
      .global-offices-section .office-data-area .w-left-arrow {
        position: absolute;
        top: 50px;
        height: 36px;
        width: 36px;
        left: unset;
        right: calc(100% * (1 / 7));
        transform: translateX(-60%); }
        .global-offices-section .office-data-area .w-left-arrow img {
          height: 70%;
          width: 70%;
          object-fit: contain; }
      .global-offices-section .office-data-area .wrap-chat-icon {
        transform: translate(0);
        position: absolute;
        top: 50px;
        left: unset;
        right: 0;
        height: 36px;
        width: 36px; }
        .global-offices-section .office-data-area .wrap-chat-icon img {
          height: 18px;
          width: 18px;
          object-fit: cover; } }

@keyframes marquee-about {
  0% {
    transform: translateX(-150px); }
  40% {
    transform: translateX(10px); }
  60% {
    transform: translateX(-5px); }
  100% {
    transform: translateX(0px); } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.leadership-team-section {
  margin-top: var(--margin166);
  margin-bottom: var(--margin166);
  width: 100%;
  position: relative; }
  @media (min-width: 768px) and (max-width: 1024px) {
    .leadership-team-section {
      overflow: hidden; } }
  .leadership-team-section .leadership-team-bg {
    position: absolute;
    width: 100%;
    top: 0;
    z-index: -1;
    height: 960px; }
    .leadership-team-section .leadership-team-bg .bg {
      height: 100%;
      width: calc(3 * var(--singleGridWidth) + var(--sideGridWidth));
      background: #ecf1f2; }
  .leadership-team-section .right-top-dash-line {
    position: absolute;
    width: calc(var(--singleGridWidth) + var(--sideGridWidth));
    left: calc(var(--sideGridWidth) + calc(var(--singleGridWidth) * 7));
    height: 1px;
    background: rgba(38, 37, 46, 0.3);
    top: 0; }
  .leadership-team-section .side-section-title {
    top: 920px;
    left: var(--sideGridWidth);
    position: absolute;
    font-family: "Roboto-Regular";
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 32px;
    text-align: right;
    letter-spacing: 0.02em;
    color: #26252e;
    transform: translateX(calc(-50% + 15px)) rotate(-90deg) !important;
    z-index: 1; }
  .leadership-team-section .leadership-team-content {
    position: relative;
    top: var(--margin116);
    width: 100%; }
    .leadership-team-section .leadership-team-content .dash-line {
      width: 114px;
      height: 7px;
      background-color: #000000;
      margin-left: calc(var(--singleGridWidth) + var(--sideGridWidth)); }
    .leadership-team-section .leadership-team-content .leadership-text {
      margin-left: calc(var(--singleGridWidth) + var(--sideGridWidth));
      margin-top: 51px;
      font-family: "Roboto-Medium";
      font-style: normal;
      font-weight: 500;
      font-size: var(--font60);
      line-height: 90px;
      display: flex;
      align-items: center;
      color: #000000; }
    .leadership-team-section .leadership-team-content .mask-text-div {
      position: absolute;
      top: 967px;
      left: var(--sideGridWidth); }
      .leadership-team-section .leadership-team-content .mask-text-div .text {
        font-style: normal;
        font-weight: 500;
        font-size: 240px;
        line-height: 250px;
        color: #ecf1f2;
        font-family: "Roboto-Medium"; }
      .leadership-team-section .leadership-team-content .mask-text-div .upper-layear {
        position: absolute;
        top: 0;
        left: 0;
        width: calc(var(--singleGridWidth) * 3);
        overflow: hidden; }
        .leadership-team-section .leadership-team-content .mask-text-div .upper-layear .text {
          font-family: "Roboto-Medium";
          font-style: normal;
          font-weight: 500;
          font-size: 240px;
          line-height: 250px;
          color: #ffffff; }
    .leadership-team-section .leadership-team-content .founder-block {
      margin-top: 150px;
      height: auto;
      width: calc(var(--singleGridWidth) * 7);
      margin-left: calc(var(--sideGridWidth) + var(--singleGridWidth));
      position: relative;
      overflow: hidden; }
      .leadership-team-section .leadership-team-content .founder-block .single-founder {
        height: 375px;
        width: var(--singleGridWidth);
        float: left;
        margin-right: calc(var(--singleGridWidth) / 2);
        margin-bottom: 83px; }
        .leadership-team-section .leadership-team-content .founder-block .single-founder .wrap-f-img {
          width: 100%;
          height: var(--singleGridWidth);
          background-color: #7d7c82; }
          .leadership-team-section .leadership-team-content .founder-block .single-founder .wrap-f-img img {
            height: 100%;
            width: 100%;
            object-fit: cover; }
        .leadership-team-section .leadership-team-content .founder-block .single-founder .founder-name {
          margin-top: 20px;
          margin-right: -7px;
          font-family: "Roboto-Regular";
          font-style: normal;
          font-weight: normal;
          font-size: var(--font24);
          line-height: 40px;
          color: #26252e;
          width: 210px; }
        .leadership-team-section .leadership-team-content .founder-block .single-founder .founder-description {
          font-family: "Roboto-Regular";
          margin-top: 20px;
          font-style: normal;
          font-weight: normal;
          font-size: var(--font20);
          line-height: 30px;
          letter-spacing: 0.06em;
          color: rgba(38, 37, 46, 0.7); }
      .leadership-team-section .leadership-team-content .founder-block .single-founder-left {
        margin: 0px 0px 83px calc(var(--singleGridWidth) / 2); }
      .leadership-team-section .leadership-team-content .founder-block .single-founder-left-1 {
        margin-left: calc(var(--singleGridWidth)) !important;
        clear: left; }
      .leadership-team-section .leadership-team-content .founder-block .last-row {
        margin-bottom: 30px !important; }
    .leadership-team-section .leadership-team-content .right-bottom-dash-line {
      position: absolute;
      width: var(--singleGridWidth);
      left: var(--sideGridWidth);
      height: 1px;
      background: rgba(38, 37, 46, 0.3);
      bottom: 0; }
    .leadership-team-section .leadership-team-content .wrap-plus {
      position: absolute;
      top: unset;
      bottom: 0;
      left: calc(var(--sideGridWidth) + calc(var(--singleGridWidth) * 8)); }
  .leadership-team-section .advisors-section {
    width: 100%;
    margin-top: calc(calc(var(--margin166) * 2) - 35px);
    overflow: hidden; }
    .leadership-team-section .advisors-section .dash-line {
      width: 114px;
      height: 7px;
      background-color: #000000;
      margin-left: calc(var(--singleGridWidth) + var(--sideGridWidth)); }
    .leadership-team-section .advisors-section .advisors-text {
      margin-left: calc(var(--singleGridWidth) + var(--sideGridWidth));
      font-family: "Roboto-Medium";
      font-style: normal;
      font-weight: 500;
      font-size: 60px;
      line-height: 90px;
      display: flex;
      align-items: center;
      color: #000000;
      margin-bottom: 90px;
      margin-top: 58px; }
    .leadership-team-section .advisors-section .mask-text-div {
      position: absolute;
      top: 3100px;
      left: calc(var(--sideGridWidth) + calc(var(--singleGridWidth) * 3));
      z-index: -1; }
      .leadership-team-section .advisors-section .mask-text-div .text {
        font-style: normal;
        font-weight: 500;
        font-size: 240px;
        line-height: 250px;
        color: #ecf1f2;
        font-family: "Roboto-Medium"; }
      .leadership-team-section .advisors-section .mask-text-div .upper-layear {
        position: absolute;
        top: 0;
        left: 0;
        width: calc(var(--singleGridWidth) * 3);
        overflow: hidden; }
        .leadership-team-section .advisors-section .mask-text-div .upper-layear .text {
          font-family: "Roboto-Medium";
          font-style: normal;
          font-weight: 500;
          font-size: 240px;
          line-height: 250px;
          color: #ecf1f2; }
    .leadership-team-section .advisors-section .advisors-block {
      display: block;
      height: auto;
      width: auto;
      margin-left: calc(var(--sideGridWidth) + var(--singleGridWidth));
      position: relative; }
      .leadership-team-section .advisors-section .advisors-block .single-advisor {
        height: 420px;
        width: var(--singleGridWidth);
        float: left;
        margin-right: calc(var(--singleGridWidth) / 2);
        margin-bottom: 83px; }
        .leadership-team-section .advisors-section .advisors-block .single-advisor .wrap-f-img {
          width: 100%;
          height: var(--singleGridWidth);
          background-color: #7d7c82; }
          .leadership-team-section .advisors-section .advisors-block .single-advisor .wrap-f-img img {
            height: 100%;
            width: 100%;
            object-fit: cover; }
        .leadership-team-section .advisors-section .advisors-block .single-advisor .advisor-name {
          margin-top: 20px;
          margin-right: -7px;
          font-family: "Roboto-Regular";
          font-style: normal;
          font-weight: normal;
          font-size: var(--font24);
          line-height: 40px;
          color: #26252e;
          width: 200px; }
        .leadership-team-section .advisors-section .advisors-block .single-advisor .advisor-description {
          font-family: "Roboto-Regular";
          margin-top: 20px;
          font-style: normal;
          font-weight: normal;
          font-size: var(--font20);
          line-height: 30px;
          letter-spacing: 0.06em;
          color: rgba(38, 37, 46, 0.7); }
    .leadership-team-section .advisors-section .advisors-block-mob {
      display: none; }
    .leadership-team-section .advisors-section .left-bottom-dash-line-advisor {
      position: absolute;
      width: var(--singleGridWidth);
      left: var(--sideGridWidth);
      height: 1px;
      background: rgba(38, 37, 46, 0.3);
      bottom: 0; }
    .leadership-team-section .advisors-section .wrap-plus {
      position: absolute;
      top: unset;
      bottom: 0;
      left: calc(var(--sideGridWidth) + calc(var(--singleGridWidth) * 8)); }
  .leadership-team-section .advisors-section-bottom {
    position: relative;
    width: 100%;
    margin: 0 auto;
    top: -960px;
    overflow: hidden;
    margin-top: 62px; }
    .leadership-team-section .advisors-section-bottom .advisors-block-bottom-mob {
      display: none; }
    .leadership-team-section .advisors-section-bottom .advisors-block-bottom,
    .leadership-team-section .advisors-section-bottom .advisors-block-bottom-mob {
      position: relative;
      width: calc(6 * var(--singleGridWidth) + var(--sideGridWidth));
      margin-left: calc(1 * var(--singleGridWidth) + var(--sideGridWidth));
      height: auto;
      min-height: 400px; }
      .leadership-team-section .advisors-section-bottom .advisors-block-bottom .single-advisors,
      .leadership-team-section .advisors-section-bottom .advisors-block-bottom-mob .single-advisors {
        float: left;
        margin-right: calc(var(--singleGridWidth) / 2);
        width: var(--singleGridWidth); }
        .leadership-team-section .advisors-section-bottom .advisors-block-bottom .single-advisors .wrap-f-img,
        .leadership-team-section .advisors-section-bottom .advisors-block-bottom-mob .single-advisors .wrap-f-img {
          width: 100%; }
          .leadership-team-section .advisors-section-bottom .advisors-block-bottom .single-advisors .wrap-f-img img,
          .leadership-team-section .advisors-section-bottom .advisors-block-bottom-mob .single-advisors .wrap-f-img img {
            width: 100%; }
        .leadership-team-section .advisors-section-bottom .advisors-block-bottom .single-advisors .advisors-name,
        .leadership-team-section .advisors-section-bottom .advisors-block-bottom-mob .single-advisors .advisors-name {
          margin-top: 20px;
          font-family: "Roboto-Regular";
          font-style: normal;
          font-weight: normal;
          font-size: var(--font24);
          line-height: 40px;
          color: #26252e;
          word-break: break-all; }
        .leadership-team-section .advisors-section-bottom .advisors-block-bottom .single-advisors .advisors-description,
        .leadership-team-section .advisors-section-bottom .advisors-block-bottom-mob .single-advisors .advisors-description {
          margin-top: 20px;
          font-family: "Roboto-Regular";
          font-style: normal;
          font-weight: normal;
          font-size: var(--font20);
          line-height: 30px;
          letter-spacing: 0.06em;
          color: rgba(38, 37, 46, 0.7); }

@media screen and (min-width: 1025px) and (max-width: 1079px) {
  .leadership-team-section .advisors-section .mask-text-div {
    left: calc( var(--sideGridWidth) + calc(var(--singleGridWidth) * 2.9)) !important; }
    .leadership-team-section .advisors-section .mask-text-div .text {
      font-size: 168px !important; } }

@media screen and (min-width: 1080px) and (max-width: 1179px) {
  .leadership-team-section .advisors-section .mask-text-div {
    left: calc( var(--sideGridWidth) + calc(var(--singleGridWidth) * 2.9)) !important; }
    .leadership-team-section .advisors-section .mask-text-div .text {
      font-size: 178px !important; } }

@media screen and (min-width: 1180px) and (max-width: 1279px) {
  .leadership-team-section .advisors-section .mask-text-div {
    left: calc( var(--sideGridWidth) + calc(var(--singleGridWidth) * 2.9)) !important; }
    .leadership-team-section .advisors-section .mask-text-div .text {
      font-size: 198px !important; } }

@media screen and (min-width: 1025px) and (max-width: calc(1366px - 1px)) {
  .leadership-team-section .leadership-team-content .founder-block .single-founder .founder-name {
    font-size: var(--font20); }
  .leadership-team-section .leadership-team-content .founder-block .single-founder .founder-description {
    font-size: var(--font20); }
  .leadership-team-section .leadership-team-content .mask-text-div {
    top: 160px; }
    .leadership-team-section .leadership-team-content .mask-text-div .upper-layear .text {
      font-size: 207px; }
    .leadership-team-section .leadership-team-content .mask-text-div .text {
      font-size: 207px; }
  .leadership-team-section .advisors-section .advisors-block .single-advisor .advisor-name {
    font-size: var(--font20); }
  .leadership-team-section .advisors-section .advisors-block .single-advisor .advisor-description {
    font-size: var(--font20); }
  .leadership-team-section .advisors-section .mask-text-div {
    left: calc(var(--sideGridWidth) + calc(var(--singleGridWidth) * 2.9)); }
    .leadership-team-section .advisors-section .mask-text-div .upper-layear {
      width: 0; }
    .leadership-team-section .advisors-section .mask-text-div .text {
      font-size: 212px; } }

@media screen and (min-width: 1366px) and (max-width: calc(1440px - 1px)) {
  .leadership-team-section .leadership-team-content .mask-text-div {
    top: 173px; }
    .leadership-team-section .leadership-team-content .mask-text-div .text {
      font-size: 224px; }
    .leadership-team-section .leadership-team-content .mask-text-div .upper-layear .text {
      font-size: 224px; }
  .leadership-team-section .advisors-section .advisors-bg-text {
    font-size: 238px;
    top: 208px;
    right: -74px; } }

@media screen and (min-width: 1025px) and (max-width: calc(1566px - 1px)) {
  .leadership-team-section .advisors-block .single-advisor-left {
    margin: 0px 0px 83px calc(var(--singleGridWidth) / 2); }
  .leadership-team-section .advisors-block .single-advisor-left-1 {
    margin-left: calc(var(--singleGridWidth)); } }

@media screen and (min-width: 1440px) {
  .leadership-team-section .leadership-team-content .mask-text-div {
    top: 865px; }
  .leadership-team-section .leadership-team-content .founder-block .single-founder {
    min-height: 410px; }
  .leadership-team-section .advisors-section .mask-text-div {
    top: 3300px; } }

@media screen and (min-width: 1366px) and (max-width: calc(1440px - 1px)) {
  .leadership-team-section .advisors-section .mask-text-div .upper-layear {
    display: none; }
  .leadership-team-section .advisors-section .mask-text-div .text {
    font-size: 220px; } }

@media screen and (min-width: 1920px) {
  .leadership-team-section .leadership-team-content .founder-block {
    margin-left: calc(var(--sideGridWidth) + var(--singleGridWidth)); }
    .leadership-team-section .leadership-team-content .founder-block .single-founder {
      min-height: 370px; }
  .leadership-team-section .advisors-section .advisors-bg-text {
    right: 201px; }
  .leadership-team-section .advisors-section .mask-text-div {
    top: 3150px; } }

@media screen and (max-width: 1024px) {
  .leadership-team-section {
    width: 100%;
    position: relative; }
    .leadership-team-section .side-section-title {
      top: 700px;
      font-size: 12px;
      line-height: 18px; }
    .leadership-team-section .right-top-dash-line {
      left: calc(var(--sideGridWidth) + calc(var(--singleGridWidth) * 3)); }
    .leadership-team-section .leadership-team-bg {
      min-height: 1160px; }
      .leadership-team-section .leadership-team-bg .bg {
        width: calc(var(--sideGridWidth) + calc(var(--singleGridWidth) / 2)); }
    .leadership-team-section .leadership-team-content .mask-text-div {
      position: absolute;
      top: 850px;
      left: var(--sideGridWidth); }
      .leadership-team-section .leadership-team-content .mask-text-div .text {
        font-style: normal;
        font-weight: 500;
        font-size: 60px;
        line-height: 70px;
        color: #ecf1f2;
        font-family: "Roboto-Medium"; }
      .leadership-team-section .leadership-team-content .mask-text-div .upper-layear {
        position: absolute;
        top: 0;
        left: 0;
        width: calc(var(--singleGridWidth) / 2) !important;
        overflow: hidden; }
        .leadership-team-section .leadership-team-content .mask-text-div .upper-layear .text {
          font-size: 60px;
          line-height: 70px; }
    .leadership-team-section .leadership-team-content .dash-line {
      margin-top: 50px;
      width: 50px;
      height: 7px;
      margin-left: calc(var(--sideGridWidth) + var(--singleGridWidth)); }
    .leadership-team-section .leadership-team-content .leadership-text {
      margin-left: calc(var(--sideGridWidth) + var(--singleGridWidth));
      margin-top: 30px;
      font-size: 30px;
      line-height: 40px;
      width: calc(var(--singleGridWidth) * 3); }
    .leadership-team-section .leadership-team-content .dash-line {
      margin-top: 50px;
      width: 50px;
      height: 7px;
      margin-left: calc(var(--sideGridWidth) + var(--singleGridWidth)); }
    .leadership-team-section .leadership-team-content .leadership-text {
      margin-left: calc(var(--sideGridWidth) + var(--singleGridWidth));
      margin-top: 30px;
      font-size: 30px;
      line-height: 40px; }
    .leadership-team-section .leadership-team-content .leaders-text-img {
      display: none; }
    .leadership-team-section .leadership-team-content .founder-block {
      margin-top: 75px;
      min-height: 270px;
      width: calc(3 * var(--singleGridWidth));
      margin-left: calc(var(--sideGridWidth) + var(--singleGridWidth));
      position: relative; }
      .leadership-team-section .leadership-team-content .founder-block .single-founder {
        height: 230px;
        width: var(--singleGridWidth);
        float: left;
        margin-right: 36px;
        margin-left: unset !important;
        margin-bottom: 40px !important; }
        .leadership-team-section .leadership-team-content .founder-block .single-founder .wrap-f-img {
          height: var(--singleGridWidth);
          width: 100%; }
          .leadership-team-section .leadership-team-content .founder-block .single-founder .wrap-f-img img {
            height: 100%;
            width: 100%;
            object-fit: cover; }
        .leadership-team-section .leadership-team-content .founder-block .single-founder .founder-name {
          margin-top: 10px;
          font-size: 14px;
          line-height: 20px;
          width: calc(var(--singleGridWidth) * 1.3);
          height: 40px; }
        .leadership-team-section .leadership-team-content .founder-block .single-founder .founder-description {
          margin-top: 10px;
          font-size: 12px;
          line-height: 18px;
          width: var(--singleGridWidth); }
      .leadership-team-section .leadership-team-content .founder-block .single-founder-left {
        margin: 0px;
        margin-right: 36px; }
      .leadership-team-section .leadership-team-content .founder-block .single-founder-left-1 {
        margin: 0px;
        margin-right: 36px;
        clear: left; }
      .leadership-team-section .leadership-team-content .founder-block .founder-name {
        margin-top: 10px;
        font-size: 14px;
        line-height: 20px; }
      .leadership-team-section .leadership-team-content .founder-block .founder-description {
        font-family: "Roboto-Regular";
        margin-top: 20px;
        font-style: normal;
        font-weight: normal;
        font-size: 12px;
        line-height: 18px;
        letter-spacing: 0.06em;
        color: #26252e;
        opacity: 0.7; }
    .leadership-team-section .leadership-team-content .right-bottom-dash-line {
      display: none; }
    .leadership-team-section .leadership-team-content .wrap-plus {
      display: none; }
    .leadership-team-section .advisors-section {
      position: relative;
      width: 100%;
      margin: 0 auto;
      margin-top: 80px;
      overflow: hidden; }
      .leadership-team-section .advisors-section .mask-text-div {
        position: absolute;
        top: 830px;
        left: calc(var(--sideGridWidth) * 5.7); }
        .leadership-team-section .advisors-section .mask-text-div .text {
          font-style: normal;
          font-weight: 500;
          font-size: 60px;
          line-height: 70px;
          color: #ecf1f2;
          font-family: "Roboto-Medium"; }
        .leadership-team-section .advisors-section .mask-text-div .upper-layear {
          position: absolute;
          top: 0;
          left: 0;
          width: calc(var(--singleGridWidth) / 2) !important;
          overflow: hidden; }
          .leadership-team-section .advisors-section .mask-text-div .upper-layear .text {
            font-size: 60px;
            line-height: 70px; }
      .leadership-team-section .advisors-section .dash-line {
        margin-top: 72px;
        width: 50px;
        height: 7px;
        background-color: #000000;
        margin-bottom: 15px; }
      .leadership-team-section .advisors-section .advisors-text {
        font-style: normal;
        font-weight: 500;
        font-size: 30px;
        line-height: 40px;
        display: flex;
        align-items: center;
        color: #000000;
        margin-top: auto;
        margin-bottom: 48px; }
      .leadership-team-section .advisors-section .advisors-bg-text {
        position: absolute;
        font-family: "Roboto-Medium";
        top: 134px;
        left: unset;
        right: -13px;
        font-style: normal;
        font-weight: 500;
        font-size: 60px;
        line-height: 70px;
        color: #ecf1f2; }
      .leadership-team-section .advisors-section .advisors-block {
        display: none !important; }
      .leadership-team-section .advisors-section .advisors-block-mob {
        position: relative;
        display: block !important;
        width: calc(var(--sideGridWidth) + calc(4 * var(--singleGridWidth)));
        margin-left: var(--sideGridWidth);
        height: auto;
        min-height: 250px; }
        .leadership-team-section .advisors-section .advisors-block-mob .single-advisors {
          float: left;
          margin-left: 0;
          width: var(--singleGridWidth) !important; }
          .leadership-team-section .advisors-section .advisors-block-mob .single-advisors .wrap-f-img {
            height: var(--singleGridWidth);
            width: 100%; }
            .leadership-team-section .advisors-section .advisors-block-mob .single-advisors .wrap-f-img img {
              height: 100%;
              width: 100%;
              object-fit: cover; }
          .leadership-team-section .advisors-section .advisors-block-mob .single-advisors .advisors-name {
            margin-top: 10px;
            font-size: 12px;
            line-height: 20px;
            width: var(--singleGridWidth); }
          .leadership-team-section .advisors-section .advisors-block-mob .single-advisors .advisors-description {
            margin-top: 10px;
            font-size: 12px;
            line-height: 18px;
            width: var(--singleGridWidth); }
      .leadership-team-section .advisors-section .left-bottom-dash-line-advisor {
        display: none; }
      .leadership-team-section .advisors-section .wrap-plus {
        display: none; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.about-who-we-are {
  position: relative;
  height: auto; }
  .about-who-we-are .background {
    position: absolute;
    top: 0;
    left: calc(var(--secondGridLeft) + var(--singleGridWidth));
    width: calc(4 * var(--singleGridWidth));
    height: 700px;
    background-color: #ecf1f2;
    z-index: -1; }
  .about-who-we-are .vertical-text {
    left: var(--sideGridWidth);
    top: 470px;
    position: absolute;
    transform: rotate(-90deg) translateY(2px);
    transform-origin: left top;
    font-family: "Roboto-Medium";
    font-size: var(--font20);
    color: #26252e;
    font-weight: 500;
    line-height: 20px;
    font-family: "Roboto-Medium";
    letter-spacing: 0.02em; }
  .about-who-we-are .wrap-plus {
    top: -15px;
    left: calc(var(--secondGridLeft) + calc(var(--singleGridWidth) * 7)); }
  .about-who-we-are .video-and-title-description {
    height: 700px;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: flex-end;
    flex-direction: row-reverse;
    padding-top: 117px;
    margin-bottom: 51px;
    padding-left: calc(var(--secondGridLeft)); }
    .about-who-we-are .video-and-title-description .title-description {
      padding-left: 130px;
      padding-top: 96px; }
      .about-who-we-are .video-and-title-description .title-description .bold-line {
        position: relative;
        width: 114px;
        height: 7px;
        background-color: #000000;
        margin-bottom: 48px; }
      .about-who-we-are .video-and-title-description .title-description .title {
        font-family: "Roboto-Medium";
        font-size: var(--font59);
        color: #26252e;
        font-weight: 500;
        line-height: 90px;
        font-family: "Roboto-Medium"; }
      .about-who-we-are .video-and-title-description .title-description .description {
        padding: 0;
        width: 457px;
        font-family: "Roboto-Medium";
        font-size: var(--font24);
        color: #26252e;
        font-weight: 500;
        line-height: 36px;
        margin-top: 18px;
        color: rgba(38, 37, 46, 0.7);
        font-family: "Roboto-Medium"; }
        .about-who-we-are .video-and-title-description .title-description .description .read-description {
          font-family: "Roboto-Medium";
          font-size: 22px;
          line-height: 36px;
          color: rgba(38, 37, 46, 0.7); }
    .about-who-we-are .video-and-title-description .video .what-we-are {
      width: calc(var(--singleGridWidth) * 2 + 120px);
      height: calc(var(--singleGridWidth) * 2 + 120px);
      object-fit: cover; }
  .about-who-we-are .bottom-description {
    z-index: 1;
    font-family: "Roboto-Regular";
    font-size: 20px;
    color: #26252e;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: 0.02em;
    opacity: 0.7;
    margin-left: calc(var(--secondGridLeft) + calc(var(--singleGridWidth) * 2));
    position: relative;
    width: 660px;
    z-index: 1; }
    .about-who-we-are .bottom-description .read-description {
      width: calc(var(--singleGridWidth) * 4.1);
      font-family: "Roboto-Regular";
      font-size: 20px;
      color: #26252e;
      font-weight: 400;
      line-height: 30px; }
    .about-who-we-are .bottom-description .wrap-read-more:focus {
      outline: none !important; }
  .about-who-we-are .bottom-bold-line {
    margin-left: var(--secondGridLeft);
    margin-top: 15px;
    position: relative;
    width: var(--singleGridWidth);
    border: 1px solid #26252e;
    opacity: 0.3; }

@media screen and (min-width: calc(1366px)) and (max-width: calc(1440px - 1px)) {
  .about-who-we-are .bottom-description .read-description {
    font-family: "Roboto-Regular";
    font-size: 18px;
    color: #26252e;
    font-weight: 400;
    line-height: 30px; } }

@media screen and (min-width: 1025px) and (max-width: calc(1366px - 1px)) {
  .about-who-we-are .video-and-title-description .video .what-we-are {
    width: calc(var(--singleGridWidth) * 3);
    height: calc(var(--singleGridWidth) * 3);
    object-fit: cover; }
  .about-who-we-are .video-and-title-description .title-description {
    padding-left: 10%; }
    .about-who-we-are .video-and-title-description .title-description .description {
      width: calc(var(--singleGridWidth) * 3); }
      .about-who-we-are .video-and-title-description .title-description .description .read-description {
        font-size: var(--font22); }
  .about-who-we-are .bottom-description .read-description {
    font-size: var(--font20); } }

@media screen and (max-width: 1024px) {
  .about-who-we-are {
    height: auto;
    margin-bottom: 72px; }
    .about-who-we-are .background {
      left: calc(var(--sideGridWidth) + calc(var(--singleGridWidth) / 2));
      width: calc(3 * var(--singleGridWidth));
      height: 580px; }
    .about-who-we-are .vertical-text {
      top: 140px;
      font-family: "Roboto-Medium";
      font-size: 12px;
      color: #26252e;
      font-weight: 500;
      line-height: 18px;
      letter-spacing: 0.02em; }
    .about-who-we-are .wrap-plus {
      left: calc(var(--secondGridLeft) + calc(var(--singleGridWidth) * 3)); }
    .about-who-we-are .video-and-title-description {
      height: 600px;
      justify-content: flex-start;
      flex-direction: column;
      padding-top: 69px;
      margin-bottom: 16px;
      padding-left: calc(var(--sideGridWidth)); }
      .about-who-we-are .video-and-title-description .title-description {
        padding-top: 0;
        padding-left: 110px;
        margin-bottom: 36px; }
        .about-who-we-are .video-and-title-description .title-description .bold-line {
          width: 50px;
          margin-bottom: 25px; }
        .about-who-we-are .video-and-title-description .title-description .title {
          font-family: "Roboto-Medium";
          font-size: 30px;
          color: #26252e;
          font-weight: 500;
          line-height: 40px;
          margin-bottom: 24px; }
        .about-who-we-are .video-and-title-description .title-description .description {
          padding: 0;
          margin-top: 8px;
          width: calc(var(--singleGridWidth) * 2.3);
          font-family: "Roboto-Medium";
          font-size: 12px;
          color: #26252e;
          font-weight: 500;
          line-height: 20px;
          opacity: 0.7; }
          .about-who-we-are .video-and-title-description .title-description .description .read-description {
            font-family: "Roboto-Medium";
            font-size: 12px;
            color: rgba(38, 37, 46, 0.7);
            font-weight: 500;
            line-height: 20px; }
      .about-who-we-are .video-and-title-description .video .what-we-are {
        height: 289px;
        width: 289px;
        object-fit: cover; }
    .about-who-we-are .bottom-description {
      width: 216px;
      font-family: "Roboto-Regular";
      font-size: 12px;
      color: #26252e;
      font-weight: 400;
      line-height: 20px;
      margin-left: var(--secondGridLeft); }
      .about-who-we-are .bottom-description .read-description {
        width: calc(var(--singleGridWidth) * 3);
        font-family: "Roboto-Regular";
        font-size: 12px;
        color: #26252e;
        font-weight: 400;
        line-height: 20px; }
      .about-who-we-are .bottom-description .wrap-read-more {
        height: unset; }
    .about-who-we-are .bottom-bold-line {
      margin-left: var(--sideGridWidth);
      margin-top: 48px; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
.c-achievements-section {
  min-height: 610px;
  margin-top: var(--margin166);
  margin-bottom: var(--margin166);
  width: 100%;
  position: relative; }
  .c-achievements-section .vertical-text {
    display: none;
    font-family: "Roboto-Medium";
    font-size: var(--font20);
    color: #000000;
    font-weight: 500;
    line-height: 32px;
    position: absolute;
    z-index: 1;
    top: 390px;
    left: var(--sideGridWidth);
    transform: translateX(-100%) rotate(-90deg);
    transform-origin: right top;
    letter-spacing: 0.02em; }
  .c-achievements-section .wrap-achievments-bg {
    position: absolute;
    top: 0;
    width: 100%;
    height: 425px; }
    .c-achievements-section .wrap-achievments-bg .bg {
      background: #ecf1f2;
      height: 100%;
      width: calc(var(--sideGridWidth) + calc(var(--singleGridWidth) * 2)); }
  .c-achievements-section .wrap-plus {
    top: -15px;
    left: calc(var(--sideGridWidth) + calc(var(--singleGridWidth) * 8)); }
  .c-achievements-section .dash-line {
    margin-top: 0;
    width: 114px;
    height: 7px;
    background-color: #000000;
    margin-left: calc(var(--singleGridWidth) + var(--sideGridWidth)); }
  .c-achievements-section .achievements-text {
    margin-left: calc(var(--singleGridWidth) + var(--sideGridWidth));
    margin-top: 60px;
    font-family: "Roboto-Medium";
    font-size: var(--font59);
    color: #000000;
    font-weight: 500;
    line-height: 90px;
    display: flex;
    align-items: center; }
  .c-achievements-section .achievements-description .read-more-section .read-description {
    font-family: "Roboto-Medium";
    font-size: var(--font20);
    color: #26252e;
    font-weight: 500;
    line-height: 32px;
    width: calc(var(--singleGridWidth) * 2.5);
    margin-left: calc(var(--singleGridWidth) + var(--sideGridWidth));
    margin-top: 48px;
    font-family: "Roboto-Regular";
    font-style: normal;
    font-weight: normal;
    font-size: var(--font20);
    line-height: 30px;
    letter-spacing: 0.02em;
    opacity: 0.7; }
  .c-achievements-section .cycpe-section {
    position: absolute;
    top: 0;
    left: calc(var(--sideGridWidth) + calc(var(--singleGridWidth) * 4));
    width: calc(3.5 * var(--singleGridWidth));
    min-height: 610px; }
    .c-achievements-section .cycpe-section .cycpe-item {
      width: calc(100% * (2 / 7));
      height: auto;
      float: left; }
      .c-achievements-section .cycpe-section .cycpe-item.country .box .bg {
        height: 100%; }
      .c-achievements-section .cycpe-section .cycpe-item.yaear {
        margin-left: 40px; }
        .c-achievements-section .cycpe-section .cycpe-item.yaear .box .bg {
          height: 100%; }
      .c-achievements-section .cycpe-section .cycpe-item.Clients {
        float: right; }
        .c-achievements-section .cycpe-section .cycpe-item.Clients .box .bg {
          height: 100%; }
      .c-achievements-section .cycpe-section .cycpe-item.Projects {
        position: absolute;
        top: 365px;
        left: 0; }
        .c-achievements-section .cycpe-section .cycpe-item.Projects .box .bg {
          height: 100%; }
      .c-achievements-section .cycpe-section .cycpe-item.Engineers {
        position: absolute;
        top: 365px;
        left: calc(calc(100% * (2 / 7)) + 40px); }
        .c-achievements-section .cycpe-section .cycpe-item.Engineers .box .bg {
          height: 100%; }
      .c-achievements-section .cycpe-section .cycpe-item.country-animation .box .bg {
        height: 100%;
        animation: equalize 2s 0s 1; }
      .c-achievements-section .cycpe-section .cycpe-item.yaear-animation {
        margin-left: 40px; }
        .c-achievements-section .cycpe-section .cycpe-item.yaear-animation .box .bg {
          height: 100%;
          animation: equalize 2s 0.5s 1; }
      .c-achievements-section .cycpe-section .cycpe-item.Clients-animation {
        float: right; }
        .c-achievements-section .cycpe-section .cycpe-item.Clients-animation .box .bg {
          height: 100%;
          animation: equalize 2s 1s 1; }
      .c-achievements-section .cycpe-section .cycpe-item.Projects-animation {
        position: absolute;
        top: 365px;
        left: 0; }
        .c-achievements-section .cycpe-section .cycpe-item.Projects-animation .box .bg {
          height: 100%;
          animation: equalize 2s 1.5s 1; }
      .c-achievements-section .cycpe-section .cycpe-item.Engineers-animation {
        position: absolute;
        top: 365px;
        left: calc(calc(100% * (2 / 7)) + 40px); }
        .c-achievements-section .cycpe-section .cycpe-item.Engineers-animation .box .bg {
          height: 100%;
          animation: equalize 2s 2s 1; }
      .c-achievements-section .cycpe-section .cycpe-item .box {
        width: 100%;
        height: 165px;
        background: #f5f8f8;
        position: relative; }
        .c-achievements-section .cycpe-section .cycpe-item .box .box-text {
          font-family: "Roboto-Regular";
          font-style: normal;
          font-weight: normal;
          font-size: var(--font20);
          line-height: 23px;
          display: flex;
          align-items: center;
          text-align: center;
          color: #26252e;
          opacity: 0.8;
          width: 100%;
          justify-content: center;
          padding-top: 30px; }
        .c-achievements-section .cycpe-section .cycpe-item .box .count {
          margin-top: 10px;
          width: 100%;
          justify-content: center;
          font-family: "Roboto-Regular";
          font-style: normal;
          font-weight: 300;
          font-size: 48px;
          line-height: 56px;
          display: flex;
          align-items: center;
          text-align: center;
          letter-spacing: -0.01em;
          color: #26252e;
          opacity: 0.8; }
        .c-achievements-section .cycpe-section .cycpe-item .box .bg {
          position: absolute;
          width: 100%;
          height: 42px;
          background: #434eba;
          opacity: 0.1;
          bottom: 0; }
      .c-achievements-section .cycpe-section .cycpe-item .box-description {
        margin-top: 20px;
        font-family: "Roboto-Regular";
        font-style: normal;
        font-weight: normal;
        font-size: var(--font20);
        line-height: 30px;
        letter-spacing: 0.02em;
        color: #26252e;
        opacity: 0.7;
        width: 165px; }
  .c-achievements-section .bottom-border {
    display: block;
    position: absolute;
    bottom: 0;
    height: 1px;
    background-color: rgba(38, 37, 46, 0.3);
    width: var(--singleGridWidth);
    left: calc(var(--sideGridWidth) + var(--singleGridWidth)); }

@keyframes equalize {
  0% {
    height: 0%; }
  100% {
    height: 100%; } }

@media screen and (min-width: 1025px) and (max-width: calc(1366px - 1px)) {
  .c-achievements-section .achievements-text {
    font-size: var(--font56);
    margin-top: 35px; }
  .c-achievements-section .achievements-description .read-more-section .read-description {
    margin-top: 20px;
    font-size: var(--font18); }
  .c-achievements-section .cycpe-section .cycpe-item .box-description {
    font-size: var(--font18);
    width: calc(var(--singleGridWidth) + 18px); }
  .c-achievements-section .cycpe-section .cycpe-item .box {
    height: calc(var(--singleGridWidth) + 20px); }
    .c-achievements-section .cycpe-section .cycpe-item .box .count {
      font-size: 34px; } }

@media screen and (min-width: 1440px) {
  .c-achievements-section {
    min-height: 650px; }
    .c-achievements-section .achievements-description .read-more-section .read-description {
      width: calc(var(--singleGridWidth) * 2.7); } }

@media screen and (max-width: 1024px) {
  .c-achievements-section {
    min-height: 1025px;
    overflow: hidden;
    width: 100%;
    position: relative; }
    .c-achievements-section .vertical-text {
      display: block;
      line-height: 18px; }
    .c-achievements-section .wrap-achievments-bg {
      position: absolute;
      top: 0;
      width: 100%;
      height: 230px; }
      .c-achievements-section .wrap-achievments-bg .bg {
        background: #ecf1f2;
        height: 320px;
        width: calc(var(--sideGridWidth) + calc(var(--singleGridWidth) * 2)); }
      .c-achievements-section .wrap-achievments-bg .additional-grid-block {
        height: 320px; }
    .c-achievements-section .wrap-plus {
      top: -15px;
      left: calc(var(--sideGridWidth) + calc(var(--singleGridWidth) * 4)); }
    .c-achievements-section .dash-line {
      margin-top: 0;
      width: 50px;
      height: 7px;
      background-color: #000000;
      margin-left: calc(var(--singleGridWidth) + var(--sideGridWidth)); }
    .c-achievements-section .achievements-text {
      margin-top: 30px;
      font-weight: 500;
      font-size: 30px;
      line-height: 40px; }
    .c-achievements-section .achievements-description {
      width: calc(var(--singleGridWidth) * 3);
      margin-top: 24px;
      font-size: 12px;
      line-height: 20px; }
      .c-achievements-section .achievements-description .read-more-section .read-description {
        width: calc(var(--singleGridWidth) * 3);
        letter-spacing: 0.02em;
        opacity: 0.7;
        font-size: 12px;
        line-height: 20px;
        color: rgba(38, 37, 46, 0.7); }
    .c-achievements-section .cycpe-section {
      margin-top: 335px;
      position: absolute;
      left: 0;
      margin-left: calc(var(--sideGridWidth) + var(--singleGridWidth));
      width: calc(3 * var(--singleGridWidth));
      min-height: 610px; }
      .c-achievements-section .cycpe-section .cycpe-item {
        width: 45%;
        float: left;
        min-height: 235px; }
        .c-achievements-section .cycpe-section .cycpe-item:nth-child(2) {
          margin-left: 10%; }
        .c-achievements-section .cycpe-section .cycpe-item.yaear {
          right: unset;
          position: relative; }
          .c-achievements-section .cycpe-section .cycpe-item.yaear .box .bg {
            height: 100%; }
        .c-achievements-section .cycpe-section .cycpe-item.Clients {
          float: right; }
          .c-achievements-section .cycpe-section .cycpe-item.Clients .box .bg {
            height: 100%; }
        .c-achievements-section .cycpe-section .cycpe-item.Projects {
          position: relative;
          top: unset;
          left: unset; }
          .c-achievements-section .cycpe-section .cycpe-item.Projects .box .bg {
            height: 100%; }
        .c-achievements-section .cycpe-section .cycpe-item.Engineers {
          position: relative;
          top: unset;
          left: 0px; }
          .c-achievements-section .cycpe-section .cycpe-item.Engineers .box .bg {
            height: 100%; }
        .c-achievements-section .cycpe-section .cycpe-item.country-animation .box .bg {
          height: 100%;
          animation: equalize 2s 0s 1; }
        .c-achievements-section .cycpe-section .cycpe-item.yaear-animation .box .bg {
          height: 100%;
          animation: equalize 2s 0.5s 1; }
        .c-achievements-section .cycpe-section .cycpe-item.Clients-animation .box .bg {
          height: 100%;
          animation: equalize 2s 1s 1; }
        .c-achievements-section .cycpe-section .cycpe-item.Projects-animation {
          position: absolute;
          top: 235px;
          left: 0; }
          .c-achievements-section .cycpe-section .cycpe-item.Projects-animation .box .bg {
            height: 100%;
            animation: equalize 2s 1.5s 1; }
        .c-achievements-section .cycpe-section .cycpe-item.Engineers-animation {
          position: absolute;
          top: 460px;
          left: 0; }
          .c-achievements-section .cycpe-section .cycpe-item.Engineers-animation .box .bg {
            height: 100%;
            animation: equalize 2s 2s 1; }
        .c-achievements-section .cycpe-section .cycpe-item .box {
          width: 100%;
          height: calc(1.45 * var(--singleGridWidth));
          position: relative; }
          .c-achievements-section .cycpe-section .cycpe-item .box .box-text {
            font-size: 12px;
            line-height: 20px;
            padding-top: 15px; }
          .c-achievements-section .cycpe-section .cycpe-item .box .count {
            margin-top: 10px;
            font-size: 30px;
            line-height: 35px; }
          .c-achievements-section .cycpe-section .cycpe-item .box .bg {
            position: absolute;
            width: 100%;
            height: 22%;
            background: #434eba;
            opacity: 0.1;
            bottom: 0; }
        .c-achievements-section .cycpe-section .cycpe-item .box-description {
          margin-top: 10px;
          width: 110px;
          font-family: "Roboto-Regular";
          font-style: normal;
          font-weight: normal;
          font-size: 12px;
          line-height: 20px;
          padding-top: 0px; }
        .c-achievements-section .cycpe-section .cycpe-item .count {
          margin-top: 10px;
          font-size: 30px;
          line-height: 35px; }
        .c-achievements-section .cycpe-section .cycpe-item .bg {
          position: absolute;
          width: 100%;
          height: 22%;
          background: #434eba;
          opacity: 0.1;
          bottom: 0; }
      .c-achievements-section .cycpe-section .box-description {
        margin-top: 20px;
        font-family: "Roboto-Regular";
        font-style: normal;
        font-weight: normal;
        font-size: 12px;
        line-height: 20px;
        letter-spacing: 0.02em;
        color: #26252e;
        opacity: 0.7; }
    .c-achievements-section .bottom-border {
      display: block;
      position: absolute;
      bottom: 0;
      height: 1px;
      background-color: rgba(38, 37, 46, 0.3);
      width: calc(var(--singleGridWidth) + var(--sideGridWidth));
      left: 0; } }

@media (min-width: 768px) and (max-width: 1024px) {
  .c-achievements-section {
    min-height: 1210px; }
    .c-achievements-section .cycpe-section .cycpe-item.country-animation .box .bg {
      height: 100%;
      animation: equalize 2s 0s 1; }
    .c-achievements-section .cycpe-section .cycpe-item.yaear-animation .box .bg {
      height: 100%;
      animation: equalize 2s 0.5s 1; }
    .c-achievements-section .cycpe-section .cycpe-item.Clients-animation .box .bg {
      height: 100%;
      animation: equalize 2s 1s 1; }
    .c-achievements-section .cycpe-section .cycpe-item.Projects-animation {
      position: absolute;
      top: 235px;
      left: 0; }
      .c-achievements-section .cycpe-section .cycpe-item.Projects-animation .box {
        margin-top: 110px; }
        .c-achievements-section .cycpe-section .cycpe-item.Projects-animation .box .bg {
          height: 100%;
          animation: equalize 2s 1.5s 1; }
    .c-achievements-section .cycpe-section .cycpe-item.Engineers-animation {
      position: absolute;
      top: 460px;
      left: 285px; }
      .c-achievements-section .cycpe-section .cycpe-item.Engineers-animation .box {
        margin-top: 190px; }
        .c-achievements-section .cycpe-section .cycpe-item.Engineers-animation .box .bg {
          height: 100%;
          animation: equalize 2s 2s 1; } }

/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

@charset 'UTF-8';
/* Slider */
.slick-loading .slick-list
{
    background: #fff url([object Module]) center center no-repeat;
}

/* Icons */
@font-face
{
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    src: url([object Module]);
    src: url([object Module]?#iefix) format('embedded-opentype'), url([object Module]) format('woff'), url([object Module]) format('truetype'), url([object Module]#slick) format('svg');
}
/* Arrows */
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 50%;

    display: block;

    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: transparent;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}

.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;

    opacity: .75;
    color: white;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev
{
    left: -25px;
}
[dir='rtl'] .slick-prev
{
    right: -25px;
    left: auto;
}
.slick-prev:before
{
    content: '\2190';
}
[dir='rtl'] .slick-prev:before
{
    content: '\2192';
}

.slick-next
{
    right: -25px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: -25px;
}
.slick-next:before
{
    content: '\2192';
}
[dir='rtl'] .slick-next:before
{
    content: '\2190';
}

/* Dots */
.slick-dotted.slick-slider
{
    margin-bottom: 30px;
}

.slick-dots
{
    position: absolute;
    bottom: -25px;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px;
    height: 20px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '\2022';
    text-align: center;

    opacity: .25;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: black;
}

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
:root {
  --scrollBarWidth: 0px;
  --font250: 250px;
  --font210: 210px;
  --font108: 108px;
  --font59: 59px;
  --font62: 62px;
  --font60: 60px;
  --font48: 48px;
  --font36: 36px;
  --font20: 20px;
  --font18:18px;
  --font16: 16px;
  --font26: 26px;
  --font24: 24px;
  --margin166: 166px;
  --margin116: 116px;
  --margin76: 76px;
  --midileGridWidth: 1320px;
  --sideGridWidth: calc(
    calc(100vw - var(--midileGridWidth) - var(--scrollBarWidth)) / 2
  );
  --singleGridWidth: calc(var(--midileGridWidth) / 8);
  --secondGridLeft: calc(var(--sideGridWidth) + var(--singleGridWidth));
  --fourGridLeft: calc(var(--sideGridWidth) + calc(var(--singleGridWidth) * 4)); }

@media screen and (min-width: 1025px) and (max-width: calc(1366px - 1px)) {
  :root {
    --font250: 225px;
    --font240: 210px;
    --font210: 185px;
    --font108: 104px;
    --font59: 55px;
    --font56: 50px;
    --font62: 58px;
    --font60: 55px;
    --font48: 45px;
    --font20: 17px;
    --font22: 19px;
    --font18: 15px;
    --font16: 13px;
    --font24: 20px;
    --font36: 26px;
    --margin166: 146px;
    --margin76: 56px;
    --midileGridWidth: calc(calc(100vw / 9) * 8); } }

@media screen and (min-width: calc(1366px)) and (max-width: calc(1440px - 1px)) {
  :root {
    --font250: 235px;
    --font210: 195px;
    --font108: 106px;
    --font59: 57px;
    --font62: 60px;
    --font60: 58px;
    --font48: 46px;
    --font20: 18px;
    --font22: 20px;
    --font18: 16px;
    --font16: 14px;
    --font24: 22px;
    --font36: 34px;
    --margin166: 156px;
    --margin76: 66px;
    --midileGridWidth: 1240px; } }

@media screen and (max-width: 1024px) {
  :root {
    --font59: 30px;
    --font20: 12px;
    --font18: 14px;
    --font16: 12px;
    --font24: 14px;
    --margin166: 72px;
    --midileGridWidth: 90vw;
    --singleGridWidth: calc(var(--midileGridWidth) / 4);
    --sideGridWidth: 5vw; } }

/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
html {
  scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0; }
  body div {
    box-sizing: border-box; }

a {
  text-decoration: none;
  outline: none; }

.read_more_block {
  font-size: 20px;
  line-height: 23px; }
  .read_more_block img {
    width: 14px;
    height: 9px; }

.display-none {
  display: none; }

.input-button-section {
  position: relative;
  top: 51px;
  height: 60px;
  width: 180px;
  display: flex;
  justify-content: center;
  background-color: #434eba;
  overflow: hidden;
  outline: none; }
  .input-button-section span {
    height: 100%; }
  .input-button-section button {
    font-family: "Roboto-Regular";
    font-size: 20px;
    height: 100%;
    color: #ffffff;
    background-color: #434eba;
    border: 0px; }

.side-title {
  position: absolute;
  z-index: 2;
  font-family: "Roboto-Medium";
  font-size: var(--font20);
  color: #26252e;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0.02em;
  transform: translateX(calc(-50% + 15px)) rotate(-90deg); }

.bottom-line {
  position: absolute;
  left: var(--secondGridLeft);
  bottom: 0;
  width: calc(var(--singleGridWidth) * 2);
  height: 1px;
  background: #e5e5e5;
  z-index: 1; }

.height-auto {
  height: auto !important; }

.bold-line {
  width: 114px;
  height: 7px;
  background-color: #000000;
  position: relative;
  top: 3.5px; }

.grid-nine {
  left: calc(var(--sideGridWidth) + calc(var(--singleGridWidth) * 8)); }

.grid-eight {
  left: calc(var(--sideGridWidth) + calc(var(--singleGridWidth) * 7)); }

.grid-one {
  left: var(--sideGridWidth); }

.grid-two {
  left: calc(var(--sideGridWidth) + calc(var(--singleGridWidth) * 1)); }

.grid-three {
  left: calc(var(--sideGridWidth) + calc(var(--singleGridWidth) * 2)); }

.grid-four {
  left: calc(var(--sideGridWidth) + calc(var(--singleGridWidth) * 3)); }

.grid-five {
  left: calc(var(--sideGridWidth) + calc(var(--singleGridWidth) * 4)); }

.grid-six {
  left: calc(var(--sideGridWidth) + calc(var(--singleGridWidth) * 5)); }

.grid-seven {
  left: calc(var(--sideGridWidth) + calc(var(--singleGridWidth) * 6)); }

.wrap-slider-next-pre img {
  width: 30px;
  height: 22px; }

.scroll_down img {
  width: 30px; }

.aditional-grid-line {
  position: absolute;
  top: 0;
  height: 100%;
  width: 1px;
  background-color: #ffffff;
  z-index: 1;
  transform: translateX(-50%); }

.extra-grid-container {
  position: relative;
  width: 100%;
  height: 100%;
  height: 100%; }
  .extra-grid-container .extra-grid-line {
    height: 100%;
    width: 1px;
    background-color: #ffffff;
    position: absolute; }
  .extra-grid-container .extra-grid-one {
    left: var(--singleGridWidth); }
  .extra-grid-container .extra-grid-two {
    left: calc(var(--singleGridWidth) * 2); }
  .extra-grid-container .extra-grid-three {
    left: calc(var(--singleGridWidth) * 3); }
  .extra-grid-container .extra-grid-four {
    left: calc(var(--singleGridWidth) * 4); }
  .extra-grid-container .extra-grid-five {
    left: calc(var(--singleGridWidth) * 5); }
  .extra-grid-container .extra-grid-six {
    left: calc(var(--singleGridWidth) * 6); }
  .extra-grid-container .extra-grid-seven {
    left: calc(var(--singleGridWidth) * 7); }
  .extra-grid-container .extra-grid-eight {
    left: calc(var(--singleGridWidth) * 8); }
  .extra-grid-container .extra-grid-nine {
    left: calc(var(--singleGridWidth) * 9); }
  .extra-grid-container .extra-grid-ten {
    left: calc(var(--singleGridWidth) * 10); }

.question-answer-block {
  position: relative;
  z-index: 1; }

.marquee {
  height: 100%;
  width: calc(100% - 10px);
  overflow: hidden;
  position: relative; }

.contact-marquee {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative; }

.marquee div {
  display: flex;
  align-items: center;
  width: 200%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  justify-content: center; }
  .marquee div:hover {
    animation: marquee 500ms linear 1; }

.contact-marquee div {
  display: flex;
  align-items: center;
  width: 200%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  justify-content: center; }
  .contact-marquee div:hover {
    animation: marquee 500ms linear 1; }

.scroll_down:hover {
  cursor: pointer; }

.scroll_down:focus {
  outline: none !important; }

.marquee span {
  display: flex;
  justify-content: center;
  width: 50%;
  height: fit-content; }

.contact-marquee span {
  display: flex;
  justify-content: center;
  width: 100%;
  height: fit-content; }

@keyframes marquee {
  0% {
    left: -100%; }
  30% {
    left: -0%; }
  55% {
    transform: translateX(10px); }
  80% {
    transform: translateX(-5px); }
  100% {
    transform: translateX(0px); } }

@keyframes contact-marquee {
  0% {
    left: -100%; }
  30% {
    left: -0%; }
  55% {
    transform: translateX(10px); }
  80% {
    transform: translateX(-5px); }
  100% {
    transform: translateX(0px); } }

@media screen and (min-width: 1920px) {
  .grid-eleven {
    right: calc(calc(100% - 1650px) / 2); }
  .grid-ten {
    right: calc( calc(calc(100% - 1650px) / 2) + calc(1650px/ 10)); }
  .grid-one {
    left: calc(calc(100% - 1650px) / 2); }
  .grid-two {
    left: calc(calc( calc(calc(100% - 1650px) / 2) + calc(1650px/ 10))); }
  .grid-three {
    left: calc( calc( calc(calc(100% - 1650px) / 2) + calc(1650px/ 10)) + calc(calc(1650px/ 10))); }
  .grid-four {
    left: calc( calc( calc(calc(100% - 1650px) / 2) + calc(1650px/ 10)) + calc(calc(1650px/ 10)* 2)); }
  .grid-five {
    left: calc( calc( calc(calc(100% - 1650px) / 2) + calc(1650px/ 10)) + calc(calc(1650px/ 10)* 3)); }
  .grid-six {
    left: calc( calc( calc(calc(100% - 1650px) / 2) + calc(1650px/ 10)) + calc(calc(1650px/ 10)* 4)); }
  .grid-seven {
    left: calc( calc( calc(calc(100% - 1650px) / 2) + calc(1650px/ 10)) + calc(calc(1650px/ 10)* 5)); }
  .grid-eight {
    left: calc( calc( calc(calc(100% - 1650px) / 2) + calc(1650px/ 10)) + calc(calc(1650px/ 10)* 6)); }
  .grid-nine {
    left: calc( calc( calc(calc(100% - 1650px) / 2) + calc(1650px/ 10)) + calc(calc(1650px/ 10)* 7)); }
  .capabilities-page .down-arrow,
  .about-page .down-arrow,
  .career-page .down-arrow,
  .services-page .down-arrow,
  .clients-page .down-arrow,
  .contact-page .down-arrow,
  .faq-page .down-arrow,
  .resources-page .down-arrow,
  .technology-page .down-arrow,
  .work-page .down-arrow {
    height: 166px !important; } }

@media screen and (min-width: 1440px) and (max-width: calc(1920px - 1px)) {
  .grid-nine {
    right: calc(calc(100% - 1320px) / 2); }
  .grid-eight {
    right: calc( calc(calc(100% - 1320px) / 2) + calc(1320px/ 8)); }
  .grid-one {
    left: calc(calc(100% - 1320px) / 2); }
  .grid-two {
    left: calc(calc( calc(calc(100% - 1320px) / 2) + calc(1320px/ 8))); }
  .grid-three {
    left: calc(calc( calc(calc(100% - 1320px) / 2) + calc(1320px/ 8)) + calc(calc(1320px/ 8))); }
  .grid-four {
    left: calc(calc( calc(calc(100% - 1320px) / 2) + calc(1320px/ 8)) + calc(calc(1320px/ 8)* 2)); }
  .grid-five {
    left: calc(calc( calc(calc(100% - 1320px) / 2) + calc(1320px/ 8)) + calc(calc(1320px/ 8)* 3)); }
  .grid-six {
    left: calc(calc( calc(calc(100% - 1320px) / 2) + calc(1320px/ 8)) + calc(calc(1320px/ 8)* 4)); }
  .grid-seven {
    left: calc(calc( calc(calc(100% - 1320px) / 2) + calc(1320px/ 8)) + calc(calc(1320px/ 8)* 5)); }
  .capabilities-page .down-arrow,
  .about-page .down-arrow,
  .career-page .down-arrow,
  .services-page .down-arrow,
  .clients-page .down-arrow,
  .contact-page .down-arrow,
  .faq-page .down-arrow,
  .resources-page .down-arrow,
  .technology-page .down-arrow,
  .work-page .down-arrow {
    height: 166px !important; } }

@media screen and (min-width: 1366px) and (max-width: calc(1440px - 1px)) {
  .grid-nine {
    right: calc(calc(100% - 1240px) / 2); }
  .grid-eight {
    right: calc( calc(calc(100% - 1240px) / 2) + calc(1240px/ 8)); }
  .grid-one {
    left: calc(calc(100% - 1240px) / 2); }
  .grid-two {
    left: calc(calc( calc(calc(100% - 1240px) / 2) + calc(1240px/ 8))); }
  .grid-three {
    left: calc( calc( calc(calc(100% - 1240px) / 2) + calc(1240px/ 8)) + calc(calc(1240px/ 8))); }
  .grid-four {
    left: calc( calc( calc(calc(100% - 1240px) / 2) + calc(1240px/ 8)) + calc(calc(1240px/ 8)* 2)); }
  .grid-five {
    left: calc( calc( calc(calc(100% - 1240px) / 2) + calc(1240px/ 8)) + calc(calc(1240px/ 8)* 3)); }
  .grid-six {
    left: calc( calc( calc(calc(100% - 1240px) / 2) + calc(1240px/ 8)) + calc(calc(1240px/ 8)* 4)); }
  .grid-seven {
    left: calc( calc( calc(calc(100% - 1240px) / 2) + calc(1240px/ 8)) + calc(calc(1240px/ 8)* 5)); }
  .capabilities-page .down-arrow,
  .about-page .down-arrow,
  .career-page .down-arrow,
  .services-page .down-arrow,
  .clients-page .down-arrow,
  .contact-page .down-arrow,
  .faq-page .down-arrow,
  .resources-page .down-arrow,
  .technology-page .down-arrow,
  .work-page .down-arrow {
    height: 156px !important; } }

@media screen and (max-width: 1024px) {
  .bold-line {
    width: 50px; }
  .extra-grid-container .extra-grid-four,
  .extra-grid-container .extra-grid-five,
  .extra-grid-container .extra-grid-six,
  .extra-grid-container .extra-grid-seven,
  .extra-grid-container .extra-grid-eight,
  .extra-grid-container .extra-grid-nine,
  .extra-grid-container .extra-grid-ten {
    display: none; }
  .grid-nine {
    display: none; }
  .grid-eight {
    display: none; }
  .grid-six {
    display: none; }
  .grid-seven {
    display: none; }
  .read_more_block {
    font-family: "Roboto-Medium";
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 20px;
    color: #16c36e;
    opacity: 0.8;
    padding-left: 18px; }
    .read_more_block:hover {
      cursor: pointer; }
    .read_more_block:focus {
      outline: none; }
    .read_more_block .readmore {
      margin-right: 10px; }
    .read_more_block img {
      width: 4px;
      height: 7px; }
  .side-title {
    top: 185px;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.02em; } }

/*
|----------------------------------
|Macbook screen 980x to 1280px    |
|Horizontal-scrollbar hidden task |
|----------------------------------
*/
@media screen and (min-width: 980px) and (max-width: 1280px) {
  body {
    overflow-x: hidden; } }

.Toastify__toast-container {
  z-index: 9999;
  -webkit-transform: translate3d(0, 0, 9999px);
  position: fixed;
  padding: 4px;
  width: 320px;
  box-sizing: border-box;
  color: #fff;
}
.Toastify__toast-container--top-left {
  top: 1em;
  left: 1em;
}
.Toastify__toast-container--top-center {
  top: 1em;
  left: 50%;
  transform: translateX(-50%);
}
.Toastify__toast-container--top-right {
  top: 1em;
  right: 1em;
}
.Toastify__toast-container--bottom-left {
  bottom: 1em;
  left: 1em;
}
.Toastify__toast-container--bottom-center {
  bottom: 1em;
  left: 50%;
  transform: translateX(-50%);
}
.Toastify__toast-container--bottom-right {
  bottom: 1em;
  right: 1em;
}

@media only screen and (max-width : 480px) {
  .Toastify__toast-container {
    width: 100vw;
    padding: 0;
    left: 0;
    margin: 0;
  }
  .Toastify__toast-container--top-left, .Toastify__toast-container--top-center, .Toastify__toast-container--top-right {
    top: 0;
    transform: translateX(0);
  }
  .Toastify__toast-container--bottom-left, .Toastify__toast-container--bottom-center, .Toastify__toast-container--bottom-right {
    bottom: 0;
    transform: translateX(0);
  }
  .Toastify__toast-container--rtl {
    right: 0;
    left: initial;
  }
}
.Toastify__toast {
  position: relative;
  min-height: 64px;
  box-sizing: border-box;
  margin-bottom: 1rem;
  padding: 8px;
  border-radius: 1px;
  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.05);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  max-height: 800px;
  overflow: hidden;
  font-family: sans-serif;
  cursor: pointer;
  direction: ltr;
}
.Toastify__toast--rtl {
  direction: rtl;
}
.Toastify__toast--dark {
  background: #121212;
  color: #fff;
}
.Toastify__toast--default {
  background: #fff;
  color: #aaa;
}
.Toastify__toast--info {
  background: #3498db;
}
.Toastify__toast--success {
  background: #07bc0c;
}
.Toastify__toast--warning {
  background: #f1c40f;
}
.Toastify__toast--error {
  background: #e74c3c;
}
.Toastify__toast-body {
  margin: auto 0;
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
}

@media only screen and (max-width : 480px) {
  .Toastify__toast {
    margin-bottom: 0;
  }
}
.Toastify__close-button {
  color: #fff;
  background: transparent;
  outline: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: 0.3s ease;
  -ms-flex-item-align: start;
      align-self: flex-start;
}
.Toastify__close-button--default {
  color: #000;
  opacity: 0.3;
}
.Toastify__close-button > svg {
  fill: currentColor;
  height: 16px;
  width: 14px;
}
.Toastify__close-button:hover, .Toastify__close-button:focus {
  opacity: 1;
}

@keyframes Toastify__trackProgress {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
.Toastify__progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  z-index: 9999;
  opacity: 0.7;
  background-color: rgba(255, 255, 255, 0.7);
  transform-origin: left;
}
.Toastify__progress-bar--animated {
  animation: Toastify__trackProgress linear 1 forwards;
}
.Toastify__progress-bar--controlled {
  transition: transform 0.2s;
}
.Toastify__progress-bar--rtl {
  right: 0;
  left: initial;
  transform-origin: right;
}
.Toastify__progress-bar--default {
  background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
}
.Toastify__progress-bar--dark {
  background: #bb86fc;
}
@keyframes Toastify__bounceInRight {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(2000px, 0, 0);
  }
}
@keyframes Toastify__bounceInLeft {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);
  }
}
@keyframes Toastify__bounceInUp {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes Toastify__bounceOutUp {
  20% {
    transform: translate3d(0, -10px, 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes Toastify__bounceInDown {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutDown {
  20% {
    transform: translate3d(0, 10px, 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}
.Toastify__bounce-enter--top-left, .Toastify__bounce-enter--bottom-left {
  animation-name: Toastify__bounceInLeft;
}
.Toastify__bounce-enter--top-right, .Toastify__bounce-enter--bottom-right {
  animation-name: Toastify__bounceInRight;
}
.Toastify__bounce-enter--top-center {
  animation-name: Toastify__bounceInDown;
}
.Toastify__bounce-enter--bottom-center {
  animation-name: Toastify__bounceInUp;
}

.Toastify__bounce-exit--top-left, .Toastify__bounce-exit--bottom-left {
  animation-name: Toastify__bounceOutLeft;
}
.Toastify__bounce-exit--top-right, .Toastify__bounce-exit--bottom-right {
  animation-name: Toastify__bounceOutRight;
}
.Toastify__bounce-exit--top-center {
  animation-name: Toastify__bounceOutUp;
}
.Toastify__bounce-exit--bottom-center {
  animation-name: Toastify__bounceOutDown;
}

@keyframes Toastify__zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes Toastify__zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
.Toastify__zoom-enter {
  animation-name: Toastify__zoomIn;
}

.Toastify__zoom-exit {
  animation-name: Toastify__zoomOut;
}

@keyframes Toastify__flipIn {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    transform: perspective(400px);
  }
}
@keyframes Toastify__flipOut {
  from {
    transform: perspective(400px);
  }
  30% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
.Toastify__flip-enter {
  animation-name: Toastify__flipIn;
}

.Toastify__flip-exit {
  animation-name: Toastify__flipOut;
}

@keyframes Toastify__slideInRight {
  from {
    transform: translate3d(110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes Toastify__slideInLeft {
  from {
    transform: translate3d(-110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes Toastify__slideInUp {
  from {
    transform: translate3d(0, 110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes Toastify__slideInDown {
  from {
    transform: translate3d(0, -110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes Toastify__slideOutRight {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(110%, 0, 0);
  }
}
@keyframes Toastify__slideOutLeft {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(-110%, 0, 0);
  }
}
@keyframes Toastify__slideOutDown {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, 500px, 0);
  }
}
@keyframes Toastify__slideOutUp {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, -500px, 0);
  }
}
.Toastify__slide-enter--top-left, .Toastify__slide-enter--bottom-left {
  animation-name: Toastify__slideInLeft;
}
.Toastify__slide-enter--top-right, .Toastify__slide-enter--bottom-right {
  animation-name: Toastify__slideInRight;
}
.Toastify__slide-enter--top-center {
  animation-name: Toastify__slideInDown;
}
.Toastify__slide-enter--bottom-center {
  animation-name: Toastify__slideInUp;
}

.Toastify__slide-exit--top-left, .Toastify__slide-exit--bottom-left {
  animation-name: Toastify__slideOutLeft;
}
.Toastify__slide-exit--top-right, .Toastify__slide-exit--bottom-right {
  animation-name: Toastify__slideOutRight;
}
.Toastify__slide-exit--top-center {
  animation-name: Toastify__slideOutUp;
}
.Toastify__slide-exit--bottom-center {
  animation-name: Toastify__slideOutDown;
}
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
/*
variable small device screen
===== midle grid calc for 320 
left and right grid = 30px
midle grid = 290px
middle grid percent = 90.62%
*/
@keyframes animateTop {
  0% {
    bottom: -300px;
    opacity: 0; }
  100% {
    bottom: 0;
    opacity: 1; } }

.cookies-policy {
  z-index: 13;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
  font-family: "Roboto-Regular";
  padding-bottom: 20px;
  overflow: hidden; }
  .cookies-policy .container {
    width: 76%;
    height: fit-content;
    margin: 0px auto;
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19);
    position: relative;
    animation: animateTop 1s;
    background-color: #fff;
    padding: 30px;
    outline: 0;
    border-radius: 3px; }
    .cookies-policy .container .content {
      font-size: var(--font16);
      line-height: 24px;
      color: #000000;
      margin-bottom: 15px; }
    .cookies-policy .container .button-group {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      column-gap: 15px;
      margin-top: 20px; }
      .cookies-policy .container .button-group .accept {
        padding: 10px 16px;
        background-color: #000000;
        color: #ffffff;
        font-size: var(--font16);
        line-height: 24px;
        border-radius: 5px;
        border: 1px solid #000000; }
        .cookies-policy .container .button-group .accept:hover {
          background-color: #26252e; }
      .cookies-policy .container .button-group .decline {
        padding: 10px 16px;
        background-color: #ffffff;
        border: 1px solid #000000;
        color: #000000;
        font-size: var(--font16);
        line-height: 24px;
        border-radius: 5px; }
        .cookies-policy .container .button-group .decline:hover {
          background-color: #e5e5e5; }

@media only screen and (max-width: 768px) {
  .cookies-policy {
    align-items: center;
    padding-bottom: 0px; }
    .cookies-policy .container .button-group .accept, .cookies-policy .container .button-group .decline {
      padding: 7px 12px; } }