body{ background-image: url(../images/bg-img.svg); background-repeat: no-repeat; font-family: "Plus Jakarta Sans", sans-serif; font-optical-sizing: auto;  font-style: normal;}
.navbar{position: fixed; top: 0; z-index: 1; width: 100%; background-color: rgb(228 253 253 / 50%);}
.nav-link{color: #000000;}
.nav-link:hover{color: #3BCCCB;}
.active{color: #3BCCCB;}
.btn-primary{background-color: #3BCCCB; border-color: #3BCCCB;}
.btn-primary:hover{background-color: #3BCCCB; border-color: #3BCCCB;}
.btn-outline-primary{color: #3BCCCB; border-color: #3BCCCB;}
.btn-outline-primary:hover{color: #ffffff; background-color: #3BCCCB; border-color: #3BCCCB;}
#hero-section{ padding-top: 6rem !important; background: rgb(255, 255, 255); background: linear-gradient(0deg, rgb(255 255 255 / 0%) 0%, rgb(225 255 255 / 30%) 49%, rgb(222 255 255 / 50%) 100%);}
.hero-paragraph{line-height: 2rem; margin-top: 1rem;}
.text-body-secondary{font-size: 100%;}
.hero-title{font-size: 3rem; line-height: 4rem;}
.hero-banner-img img{position: absolute; right: 0; top: 3rem; width: 42%;}
.hero-highlight{color: #3BCCCB;}
.border-bottom{--bs-border-color: #f5f5f5;}
#about-section img{width: 75%;}
.section-subheading{text-transform: uppercase; color: #3BCCCB;}
.sub-heading{font-size: 2rem; font-weight: 600;}
#company-section{background-color: #FAFAFA; border-top: 1px solid #ECF1F2; border-bottom: 1px solid #ECF1F2;}
#company-section .card-title{font-size: 2rem; color: #3ACCCB; font-weight: bold;}
.card{background: none; border: none;}
#news-section{background: rgb(255, 255, 255); background: linear-gradient(0deg, rgb(255 255 255 / 0%) 0%, rgb(83 132 150 / 50%) 49%, rgb(0 73 99) 100%) 100%;}
#news-section .card-body{padding-left: 0rem; padding-right: 0rem;}
#news-section .card-title{font-weight: 700; font-size: 1.6rem; line-height: 2.5rem;}
#Contact-section{background-color: #ECF1F2;}
.privacy-policy a{text-decoration: none;}
.contact-bg-bottom{background-image: url(../images/contact-bottom-shape.png); background-repeat: no-repeat; background-position: bottom;}
.address span a{color: #3BCCCB; text-decoration: none;}

@media only screen and (min-width: 768px) and (max-width: 1024px){
.navbar-brand{width: 25%;}
.hero-title{font-size: 2.5rem; line-height: 3.5rem;}
.hero-banner-img img{width: 50%;}
#about-section{padding-top: 0rem !important; margin-top: 0rem !important;}
#about-section img{width: 85%;}
#news-section .card-title{font-size: 1.3rem; line-height: 2rem;}
.service-item{width: 21% !important;}
}

@media only screen and (min-width: 320px) and (max-width: 767px){
.hero-banner-img img{display: none;}
.hero-title {font-size: 2rem; line-height: 3rem;}
#about-section{margin-top: 0rem !important; padding-top: 0REM !important;}
.navbar {background-color: rgb(228 253 253 / 100%);}
.contact-btn{margin-left: 1rem; margin-top: 1rem;}
.navbar-nav{margin-top: 1rem;}
.navbar-toggler:focus{box-shadow: none;}
#business-partners img{margin-bottom: 1rem;}
.view-all-btn{position: relative; bottom: 4rem;}
.contact-bg-bottom{margin-top: 1rem;}
.form-section{margin-top: 1rem;}
.social-links ul{text-align: center;}
.copyright p{text-align: center;}
#news-section .card{margin-bottom: 1rem;}
.service-item{width: 100% !important;}
#services-section{padding-top: 0px !important; margin: 1rem;}
#hero-section{padding-bottom: 0px !important;}
.quality-img img{display: none;}
.team-card{width: 100% !important;}
#module-section img{width: 100% !important;}
.module-tabs{padding-top: 0px !important; margin-top: 0px !important;}
}

#myBtn {display: none; position: fixed; bottom: 20px; right: 30px; z-index: 99; border: none; outline: none; background-color: #3BCCCB; color: white; cursor: pointer; padding: 10px; border-radius: 4px; box-shadow: 1px 8px 15px 0px rgb(0 0 0 / 10%);}
.service-item{
  background-color: #ffffff;
  padding: 1rem;
  border-radius: 1rem;
  width: 22%;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 5px 10px 0px #e6f0f1;
}
.service-item:hover{transform: scale(1.08);}
.service-item h3{line-height: 1.5rem;}
.team-card{background-color: #ffffff; padding: 1rem; border-radius: 1rem; transition: all 0.3s ease-in-out; box-shadow: 0px 5px 10px 0px #e6f0f1; width: 30%;}
/* .team-card:hover{transform: scale(1.08);} */
.team-card h3{line-height: 1.5rem;}
.email-address a{color: #3BCCCB; text-decoration: none;}
#services-section img{width: 54px;}
#services-section{
  z-index: 999;
  position: relative;
}
.our-mission{
  background-image: url(../images/bg-texture.svg); background-repeat: no-repeat; background-position: left;
  background-color: rgb(121 201 202 / 7%);
  /* box-shadow: 0px 10px 15px 0px #e6f0f1; */
  /* border: 1px solid #eee; */
  padding: 1rem;
  border-radius: 1rem;
  transition: all 0.3s ease-in-out;
}
.our-mission h1{line-height: 2.5rem; color: #3BCCCB;}
.software-card{background-color: #ffffff; padding: 1rem; border-radius: 1rem; transition: all 0.3s ease-in-out; box-shadow: 0px 5px 10px 0px #e6f0f1;}
.software-card:hover{transform: scale(1.08); background-color: #3BCCCB; color: #fff;}
.software-card h3{line-height: 1.5rem;}
#software-section{background-color: rgb(121 201 202 / 7%); padding: 3rem; border-radius: 1rem;}
#internal-section{background-color: rgb(121 201 202 / 7%); padding: 3rem; border-radius: 1rem; margin: 1rem;}
.nav-pills .nav-link.active{
  background-color: #3BCCCB;
  color: #fff;
  box-shadow: 0px 5px 10px 0px #e6f0f1;
}
.nav-pills .nav-link{
  border: 1px solid #3BCCCB;
  border-radius: 1.5rem;
  margin-right: 1rem;
  color: rgba(33, 37, 41, 0.75);
  font-weight: 300;
  margin-bottom: 1rem;
}
#module-section img{width: 75%;}
.submit-btn{
  height: 42px;
  margin-top: .6rem;
}

.help-block{display: flex; justify-content: left; margin-top: .2rem; color: red;}

/* Toast */
#snackbar {
  visibility: hidden;
  min-width: 250px; 
  margin-left: -125px;
  background-color: #28a745;
  color: #fff;
  text-align: center;
  border-radius: 1rem;
  padding: 16px;
  position: fixed;
  z-index: 1;
  left: 40%;
  bottom: 30px;
}


#snackbar.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}