/* width */
::-webkit-scrollbar {
    width: 10px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    background: #f1f1f1;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #555;
  }

  .cc-parallax {
    /* The image used */
    background-image: url("/front/assets/img/bg-management.jpg");

    /* Set a specific height */
    min-height: 500px;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

.cc-item{
    height: 450px;
}

.cc-image{
 height: 100%;
 /* filter: brightness(0.7); */
 object-fit: cover;
}

.nav-overlay{
    background: rgb(0,82,255);
background: linear-gradient(41deg, rgba(0,82,255,0.9472163865546218) 0%, rgba(71,155,255,0.9780287114845938) 100%);
}

.cc-overlay{
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5634628851540616) 80%, rgba(0,0,0,0.8127626050420168) 100%);
}

.cc-overlay-invert{
    background: rgb(1, 40, 112);
    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5634628851540616) 80%, rgba(0,0,0,0.8127626050420168) 100%);
}

/* If the screen size is 601px wide or more, set the font-size of <div> to 80px */
@media screen and (min-width: 601px) {
    .school-name {
        font-size: 24px;

    }
    .school-sub-heading {
         font-size: 18px;
    }

    .offcanvas-body ul li a {
        color: rgb(255, 255, 255);
       }

       .offcanvas-body ul li a:hover {
        color: rgb(214, 216, 255);
       }
  }

  /* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
  @media screen and (max-width: 600px) {
    .school-name {
        font-size: 20px;
    }
    .school-sub-heading {
        font-size: 14px;
   }

   .offcanvas-body ul li a {
    color: black;
   }

   .offcanvas-body ul li a:hover {
    color: rgb(24, 24, 24);
   }

   .navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color:  black;
}
  }