/* HTML: <div class="loader"></div> */
.loader {
    width: 50px;
    aspect-ratio: 1;
    display: grid;
    border: 4px solid #0000;
    border-radius: 50%;
    border-right-color:#ff6c03;
    animation: l15 1s infinite linear;
  }
  .loader::before,
  .loader::after {    
    content: "";
    grid-area: 1/1;
    margin: 2px;
    border: inherit;
    border-radius: 50%;
    animation: l15 2s infinite;
  }
  .loader::after {
    margin: 8px;
    animation-duration: 3s;
  }
  @keyframes l15{ 
    100%{transform: rotate(1turn)}
  }

/* home carosel */
/* #myCarousel {
  margin-top: 50px;
  overflow: hidden;
  
}

@media (max-width: 768px) {
  .carousel-inner .carousel-item>div {
      display: none;
  }

  .carousel-inner .carousel-item>div:first-child {
      display: block;
  }
}

.carousel-inner .carousel-item {
  transition: transform 0.5s ease;
  
}
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-start,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
  display: flex;
}

@media (min-width: 768px) {

  .carousel-inner .carousel-item-right.active,
  .carousel-inner .carousel-item-next,
  .carousel-item-next:not(.carousel-item-start) {
      transform: translateX(25%) !important;
  }

  .carousel-inner .carousel-item-left.active,
  .carousel-item-prev:not(.carousel-item-end),
  .active.carousel-item-start,
  .carousel-item-prev:not(.carousel-item-end) {
      transform: translateX(-25%) !important;
  }

  .carousel-item-next.carousel-item-start,
  .active.carousel-item-end {
      transform: translateX(0) !important;
  }

  .carousel-inner .carousel-item-prev,
  .carousel-item-prev:not(.carousel-item-end) {
      transform: translateX(-25%) !important;
  }
} */


#login_btn{

    background-color: #ff8409;
    color: #fff; 
    border-radius: 4px;
    border: none;
    width: 230px;
    
    
}

#login_btn:hover {
    background-color: #080c43; 
    color: #ffffff;
  }

.nav-link.tab-panel.active{

    background-color: rgb(13, 17, 75);
    color: #fff;
  }

.nav-link.tab-panel{
    color: rgb(13, 17, 75);;
  }

.modal-header{
   
    align-items: center;
    justify-content: center;
    
}

#reg_btn{
    background-color: rgb(249, 98, 5);
    color: #fff; 
    border-radius: 4px;
    border: none;
    width: 230px;
}

#reg_btn:hover{
  background-color: rgb(8, 12, 67); 
    color: #ffffff;
}


/* .inputof{
  display: flex; Use flexbox
  /* justify-content: center; Align items horizontally in center */
  /* align-items: center; Align items vertically in center */
/* }  */