@font-face {
  font-family: 'billieeilish';
  src: url('../fonts/BILLIE-EILISH.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
}

*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Green gradient
3b726c
72bab2

green solid colour
6cb2aa

goldon gradient
885a17
d69b45

goldon solid colour 
96641c */

:root
{
  --colordark:#3a3b42;
  --colorprogresslight:#ffedc5;
  --color1: #885a17;
  --color1-rgb: 206, 148, 64;
  --color2: #d69b45;
  --color2-rgb: 136, 90, 23;
  --color3: #96641c;
  --color4: #6cb2aa;
  --color5: #3b726c;
  --color5-rgb: 59, 114, 108;
  --color6: #72bab2;
  --fontbille: 'billieeilish', sans-serif;
  --fontmont: 'Montserrat', sans-serif;
  --fontpop: 'Poppins', sans-serif;
  --sidebar-w:14rem;
  --sidebar-w-collapsed:3.7rem;
}
.fontbille
{
  font-family: var(--fontbille);
}
.fontmont
{
  font-family: var(--fontmont);
}
.fontpop
{
  font-family: var(--fontpop);
}
[x-cloak] { display: none !important; }
.topbar
{
  background-image: linear-gradient(to bottom, var(--color6), var(--color4));
  background-color: var(--color6);
  
}
.topanchor
{
  transition: all 0.3s;
}
.topanchor:hover
{
background-color: var(--color5);
}

/* Logo */
.logotext-1
{
  font-family: var(--fontbille);
  font-size: 26px;
  color: var(--color1);
}
.logotext-2
{
  font-family: var(--fontmont);
  font-weight: bold;
  font-size: 12px;
  color: var(--color5);
}

.navanchor
{
  font-weight: 500;
  color: #585858;
  transition: all 0.3s;
}

.navanchor:hover,.navanchor.active
{
  color: var(--color4);
}
.circlecreds
{
  transition: all 0.3s;
}
.circlecreds:hover
{
  box-shadow: rgba(17, 12, 46, 0.15) 0px 0px 100px 0px;
}
.register-circle
{
  background-image: linear-gradient(132deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
}

.PrayerTimings ,.rcc_events 
{
  background-image: url(../images/backgrounds/texture.png);
  background-position: center;
  background-size: cover;
}

.how-card {
    flex: 0.5;
    /* width: 250px; */
    transition: all 0.3s ease-in-out;
    /* border-radius: 1rem; */
    overflow: hidden;
    min-height: 70dvh;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    position: relative;
}

/* .how-card:nth-child(2) {
    width: auto;
    flex: 1.2;
    background-color: #0f9d8a;
    color: white;
} */

.how-card:hover {
    width: auto;
    flex: 4 !important;
    background-color: #0f9d8a;
    color: white;
}

.how-card .text-content {
    transition: opacity 0.3s ease;
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: end;
    /* align-items: center; */
    /* text-align: center; */
    /* padding: 1rem; */
}

.how-card .text-content {
    opacity: 0;
}

/* .how-card:nth-child(2) .text-content {
    opacity: 1;
} */

.how-card:hover .text-content {
    opacity: 1;
}

/* .how-card:nth-child(2) .image-content {
    opacity: 0;
} */

.how-card:hover .image-content {
    opacity: 0;
}

.how-text-2
{
  writing-mode: sideways-rl;
  align-content: center;
}

.how-card-mobile {
  flex: 1;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
  padding: 12px 0px;
  background: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  box-shadow: 0 8px 24px rgba(0,0,0,0.05);
}

/* text-content hidden by default */
.how-card-mobile .text-content {
  opacity: 0;
  transition: opacity 0.3s ease;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* hover expand vertically on mobile */
.how-card-mobile:hover {
  min-height: 40dvh;
  color:white;
}

.how-card-mobile:hover .text-content {
  opacity: 1;
}

.how-card-mobile:hover .image-content {
  opacity: 0;
}


.aboutsection
{
  position: relative;
}

.aboutsection::before {
  content: "";
  position: absolute;
  top: 0; /* Top left corner */
  left: 0;
  width: 300px; /* Adjust size */
  height: 300px;
  background-image: url('../images/backgrounds/aboutleft.png');
  background-repeat: no-repeat;
  background-size: contain; /* Keeps aspect ratio */
  opacity: 1;
  z-index: -1;
}

.aboutsection::after {
  content: "";
  position: absolute;
  bottom: 0; /* Bottom right corner */
  right: 0;
  width: 300px; /* Adjust size */
  height: 300px;
  background-image: url('../images/backgrounds/aboutright.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right;
  opacity: 1;
  z-index: -1;
}

/* .salahsection
{
  height: 550px;
  background-image: url(../images/backgrounds/salah.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
} */

.prayercardbox
{
  background-color: white;
  transition: all 0.3s;
}
.prayercardboxwhitesvg
{
  display: none;
  visibility: hidden;
}
.prayercardbox .prayercardboxcolortext 
{
  transition: all 0.3s;
}

.prayercardbox.prayercardboxactive .prayercardboxcolortext
{
  color: white;
}


.prayercardbox.prayercardboxactive .prayercardboxwhitesvg
{
  visibility: visible;
  display: block;
}

.prayercardbox.prayercardboxactive .prayercardboxcolorsvg
{
  display: none;
  visibility: hidden;
}

.prayercardbox.prayercardboxactive
{
  background-image: url(../images/backgrounds/prayerbg_2.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.eventcard
{
  background-color: white;
  transition: all 0.3s;
}
.eventcard .locationlink
{
  color: var(--color5);
}

.eventcard:hover
{
  background-image: linear-gradient(to bottom, var(--color6),var(--color5));
  /* background-color: var(--color2); */
  color: white;
}
.locationlink
{
  transition: all 0.3s;
}
.eventcard:hover .locationlink{
  color: white;
}

.support
{
  background-image: url(../images/backgrounds/strongbg.jpeg);
}
.supportoval
{
  background-image: url(../images/backgrounds/strong.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 0px 0px 180px 180px;
}

.custom-range{
    height:6px;
}
.custom-range::-webkit-slider-runnable-track{
  height:6px; border-radius:999px; background:rgba(234,216,166,.4);
}
.custom-range::-moz-range-track{
  height:6px; border-radius:999px; background:rgba(234,216,166,.4);
}
.custom-range::-webkit-slider-thumb{
  visibility: hidden;
  -webkit-appearance:none; appearance:none; margin-top:-5px; height:16px; width:16px;
  border-radius:999px; background:white; border:1px solid var(--color1); box-shadow:0 1px 2px rgba(0,0,0,.12);
}
.custom-range::-moz-range-thumb{
  height:16px; width:16px; border-radius:999px; background:var(--color1); border:1px solid var(--color1);
  box-shadow:0 1px 2px rgba(0,0,0,.12);
}

.update-card{
    overflow: hidden;
    height: -webkit-fill-available;
    min-height: 56dvh;
    background: white;
    display: flex;
    align-items: end;
    justify-content: start;
    padding: 1.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    position: relative;
}

.joinourcommunitysticker
{
  position: relative;
  overflow: hidden;
  background-color: var(--colordark);
}
.joinourcommunitystickerinner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 300px; /* Adjust size */
  height: 100%;
  background-image: url('../images/backgrounds/joinleft.png');
  background-repeat: no-repeat;
  background-size: contain; /* Keeps aspect ratio */
  opacity: 0.05;
  overflow: hidden;
}

.joinourcommunitystickerinner::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 300px; /* Adjust size */
  height: 100%;
  background-image: url('../images/backgrounds/joinright.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right;
  opacity: 0.05;
  overflow: hidden;
}
.register-circle-input
{
  background-image: linear-gradient(132deg, rgba(var(--color2-rgb), 1), rgba(var(--color1-rgb), 1));
}

.servingcommunity
{
  position: relative;
  overflow: hidden;
  /* background-image: linear-gradient(to top, rgba(var(--color5-rgb,0.1)), rgba(var(--color1-rgb,0.1))),url(../images/extras/family.png); */
  background-image: linear-gradient(to top, rgba(var(--color5-rgb),0.8), rgba(var(--color5-rgb),0.8)),url(../images/extras/family.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.AskImam
{
  background-image: url(../images/backgrounds/askimam2.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


.ramadansection {
    background-image: url(../images/backgrounds/sideflower.png);
    background-position: center;
    background-repeat: repeat;
    background-size: contain;
}

.flipclockcontainer {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12rem;
	font-family: var(--fontmont);
	font-weight: 800;
}
.flip-clock {
	display: flex;
	position: relative;
	width: 80px;
	height: 80px;
	aspect-ratio: 1/1;
	line-height: 80px;
	font-size: 48px;
	text-align: center;
	color: #e9e9e9;
}

.flip-clock .digital
{
  text-shadow:
		2px 2px 3px rgba(0,0,0,0.6),
		-2px -2px 3px rgba(255,255,255,0.3),
		0 1px 0 rgba(255,255,255,0.4),
		0 -1px 0 rgba(0,0,0,0.7);
}

.flip-clock .digital:before,
.flip-clock .digital:after {
	content: "" attr(data-number) "";
	position: absolute;
	left: 0;
	right: 0;
	background-color: var(--color5);
	overflow: hidden;
	box-sizing: border-box;
}
.flip-clock .digital:before {
	top: 0;
	bottom: 50%;
  border-radius: 1rem 1rem 0 0;
	border-bottom: solid 0.5px white;
}
.flip-clock .digital:after {
	top: 50%;
	bottom: 0;
  border-radius: 0 0 1rem 1rem;
	line-height: 0;
	border-top: solid 0.5px white;
}
.flip-clock.down .back:before,
.flip-clock.down .front:after {
	z-index: 1;
}
.flip-clock.down .back:after {
	z-index: 2;
	transform-origin: 50% 0;
	transform: perspective(52rem) rotate(180deg);
}
.flip-clock.down .front:before {
	z-index: 3;
}

.flip-clock.down.go .front:before,
.flip-clock.down.go .back:after {
	will-change: transform;
}

.flip-clock.down.go .front:before {
	transform-origin: 50% 100%;
	animation: frontFlipDown 0.6s ease-in-out both;
	backface-visibility: hidden;
}
.flip-clock.down.go .back:after {
	animation: backFlipDown 0.6s ease-in-out both;
	backface-visibility: hidden;
}
@keyframes frontFlipDown {
	0% {
		transform: perspective(52rem) rotateX(0deg);
	}
	100% {
		transform: perspective(52rem) rotateX(180deg);
	}
}
@keyframes backFlipDown {
	0% {
		transform: perspective(52rem) rotateX(180deg);
	}
	100% {
		transform: perspective(52rem) rotateX(0deg);
	}
}

.flip-clock:not(.go) .front:before,
.flip-clock:not(.go) .back:after {
	will-change: auto;
}
.ramadansvg
{
  filter: drop-shadow(2px 1px 0px black);
}
.highlight td{ background:var(--color5); color:#fff; font-weight:600; }
.highlight th{ background:var(--color5); color:#fff; font-weight:600; }

.bar{
background: linear-gradient(to bottom, color-mix(in oklab, var(--color5) 92%, white 8%), var(--color5));
box-shadow:
inset 0 1px 0 rgba(255,255,255,.35),
inset 0 -2px 0 rgba(0,0,0,.15),
0 2px 6px rgba(0,0,0,.25);
}
.panel{
box-shadow: inset 0 1px 0 rgba(0,0,0,.05);
}
/* ========================================================================================================================= */
.prayertimingbox
{
  background-color: var(--color5);
}
/* ========================================================================================================================= */
/* Event Calendar */

.calendar-wrapper {
  background: white;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  margin: 0 auto;
  overflow: hidden;
}

/* 🧭 Custom Header */
.calendar-header-custom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px 10px;
  border-bottom: 1px solid #e5e7eb;
}

.calendar-header-custom h2 {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.calendar-header-custom h2 span {
  font-size: 16px;
  color: #6b7280;
  font-weight: 500;
}

tr.calendar-header .calendar-header-day {
  text-transform: uppercase;
  color: #121212 !important;
  font-family: var(--fontpop);
  font-size: 12px !important;
  font-weight: 600;
}
.calendar-body
{
  border: 1px solid #eee;
}

.month-select {
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 14px;
  background: white;
  cursor: pointer;
}

.calendar-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e5e7eb;
}

.nav-left button,
.nav-right button {
  
  cursor: pointer;
  transition: all 0.2s;
}


.evo-calendar {
  border: none;
  box-shadow: none;
}

.calendar-table tbody tr:nth-child(1) {
  display: none;
}

.calendar-inner {
  padding: 0px !important;
}
tr.calendar-body .calendar-day .day
{
  border-radius: 0 !important;
  height: auto !important;
  width: auto !important;
  /* color: auto !important; */
  font-family: var(--fontpop);
  font-size: 14px;
  font-weight: 600;
}
tr.calendar-body .calendar-day .day.calendar-active, tr.calendar-body .calendar-day .day.calendar-active:hover
 {
    color: var(--color6) !important;
    border-color: white !important;
}
tr.calendar-body .calendar-day
{
  /* padding: 0px !important; */
  border: 1px solid #eee !important;
}
.event-indicator>.type-bullet>div
{
  width: 5px !important;
    height: 5px !important;
    border-radius: 0 !important;
}

.highlight {
    color: var(--color6);
  }


.businesssticker
{
  position: relative;
  overflow: hidden;
}
.businessstickerinner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 300px; /* Adjust size */
  height: 100%;
  background-image: url('../images/backgrounds/joinleft.png');
  background-repeat: no-repeat;
  background-size: contain; /* Keeps aspect ratio */
  opacity: 0.05;
  overflow: hidden;
}

.businessstickerinner::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 300px; /* Adjust size */
  height: 100%;
  background-image: url('../images/backgrounds/joinright.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right;
  opacity: 0.05;
  overflow: hidden;
}


/* ========================================================================================================================== */
/* Admin */
.glass{background:rgba(255,255,255,.85);backdrop-filter:blur(8px)}
    .animate-soft{transition:all .25s ease}

    /* Sidebar sizing & overflow rules */
    #sidebar{
      width:var(--sidebar-w);
      transition:width .25s ease,transform .25s ease;
      overflow:hidden;            /* no whole-aside scroll */
    }
    .sidebar-collapsed #sidebar{width:var(--sidebar-w-collapsed)}

    /* Only the menu area scrolls when expanded */
    .nav-scroll{overflow-y:auto}
    .sidebar-collapsed .nav-scroll{overflow:visible} /* no scroll when collapsed */

    .main{margin-left:var(--sidebar-w);transition:margin-left .25s ease}
    .sidebar-collapsed .main{margin-left:var(--sidebar-w-collapsed)}

    /* Hide labels when collapsed */
    .label{opacity:1;transform:translateX(0);transition:opacity .2s,transform .2s}
    .sidebar-collapsed .label{opacity:0;transform:translateX(-6px);pointer-events:none}

    /* Active link demo */
    .nav-active{background:var(--color2);color:#fff}

    /* Buttons / z-index */
    #collapseBtn{z-index:70}
    #expandBtn{display:none}
    .sidebar-collapsed #expandBtn{display:inline-flex}
    .sidebar-collapsed #collapseBtn{display:none}

    /* Expanded: accordion submenu */
    .submenu{overflow:hidden;max-height:0;transition:max-height .3s ease}

    /* Collapsed: fixed-position flyout independent from sidebar */
    .flyout{
      position:fixed;
      left:calc(var(--sidebar-w-collapsed) + 8px);
      top:0;                     /* set via JS */
      width:240px;
      max-height:min(70vh, 420px);
      overflow:auto;
      background:#fff;
      color:#0f172a;
      border:1px solid #e2e8f0;
      border-radius:12px;
      box-shadow:0 12px 28px rgba(2,8,23,.18);
      padding:6px;
      z-index:60;
      display:none;
    }
    .flyout.open{display:block}

    /* Nice scrollbar for menu & flyout (webkit) */
    .nav-scroll::-webkit-scrollbar,.flyout::-webkit-scrollbar{width:8px}
    .nav-scroll::-webkit-scrollbar-thumb,.flyout::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}

    /* Logo lockup tweaks */
    .brand-badge{
      /* background:linear-gradient(135deg, var(--color2) 0%, var(--color3) 100%);
      color:#0f172a; */
      display: none;
      width:36px;height:36px;min-width:36px;
      display:flex;align-items:center;justify-content:center;
      border-radius:10px;
      box-shadow:0 4px 14px rgba(202,155,64,.35);
    }
    .brand-img{height:32px;width:auto}
    .sidebar-collapsed .brand-text{display:none}
    .sidebar-collapsed .brand-badge{display:flex}