/* ======================================================
   Table of Contents:
   1. Font Declarations
   2. Global Variables and Base Styles
   3. Header and Navigation
   4. Hero and Marquee Sections
   5. Statistics Section
   6. Seven Continents Section
   7. Dignitaries Section
   8. Role Models Section
   9. Footer Styles
   10. Media Queries and Responsive Adjustments
   11. Accessibility Enhancements
   ====================================================== */

/* ======================================================
   1. Font Declarations
   ====================================================== */
@font-face {
  font-family: "BruumFY-Bold";
  src: url("../fonts/BruumFY-Bold.otf") format("opentype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "BruumFY-Light";
  src: url("../fonts/BruumFY-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "BruumFY-Regular";
  src: url("../fonts/BruumFY-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

/* ======================================================
   2. Global Variables and Base Styles
   ====================================================== */
:root {
  --primary-color: #4a2f7b;
  --secondary-color: #8d3393;
  --text-color: #333;
  --light-bg: #f8f9fa;
  --accent-color: #e91e63;
  --border-color: #e0e0e0;
  --red-color: #9f0710;

  /* Spacing values for consistent layout */
  --section-spacing: 3rem;
  --element-spacing: 1.5rem;
  --container-padding: 2rem;
  --text-spacing: 1rem;
}

body {
  font-family: "BruumFY-Regular", Arial, sans-serif;
  color: var(--text-color);
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "BruumFY-Bold", Arial, sans-serif;
}

a:focus,
button:focus {
  outline: 0px solid var(--secondary-color);
  outline-offset: 0 0 0 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ======================================================
   3. Header and Navigation
   ====================================================== */
/* Fix for header image cropping */
.banner {
  width: 100%;
  overflow: visible; /* Ensure no cropping */
  height: auto; /* Allow natural height */
  text-align: center; /* Center the image */
}

.banner img {
  width: 80%; /* Reduce width to 80% of container */
  /* max-width: 1200px;  Optional: set maximum width */
  height: auto !important; /* Maintain aspect ratio */
  object-fit: contain !important; /* Show entire image without cropping */
  max-height: none !important; /* Remove any height restrictions */
  display: inline-block; /* Allow centering */
  margin: 0 auto; /* Center the image */
}

/* Center the link container */
.banner a {
  display: block;
  width: 100%;
  text-align: center;
}

/* Navigation Styles */
.navbar-container {
  position: relative;
}

/* Mobile Toggle Button */
.mobile-toggle {
  display: none;
  background: none;
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 1100;
  position: absolute;
  right: 15px;
  top: 11px;
}

.mobile-toggle:focus {
  outline: none;
}

.mobile-toggle-primary {
  color: var(--text-color);
  top: 67px;
}

/* Top Navigation Bar */
.top-nav {
  background-color: var(--red-color);
  transition: all 0.3s ease;
}

.top-nav .nav-link {
  color: var(--light-bg);
  font-size: 1.063rem;
  padding: 0.1rem 0.5rem;
  text-transform: none;
  font-family: "BruumFY-Regular", Arial, sans-serif;
  transition: color 0.3s ease;
}

.top-nav .nav-link:hover {
  color: var(--light-bg);
}

/* Secondary Navigation */
.secondary-nav {
  background-color: transparent;
  border-bottom: 1px solid var(--red-color);
  transition: all 0.3s ease;
  position: relative;
}
/* .theme-bold {
  font-weight: 500;
  font-family: "BruumFY-Bold", Arial, sans-serif;
} */

.secondary-nav .nav-link {
  color: var(--text-color);
  font-size: 1.063rem;
  padding: 0.6rem 0.9rem;
  font-family: "BruumFY-Regular", Arial, sans-serif;
  text-transform: none;
  transition: opacity 0.3s ease;
}

.secondary-nav .nav-link:hover {
  opacity: 0.85;
}

/* Logo */
.logo-text {
  font-family: "BruumFY-Bold", Arial, sans-serif;
  color: #000;
  font-size: 1.5rem;
  text-transform: none;
  letter-spacing: 1px;
}

.nav1 {
  position: absolute;
  top: -360px;
  right: 1px;
  height: 100%;
  display: flex;
  align-items: center;
  background: none;
}
/* .nav1 {
  width: 100%;
  margin-bottom: 20px;
  position: relative;
  top: 0;
  right: 0;
  display: block;
} */
/* .nav1 .langs {
  position: relative;
  z-index: 100;
  margin-top: 8px;
  top: 140px;
} */

.top-banner {
  background-color: var(--red-color);
  color: white;
  font-family: "BruumFY-Bold", Arial, sans-serif;
  font-size: 0.95rem;
  letter-spacing: 1px;
}

.banner-text {
  font-weight: bold;
}

/* ======================================================
   4. Hero and Marquee Sections
   ====================================================== */
/* Hero section */
.hero-section {
  position: relative;
  margin-bottom: 20px;
  border-bottom: 0px solid var(--red-color);
  overflow: hidden;
}

.hero-image {
  width: 100%;
  height: auto;
  max-height: 877px;
  object-fit: cover;
  display: block;
}
.nav1 .langs span a {
  color: #000;
  font-family: BruumFY-Regular;
  text-decoration: none;
  font-weight: 600;
}
.nav1 .langs span.mx-2 {
  border-left: 2px solid;
  padding-left: 8px;
}
/* Marquee Section */
.marquee-section {
  position: relative;
  z-index: 10;
  background-color: #f5f5f5;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
  margin-top: 0;
}

.marquee-container {
  overflow: hidden;
  width: 100%;
}

.marquee-content {
  white-space: nowrap;
  animation: marquee 20s linear infinite;
  display: inline-block;
}

.marquee-content span {
  font-family: "BruumFY-Bold", Arial, sans-serif;
  color: #000;
}

@keyframes marquee {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.gallery-btn {
  display: inline-block;
  background-color: #1b75bb;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  text-decoration: none;
  font-family: "BruumFY-Bold", Arial, sans-serif;
  transition: background-color 0.3s ease;
  float: right;
}

.gallery-btn:hover,
.gallery-btn:focus {
  background-color: var(--secondary-color);
  color: white;
  text-decoration: none;
}

.gallery-btn i {
  margin-right: 5px;
}

/* ======================================================
   5. Statistics Section
   ====================================================== */
.stats-section {
  position: relative;
  z-index: 5;
  margin-top: 15px;
  padding: 2.5rem 0;
  background-color: #fff;
  box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.05);
}

.stat-item {
  margin-bottom: 1.5rem;
  border: 1px solid #f0f0f0;
  padding: 1.5rem 1rem;
  border-radius: 5px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

.stat-icon {
  font-size: 1.8rem;
  color: #000;
  margin-bottom: 1rem;
  line-height: 1;
}

.stat-number {
  font-family: "BruumFY-Bold", Arial, sans-serif;
  font-size: 1.8rem;
  color: #ff2500;
  margin-bottom: 0.3rem;
  line-height: 1.1;
}

.stat-text {
  font-family: "BruumFY-Light", Arial, sans-serif;
  color: #000;
  font-size: 14px;
  text-align: center;
  line-height: 1.3;
}

.stat-item:hover {
  transform: translateY(-5px);
}

/* ======================================================
   9. Footer Styles
   ====================================================== */
/* Red separator between content and footer */
.footer-separator {
  height: 5px;
  background-color: var(--red-color);
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Footer structure */
.footer {
  background-color: #f5f5f5;
  padding: 3rem 0 1rem;
  border-top: 0;
  position: relative;
  background-color: #15161b;
}

.footer-content-wrapper {
  display: flex;
  flex-wrap: nowrap;
  gap: 40px;
  padding: 1rem 0;
}

.footer-logo-column {
  width: 20%;
  /* min-width: 200px; */
  /* padding-right: 20px; */
}

.footer-logo-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-right: 2rem;
  border-right: 1px solid #e0e0e0;
}

.logo-img {
  max-width: 100%;
  height: auto;
  margin-bottom: 1rem;
}

/* Footer menu structure */
.footer-menu-wrapper {
  width: 80%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer-menu-row {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.footer-menu-column {
  flex: 1;
  min-width: 180px;
}

.footer h4 {
  color: #000;
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  position: relative;
}

.footer-menu {
  list-style: none;
  padding-left: 0;
}

.footer-menu li {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
}

.footer-menu li i {
  color: #000;
  font-size: 0.8rem;
  margin-right: 0.5rem;
  min-width: 10px;
}

.footer-menu a {
  color: var(--text-color);
  text-decoration: none;
  font-family: "BruumFY-Light", Arial, sans-serif;
  font-size: 1rem;
  transition: color 0.2s ease;
}

.footer-menu a:hover,
.footer-menu a:focus {
  color: var(--red-color);
  text-decoration: none;
}

.footer-logo-container .logo-text {
  font-size: 2rem;
  color: #000;
  font-weight: bold;
  margin-bottom: 1rem;
}

.footer-tagline {
  font-size: 1rem;
  color: var(--text-color);
  margin-bottom: 1rem;
}

/* Footer bottom section */
.footer-bottom {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid #e0e0e0;
}

.footer-newsletter-form {
  max-width: 500px;
}

.footer-newsletter-form .form-control {
  border: 1px solid #ddd;
  padding: 0.6rem;
  font-size: 1rem;
}

.footer-newsletter-form .btn-primary {
  background-color: #000;
  border-color: #000;
  padding: 0.6rem 1.5rem;
  font-size: 1rem;
}

/* Social Media Icons */
.social-icons {
  margin-top: 1rem;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: white;
  border-radius: 50%;
  margin-left: 0.5rem;
  transition: all 0.3s ease;
  text-decoration: none;
}

.social-icon:hover,
.social-icon:focus {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  color: white;
  text-decoration: none;
}

/* Social icon brand colors */
.social-icon-facebook {
  background-color: #3b5998;
}
.social-icon-facebook:hover,
.social-icon-facebook:focus {
  background-color: #2d4373;
}

.social-icon-twitter {
  background-color: #1da1f2;
}
.social-icon-twitter:hover,
.social-icon-twitter:focus {
  background-color: #0c85d0;
}

.social-icon-instagram {
  background: radial-gradient(
    circle at 30% 107%,
    #fdf497 0%,
    #fdf497 5%,
    #fd5949 45%,
    #d6249f 60%,
    #285aeb 90%
  );
}
.social-icon-instagram:hover,
.social-icon-instagram:focus {
  background: radial-gradient(
    circle at 30% 107%,
    #e6da8a 0%,
    #e6da8a 5%,
    #e44c3d 45%,
    #b91f85 60%,
    #234abd 90%
  );
}

.social-icon-linkedin {
  background-color: #0077b5;
}
.social-icon-linkedin:hover,
.social-icon-linkedin:focus {
  background-color: #005582;
}

.social-icon-youtube {
  background-color: #ff0000;
}
.social-icon-youtube:hover,
.social-icon-youtube:focus {
  background-color: #cc0000;
}

/* Copyright */
.copyright {
  text-align: center;
  font-size: 0.85rem;
  background-color: #000;
  color: #fff;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #fff;
}
.contact-text p {
  padding: 10px;
  margin: 5px;
  padding-bottom: 5px;
}

.contact-text .line {
  border-bottom: 1px solid #d9d7d7;

  margin: 22px 0;
}

/* ======================================================
   10. Media Queries and Responsive Adjustments
   ====================================================== */
/* Large devices (desktops, less than 1200px) */
@media (max-width: 1200px) {
  .seven-continents-content {
    gap: 30px;
  }

  .center-row-container {
    padding: 0 80px;
  }

  .section-title,
  .section-title-center {
    font-size: 1.4rem;
  }

  .years-badge {
    width: 80px;
    height: 80px;
  }

  .years-badge-left {
    left: -40px;
  }

  .years-badge-right {
    right: -40px;
  }

  .years-number {
    font-size: 26px;
  }

  .years-text {
    font-size: 12px;
  }

  .years-edge-left {
    left: -30px;
  }

  .years-edge-right {
    right: -30px;
  }
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 992px) {
  /* Mobile menu toggle display */
  .mobile-toggle {
    display: block;
  }

  /* Navigation menu adjustments */
  .top-nav .d-flex,
  .secondary-nav .d-flex {
    flex-direction: column;
    align-items: flex-start;
    display: none !important;
  }

  .top-nav.expanded .d-flex,
  .secondary-nav.expanded .d-flex {
    display: flex !important;
  }

  .top-nav .nav-link,
  .secondary-nav .nav-link {
    width: 100%;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }

  .secondary-nav .nav-link {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* Seven continents section adjustments */
  .seven-continents-content {
    flex-direction: column;
  }

  .seven-continents-image,
  .seven-continents-text {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .seven-continents-text {
    margin-top: 2rem;
  }

  .section-title-center::after {
    left: 0;
    width: 50%;
  }

  /* Dignitaries section adjustments */
  .dignitaries-grid-container {
    grid-template-columns: 1fr 1fr;
  }

  .grid-cell {
    grid-area: auto !important;
  }

  .empty-cell {
    display: none;
  }

  .years-badge,
  .years-edge-left,
  .years-edge-right {
    position: static;
    transform: none;
    display: block;
    margin: 0 auto 20px;
  }

  .center-row-container {
    padding: 0 20px;
  }

  .years-container {
    padding: 20px 0;
  }

  /* Stat item adjustments */
  .stat-item {
    padding: 1rem 0.5rem;
  }

  .stat-icon {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }

  .stat-number {
    font-size: 1.5rem;
  }

  /* Footer adjustments */
  .footer-content-wrapper {
    flex-direction: column;
    gap: 30px;
  }

  .footer-logo-column {
    width: 100%;
    padding-right: 0;
  }

  .footer-logo-container {
    border-right: none;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
    padding-right: 0;
  }

  .footer-menu-wrapper {
    width: 100%;
  }
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 768px) {
  /* .nav1 .langs {
    top: 0px;
  } */
  .nav1 {
    position: relative;
    top: 0;
    right: 0;
    height: 100%;
  }
  /* Content sections */
  .section-title {
    font-size: 1.4rem;
    padding: 0 0.5rem;
  }

  .section-title-center {
    font-size: 1.4rem;
  }

  .marquee-section .gallery-btn {
    float: none;
    margin-top: 10px;
    display: block;
    text-align: center;
  }

  /* Dignitaries section adjustments */
  .dignitaries-grid-container {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .small-flex {
    flex-direction: column;
  }

  .small-img,
  .small-caption {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .small-caption {
    text-align: center;
    padding: 10px 0;
  }

  /* Role model adjustments */
  .role-model-box {
    padding: 1.5rem;
  }

  .red-divider {
    margin: 0 auto 1.5rem;
  }

  /* Footer adjustments */
  .footer-logo-container .logo-img {
    max-width: 100px;
    height: auto;
    margin: 0 auto 1rem;
  }

  .footer-logo-container .logo-text {
    font-size: 1.5rem;
    text-align: center;
  }

  .footer-tagline {
    font-size: 0.8rem;
    text-align: center;
  }

  .footer-menu-column {
    flex: 0 0 100%;
  }

  .social-icons {
    margin-top: 2rem;
    text-align: center;
  }

  .footer-bottom [class*="col-"] {
    text-align: center;
  }

  .footer-newsletter-form {
    margin: 0 auto;
  }
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 576px) {
  /* Stats section adjustments */
  .stats-section .col-6 {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  .stat-item {
    padding: 10px 5px;
    margin-bottom: 10px;
    min-height: 120px;
  }

  .stat-icon {
    font-size: 1.2rem;
    margin-bottom: 0.3rem;
  }

  .stat-number {
    font-size: 1.2rem;
    margin-bottom: 0.1rem;
  }

  .stat-text {
    font-size: 0.75rem;
  }

  /* Section title adjustments */
  .section-title,
  .section-title-center {
    font-size: 1.4rem;
  }

  /* Other mobile adjustments */
  .role-model-box {
    padding: 1.5rem 1rem;
  }

  .role-model-box h3 {
    font-size: 1.1rem;
  }

  .footer-menu li {
    font-size: 0.8rem;
  }

  /* Reduce heading sizes on mobile */
  h2 {
    font-size: 1.5rem;
  }

  h3 {
    font-size: 1.3rem;
  }

  /* Form elements adjustments */
  .footer-newsletter-form .form-control,
  .footer-newsletter-form .btn-primary {
    font-size: 0.85rem;
    padding: 0.5rem;
  }
}

/* ======================================================
   11. Accessibility Enhancements
   ====================================================== */
/* High contrast mode */
@media (prefers-contrast: more) {
  :root {
    --primary-color: #3a1d6e;
    --secondary-color: #7a1e82;
    --text-color: #000;
    --red-color: #c10e15;
  }

  .stat-number {
    color: #e00000;
  }

  .secondary-nav .nav-link {
    font-weight: bold;
  }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .marquee-content {
    animation: none;
  }

  .stat-item:hover,
  .role-model-box:hover,
  .social-icon:hover {
    transform: none;
  }
}