html {
      scroll-behavior: smooth;
    }  

    body, html {
      margin: 0;
      padding: 0;
      scroll-behavior: smooth;
      font-family: 'Manrope', sans-serif !important;
    }

    h1, h2, h3, p, .navbar-brand {
    font-family: 'Manrope', sans-serif !important;
  }

  /* Hero */
.hero {
  background: url('../images/Medrull_HomePage_1080x1920.png') center center / cover no-repeat;
  min-height: 70vh;
  margin-top: 20px;
  color: white;
  position: relative;
  display: flex;
  align-items: flex-end;     /* we press it to the bottom */
  justify-content: flex-start; /* press down to the left */
  text-align: left;          /* text to the left */
  background-attachment: scroll;
  padding: 2rem;             /* a little internal indentation */
}

@media (max-width: 768px) {
  .hero {
    background-position: center top;
    min-height: 50vh;
    padding: 1rem;
  }

.hero h1,
.hero p {
  letter-spacing: -1px;    /* reducing the distance between letters */
  font-weight: 700; /* fat */
  text-transform: uppercase;
  line-height: 1.0 !important; /* rigidly redefining bootstrap */
  }

  #about p {
  font-size: 2 rem;
  line-height: 1.5 !important; /* rigidly redefining bootstrap */
}
  
}

.hero h1,
.hero p {
  letter-spacing: -1px;    /* reducing the distance between letters */
  font-weight: 700; /* fat */
  text-transform: uppercase;
  line-height: 1.0 !important; /* rigidly redefining bootstrap */
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  /* if need darkening, add:
  background: rgba(0,0,0,0.4);
  */
}

.hero .container {
  position: relative;
  z-index: 1;
  padding: 0; /* extra padding at the top */
}

.hero-logo {
  max-width: 96px; /* under the size */
  height: auto;
}


#about p {
  line-height: 1.2 !important; /* rigidly redefining bootstrap */
  font-size: 1.2rem;
  line-height: 1.5;
}

#about h3 {
  font-size: 1.5rem;
}

#about h5 {
  font-size: 1.5rem;
}

    /* Portrait carousel */
    .carousel-inner {    
      width: 100%;
      max-width: 500px;
      margin: auto;
    }

    .carousel-item {
      aspect-ratio: 3 / 4;
      overflow: hidden;
      background: #000;
    }

    .carousel-item img {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }

    @media (max-width: 576px) {
      .carousel-inner {
        max-width: 400px;

      }
    }

    /*Pagination*/
    .pagination-custom .page-link {
    background-color: #343a40;
    color: #fff;
    border-color: #343a40;
  }

  .pagination-custom .page-link:hover {
    background-color: #495057;
    border-color: #495057;
  }

  .pagination-custom .page-item.active .page-link {
    background-color: #000;
    border-color: #000;
  }

  .pagination-custom .page-item.disabled .page-link {
    background-color: #6c757d;
    opacity: 0.6;
  }

/* Carousel Arrows */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: none; /* removes the inversion */
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 16 16'%3E%3Cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
}
.carousel-control-next-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 1.646a.5.5 0 0 1 0 .708L10.293 8l-5.647 5.646a.5.5 0 0 1 .708.708l6-6a.5.5 0 0 1 0-.708l-6-6a.5.5 0 0 1-.708 0z'/%3E%3C/svg%3E");
}

footer {
    background-color: #000; /* Black background */
    color: #fff; /* White text */
  }

  footer h5 {
    color: #fff;
  }

  footer p,
  footer li,
  footer a {
    color: #ccc;
    font-size: 14px;
  }

  footer a:hover {
    color: #fff;
    text-decoration: underline;
  }

  footer hr {
    border-top: 1px solid #444;
  }

  footer .text-muted {
    color: #aaa !important;
  }

/*contacts*/
 .feature-icon {
    font-size: 3rem;
    color: #0d6efd; /* Basic blue Bootstrap */
  }

  .feature-box {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #fff;
  }

  .feature-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  }

  .feature-box h5 {
    font-weight: 600;
  }

/*adress*/
  .address-icon {
    font-size: 1rem; /* standard size for desktop */
    vertical-align: middle;
  }

  @media (max-width: 576px) {
    .address-icon {
      font-size: 0.8rem; /* smaller size for mobile phones */
    }
  }

  .pagination-custom .page-item.active .page-link {
  background-color: #ffffff;
  border-color: #495057;
  color:#000000;
}

.pagination-custom .page-item.disabled .page-link {
  background-color: #000000;
  opacity: 0.9;
}

/*contacts*/
 .feature-icon {
    font-size: 3rem;
    color: #0d6efd; /* Basic blue Bootstrap */
  }

  .feature-box {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #fff;
  }

  .feature-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  }

  .feature-box h5 {
    font-weight: 600;
  }

  .pb-2 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

/*adress*/
  .address-icon {
    font-size: 1rem; /* standard size for desktop */
    vertical-align: middle;
  }

  @media (max-width: 576px) {
    .address-icon {
      font-size: 0.8rem; /* smaller size for mobile phones */
    }
  }

.custom-link {
  color: #000000; /* color */
  text-decoration: none; /* without underscores */
  font-weight: bold; 
}

.custom-link:hover {
  color: #a4161a;       /* different color on hover */
  text-decoration: underline; /* underlining when hovering over */
}