/*-- Body Reset --*/

html {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  font-family: 'Mulish', sans-serif;
  scroll-behavior: smooth;
}

/*=== LANDING GRADIENT ===*/

/*=== HEADINGS & ICONS ===*/

/*=== NAVIGATION ===*/

nav {
  background: white;
}

.navbar-brand img {
  height: 3rem;
  padding-top: 0.2rem;
}

nav ul {
  margin-top: 1.12rem;
}

/*=== CONTENT STYLE ===*/

h1 {
  font-weight: 700;
  color: black;
  color: transparent;
}

.container .dots {
  width: 50px;
  height: 75px;
  position: absolute;
  left: -55px;
  top: -85px;
  z-index: -1;
  opacity: 0.7;
}

.container .btn-primary {
  padding: 0.8rem 3rem;
  border-radius: 30px;
  font-weight: 700;
}

.container .btn-primary:hover {
  padding: 0.8rem 3rem;
  border-radius: 30px;
  font-weight: 700;
  background: white;
  color: #0275d8;
}

/*=== GRID SECTION ===*/
.container .col-12 .border-top {
  width: 60px;
  border-width: 3rem;
}

.container h5 {
  font-weight: 700;
}

.container .card {
  box-shadow: -1px 0px 8px -2px rgba(0, 0, 0, 0.75);
}

.container .card:hover {
  box-shadow: -3px 0px 8px -2px rgba(0, 0, 0, 0.75);
}

/*=== CONTENT STYLE JUMBOTRON ===*/

.jumbotron .container .border-top {
  width: 60px;
}

.jumbotron .container .btn-light {
  padding: 0.8rem 3rem;
  border-radius: 30px;
  font-weight: 700;
  background: white;
  color: #0275d8;
}

.jumbotron .container .btn-light:hover {
  padding: 0.8rem 3rem;
  border-radius: 30px;
  font-weight: 700;
  background: #0275d8;
  color: #ffffff;
}

/*=== CONTENT STYLE ===*/

.slider-area .container {
  background: rgb(90, 152, 242);
  border-radius: 15px;
  background: linear-gradient(
    52deg,
    rgba(90, 152, 242, 1) 20%,
    rgba(103, 195, 243, 1) 60%
  );
}

.slider-area .slide-1 {
  display: flex;
  justify-content: start;
  align-items: center;
}

.slider-area .slide-2 {
  display: flex;
  justify-content: start;
  align-items: center;
}

.slider-area .slide-3 {
  display: flex;
  justify-content: start;
  align-items: center;
}

.slider-area .container .border-top {
  color: #ffffff;
  width: 60px;
  margin-top: 20px;
}

.slider-area .container img {
  border-radius: 100%;
  width: 150px;
  border: 8px solid white;
  margin-left: 7rem;
}

.slider-area .container .quote {
  width: 400px;
  margin-left: 150px;
}

/*=== FIXED BACKGROUND IMG ===*/

/*=== FOOTER ===*/

footer {
  margin-top: 100px;
}

footer ul.social {
  list-style-type: none;
  display: flex;
  max-width: 13rem;
  justify-content: center;
  font-size: 20px;
}

footer .container p {
  font-size: 14px;
}

/*=== SOCKET ===*/
/* .socket {
  text-align: center;
  border-top: .05rem solid rgb(0, 0, 0);
}   */
/*============= MEDIA QUERIES =============*/

/* Devices over 992px */
@media (min-width: 992px) {
  /* H1 ANIMATION */

  .container .typing-animation {
    display: inline-block;
    overflow: hidden;
    animation: typing 3s steps(40, end), blink 0.75s step-end 50;
    white-space: nowrap;
    border-right: 1px solid black;
    box-sizing: border-box;
  }

  @keyframes typing {
    from {
      width: 0%;
    }
    to {
      width: 100%;
    }
  }

  @keyframes blink {
    from,
    to {
      border-color: transparent;
    }
    50% {
      border-color: black;
    }
  }
}

/* Devices under 1199px (xl) */
@media (max-width: 1199.98px) {
}

/* Devices under 992px (xl) */
@media (max-width: 991.98px) {
  .container .search,
  .pharmacy,
  .consultation,
  .details,
  .emergency,
  .tracking {
    margin-bottom: 2rem;
  }
}

/* Devices under 768px (md) */
@media (max-width: 767.98px) {
  .container .search {
    margin-top: 2rem;
    margin-bottom: 2rem;
    position: relative;
    right: 15px;
    display: flex;
    justify-content: center;
  }

  .container .pharmacy {
    margin-bottom: 2rem;
    position: relative;
    right: 15px;
    display: flex;
    justify-content: center;
  }

  .container .consultation,
  .details,
  .emergency,
  .tracking {
    margin-bottom: 2rem;
    position: relative;
    right: 15px;
    display: flex;
    justify-content: center;
  }

  /* CAROUSEL */

  .slider-area .slide-1 {
    flex-direction: column;
  }

  .slider-area .slide-2 {
    flex-direction: column;
  }

  .slider-area .slide-3 {
    flex-direction: column;
  }

  .slider-area .philip {
    height: 155px;
    position: relative;
    right: 55px;
    margin-bottom: 30px;
  }

  .slider-area .lacey {
    height: 155px;
    position: relative;
    right: 55px;
    margin-bottom: 30px;
  }

  .slider-area .vaswani {
    height: 155px;
    position: relative;
    right: 55px;
    margin-bottom: 30px;
  }

  .slider-area .philip-bio {
    margin-right: 20px;
    text-align: center;
  }

  .slider-area .lacey-bio {
    margin-right: 20px;
    text-align: center;
  }

  .slider-area .vaswani-bio {
    margin-right: 20px;
    text-align: center;
  }

  .slider-area .quote {
    margin-right: 145px;
    padding: 0 60px;
    text-align: justify;
  }

  footer ul.social {
    list-style-type: none;
    display: flex;
    max-width: 20rem;
    justify-content: center;
    font-size: 20px;
  }


}

/*============ BOOTSTRAP BREAK POINTS:

Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

=============*/

/*-- Bootstrap Mobile Gutter Fix --*/
.row,
.container-fluid {
  margin-left: 0px !important;
  margin-right: 0px !important;
}