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

body{

font-family:'Poppins',sans-serif;

background:#c8dbd4;

color:#333;

overflow-x:hidden;

}

a{

text-decoration:none;

}

img{

max-width:100%;

height:auto;

}

.section-title{

font-size:35px;

font-weight:700;

margin-bottom:20px;

}

.section-subtitle{

color:#666;

margin-bottom:40px;

}

/* ======================================
NAVBAR
====================================== */

.navbar{

padding:12px 0;

}

.navbar-brand{

font-size:22px;

font-weight:700;

}

.navbar-brand img{

border-radius:50%;

background:#fafaf9;

padding:3px;

}

.nav-link{

font-weight:500;

margin-left:10px;

transition:.3s;

}

.nav-link:hover{

color:#ffc107 !important;

}

.navbar .btn{

border-radius:30px;

padding:8px 20px;

font-weight:600;

}

/* ======================================
VISION SECTION
====================================== */

.card{

transition:.3s;

}

.card:hover{

transform:translateY(-8px);

}

.list-group-item{

padding:18px;

font-size:17px;

}

/* ======================================
STATISTICS
====================================== */

.counter{

font-size:45px;

font-weight:700;

}

section.bg-primary{

background:linear-gradient(135deg,#0d6efd,#198754)!important;

}

/* ======================================
HERO SECTION
====================================== */

#hero {
    position: relative;
    overflow: hidden;
}

.hero-image {
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

/* Dark overlay for better text visibility */

.hero-overlay {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;

    width: 100%;
    height: 100%;

    text-align: left;

    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 0, 0, 0.55) 40%,
        rgba(0, 0, 0, 0.20) 75%,
        rgba(0, 0, 0, 0.00) 100%
    );
}

/* Hero heading */

.hero-overlay h1 {
    color: #ffffff;

    font-weight: 800;

    text-shadow:
        2px 2px 5px rgba(0, 0, 0, 0.90),
        0 0 15px rgba(0, 0, 0, 0.45);
}

/* Hero paragraph */

.hero-overlay p {
    color: #ffffff;

    max-width: 700px;

    text-shadow:
        1px 1px 5px rgba(0, 0, 0, 0.90);
}

/* Hero buttons */

.hero-overlay .btn {
    padding: 12px 30px;

    border-radius: 30px;

    font-weight: 600;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Carousel controls */

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

    background-color: rgba(0, 0, 0, 0.45);

    border-radius: 50%;

    background-size: 55%;
}

.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover {
    background-color: rgba(13, 110, 253, 0.85);
}

/* Carousel indicators */

.carousel-indicators button {
    width: 12px;
    height: 12px;

    border-radius: 50%;

    margin: 0 5px;
}

.carousel-indicators .active {
    background-color: #ffc107;
}

/* ======================================
HERO MOBILE
====================================== */

@media (max-width: 768px) {

    .hero-image {
        height: 75vh;
    }

    .hero-overlay {
        text-align: center;

        background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.25) 0%,
            rgba(0, 0, 0, 0.75) 100%
        );
    }

    .hero-overlay h1 {
        font-size: 34px;
    }

    .hero-overlay p {
        font-size: 16px;

        margin-left: auto;
        margin-right: auto;
    }

    .hero-overlay .btn {
        margin-bottom: 10px;
    }

}

/* ======================================
HERO TEXT COLORS
====================================== */

/* Slide 1 */
.carousel-item:nth-child(1) .hero-overlay h1 {
    color: #ff7b00 !important;
}

.carousel-item:nth-child(1) .hero-overlay p {
    color: #ffffff !important;
}


/* Slide 2 */
.carousel-item:nth-child(2) .hero-overlay h1 {
    color: #038144 !important;
}

.carousel-item:nth-child(2) .hero-overlay p {
    color: #FFFFFF !important;
}


/* Slide 3 */
.carousel-item:nth-child(3) .hero-overlay h1 {
    color: #211ef5 !important;
}

.carousel-item:nth-child(3) .hero-overlay p {
    color: #FFFFFF !important;
}


/* Strong text */
.hero-overlay strong {
    color: #ffc14f !important;
}


/* Make all hero text readable */
.hero-overlay h1,
.hero-overlay p,
.hero-overlay strong {
    text-shadow:
        2px 2px 5px rgba(0,0,0,0.9);
}

/* ==========================================
LATEST NEWS SECTION
========================================== */

#latest-news {
    position: relative;
}

#latest-news .section-title {
    font-size: 38px;
    font-weight: 700;
}

#latest-news .section-subtitle {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}


/* NEWS CARD */

.news-card {
    overflow: hidden;
    border-radius: 18px !important;
    background: #ffffff;
    transition: all .35s ease;
}

.news-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0,0,0,.15) !important;
}


/* NEWS IMAGE */

.news-image {
    width: 100%;
    height: 230px;
    object-fit: cover;
    transition: transform .45s ease;
}

.news-card:hover .news-image {
    transform: scale(1.06);
}


/* NEWS DATE */

.news-date {
    display: inline-block;

    color: #0d6efd;

    font-size: 14px;

    font-weight: 600;

    background: rgba(13,110,253,.08);

    padding: 6px 12px;

    border-radius: 20px;
}


/* NEWS TITLE */

.news-card h4 {
    font-size: 22px;
    line-height: 1.4;
}


/* NEWS DESCRIPTION */

.news-card p {
    line-height: 1.7;
}


/* READ MORE BUTTON */

.news-card .btn {
    font-weight: 600;

    padding: 8px 18px;

    transition: all .3s ease;
}

.news-card .btn:hover {
    transform: translateX(4px);
}


/* VIEW ALL NEWS */

.news-view-all {
    margin-top: 45px;
}


/* MOBILE */

@media (max-width: 768px) {

    #latest-news .section-title {
        font-size: 30px;
    }

    .news-image {
        height: 210px;
    }

    .news-card h4 {
        font-size: 20px;
    }

}

/* ==========================================
UPCOMING EVENTS SECTION
========================================== */

#upcoming-events {
    background: #ffffff;
}


/* SECTION HEADER */

#upcoming-events .section-title {
    font-size: 38px;
    font-weight: 700;
}

#upcoming-events .section-subtitle {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}


/* EVENT CARD */

.event-card {
    overflow: hidden;
    border-radius: 18px !important;
    background: #ffffff;
    transition: all .35s ease;
}

.event-card:hover {
    transform: translateY(-10px);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, .15) !important;
}


/* EVENT IMAGE */

.event-image {
    width: 100%;
    height: 230px;
    object-fit: cover;

    transition: transform .45s ease;
}

.event-card:hover .event-image {
    transform: scale(1.06);
}


/* EVENT DATE */

.event-date {
    position: absolute;

    top: 15px;
    left: 15px;

    width: 65px;
    height: 70px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    background: #ffffff;

    border-radius: 12px;

    box-shadow:
        0 5px 15px rgba(0, 0, 0, .20);

    z-index: 2;
}


/* EVENT DAY */

.event-day {
    font-size: 25px;

    font-weight: 800;

    line-height: 1;

    color: #0d6efd;
}


/* EVENT MONTH */

.event-month {
    font-size: 12px;

    font-weight: 700;

    color: #198754;

    margin-top: 5px;
}


/* EVENT TITLE */

.event-card h4 {
    font-size: 22px;

    line-height: 1.4;

    margin-bottom: 15px;
}


/* EVENT DESCRIPTION */

.event-card p {
    line-height: 1.7;
}


/* EVENT BUTTON */

.event-card .btn {
    font-weight: 600;

    padding: 8px 18px;

    transition: all .3s ease;
}

.event-card .btn:hover {
    transform: translateX(4px);
}


/* VIEW ALL EVENTS */

.events-view-all {
    margin-top: 45px;
}


/* MOBILE */

@media (max-width: 768px) {

    #upcoming-events .section-title {
        font-size: 30px;
    }

    .event-image {
        height: 210px;
    }

    .event-card h4 {
        font-size: 20px;
    }

    .event-date {
        width: 60px;
        height: 65px;
    }

    .event-day {
        font-size: 23px;
    }

}

/* ==========================================
GALLERY PREVIEW SECTION
========================================== */

#gallery-preview {
    position: relative;
}

#gallery-preview .section-title {
    font-size: 38px;
    font-weight: 700;
}

#gallery-preview .section-subtitle {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}


/* ==========================================
GALLERY ITEM
========================================== */

.gallery-item {
    position: relative;
    width: 100%;
    height: 270px;

    overflow: hidden;

    border-radius: 18px;

    background: #000;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, .10);

    cursor: pointer;

    transition: all .35s ease;
}


/* ==========================================
GALLERY IMAGE
========================================== */

.gallery-image {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        transform .5s ease,
        filter .5s ease;
}


/* ==========================================
GALLERY OVERLAY
========================================== */

.gallery-overlay {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    color: #ffffff;

    background: rgba(0, 0, 0, .55);

    opacity: 0;

    transition: opacity .35s ease;
}


/* ==========================================
HOVER EFFECT
========================================== */

.gallery-item:hover {
    transform: translateY(-7px);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, .18);
}

.gallery-item:hover .gallery-image {
    transform: scale(1.10);

    filter: brightness(.70);
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}


/* ==========================================
GALLERY ICON
========================================== */

.gallery-overlay i {
    color: #ffc107;

    filter:
        drop-shadow(0 3px 5px rgba(0,0,0,.5));
}


/* ==========================================
GALLERY TITLE
========================================== */

.gallery-overlay h5 {
    font-size: 20px;

    font-weight: 700;

    text-shadow:
        1px 2px 4px rgba(0,0,0,.8);
}


/* ==========================================
VIEW ALL GALLERY
========================================== */

.gallery-view-all {
    margin-top: 45px;
}

.gallery-view-all .btn {
    font-weight: 600;

    padding: 12px 28px;

    transition: all .3s ease;
}

.gallery-view-all .btn:hover {
    transform: translateY(-3px);

    box-shadow:
        0 8px 18px rgba(13,110,253,.25);
}


/* ==========================================
MOBILE
========================================== */

@media (max-width: 768px) {

    #gallery-preview .section-title {
        font-size: 30px;
    }

    .gallery-item {
        height: 230px;
    }

    .gallery-overlay {
        opacity: 1;

        background:
            linear-gradient(
                to top,
                rgba(0,0,0,.70),
                rgba(0,0,0,.10)
            );

        align-items: flex-end;

        justify-content: flex-start;

        padding: 20px;

        text-align: left;
    }

    .gallery-overlay h5 {
        font-size: 18px;
    }

}

/* ==========================================
DONATE SECTION
========================================== */

#donate-section {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #f8fbff 0%,
            #eef7f3 100%
        );
}


/* LEFT CONTENT */

.donate-label {
    display: inline-flex;

    align-items: center;
    gap: 8px;

    color: #dc3545;

    font-size: 14px;
    font-weight: 700;

    letter-spacing: .8px;

    background: rgba(220,53,69,.08);

    padding: 8px 15px;

    border-radius: 30px;
}


.donate-title {
    font-size: 44px;

    font-weight: 800;

    line-height: 1.2;

    color: #212529;
}


.donate-title span {
    color: #0d6efd;
}


.donate-text {
    color: #666;

    font-size: 17px;

    line-height: 1.8;

    max-width: 700px;
}


/* ==========================================
DONATION IMPACT
========================================== */

.donate-impact {
    padding: 20px 10px;

    text-align: center;

    background: #ffffff;

    border-radius: 15px;

    box-shadow:
        0 5px 18px rgba(0,0,0,.07);

    transition: all .3s ease;
}


.donate-impact:hover {
    transform: translateY(-6px);

    box-shadow:
        0 12px 25px rgba(0,0,0,.12);
}


.donate-impact i {
    font-size: 28px;

    color: #0d6efd;

    margin-bottom: 10px;
}


.donate-impact h6 {
    margin-bottom: 3px;

    font-weight: 700;
}


.donate-impact small {
    color: #777;
}


/* ==========================================
DONATION CARD
========================================== */

.donate-card {
    position: relative;

    background: #ffffff;

    padding: 35px;

    border-radius: 25px;

    text-align: center;

    border: 1px solid rgba(13,110,253,.08);

    transition: all .35s ease;
}


.donate-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 20px 45px rgba(0,0,0,.16) !important;
}


/* CARD ICON */

.donate-card-icon {
    width: 75px;
    height: 75px;

    margin: 0 auto 20px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #0d6efd,
            #198754
        );

    color: #ffffff;

    font-size: 30px;

    box-shadow:
        0 8px 20px rgba(13,110,253,.25);
}


.donate-card h3 {
    color: #212529;
}


/* ==========================================
DONATION AMOUNT BUTTONS
========================================== */

.donation-amount {
    font-weight: 600;

    border-radius: 10px;

    padding: 10px 5px;

    transition: all .25s ease;
}


.donation-amount:hover,
.donation-amount:focus {
    color: #ffffff;

    background: #0d6efd;

    border-color: #0d6efd;

    transform: translateY(-2px);
}


/* ==========================================
DONATE BUTTON
========================================== */

#donate-section .btn {
    font-weight: 600;

    transition: all .3s ease;
}


#donate-section .btn:hover {
    transform: translateY(-3px);
}


#donate-section .btn-warning {
    color: #212529;

    box-shadow:
        0 6px 15px rgba(255,193,7,.20);
}


/* ==========================================
CUSTOM AMOUNT
========================================== */

#donate-section .input-group-text {
    background: #f8f9fa;

    font-weight: 700;

    border-color: #dee2e6;
}


#donate-section input:focus {
    border-color: #0d6efd;

    box-shadow:
        0 0 0 .2rem rgba(13,110,253,.12);
}


/* ==========================================
MOBILE
========================================== */

@media (max-width: 768px) {

    .donate-title {
        font-size: 32px;
    }

    .donate-text {
        font-size: 16px;
    }

    .donate-card {
        padding: 25px 20px;
    }

    .donate-impact {
        padding: 15px 5px;
    }

    #donate-section .btn-lg {
        width: 100%;

        margin: 5px 0 !important;
    }

}

/* ==========================================
VOLUNTEER SECTION
========================================== */

#volunteer-section {
    position: relative;
    overflow: hidden;

    background: #ffffff;
}


/* ==========================================
VOLUNTEER IMAGE
========================================== */

.volunteer-image-wrapper {
    position: relative;

    overflow: hidden;

    border-radius: 25px;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, .15);
}


.volunteer-image {
    width: 100%;
    height: 500px;

    object-fit: cover;

    display: block;

    transition: transform .5s ease;
}


.volunteer-image-wrapper:hover .volunteer-image {
    transform: scale(1.06);
}


/* ==========================================
IMAGE BADGE
========================================== */

.volunteer-image-badge {
    position: absolute;

    left: 20px;
    bottom: 20px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 12px 20px;

    background: rgba(255,255,255,.95);

    color: #198754;

    border-radius: 30px;

    font-weight: 700;

    box-shadow:
        0 6px 18px rgba(0,0,0,.15);
}


.volunteer-image-badge i {
    font-size: 22px;
}


/* ==========================================
LABEL
========================================== */

.volunteer-label {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 15px;

    border-radius: 30px;

    background: rgba(25,135,84,.08);

    color: #198754;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: .8px;
}


/* ==========================================
TITLE
========================================== */

.volunteer-title {
    font-size: 44px;

    font-weight: 800;

    line-height: 1.2;

    color: #212529;
}


.volunteer-title span {
    color: #198754;
}


/* ==========================================
TEXT
========================================== */

.volunteer-text {
    color: #666;

    font-size: 17px;

    line-height: 1.8;

    max-width: 720px;
}


/* ==========================================
VOLUNTEER ITEMS
========================================== */

.volunteer-item {
    display: flex;

    align-items: center;

    gap: 15px;

    height: 100%;

    padding: 18px;

    background: #f8f9fa;

    border-radius: 15px;

    border: 1px solid #eeeeee;

    transition: all .3s ease;
}


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

    background: #ffffff;

    border-color: rgba(25,135,84,.25);

    box-shadow:
        0 8px 20px rgba(0,0,0,.08);
}


/* ==========================================
VOLUNTEER ICON
========================================== */

.volunteer-icon {
    min-width: 50px;

    width: 50px;
    height: 50px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #198754,
            #0d6efd
        );

    color: #ffffff;

    font-size: 20px;
}


.volunteer-item h6 {
    margin-bottom: 4px;

    font-size: 17px;

    font-weight: 700;

    color: #212529;
}


.volunteer-item small {
    color: #777;

    line-height: 1.4;
}


/* ==========================================
BUTTONS
========================================== */

#volunteer-section .btn {
    font-weight: 600;

    transition: all .3s ease;
}


#volunteer-section .btn:hover {
    transform: translateY(-3px);
}


#volunteer-section .btn-success {
    box-shadow:
        0 6px 15px rgba(25,135,84,.20);
}


/* ==========================================
MOBILE
========================================== */

@media (max-width: 768px) {

    .volunteer-image {
        height: 350px;
    }

    .volunteer-title {
        font-size: 32px;
    }

    .volunteer-text {
        font-size: 16px;
    }

    .volunteer-image-badge {
        left: 15px;
        bottom: 15px;

        padding: 10px 15px;

        font-size: 14px;
    }

    .volunteer-item {
        padding: 15px;
    }

    #volunteer-section .btn-lg {
        width: 100%;

        margin: 5px 0 !important;
    }

}

/* ==========================================
PARTNERS SECTION
========================================== */

#partners-section {
    background: #f8f9fa;
    position: relative;
    overflow: hidden;
}

#partners-section .section-title {
    font-size: 38px;
    font-weight: 700;
}

#partners-section .section-subtitle {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}


/* ==========================================
PARTNER CARD
========================================== */

.partner-card {
    height: 100%;
    min-height: 170px;

    padding: 25px 15px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    background: #ffffff;

    border: 1px solid #eeeeee;

    border-radius: 18px;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, .06);

    transition: all .35s ease;
}

.partner-card:hover {
    transform: translateY(-8px);

    border-color: rgba(13, 110, 253, .20);

    box-shadow:
        0 15px 30px rgba(0, 0, 0, .12);
}


/* ==========================================
PARTNER LOGO PLACEHOLDER
========================================== */

.partner-logo-placeholder {
    width: 75px;
    height: 75px;

    margin-bottom: 15px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #eaf2ff,
            #e9f7f0
        );

    color: #0d6efd;

    font-size: 30px;

    transition: all .35s ease;
}

.partner-card:hover .partner-logo-placeholder {
    transform: scale(1.08);

    background:
        linear-gradient(
            135deg,
            #0d6efd,
            #198754
        );

    color: #ffffff;
}


/* ==========================================
PARTNER NAME
========================================== */

.partner-card h6 {
    margin: 0;

    color: #343a40;

    font-size: 15px;

    font-weight: 700;

    line-height: 1.4;
}


/* ==========================================
PARTNERS MESSAGE
========================================== */

.partners-message {
    max-width: 800px;

    margin-left: auto;
    margin-right: auto;
}

.partners-message p {
    color: #666;

    font-size: 17px;

    line-height: 1.8;
}


/* ==========================================
BECOME PARTNER BUTTON
========================================== */

#partners-section .btn {
    font-weight: 600;

    padding: 10px 22px;

    transition: all .3s ease;
}

#partners-section .btn:hover {
    transform: translateY(-3px);

    box-shadow:
        0 8px 18px rgba(13, 110, 253, .15);
}


/* ==========================================
MOBILE
========================================== */

@media (max-width: 768px) {

    #partners-section .section-title {
        font-size: 30px;
    }

    #partners-section .section-subtitle {
        font-size: 15px;
    }

    .partner-card {
        min-height: 150px;

        padding: 20px 10px;
    }

    .partner-logo-placeholder {
        width: 65px;
        height: 65px;

        font-size: 25px;
    }

    .partner-card h6 {
        font-size: 14px;
    }

    .partners-message p {
        font-size: 15px;
    }

}

/* ==========================================
MAIN FOOTER
========================================== */

#main-footer {
    position: relative;

    background:
        linear-gradient(
            135deg,
            #071b2b 0%,
            #0b2d3d 55%,
            #063b35 100%
        );

    color: #ffffff;

    padding: 70px 0 0;

    overflow: hidden;
}


/* ==========================================
FOOTER ABOUT
========================================== */

.footer-about {
    padding-right: 25px;
}

.footer-logo {
    width: 100px;
    height: 100px;

    object-fit: cover;

    border-radius: 70%;

    background: #ffffff;

    padding: 5px;

    box-shadow:
        0 6px 20px rgba(0, 0, 0, .25);
}

.footer-about h4 {
    font-size: 24px;

    font-weight: 800;

    color: #ffffff;
}

.footer-about p {
    color: rgba(255,255,255,.75);

    line-height: 1.8;

    font-size: 15px;
}

.footer-motto {
    color: #c55f30 !important;

    margin-top: 15px;
}


/* ==========================================
FOOTER TITLES
========================================== */

.footer-title {
    position: relative;

    font-size: 18px;

    font-weight: 700;

    color: #ffffff;

    margin-bottom: 25px;

    padding-bottom: 12px;
}

.footer-title::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 40px;
    height: 3px;

    background: #c55c33;

    border-radius: 10px;
}


/* ==========================================
FOOTER LINKS
========================================== */

.footer-links {
    list-style: none;

    padding: 0;

    margin: 0;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: rgba(255,255,255,.75);

    font-size: 15px;

    transition: all .3s ease;
}

.footer-links a i {
    margin-right: 8px;

    color: #ff7707;

    font-size: 12px;
}

.footer-links a:hover {
    color: #ffffff;

    padding-left: 5px;
}


/* ==========================================
FOOTER CONTACT
========================================== */

.footer-contact p {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    color: rgba(255,255,255,.75);

    font-size: 15px;

    line-height: 1.7;

    margin-bottom: 15px;
}

.footer-contact i {
    color: #ff8b07;

    width: 18px;

    margin-top: 4px;
}

.footer-contact a {
    color: rgba(255,255,255,.75);

    transition: color .3s ease;
}

.footer-contact a:hover {
    color: #ffffff;
}


/* ==========================================
SOCIAL MEDIA BUTTONS
========================================== */

.footer-social {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 25px;
}

.footer-social a {
    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #ffffff;

    background: rgba(255,255,255,.10);

    border: 1px solid rgba(255,255,255,.15);

    transition: all .3s ease;
}

.footer-social a:hover {
    background: #ffc107;

    color: #0a2841;

    transform: translateY(-5px);

    box-shadow:
        0 7px 16px rgba(15, 9, 9, 0.2);
}


/* ==========================================
FOOTER BOTTOM
========================================== */

.footer-bottom {
    margin-top: 55px;

    padding: 22px 0;

    border-top: 1px solid rgba(255,255,255,.12);
}

.footer-bottom p,
.footer-bottom a {
    color: rgba(255,255,255,.60);

    font-size: 13px;
}

.footer-bottom a {
    transition: color .3s ease;
}

.footer-bottom a:hover {
    color: #ffc107;
}

.footer-divider {
    color: rgba(255,255,255,.30);

    margin: 0 10px;
}


/* ==========================================
MOBILE FOOTER
========================================== */

@media (max-width: 768px) {

    #main-footer {
        padding-top: 50px;
    }

    .footer-about {
        padding-right: 0;
    }

    .footer-title {
        margin-top: 20px;
    }

    .footer-bottom {
        margin-top: 35px;

        text-align: center;
    }

    .footer-bottom .text-md-end {
        margin-top: 10px;

        text-align: center !important;
    }

    .footer-social {
        margin-bottom: 15px;
    }

}

/* =========================================================
   ABOUT PAGE
========================================================= */


/* =========================================================
   ABOUT PAGE HERO
========================================================= */

.page-hero {
    position: relative;

    padding: 100px 0 90px;

    background:
        linear-gradient(
            135deg,
            #063b35 0%,
            #0b2d3d 55%,
            #071b2b 100%
        );

    color: #ffffff;

    overflow: hidden;
}

.page-hero::before {
    content: "";

    position: absolute;

    width: 320px;
    height: 320px;

    border-radius: 50%;

    background: rgba(255, 193, 7, 0.08);

    top: -130px;
    right: -80px;
}

.page-hero::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.04);

    bottom: -100px;
    left: -60px;
}

.page-hero .container {
    position: relative;

    z-index: 2;
}

.page-hero-label {
    display: inline-block;

    color: #ffc107;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 15px;
}

.page-hero-label i {
    margin-right: 7px;
}

.page-hero-title {
    font-size: clamp(42px, 6vw, 70px);

    font-weight: 800;

    margin-bottom: 20px;
}

.page-hero-text {
    max-width: 760px;

    color: rgba(255, 255, 255, 0.80);

    font-size: 18px;

    line-height: 1.8;

    margin-bottom: 0;
}


/* =========================================================
   ABOUT INTRO
========================================================= */

.about-intro {
    background: #ffffff;
}

.about-image-wrapper {
    position: relative;

    padding: 12px;
}

.about-image-wrapper::before {
    content: "";

    position: absolute;

    width: 80%;

    height: 80%;

    background: #ffc107;

    border-radius: 30px;

    left: 0;
    bottom: 0;

    z-index: 0;
}

.about-main-image {
    position: relative;

    z-index: 1;

    width: 100%;

    height: 430px;

    object-fit: cover;

    border-radius: 30px;

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.18);
}

.about-label {
    display: inline-block;

    color: #198754;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 2px;

    margin-bottom: 12px;
}

.about-heading {
    font-size: 38px;

    font-weight: 800;

    line-height: 1.25;

    color: #0b2d3d;

    margin-bottom: 22px;
}

.about-heading span {
    color: #198754;

    display: block;
}

.about-text {
    color: #5f666b;

    font-size: 16px;

    line-height: 1.9;

    margin-bottom: 18px;
}

.about-highlight {
    display: flex;

    align-items: flex-start;

    gap: 15px;

    margin-top: 25px;

    padding: 20px 22px;

    background: #f7f9f8;

    border-left: 4px solid #ffc107;

    border-radius: 12px;
}

.about-highlight i {
    color: #ffc107;

    font-size: 22px;

    margin-top: 3px;
}

.about-highlight p {
    margin: 0;

    color: #0b2d3d;

    font-weight: 600;

    line-height: 1.7;
}


/* =========================================================
   VISION & MISSION
========================================================= */

.about-vision-mission {
    background: #f3f7f5;
}

.about-info-card {
    height: 100%;

    padding: 35px;

    background: #ffffff;

    border-radius: 22px;

    border: 1px solid rgba(0, 0, 0, 0.05);

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.07);

    transition: all 0.35s ease;
}

.about-info-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.12);
}

.about-info-icon {
    width: 65px;
    height: 65px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 18px;

    background: #e9f6ef;

    color: #198754;

    font-size: 27px;

    margin-bottom: 22px;
}

.about-info-card h3 {
    color: #0b2d3d;

    font-size: 25px;

    font-weight: 700;

    margin-bottom: 15px;
}

.about-info-card p {
    color: #666;

    line-height: 1.9;

    margin: 0;
}

.mission-card .about-info-icon {
    background: #fff7db;

    color: #d99d00;
}


/* =========================================================
   CORE VALUES
========================================================= */

.core-values {
    background: #ffffff;
}

.value-card {
    height: 100%;

    text-align: center;

    padding: 30px 22px;

    border-radius: 20px;

    background: #f8faf9;

    border: 1px solid #edf0ee;

    transition: all 0.35s ease;
}

.value-card:hover {
    transform: translateY(-8px);

    background: #ffffff;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.10);
}

.value-icon {
    width: 65px;
    height: 65px;

    margin: 0 auto 20px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #198754;

    color: #ffffff;

    font-size: 25px;

    transition: all 0.3s ease;
}

.value-card:hover .value-icon {
    background: #ffc107;

    color: #0b2d3d;

    transform: rotate(8deg);
}

.value-card h5 {
    color: #0b2d3d;

    font-size: 20px;

    font-weight: 700;

    margin-bottom: 12px;
}

.value-card p {
    color: #70777b;

    font-size: 14px;

    line-height: 1.8;

    margin: 0;
}


/* =========================================================
   WHAT WE DO
========================================================= */

.what-we-do {
    background: #f3f7f5;
}

.what-we-do-list {
    display: flex;

    flex-direction: column;

    gap: 13px;
}

.what-item {
    display: flex;

    align-items: center;

    gap: 15px;

    padding: 17px 20px;

    background: #ffffff;

    border-radius: 14px;

    border: 1px solid #e7ece9;

    color: #334047;

    font-weight: 500;

    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.04);

    transition: all 0.3s ease;
}

.what-item:hover {
    transform: translateX(7px);

    border-color: #198754;

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.08);
}

.what-item i {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: #e9f6ef;

    color: #198754;

    font-size: 18px;
}


/* =========================================================
   ABOUT CTA
========================================================= */

.about-cta {
    background: #ffffff;
}

.about-cta-box {
    position: relative;

    padding: 60px 30px;

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            #063b35,
            #0b2d3d
        );

    color: #ffffff;

    overflow: hidden;

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.15);
}

.about-cta-box::before {
    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    border-radius: 50%;

    background: rgba(255, 193, 7, 0.08);

    top: -120px;
    right: -50px;
}

.about-cta-box::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.04);

    bottom: -90px;
    left: -40px;
}

.about-cta-box > * {
    position: relative;

    z-index: 2;
}

.about-cta-icon {
    font-size: 42px;

    color: #ffc107;

    margin-bottom: 20px;
}

.about-cta-box h2 {
    font-size: 34px;

    font-weight: 800;

    margin-bottom: 15px;
}

.about-cta-box p {
    max-width: 700px;

    margin: 0 auto;

    color: rgba(255, 255, 255, 0.75);

    line-height: 1.8;

    font-size: 16px;
}

.about-cta-box .btn {
    font-weight: 600;

    transition: all 0.3s ease;
}

.about-cta-box .btn:hover {
    transform: translateY(-3px);
}


/* =========================================================
   ABOUT PAGE RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .page-hero {
        padding: 80px 0 70px;
    }

    .about-heading {
        font-size: 32px;
    }

    .about-main-image {
        height: 380px;
    }

}


@media (max-width: 767px) {

    .page-hero {
        padding: 65px 0 55px;
    }

    .page-hero-title {
        font-size: 42px;
    }

    .page-hero-text {
        font-size: 16px;
    }

    .about-intro,
    .about-vision-mission,
    .core-values,
    .what-we-do,
    .about-cta {
        padding-top: 55px !important;
        padding-bottom: 55px !important;
    }

    .about-main-image {
        height: 300px;
    }

    .about-heading {
        font-size: 29px;
    }

    .about-info-card {
        padding: 28px;
    }

    .about-cta-box {
        padding: 45px 20px;
    }

    .about-cta-box h2 {
        font-size: 27px;
    }

}

/* =========================================================
   PROJECTS PAGE
========================================================= */


/* =========================================================
   PROJECTS INTRO
========================================================= */

.projects-intro {
    background: #ffffff;
}

.projects-intro .section-subtitle {
    line-height: 1.8;
}


/* =========================================================
   PROJECTS LIST
========================================================= */

.projects-list {
    background: #f3f7f5;
}


/* =========================================================
   PROJECT CARD
========================================================= */

.project-card {
    height: 100%;

    background: #ffffff;

    border-radius: 22px;

    overflow: hidden;

    border: 1px solid rgba(0, 0, 0, 0.05);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.07);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.project-card:hover {
    transform: translateY(-10px);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.13);
}


/* =========================================================
   PROJECT IMAGE
========================================================= */

.project-image {
    position: relative;

    height: 245px;

    overflow: hidden;
}

.project-image img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform 0.5s ease;
}

.project-card:hover .project-image img {
    transform: scale(1.08);
}


/* Dark overlay */

.project-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.55),
            rgba(0, 0, 0, 0.03)
        );

    pointer-events: none;
}


/* =========================================================
   PROJECT CATEGORY
========================================================= */

.project-category {
    position: absolute;

    z-index: 2;

    left: 18px;

    bottom: 18px;

    padding: 7px 14px;

    border-radius: 30px;

    background: #ffc107;

    color: #102a36;

    font-size: 12px;

    font-weight: 700;

    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.15);
}


/* =========================================================
   PROJECT CONTENT
========================================================= */

.project-content {
    position: relative;

    padding: 30px 25px 28px;
}

.project-icon {
    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 16px;

    background: #e9f6ef;

    color: #198754;

    font-size: 24px;

    margin-top: -58px;

    margin-bottom: 20px;

    position: relative;

    z-index: 3;

    border: 5px solid #ffffff;

    transition:
        all 0.3s ease;
}

.project-card:hover .project-icon {
    background: #ffc107;

    color: #0b2d3d;

    transform: translateY(-3px);
}

.project-content h3 {
    color: #0b2d3d;

    font-size: 22px;

    font-weight: 750;

    margin-bottom: 13px;
}

.project-content p {
    color: #687277;

    font-size: 14px;

    line-height: 1.85;

    margin-bottom: 20px;
}


/* =========================================================
   PROJECT LINK
========================================================= */

.project-link {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #198754;

    font-size: 14px;

    font-weight: 700;

    transition: all 0.3s ease;
}

.project-link i {
    transition:
        transform 0.3s ease;
}

.project-link:hover {
    color: #0b2d3d;
}

.project-link:hover i {
    transform: translateX(5px);
}


/* =========================================================
   PROJECT CTA
========================================================= */

.projects-cta {
    background: #ffffff;
}

.projects-cta-box {
    position: relative;

    padding: 65px 30px;

    overflow: hidden;

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            #063b35 0%,
            #0b2d3d 100%
        );

    color: #ffffff;

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.15);
}

.projects-cta-box::before {
    content: "";

    position: absolute;

    width: 280px;

    height: 280px;

    border-radius: 50%;

    background:
        rgba(255, 193, 7, 0.08);

    top: -150px;

    right: -70px;
}

.projects-cta-box::after {
    content: "";

    position: absolute;

    width: 200px;

    height: 200px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.04);

    bottom: -110px;

    left: -50px;
}

.projects-cta-box > * {
    position: relative;

    z-index: 2;
}

.projects-cta-box > i {
    display: block;

    color: #ffc107;

    font-size: 45px;

    margin-bottom: 20px;
}

.projects-cta-box h2 {
    font-size: 34px;

    font-weight: 800;

    margin-bottom: 15px;
}

.projects-cta-box p {
    max-width: 700px;

    margin: 0 auto;

    color:
        rgba(255, 255, 255, 0.75);

    line-height: 1.8;
}

.projects-cta-box .btn {
    font-weight: 700;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.projects-cta-box .btn:hover {
    transform: translateY(-3px);

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.18);
}


/* =========================================================
   PROJECTS RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .project-image {
        height: 230px;
    }

    .projects-cta-box h2 {
        font-size: 30px;
    }

}


@media (max-width: 767px) {

    .projects-intro {
        padding-top: 50px !important;

        padding-bottom: 35px !important;
    }

    .projects-list {
        padding-bottom: 45px !important;
    }

    .project-image {
        height: 240px;
    }

    .project-content {
        padding:
            28px 22px 25px;
    }

    .project-content h3 {
        font-size: 21px;
    }

    .projects-cta {
        padding:
            45px 12px !important;
    }

    .projects-cta-box {
        padding:
            45px 20px;
    }

    .projects-cta-box h2 {
        font-size: 26px;
    }

    .projects-cta-box p {
        font-size: 14px;
    }

    .projects-cta-box .btn {
        display: block;

        width: 100%;

        margin:
            10px 0 !important;
    }

}

/* =========================================================
   NEWS PAGE
========================================================= */


/* =========================================================
   NEWS INTRO
========================================================= */

.news-intro {
    background: #ffffff;
}

.news-intro .section-subtitle {
    line-height: 1.8;
}


/* =========================================================
   FEATURED NEWS
========================================================= */

.featured-news {
    background: #f3f7f5;
}

.featured-news-card {
    height: 100%;

    background: #ffffff;

    border-radius: 24px;

    overflow: hidden;

    border: 1px solid rgba(0, 0, 0, 0.05);

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.08);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.featured-news-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.13);
}


/* =========================================================
   FEATURED IMAGE
========================================================= */

.featured-news-image {
    position: relative;

    height: 390px;

    overflow: hidden;
}

.featured-news-image img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform 0.5s ease;
}

.featured-news-card:hover
.featured-news-image img {
    transform: scale(1.06);
}


/* =========================================================
   NEWS CATEGORY
========================================================= */

.news-category {
    position: absolute;

    z-index: 3;

    left: 20px;

    bottom: 20px;

    padding: 8px 16px;

    border-radius: 30px;

    background: #ffc107;

    color: #0b2d3d;

    font-size: 12px;

    font-weight: 700;

    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.15);
}


/* =========================================================
   FEATURED CONTENT
========================================================= */

.featured-news-content {
    padding: 30px;
}

.featured-news-content h2 {
    color: #0b2d3d;

    font-size: 30px;

    line-height: 1.3;

    font-weight: 800;

    margin: 12px 0 15px;
}

.featured-news-content p {
    color: #687277;

    line-height: 1.85;

    margin-bottom: 20px;
}


/* =========================================================
   NEWS META
========================================================= */

.news-meta {
    display: flex;

    flex-wrap: wrap;

    gap: 18px;

    color: #7a8388;

    font-size: 12px;

    font-weight: 500;
}

.news-meta i {
    color: #198754;

    margin-right: 5px;
}


/* =========================================================
   READ MORE
========================================================= */

.news-read-more {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #198754;

    font-size: 14px;

    font-weight: 700;

    transition: all 0.3s ease;
}

.news-read-more i {
    transition:
        transform 0.3s ease;
}

.news-read-more:hover {
    color: #0b2d3d;
}

.news-read-more:hover i {
    transform: translateX(5px);
}


/* =========================================================
   NEWS SIDE LIST
========================================================= */

.news-side-list {
    display: flex;

    flex-direction: column;

    gap: 20px;

    height: 100%;
}

.news-mini-card {
    display: flex;

    min-height: 235px;

    background: #ffffff;

    border-radius: 20px;

    overflow: hidden;

    border: 1px solid rgba(0, 0, 0, 0.05);

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.06);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.news-mini-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.11);
}

.news-mini-image {
    width: 40%;

    min-width: 40%;

    overflow: hidden;
}

.news-mini-image img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform 0.45s ease;
}

.news-mini-card:hover
.news-mini-image img {
    transform: scale(1.08);
}

.news-mini-content {
    padding: 22px;

    display: flex;

    flex-direction: column;

    justify-content: center;
}

.news-small-category {
    color: #198754;

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 8px;
}

.news-mini-content h3 {
    color: #0b2d3d;

    font-size: 18px;

    line-height: 1.4;

    font-weight: 700;

    margin-bottom: 8px;
}

.news-mini-content p {
    color: #737c80;

    font-size: 13px;

    line-height: 1.65;

    margin-bottom: 10px;
}

.news-mini-content a {
    color: #198754;

    font-size: 13px;

    font-weight: 700;
}

.news-mini-content a i {
    margin-left: 4px;

    transition:
        transform 0.3s ease;
}

.news-mini-content a:hover i {
    transform: translateX(4px);
}


/* =========================================================
   NEWS GRID
========================================================= */

.news-grid-section {
    background: #ffffff;
}

.news-card {
    height: 100%;

    background: #ffffff;

    border-radius: 21px;

    overflow: hidden;

    border: 1px solid #e8edeb;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.05);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.news-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.11);
}


/* =========================================================
   NEWS CARD IMAGE
========================================================= */

.news-card-image {
    position: relative;

    height: 225px;

    overflow: hidden;
}

.news-card-image img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform 0.5s ease;
}

.news-card:hover
.news-card-image img {
    transform: scale(1.07);
}

.news-card-image .news-category {
    left: 16px;

    bottom: 16px;
}


/* =========================================================
   NEWS CARD BODY
========================================================= */

.news-card-body {
    padding: 25px;
}

.news-card-body h3 {
    color: #0b2d3d;

    font-size: 21px;

    line-height: 1.4;

    font-weight: 750;

    margin:
        12px 0 12px;
}

.news-card-body p {
    color: #70797d;

    font-size: 14px;

    line-height: 1.8;

    margin-bottom: 18px;
}


/* =========================================================
   NEWS CTA
========================================================= */

.news-cta {
    background: #f3f7f5;
}

.news-cta-box {
    position: relative;

    padding: 60px 30px;

    border-radius: 28px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #063b35 0%,
            #0b2d3d 100%
        );

    color: #ffffff;

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.14);
}

.news-cta-box::before {
    content: "";

    position: absolute;

    width: 280px;

    height: 280px;

    border-radius: 50%;

    background:
        rgba(255, 193, 7, 0.08);

    top: -150px;

    right: -60px;
}

.news-cta-box::after {
    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.04);

    bottom: -90px;

    left: -40px;
}

.news-cta-box > * {
    position: relative;

    z-index: 2;
}

.news-cta-box > i {
    display: block;

    color: #ffc107;

    font-size: 43px;

    margin-bottom: 18px;
}

.news-cta-box h2 {
    font-size: 33px;

    font-weight: 800;

    margin-bottom: 14px;
}

.news-cta-box p {
    max-width: 700px;

    margin: 0 auto;

    color:
        rgba(255, 255, 255, 0.75);

    line-height: 1.8;
}

.news-cta-box .btn {
    font-weight: 700;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.news-cta-box .btn:hover {
    transform: translateY(-3px);

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.18);
}


/* =========================================================
   NEWS RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .featured-news-image {
        height: 330px;
    }

    .featured-news-content h2 {
        font-size: 27px;
    }

    .news-mini-card {
        min-height: 210px;
    }

}


@media (max-width: 767px) {

    .news-intro {
        padding-top: 50px !important;

        padding-bottom: 35px !important;
    }

    .featured-news {
        padding-bottom: 40px !important;
    }

    .featured-news-image {
        height: 280px;
    }

    .featured-news-content {
        padding: 23px;
    }

    .featured-news-content h2 {
        font-size: 24px;
    }

    .news-mini-card {
        display: block;

        min-height: 0;
    }

    .news-mini-image {
        width: 100%;

        height: 200px;
    }

    .news-mini-content {
        padding: 22px;
    }

    .news-card-image {
        height: 220px;
    }

    .news-card-body {
        padding: 22px;
    }

    .news-cta {
        padding:
            45px 12px !important;
    }

    .news-cta-box {
        padding: 45px 20px;
    }

    .news-cta-box h2 {
        font-size: 26px;
    }

    .news-cta-box p {
        font-size: 14px;
    }

    .news-cta-box .btn {
        display: block;

        width: 100%;

        margin:
            10px 0 !important;
    }

}

/* =========================================================
   EVENTS PAGE
========================================================= */


/* =========================================================
   EVENTS INTRO
========================================================= */

.events-intro {
    background: #ffffff;
}

.events-intro .section-subtitle {
    line-height: 1.8;
}


/* =========================================================
   EVENTS LIST
========================================================= */

.events-list {
    background: #f3f7f5;
}


/* =========================================================
   EVENT CARD
========================================================= */

.event-card {
    height: 100%;

    background: #ffffff;

    border-radius: 22px;

    overflow: hidden;

    border: 1px solid rgba(0, 0, 0, 0.05);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.07);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.event-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.13);
}


/* =========================================================
   EVENT IMAGE
========================================================= */

.event-image {
    position: relative;

    height: 250px;

    overflow: hidden;
}

.event-image img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform 0.5s ease;
}

.event-card:hover .event-image img {
    transform: scale(1.07);
}


/* =========================================================
   EVENT IMAGE OVERLAY
========================================================= */

.event-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.50),
            rgba(0, 0, 0, 0.02)
        );

    pointer-events: none;
}


/* =========================================================
   EVENT STATUS
========================================================= */

.event-status {
    position: absolute;

    z-index: 3;

    top: 18px;

    right: 18px;

    padding: 7px 14px;

    border-radius: 30px;

    background: #198754;

    color: #ffffff;

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.18);
}


/* =========================================================
   EVENT CONTENT
========================================================= */

.event-content {
    display: flex;

    gap: 22px;

    padding: 28px;
}


/* =========================================================
   EVENT DATE
========================================================= */

.event-date {
    flex: 0 0 70px;

    width: 70px;

    height: 82px;

    border-radius: 15px;

    overflow: hidden;

    text-align: center;

    background: #0b2d3d;

    color: #ffffff;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.10);

    transition:
        transform 0.3s ease;
}

.event-card:hover .event-date {
    transform: translateY(-4px);
}

.event-date-day {
    display: flex;

    align-items: center;

    justify-content: center;

    height: 52px;

    background: #ffc107;

    color: #0b2d3d;

    font-size: 25px;

    font-weight: 800;
}

.event-date-month {
    display: flex;

    align-items: center;

    justify-content: center;

    height: 30px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.5px;
}


/* =========================================================
   EVENT DETAILS
========================================================= */

.event-details {
    flex: 1;
}

.event-category {
    display: inline-block;

    color: #198754;

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.8px;

    margin-bottom: 8px;
}

.event-category i {
    margin-right: 5px;
}

.event-details h3 {
    color: #0b2d3d;

    font-size: 21px;

    line-height: 1.4;

    font-weight: 750;

    margin-bottom: 10px;
}

.event-details p {
    color: #70797d;

    font-size: 14px;

    line-height: 1.8;

    margin-bottom: 16px;
}


/* =========================================================
   EVENT INFO
========================================================= */

.event-info {
    display: flex;

    flex-wrap: wrap;

    gap: 12px 20px;

    margin-bottom: 17px;
}

.event-info span {
    color: #7a8388;

    font-size: 12px;

    font-weight: 500;
}

.event-info i {
    color: #198754;

    margin-right: 5px;
}


/* =========================================================
   EVENT LINK
========================================================= */

.event-link {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #198754;

    font-size: 13px;

    font-weight: 700;

    transition:
        color 0.3s ease;
}

.event-link i {
    transition:
        transform 0.3s ease;
}

.event-link:hover {
    color: #0b2d3d;
}

.event-link:hover i {
    transform: translateX(5px);
}


/* =========================================================
   EVENTS CTA
========================================================= */

.events-cta {
    background: #ffffff;
}

.events-cta-box {
    position: relative;

    overflow: hidden;

    padding: 60px 30px;

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            #063b35 0%,
            #0b2d3d 100%
        );

    color: #ffffff;

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.14);
}


/* Decorative circles */

.events-cta-box::before {
    content: "";

    position: absolute;

    width: 280px;

    height: 280px;

    border-radius: 50%;

    top: -150px;

    right: -60px;

    background:
        rgba(255, 193, 7, 0.08);
}

.events-cta-box::after {
    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    border-radius: 50%;

    bottom: -90px;

    left: -40px;

    background:
        rgba(255, 255, 255, 0.04);
}

.events-cta-box > * {
    position: relative;

    z-index: 2;
}


/* CTA icon */

.events-cta-box > i {
    display: block;

    color: #ffc107;

    font-size: 44px;

    margin-bottom: 18px;
}


/* CTA heading */

.events-cta-box h2 {
    font-size: 33px;

    font-weight: 800;

    margin-bottom: 14px;
}


/* CTA paragraph */

.events-cta-box p {
    max-width: 700px;

    margin: 0 auto;

    color:
        rgba(255, 255, 255, 0.76);

    line-height: 1.8;
}


/* CTA buttons */

.events-cta-box .btn {
    font-weight: 700;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.events-cta-box .btn:hover {
    transform: translateY(-3px);

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.18);
}


/* =========================================================
   EVENTS RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .event-image {
        height: 230px;
    }

    .event-content {
        padding: 24px;
    }

    .event-details h3 {
        font-size: 20px;
    }

    .events-cta-box h2 {
        font-size: 30px;
    }

}


@media (max-width: 767px) {

    .events-intro {
        padding-top: 50px !important;

        padding-bottom: 35px !important;
    }

    .events-list {
        padding-bottom: 45px !important;
    }

    .event-image {
        height: 230px;
    }

    .event-content {
        gap: 15px;

        padding: 22px 20px;

        align-items: flex-start;
    }

    .event-date {
        flex: 0 0 62px;

        width: 62px;

        height: 75px;
    }

    .event-date-day {
        height: 47px;

        font-size: 22px;
    }

    .event-date-month {
        height: 28px;

        font-size: 9px;
    }

    .event-details h3 {
        font-size: 19px;
    }

    .event-details p {
        font-size: 13px;
    }

    .event-info {
        display: block;
    }

    .event-info span {
        display: block;

        margin-bottom: 7px;
    }

    .events-cta {
        padding:
            45px 12px !important;
    }

    .events-cta-box {
        padding: 45px 20px;
    }

    .events-cta-box h2 {
        font-size: 26px;
    }

    .events-cta-box p {
        font-size: 14px;
    }

    .events-cta-box .btn {
        display: block;

        width: 100%;

        margin: 10px 0 !important;
    }

}

/* ==========================================
   SAI'DU'A GALLERY
========================================== */

.gallery-photos-section {
    background: #f5f9f7;
}

.gallery-label {
    display: inline-block;
    color: #198754;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.gallery-label i {
    margin-right: 6px;
}

.gallery-title {
    color: #173b2f;
    font-size: 38px;
    font-weight: 700;
}

.gallery-subtitle {
    color: #6c757d;
    max-width: 700px;
    margin: 10px auto 0;
}


/* ==========================================
   FILTER BUTTONS
========================================== */

.gallery-filters {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.gallery-filter {
    border: 2px solid #198754;
    background: transparent;
    color: #198754;
    padding: 9px 20px;
    border-radius: 30px;
    font-weight: 600;
    cursor: pointer;
    transition: all .3s ease;
}

.gallery-filter:hover,
.gallery-filter.active {
    background: #198754;
    color: #fff;
    transform: translateY(-2px);
}


/* ==========================================
   GALLERY CARD
========================================== */

.gallery-card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 25px rgba(0, 0, 0, .10);
    transition: all .35s ease;
}

.gallery-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, .18);
}


/* ==========================================
   GALLERY IMAGE
========================================== */

.gallery-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.gallery-card:hover .gallery-image {
    transform: scale(1.08);
}


/* ==========================================
   IMAGE OVERLAY
========================================== */

.gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, .80),
        rgba(0, 0, 0, .10)
    );

    display: flex;
    align-items: flex-end;

    opacity: 0;
    transition: opacity .35s ease;
}

.gallery-card:hover .gallery-overlay {
    opacity: 1;
}

.gallery-overlay-content {
    width: 100%;
    padding: 25px;
    color: #fff;
}

.gallery-overlay-content i {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;

    background: #198754;
    border-radius: 50%;

    margin-bottom: 12px;
    font-size: 18px;
}

.gallery-overlay-content h5 {
    margin: 0 0 5px;
    font-weight: 700;
}

.gallery-overlay-content p {
    margin: 0;
    font-size: 14px;
    opacity: .9;
}


/* ==========================================
   FILTER ANIMATION
========================================== */

.gallery-item {
    transition:
        opacity .35s ease,
        transform .35s ease;
}

.gallery-item.gallery-hidden {
    display: none;
}


/* ==========================================
   MOBILE RESPONSIVE
========================================== */

@media (max-width: 768px) {

    .gallery-title {
        font-size: 30px;
    }

    .gallery-subtitle {
        font-size: 15px;
        padding: 0 15px;
    }

    .gallery-filter {
        padding: 8px 14px;
        font-size: 14px;
    }

    .gallery-image {
        height: 250px;
    }

}

@media (max-width: 576px) {

    .gallery-image {
        height: 230px;
    }

    .gallery-overlay-content {
        padding: 18px;
    }

    .gallery-overlay-content h5 {
        font-size: 17px;
    }

}/* ============================================================
   SAI'DU'A PROFESSIONAL FRONTEND POLISH
   Responsive visual layer for desktop, tablet and Android.
   Content and existing JavaScript behaviour are preserved.
============================================================ */
:root{
  --sui-green:#198754;
  --sui-green-dark:#0f5132;
  --sui-gold:#d9a400;
  --sui-bg:#f7faf8;
  --sui-border:#e0ebe5;
  --sui-shadow:0 14px 40px rgba(24,62,44,.08);
}
html{scroll-behavior:smooth}
body{background:linear-gradient(180deg,#f7faf8 0%,#eef5f1 100%);color:#22352b}
.navbar{backdrop-filter:saturate(150%) blur(12px);-webkit-backdrop-filter:saturate(150%) blur(12px);box-shadow:0 4px 24px rgba(20,55,39,.07);padding:10px 0;z-index:1030}
.navbar-brand{letter-spacing:.2px}
.nav-link{border-radius:10px;padding:.55rem .7rem!important}
.nav-link:hover{background:rgba(25,135,84,.07)}
.card,.list-group,.accordion,.contact-card,.info-card,.project-card{border:1px solid var(--sui-border);border-radius:17px;box-shadow:var(--sui-shadow)}
.card{overflow:hidden}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 42px rgba(24,62,44,.11)}
.btn{border-radius:11px;font-weight:700;min-height:42px}
.form-control,.form-select{border-color:#d7e4dd;border-radius:11px;min-height:46px}
.form-control:focus,.form-select:focus{border-color:#198754;box-shadow:0 0 0 .22rem rgba(25,135,84,.11)}
.section-title{letter-spacing:-.35px}
.section-subtitle{max-width:760px;margin-left:auto;margin-right:auto;line-height:1.7}
img,video,svg{max-width:100%;height:auto}
.hero-overlay .container{max-width:1220px}
.hero-overlay h1{line-height:1.05}
.hero-overlay p{line-height:1.65}
.footer,.site-footer{border-top:1px solid rgba(224,235,229,.9)}

@media(min-width:1200px){
  .container{max-width:1180px}
  .hero-overlay h1{font-size:clamp(42px,4.2vw,68px)}
  .hero-overlay p{font-size:18px;max-width:760px}
}

@media(max-width:991.98px){
  .navbar .container{padding-left:15px;padding-right:15px}
  .navbar-collapse{padding:8px 0 10px}
  .navbar-nav .nav-link{margin-left:0;margin-top:3px}
}

@media(max-width:768px){
  html,body{width:100%;overflow-x:hidden}
  .container,.container-fluid{width:100%;max-width:100%;padding-left:13px;padding-right:13px}
  .section-title{font-size:27px!important;line-height:1.18;margin-bottom:12px}
  .section-subtitle{font-size:14px;margin-bottom:25px;line-height:1.65}
  .navbar{padding:8px 0}
  .navbar-brand{font-size:19px}
  .navbar-brand img{width:42px!important;height:42px!important}
  .hero-image{height:74svh!important;min-height:500px;object-position:center}
  .hero-overlay{padding:20px 8px;text-align:center}
  .hero-overlay h1{font-size:clamp(28px,8.2vw,38px);margin-bottom:12px}
  .hero-overlay p{font-size:15px;max-width:100%;margin-left:auto;margin-right:auto}
  .hero-overlay .btn{width:auto;min-height:45px;padding:10px 18px;margin:4px}
  .carousel-control-prev-icon,.carousel-control-next-icon{width:40px;height:40px}
  .carousel-indicators button{width:9px;height:9px;margin:0 4px}
  .counter{font-size:36px}
  .list-group-item{padding:14px;font-size:15px}
  .row{--bs-gutter-x:.8rem;--bs-gutter-y:.8rem}
  .card-body{padding:16px}
  .table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{white-space:nowrap}
  .btn{min-height:44px}
  .modal-dialog{margin:.65rem}
}

@media(max-width:420px){
  .container,.container-fluid{padding-left:9px;padding-right:9px}
  .hero-image{min-height:460px;height:70svh!important}
  .hero-overlay h1{font-size:27px}
  .hero-overlay p{font-size:14px}
  .hero-overlay .btn{width:100%;margin:4px 0}
  .section-title{font-size:24px!important}
  .counter{font-size:32px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}