@import url(https://www.cdnfonts.com/pp-neue-montreal.font.css);

body {
    font-family: 'PP Neue Montreal', sans-serif;
    /* width: 90%; */
}

.wholePage {
  width: 90%;
  margin-left: 10%;
}

/*CSS for Ote Falls*/
/* 1. Brand and typography */
:root{
  --accent: #006a4e;
  --muted: #6b6b6b;
  --bg: #f7f7f7;
  --card: #ffffff;
  --radius: 10px;
  --max-width: 1140px;
  --fs-base: 16px;
}
html{font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; font-size:var(--fs-base); color:#222;}

h1,h2,h3,h4,h5{color:#072a21; line-height:1.15;
text-align: center;
margin-bottom:.5rem;}
p.lead{font-size:1.05rem; color:var(--muted);}


/* 2. Page container and cards */
.container{max-width:var(--max-width); margin:0 auto;}
.bg-white{background:var(--card);}

/* 3. Spacing utilities */
.u-gap {gap:1rem;}
.p-4{padding:1rem;}
.mt-4{margin-top:1rem;}

/* 4. Hero caption and overlay refinements */
.hero-caption{
  background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.08));
  padding:1rem 1.25rem;
  border-radius:8px;
  text-align:left;
}
.hero-caption h2{font-size:1.5rem; margin:0; color:#fff;}

.shadow-ms {
  margin-bottom: 200px;
  
}
.hero-caption p{color:rgba(255,255,255,0.9); margin:0.25rem 0 0;}
.main {
    border: 2px solid rgba(0,0,0,0.04);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(10,10,10,0.06);
    padding: 1rem;
}

/* 5. Carousel indicators (larger and rounded thumbnails) */
.carousel-indicators {
  bottom: 12px;
  display:flex;
  gap:8px;
  justify-content:center;
  padding:0 1rem;
}
.carousel-indicators button {
  width:10px; height:10px; border-radius:50%;
  background:rgba(255,255,255,0.6); border:none;
  transition:transform .2s ease, background .2s ease;
}
.carousel-indicators .active { background:var(--accent); transform:scale(1.2); }

/* 6. Image handling */
.hero-img{ height:600px; object-fit:cover; width:100%; display: block; }
.article-img{
    width:100%; 
    border-radius:8px; object-fit:cover; }
    .col-lg-8 main {
        border: 2px solid rgba(0,0,0,0.04);
        box-shadow:0 6px 18px rgba(10,10,10,0.06);
    }

/* 7. Sidebar polish and sticky fallback */
.practical-sidebar{
  top:1.5rem;
  border-radius:var(--radius);
  padding:1rem;
  box-shadow:0 6px 18px rgba(10,10,10,0.06);
  border:2px solid rgba(0,0,0,0.04);
}
@media (max-width:991px){
  .practical-sidebar{ position:static; width:100%; margin-top:1rem; }
  .hero-img{ height:300px; }
}

/* 8. Buttons and accents */
.btn-accent{
  background:var(--accent); color:#fff; border:none; padding:.55rem .8rem;
  border-radius:8px; display:inline-block; text-decoration:none;
}
.btn-accent:hover{ filter:brightness(.98); transform:translateY(-1px); }

/* 9. Accessibility & reduced motion */
:focus{ outline:3px solid rgba(0,106,78,0.15); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0s !important; transition-duration:0s !important; }
}

/* 10. Small visual micro-interactions */
.carousel-item img{ transition: transform .6s ease; }
.carousel-item:hover img{ transform: scale(1.02); }

/* 11. Kalakpa styling */
.kalakpa {
    font-family: 'PP Neue Montreal', sans-serif;
    width: 90%;
    margin-left: 10%;
    margin-top: -150px;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-align: center;
    backdrop-filter: blur(10px);}