:root{--accent:hsl(249, 88%, 67%);--muted:#6c757d}

/* Changed the background color of the whole page here */
body{background:#e8e6e6;color:#111}

.ticker{background:#e13505;color:#fff;padding:.5rem 0;overflow:hidden}
.ticker .inner{display:inline-block;white-space:nowrap;padding-left:100%;animation:slide 18s linear infinite}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.video-thumb{height:170px;background:#000;color:#ededed;border-radius:.5rem;display:flex;align-items:center;justify-content:center;cursor:pointer}
.whatsapp-float{position:fixed;right:18px;bottom:18px;background:#25d366;color:#fff;width:56px;height:56px;border-radius:50%;display:flex;align-items-center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.12);z-index:1050}
.logo{width:80px;height:80px;border-radius:8px;background:linear-gradient(135deg,var(--accent),#3ab0ff);display:flex;align-items:center;justify-content:center;color:#ef0707;font-weight:700}
.lang-btn.active{font-weight:700}

/* --- Added Styles --- */

.bulletin-block {
  background-color: #e4c515;
}

#headline {
  color: #c43030;
}

#subhead {
  color: #658611 !important; 
}

.facebook-btn {
  background-color: #1877F2;
  color: white;
}

.twitter-btn {
  background-color: #1DA1F2;
  color: white;
}

.youtube-btn {
  background-color: #FF0000;
  color: white;
}

.instagram-btn {
  background-color: #FF0000;
  color: white;
}

.linkedin-btn {
  background-color: #331fe7;
  color: white;
}

.WhatsApp-btn {
  background-color: #38d410;
  color: white;
}

.facebook-btn:hover, .twitter-btn:hover, .youtube-btn, .instagram-btn:hover {
  color: white;
  opacity: 0.9;
}

/* --- NEW FOOTER STYLES --- */
footer {
  background-color: #46c8f0; /* A dark grey, almost black */
  color: #001264; /* A light off-white color for the text */
}

/* This makes sure the light grey text in the footer is readable */
footer .text-muted {
  color: #ffffff !important;
}

/* This makes sure links in the footer are also white */
footer a {
  color: #426588;
}

/* New CSS to change the color of the page names in the navbar */
.navbar-nav .nav-link {
  color: #1b06cf !important; /* This is a dark gray color */
}

.navbar-nav .nav-link:hover {
  color: #c70000 !important; /* This makes the color darker on hover */
}
  
/* --- New Animation --- */
@keyframes ascend {
  from {
    transform: translateY(25px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.ascend-animation {
  animation: ascend 1s ease-out forwards, pulse 12s ease-in-out 1s infinite;
  color: #8000ff; /* A vibrant yellow color */
}

/* --- New Footer Font Sizes --- */
footer .fw-bold {
  font-size: 1.1rem; /* Adjusts the font size of the bold headings */
}

footer .small {
  font-size: 0.95rem !important; /* Makes the smaller text slightly larger */
}