body {
      font-family: 'Segoe UI', sans-serif;
      background-color: #fdfaf6;
    }
/*navbar styling*/
    .navbar {
      background-color: rgba(0, 0, 0, 0.9);
    }

    .navbar-brand {
      font-family: 'Playfair Display', serif;
      font-size: 1.5rem;
    }

    .navbar-nav .nav-link {
      color: #fff !important;
      font-weight: 500;
      transition: all 0.3s ease;
    }

    .navbar-nav .nav-link:hover {
      color: #ffd700 !important;
      transform: scale(1.05);
    }

    .dropdown-menu {
      background-color: #222;
    }

    .dropdown-item {
      color: #fff;
    }

    .dropdown-item:hover {
      background-color: #444;
      color: #ffd700;
    }
    
    @media (hover: hover) {
  .nav-item.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; /* optional: remove animation gap */
  }

  .nav-item.dropdown .dropdown-toggle::after {
    transform: rotate(180deg); /* optional: rotate arrow on hover */
  }
}


@media (min-width: 992px) { /* Bootstrap's lg breakpoint */
  .navbar .dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; /* optional: remove dropdown jump */
  }

  .dropdown-menu {
    margin-top: 0; /* Ensures smooth appearance */
  }
}

/*navbar styling ends*/
/*hero styling*/
    .hero-section {
      background: url('../images/olorooforo.jpeg') no-repeat center top/cover;
      height: 100vh;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      background-attachment: fixed;
    }

    .hero-overlay {
      position: absolute;
      top: 0; left: 0;
      height: 100%;
      width: 100%;
      background-color: rgba(0, 0, 0, 0.7);
      z-index: 1;
    }

    .hero-content {
      position: relative;
      z-index: 2;
      color: white;
      padding: 20px;
    }

    .hero-content h1 {
      font-family: 'Playfair Display', serif;
      font-size: 3rem;
      color: gold;
      text-shadow: 1px 1px 4px black;
    }

    .hero-content p {
      font-size: 1.2rem;
      max-width: 700px;
      margin: auto;
      color: #eee;
    }

    .btn-hero {
      background-color: gold;
      border: none;
      padding: 10px 20px;
      font-weight: bold;
      color: #222;
      margin-top: 20px;
      transition: 0.3s ease;
    }

    .btn-hero:hover {
      background-color: #d4af37;
      color: #fff;
    }
    
    /*footer*/
    .footer-link {
  color: #ddd;
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.3s ease;
}
.footer-link a{
    color: #fff !important;
}

.footer-link:hover {
  color: #ffc107;
  text-decoration: none;
}

.footer-area p, .footer-area li {
  font-size: 0.95rem;
}

.social-icons a {
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}

.social-icons a:hover {
  transform: scale(1.2);
  color: #fff !important;
}