* {
  font-family:  Times New Roman;
}

.bg-science {
	background-color: #fff8fa	;
}
.bg-infos{
   background-color: #f7faff;
}
.bg-lox{
  background-color:#fffbef;
}


.input-group-text {
	text-align: center;
	width: 185px;
}
/* login  */

.bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }

      .b-example-divider {
        height: 3rem;
        background-color: rgba(0, 0, 0, .1);
        border: solid rgba(0, 0, 0, .15);
        border-width: 1px 0;
        box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
      }

      .b-example-vr {
        flex-shrink: 0;
        width: 1.5rem;
        height: 100vh;
      }

      .bi {
        vertical-align: -.125em;
        fill: currentColor;
      }

      .nav-scroller {
        position: relative;
        z-index: 2;
        height: 2.75rem;
        overflow-y: hidden;
      }

      .nav-scroller .nav {
        display: flex;
        flex-wrap: nowrap;
        padding-bottom: 1rem;
        margin-top: -1px;
        overflow-x: auto;
        text-align: center;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
      }
      a.btn-log {
      	color: white;
      	background-color: #184383;
      }
      
      .hidden-text-test .hidden-text {
          display: none;
      }
      
        .More:hover {
        color: #882222;

    }
    .More {
        color: #882222;
        text-decoration: none;
        font-weight: bold;
    

      }
    .datatitled {
    text-decoration: none;
    font-size: 30px;
    font-weight: bold;
    color: white !important;
}


/*For header*/
    /* Add your custom CSS styles for the header here */
    .custom-header {
         background-color: rgba(255 , 255 , 255, 0.8); /* Adjust the last value (0.8) for opacity (0.0 to 1.0) */
        color: #fff; /* Default text color (e.g., white) */
        padding: 15px;
        transition: background-color 1s ease; /* Smoothly transition the background color over 1 second */
    }

    /* CSS for the slow-motion animation */
@keyframes changeLogoText {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0;
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Apply the animation to the logo text */
.logo-text {
  animation: changeLogoText 10s infinite; /* 10 seconds animation with infinite loop */
}


 /* CSS to show the button only on small devices */
  @media (max-width: 992px) {
    #hide-menu-button {
      display: block;
    }
  }
.newGallery{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.3rem;
}
.newGallery img{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover
}




/*Its for navbar*/

.navbar-toggler{
  border:0;
}

.navbar-toggler:focus,
.navbar-togger:active,
.navbar-toggler-icon:focus{
  outline: none;
  box-shadow: none;
  border: 0;
}

.toggler-icon{
  width: 30px;
  height: 3px;
  background-color: #e74c3c;
  display: block;
  transition: all 0.2s;
}

.middle-bar{
  margin: 5px auto;
}

.navbar-toggler .top-bar{
  transform: rotate(40deg);
  transform-origin: 10% 10%;

}
.navbar-toggler .middle-bar{
  opacity: 0;
  filter: alpha(opacity=0);
}
.navbar-toggler .bottom-bar{
  transform: rotate(-45deg);
  transform-origin: 10% 10%;
}

.navbar-toggler.collapsed .top-bar{
  transform: rotate(0);
}
.navbar-toggler.collapsed .middle-bar{
  opacity: 1;
  filter: alpha(opacity=100);
  }
.navbar-toggler.collapsed .bottom-bar{
  transform: rotate(0);
}

.navbar-toggler.collapsed .toggler-icon{
  background-color: #777777
}