/* ========================
   Ерөнхий тохиргоо
======================== */
*{ box-sizing:border-box; margin:0; padding:0; }

:root{ --header-h:120px; }
html{ scroll-behavior:smooth; }
body{
  font-family: Tahoma, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6;
  background:#fff;
  color:#333;
}
.container{ max-width:1200px; margin:0 auto; padding:0 16px; }

/* Sticky header offset — бүх anchor section-д үйлчилнэ */
section[id]{ scroll-margin-top: var(--header-h); }

/* ========================
   Толгойн хэсэг
======================== */
.site-header{
  background:#000; color:#fff;
  padding:10px 20px;
  position:sticky; top:0; z-index:1000;
  box-shadow:0 2px 10px rgba(0,0,0,.12);
}
.header-row{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap;
  gap:16px;
}
.brand-logo img{ height:42px; display:block; }

.menu-lang{ display:flex; align-items:center; gap:10px; }
.lang-select select{ padding:4px 8px; font-size:14px; }

.menu-toggle{ font-size:28px; color:#fff; cursor:pointer; display:none; background:none; border:0; }

.main-nav{ background:#000; }
.main-nav ul{
  list-style:none; margin:0; padding:0;
  display:flex; gap:20px;
}
.main-nav ul li a{
  color:#fff; text-decoration:none; font-size:16px; padding:8px 4px; outline:none;
}
.main-nav ul li a:hover,
.main-nav ul li a:focus{
  color:#f1c40f; text-decoration:underline;
}

/* ========================
   Слайдер хэсэг
======================== */
.hero-section{ position:relative; overflow:hidden; height:80vh; }
.slider{ height:100%; position:relative; }
.slide{ position:absolute; inset:0; opacity:0; transition:opacity 1s ease-in-out; }
.slide.active{ opacity:1; z-index:1; }
.slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.slide-text{
  position:absolute; bottom:10%; left:5%;
  background:rgba(0,0,0,.6); color:#fff; padding:1.5rem; max-width:400px;
  border-radius:10px; font-size:18px;
}
.slider-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,.4); color:#fff; font-size:2.5rem;
  padding:.5rem 1rem; border:none; cursor:pointer; z-index:10; border-radius:5px;
}
.slider-btn:hover{ background:rgba(0,0,0,.7); }
.slider-btn[disabled]{ opacity:.4; cursor:not-allowed; }
.slider-btn.prev{ left:10px; } .slider-btn.next{ right:10px; }

/* ========================
   Танилцуулга хэсэг
======================== */
.intro-section{ background:#fff; color:#333; padding:120px 0; }
.intro-overlay{ padding:60px 20px; }
.intro-content{ max-width:1140px; margin:0 auto; text-align:left; }
.intro-content h2{ font-size:48px; margin-bottom:20px; text-align:center; }
.slogan{ font-size:22px; font-weight:bold; margin-bottom:20px; }
.description{ font-size:18px; max-width:800px; margin:0; line-height:1.6; }

/* ========================
   Манай баг хэсэг
======================== */
.team-section{ padding:80px 20px; background:#f9f9f9; }
.team-container{ max-width:1140px; margin:0 auto; }
.team-section h2{ font-size:36px; margin-bottom:40px; text-align:center; color:#111; }
.team-grid{ display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; }
.team-member{ flex:1 1 250px; text-align:center; }
.team-member img{
  width:180px !important; height:180px !important; object-fit:cover;
  border-radius:50%; margin-bottom:15px; box-shadow:0 4px 10px rgba(0,0,0,.2);
}
.team-member h3{ font-size:20px; margin:10px 0 5px; color:#000; }
.team-member p{ font-size:16px; color:#555; }

/* ========================
   Сүлжээ (Grid) бүтэц
======================== */
.brand-section h2{ text-align:center; margin-bottom:40px; font-size:36px; }
.brand-grid, .products-grid{ display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; }
.brand-grid img{ width:100px; height:100px; border-radius:0%; }

/* Брэндүүд */
.brand-item{
  background:#fff; padding:30px 20px; width:100%; max-width:360px; text-align:center;
  box-shadow:0 4px 16px rgba(0,0,0,.1); border-radius:0; transition:transform .3s;
}
.brand-item:hover{ transform:translateY(-6px); }
.brand-item img{ width:160px; height:160px; object-fit:contain; margin-bottom:20px; }

/* ========================
   Онцлох бүтээгдэхүүн
======================== */
.featured-section{ padding:80px 20px; background:#fff; }
.featured-section .section-title{ text-align:center; font-size:36px; margin-bottom:40px; color:#111; }
.products-grid{ gap:2rem; }
.product-card{
  background:#f9f9f9; padding:20px; max-width:530px; text-align:center;
  border-radius:12px; box-shadow:0 4px 10px rgba(0,0,0,.1); transition:transform .3s;
}
.product-card:hover{ transform:translateY(-5px); }
.product-card img{ width:100%; height:auto; object-fit:cover; margin-bottom:15px; border-radius:10px; display:block; }
.product-card h3{ font-size:20px; color:#111; margin-bottom:10px; }
.product-card .price{ font-size:18px; color:#E53935; font-weight:bold; }
.product-card a{ text-decoration:none; color:inherit; }
.product-card a:hover{ text-decoration:none; }



/* ========================
   ҮЙЛ ЯВДАЛ (EVENT)
======================== */
.event-section{ padding:80px 20px; background:#f2f2f2; }
.event-section h2{ text-align:center; font-size:36px; margin-bottom:40px; color:#111; }
.event-grid{
  display:flex; justify-content:center; flex-wrap:wrap; gap:2rem; max-width:1140px; margin:0 auto;
}
.event-card{
  background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 4px 16px rgba(0,0,0,.1);
  width:100%; max-width:340px; transition:transform .3s ease;
}
.event-card:hover{ transform:translateY(-6px); }
.event-card img{ width:100%; height:200px; object-fit:cover; display:block; }
.event-info{ padding:20px; text-align:left; }
.event-info h3{ font-size:20px; margin-bottom:10px; color:#222; }
.event-info p{ font-size:16px; color:#555; }

/* ========================
   Зургийн цомог (Gallery)
======================== */
.gallery-section{ padding:80px 20px; background:#fff; }
.gallery-section h2{ text-align:center; font-size:36px; margin-bottom:40px; color:#111; }
.gallery-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:20px; max-width:1140px; margin:0 auto;
}
.gallery-grid img{
  width:100%; height:250px; object-fit:cover; border-radius:12px;
  box-shadow:0 4px 12px rgba(0, 0, 0, 0.1); transition: transform 0.3s;
}
.gallery-grid img:hover{ transform:scale(1.05); }

/* Lightbox */
.lightbox{
  display:none; position:fixed; z-index:9999; inset:0;
  background:rgba(0,0,0,.8); justify-content:center; align-items:center; cursor:zoom-out;
}
.lightbox img{
  max-width:90%; max-height:90%; border-radius:10px; box-shadow:0 8px 30px rgba(0,0,0,.5);
}

/* ========================
   ВИДЕО ХЭСЭГ
======================== */
.video-section{ padding:60px 20px; background:#f8f8f8; text-align:center; }
.video-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:30px; }
.video-item{ width:300px; height:170px; }
.video-item iframe{ width:100%; height:100%; border:none; border-radius:8px; display:block; }
.video-item:hover{ transform:scale(1.03); }

.video-modal{
  display:none; position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.8);
  justify-content:center; align-items:center;
}
.video-modal.active{ display:flex; }
.video-container{ position:relative; width:90%; max-width:960px; background:transparent; }
#videoWrapper iframe{ width:100%; height:540px; border-radius:10px; border:none; }

/* modal buttons */
.close-btn{
  position:absolute; top:-30px; right:-10px; font-size:36px; color:#fff;
  background:transparent; border:none; cursor:pointer; z-index:2;
}
.nav-btn{
  position:absolute; top:50%; transform:translateY(-50%); font-size:36px; color:#fff;
  background:rgba(0,0,0,.4); border:none; padding:10px 15px; cursor:pointer; z-index:2; border-radius:50%;
}
.nav-btn:hover{ background:rgba(0,0,0,.7); }
.nav-btn.prev{ left:-50px; } .nav-btn.next{ right:-50px; }

/* ========================
   Хэрэглэгчийн сэтгэгдэл
======================== */
/* Container – desktop дээр төвд, зөв өргөн */
.testimonial-section{ padding:48px 16px; background:#fafafa; }
.testimonial-section h2{ text-align:center; margin-bottom:18px; }
.testimonial-container{ max-width:1100px; margin:0 auto; padding:0 16px; }

/* Wrapper: grid рүү шилжүүлж бүх дэлгэцэд уян болголоо */
#testimonialWrapper{
  display:grid;
  grid-template-columns: 1fr;   /* mobile */
  gap:16px;
  overflow:visible;             /* desktop-д хөндлөн scrollbar үгүй */
}

/* slide-wrapper-уудын доторх item-уудыг шууд wrapper-д байгаа мэт харуулах */
#testimonialWrapper > .testimonial-slide{ display: contents; }

/* Tablet ≥768px: 2 багана */
@media (min-width: 768px){
  #testimonialWrapper{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap:20px;
  }
}

/* Desktop ≥1024px: 3 багана */
@media (min-width: 1024px){
  #testimonialWrapper{
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap:24px;
    align-items: stretch;       /* картуудыг тэгш өндөртэй болгоно */
    justify-items: stretch;
  }
}

/* Маш өргөн дэлгэц дээр төвд тэнцвэртэй байлгах (optional) */
@media (min-width: 1440px){
  .testimonial-container{ max-width:1200px; }
}

/* Карт – зураг → нэр → текст (текст доороо) */
.testimonial-item{
  background:#fff;
  border-radius:16px;
  padding:16px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  display:flex;
  flex-direction:column;        /* <-- босоо стек */
  align-items:center;           /* голлуулна */
  text-align:center;            /* нэр/текст төвд */
  gap:0;
  height:100%;
}
.testimonial-item img{
  width:80px; height:80px;      /* арай том avatar */
  border-radius:50%;
  object-fit:cover; flex-shrink:0;
  margin-bottom:10px;           /* зураг доор зай */
}
.testimonial-item h4{
  margin:0 0 6px;               /* нэрний доод зай */
  font-weight:700; font-size:1rem;
}
.testimonial-item p{
  margin:0;                     /* текст яг доор нь */
  color:#444; line-height:1.55;
}

/* Жижиг дэлгэц дээр арай шахна */
@media (max-width: 360px){
  .testimonial-item{ padding:12px; }
  .testimonial-item img{ width:64px; height:64px; }
}

/* --- Safari/хуучин браузер fallback (display:contents дэмжихгүй үед) --- */
@supports not (display: contents){
  #testimonialWrapper > .testimonial-slide{
    display:grid;
    grid-column: 1 / -1;
    grid-template-columns: inherit; /* wrapper-ийн grid-ийг өвлөнө */
    gap: inherit;
  }
}



/* ========================
   Баннер (fullscreen)
======================== */
.hero-fullscreen-logo{
  min-height:100svh; height:100vh;
  background:linear-gradient(to right,#000,#1a1a1a);
  display:flex; justify-content:center; align-items:center;
  position:relative; overflow:hidden; text-align:center;
}
.hero-content{ color:#fff; animation:fadeInText 2s ease-in-out; }
.floating-logo{
  width:150px; height:auto; animation:float 4s ease-in-out infinite; margin-bottom:30px;
}
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-15px); } }
.hero-slogan{ font-size:48px; font-weight:bold; text-shadow:0 0 12px rgba(255,255,255,.2); letter-spacing:2px; }
@keyframes fadeInText{ 0%{ opacity:0; transform:translateY(30px); } 100%{ opacity:1; transform:translateY(0); } }
.scroll-down-indicator{ font-size:30px; margin-top:30px; animation:bounce 1.8s infinite; opacity:.8; }
@keyframes bounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(10px); } }

/* ========================
   Хөлийн хэсэг
======================== */
footer{ background:#111; color:#eee; }
footer .container{ max-width:1200px; margin:0 auto; padding:36px 20px; }
footer .footer-columns{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px, 1fr)); gap:24px;
}
footer .footer-columns>div{ min-width:0; }
footer h4{ margin:0 0 12px; font-size:16px; line-height:1.3; color:#fff; }
footer p, footer a{ margin:0 0 8px; font-size:14px; line-height:1.6; color:#ddd; text-decoration:none; }
footer a:hover{ color:#fff; text-decoration:underline; }
footer *{ overflow-wrap:break-word; word-break:break-word; hyphens:auto; }
footer .copyright{
  border-top:1px solid rgba(255,255,255,.08); padding:14px 20px; font-size:13px; color:#bbb;
}

/* ========================
   Scroll to Top товч
======================== */
#scrollTopBtn{
  position:fixed; bottom:20px; right:20px; background:#000; color:#fff;
  padding:10px; border-radius:50%; cursor:pointer; font-size:20px;
  transition:opacity .3s ease, transform .3s ease; z-index:999; opacity:0; pointer-events:none;
}
#scrollTopBtn.show{ opacity:1; pointer-events:auto; }

/* ========================
   Responsive тохиргоо
======================== */
@media (max-width:768px){
  .header-row{ flex-direction:column; gap:10px; flex-wrap:wrap; }
  .menu-toggle{ display:block; }
  .menu-lang{ flex-direction:row-reverse; }

  .main-nav ul{
    flex-direction:column;
    position:fixed; top:var(--header-h); left:0; right:0;
    padding:15px 20px; background:#000; display:none; z-index:9999;
  }
  .main-nav ul.show{ display:flex; }
  .main-nav ul li{ margin-bottom:10px; }

  .intro-content h2{ font-size:32px; }
  .description{ font-size:16px; }
  .slide-text{ font-size:16px; max-width:300px; }

  .gallery-grid{ grid-template-columns:repeat(2, 1fr); }

  #videoWrapper iframe{ height:300px; }
  .nav-btn.prev{ left:5px; } .nav-btn.next{ right:5px; }
  .close-btn{ top:-20px; right:0; font-size:28px; }
}
@media (max-width:480px){
  .gallery-grid{ grid-template-columns:1fr; }
  .hero-slogan{ font-size:36px; }
}

/* ===== Certifications ===== */
.certifications{
  padding: 60px 20px;
  text-align: center;
  background: #fff;            /* footer-оос ялгарах цайвар фон */
}

.certifications h3{
  font-size: 1.8rem;
  line-height: 1.25;
  margin: 0 0 10px;
  color: #111;
}

.certifications .cert-note{
  font-size: 1rem;
  color: #444;
  margin: 0 auto 24px;
  max-width: 780px;
}

/* логонуудыг мөрлүүлж, тэнцүү зайтай, эвхэгддэг болгоно */
.cert-logos{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 28px 36px;              /* мөр ба баганын зай */
  max-width: 1100px;
  margin: 0 auto;
}

/* зөвхөн <img> байгаа одоогийн markup дээрээ жигд харагдуулах */
.cert-logos img{
  display: block;
  max-width: 180px;            /* логонууд хэт сунгарахаас сэргийлнэ */
  width: auto;
  height: 60px;                /* ижил өндөр */
  object-fit: contain;         /* харьцааг хадгална */
  filter: grayscale(100%);     /* саарал — hover дээр буух */
  opacity: .9;
  transition: transform .2s ease, filter .2s ease, opacity .2s ease,
              box-shadow .2s ease;
  will-change: transform;
}

.cert-logos img:hover{
  filter: grayscale(0%);
  opacity: 1;
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* жижиг дэлгэц дээр net мөрлөлт */
@media (max-width: 768px){
  .certifications{ padding: 48px 16px; }
  .cert-logos{ gap: 22px 24px; }
  .cert-logos img{
    height: 52px;              /* арай бага өндөр */
    max-width: 160px;
  }
}
@media (max-width: 480px){
  .cert-logos{ gap: 18px 18px; }
  .cert-logos img{
    height: 46px;
    max-width: 140px;
  }
}