#drop-hover4 .main-menu3 {
    display: none;
}
.left, .right {
        flex: 1;
        /* min-width: 250px; */
        padding: 20px;
    }
    .left {
      text-align: right;
    }
    .center {
        flex: 1;
        /* min-width: 250px; */
        text-align: center;
        position: relative;
    }
    .item {
        margin-bottom: 60px;
    }
    .item h3 {
        margin: 0;
        font-size: 28px;
        font-weight: normal;
    }
    .item h3 span {
        font-size: 32px;
        font-weight: bold;
    }
    .item p {
        font-size: 16px;
        color: #333;
        margin-top: 10px;
        line-height: 1.5;
    }
    /* Colors for first letters */
    .audit span { color: #4169e1; }
    .quality span { color: #90abfb; }
    .unified span { color: #6178bf; }
    .automation span { color: #5079fa; }

    /* Center diagram */
   .circle-container {
        width: 280px;
        height: 280px;
        border-radius: 50%;
        overflow: hidden;
        position: relative;
        display: flex;
        flex-wrap: wrap;
    }
    .circle-content {
    position: absolute;
    height: 150px;
    width: 150px;
    align-items: center;
    border-radius: 50%;
    display: flex;
    background-color: #fff;
    transform: translate(-50%);
    top: 24%;
    left: 50%;
}
    .quarter {
        width: 50%;
        height: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    .q1 { background: #4169e1; }
    .q2 { background: #87a8ff; }
    .q3 { background: #5c6fb5; }
    .q4 { background: #4a76ff; }

    /* White circles with letters */
    .letter-circle {
        width: 60px;
        height: 60px;
        /* background: white; */
        border-radius: 50%;
        /* color: #fff; */
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        font-size: 20px;
        /* box-shadow: 0 2px 6px rgba(0,0,0,0.2); */
        /* position: absolute; */
    }
    .pos-a { top: 23%; left: 20%; }
    .pos-q { top: 23%; right: 20%; }
    .pos-u { bottom: 23%; left: 20%; }
    .pos-a2 { bottom: 23%; right: 20%; }
#drop-hover4 .main-menu3 {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px !important;
    border-bottom-left-radius: 30px !important;
    border-bottom-right-radius: 30px !important;
    padding: 30px 20px !important;
    /* width: calc(100% - 180px) !important; */
    width: calc(100% - 80px) !important;
    max-width: 600px !important;
    margin: 0 40px !important;
    transform: translateX(-50%);
    left: 47%;
}
#drop-hover4:hover .main-menu3 {
    display: block;
}

.banner-render {
    border-radius: 20px;
}
.introduced-section {
  text-align: center;
  .heading{
    text-align: center;
  }
      h5 {
        color: #03487D;
        font-weight: 600;
        font-size: 18px;
      }
    p{
        font-size: 14px !important;
        line-height: normal;
        color: #000;
        font-weight: 500;
    }
  
}
.introduced-section {
    .offer-cards {
        display: grid;
        grid-template-columns: auto auto auto auto;
        gap: 20px;
        margin-top: 55px;
        .card{
            position: relative;
            padding: 20px;
            border-radius: 30px;
            place-content: center;
            height: 150px;
            width: 260px;
            h5{
              font-size: 16px;
              font-weight: 700;
              color: #000000;
            }
        }
        .icon {
            background-color: #fff;
            display: flex;
            width: 60px;
            height: 60px;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            img{
              width: 40px;
            }
        }
        .box-1{
          /* background: #67E7F9;
          background: linear-gradient(0deg,rgba(103, 231, 249, 1) 0%, rgba(99, 176, 252, 1) 100%); */
          margin-top: 60px;
          border: 1.8px solid #458fe4;
          .icon {
                border: 1px solid #458fe4;
                position: absolute;
                top: -26px;
                left: 30px;
            }
        }
          .box-2{
          /* background: #EE8690;
          background: linear-gradient(0deg,rgba(238, 134, 144, 1) 0%, rgba(249, 177, 218, 1) 75%); */
            border: 1.8px solid #458fe4;
            .icon {
                border: 1px solid #458fe4;
                position: absolute;
                right: 25px;
                top: -24px;
                
            }
        }
        .box-3{
          /* background: #C3A8E7;
          background: linear-gradient(0deg,rgba(195, 168, 231, 1) 0%, rgba(144, 156, 229, 1) 75%); */
            border: 1.8px solid #458fe4;
            margin-top: 60px;
            display: flex !important;
            flex-direction: row;
            align-items: center;
            gap: 10px;
            .icon {
                border: 1px solid #458fe4;
                position: absolute;
                left: 10px;
                
            }
            h5{
              margin-left: 40px;
            }
        }
          .box-4{
          /* background: #8CC0D4; */
            margin-top: -40px;
            border: 1.8px solid #458fe4;
          /* background: linear-gradient(0deg,rgba(140, 192, 212, 1) 0%, rgba(77, 210, 215, 1) 75%); */
            .icon {
                border: 1px solid #458fe4;
                position: absolute;
                left: -20px;
              
            }
              h5{
              margin-left: 20px;
            }
        }
    }
}
.table-gds-section {
  background: transparent;
}
.table-ndc-section {
    & .inner-content {
        width: 80%;
        margin: auto;
        box-shadow: none;
        border-radius: 0px !important;
        .content-table{
          width: 100%;
            thead{
              /* border: 1px solid #085295; */
            }
          .heading-tr{
                background-color: #deedfe;
                height: 50px;
                
                th{
                  padding-left: 50px;
                  &:nth-child(1){
                    border-radius: 10px 0px 0px 10px;
                  }
                    &:nth-child(3){
                    border-radius: 0px 10px 10px 0px;
                  }
                }

          }
          tr{
            td{
              height: 50px;
              padding-left: 50px;
              font-size: 18px;
              font-weight: 500;
              &:nth-child(1){
                font-style: italic;
                font-weight: 400;
              }
              }
            &:nth-child(even) {
              background-color: #f2f8ff;
            }
          }
        }
    }
}
.table-gds-section {
    & .inner-content {
        width: 85%;
        box-shadow: none;
        border-radius: 0px !important;
        .content-table{
          width: 100%;
            thead{
              /* border: 1px solid #085295; */
            }
          .heading-tr{
                background-color: #deedfe;
                height: 50px;
                
                th{
                  padding-left: 50px;
                  &:nth-child(1){
                    border-radius: 10px 0px 0px 10px;
                  }
                    &:nth-child(3){
                    border-radius: 0px 10px 10px 0px;
                  }
                }

          }
          tr{
            td{
              height: 50px;
              padding-left: 50px;
              font-size: 18px;
              font-weight: 500;
              &:nth-child(1){
                font-style: italic;
                font-weight: 400;
              }
              }
            &:nth-child(even) {
              background-color: #f2f8ff;
            }
          }
        }
    }
}
.ndc-section-one{
    background: #EDECF3;
    background: linear-gradient(0deg, rgba(237, 236, 243, 1) 0%, rgb(255 255 255) 100%);
    padding: 10px;
    border-radius: 0px 0px 50px 50px;
}
.ndc-capabilities{
    h3{
        color: #03487D;
        font-weight: 700;
        font-size: 28px;
        text-align: center;
    }
    h4{
      font-size: 20px;
    }
    h5{
      line-height: 25px;
    }
}
.ndc-section {
    background-color: transparent;
    color: #000;
    h4{
        color: #03487D;
        font-weight: 700;
        font-size: 28px;
        text-align: center;
    }
  
    p{
      text-align: center;
    }
  
}
  .capabilities-box{
      background-color: #f7f7f7;
      padding: 10px;
      margin: 10px 0px;
      border-radius: 15px;
    }
      .capabilities-box-2{
      background-color: #fff;
      margin: 10px 0px;
      box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
      padding: 10px;
      border-radius: 15px;
    }
.seamless-ndc-card{
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  border-radius: 20px;
  background-color: #fff;
  img{
    width: 100%;
    border-radius: 60px 60px 10px 10px !important;
    padding: 10px 15px;
  }
}
.shopping-card{
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  border-radius: 20px;
    background-color: #fff;
  .shopping-card-img{
    width: 100%;
    border-radius: 20px 20px !important;
  }

}
.ancillary-card{
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  border-radius: 20px;
  background-color: #fff;
}
.introducing-aqua{
  h5{
    color: #03487D;
  }
  .banner-background{
    background-image: url(https://farenexus.com/assets/img/blogs/bg_gradient_2.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 15px;
    padding: 15px;
    color: #fff;
    h4{
      color: #fff;
    }
  }
}
.roadblock-ndc{
  background: #fff;
  text-align: center;
  h5{
    font-size: 16px;
  }
  .slick-dots{
        gap: 8px;
        display: flex !important;
        justify-content: center;
  .slick-active{
    button{
    width: 30px;
    border-radius: 30px;
    height: 12px;
    background: #FFFFFF;
    background: linear-gradient(90deg,rgba(255, 255, 255, 1) 0%, rgba(87, 113, 143, 1) 50%, rgba(24, 59, 102, 1) 100%) !important;
    
    &::before{
        display: none;
      }
    }
  
  }
    button{
      width: 26px;
      border-radius: 30px;
      height: 12px;
      border-radius: 30px;
      background: #8a82823d;
        &::before{
          display: none !important;
          content: '' !important;
        }
      }
  }
  .card-hover{
  .inner-content{
      height: 170px;
      place-content: flex-start;
      text-align: start;
      p{
        margin-bottom: 0px;
        font-size: 14px;
      }
  }
  &:hover{
    background-color: #e2eef6;
  }
}
}
.thougt-section {
  background: #fff;
  p{
    line-height: 28px;
    /* font-size: 18px; */
  }
}
@media  (max-width:1280px) {
  .roadblock-ndc {
    .inner-content {
        height: 170px;
        place-content: flex-start;
    }
}
}
@media  (max-width:768px) {
  .roadblock-ndc {
    .inner-content {
        height: 250px;
        place-content: flex-start;
    }
}
}
@media screen and (max-width:1024px) {
  .table-gds-section {
    .inner-content {
        overflow: auto;
        width: 100%;
        & .content-table {
            & tr {
                td {
                    font-size: 14px;
                }
            }
        }
    }
}
.introduced-section {
    .offer-cards {
        display: grid;
        grid-template-columns: auto auto;
        gap: 20px;
        margin-top: 55px;
      .card {
            width: 100%;
        }
        .box-1 {
            margin-top: 10px;
        }
        .box-2 {
            margin-top: 30px;
        }
        .box-3 {
            margin-top: 30px;
        }
        .box-4 {
            margin-top: 30px;
        }
    }
}
}
@media screen and (max-width:576px) {
     .left {
      text-align: left;
    }
  .seamless-ndc-card{
    margin-bottom: 10px;
  }
  .ancillary-card{
      margin-bottom: 10px;
  }
  .ndc-section {
    ul {
        display: flex;
        gap: 15px;
        flex-direction: column;
        li{
          font-size: 14px;
        }
    }
}
  .table-gds-section {
    .inner-content {
        overflow: auto;
        width: 100%;
    }
}
.introduced-section {
    .offer-cards {
        display: block;
        gap: 20px;
        margin-top: 55px;
      .card {
            width: 100%;
        }
        .box-1 {
            margin-top: 10px;
        }
        .box-2 {
            margin-top: 30px;
        }
        .box-3 {
            margin-top: 30px;
        }
        .box-4 {
            margin-top: 30px;
        }
    }
}

}
.introduced-section h4{
  padding-bottom: 15px;
    position: relative;
}
.introduced-section :is(h2, h4) {
    &&:before {
        content: "";
        position: absolute;
        display: block;
        width: 160px;
        height: 1px;
        background: 
       color-mix(in srgb, var(--theme-color), transparent 60%);
        left: 0;
        right: 0;
        bottom: 1px;
        margin: auto;
    }
}
.introduced-section :is(h2, h4) {
    &&::after {
        content: "";
        position: absolute;
        display: block;
        width: 60px;
        height: 3px;
        background: var(--accent-color);
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
}
.ndc-section h4{
  padding-bottom: 15px;
    position: relative;
}
.ndc-section :is(h2, h4) {
    &&:before {
        content: "";
        position: absolute;
        display: block;
        width: 160px;
        height: 1px;
        background: 
       color-mix(in srgb, var(--theme-color), transparent 60%);
        left: 0;
        right: 0;
        bottom: 1px;
        margin: auto;
    }
}
.ndc-section :is(h2, h4) {
    &&::after {
        content: "";
        position: absolute;
        display: block;
        width: 60px;
        height: 3px;
        background: var(--accent-color);
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
}
.ndc-capabilities h3{
  padding-bottom: 15px;
    position: relative;
}
.ndc-capabilities :is(h3) {
    &&:before {
        content: "";
        position: absolute;
        display: block;
        width: 160px;
        height: 1px;
        background: 
       color-mix(in srgb, var(--theme-color), transparent 60%);
        left: 0;
        right: 0;
        bottom: 1px;
        margin: auto;
    }
}
.ndc-capabilities :is(h3) {
    &&::after {
        content: "";
        position: absolute;
        display: block;
        width: 60px;
        height: 3px;
        background: var(--accent-color);
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
}
.roadblock-ndc h4{
  padding-bottom: 15px;
    position: relative;
}
.roadblock-ndc :is(h4) {
    &&:before {
        content: "";
        position: absolute;
        display: block;
        width: 160px;
        height: 1px;
        background: 
       color-mix(in srgb, var(--theme-color), transparent 60%);
        left: 0;
        right: 0;
        bottom: 1px;
        margin: auto;
    }
}
.roadblock-ndc :is(h4) {
    &&::after {
        content: "";
        position: absolute;
        display: block;
        width: 60px;
        height: 3px;
        background: var(--accent-color);
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
}
.introducing-aqua h4{
  padding-bottom: 15px;
    position: relative;
}
.introducing-aqua :is(h4) {
    &&:before {
        content: "";
        position: absolute;
        display: block;
        width: 160px;
        height: 1px;
        background: 
       color-mix(in srgb, var(--theme-color), transparent 60%);
        left: 0;
        right: 0;
        bottom: 1px;
        margin: auto;
    }
}
.introducing-aqua :is(h4) {
    &&::after {
        content: "";
        position: absolute;
        display: block;
        width: 60px;
        height: 3px;
        background: var(--accent-color);
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
}
.thougt-section h4{
  padding-bottom: 15px;
    position: relative;
}
.thougt-section :is(h4) {
    &&:before {
        content: "";
        position: absolute;
        display: block;
        width: 160px;
        height: 1px;
        background: 
       color-mix(in srgb, var(--theme-color), transparent 60%);
        left: 0;
        right: 0;
        bottom: 1px;
        margin: auto;
    }
}
.thougt-section :is(h4) {
    &&::after {
        content: "";
        position: absolute;
        display: block;
        width: 60px;
        height: 3px;
        background: var(--accent-color);
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
}