section#banner-section {
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
  height: auto !important;
  background: rgb(235, 243, 253);
  background: linear-gradient(
    180deg,
    rgba(235, 243, 253, 1) 50%,
    rgba(255, 255, 255, 1) 100%
  );
}    
div#banner-section-top {
    margin-top: 50px;
}


#banner-h1 {
  text-align: center;
  margin-bottom: 20px;  /* Adjust as needed */
}

.body{
  width:  80%;
}

.mycontainer {
  display: flex;
}

.half-width {
  width: 50%;
  /* padding: 1em; */
}

.tooltip-icon {
  position: relative;
  display: inline-block;
  cursor: pointer;
  padding-left: 5px; /* Space out the icon from the input field */
}

.tooltip-text {
  font-size: 12px;
  visibility: hidden;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  width: 250px;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
  position: absolute;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip-icon:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

#calculation-form {
  display: flex;
  flex-direction: column;
  gap: 10px;  /* provides a gap between form elements */
}

.field-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.input-field{
    width: 100%;
    height: 40px;
    padding-left: 10px;
    border-radius: 7px;
    border: 0.5px solid;
}

input.input-field::placeholder{
    padding-left: 10px;
}

#results {
  display: flex;
  flex-direction: column;
  color: black;
  padding-top: 20px;  /* Add some padding around the content */
}


.result-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;  
  text-align: left !important;
  width: 100%;
}


.button-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}


.custom-button {
  margin: 5px;
  width: 14.2;
  display: inline-block;
  padding: 10px 20px;
  background-color: lightgrey;
  border: none;
  transition: all 0.5s;  /* This makes the shape change smoothly */
  margin-right: 50px;
}

.custom-button.clicked {
  background-color: #FFAB40;
}


.netresult-container{
    margin: 5px;
    text-align: center;
    line-height: 50px;
    width: 70%;
}

#button-container{
    display: flex;
    flex-direction: column;
}


#contact-sales-button{
    font-size: 18px !important;
    font-weight: 700!important;
    color: #000;
}

span.success {
    color: green;
}

span.failure {
    color: red;
}


.g2-grid{
    width: 65%;
  }

  @media (max-width:550px){
    .g2-grid{
    width: 90%;
  }

  #contact-sales-button{
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
    
  }
  @media (min-width: 1440px){
    #banner-section-top{
      /* position: relative; */
      bottom: 100px;
    }
    h1#banner-h1{
      font-size: 40px;
    }
  }
  @media (max-width: 767px) {
  .sec1 .table > tbody > tr > td {
    padding: 2px !important;
    font-size: 12px;
    background-color: #fff !important;
    color: #2c3e50 !important;
    vertical-align: middle;
    text-align: center;
  }
  }
  @media (min-width: 509px) {
  }
  @media (max-width: 509px){
    #comparsn-table-area div{
      padding-left: 0%;
      padding-right: 0%;
    } 
    .remove-from-mobile{
      display: none;
    } 

    #book-a-demo-btn{
      width: 20%;
    }

    .stars-outer{
      font-size: 11px;
    }

    #banner-h1{
      font-size: 28px;
    }

    .mobile-banner-h4{
      font-size: 20px;
      text-align: center;
      width: 100% !important;
    }


    #getTestimonial{
      margin-top: -20px !important;
      margin-bottom: 20px;
    }

  }


  @media (max-width: 1360px){
    .action-button-1{
      margin-right: 0px;
      margin-bottom: 10px !important;
    }

    .button-container{
      flex-direction: column;
      justify-content: space-around;
    }
  }

  @media (max-width:1150px){
    

    .block-row{
      display: flex;
      flex-wrap: nowrap;
    }
  }


  @media (max-width: 1000px){
    .half-width{
      width: auto !important;
    }

    .mycontainer{
      flex-direction: column;
      padding: 0px;
    }




    .action-button-1{
      margin-right:10px;
      margin-bottom: 0px !important;
    }

    .button-container{
      flex-direction: row;
      justify-content: space-around;
    }

    #results{
      margin-left: 0em !important;
    }

    .tooltip-text{
      width: 200px !important;
      font-size: 12px !important;
    }

    .tooltip-right-icon{
      right: 50% !important;
      left: auto !important;
    }
    


    .tooltip-left-icon{
      left: 0% !important;
    }


  }


  @media (max-width: 650px){

    .button-container{
      flex-direction: column;
      justify-content: space-around;
    }

    #roi-result-button{
      margin-left: auto !important;
      margin-right: auto !important;
      margin-bottom: 10px !important;
    }

    #try-again-button{
      margin-left: auto !important;
      margin-right: auto !important;
      margin-bottom: 10px !important;
    }

    #contact-sales-button{
      margin-left: auto !important;
      margin-right: auto !important;
    }

    .payment_duration_container{
      padding-left: 0px;
      padding-right: 0px;
    }

    .buttn{
      padding: 10px !important
    }
  }


  #csrv_est_button{
    /* margin-left: 0em!important;
    margin-right: 0em !important;
    border-top-left-radius:2em!important; 
    border-bottom-left-radius: 2em!important; 
    border-top-right-radius:0em!important; 
    border-bottom-right-radius: 0em!important; */
    min-width: auto;
  }

  #avg_est_button{
    /* border-radius: 0em !important; 
    margin-left: 0em!important;
    margin-right: 0em !important;  */
    min-width: auto
  }


  #agg_est_button{
    /* margin-left: 0em!important;
    margin-right: 0em !important;
    border-top-right-radius:2em!important; 
    border-bottom-right-radius: 2em!important;
    border-top-left-radius:0em!important; 
    border-bottom-left-radius: 0em!important; */
    min-width: auto
  }


  #current-author-name{
    font-size: 16px;
    margin-bottom: 0em !important;
    line-height: normal !important;
  }

  @media (max-width:600px){
    /* #testimonial{
      top: 0px !important;
      font-size: 15px !important;
    } */

    #flex-author-img{
        margin-top: 30px !important;
    }

    #testimonial-desgn{
        top: 30px !important;
        position: relative;   
    }
    
    .testimonial-img{
      height: 75px !important;
      width: 75px !important;
    }


    #current-author-designation{
      font-size: 13px;
      line-height: normal !important;
    }
  } 


  @media (max-width: 780px){
    #banner-h3{
      text-align: center;
    } 
    
  }   
  
     @media only screen and (max-width: 1024px){
        h1#banner-h1 {
            font-size: 40px;
        }
        .hide-mobile{
            display: none;
        }
        tr{
          font-size: 14px;
        }
        .img-responsive{
          margin-left: 0px !important;
        }
        .title-page h1{
          margin-bottom: 0;
          margin-top: 20px;
        }
        #banner-section-top{
          padding-bottom: 0;
        }
        .img-responsive1{
          width: 40% !important;
          margin-top: -4px !important;
        }
        .img-responsive2{
          width: 25%  !important;
          margin-top: -4px !important;
        }
        .nextline{
          display: block;
        }
        .sect-part3 .img-responsive{
          margin-left: 20px !important;
          margin-bottom: -1px !important;
          width: 60% !important;
        }
        .sect-part3 .img-responsive .t1{
            margin-left: 20px !important;
            margin-bottom: 10px !important;
            width: 60% !important;
        }
        h3#services-h3{
          margin-top: 20px;
        }
        .v-divider{
          visibility: hidden !important;
        }
        .subheroh1{
          margin-top: 0 !important;
        }
        .custlogo{
          padding-bottom: 0 !important;
        }
        .custlogo .container{
          width: 70% !important;
        }
        p.para-small{
          padding: 24px 20px 0px;
        }
        .banner-left{
          margin-top: 30px !important;
        }
        .make_payment_button{
          font-size: 14px !important;
        }
        .img-responsive2 {
          width: 20% !important;
      }
      .img-responsive1 {
          width: 35% !important;
      }
      .img-fluid{
        bottom: 0 !important;
      }
    }
    tbody{
      background-color: #f8f9fa;
    }
       .ytmainpage img{
      width: 112%;
      height: 430px;
      position: relative;
    }
    .ytmainpage span{
      position: absolute;
      top: 50%;
      left: 55%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      border-style: none;
      cursor: pointer;
      border-radius: 5px;
      text-align: center;
      z-index: 3;
      opacity: .75;
    }
    .ytmainpage span:hover{
      opacity: 1;
    }
     /* .tdborder{
      border-right: 1.5px solid #00A8C8; 
      border-left: 1.5px solid #00A8C8;
     } */

     .aligntext{
       text-align: center;
       vertical-align: top;
       border-right: 1px solid #dee2e6;
     }

     .tablesub{
      padding: 8px;
      padding-left: 16px;
      background-color: #cee3e4;
      text-align: center;
     }

     .make_payment_button{
            padding: 1rem 2.4rem;
            font-size: .94rem;
            background-color: #FFCD3D;
            border-radius: 10px !important; 
            margin-bottom: 16px;
            color: white;
            font-weight: 500;
            line-height: 1.5;
            position: relative;
            overflow: hidden;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
            white-space: normal;
            transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
            box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
        }

        .make_payment_button:hover{
            color:#000 !important;
        }

        img.contact-page-logo {
          padding: 1em;
        }

        .author-img {
          margin-right: 20px;
          border-radius: 50%;
        }
        .author {
            float: right;
            margin: 2em 0;
        }
        .carousel-indicators{
          bottom: -3em !important;
        }

        .carousel .carousel-indicators li{
          background-color: #747373 !important;
        }

        .tablesubhead{
          text-align: center;
          font-weight: 500;
          line-height: 1;
          font-size: 18px;
          position: relative;
          bottom: 20px;
          padding-top: 45px;
        }
        .img-responsive1{
          width: 25%;
          margin-top: -4px;
        }
        .img-responsive2{
          width: 15%;
          margin-top: -4px;
        }
        .feature{
          font-weight: 600;
        }
        a.nav-about {
          font-family: Noto Sans JP !important;
          font-size: 1.1em !important;
          font-weight: 300 !important;
          font-style: normal !important;
          font-stretch: normal !important;
          line-height: normal !important;
          letter-spacing: .7px !important;
          color: #212734b3 !important;
          margin-right: 1em !important;
      }

          .nav-about i{
            color: #212734b3;
          }

          a#nav-contact-btn, a#nav-bar-request-access {
            border-radius: 25px;
            border: solid 2px #f2b527;
            font-family: Noto Sans JP;
            font-size: 1.1em;
            font-weight: 300;
            font-style: normal;
            font-stretch: normal;
            line-height: normal;
            letter-spacing: .7px;
            color: #212734b3;
        }
        @media only screen and (min-width: 128px) and (max-width: 720px){
            .videoHeading{
              font-size: 14px !important;
            }
            .mobileVideo{
              position: relative;
              width: 250px !important;
              height: 150px !important;
            }
  }
        .subhero{
          
          padding: 50px 50px;
          background: linear-gradient( 180deg, rgba(244, 239, 200, 1) 25%, rgba(244, 239, 199, 1) 50%);
        }

        .v-divider{
          width:1px;
          height:100%;
          border-left:1px solid gray;
          visibility: visible;
          }

          tbody tr:hover{
            background-color: #eec54b;
          }
          .scroll-top{
            bottom: 20px;
          }
          .new-even-section{
            background: linear-gradient( 180deg, rgba(255, 255, 255, 1) 5%, rgba(235, 243, 253, 1) 70%, rgba(255, 255, 255, 1) 107% )
          }
          .testimonial_back{
            background: linear-gradient( 180deg, rgba(255, 255, 255, 1) 1%, rgba(244, 239, 200, 1) 25%, rgba(244, 239, 199, 1) 50%, rgba(255, 255, 255, 1) 102% ) !important;
          }
        
        .tooltip-input{
          display: flex;
          justify-content: left;
          flex-direction: row;
          align-items: center;
          margin-bottom: 0px !important;
        }


        .block-row {
          display: flex;
          flex-wrap: nowrap;
          justify-content: center;
        }

        .block-col {
          text-align: center;
          padding:  10px!important;
          font-size: 18px!important;
          cursor: pointer;
          /* background-color: #ffc61e !important; */
          user-select: none;
        }


        .percentage_inc {
          text-align: right;
          font-weight: 500;
        }


        .testimonial-img{
            width: 100px;
            height: 100px;
            margin-right: 20px;
            border-radius: 50%;
        }
#roi-modal-subheading{
    width: 80%;
    font-family: Poppins;
    font-size: 15px;
    margin-left: auto; 
    margin-right: auto; 
}       

#testimonial-link {
  font-weight: 800;
  font-size:15px; 
  cursor: pointer;
}


.buttnCont{
  background-color:rgb(238, 238, 238);
  border-radius: 30px;
  border: rgb(201, 199, 199);
  display: flex;
  flex-wrap: nowrap;
}


.buttn:focus {outline:0;}
.buttn{
    background-color:rgb(238, 238, 238);
    border: none;
    color:grey;
    padding: 10px;
    padding-left: 25px;
    padding-right: 25px;
    border-radius: 30px;
    text-decoration: none;
    display: inline-block;
    font-size: 15px;   
}


.payment_duration.active {
  background-color: #FFCD3D;
  color:white;
  font-weight: 500;
}