/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/


/* =Slider Styles
----------------------------------------------- */


@media (max-width: 575.98px) {
  .slider-caption p {
    font-size: 0.95rem;
    line-height: 1.4;
    padding: 0 15px;
  }
}


@media (max-width: 575.98px) {
  .slider-caption h2 {
    font-size: 1.5rem;
  }


}

  

/* Index buttons */
  
.banner-buttons .btn,
.banner-btn {
  font-family: 'Lato', sans-serif; /* Add Lato */
  font-size: clamp(0.5rem, 1.1vw, 1rem);
  padding: clamp(0.5rem, 1.5vw, 1rem) clamp(1rem, 2vw, 1.5rem);
  letter-spacing: 0.1em; /* Subtle spacing between letters */
  font-weight: 500; /* Bold (adjust if needed) */
}

/* Icon Styles - Smaller and polished */
.banner-buttons .btn i[class^="icon-"],
.banner-btn .banner-icon {
  font-size: clamp(0.5rem, 1.1vw, 1rem); /* Extra small */
  transition: all 0.3s ease;
  margin-right: 0.4em; /* Slightly more space after icon */
  vertical-align: middle;
}

/* Hover Effects */
.banner-buttons .btn:hover i[class^="icon-"],
.banner-btn:hover .banner-icon {
  transform: scale(1.1);
  color: #e74c3c;
}


/* ========================================== */
/* Swiper Background Image with Dark Overlay  */
/* ========================================== */

/* Core Swiper background with overlay */
.swiper-slide-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0; /* Ensures bg stays behind content */
}

/* Dark overlay effect */
.swiper-slide-bg-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2); /* 40% dark overlay */
  z-index: 1;
}

/* Content positioning (above overlay) */
.swiper-slide-content {
  position: relative;
  z-index: 2;
  color: white; /* Ensures readability */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Pagination fix */
.swiper-pagination {
  z-index: 3 !important; /* Above everything */
}


/* ========================================== */
/* Swiper H and P leading  */
/* ========================================== */



/* Reduce bottom margin of h1 */
.less-h1-line-space {
  margin-bottom: 0.3rem !important; /* or whatever spacing you prefer */
  line-height: 0.9 !important; /* optional, if you also want to adjust line height */
   text-shadow: 
    1px 1px 3px rgba(0, 0, 0, 0.3) !important; /* Format: horizontal-offset vertical-offset blur-radius color */
    /* — horizontal-offset: 1px (shadow moves 1px right) */
    /* — vertical-offset: 1px (shadow moves 1px down) */
    /* — blur-radius: 3px (higher = softer shadow) */
    /* — color: rgba(0,0,0,0.3) (black with 30% opacity) */
}

/* Reduce top margin of p */
.less-p-line-space {
  margin-top: 0.7rem !important; /* Adjust this value as needed */
  text-shadow: 
    1px 1px 2px rgba(0, 0, 0, 0.2) !important; /* Same format as above, but lighter */
    /* TIP: To adjust shadow, change: */
    /* — Offsets (e.g., 2px 2px for a bolder shadow) */
    /* — Blur (e.g., 4px for more diffusion) */
    /* — Opacity (e.g., 0.5 for a darker shadow) */
}



/* Slider arrows */


.arrows-icon-only .slider-arrow-left,
.arrows-icon-only .slider-arrow-right {
    background: transparent !important;
}
.arrows-icon-only .slider-arrow-left i,
.arrows-icon-only .slider-arrow-right i {
    font-size: clamp(1rem, 1.3vw, 1rem) !important;}
	
	.arrows-icon-only .slider-arrow-left,
.arrows-icon-only .slider-arrow-right,
.arrows-icon-only .owl-prev,
.arrows-icon-only .owl-next,
.arrows-icon-only .flex-prev,
.arrows-icon-only .flex-next {
    z-index: 1000 !important;
	}
   /*  color: red !important; Force a visible color */




  i.fa,
  i.fas,
  i.far,
  i.fal,
  i.fab {
    filter: grayscale(100%);
    opacity: 0.6; /* Optional: softens the icon look */
  }



/* Option 1: Strict 40vh cap (recommended) */
.custom-max-height {
  max-height: 40vh !important;
  overflow: hidden; /* Optional: Clips overflow content */
}

/* Mobile Scaling */
@media (max-width: 768px) {
    .mobile-slider-scale {
        height: 20vh !important;
        min-height: 120px; /* Adjust as needed */
        background-position: center center !important;
    }
}




.eventpic {
  width: 200px;       /* fixed width for large screens */
  height: 300px;      /* fixed height for large screens */
  object-fit: cover;  /* fill the box, may crop */
  display: block;
  margin: 5px auto;   /* 5px top/bottom/left/right, horizontally centered */
}

/* Mobile responsiveness */
@media (max-width: 767px) {
  .eventpic {
    width: calc(80% - 10px); /* leaves 10px margin on each side */
    height: auto;              /* maintain aspect ratio */
    margin: 5px 10px;          /* top/bottom 5px, left/right 10px */
  }
}