/* ==========================================
   1. HOME SLIDER STYLES
   ========================================== */

/* Slider Main Container */
/* Slider Base Structure */
.slider {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  margin: 0 auto !important;
  background-color: #000;
}

.myslide {
  display: none;
  position: relative !important;
  width: 100% !important;
}

.myslide img {
  width: 100% !important;
  height: 400px !important;
  object-fit: cover !important;
  display: block !important;
}

/* Slider Overlay Text */
.myslide .txt {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  padding: 20px !important;
  background: rgba(0, 0, 0, 0.6) !important;
  color: #fff !important;
  text-align: center !important;
  box-sizing: border-box !important;
  z-index: 2 !important;
}

.myslide .txt h1 {
  color: #4caf50 !important;
  margin: 0 !important;
  font-size: 1.8rem !important;
}

/* Prev / Next Arrows (በ Slider ውስጥ ብቻ እንዲወሰኑ) */
.slider .prev, 
.slider .next {
  cursor: pointer !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  padding: 10px 15px !important;
  color: #fff !important;
  font-weight: bold !important;
  font-size: 18px !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
  border-radius: 50% !important;
  user-select: none !important;
  z-index: 10 !important;
  text-decoration: none !important;
}

.slider .prev { left: 15px !important; }
.slider .next { right: 15px !important; }

/* Dots Container */
.slider .dotsbox {
  position: absolute !important;
  bottom: 15px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  text-align: center !important;
  z-index: 10 !important;
}

.slider .dot {
  cursor: pointer !important;
  height: 10px !important;
  width: 10px !important;
  margin: 0 4px !important;
  background-color: rgba(255, 255, 255, 0.5) !important;
  border-radius: 50% !important;
  display: inline-block !important;
  transition: all 0.3s ease !important;
}

.slider .dot.active, 
.slider .dot:hover {
  background-color: #4caf50 !important;
  width: 20px !important;
  border-radius: 5px !important;
}

/* Slide Animation */
.fade {
  animation-name: fade;
  animation-duration: 1s;
}

@keyframes fade {
  from { opacity: 0.4; } 
  to { opacity: 1; }
}

/* Mobile Responsive */
@media screen and (max-width: 768px) {
  .myslide img { height: 260px !important; }
  .myslide .txt h1 { font-size: 1.3rem !important; }
}


/* ==========================================
   2. AWARDS SECTION STYLES
   ========================================== */

#awards img.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 80%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
}

#awards img.center:hover {
  transform: scale(1.02);
}

#awards h3.headline {
  color: #008000;
  font-size: 1.4rem;
  margin-top: 30px;
  margin-bottom: 15px;
}

.margin-bottom-20 {
  margin-bottom: 25px !important;
}


/* ==========================================
   3. MOBILE & TABLET RESPONSIVE STYLES
   ========================================== */

@media screen and (max-width: 768px) {
  /* Slider Mobile Fixes */
  .myslide img { height: 320px !important; }
  .myslide .txt h1 { font-size: 1.5rem !important; }
  .myslide .txt p { font-size: 0.95rem !important; }

  /* Awards Mobile Fixes */
  #awards img.center { max-width: 95%; }
  #awards h3.headline { font-size: 1.1rem; }
}

@media screen and (max-width: 480px) {
  .myslide img { height: 240px !important; }
  .myslide .txt h1 { font-size: 1.2rem !important; }
  .myslide .txt p { font-size: 0.85rem !important; }
  .prev, .next { padding: 8px 12px !important; font-size: 16px !important; }
}