@font-face {
    font-family: 'MyCustomFont1';
    src: url('./fonts/Serotiva-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
  }
  
  body {
    font-family: 'MyCustomFont1', sans-serif; 
      margin: 0;
      padding: 0;
      background-color: black;
      color: #4a148c;
  
  }
  
 
  .navbar {
    background: transparent;
    z-index: 20;
    position: fixed;
    width: 100%;
    top: 0;
    background-color: rgba(0, 0, 0, 0.9);

  }
  
  #navbar-nav {
    background-color: rgba(0, 0, 0, 0.9);
    padding: 10px;
    display: none; 
    position: absolute;
    top: 100%; 
    justify-content: center;
    align-items: center;
    display: flex;
    margin: auto;
  }
  
  .navbar-nav.show {
    display: block; 
  }
  
  .navbar-nav .nav-link {
    color: white !important;
    text-transform: uppercase;
    transition: color 0.3s ease-in-out;
    padding: 5px 10px;
    text-shadow: 
      2px 2px 5px rgba(0, 0, 0, 0.4), 
      4px 4px 10px rgba(0, 0, 0, 0.3), 
      6px 6px 15px rgba(0, 0, 0, 0.2);
    justify-content: center;
    align-items: center;
    display: flex;
    margin-left: 20px;

  }
  
  .navbar-nav .nav-link:hover {
    color: #4a148c;
  }
  
  .navbar-toggler {
    border: 1px solid white !important;
  }
  
  .navbar-toggler-icon {
    background-image: url('./images/toggles/open.webp') !important;
  }
  
  .navbar-toggler.active .navbar-toggler-icon {
    background-image: url('./images/toggles/close.webp') !important;
  }
  
  @media (min-width: 992px) {
    .navbar-nav {
      display: flex; 
      position: static; 
      background: transparent; 
      padding: 0; 
    }
  
    .navbar-nav .nav-link {
      padding: 0;
    }
  }

  
  @media (max-width: 768px) {
    .logo {
      position: fixed;
      top: 10px;
      left: 10px; 
      z-index: 1000;
    }
    .translate-icon {
      font-size: 1.2rem;
      justify-content: center;
      align-items: center;
      display: flex;
      margin: auto;
      text-align: center;
      margin-left: 5%;
    }
  }

  
.side-img {
    position: absolute;
    width: 30px; 
    height: 30px; 
    object-fit: contain;
    z-index: 2;
  }
  
  .side-img.left {
    left: -40px; 
    top: 50%;
    transform: translateY(-50%);
  }
  
  .side-img.right {
    right: -40px; 
    top: 50%;
    transform: translateY(-50%);
  }
  



@keyframes bounceInLeft {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    60% {
        transform: translateX(30px);
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes zoomIn {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes rotateIn {
    0% {
        transform: rotate(30deg);
        opacity: 0;
    }
    100% {
        transform: rotate(0);
        opacity: 1;
    }
}

.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
}

.bounceInLeft {
    animation-name: bounceInLeft;
}

.fadeIn {
    animation-name: fadeIn;
}

.fadeInLeft {
    animation-name: fadeInLeft;
}

.fadeInRight {
    animation-name: fadeInRight;
}

.zoomIn {
    animation-name: zoomIn;
}

.rotateIn {
    animation-name: rotateIn;
}

#owner {
    color: #4a148c; 
    background-color: black !important; 

}
#owner h3, #owner p {
    opacity: 0; 
}

[data-aos="fade-left"] {
    opacity: 1; 
    transform: translateX(0);
}

[data-aos="fade-left"].aos-animate {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 1s ease, transform 1s ease;
}

.lead{
    color: white;
}

@media (max-width: 767px) {
  #about{
    margin-top: 80px;
  }
    .img-fluid {
        width: 80%;
        height: auto;
    }

    .lead {
        font-size: 1rem;
    }

    .display-4 {
        font-size: 2rem;
    }

    .display-5 {
        font-size: 1.75rem;
    }
}


.footer {
    background-color: black; 
    color: #fff;           
    text-align: center;    
    padding: 10px 20px;    
    font-size: 12px;       
  }
  
  .footer .container {
    max-width: 1200px;   
    margin: 0 auto;    
  }
  
  @media (max-width: 768px) {
    .footer {
      font-size: 8px;    
      padding: 8px 8px;  
    }
  }