.top-bar {
  background-color: #09142A;   /* corrected red background */
  color: #fff;                 /* white text */
  font-size: 0.9rem;
  border-radius: 10px;         /* rounded rectangle edges */
  margin: 10px;                /* spacing around the bar */
  padding: 8px 15px;
}

.top-bar .btn-login {
  border: 1px solid #fff;
  color: #fff;
  padding: 2px 12px;
  font-size: 0.8rem;
  border-radius: 20px;         /* pill-shaped button */
  transition: 0.3s;
	background-color: #004CF8;
}

.top-bar .btn-login:hover {
  background-color: #fff;
  color: #09142A;              /* invert colors on hover */
}



/* Main navbar */
.main-navbar {
  background-color: #09142A; /* red theme background */
}

.main-navbar .navbar-brand {
  color: #fff;
  font-size: 1.5rem;
  letter-spacing: 1px;
  font-weight: bold;
}

.main-navbar .navbar-brand:hover {
  color: #ffc107; /* golden hover effect */
}

.main-navbar .nav-link {
  color: #fff;
  margin-left: 15px;
  font-weight: 500;
  transition: 0.3s;
}

.main-navbar .nav-link:hover {
  color: #ffc107; /* golden hover effect */
}
/* Upcoming Events section */
.upcoming-events {
  margin-top: -40px;          /* pulls section upward */
  background-color: #ff0000;  /* same red as navbar */
  color: #ffffff;             /* white text for contrast */
  padding: 0;
  border-radius: 0;
}

/* Full screen carousel (desktop) */
#eventsCarousel,
#eventsCarousel .carousel-inner,
#eventsCarousel .carousel-item {
  height: auto;              /* full viewport height */
}

#eventsCarousel .carousel-item img {
  width: 100%;                /* full width */
  height: 100%;               /* full height */
  object-fit: cover;          /* fill box, crop edges */
  object-position: center;    /* keep centered */
}

/* Tablet adjustments */
@media (max-width: 991px) {
  #eventsCarousel,
  #eventsCarousel .carousel-inner,
  #eventsCarousel .carousel-item {
    height: 70vh;             /* reduce height */
  }
  #eventsCarousel .carousel-item img {
    height: 70vh;
  }
}

/* Mobile adjustments */
@media (max-width: 576px) {
  #eventsCarousel,
  #eventsCarousel .carousel-inner,
  #eventsCarousel .carousel-item {
    height: 50vh;             /* smaller height */
  }
  #eventsCarousel .carousel-item img {
    height: 50vh;
  }
}

.upcoming-events h2 {
  color: #fff;                 /* ensure heading is white */
  font-weight: bold;
  margin-top: -50px !important;
}

.upcoming-events .carousel-caption p {
  color: #fff !important;   /* force white text */
  font-size: 1rem;          /* adjust size if too small */
  display: block;           /* ensure it’s not hidden */
}




/* Animate captions sliding in from the right */
.carousel-caption {
  background: rgba(0,76,248, 0.6); /* red with 60% opacity */
  padding: 15px 20px;              /* space around text */
  border-radius: 8px;              /* smooth corners */
  display: inline-block;           /* shrink to fit text */
  opacity: 0;                      /* start hidden for fade */
  animation: fadeInCaption 1.2s ease forwards;
  animation-delay: 0.5s;
}
@media (max-width: 576px) {
  .carousel-caption {
    font-size: 0.9rem;       /* smaller text */
    padding: 10px;           /* tighter box */
  }
  .btn-readmore {
    padding: 8px 16px;       /* smaller button */
    font-size: 0.85rem;
  }
}


@keyframes fadeInCaption {
  from {
    opacity: 0;
    transform: translateY(15px);   /* subtle upward motion */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.carousel-caption h1,
.carousel-caption p {
  color: #fff;                     /* white text on red */
  margin: 0;
}

.about-us-section {
  background-color: #004CF8;   /* light grey background */
  width: 100%;
  padding: 5px 5px;
   text-align: center;  /* centers the title */
}

.about-us-title {
  background-color: #09142A;   /* red rectangle */
  color: #fff;
  padding: 5px 10px;
  border-radius: 12px;
  display: inline-block;
  font-weight: bold;
  margin: 0 auto;              /* centers on the page */
}


.about-us-image {
  max-width: 100%;             /* responsive image */
  height: auto;                /* keep proportions */
  border-radius: 12px;         /* rounded corners */
  box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* subtle shadow */
}
.about-arfk-section {
  background-color: #004CF8;   /* light grey background */
  width: 100%;
  padding: 5px 5px;
}

.about-arfk-title {
  background-color: #09142A;   /* red header rectangle */
  color: #fff;
  padding: 3px 6px;
  border-radius: 12px;
  display: inline-block;
  font-weight: bold;
  text-transform: uppercase;
}

.about-arfk-box {
  background-color: #ffffff;   /* white content box */
  padding: 25px;
  border-radius: 12px;
  max-width: 900px;            /* keep text readable */
  box-shadow: 0 4px 10px rgba(0,0,0,0.2); /* subtle shadow */
  text-align: justify;         /* neat paragraph alignment */
}

.social-icons a {
  font-size: 1.5rem;   /* larger icons */
  transition: color 0.3s ease;
}

.social-icons a:hover {
  color: #ff0000;      /* red hover effect */
}




.btn-readmore {
  background-color: #ffffff;   /* white background */
  color: #ff0000;              /* red text to match theme */
  padding: 10px 20px;
  border-radius: 25px;         /* rounded edges */
  text-decoration: none;       /* remove underline */
  font-weight: bold;
  display: inline-block;
  margin-top: 10px;
  transition: all 0.3s ease;
}

.btn-readmore:hover {
  background-color: #09142A;   /* red background on hover */
  color: #ffffff;              /* white text on hover */
}




.upcoming-btn {
  background-color: #fff;   /* white button */
  color: #09142A;           /* red text */
  font-size: 0.5rem;
  font-weight: bold;
  padding: 10px 30px;
  border: none;
  border-radius: 30px;      /* pill shape */
  transition: 0.3s;
  margin-top: 50px;
}

.upcoming-btn:hover {
  background-color: #ffc107; /* gold hover */
  color: #fff;
}


body {
  background-color: #004CF8 !important;  /* force red background */
  color: #fff;
  margin: 0;
  padding: 0;
}

/* Make Bootstrap containers transparent */
.container {
  background-color: transparent !important;
}
/* Organization Title below navbar */
.org-title {
  background: url("images/seed.png") no-repeat center center;
  background-size: 50% auto;     /* scales image to fill */
  background-color: #09142A;  /* fallback deep red */
  color: #fff;
  font-weight: bold;
  letter-spacing: 1px;
  width: 100%;
  text-align: center;
  padding: 40px 20px 100px;
  position: relative;
}

/* Overlay to keep text readable */
.org-title::before {
  content: "";
  position: absolute;
  inset: 0; /* covers entire block */
  background-color: rgba(9,20,42); /* semi-transparent red overlay */
  z-index: 1;
}

.org-title h1,
.org-title button {
  position: relative;
  z-index: 2; /* ensures text/button sit above overlay */
}

/* Apply the curve only on desktop screens */
@media (min-width: 992px) {
  .org-title {
    clip-path: path("M0,0 C80,510 960,50 1440,200 L1440,0 L0,0 Z");
  }
}

/* On tablets and mobile, keep it flat or use a simpler curve */
@media (max-width: 991px) {
  .org-title {
    clip-path: none;   /* removes the curve */
    padding-bottom: 60px; /* keep space for button */
   
  }
}




.org-title h1 {
  font-size: 2.8rem;
  margin: 0;
  font-weight: 900;           /* extra bold */
}

/* Logo inside navbar */
.logo {
  height: 70px;       /* adjust size */
  width: auto;        /* keep proportions */
}
html {
  scroll-behavior: smooth;
}
/* Highlight animation */
@keyframes sectionHighlight {
  from { background-color: #ffe6e6; }  /* light red glow */
  to   { background-color: #f0f0f0; }  /* back to normal */
}

.about-us-section.highlight {
  animation: sectionHighlight 2s ease;
}
/* reusable header css */
/* Header styling */
.arfk-header {
  background-color: #ff0000; /* Bright red background */
}

/* Top bar */
.arfk-header .top-bar {
  background-color: #ff0000;
  font-size: 0.9rem;
}

/* Logo image */
.arfk-header .logo-img {
  height: 50px;
  width: auto;
  border-radius: 50%; /* circular logo */
}

/* Navbar links */
.arfk-header .navbar-nav .nav-link {
  color: #fff;
  font-weight: 500;
  margin-left: 1rem;
}

.arfk-header .navbar-nav .nav-link:hover {
  color: gold; /* hover effect */
}

/* Login button */
.arfk-header .btn-outline-light {
  border: 1px solid #fff;
  font-weight: 500;
}

/*  end of reusable header css */

/*  about us page content css */
.about-extra {
  background-color: #fff;
}

.about-block {
  background-color: #f8f9fa; /* light grey card */
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  color: #212529; /* dark text for readability */
}

.about-block-title {
  color: #09142A; /* deep red headings */
  font-weight: bold;
  margin-bottom: 15px;
}

.about-block p,
.about-block li {
  color: #212529; /* ensure all text inside is dark */
  font-size: 1rem;
  line-height: 1.6;
}

.about-block ol {
  padding-left: 20px;
  text-align: left;
}

/*  end of end of bout us page conent css */

/*  logo on about us page */
/* Emblem block layout */
.emblem-block {
  display: flex;
  align-items: flex-start;
}

.emblem-logo .logo-img {
  max-width: 120px;   /* adjust size as needed */
  height: auto;
  border-radius: 10px; /* optional rounded corners */
}

.emblem-text {
  flex: 1; /* take remaining space */
  color: #212529; /* ensure readable text */
}
/*  end of logo on about us page */

/* Leadership  page section */
.leadership-section {
  background-color: #f8f9fa; /* red background */
  color: #fff;               /* white text for contrast */
}

.section-title {
  background-color: #ff0000;   /* bright red rectangle */
  color: #fff;                 /* white text */
  font-weight: bold;
  display: inline-block;       /* shrink box to fit text */
  padding: 10px 20px;          /* spacing inside rectangle */
  border-radius: 12px;         /* rounded corners */
  margin-bottom: 30px;         /* spacing below title */
}

/* Parent container centers the rectangle */
.container.text-center {
  text-align: center;
}

/* Leader cards */
/* Make all leader cards equal height */
.leader-card {
  background-color: #004CF8; /* deep red card */
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  height: 100%;              /* stretch card to full column height */
  display: flex;             /* use flexbox */
  flex-direction: column;    /* stack content vertically */
  justify-content: space-between; /* distribute space evenly */
  transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
}

.leader-card:hover {
  transform: translateY(-10px);       /* lift card upward */
  box-shadow: 0 8px 16px rgba(0,0,0,0.4); /* deeper shadow */
  border: 2px solid #ffc107;          /* golden glow border */
}

/* Leader images */
.leader-img {
  width: 150px;          /* fixed width */
  height: 150px;         /* fixed height */
  object-fit: cover;     /* crop to fit without distortion */
  object-position: top center; /* keep faces visible */
  border-radius: 50%;    /* circular portrait */
  border: 3px solid #fff;
  margin: 0 auto;        /* center image inside card */
  display: block;
}




.leader-card:hover .leader-img {
  transform: scale(1.1); /* zoom image slightly */
}

/* Leader name */
.leader-name {
  font-weight: bold;
  margin-top: 10px;
  color: #ffc107; /* golden highlight for names */
  transition: color 0.3s ease;
}

.leader-card:hover .leader-name {
  color: #fff; /* change to white on hover */
}

/* Leader role */
.leader-role {
  font-size: 0.9rem;
  color: #fff;
}

/*  end of Leadership  page section */

/*  conatct us page */
.contact-section {
  background-color: #f8f9fa; /* light background */
}

.section-title {
  background-color: #ff0000; /* red rectangle */
  color: #fff;
  font-weight: bold;
  display: inline-block;
  padding: 10px 20px;
  border-radius: 12px;
  margin-bottom: 30px;
}

.contact-info-card,
.contact-form-card {
  background-color: #AE0004; /* deep red cards */
  color: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.contact-heading {
  font-weight: bold;
  margin-bottom: 15px;
  color: #ffc107; /* golden highlight */
}

.btn-contact {
  background-color: #ffc107;
  color: #000;
  font-weight: bold;
  border-radius: 20px;
  padding: 8px 20px;
  transition: all 0.3s ease;
}

.btn-contact:hover {
  background-color: #ff0000;
  color: #fff;
}
 
/* end of  conatct us page */
/* whatsapp button */
.btn-whatsapp {
  background-color: #25D366; /* WhatsApp green */
  color: #fff;
  font-weight: bold;
  border-radius: 20px;
  padding: 10px 20px;
  display: inline-block;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-whatsapp:hover {
  background-color: #128C7E; /* darker green on hover */
  color: #fff;
}
/* end of whatsapp button */


/* Floating WhatsApp button on footer */
.whatsapp-float {
  position: fixed;       /* stays in place while scrolling */
  bottom: 20px;          /* distance from bottom */
  right: 20px;            /* distance from left */
  background-color: #25D366; /* WhatsApp green */
  color: #fff;
  font-size: 2rem;       /* icon size */
  padding: 12px;
  border-radius: 50%;    /* circular button */
  box-shadow: 0 4px 4px rgba(0,0,0,0.3);
  z-index: 1000;         /* stays above other elements */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.whatsapp-float:hover {
  transform: scale(1.1); /* zoom effect */
  box-shadow: 0 6px 12px rgba(0,0,0,0.4);
  color: #fff;
}
/* end of Floating WhatsApp button on footer */
/* constitution page */
.constitution-section {
  background-color: #f8f9fa;
}

.section-title {
  background-color:  #004CF8;
  color: #fff;
  font-weight: bold;
  display: inline-block;
  padding: 10px 20px;
  border-radius: 12px;
  margin-bottom: 30px;
}

.constitution-block {
  background-color: 
#09142A;
  color: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.block-title {
  color: #004CF8; /* golden highlight */
  font-weight: bold;
  margin-bottom: 15px;
}
/* end of constitution page */

/* DOWNLOAD BUTTON IN THE CONSTITITUIN PAGE */
.btn-download {
  background-color: #004CF8; /* ARFK red */
  color: #fff;
  border-radius: 25px; /* circular corners */
  padding: 8px 18px;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.2s ease;
  margin-left: auto; /* 👈 pushes button to far right */
  float: right;
}

.btn-download:hover {
  background-color: #09142A; /* darker red on hover */
  transform: scale(1.05); /* slight zoom effect */
  color: #fff;
}

/* END OFDOWNLOAD BUTTON IN THE CONSTITITUIN PAGE */
/* Support page */

.hero-section h2 {
  color: #b30000; /* ARFK red */
}

.table-danger {
  background-color: #b30000 !important;
}

.donation-box {
  border: 2px solid #09142A;       /* ARFK red border */
  background-color: #c1bcbc;       /* pure white background for contrast */
  padding: 20px;
  border-radius: 25px;             /* rounded corners */
  display: inline-block;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* subtle shadow */
  margin-top: 15px;                /* spacing above */
}

.donation-box strong {
  color: #b30000;                  /* red highlight for labels */
}
.lead {
  color: #333 !important; /* dark grey for readability */
}



/* End of Support page */
/* Log in modal */
/* Modal box styling */
.login-modal {
  border-radius: 15px;
  background-color: #f8f9fa; /* light grey background */
  color: #333;
}

/* Logo inside modal */
.login-logo {
  height: 60px;
  width: auto;
}

/* Login button in header */
.btn-login {
  background-color: #AE0004; /* deep ARFK red */
  color: #fff;
  border-radius: 25px;
  padding: 6px 16px;
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-login:hover {
  background-color: #ff0000; /* bright red hover */
  transform: scale(1.05);
  color: #fff;
}
/* end of Log in modal */
/* ADMIN CONTROL PANEL  */
body {
  background-color: #f8f9fa; /* light grey */
}

.card-header {
  background-color: #AE0004; /* deep ARFK red */
  color: #fff;
}

.btn-danger {
  background-color: #AE0004;
  border: none;
  font-weight: bold;
  color: #fff;
}

.btn-danger:hover {
  background-color: #ff0000; /* bright red hover */
  transform: scale(1.05);
}

/* END OF ADMIN CONTROL PANEL  */