@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

  body {
      background-color: #fff !important;
      font-family: 'Poppins' !important;
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
      overflow-x: hidden;
  }

  html {
    scroll-behavior: smooth;
  }

  * {
    box-sizing: border-box;
  }

  p {
    font-size: 14px;
    font-weight: 200;
    position: relative;
  }

  iframe {
    width: 100%;
    height: 500px;
    padding: 15px 25px 0px 0px;
  }

  /*Navigation Design*/
  nav {
    background: #002634;
    margin: 0;
    padding: 0;
    box-shadow: 4px 0px 5px #0b0b0b;
  }

  nav:after {
    content: '';
    clear: both;
    display: table;
  }

  nav .logoStyle {
    float: left;
    padding-left: 60px;
  }

  nav ul {
    float: right;
    list-style: none;
    margin-right: 40px;
    position: relative;
    margin-bottom : 0;
  }

  nav ul li {
    float: left;
    display: inline-block;
    margin: 0 5px;
    background: #002634;
  }

  nav ul li a {
    color: #fff;
    text-decoration: none;
    line-height: 70px;
    font-size: 16px;
    padding: 8px 12px;
  }
  nav ul li i {
   color: #fff;
   padding-right: 10px; 
   margin-left: 5px;
  }

  nav ul li a:hover , nav ul li i:hover {
    color: #cacaca;
    text-decoration: none;
  }

  nav ul ul {
    position: absolute;
    top: 50px;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: top .5s;
  }

  nav ul li:hover > ul {
    top: 70px;
    opacity: 1;
    visibility: visible;
  }

  nav ul ul li {
    position: relative;
    margin: 0;
    float: none;
    display: list-item;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  }

  nav ul ul li a {
    font-size: 14px;
    line-height: 50px;
  }

  .show, .navIcon, .inputNav {
    display: none;
  }

/*End of Navigation Design*/
  .para-about {
    font-size: 18px;
    font-weight: 200;
    position: relative;
  }

  .paraHero{
    font-size: 14px;
    font-weight: 100;
  }

  .mainHeading {
    font-size: 32px;
    font-weight: bolder;
    position: relative;
  }

  .subHeading {
    font-size: 20px;
    font-weight: bolder;
    position: relative;
  }

  .subHeading2 {
    font-size: 16px;
    font-weight: bolder;
    position: relative;
  }

 .topnav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #002634;
    overflow: hidden;
    padding: 5px 25px 5px 25px;
    box-shadow: 4px 0px 5px #0b0b0b;
  }

  .topnav-links ul {
    margin: 0;
    padding: 0;
    display: flex;
  }

  .topnav-links li {
    list-style: none;
  }

  .topnav-links li a {
    text-decoration: none;
    color: #fff;
    padding: 15px 15px 10px 15px;
    display: block;
  }
 
  .topnav-links li a:hover, .dropdown:hover {
    color: rgb(179, 179, 179);
    text-decoration: none;
  }

  .dropdown {
    float: left;
    overflow: hidden;
  }
  
  .dropdown .dropbtn {
    font-size: 16px;  
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  .dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  
  .dropdown:hover .dropdown-content {
    display: block;
  }

  .toggle-button {
    position: absolute;
    right: 1rem;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
  }

  .toggle-button .bar {
    height: 3px;
    width: 100%;
    background-color: #fff;
    border-radius: 10px;
  }
  
  .logo{
    max-height: 70px;
    padding: 1em;
  }

  .footerLogo {
    max-width: 180px;
    margin-bottom: 2em;
  }

 .hero-image {
    height: 75vh;
    width: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
    z-index: -1;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  }
/*
  .home-img {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/homeHero.png");
  }
  
  .about-img {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/about-img.jpg");
  }

  .erp-img {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/erpHero.jpg");
  }

  .menu-img {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/viaMenusCover.png");
  }

  .auction-img {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/auctionCover.jpg");
  }

  .bdc-img {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/bdcCover.jpg");
  }
  
  .rdc-img {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/RDC-Cover.jpg");
  }

  .it-img {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/IT-Cover.jpg");
  }

  .contact-img {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/Contact-Cover.jpg");
  }

*/

  .hero-text {
    text-align: left;
    color: white;
    padding: 0em 5em;
  }

  .hero-button {
    padding: 10px 20px 10px 20px;
    background-color: #fff;
    border: none;
    border-radius: 10px;
    box-shadow: 4px 0px 5px #0b0b0b;
    font-family: 'Poppins';
    font-size: 16px;
    font-weight: bolder;  
  }

  .logo2 {
    max-width: 300px;
    margin: auto;
    padding: 150px 50px;;
    float: right;
  }

  .circlesR {
    float: right;
    margin: -4em 5em 0em 0em;
  }

  .circlesL {
    float: left;
    margin: -4em 5em 0em 0em;
  }

  .circlesL {
    float: left;
    margin: -4em 0em 5em 5em;
  }
  
  .about {
    margin: 5em 0em 5em 0em;
  }

  .col10 {
    float: left;
    width: 10%;
    vertical-align: top;
    line-height: 200%;
    text-align: left;
    padding: 0% 5%;
  }

  .col35 {
    float: left;
    width: 35%;
    vertical-align: top;
    padding: 0% 5%;
  }

  .col25 {
    float: left;
    width: 25%;
    vertical-align: top;
    padding: 0% 5%;
  }

  .btnBlue , .btnBlueReq {
    position: relative;
    bottom: 0px;
    padding: 10px 20px 10px 20px;
    background-color: #1089B8;
    border: none;
    border-radius: 10px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: 'Poppins';
    font-size: 16px;
    font-weight: 500; 
    color: #ffffff;
    }

  .btnBlueCard {
    position: absolute;
    padding: 10px 20px 10px 20px;
    background-color: #1089B8;
    border: none;
    border-radius: 10px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: 'Poppins';
    font-size: 16px;
    font-weight: 500; 
    color: #ffffff;
    bottom: 15px;
    right: 0;
    left: 0;
    margin: 0px 50px 0px 50px;
    }

  .about-sec-mar {
    margin-top: 2em;
    margin-bottom: 2em;
  }

  .p_col {
    position: relative !important;
  }

  .p_btn_div {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  }

  .btnBlue:hover, .btnBlueCard:hover, .btnBlueReq:hover {
    background-color: #0b77a1;
  }

  footer {
    background-color: #002634;
    width: 100%;
    height: auto;
    position: relative;
    padding: 10em;
    overflow: hidden;
  }

  .footerBG {
    opacity: 0.2;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
  }

  footer p {
    color: #fff;
  }

  footer h3 {
    color: #fff;
    font-size: 22px;
  } 

  footer li {
    color: #fff;
    font-size: 16px;
  }

  .borderL1 {
    border-left: 1px solid #fff;
  }

  .contactListItem {
    margin-bottom: 0.5em;
  }

  .socialList {
    list-style-type: none;
    display: inline-flex;
  }

  .socialListItem {
    margin-right: 20px;
  }

  .socialIcon {
    color: #fff;
    font-size: 28px;
  }

  .subFooter {
    bottom: 0;
    left: 0;
    padding: 25px 0px 10px 0px;
    text-align: center;
    background-color: #00161f;
    width: 100%;
    position: absolute;
  }

  .vcard {
    position: relative;
    background-color: rgba(53, 182, 97, 0.7);
    padding: 50px;
    margin: 60px 25px;
    max-height: fit-content;
    max-width: auto;
    border-radius: 30px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    text-align: center;

  }

  .contact-card {
    position: relative;
    padding: 10px;
    margin: 60px 25px;
    max-height: fit-content;
    max-width: auto;
    text-align: center;
  }

  .servicesBG , .productsBG , .meetBG  {
    background-image: url(../images/grad.png);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    display: block;
    width: 100%;
    z-index: -3;
  }

  .servicesBG {
    transform: skewY(-7deg);
    min-height: 75vh;
  }

  .productsBG {
    transform: skewY(7deg);
    min-height: 75vh;
    margin-top: 50vh;
  }

  .meetBG {
    min-height: 30vh;
  }

  .mtb {
    margin-top: 7em;
    margin-bottom: 5em;
  }

  .plr , .plr2 {
    padding-right: 75px !important; 
    padding-left: 75px !important;
  }

  .circle {
    position: relative;
    width: 125px;
    height: 125px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    padding: 15px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    margin: -110px auto 15px auto;
  }

  .circleImage {
    width: 90px;
    height: 90px;
    position: relative;
  }

  .rotated {
    position: absolute;
    top: 15px;
    left: 0px;
    height: 80%;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: -1;
}

  .p_card {
      position: relative;
      background-color: rgba(53, 182, 97, 0.7);
      padding: 25px;
      margin: 60px 25px;
      max-height: 375px;
      max-width: 100%;
      border-radius: 30px;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  }

  .p_img {
    max-width: 100%;
    max-height: 325px;
    border-radius: 30px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  }

  .p_bg {
    position: absolute;
    right: 0;
    bottom: 0;
    margin-top: -50px;
    opacity: 0.5;
    width: 175px;
    z-index: -1;
  }

/* .textLimit {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 5; /* number of lines to show 
              line-clamp: 5; 
      -webkit-box-orient: vertical; 
 }*/

  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .line {
    width: 4em;
    border: 2px solid #0b0b0b;
    display: block;
    float: left;
    margin-top: -5px;
    border-radius: 15px;
  }

  .mtb2 {
    margin-top: 2em;
    margin-bottom: 3em;
  }

  .mtb3 {
    margin-top: 5em;
    margin-bottom: 8em;
  }

  .mh4 {
    max-height: 400px;
  }

  .BgCircleLeft , .BgCircleRight { 
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    display: block;
    width: 100%;
    min-height: 450px;
    z-index: -3;
    left: 0;
  }

  .BgCircleLeft {
    background-image: url(../images/BgCircleL.png);
    background-position: left top;
  }

  .BgCircleRight {
    background-image: url(../images/BGCircleR.png);
    background-position: right top;
  }

  .tcard {
    position: relative;
    background-color: rgba(53, 182, 97, 0.7);
    background-image: url(../images/Group\ 36.png); 
    background-repeat: no-repeat; 
    background-size:contain;
    background-origin: content-box;
    padding: 40px;
    margin: 60px 25px;
    max-height: fit-content;
    max-width: 30em;
    border-radius: 30px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    text-align: center;
  }

  .in_card {
    position: absolute;
    background-color: #1089B8;
    width: 8%;
    height: 100%;
    border-radius: 30px 0px 0px 30px;
    left: 0;
    top: 0;
    transition: width 1s;
  }

  .tcard:hover .in_card {
    width: 100%;
    border-radius: 30px;
  }

  .map-img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0em 0em 5em 0em;
    padding: 0px;
  }

  .meeting {
    background-image: url(../images/grad.png);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    display: block;
    width: 100%;
    max-height: 400px;
    padding: 50px !important;
  }

  .meetingImg {
    position: relative;
    max-height:300px;
    border-radius: 30px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    float: right;
  }

  .vidCard {
    position: relative;
    width: 100%;
    padding: 25px 25px 15px 25px;
    margin-bottom: 15px;
  }

  video {
    width: 100%;
    height: auto;
  }

  .erpModCard, .menuModCard, .transCard, .auctionCard {
    position: relative;
    padding: 25px 50px;
    margin: 25px;
    max-height: fit-content;
    max-width: auto;
    border-radius: 30px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    text-align: center;
  }

  .erpModCard {
    background-color: rgba(27, 138, 185, 0.8);
  }

  .menuModCard {
    background-color: rgba(61, 173, 93, 0.8);
  }

  .transCard {
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
  }

  .auctionCard {
    background-color: rgba(206, 206, 206, 0.8);
  }

  .erpModHead {
    font-size: 20px;
    font-weight: bolder;
    position: relative;
    color: #fff;
  }

  .erpModP {
    color: #fff;
  }

  .erpModImg {
    width: 125px;
    height: 125px;
    position: relative;
    margin-bottom: 25px;
  }

  .erpMainImage2 {
    width: 100%;
  }

  .menuMainImage {
    width: 450px;
  }

  .secondHeading {
    display: inline;
  }

  /*input fields design*/

  input, textarea ,select {
    border: none;
    outline: none;
    border-bottom: solid 1px red;
   }

  .input-group {
    width: 360px;
    position: relative;
    border-bottom: 1px solid #303030;
    margin: 20px 0px;
  }

  .input-group input, .input-group textarea {
    padding: 5px;
    border: none;
    background-color: transparent;
    width: 100%;
    color: #303030;
    font-size: 16px;
    z-index: 1;
      padding-bottom: 0px;
  }
  
  .input-group:hover,
  .input-group:focus-within {
    border-color: #181818;
  }
  
  .input-group input:focus, .input-group textarea:focus,
  .input-group:hover input {
    color: #303030;
  }
  
  .input-group label {
    position: absolute;
    background-color: transparent;
    top: 0;
    left: 0;
    bottom: 0;
    color: #303030;
    opacity: 0.6;
    font-weight: 500;
    cursor: text;
  }
  
  .input-group:hover label {
    color: #303030;
  }
  
  .input-group:focus-within label,
  .input-group input:not(:placeholder-shown) ~ label,
  .input-group textarea:not(:placeholder-shown) ~ label{
    padding: 0px 8px;
    background-color: var(--body);
    top: -12px;
    left: 0px;
    bottom: auto;
    color: #303030;
  }

  select {
    background: transparent;
    color: #303030;
    width: 100%;
    border: none;
    padding: 5px 0px;
  }
  
  select label {
    position: absolute;
    background-color: transparent;
    top: 0;
    left: 0;
    bottom: 0;
    color: #303030;
    opacity: 0.6;
    font-weight: 500;
    cursor: text;
  }
  
  select:focus-within label,
  .input-group select:not(:placeholder-shown) ~ label {
    padding: 0px 8px;
    background-color: var(--body);
    top: -12px;
    left: 0px;
    bottom: auto;
    color: #303030;
  }
  
  /*Chrome, Safari, Edge, Opera */
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  
  /*Firefox*/ 
  input[type=number] {
    -moz-appearance: textfield;
  }

  .formMsg {
    margin-left: 25px;
    display: none;
  }

  /*End of fields*/

  .services-imgs {
    width: 100%;
    margin: 2em 0em;
  }

  .contactText {
    font-size: 18px;
    font-weight: 600;
  }

  ul li a , ul li a:hover{
    color: #fff;
    text-decoration: none;
  }

.btn_adjust {
    margin-bottom : 40px;
    overflow: hidden;
   text-overflow: ellipsis;
   /*display: -webkit-box;*/
   -webkit-line-clamp: 3; /* number of lines to show */
           line-clamp: 3; 
   -webkit-box-orient: vertical;
}
  
  
.hidden {
    display : hidden;
}