/* Custom styles for Shajara landing page */

/* General styles */
html {
  scroll-behavior: smooth;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.navbar-item:hover{
background-color: #ffc107 !important;
}
.navbar-item:focus{
  background-color: #ffc107 !important;
  }
/* Hero section */
.hero.is-primary {
  background: linear-gradient(135deg, #222222 0%, #000000 100%);
}

/* Value boxes */
.value-box {
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.value-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.value-box .icon {
  color: #ffc107;
}

/* Service cards */
.service-card {
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.service-card .icon {
  color: #ffc107;
}

.service-card .media-left {
  margin-right: 1rem;
}

/* Footer styles */
.footer {
  background-color: #f5f5f5;
}

.footer ul {
  list-style: none;
  margin-left: 0;
}

.footer ul li {
  margin-bottom: 0.5rem;
}

.footer ul li a {
  color: #333333;
}

.footer ul li a:hover {
  color: #ffc107;
}

/* Contact section */
.has-background-primary {
  background: linear-gradient(135deg, #222222 0%, #000000 100%) !important;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
  .hero-body {
    padding: 3rem 1.5rem;
  }

  .section {
    padding: 3rem 1.5rem;
  }
}

/* Navbar adjustments */
.navbar.is-primary {
  background: linear-gradient(90deg, #222222 0%, #000000 100%);
}

/* Add some spacing between sections */
.section {
  padding: 5rem 1.5rem;
}

/* Custom button styles */
.button.is-primary {
  background-color: #ffc107;
  color: #000000;
}

.button.is-primary:hover {
  background-color: #ffca28;
}

/* Title accents */
.title {
  color: #222222;
}

.section h2.title:after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  background-color: #ffc107;
  margin: 15px auto 0;
}

/* Service card highlights */
.service-card:hover .title {
  color: #ffc107;
}

/* Yellow accents */
.has-text-accent {
  color: #ffc107 !important;
}

.has-background-accent {
  background-color: #ffc107 !important;
}