body {
  overflow-x: hidden;
}

a {
  color: #1e90ff !important;
  cursor: pointer !important;
}

/* a.btn{
  color: white !important;
} */

a.badge{
  color: white !important;
}

.demo-modal{
  flex-direction: column;
  position: fixed; /* Stay in place */
  z-index: 999; /* Sit on top */
  padding-top: 60px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: none; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
  animation: fadeIn 1s 1;
}

@keyframes fadeIn{

  0%{
    opacity: 0;
  }
  100%{
    opacity: 1s;
  }
}

.close_button{
  font-size: 50px !important;
  color: white;
  align-self: flex-end;
  margin-right: 5vw;
  transition: 0.3s;
}

.close_button:hover{
  color: grey;
}

.btn-link {
  color: #1e90ff !important;
}

.product-modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 999; /* Sit on top */
  padding-top: 60px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: none; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.product-modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.product-modal-content, #caption {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)}
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

/* The Close Button */
.close-product-modal {
  position:static;
  text-align: right;
  margin-right: 5vw;
  color: #f1f1f1;
  font-size: 75px !important;
  font-weight: bold;
  transition: 0.3s;
}

.close-product-modal:hover,
.close-product-modal:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .product-modal-content {
    width: 100%;
  }
}



.product-img {
  width: 80%;
}

.poster-img {
  border-radius: 50%;
  width: 50px;
  height: 50px;
}

.badge-soft-primary {
  color: #1e90ff;
}

.navbar-light .nav-item .nav-link:hover,
.navbar-light .nav-item .nav-link:focus,
.navbar-light .nav-item .nav-link.active {
  color: #1e90ff;
}
.hover-effect:hover {
  border-bottom: solid 4px #1e90ff;
}

.img-container {
  height: 175px;
  overflow: hidden;
}

.post-img {
  min-height: 100%;
  position: relative;
}

.social-icons {
  background-color: #e3f2fe !important;
}

.icon-border {
  border-bottom: solid 1px #9dcae0;
  padding-bottom: 15px;
}

.blog-hero {
  position: relative;
  background-image: url("../../images/blog-hero.jpeg");
  background-position: 50% 20%;
  height: 300px;
}

.blog-hero::before {
  content: "";
  position: absolute;
  width: 100%;

  filter: brightness(80%);
}

.blog-inside {
  position: relative;
}

.detail-view-bg {
  background-color: aliceblue;
  background-image: url("../../images/hero-2-bg.png");
}

.client-image img {
  filter: grayscale(100%);
  opacity: 0.5;
  transition: 1s;
}

.client-image img:hover {
  filter: none;
  opacity: 1;
}

.icon {
  max-width: 64px;
  max-height: 64px;
}

.darken {
  filter: brightness(85%);
  transition: 0.5s;
}

.darken:hover {
  filter: none;
}

.badge-primary {
  background-color: #1e90ff;
}

.fill-blue {
  fill: #1e90ff;
  transition: 0.5s;
}

.fill-blue:hover {
  fill: #005cc5;
}

.cust-margin {
  margin: 0 64px 0 64px;
}

@media only screen and (max-width: 767px) {
  * {
    font-size: 3.5vw !important;
  }
  h1 {
    font-size: 5vw !important;
  }
  h2 {
    font-size: 4.8vw !important;
  }
  h3 {
    font-size: 4.6vw !important;
  }
  h4 {
    font-size: 4.4vw !important;
  }
  h5 {
    font-size: 4.2vw !important;
  }
  h6 {
    font-size: 4vw !important;
  }

  .blog-desc div {
    width: 100% !important;
    height: auto !important;
    padding: 0px;
    margin: 0px;
  }

  .blog-desc img {
    width: 100% !important;
    height: auto !important;
    padding: 0px !important;
    margin: 0px !important;
  }

  p {
    font-size: 3.5vw !important;
  }

  .cust-margin {
    margin: 0 4px 0 4px;
  }

  .product-li {
    padding: 0px !important;
  }

  .feature-img {
    width: 100vw !important;
    height: auto !important;
  }

  .feature-img-ctr {
    padding: 0px;
  }

  .feature-section {
    padding: 50px 0px;
  }

  .show-clr-logo {
    filter: none !important;
    opacity: 1 !important;
  }

  .client-image img {
    transition: 1.5s !important;
  }
}

@media only screen and (min-width: 768px) {
  .blog-desc div {
    width: 100% !important;
    height: auto !important;
  }

  .blog-desc img {
    width: 100% !important;
    height: auto !important;
    padding: 0px !important;
    margin: 0px !important;
  }
}


.pagination {
  clear: both;
justify-content: center;
margin: 0 10px 10px;

}

.pagination ul {
  list-style-type: none;
  padding: 0;
}

.pagination li {
  display: inline;
}

.pagination a {
  color: white;
  display: inline-block;
  padding: 1px 1px;
  text-decoration: none;
  border: 1px solid none;
  margin: 0 4px;
  border-radius: 4px;

}
/*Jobs Below */

  .header-banner {
      background-size: cover;
      text-align: center;
      padding: 80px 0;
    }

  .job-container{
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 20px;
    cursor: pointer;
    font-size: 1.5rem;
  }
  .job-title {
      width: 60%;
      margin-top:1em;

  }
  .job-text {
      width: 65%;
      display: none;
      text-align:left;
      margin-top:1em;
      margin-right:2em;
      padding-left:4em;
  }
  .job-highlight {
      background-color:#E3F2FE ;
      padding: 5px 10px;
      color: #000;
  }
  .asterisk{
    color: #DB2A3A;
  }
/*web-adi*/
.main-timeline {
  position: relative
}
/*Line middle*/
.main-timeline:before {
  content: "";
  display: block;
  width: 3px;
  height: 100%;
  background: #c6c6c6;
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.main-timeline .timeline {
  margin-bottom: 40px;
  position: relative
}

.main-timeline .timeline:after {
  content: "";
  display: block;
  clear: both
}
/*Middle Circ*/
.main-timeline .icon {
  width: 30px;
  height: 30px;
  line-height: 30px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.main-timeline .icon:before,
.main-timeline .icon:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.33s ease-out 0s
}

/*Middle Circ */
.main-timeline .icon:before {
  background: #fff;
  border: 3px solid #232323;
  left: -3px
}

.main-timeline .icon:after {
  border: 2px solid #1e90ff;
  left: 3px
}

.main-timeline .timeline:hover .icon:before {
  left: 3px
}

.main-timeline .timeline:hover .icon:after {
  left: -3px
}

.main-timeline .instruct-content {
  width: 50%;
  float: left;
  margin-top: 22px;
  position: relative;
}

.main-timeline .instruct-content:before {
  content: "";
  width: 38.5%;
  height: 2px;
  background: #1e90ff;
  margin: auto 0;
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0
}

.main-timeline .instruct-outer {
  /*Line to circ*/
  width: 180px;
  height: 180px;
  text-align: center;
  margin: auto;
  z-index: 1;
}
/*Icon circle*/
.main-timeline .instruct-outer:before,
.main-timeline .instruct-outer:after {
  content: "";
  width: 180px;
  height: 180px;
  margin: 0 auto;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transition: all 0.33s ease-out 0s
}

.main-timeline .instruct-outer:before {
  background: #fff;
  border: 2px solid #1e90ff;
  left: -6px
}

.main-timeline .instruct-outer:after {
  border: 2px solid #c6c6c6;
  left: 6px
}

.main-timeline .timeline:hover .instruct-outer:before {
  left: 6px
}

.main-timeline .timeline:hover .instruct-outer:after {
  left: -6px
}

.main-timeline .instruct {
  width: 100%;
  margin: auto;
  position: absolute;
  top: 27%;
  left: 0
}

.main-timeline .timeline-content {
  width: 50%;
  padding: 20px 0 20px 50px;
  float: right
}

.main-timeline .title {
  font-size: 30px;
  font-weight: 700;
  line-height: 24px;
  margin: 0 0 15px 0
}
/*HERE*/
.main-timeline .description {
  margin-bottom: 0;
  font-size:1.2rem;
}

.main-timeline .timeline:nth-child(2n) .instruct-content {
  float: right
}

.main-timeline .timeline:nth-child(2n) .instruct-content:before {
  left: 10px
}

.main-timeline .timeline:nth-child(2n) .timeline-content {
  padding: 20px 50px 20px 0;
  text-align: right
}

@media only screen and (max-width: 991px) {
  .main-timeline .instruct-content {
    margin-top: 35px
  }

  .main-timeline .instruct-content:before {
    width: 22.5%
  }

  .main-timeline .timeline-content {
    padding: 10px 0 10px 30px
  }

  .main-timeline .title {
    font-size: 23px
  }

  .main-timeline .timeline:nth-child(2n) .timeline-content {
    padding: 10px 30px 10px 0
  }
}

@media only screen and (max-width: 767px) {
  .main-timeline:before {
    margin: 0;
    left: 7px
  }

  .main-timeline .timeline {
    margin-bottom: 20px
  }

  .main-timeline .timeline:last-child {
    margin-bottom: 0
  }

  .main-timeline .icon {
    margin: auto 0
  }

  .main-timeline .instruct-content {
    width: 95%;
    float: right;
    margin-top: 0
  }

  .main-timeline .instruct-content:before {
    display: none
  }

  .main-timeline .instruct-outer {
    width: 110px;
    height: 110px
  }

  .main-timeline .instruct-outer:before,
  .main-timeline .instruct-outer:after {
    width: 110px;
    height: 110px
  }

  .main-timeline .instruct {
    top: 30%
  }

  .main-timeline .timeline-content,
  .main-timeline .timeline:nth-child(2n) .timeline-content {
    width: 95%;
    text-align: center;
    padding: 10px 0
  }

  .main-timeline .title {
    margin-bottom: 10px
  }
}

.slider-container {
  width: 80%;
  margin: 0 auto;
  overflow: hidden;
}

.slider-before,
.slider-after {
  user-select: none;
}

.custom-image-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 0;
  padding-bottom: 75%;
}

.slider-before,
.slider-after {
  position: absolute;
  width: 100%;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  object-fit: contain;
}

.slider-after {
  overflow: hidden;
}

.slider-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 80%;
  background-color: black;
  cursor: ew-resize;
  transform: translate(-50%, -50%);
}

.slider-handle::before,
.slider-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  cursor: ew-resize;
  transition: all 0.2s ease-out;
}

.slider-handle::before {
  left: -24px;
  border-right: 20px solid black;
}

.slider-handle::after {
  right: -24px;
  border-left: 20px solid black;
}
.detailsAdi {
  padding: 10px;
  background-color: aliceblue;
  border-radius: 10px;
  transition: 0.2s background linear;
}

.detailsAdi:hover {
  background: #E3F2FE;
}

.detailsAdi>summary {
  transition: color 1s;
}

.detailsAdi[open]>summary {
  color: #1e90ff;
}


.detailsAdi>summary::marker {
  color: #1e90ff;
  font-size: 1.2em;
}