/*---------------------------------------------------------
  Basic Styles
---------------------------------------------------------*/
body {
    margin: 0;
    padding: 0;
    font-family: 'Varela Round', sans-serif;
    background-color: #F0EDED;
    color: #354b5e;
}

p, li {
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 28px;
    color: #666;
    list-style: none;
}

/*---------------------------------------------------------
  Header
---------------------------------------------------------*/
header, .navbar {
    margin: 0;
    padding: 0;
    width: 100%;
}

.logo {
    position: relative;
    top: 0;
    left: 5px;
    border-bottom: none;
}

/*---------------------------------------------------------
  Carousel Fullscreen
---------------------------------------------------------*/
.carousel-fullscreen,
.carousel-fullscreen .carousel-inner,
.carousel-fullscreen .carousel-item {
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
}

.carousel-fullscreen .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6), 
                0 -10px 30px rgba(0,0,0,0.6),
                0 0 50px rgba(0,0,0,0.5);
}

.carousel-caption {
    background: rgba(0, 0, 0, 0.4);
    padding: 15px 25px;
    border-radius: 10px;
}

.carousel-caption h5 {
    color: #ffffff;
    font-size: 2rem;
    font-weight: bold;
}

.carousel-fullscreen {
    overflow: visible;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 60px;
    height: 60px;
}

/* Remove top margin from carousel */
.carousel {
    margin: 0;
    padding: 0;
    top: 0;
}

/*---------------------------------------------------------
  Buttons
---------------------------------------------------------*/
/* Transparent buttons on images */
.content-block .button-main {
    background: transparent !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

/* Standard buttons hover */
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.btn:hover,
.btn-theme:hover,
.form-btn:hover,
.btn-block:hover,
.btn-tertiary:hover {
    background-color: #02125D !important;
    color: #ffffff !important;
    opacity: 0.9;
}

/* Standard buttons default */
button,
input[type="button"],
input[type="submit"],
.btn,
.btn-theme,
.form-btn,
.btn-block,
.btn-tertiary {
    background-color: #02125D;
    color: #ffffff;
    border: none;
}

/*---------------------------------------------------------
  Footer
---------------------------------------------------------*/
footer {
    width: 100%;
    background: #395B71;
    color: white;
}

/*---------------------------------------------------------
  Misc
---------------------------------------------------------*/
a:hover {
    text-decoration: none;
}
/* Make carousel fullscreen and flush with header */
.carousel-fullscreen,
.carousel-fullscreen .carousel-inner,
.carousel-fullscreen .carousel-item {
    height: 100vh;      /* full viewport height */
    width: 100vw;       /* full viewport width */
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Ensure images cover container without overflow */
.carousel-fullscreen .carousel-item img {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    display: block;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6),
                0 -10px 30px rgba(0,0,0,0.6),
                0 0 50px rgba(0,0,0,0.5); /* shadow all sides */
}

/* Remove any default body margins/paddings to prevent gap */
body, html {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* prevents horizontal scroll */
}

/* Optional: style carousel caption */
.carousel-caption {
    background: rgba(0, 0, 0, 0.4);
    padding: 15px 25px;
    border-radius: 10px;
}
.btn-donate {
    background: #FF3B3B;       /* bright red */
    font-weight: bold;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.btn-donate::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.2);
    transform: skewX(-20deg);
    transition: all 0.5s ease;
}

.btn-donate:hover {
    background: #FF1C1C;
    transform: scale(1.05);
}

.btn-donate:hover::before {
    left: 100%;
}
/* Make radio buttons larger and bold, labels normal */
.category-radio {
    width: 18px;
    height: 18px;
    accent-color: #721213; /* red */
    border: 2px solid #000000;
    cursor: pointer;
}

/* Optional: make sure label text aligns nicely */
.form-check-label {
    display: block;
    margin-top: 1px;
}
<style>
/* Make titles bold, prominent */
.service-card .card-title {
    font-size: 17px;
    font-weight: 700;
    color: #00135D;
    line-height: 1.3;
    margin-bottom: 8px;
}

/* Make detail text smaller */
.service-card .card-text {
    font-size: 12px;
    color: #444;
    line-height: 1.4;
}
</style>
/* News & Stories carousel wrapper */
.news-carousel-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 20px 0;
    box-sizing: border-box;
}

/* News carousel track */
.news-carousel-track {
    display: flex;
    gap: 20px;
    animation: newsScroll 20s ease-in-out infinite alternate; /* smooth back-and-forth movement */
}

/* Pause on hover */
.news-carousel-wrapper:hover .news-carousel-track {
    animation-play-state: paused;
}

/* Infinite scroll animation with alternate easing */
@keyframes newsScroll {
    0% { transform: translateX(0); }
    50% { transform: translateX(-25%); }
    100% { transform: translateX(-50%); }
}

/* News Cards */
.news-card {
    min-width: 250px;
    flex-shrink: 0;
    border-radius: 15px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    transition: transform 0.3s, box-shadow 0.3s;
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.news-card img {
    width: 100%;
    height: 160px;
    object-fit: cover;
}
.news-card .card-body {
    padding: 10px;
}
/* TEAM MEMBER CARD */
.team-card {
    width: 100%;
    max-width: 300px;            /* fixed card width */
    margin: 0 auto 30px auto;
    text-align: center;
}

/* TEAM MEMBER IMAGE FRAME */
.member-img-wrapper {
    width: 100%;
    height: 250px;               /* fixed frame height */
    overflow: hidden;            /* hide overflow */
    border: 4px solid #804A00;  /* frame border */
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    transition: transform 0.3s, box-shadow 0.3s;
}

/* TEAM MEMBER IMAGE */
.member-img {
    width: 100%;
    height: 100%;
    object-fit: cover;           /* image fills frame maintaining aspect ratio */
}

/* Card hover effect */
.team-card:hover .member-img-wrapper {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.2);
}

/* TEAM MEMBER INFO */
.member-info {
    margin-top: 15px;
}

.member-info h5 {
    font-weight: bold;
    color: #00135D;
    margin-bottom: 5px;
}

.member-info p {
    color: #555;
    font-size: 14px;
    text-align: justify;
}
<style>
.certificate-card {
    border-radius: 10px;
    transition: transform .2s, box-shadow .2s;
}

.certificate-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.20);
}

/* Certificate Image */
.certificate-img {
    height: 200px;
    width: 100%;
    object-fit: contain;
    border-radius: 6px;
}
</style>
/* NAVBAR TAB HOVER UNDERLINE ANIMATION */
.navbar-sawt .nav-link {
    position: relative;
    padding-bottom: 6px;
    transition: color .3s ease-in-out;
}

.navbar-sawt .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    height: 2px;
    background: #ffffff;
    transition: width 0.3s;
}

.navbar-sawt .nav-link:hover::after {
    width: 100%;
}

/* ACTIVE TAB HIGHLIGHT */
.navbar-sawt .nav-link.active {
    background: #ffffff;
    color: #00135D !important;
    border-radius: 6px;
    padding: 6px 12px;
}

.navbar-sawt .nav-link.active::after {
    display: none;
}

/* UNIQUE ADMIN LOGIN BUTTON */
.btn-admin-login {
    background: #747474;       /*  color */
    color: #00135D;            /*  text */
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 10px;       /* Pill style */
    border: 2px solid #fff;
    font-size: 10px;
    transition: 0.3s ease-in-out;
}

.btn-admin-login i {
    font-size: 10px;
}

.btn-admin-login:hover {
    /* background: #fff; */
    color: #00135D;
    transform: translateY(-2px);
    border-color: #c80a0a;
}