.content-wrapper{
    background: unset;
}

@media (min-width: 992px) {
    .content-wrapper .header-transparent
    {
        position: absolute;
        width: 100%;
    }
    .navbar-expand-lg .navbar-collapse .nav-link {
        padding: 13px 22px 10px 22px;
    }
    .navbar-stick:not(.navbar-dark) .nav-link {
        padding: 30px 20px;
    }


    /* ===== Enhanced Apple Glass effect (visible, elegant, and light) ===== */
    :not(.navbar-stick) .noise-glass {
        position: relative;
        background: rgba(255, 255, 255, 0.35); /* slightly higher opacity for visibility */
        /* backdrop-filter: saturate(200%) blur(28px);
        -webkit-backdrop-filter: saturate(200%) blur(28px); */
        border: 1px solid rgba(255, 255, 255, 0.45);
        border-radius: 18px;
        box-shadow:
            0 4px 20px rgba(0, 0, 0, 0.06),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
        overflow: hidden;
        transition: all 0.4s ease;
    }

    /* ===== Highlight reflection gradient (subtle Apple glow) ===== */
    :not(.navbar-stick) .noise-glass::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.8) 0%,
            rgba(255, 255, 255, 0.3) 35%,
            rgba(255, 255, 255, 0.1) 100%
        );
        mix-blend-mode: overlay;
        opacity: 0.65;
        pointer-events: none;
        z-index: 1;
    }

    /* ===== Slight vignette for realistic light falloff ===== */
    :not(.navbar-stick) .noise-glass::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(
            circle at top center,
            rgba(255, 255, 255, 0.2) 0%,
            rgba(255, 255, 255, 0.05) 80%,
            rgba(255, 255, 255, 0) 100%
        );
        pointer-events: none;
        opacity: 0.5;
        z-index: 2;
    }

    /* ===== When navbar-stick is active, remove glass effect ===== */
    .navbar-stick .noise-glass {
        background: transparent !important;
        /* backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important; */
        border: none !important;
        box-shadow: none !important;
        transition: all 0.3s ease;
    }

    .navbar-social-icons
    {
        padding: 5px;
        border-radius: 20px;
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: revert-layer;
    }
    .btn-glass {
        padding: 0.80rem 1.5rem 0.60rem 1.5rem;
        font-size: 0.95rem;
    }
}



/* ===== Base Glass Button Style ===== */
.btn-glass {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.80rem 1.5rem 0.60rem 1.5rem;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 14px;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.4);
    /* backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%); */
    transition: all 0.25s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

/* ===== Light Glass Button (Apple style) ===== */
.btn-glass-light {
    background: rgba(255, 255, 255, 0.35);
    color: #1a1a1a;
    box-shadow: unset;
}
.btn-glass-light:hover {
    background: rgba(255, 255, 255, 0.45);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.btn-glass-light:active {
    background: rgba(255, 255, 255, 0.55);
    transform: scale(0.98);
}

/* ===== Dark Glass Button ===== */
.btn-glass-dark {
    background: rgba(30, 30, 30, 0.35);
    color: #fff;
    border: unset;
    box-shadow: unset;
}
.btn-glass-dark:hover {
    background: rgba(30, 30, 30, 0.45);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.btn-glass-dark:active {
    background: rgba(30, 30, 30, 0.55);
    transform: scale(0.98);
}

/* ===== Primary Apple Blue (you can change color easily) ===== */
.btn-glass-primary {
    background: rgba(0, 0, 0, 0.35); /* Apple blue */
    color: #fff;
    border: unset;
    box-shadow: unset;
}
.btn-glass-primary:hover {
    background: rgba(0, 0, 0, 0.45);
    box-shadow: 0 4px 14px rgba(0, 122, 255, 0.3);
}
.btn-glass-primary:active {
    background: rgba(0, 0, 0, 0.55);
    transform: scale(0.98);
}

/* ===== Optional glow on hover ===== */
.btn-glass::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.5),
        rgba(255, 255, 255, 0)
    );
    opacity: 0;
    transition: opacity 0.3s ease;
}
.btn-glass:hover::after {
    opacity: 0.2;
}
/* ===== Brand Green Apple Glass Button ===== */
.btn-glass.btn-glass-green {
    background: rgb(0, 84, 43);
    color: #fff;
    border: unset;
    border-radius: 14px;
    padding: 0.80rem 1.5rem 0.60rem 1.5rem;
    font-weight: 500;
    /* backdrop-filter: saturate(180%) blur(20px); */
    /* -webkit-backdrop-filter: saturate(180%) blur(20px); */
    transition: all 0.25s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

/* ===== Hover: brighter tone and more glow ===== */
.btn-glass.btn-glass-green:hover {
    background: rgba(1, 83, 43, 0.991);
    box-shadow:
        0 6px 18px rgba(0, 84, 44, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

/* ===== Active: pressed look ===== */
.btn-glass.btn-glass-green:active {
    background: rgba(0, 84, 44, 0.55);
    transform: scale(0.98);
    box-shadow:
        0 2px 8px rgba(0, 84, 44, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* ===== Light reflection layer ===== */
.btn-glass.btn-glass-green::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.5) 0%,
        rgba(255, 255, 255, 0.1) 60%
    );
    mix-blend-mode: overlay;
    opacity: 0.3;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.btn-glass.btn-glass-green:hover::after {
    opacity: 0.45;
}
.nav-link{
    font-weight: 500;
}

.bottom-left-swiper {
    position: absolute;
    bottom: 30px;
    left: 60px;
    width: 350px;     
    max-width: 25vw;    
    z-index: 3;
    /* backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px); */
    border-radius: 9px;
    overflow: hidden;
    height: 242px !important;
}
.bottom-left-swiper img {
    width: 100%;
    height: auto;
    border-radius: 9px;

}
.bottom-left-swiper .swiper-slide .post-body {
    position: absolute;
    z-index: 999999999;
    bottom: 10px;
    left: 10px;
    right: 10px;
    padding: 15px 20px;
    border-radius: 14px;

    background: rgba(14, 14, 14, 0.587);
    /* backdrop-filter: blur(11px);
    -webkit-backdrop-filter: blur(11px); */
    /* border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25); */
    color: #fff;
    text-align: start;
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);

}
.swiper-controls .swiper-navigation .swiper-button.swiper-button-prev,.swiper-controls .swiper-navigation .swiper-button.swiper-button-next
{
    top: 39px !important;
}
.display-1 {
  line-height: 1.4 !important;
}

.nav-item:hover .nav-link {
  color: #00542c !important;
  /* background: rgba(255, 255, 255, 0.15); */
  /* backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); */
  /* border-radius: 10px; */
  /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); */
}

.section-frame {
    /* background-image: url('../img/Adal A.jpg'); */
    background-repeat: no-repeat;
    /* background-size: 60px auto; */
    background-position: center center;
    background-blend-mode: overlay;
    opacity: 0.9;
}

[class*="text-end"] .social > a, .social[class*="text-end"] > a {
  margin: 0 0 0 0.2rem !important;
}

/* .hero-animated {
  animation: heroBgPan 30s ease-in-out infinite alternate;
  will-change: background-position;
}

@keyframes heroBgPan {
  0% { background-position: center right; }
  100% { background-position: center left; }
} */
footer.bg-dark, .footer.bg-dark {
  background: #01321b !important;
}
/* HERO SECTION */
.about-page .hero-section {
padding: 120px 0;
position: relative;
overflow: hidden;
}

.about-page .hero-blur {
position: absolute;
top: -40%;
right: -10%;
width: 800px;
height: 800px;
background: radial-gradient(circle, rgba(0, 212, 160, 0.1) 0%, transparent 70%);
border-radius: 50%;
}

.about-page .hero-content {
position: relative;
z-index: 2;
}

.about-page .hero-content h1 {
font-size: 2rem;
font-weight: 900;
line-height: 1.1;
margin: 0 0 30px 0;
color: #1a1a1a;
}

.about-page .hero-content p {
font-size: 1.25rem;
line-height: 1.8;
margin: 0;
max-width: 600px;
color: #555;
}

/* STORY SECTION */
.about-page .story-section {
padding: 120px 0;
background: white;
}

.about-page .story-image {
position: relative;
height: 500px;
border-radius: 20px;
overflow: hidden;
background: linear-gradient(135deg, #00542c, #00856a);
box-shadow: 0 30px 80px rgba(0, 84, 44, 0.25);
}

.about-page .story-image svg {
position: absolute;
width: 100%;
height: 100%;
}

.about-page .story-image-content {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
text-align: center;
color: white;
}

.about-page .story-image-number {
font-size: 80px;
line-height: 1;
margin-bottom: 20px;
}

.about-page .story-image-text {
font-size: 1.3rem;
font-weight: 600;
}

.about-page .story-timeline {
display: flex;
flex-direction: column;
gap: 0;
}

.about-page .timeline-item {
display: flex;
gap: 25px;
margin-bottom: 40px;
}

.about-page .timeline-item:last-child {
margin-bottom: 0;
}

.about-page .timeline-number {
width: 45px;
height: 45px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 1.1rem;
flex-shrink: 0;
}

.about-page .timeline-number.primary {
background: #00542c;
}

.about-page .timeline-number.secondary {
background: #00856a;
}

.about-page .timeline-text {
color: #333;
font-size: 1rem;
line-height: 1.8;
margin: 0;
}

/* VISION & MISSION SECTION */
.about-page .vision-mission-section {
padding: 120px 0;
background: #f7f7f7;
}

.about-page .vision-card {
background: linear-gradient(135deg, #00542c, #00856a);
border-radius: 20px;
padding: 70px 50px;
color: white;
position: relative;
overflow: hidden;
}

.about-page .vision-card::before {
content: '';
position: absolute;
top: -50px;
right: -50px;
width: 200px;
height: 200px;
background: rgba(255, 255, 255, 0.08);
border-radius: 50%;
}

.about-page .vision-card h2 {
font-size: 2rem;
font-weight: 900;
margin: 0 0 25px 0;
position: relative;
z-index: 1;
}

.about-page .vision-card p {
font-size: 1.1rem;
line-height: 1.9;
margin: 0;
opacity: 0.95;
position: relative;
z-index: 1;
}

.about-page .mission-card {
background: white;
border-radius: 20px;
padding: 70px 50px;
border: 2px solid #e5e5e5;
}

.about-page .mission-card h2 {
font-size: 2rem;
font-weight: 900;
margin: 0 0 25px 0;
color: #00542c;
}

.about-page .mission-card p {
font-size: 1.1rem;
line-height: 1.9;
margin: 0;
color: #555;
}

/* GOALS SECTION */
.about-page .goals-section {
padding: 120px 0;
background: white;
}

.about-page .goals-title {
font-size: 2rem;
font-weight: 900;
text-align: center;
margin: 0 0 80px 0;
color: #1a1a1a;
}

.about-page .goal-card {
background: white;
border-radius: 16px;
padding: 50px 35px;
box-shadow: 0 10px 30px rgba(0, 84, 44, 0.1);
transition: all 0.3s ease;
height: 100%;
}

.about-page .goal-card.primary-border {
border-top: 4px solid #00542c;
}

.about-page .goal-card.secondary-border {
border-top: 4px solid #00856a;
}

.about-page .goal-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 50px rgba(0, 84, 44, 0.2);
}

.about-page .goal-icon {
font-size: 2rem;
margin-bottom: 25px;
}

.about-page .goal-card h3 {
font-size: 1.25rem;
font-weight: 700;
color: #1a1a1a;
margin: 0 0 15px 0;
}

.about-page .goal-card p {
color: #666;
font-size: 0.95rem;
line-height: 1.7;
margin: 0;
}

/* RESPONSIVE */
@media (max-width: 768px) {
.about-page .hero-content h1 {
    font-size: 1.5rem;
}

.about-page .vision-card,
.about-page .mission-card {
    padding: 40px 25px;
}

.about-page .vision-card h2,
.about-page .mission-card h2 {
    font-size: 1.8rem;
}

.about-page .goals-title {
    font-size: 2rem;
}

.about-page .story-image {
    height: 300px;
}

.about-page .story-image-number {
    font-size: 50px;
}
}