/* ==========================================================================
   File: index.css
   Project: Indigenous Tribe Template
   Description: Main custom stylesheet for layout, typography, and colors.
   Author: Kh. Meiraba, umaibi.com
   Version: 1.3.0
   Created: 06 Nov 2025
   Last Updated: 06 Nov 2025
   License: MIT License
   --------------------------------------------------------------------------
   TABLE OF CONTENTS:
   1. Global Resets and Typography 
   2. Header & Navigation
   3. Screen Image
   4. Content Sections
   5. Media Plyer
   6. Gallery 
   7. Blog Section
   8. Footer
   9. About Section
   10. Responsive Design
   ==========================================================================
*/


/* 1. Global Reset & base body, html, root, Typography & Colors */    

  
  *{box-sizing:border-box}
    html,body 
    {min-height:100%;margin:0;font-family:Nunito,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,'Open Sans', sans-serif; color:var(--text);background:var(--muted);
    }

    img
    {max-width:100%;height:auto;display:block}
    a{color:inherit;text-decoration:none}

    :root{
      --accent: #8b5e3c; /* warm earthy accent */
      --muted: #f5f3f1;
      --text: #222;
      --overlay: rgba(14,12,10,0);
      --max-width: auto;
      --volume-knob-size: 12px;      /* knob diameter */
      --volume-knob-color: #e0b96a;  /* knob color */
    }

body {
  overflow-x: hidden;
}
.muted{color:#7b7b7b}


/* Initial hidden state */
.fade-in-section {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform;
}

.fade-in-section.is-visible {
  opacity: 1;
  transform: none;
}
/* adjust to your header height */
#event {
  scroll-margin-top: 100px; 
}
#about {
  scroll-margin-top: 120px; 
}
#gallery {
  scroll-margin-top: 200px; 
}
#culture {
  scroll-margin-top: 400px; 
}
#blogs {
  scroll-margin-top: 100px; 
}
#guardians{
  scroll-margin-top: 220px; 
}
#record{
  scroll-margin-top: 100px; 
}





/* 4. Screen image, umai-aku-tribe */

    .umai-aku-tribe::after{content:'';position:absolute;inset:0;background:var(--overlay)}
    .umai-aku-tribe::before{content:'';position:absolute;inset:0;background-image:var(--umai-aku-tribe-image);background-size:cover;background-position:center;filter:brightness(.95);}
    .umai-aku-tribe{min-height:60vh;display:grid;align-items:center;border-radius:var(--radius);overflow:hidden;margin-bottom:1.5rem;position:relative}
    .umai-aku-tribe-inner{position:relative;z-index:2;padding:8rem 2rem;color:#fff;display:flex;gap:2rem;align-items:center}
    .umai-aku-tribe-card{background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));padding:1.75rem;border-radius:12px;backdrop-filter: blur(4px);max-width:640px;
    
  /* Animation */
  opacity: 0;
  transform: translateX(-50px);
  animation: slideFadeIn 1s ease-in forwards;
}

/* Keyframes */
@keyframes slideFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }

    }
    h1{font-family:Merriweather, serif;font-size:2.25rem;margin:0 0 .5rem}
    .lead{color:var(--muted);margin:0 0 1rem}
    p.lead{margin:0 0 1rem;opacity:.95}
    .facts{display:flex;gap:1rem;margin-top:.75rem}
    .fact{background:rgba(255,255,255,0.08);padding:.6rem .9rem;border-radius:10px;font-weight:700}
    .spaced{margin-top:1rem}
    .umaibi-circular-map-area{
      margin-left:auto;display:flex;align-items:center
    }
    .umaibi-circular-map-blur{
      width:200px;height:200px;border-radius:50%;background:linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));display:flex;align-items:center;justify-content:center;flex-direction:column;padding:1rem;backdrop-filter: blur(2px);
    
     
 /* Animation */
  opacity: 0;
  transform: translateX(50px);
  animation: slideFadeInRight 1s ease-in forwards;
}

/* Keyframes */
@keyframes slideFadeInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
    
    }
    .umaibi-circular-map-inner{
      width:120px;height:120px;border-radius:50%;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.22); margin-top: 20px;
    }
    .umaibi-circular-map-ancentral{
  max-width: 114%;
  height: auto;
  display: block;
  margin: -6px;
  margin-top: 0px;
  filter: hue-rotate(95deg);
  }
  .land {color: #4a4a4a;}


/* 5. We stand for the land */

 .umaibi-tribe{
      display:grid;
      grid-template-columns:1fr 750px;
  
      margin:1.25rem 0;
      align-items:center;
    }
  .umaibi-tribe-visual{height:39.6rem;border-radius:var(--radius);overflow:hidden;
      background-size:cover;background-position:center;box-shadow:0 10px 30px rgba(15,12,10,0.06);
      border-radius: 8px;}
  .umaibi-tribe-card{padding:1.4rem;
  
  }
  .umaibi-tribe h1{font-family:Merriweather, serif;font-size:2rem;margin:0 0 .5rem}
  .we-stand {
     color: #460303;
     border-left: 5px solid #b75252;
     padding-left: 11px;
    }
strong {
  color: #055760c2;
}

                                /* Ubaibi-tribe-Roster */
    .umaibi-tribe-roster{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.9rem;margin-top:1rem}
    .guardian{background:linear-gradient(180deg,#a9f97d4f,#e3e3e3ba);padding:.8rem;border-radius:10px;display:flex;gap:.75rem;align-items:center;box-shadow: 0 4px 6px rgba(12, 10, 8, 0.12);}
    .avatar{width:77px;height:124px;border-radius:8px;overflow:hidden;background:#eee;flex-shrink:0}
    .avatar img{width:100%;height:100%;object-fit:cover}
    .gname{font-weight:700}
    .gmeta{font-size:.85rem;color:#606060}


/* 6. umai-aku-tribe page */

     .container-sanakki{
   display: flex; 
    gap: 15px; 
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding:5px;
}
    .card-sanakki-01{
   flex: 1;
  text-align: center;
  padding: 15px;
  border-radius: 10px;
  border: 4px solid #ddd;
}

.more-button-text {
  background: #b77e54;
  padding: 8px;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.31);
}
   .more-button-text:hover{
background: #ad6f43ff;
color: #0e0e0eff;
   }
.card-sanakki-02{
      padding:1.2rem;width:25%;
    flex: 2;
    }
.card-sanakki-03{
padding:1.2rem;width:25%;
flex: 1;
    }

/* 7. second screen image */

    .umai-aku-tribe1::after{content:'';position:absolute;inset:0;background:var(--overlay)}
    .umai-aku-tribe1::before{content:'';position:absolute;inset:0;background-image:var(--umai-aku-tribe1-image);background-size:cover;background-position:center;filter:brightness(.95);}
    .umai-aku-tribe1{min-height:80vh;display:grid;align-items:center;border-radius:var(--radius);overflow:hidden;margin-bottom:1.5rem;position:relative}
    .umai-aku-tribe1-inner{position:relative;z-index:2;padding:8rem 2rem;color:#fff;display:flex;gap:2rem;align-items:center}
    .umai-aku-tribe1-card{padding:1.75rem;max-width:640px}
 
/* 8. event page */

 .card{margin: 8px;background:white;padding:1.2rem;border-radius:12px;box-shadow:0 8px 24px rgba(19,17,16,0.05)}

  .umai-event-header{
    font-size: 1.6rem;
  font-family: times;
  font-kerning: none;
  font-style: oblique;
  font-weight: lighter;
  border: solid 1px #2b5982c7;
  padding: 5px;
  }
  .date {
  display: flex;
  padding-top: 1rem;
}


/* 9. Ancient Tribal Folk Songs page*/

  umai-media-header {
      text-align: center;
      padding: 2rem 1rem;
    }
   .umai-media-main-headline {
      font-family: 'Playfair Display', serif;
      color: #3a2613;
      background: linear-gradient(90deg, #b88946, #8b5e1f);
      background-clip: text;
      -webkit-text-fill-color: transparent;
      font-family: 'RusticRoadway';
      padding-top: 65px;
    }
   .umai-media-headline {
      font-size: 1rem;
      color: #4a3721;
      margin-bottom: 2rem;
    }
    .recordings {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 1.5rem;
      padding: 1rem;
    }


  .umai-media-left-para{
  width: 25rem;
  border-left: 5px solid #b75252;
  padding-left: 11px;
  }

.umai-media-left-content {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.5rem;
}

.umai-media-thumb {
  height: 109px;
  width: 109px;
  background-size: cover;
  background-position: center;
  position: relative;
  border-radius: 50%;
  border: 5px solid #8cd985;
  border-bottom-left-radius: 55px 2px;
  
}

.umai-media-left-person {
  font-size: 1rem;
  text-shadow: 0 0 4px rgba(0,0,0,0.6);
  position: absolute;
  margin-top: 121px;
  width: 100%;
  text-align: center;
  padding: 4px 0;
}

.umai-media-card-main {
  display: flex;
  gap: 30px;

}
    .umai-media-card {
      width: 267px;
  background: #fffaf3;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  overflow: hidden;
  transition: transform 0.3s ease;
  position: relative;
  height: 23rem;
    }
    .umai-media-card:hover { transform: translateY(-5px); }
    .thumb {
      height: 200px;
      background-size: cover;
      background-position: center;
      position: relative;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }


.thumb::after {
  content: "";
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0);  
  transition: background 0.3s ease;
}
 .thumb:hover::after {
  background: rgba(0, 0, 0, 0.4); 
}

/* Media Plyer */

    .play-btn::before {
      content: '\25B6';
      font-size: 2rem;
      color: #8b5e1f;
      padding-left: 6px;
    }
      .controls {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px;
      background: rgba(46, 29, 10, 0.8);
      border-top: 2px solid #b88946;
      box-sizing: border-box;
      display: none;
    }
    .controls button, .controls input[type=range] {
      background: none;
      border: none;
      outline: none;
      cursor: pointer;
    }
    .controls button {
      color: #f3d29e;
      font-size: 1.4rem;
      padding: 0 8px;
      transition: transform 0.2s;
    }
    .controls button:hover {
      transform: scale(1.1);
      color: #ffd88b;
    }
        .progress-bar {
      flex: 1;
      height: 6px;
      margin: 0 10px;
      background: #6b4a21;
      border-radius: 3px;
      position: relative;
      cursor: pointer;
    }
    .progress {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, #b88946, #e2b76a);
      border-radius: 3px;
    }
    .volume-slider::-moz-range-track {
  height: 4px;
  background: #6b4a21;
  border-radius: 2px;
}
.volume-slider::-moz-range-thumb {
  width: var(--volume-knob-size);
  height: var(--volume-knob-size);
  background: var(--volume-knob-color);
  border: none;

}
  .play-btn {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(255,255,255,0.85);
      border-radius: 50%;
      width: 70px;
      height: 70px;
      display: none;
      align-items: center;
      justify-content: center;
      transition: background 0.3s;
    }
    .thumb:hover .play-btn {
      display: flex;
    }

       /* Soft glowing pulse while audio plays */
@keyframes tribalPulse {
  0%   { transform: scale(1); box-shadow: 0 0 0 rgba(255, 215, 128, 0.0); }
  50%  { transform: scale(1.03); box-shadow: 0 0 25px rgba(255, 215, 128, 0.4); }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(255, 215, 128, 0.0); }
}
.thumb.audio-playing {
  animation: tribalPulse 2.5s infinite ease-in-out;
}
    video, audio {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
      border-radius: 0;
      display: none;
      object-fit: cover;
    }
    .volume-slider {
      width: 60px;
      accent-color: #b88946;
    }

    /* end of Media Plyer */
    
    .umai-media-card-content {
      padding: 1rem;
    }
    .media-title {
      font-weight: bold;
      font-size: 1.2rem;
      margin-top: 1rem;
    }
    .umai-media-icons {
      display: flex;
      justify-content: flex-start;
      gap: 1rem;
      font-size: 1.3rem;
      color: #8b5e1f;
      margin-top: 2rem;
    }


/* 10. Third screen image umai-aku-tribe2 */

    .umai-aku-tribe2{min-height:80vh;display:grid;align-items:center;border-radius:var(--radius);overflow:hidden;margin-bottom:1.5rem;position:relative}
    .umai-aku-tribe2::before{content:'';position:absolute;inset:0;background-image:var(--umai-aku-tribe2-image);background-size:cover;background-position:center;filter:brightness(.35);}
    .umai-aku-tribe2::after{content:'';position:absolute;inset:0;background:var(--overlay)}
    .umai-aku-tribe2-inner{position:relative;z-index:2;padding:8rem 2rem;color:#fff;display:flex;gap:2rem;align-items:center}
    .umai-aku-tribe2-card{padding:1.75rem;font-size: 1.3rem;font-style: oblique;opacity: 73%;}

   
   
/* 11. Present Status of Achaangi People */

.umaibi-present-status{
display:grid;gap:1rem;margin-top:1rem}

/* 12. Blog Articles */

.umaiblog-articles {
  text-align: center;
  padding: 8px 0px 40px 0px;
}
.umai-blog-link {
 text-align: end;
  font-size: 15px;
  padding-right: 15px;
  color: #055760;
  margin-top: -18px;
}
.umai-blog-link:hover{
color: #802b2b;
text-decoration: underline;
transition: color .2s ease;
}

.umaiblog-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  justify-content: center;
  gap: 1.5rem;
  max-width: 1335px;
  margin: 0 auto;
}
.umaiblog-card {
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: transform 0.3s ease;
  text-align: left;
}
.umaiblog-card:hover {
  transform: translateY(-5px);
}
.umaiblog-img {
  width: 100%;
  display: block;
}
.umaiblog-meta {
  display: flex;
  justify-content: space-between;
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  color: #802b2b;
  border-bottom: 1px solid #eee;
  background-color: #fafafa;
}
.umaiblog-meta i {
  margin-right: 6px;
  color: #555;
}
.umaiblog-card strong {
  display: block;
  padding: 1rem 1rem 0.5rem;
  font-size: 1.1rem;
  color: #222;
}
.umaiblog-card .muted {
  color: #666;
  padding: 0 1rem 0rem 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0.9rem 0rem 0rem 0rem;
}
.umai-date .fa-calendar-days::before {
 padding: 0px; 
 
}
.fa-calendar-alt::before, .fa-calendar-days::before {
padding: 13px;
}
.fa-clock-four::before, .fa-clock::before {
padding: 12px;
}



/* 13. About + Gallery */

    .two-col{display:grid;grid-template-columns:1fr 420px;gap:1.25rem;padding-bottom: 3rem;}
   
    .gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
    .gallery .item{height:120px;border-radius:8px;overflow:hidden}

    /* Pattern strip */
    .pattern-strip{display:flex;align-items:center;gap:1rem;padding:.9rem;border-radius:10px;margin:1rem 0;background:linear-gradient(90deg, rgba(139,94,60,0.06), rgba(139,94,60,0.02))}
    .pattern{width:64px;height:64px;border-radius:8px;background-image:linear-gradient(135deg, rgba(139,94,60,0.14), rgba(139,94,60,0.08));display:flex;align-items:center;justify-content:center;font-weight:700}


/* 15 Responsive Desktop */
    @media (max-width:900px){
      .two-col{grid-template-columns:1fr}
      .umai-aku-tribe-inner{padding:2rem}
      h1{font-size:1.6rem}
      .nav{gap:.5rem}
      .umaibi-menu ul{display:none}
      .mobile-nav{display:block}
    }

/* Tablet */

@media (min-width: 600px) and (max-width: 991px){
  .umaibi-tribe{
grid-template-columns: 1fr 440px;
align-items: center;
align-items: flex-start;
  }
  
}

/* mobile */
@media (max-width:600px){


  .top-left span {
  
  font-size: 0.8rem;
  }
.top-right a {
  margin-left: 6px;
}
  .top-right i {
  font-size: 0.8rem;
}



.logo-text{
font-size: 0.8rem;}
.mobile-nav {
    padding: 0 0.1rem 0 1.1rem;
    font-size: 11px;
    display: flex;
    width: 17rem;
  }
  .btn {
    padding: .4rem .7rem;
}
.nav {
  padding: 0.5rem 1.1rem 0.5rem 1.1rem;
}
.brand{
  width: 179%;
}
.umai-aku-tribe-card{
  max-width: 390px;
  padding: .7rem;
}

.umai-aku-tribe-inner{
  display: block;
}

.facts{
  font-size: 13px;
}

.umaibi-circular-map-area{
width: 56px;
align-items: end;
}

.umaibi-circular-map-blur {
    backdrop-filter: none;
    background: none;
    margin-bottom: -86px;
    padding: 0

}

.umaibi-circular-map-inner{
width: 48px;
height: 48px;
}
.land{
  font-size: 8px;
    color: #acacac;
}
.umaibi-circular-map-ancentral{
margin: -4px}

/* 5. responsive We stand for the land */

.umaibi-tribe-visual {
  height: 22rem;
}
.umaibi-tribe {
  display: block;


}

.umaibi-tribe-roster {

  grid-template-columns: repeat(auto-fit,minmax(120px,2fr));
  gap: 0.8rem;
}





.avatar {
  width: 135px;
  height: 80px;
  border-radius: 7px;
  flex-shrink: 1;

}



.umai-media-thumb {
  height: 98px;
  width: 98px;
}

/* 6.  umai-aku-tribe page  */
.card-sanakki-01{
  flex: content;
}

.card-sanakki-02 {
 
  flex: content;

}

.umai-aku-tribe1-card{
  padding:0;
}

/* 6.  Footer  */

.footer-line-text {

  font-size: 0.8rem;
}
.umai-footer-shape{
  width: 100%;
}

.footer-inner{
  display: contents;
}
.newsletter input {
  width: 95%}
/* 6.   */
.umai-media-left-para {
  width: 20rem;
}

.umai-media-card-main {
  display: grid;
  gap: 30px;
  margin-top: 5rem;
}
.umai-media-card{
  height: 19rem;
}

.umai-media-icons{
  margin-top: 0.8rem;
}
}