* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', sans-serif;
}

/* ================= NAVBAR ================= */
.navbar {
  position: fixed;
  width: 100%;
  top: 0;
  background: #c9c8b4;
  backdrop-filter: blur(2px);
  transition: all 0.3s ease;
  z-index: 1000;
  animation: slideDown 0.6s ease;
}

/* SCROLL STATE */
.navbar.scrolled {
  background: rgba(201, 200, 180, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

/* TEXT COLOR ON SCROLL */
.navbar.scrolled .nav-menu a {
  color: #fff;
}

/* ================= CONTAINER ================= */
.nav-container {
  max-width: 1200px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
}

/* ================= LOGO ================= */
.logo {
  width: 48px;
  height: 48px;
  transition: transform 0.3s ease;
}
.logo:hover {
  transform: scale(1.05);
}

/* BRAND WRAPPER */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* TEXT BLOCK */
.brand-text h1 {
  font-family: 'Junge', sans-serif; /* fallback */
  font-size: 20px;
  font-weight: 600;
  color: #2a1a14;
  line-height: 1.1;
  letter-spacing: 0.3px;
}

/* TAGLINE */
.brand-text p {
  font-size: 11px;
  color: #aa8e58;
  letter-spacing: 0.5px;
}

/* WHITE TEXT ON SCROLL */
.navbar.scrolled .brand-text h1,
.navbar.scrolled .brand-text p {
  color: #fff;
}


.brand:hover .logo {
  transform: scale(1.05);
}

.tm {
  font-size: 9px;
  vertical-align: super;
  margin-left: 3px;
  opacity: 0.7;
  letter-spacing: 0;
}
/* ================= NAV MENU ================= */
.nav-menu {
  display: flex;
  gap: 35px;
  list-style: none;
}

.nav-menu a {
  position: relative;
  color: #000;
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.5px;
  transition: 0.3s;
}

/* UNDERLINE */
.nav-menu a::after {
  content: "";
  position: absolute;
  width: 0%;
  height: 2px;
  left: 0;
  bottom: -5px;
  background: #6f4e37; /* coffee tone */
  transition: 0.3s;
}

.nav-menu a:hover::after {
  width: 100%;
}

/* ACTIVE */
.nav-menu a.active {
  color: #6f4e37;
  font-weight: 600;
}

/* ACTIVE LINK (TEXT) */
.nav-menu a.active {
  color: #6f4e37;
  font-weight: 600;
}

/* ACTIVE UNDERLINE (ALWAYS VISIBLE) */
.nav-menu a.active::after {
  width: 100%;
}

/* ================= PREMIUM HAMBURGER ================= */
.menu-toggle {
  display: none;
  width: 32px;
  height: 24px;
  position: relative;
  cursor: pointer;
  transition: 0.3s ease;
}

/* LINES */
.menu-toggle span {
  position: absolute;
  width: 100%;
  height: 2.5px;
  background: #3b2f2f; /* coffee brown */
  left: 0;
  border-radius: 10px;
  transition: all 0.35s ease;
}

/* POSITION */
.menu-toggle span:nth-child(1) { top: 0; }
.menu-toggle span:nth-child(2) { top: 10px; width: 75%; }
.menu-toggle span:nth-child(3) { top: 20px; }

/* HOVER EFFECT */
.menu-toggle:hover span:nth-child(2) {
  width: 100%;
}

/* HOVER SCALE */
.menu-toggle:hover {
  transform: scale(1.08);
}

/* ACTIVE → X */
.menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg);
  top: 10px;
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
  transform: translateX(10px);
}

.menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg);
  top: 10px;
}

/* COLOR ON SCROLL */
.navbar.scrolled .menu-toggle span {
  background: #fff;
}

/* ================= ANIMATION ================= */
@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/* ================= MOBILE ================= */
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }

  .nav-menu {
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    background: #e2e1d2;
    backdrop-filter: blur(-20px);
    flex-direction: column;
    text-align: center;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
  }

  .nav-menu.active {
    min-height: 300px;
    padding-top: 20px;
  }

  .nav-menu a {
    color:  #6f4e37;
    padding: 8px 0;
  }
}



/* ===== HERO ===== */
.hero{
  position:relative;
  width:100%;
  height:100vh;
  overflow:hidden;
}

.slides{
  position:relative;
  width:100vw;
  height:100%;
   
}

.slide{
  position:absolute;
  width:100dvw;
  height:100vh;
  

  background-repeat:no-repeat;
  background-size:cover;       
  background-position:center;  

  opacity:0;
  transition:opacity 0.75s ease;
}

.slide.active{
  opacity:1;
}


/* ---------- DESKTOP IMAGES ---------- */
.slide-1{ background-image:url('img/hero\ lap\ 1.png'); }
.slide-2{ background-image:url('img/hero\ lap\ 2.png'); }
.slide-3{ background-image:url('img/hero\ lap\ 3.png'); }

/* ---------- HERO CONTENT (DESKTOP) ---------- */
.hero-content{
  position:absolute;
  z-index: 2;
  left:8%;
  bottom:35%;
}

.hero h2{
  font-family:'Mirado',serif;
  font-size:3rem;
  color:rgb(212, 212, 211);
}

.hero p{
  font-size:1.3rem; 
  color: #faebcd;
}

.hero-btn{
  display:inline-block;
  margin-top:20px;
  padding:10px 20px;
  border:1px solid brown;
  border-radius: 25px;
  color:#ffaa00;
  background-color: #3b2f2f;
  text-decoration:none;
  transition:0.3s;
}

.hero-btn:hover{
  background: #ffaa00;
  color:black;
}

/* ---------- MOBILE STYLES ---------- */
@media (max-width:768px){

  .slide{
  position:absolute;
  width:100dvw;
  height:100vh;
  }


  /* Mobile images */
  .slide-1{ background-image:url('img/hero\ mob\ 1.png'); }
  .slide-2{ background-image:url('img/hero\ mob\ 2.png'); }
  .slide-3{ background-image:url('img/hero\ mob\ 3.png'); }
  

  /* Center text */
  .hero-content{
    left:50%;
    right:auto;
    bottom:15%;
    transform:translateX(-50%);
    text-align:center;

    /* 🔥 Glass blur effect */
    background:rgba(255, 255, 255, 0.1);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);

    padding:20px;
    border-radius:16px;
    width:85%;
    max-width:320px;
  }


  .hero h1{
    font-size:2rem;
  }
}





/* =========================
   OUR STORY SECTION
========================= */

.story-section{
  width:100%;
  background:#f3efe6;
  padding:120px 8%;
  overflow:hidden;
  position:relative;
}

/* BLUR CIRCLES */

.blur-circle{
  position:absolute;
  width:320px;
  height:320px;
  border-radius:50%;
  filter:blur(100px);
  z-index:0;
}

.blur-1{
  top:-100px;
  left:-100px;
  background:rgba(179,139,85,0.15);
}

.blur-2{
  bottom:-120px;
  right:-120px;
  background:rgba(111,78,55,0.12);
}

/* CONTAINER */

.story-wrapper{
  max-width:1300px;
  margin:auto;

  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;

  position:relative;
  z-index:2;
}

/* ================= IMAGE SIDE ================= */

.story-image{
  position:relative;
  width:100%;
  height:720px;
  border-radius:35px;
  overflow:hidden;

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

.story-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:1s ease;
}

.story-image:hover img{
  transform:scale(1.05);
}

/* YEARS CARD */

.years-card{
  position:absolute;
  left:30px;
  bottom:30px;

  background:#ebe4c8;
  padding:22px 30px;

  border-radius:22px;

  display:flex;
  align-items:center;
  gap:18px;

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

.years-card h2{
  font-size:3rem;
  line-height:1;
  color:#2b1b14;
  font-family:serif;
}

.years-card span{
  font-size:15px;
  line-height:1.5;
  color:#5f5146;
}

/* ================= CONTENT SIDE ================= */

.story-content{
  width:100%;
}

.story-tag{
  color:#b38b55;
  font-size:13px;
  font-weight:600;
  letter-spacing:4px;
  margin-bottom:20px;
}

.story-content h1{
  font-size:4.8rem;
  line-height:0.95;
  color:#2b1b14;
  margin-bottom:30px;
  font-family:serif;
  font-weight:600;
}

.story-content p{
  font-size:1.1rem;
  line-height:1.9;
  color:#66584d;
  margin-bottom:28px;
}

/* BUTTON */

.story-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:18px 36px;

  border:1.5px solid #2b1b14;
  border-radius:50px;

  text-decoration:none;
  color:#2b1b14;

  font-weight:500;
  transition:0.4s ease;
}

.story-btn:hover{
  background:#2b1b14;
  color:#fff;
  transform:translateY(-3px);
}


/* REVEAL ANIMATION */

.reveal{
  opacity:0;
  transform:translateY(60px);
  transition:all 1s ease;
}

.reveal.show{
  opacity:1;
  transform:translateY(0);
}


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

@media(max-width:768px){

  .story-section{
    padding:80px 20px;
  }

  /* STACK LAYOUT */
  .story-wrapper{
    display:flex;
    flex-direction:column-reverse;
    gap:40px;
  }

  /* CONTENT FIRST */
  .story-content{
    width:100%;
    text-align:left;
  }

  .story-content h1{
    font-size:2.6rem;
    line-height:1.05;
    margin-bottom:20px;
  }

  .story-content p{
    font-size:1rem;
    line-height:1.8;
    margin-bottom:20px;
  }

  /* IMAGE BELOW */
  .story-image{
    width:100%;
    height:450px;
    border-radius:24px;
  }

  /* FLOATING CARD */
  .years-card{
    left:20px;
    bottom:20px;

    padding:14px 18px;
    border-radius:16px;
  }

  .years-card h2{
    font-size:2rem;
  }

  .years-card span{
    font-size:13px;
  }

  /* BUTTON */
  .story-btn{
    width:100%;
    padding:16px;
    text-align:center;
  }

}


/* =========================
   PREMIUM PRODUCTS SECTION
========================= */

.products-section{
  position:relative;
  width:100%;
  padding:120px 8%;
  background:#f5f1e8;
  overflow:hidden;
}

/* BLUR EFFECTS */

.products-section::before{
  content:"";
  position:absolute;
  top:-120px;
  left:-120px;

  width:320px;
  height:320px;

  background:rgba(179,139,85,0.12);
  border-radius:50%;
  filter:blur(100px);
}

.products-section::after{
  content:"";
  position:absolute;
  right:-120px;
  bottom:-120px;

  width:320px;
  height:320px;

  background:rgba(111,78,55,0.12);
  border-radius:50%;
  filter:blur(100px);
}

/* ================= TOP ================= */

.products-top{
  position:relative;
  z-index:2;

  max-width:850px;
  margin-bottom:70px;
}

.products-tag{
  display:inline-block;

  color:#b38b55;
  font-size:13px;
  font-weight:600;
  letter-spacing:4px;

  margin-bottom:20px;
}

.products-top h2{
  font-size:5rem;
  line-height:0.95;
  color:#2b1b14;

  margin-bottom:28px;

  font-family:serif;
  font-weight:600;
}

.products-top h2 span{
  color:#b38b55;
  font-style:italic;
}

.products-top p{
  font-size:1.15rem;
  line-height:1.9;
  color:#66584d;

  max-width:760px;
}

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

.products-grid{
  position:relative;
  z-index:2;

  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}

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

.product-card{
  position:relative;
  height:560px;

  border-radius:32px;
  overflow:hidden;

  cursor:pointer;

  box-shadow:
  0 15px 50px rgba(0,0,0,0.12);

  transition:0.5s ease;
}

.product-card:hover{
  transform:translateY(-12px);
}

.product-card img{
  width:100%;
  height:100%;
  object-fit:cover;

  transition:1.2s ease;
}

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

/* DARK OVERLAY */

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

  background:
  linear-gradient(
    to top,
    rgba(0,0,0,0.9),
    rgba(0,0,0,0.35),
    transparent
  );
}

/* CONTENT */

.product-content{
  position:absolute;
  left:34px;
  bottom:34px;
  z-index:3;
}

.product-content h3{
  font-size:2.4rem;
  line-height:1;

  color:#f5ead8;

  margin-bottom:18px;

  font-family:serif;
  font-weight:600;
}

.product-content p{
  color:#e5d9c8;

  font-size:1rem;
  line-height:1.7;

  margin-bottom:24px;

  max-width:280px;
}

/* LINK */

.product-content a{
  display:inline-flex;
  align-items:center;
  gap:8px;

  color:#e7c37c;
  text-decoration:none;

  font-weight:600;
  transition:0.3s ease;
}

.product-content a:hover{
  gap:14px;
}

/* ================= REVEAL ================= */

.reveal{
  opacity:0;
  transform:translateY(60px);
  transition:
  opacity 1s ease,
  transform 1s ease;
}

.reveal.show{
  opacity:1;
  transform:translateY(0);
}

/* =========================
   TABLET
========================= */

@media(max-width:1100px){

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

  .product-card{
    height:520px;
  }

}


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

@media(max-width:768px){
  .products-grid{
  position:relative;
  z-index:2;

  display:grid;
  grid-template-columns:1fr;
  gap:24px;
}


  .products-section{
    padding:80px 20px;
  }

  .products-top h2{
    font-size:2.7rem;
    line-height:1.1;
    margin-bottom:20px;
  }

  .products-top p{
    font-size:1rem;
    line-height:1.8;
  }

  .products-grid{
    gap:24px;
  }

  .product-card{
    height:420px;
    border-radius:24px;
  }

  .product-content{
    left:24px;
    bottom:24px;
  }

  .product-content h3{
    font-size:2rem;
    margin-bottom:14px;
  }

  .product-content p{
    font-size:15px;
    line-height:1.6;
    margin-bottom:18px;
  }

}





/* =========================
   WHY SECTION
========================= */

.why-section{
  position:relative;
  width:100%;
  padding:120px 8%;
  background:#f4efe7;
  overflow:hidden;
}

/* BACKGROUND BLUR */

.why-section::before{
  content:"";
  position:absolute;
  top:-120px;
  right:-120px;

  width:320px;
  height:320px;

  background:rgba(179,139,85,0.10);
  border-radius:50%;
  filter:blur(100px);
}

/* ================= TOP ================= */

.why-top{
  text-align:center;
  margin-bottom:70px;
}

.why-tag{
  display:inline-block;

  color:#b38b55;
  font-size:13px;
  font-weight:600;
  letter-spacing:4px;

  margin-bottom:22px;
}

.why-top h2{
  font-size:5rem;
  line-height:1;
  color:#2b1b14;

  font-family:serif;
  font-weight:600;

  max-width:950px;
  margin:auto;
}

.why-top h2 span{
  color:#b38b55;
  font-style:italic;
}

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

.why-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
}

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


/* =========================
   PREMIUM HOVER BORDER
========================= */

.why-card{
  position:relative;

  background:#ece7cf;
  padding:34px 30px;

  border-radius:28px;

  border:1.5px solid transparent;

  transition:
  transform 0.45s ease,
  box-shadow 0.45s ease,
  border-color 0.45s ease;

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

/* HOVER EFFECT */

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

  border-color:#3b2317; /* DARK BROWN */

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

/* ICON */

.why-icon{
  width:56px;
  height:56px;

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

  border-radius:18px;

  background:
  linear-gradient(
    135deg,
    #4a2416,
    #1d0d08
  );

  color:#d8b26d;
  font-size:24px;

  margin-bottom:28px;

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


/* TITLE */

.why-card h3{
  font-size:2rem;
  line-height:1.1;

  color:#2b1b14;

  margin-bottom:18px;

  font-family:serif;
  font-weight:600;
}

/* TEXT */

.why-card p{
  font-size:1.05rem;
  line-height:1.8;
  color:#5d534b;
}

/* ================= REVEAL ================= */

.reveal{
  opacity:0;
  transform:translateY(60px);
  transition:
  opacity 1s ease,
  transform 1s ease;
}

.reveal.show{
  opacity:1;
  transform:translateY(0);
}

/* =========================
   Tablet
========================= */
@media(max-width:1100px){

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

  .why-section{
    padding:100px 30px;
  }

  .why-top{
    margin-bottom:50px;
  }

  .why-top h2{
    font-size:3.8rem;
  }

}
/* =========================
   MOBILE
========================= */
@media(max-width:768px){

  .why-section{
    padding:80px 20px;
  }

  .why-top{
    margin-bottom:40px;
  }

  .why-top h2{
    font-size:2.7rem;
    line-height:1.1;
  }

  /* 2 COLUMN GRID */
  .why-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
  }

  .why-card{
    padding:22px 18px;
    border-radius:22px;
  }

  .why-icon{
    width:48px;
    height:48px;
    font-size:20px;
    margin-bottom:18px;
    border-radius:14px;
  }

  .why-card h3{
    font-size:1.2rem;
    line-height:1.3;
    margin-bottom:10px;
  }

  .why-card p{
    font-size:14px;
    line-height:1.6;
  }

}



/* =========================
   PROCESS SECTION
========================= */

.process-section{
  width:100%;
  background:#1a0702;
  overflow:hidden;
}

/* ================= TOP ================= */

.process-top{
  text-align:center;
  padding:110px 8% 80px;
}

.process-tag{
  display:inline-block;

  color:#c79c52;
  font-size:13px;
  font-weight:600;
  letter-spacing:4px;

  margin-bottom:20px;
}

.process-top h2 {
  font-size:5rem;
  line-height:1;

  color:#f8ecd8;

  margin-bottom:22px;

  font-family:serif;
  font-weight:600;
}




.process-top p{
  color:#d4b98d;

  font-size:1.15rem;
  line-height:1.8;
}

/* ================= TIMELINE ================= */

.process-line{
  width:78%;
  height:1px;

  background:rgba(199,156,82,0.35);

  margin:auto;
  position:relative;
  top:34px;
}

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

.process-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);

  gap:30px;

  padding:0 8% 110px;
}

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

.process-card{
  text-align:center;
  position:relative;
}

/* NUMBER */

.process-number{
  width:64px;
  height:64px;

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

  margin:0 auto 28px;

  border-radius:50%;

  border:2px solid #c79c52;

  color:#d4a85d;
  font-size:1.7rem;
  font-weight:600;
  font-family:serif;

  background:#2a0f08;

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

  transition:0.4s ease;
}

.process-card:hover .process-number{
  transform:translateY(-6px) scale(1.05);
  background:#c79c52;
  color:#1a0702;
}

/* TITLE */

.process-card h3{
  color:#796a4ad2;

  font-size:2rem;
  line-height:1.1;

  margin-bottom:16px;

  font-family:serif;
  font-weight:600;
}

/* TEXT */

.process-card p{
  color:#d7c3a0;

  font-size:1rem;
  line-height:1.8;

  max-width:260px;
  margin:auto;
}

/* ================= STATS ================= */

.stats-grid{
  background:#f3efe6;

  display:grid;
  grid-template-columns:repeat(4,1fr);

  gap:20px;

  padding:60px 8%;
}

/* STAT BOX */

.stats-grid{
  position:relative;

  background:
  linear-gradient(
    180deg,
    #f7f3eb,
    #efe7da
  );

  display:grid;
  grid-template-columns:repeat(4,1fr);

  gap:24px;

  padding:70px 8%;

  overflow:hidden;
}

/* BLUR GLOW */

.stats-grid::before{
  content:"";

  position:absolute;
  top:-120px;
  left:-120px;

  width:280px;
  height:280px;

  background:rgba(179,139,85,0.15);

  border-radius:50%;
  filter:blur(90px);
}

/* ================= STAT CARD ================= */

.stat-box{
  position:relative;

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

  backdrop-filter:blur(12px);

  border:1px solid rgba(90,50,20,0.08);

  border-radius:28px;

  padding:42px 24px;

  text-align:center;

  overflow:hidden;

  transition:
  transform 0.45s ease,
  box-shadow 0.45s ease,
  border-color 0.45s ease;
}

/* TOP LIGHT */

.stat-box::before{
  content:"";

  position:absolute;
  top:0;
  left:0;

  width:100%;
  height:1px;

  background:
  linear-gradient(
    90deg,
    transparent,
    rgba(179,139,85,0.8),
    transparent
  );
}

/* HOVER */

.stat-box:hover{
  transform:translateY(-10px);

  border-color:#5a2f1e;

  box-shadow:
  0 25px 50px rgba(60,30,10,0.12);
}

/* NUMBER */

.stat-box h3{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:4px;

  font-size:4.5rem;
  line-height:1;

  color:#2b1b14;

  margin-bottom:14px;

  font-family:serif;
  font-weight:600;
}

/* GOLD TEXT */

.stat-box h3 span{
  color:#b38b55;
  font-size:0.9em;
}

/* LABEL */

.stat-box p{
  color:#7d6f62;

  font-size:13px;
  letter-spacing:3px;
  line-height:1.6;

  font-weight:500;
}

/* ================= REVEAL ================= */

.reveal{
  opacity:0;
  transform:translateY(60px);
  transition:
  opacity 1s ease,
  transform 1s ease;
}

.reveal.show{
  opacity:1;
  transform:translateY(0);
}

/* =========================
   TABLET
========================= */

@media(max-width:1100px){

  .process-grid{
    grid-template-columns:repeat(2,1fr);
    row-gap:60px;
  }

  .stats-grid{
    grid-template-columns:repeat(2,1fr);
    row-gap:40px;
  }

  .process-line{
    display:none;
  }

}

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

@media(max-width:768px){

  .process-top{
    padding:80px 20px 50px;
  }

  .process-top h2{
    font-size:2.8rem;
    line-height:1.1;
  }

  .process-top p{
    font-size:1rem;
  }

  .process-grid{
    grid-template-columns:1fr;
    gap:50px;

    padding:0 20px 80px;
  }

  .process-card h3{
    font-size:1.7rem;
  }

  .process-card p{
    font-size:15px;
    line-height:1.7;
  }

  .process-number{
    width:58px;
    height:58px;
    font-size:1.4rem;
  }

  /* STATS */

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

    gap:30px;

    padding:50px 20px;
  }

  .stat-box h3{
    font-size:2.7rem;
  }

  .stat-box p{
    font-size:12px;
    letter-spacing:2px;
    line-height:1.5;
  }

}

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

@media(max-width:480px){

  .process-top h2{
    font-size:2.2rem;
  }

  .process-tag{
    font-size:11px;
    letter-spacing:3px;
  }

  .process-card h3{
    font-size:1.5rem;
  }

  .process-card p{
    font-size:14px;
  }

  .stats-grid{
    grid-template-columns:1fr 1fr;
    gap:24px;
  }

  .stat-box h3{
    font-size:2.2rem;
  }

  .stat-box p{
    font-size:11px;
  }

}



/* =========================
   TESTIMONIAL SECTION
========================= */

.testimonial-section{
  width:100%;
  padding:120px 0;
  background:#f4efe7;
  overflow:hidden;
}

/* ================= TOP ================= */


.testimonial-tag{
  display:inline-block;

  color:#b38b55;
  font-size:13px;
  font-weight:600;
  letter-spacing:4px;

  margin-bottom:20px;
}

.testimonial-top h2{
  font-size:5rem;
  line-height:1;

  color:#2b1b14;

  font-family:serif;
  font-weight:600;

  max-width:750px;
}

.testimonial-top h2 span{
  color:#b38b55;
  font-style:italic;
}

/* ================= SLIDER ================= */

.testimonial-slider{
  width:100%;
  overflow:hidden;
  position:relative;
}

.testimonial-track{
  display:flex;
  gap:30px;
  width:max-content;

  animation:scrollSlider 28s linear infinite;
}

/* AUTO SCROLL */

@keyframes scrollSlider{

  0%{
    transform:translateX(0);
  }

  100%{
    transform:translateX(-50%);
  }

}

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

.testimonial-card{
  width:420px;
  min-height:340px;

  background:#ece7cf;

  border-radius:30px;

  padding:36px 34px;

  border:1px solid rgba(90,50,20,0.08);

  transition:0.45s ease;

  flex-shrink:0;
}

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

  border-color:#4a281a;

  box-shadow:
  0 20px 40px rgba(60,30,10,0.08);
}

/* QUOTE */

.quote{
  font-size:5rem;
  line-height:1;

  color:#d5c091;

  margin-bottom:10px;

  font-family:serif;
}

/* TEXT */

.testimonial-card p{
  color:#5e5147;

  font-size:1.15rem;
  line-height:1.8;

  margin-bottom:30px;

  min-height:150px;
}

/* USER */

.testimonial-user{
  display:flex;
  align-items:center;
  gap:16px;

  padding-top:22px;

  border-top:1px solid rgba(90,50,20,0.08);
}

/* ICON */

.user-icon{
  width:54px;
  height:54px;

  border-radius:50%;

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

  background:
  linear-gradient(
    135deg,
    #5a2f1e,
    #c29a58
  );

  color:#fff5e8;

  font-weight:600;
  font-size:1.2rem;
}

/* INFO */

.user-info h4{
  color:#2b1b14;

  font-size:1.2rem;
  margin-bottom:6px;
}

.user-info span{
  color:#7b6d5f;

  font-size:14px;
  line-height:1.5;
}

/* PAUSE ON HOVER */

.testimonial-slider:hover .testimonial-track{
  animation-play-state:paused;
}

/* ================= REVEAL ================= */

.reveal{
  opacity:0;
  transform:translateY(60px);

  transition:
  opacity 1s ease,
  transform 1s ease;
}

.reveal.show{
  opacity:1;
  transform:translateY(0);
}



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

@media(max-width:768px){

  .testimonial-section{
    padding:80px 0;
  }

  .testimonial-top{
    padding:0 20px;
    margin-bottom:40px;
  }

  .testimonial-top h2{
    font-size:2.7rem;
    line-height:1.1;
  }

  .testimonial-card{
    width:300px;
    min-height:auto;

    padding:28px 24px;
    border-radius:24px;
  }

  .testimonial-card p{
    font-size:15px;
    line-height:1.7;
    min-height:auto;
  }

  .quote{
    font-size:4rem;
  }

  .user-icon{
    width:48px;
    height:48px;
    font-size:1rem;
  }

  .user-info h4{
    font-size:1rem;
  }

  .user-info span{
    font-size:13px;
  }

}



.premium-section{
  width:100%;
  padding:40px 20px;
}

.premium-container{
  max-width:1400px;
  margin:auto;

  background:linear-gradient(
    90deg,
    #2a0d06 0%,
    #180704 50%,
    #3a1b0d 100%
  );

  border-radius:32px;

  padding:70px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:60px;

  overflow:hidden;
}

/* LEFT SIDE */

.premium-content{
  flex:1;
  max-width:600px;
}

.premium-tag{
  display:inline-block;
  color:#c8a56a;
  letter-spacing:3px;
  font-size:14px;
  font-weight:600;
  margin-bottom:24px;
}

.premium-content h1{
  color:#f5eadb;
  font-size:64px;
  line-height:1.05;
  font-weight:700;
  margin-bottom:24px;
  font-family: Georgia, serif;
}

.premium-content h1 span{
  color:#c8a56a;
  font-style:italic;
}

.premium-content p{
  color:#cbb9aa;
  font-size:20px;
  line-height:1.7;
  margin-bottom:40px;
  max-width:520px;
}

.premium-buttons{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}

.btn-primary,
.btn-secondary{
  padding:18px 34px;
  border-radius:999px;
  text-decoration:none;
  font-size:18px;
  font-weight:600;
  transition:0.3s ease;
}

.btn-primary{
  background:#c8a56a;
  color:#1a120d;
  box-shadow:0 10px 30px rgba(200,165,106,0.35);
}

.btn-primary:hover{
  transform:translateY(-2px);
}

.btn-secondary{
  border:1px solid #c8a56a;
  color:#fff;
}

.btn-secondary:hover{
  background:#c8a56a;
  color:#1a120d;
}

/* RIGHT IMAGE */

.premium-image{
  flex:1;
  display:flex;
  justify-content:center;
}

.premium-image img{
  width:100%;
  max-width:500px;
  border-radius:28px;
  object-fit:cover;
}

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

@media (max-width:1100px){

  .premium-content h1{
    font-size:52px;
  }

  .premium-container{
    padding:50px;
  }
}

@media (max-width:900px){

  .premium-container{
    flex-direction:column;
    text-align:center;
    padding:40px 30px;
  }

  .premium-content{
    max-width:100%;
  }

  .premium-content p{
    margin-inline:auto;
  }

  .premium-buttons{
    justify-content:center;
  }

  .premium-content h1{
    font-size:44px;
  }
}

@media (max-width:600px){

  .premium-container{
    padding:30px 20px;
    border-radius:24px;
  }

  .premium-content h1{
    font-size:34px;
  }

  .premium-content p{
    font-size:16px;
  }

  .btn-primary,
  .btn-secondary{
    width:100%;
    text-align:center;
    padding:16px;
    font-size:16px;
  }

  .premium-image img{
    max-width:100%;
  }
}



/* =========================
   PREMIUM FOOTER
========================= */

.footer{
  position:relative;

  width:100%;

  background:#140603;

  padding:100px 8% 35px;

  overflow:hidden;
}

/* GLOW */

.footer::before{
  content:"";

  position:absolute;
  top:-120px;
  right:-120px;

  width:320px;
  height:320px;

  background:rgba(179,139,85,0.12);

  border-radius:50%;

  filter:blur(100px);
}

/* ================= TOP ================= */

.footer-top{
  position:relative;
  z-index:2;

  display:grid;
  grid-template-columns:1.3fr 1fr;

  gap:80px;

  margin-bottom:60px;
}

/* ================= BRAND ================= */

.footer-brand h2{
  color:#f7ead6;

  font-size:4rem;
  line-height:1;

  margin-bottom:24px;

  font-family:serif;
  font-weight:600;
}

.footer-brand p{
  color:#bcae9e;

  font-size:1.05rem;
  line-height:1.9;

  max-width:520px;

  margin-bottom:34px;
}

/* BUTTON */

.footer-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:16px 34px;

  border-radius:50px;

  border:1.5px solid #b38b55;

  color:#f7ead6;
  text-decoration:none;

  transition:0.4s ease;
}

.footer-btn:hover{
  background:#b38b55;
  color:#140603;

  transform:translateY(-4px);
}

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

.footer-links{
  display:grid;
  grid-template-columns:repeat(3,1fr);

  gap:40px;
}

.footer-col h3{
  color:#f7ead6;

  font-size:1.2rem;

  margin-bottom:24px;

  font-family:serif;
}

.footer-col a{
  display:block;

  color:#bcae9e;

  text-decoration:none;

  margin-bottom:14px;

  transition:0.3s ease;
}

.footer-col a:hover{
  color:#d4a85d;
  transform:translateX(4px);
}

/* ================= DIVIDER ================= */

.footer-line{
  width:100%;
  height:1px;

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

  margin-bottom:30px;
}

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

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

.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;
  flex-wrap:wrap;
}

.footer-bottom p{
  color:#8f8174;

  font-size:14px;
  line-height:1.7;
}

.managed{
  display:block;
  margin-top:4px;

  color:#b59d77;
}

.managed strong{
  color:#e0c28d;
  font-weight:600;
}

/* =========================
   SOCIAL ICONS
========================= */

.footer-socials{
  display:flex;
  align-items:center;
  gap:14px;
}

/* ICON BUTTON */

.social-link{
  width:48px;
  height:48px;

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

  border-radius:50%;

  text-decoration:none;

  color:#f6ead6;
  font-size:1.2rem;

  background:
  linear-gradient(
    135deg,
    rgba(255,255,255,0.06),
    rgba(255,255,255,0.02)
  );

  border:1px solid rgba(255,255,255,0.08);

  backdrop-filter:blur(10px);

  transition:
  transform 0.4s ease,
  background 0.4s ease,
  border-color 0.4s ease;
}

/* HOVER */

.social-link:hover{
  transform:translateY(-6px);

  background:
  linear-gradient(
    135deg,
    #5a2f1e,
    #b38b55
  );

  border-color:#caa56b;

  color:#fff;
}

/* GLOW */

.social-link::before{
  content:"";

  position:absolute;
  inset:0;

  border-radius:50%;

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

  opacity:0;

  transition:0.4s ease;
}

.social-link:hover::before{
  opacity:1;
}

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

@media(max-width:768px){

  .footer-bottom{
    flex-direction:column;
    align-items:center;

    text-align:center;
  }

  .footer-bottom p{
    font-size:13px;
  }

  .footer-socials{
    gap:12px;
  }

  .social-link{
    width:44px;
    height:44px;

    font-size:1.05rem;
  }

}

/* ================= REVEAL ================= */

.reveal{
  opacity:0;
  transform:translateY(60px);

  transition:
  opacity 1s ease,
  transform 1s ease;
}

.reveal.show{
  opacity:1;
  transform:translateY(0);
}

/* =========================
   FOOTER MAP
========================= */

.footer-map{
  width:100%;
  margin-top:70px;

  border-radius:30px;
  overflow:hidden;

  border:1px solid rgba(255,255,255,0.08);

  box-shadow:
  0 20px 50px rgba(0,0,0,0.25);
}

/* MAP */

.footer-map iframe{
  width:100%;
  height:420px;

  border:none;

  filter:grayscale(100%) contrast(1.1);
}


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


@media(max-width:768px){

  .footer{
    padding:80px 20px 30px;
  }

  .footer-top{
    display:flex;
    flex-direction:column;
    gap:50px;
  }

  /* ================= BRAND ================= */

  .footer-brand{
    text-align:center;
  }

  .footer-brand h2{
    font-size:2.7rem;
    line-height:1.1;
    margin-bottom:18px;
  }

  .footer-brand p{
    font-size:15px;
    line-height:1.8;
    margin-bottom:28px;

    max-width:500px;
    margin-inline:auto;
  }

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

  .footer-links{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:34px 20px;

    align-items:start;
  }

  /* COMPANY */
  .footer-col:nth-child(1){
    text-align:left;
    margin-left: 50px;
  }

  /* PRODUCTS */
  .footer-col:nth-child(2){
    text-align:left;
  }

  /* CONTACT FULL WIDTH CENTER */
  .footer-col:nth-child(3){
    grid-column:1 / -1;

    text-align:center;

    padding-top:10px;
  }

  .footer-col h3{
    font-size:1.1rem;
    margin-bottom:16px;
  }

  .footer-col a{
    font-size:14px;
    margin-bottom:12px;
  }

  @media(max-width:768px){

  .footer-map{
    margin-top:50px;
    border-radius:22px;
  }

  .footer-map iframe{
    height:260px;
  }

}
  /* ================= BOTTOM ================= */

  .footer-bottom{
    flex-direction:column;
    align-items:center;

    text-align:center;

    gap:18px;
  }

}



/* =========================
   PRODUCT HERO
========================= */

.product-hero{
  position:relative;

  width:100%;
  height:100vh;

  overflow:hidden;

  display:flex;
  align-items:center;

  padding:0 8%;

  background-image:
  url('img/coffee-roasts.jpeg');

  background-size:cover;
  background-position:center;
}

/* OVERLAY */

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

  background:
  linear-gradient(
    to right,
    rgba(10,5,2,0.88),
    rgba(10,5,2,0.45),
    rgba(10,5,2,0.15)
  );
}

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

.product-hero-content{
  position:relative;
  z-index:2;

  max-width:720px;
}

/* TAG */

.product-tag{
  display:inline-block;

  color:#d4a85d;

  font-size:13px;
  font-weight:600;
  letter-spacing:4px;

  margin-bottom:24px;
}

/* TITLE */

.product-hero-content h1{
  font-size:6rem;
  line-height:0.95;

  color:#f8ecd8;

  margin-bottom:28px;

  font-family:serif;
  font-weight:600;
}

/* TEXT */

.product-hero-content p{
  color:#e2d2be;

  font-size:1.15rem;
  line-height:1.9;

  max-width:620px;

  margin-bottom:40px;
}

/* BUTTONS */

.product-hero-buttons{
  display:flex;
  align-items:center;
  gap:18px;
}

/* DARK BUTTON */

.hero-btn-dark{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:16px 34px;

  border-radius:50px;

  background:#c79c52;

  color:#140603;
  text-decoration:none;

  font-weight:600;

  transition:0.4s ease;
}

.hero-btn-dark:hover{
  transform:translateY(-5px);

  background:#ddb26b;
}

/* LIGHT BUTTON */

.hero-btn-light{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:16px 34px;

  border-radius:50px;

  border:1.5px solid rgba(255,255,255,0.18);

  color:#f8ecd8;
  text-decoration:none;

  backdrop-filter:blur(10px);

  transition:0.4s ease;
}

.hero-btn-light:hover{
  background:rgba(255,255,255,0.08);

  transform:translateY(-5px);
}

/* ================= REVEAL ================= */

.reveal{
  opacity:0;
  transform:translateY(60px);

  transition:
  opacity 1s ease,
  transform 1s ease;
}

.reveal.show{
  opacity:1;
  transform:translateY(0);
}


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

@media(max-width:768px){

  .product-hero{
    height:100vh;

    padding:120px 20px 80px;

    align-items:flex-end;

    background-position:center;
  }

  .product-overlay{
    background:
    linear-gradient(
      to top,
      rgba(10,5,2,0.92),
      rgba(10,5,2,0.55),
      rgba(10,5,2,0.15)
    );
  }

  .product-hero-content{
    width:100%;
  }

  .product-tag{
    font-size:11px;
    letter-spacing:3px;
  }

  .product-hero-content h1{
    font-size:3rem;
    line-height:1;
    margin-bottom:20px;
  }

  .product-hero-content p{
    font-size:15px;
    line-height:1.8;

    margin-bottom:28px;
  }

  .product-hero-buttons{
    flex-direction:column;
    width:100%;
  }

  .hero-btn-dark,
  .hero-btn-light{
    width:100%;
    padding:15px;
  }

}



/* =========================
   PRODUCT CATEGORIES
========================= */

.categories-section{
  width:100%;
  padding:120px 8%;
  background:#f4efe7;

  overflow:hidden;
}

/* ================= TOP ================= */

.categories-top{
  text-align:center;

  max-width:850px;
  margin:0 auto 70px;
}

.categories-tag{
  display:inline-block;

  color:#b38b55;

  font-size:13px;
  font-weight:600;
  letter-spacing:4px;

  margin-bottom:22px;
}

.categories-top h2{
  font-size:5rem;
  line-height:1;

  color:#2b1b14;

  margin-bottom:24px;

  font-family:serif;
  font-weight:600;
}

.categories-top p{
  color:#6f6257;

  font-size:1.1rem;
  line-height:1.9;
}

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

.categories-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);

  gap:30px;
}

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

.category-card{
  position:relative;

  background:#ece7cf;

  border-radius:32px;

  overflow:hidden;

  transition:0.45s ease;

  box-shadow:
  0 15px 40px rgba(0,0,0,0.06);
}

.category-card:hover{
  transform:translateY(-12px);

  box-shadow:
  0 25px 60px rgba(0,0,0,0.10);
}

/* IMAGE */

.category-image{
  height:300px;
  overflow:hidden;
}

.category-image img{
  width:100%;
  height:100%;

  object-fit:cover;

  transition:1s ease;
}

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

/* CONTENT */

.category-content{
  padding:34px 30px;
}

/* NUMBER */

.category-content span{
  display:inline-block;

  color:#b38b55;

  font-size:14px;
  font-weight:600;
  letter-spacing:2px;

  margin-bottom:18px;
}

/* TITLE */

.category-content h3{
  font-size:2.2rem;
  line-height:1.1;

  color:#2b1b14;

  margin-bottom:18px;

  font-family:serif;
  font-weight:600;
}

/* TEXT */

.category-content p{
  color:#66584d;

  font-size:1rem;
  line-height:1.8;

  margin-bottom:24px;
}

/* LINK */

.category-content a{
  color:#5a2f1e;

  text-decoration:none;

  font-weight:600;

  transition:0.3s ease;
}

.category-content a:hover{
  color:#b38b55;
  letter-spacing:1px;
}

/* ================= REVEAL ================= */

.reveal{
  opacity:0;
  transform:translateY(60px);

  transition:
  opacity 1s ease,
  transform 1s ease;
}

.reveal.show{
  opacity:1;
  transform:translateY(0);
}

@media(max-width:1100px){

  .categories-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);

    gap:24px;
  }

  .category-card{
    border-radius:28px;
  }

  .category-image{
    height:260px;
  }

  .category-content{
    padding:28px 24px;
  }

  .category-content h3{
    font-size:1.9rem;
  }

}

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

@media(max-width:768px){

  .categories-section{
    padding:80px 20px;
  }

  .categories-top{
    margin-bottom:45px;
  }

  .categories-top h2{
    font-size:2.8rem;
    line-height:1.1;
  }

  .categories-top p{
    font-size:15px;
    line-height:1.8;
  }

  .categories-grid{
    grid-template-columns:1fr;
    gap:24px;
  }

  .category-card{
    border-radius:24px;
  }

  .category-image{
    height:240px;
  }

  .category-content{
    padding:26px 22px;
  }

  .category-content h3{
    font-size:1.8rem;
  }

  .category-content p{
    font-size:14px;
    line-height:1.7;
  }

}


/* =========================
   FEATURED PRODUCT
========================= */

.featured-product{
  width:100%;

  padding:120px 8%;

  background:#140603;

  display:grid;
  grid-template-columns:1fr 1fr;

  gap:70px;
  align-items:center;

  overflow:hidden;
}

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

.featured-image{
  position:relative;

  height:720px;

  border-radius:34px;

  overflow:hidden;

  box-shadow:
  0 25px 70px rgba(0,0,0,0.35);
}

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

  object-fit:cover;

  transition:1.2s ease;
}

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

/* FLOATING CARD */

.floating-badge{
  position:absolute;

  left:30px;
  bottom:30px;

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

  backdrop-filter:blur(14px);

  border:1px solid rgba(255,255,255,0.10);

  padding:24px 26px;

  border-radius:24px;
}

.floating-badge span{
  display:block;

  color:#d4a85d;

  font-size:12px;
  letter-spacing:3px;

  margin-bottom:10px;
}

.floating-badge h4{
  color:#fff4df;

  font-size:1.5rem;
  line-height:1.3;

  font-family:serif;
}

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

.featured-content{
  max-width:650px;
}

.featured-tag{
  display:inline-block;

  color:#c79c52;

  font-size:13px;
  font-weight:600;
  letter-spacing:4px;

  margin-bottom:22px;
}

/* TITLE */

.featured-content h2{
  color:#f8ecd8;

  font-size:5rem;
  line-height:0.98;

  margin-bottom:28px;

  font-family:serif;
  font-weight:600;
}

/* TEXT */

.featured-content p{
  color:#d5c3ae;

  font-size:1.08rem;
  line-height:1.9;

  margin-bottom:40px;
}

/* ================= SPECS ================= */

.feature-specs{
  display:grid;
  grid-template-columns:repeat(2,1fr);

  gap:20px;

  margin-bottom:42px;
}

/* BOX */

.spec-box{
  background:rgba(255,255,255,0.05);

  border:1px solid rgba(255,255,255,0.08);

  border-radius:22px;

  padding:24px;
}

.spec-box h3{
  color:#f4e7d5;

  font-size:1.15rem;

  margin-bottom:10px;
}

.spec-box span{
  color:#bdaea0;

  font-size:15px;
}

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

.featured-buttons{
  display:flex;
  align-items:center;
  gap:18px;
}

/* DARK BUTTON */

.featured-btn-dark{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:16px 34px;

  border-radius:50px;

  background:#c79c52;

  color:#140603;
  text-decoration:none;

  font-weight:600;

  transition:0.4s ease;
}

.featured-btn-dark:hover{
  transform:translateY(-5px);

  background:#ddb26b;
}

/* LIGHT BUTTON */

.featured-btn-light{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:16px 34px;

  border-radius:50px;

  border:1px solid rgba(255,255,255,0.14);

  color:#f8ecd8;
  text-decoration:none;

  transition:0.4s ease;
}

.featured-btn-light:hover{
  background:rgba(255,255,255,0.06);

  transform:translateY(-5px);
}

/* ================= REVEAL ================= */

.reveal{
  opacity:0;
  transform:translateY(60px);

  transition:
  opacity 1s ease,
  transform 1s ease;
}

.reveal.show{
  opacity:1;
  transform:translateY(0);
}

/* =========================
   TABLET
========================= */

@media(max-width:1100px){

  .featured-product{
    grid-template-columns:1fr;

    gap:50px;
  }

  .featured-image{
    height:620px;
  }

  .featured-content h2{
    font-size:4rem;
  }

}

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

@media(max-width:768px){

  .featured-product{
    padding:80px 20px;

    gap:40px;
  }

  .featured-image{
    height:420px;

    border-radius:24px;
  }

  .floating-badge{
    left:18px;
    bottom:18px;

    padding:18px 20px;

    border-radius:18px;
  }

  .floating-badge h4{
    font-size:1.1rem;
  }

  .featured-tag{
    font-size:11px;
    letter-spacing:3px;
  }

  .featured-content h2{
    font-size:2.8rem;
    line-height:1.05;
  }

  .featured-content p{
    font-size:15px;
    line-height:1.8;

    margin-bottom:30px;
  }

  /* SPECS */

  .feature-specs{
    grid-template-columns:1fr 1fr;

    gap:14px;

    margin-bottom:30px;
  }

  .spec-box{
    padding:18px;
    border-radius:18px;
  }

  .spec-box h3{
    font-size:1rem;
  }

  .spec-box span{
    font-size:13px;
  }

  /* BUTTONS */

  .featured-buttons{
    flex-direction:column;
    width:100%;
  }

  .featured-btn-dark,
  .featured-btn-light{
    width:100%;
    padding:15px;
  }

}


/* =========================
   PRODUCT SHOWCASE
========================= */

.showcase-section{
  width:100%;
  padding:120px 8%;
  background:#f4efe7;

  overflow:hidden;
}

/* ================= TOP ================= */

.showcase-top{
  text-align:center;

  max-width:800px;
  margin:0 auto 70px;
}

.showcase-tag{
  display:inline-block;

  color:#b38b55;

  font-size:13px;
  font-weight:600;
  letter-spacing:4px;

  margin-bottom:20px;
}

.showcase-top h2{
  font-size:5rem;
  line-height:1;

  color:#2b1b14;

  margin-bottom:22px;

  font-family:serif;
  font-weight:600;
}

.showcase-top p{
  color:#6f6257;

  font-size:1.08rem;
  line-height:1.9;
}

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

.showcase-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);

  gap:30px;
}

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

.showcase-card{
  background:#ece7cf;

  border-radius:30px;

  overflow:hidden;

  transition:0.45s ease;

  box-shadow:
  0 15px 45px rgba(0,0,0,0.06);
}

.showcase-card:hover{
  transform:translateY(-12px);

  box-shadow:
  0 30px 60px rgba(0,0,0,0.10);
}

/* IMAGE */

.showcase-image{
  position:relative;

  height:340px;

  overflow:hidden;
}

.showcase-image img{
  width:100%;
  height:100%;

  object-fit:cover;

  transition:1s ease;
}

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

/* LABEL */

.product-label{
  position:absolute;

  top:20px;
  left:20px;

  padding:10px 16px;

  background:rgba(20,6,3,0.75);

  backdrop-filter:blur(10px);

  border-radius:50px;

  color:#f7ead6;

  font-size:11px;
  letter-spacing:2px;
}

/* CONTENT */

.showcase-content{
  padding:30px;
}

/* CATEGORY */

.showcase-content span{
  display:inline-block;

  color:#b38b55;

  font-size:12px;
  letter-spacing:3px;

  margin-bottom:16px;
}

/* TITLE */

.showcase-content h3{
  font-size:2rem;
  line-height:1.1;

  color:#2b1b14;

  margin-bottom:16px;

  font-family:serif;
}

/* TEXT */

.showcase-content p{
  color:#66584d;

  font-size:1rem;
  line-height:1.8;

  margin-bottom:26px;
}

/* META */

.coffee-meta{
  display:flex;
  gap:14px;

  margin-bottom:28px;
}

.coffee-meta div{
  flex:1;

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

  border-radius:18px;

  padding:14px;
}

.coffee-meta small{
  display:block;

  color:#8a7a6b;

  font-size:11px;

  margin-bottom:6px;

  letter-spacing:2px;
}

.coffee-meta strong{
  color:#2b1b14;

  font-size:14px;
}

/* BUTTON */

.showcase-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:100%;

  padding:15px;

  border-radius:50px;

  background:#2b1b14;

  color:#f7ead6;
  text-decoration:none;

  transition:0.4s ease;
}

.showcase-btn:hover{
  background:#b38b55;

  color:#140603;
}

/* ================= REVEAL ================= */

.reveal{
  opacity:0;
  transform:translateY(60px);

  transition:
  opacity 1s ease,
  transform 1s ease;
}

.reveal.show{
  opacity:1;
  transform:translateY(0);
}

/* =========================
   TABLET
========================= */

@media(max-width:1100px){

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

}

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

@media(max-width:768px){

  .showcase-section{
    padding:80px 20px;
  }

  .showcase-top{
    margin-bottom:45px;
  }

  .showcase-top h2{
    font-size:2.8rem;
    line-height:1.1;
  }

  .showcase-top p{
    font-size:15px;
    line-height:1.8;
  }

  .showcase-grid{
    grid-template-columns:1fr;
    gap:24px;
  }

  .showcase-card{
    border-radius:24px;
  }

  .showcase-image{
    height:260px;
  }

  .showcase-content{
    padding:24px 20px;
  }

  .showcase-content h3{
    font-size:1.7rem;
  }

  .showcase-content p{
    font-size:14px;
    line-height:1.7;
  }

  .coffee-meta{
    flex-direction:column;
  }

}

/* =========================
   ROAST PROFILE SECTION
========================= */

.roast-section{
  width:100%;
  padding:120px 8%;
  background:#140603;

  overflow:hidden;
}

/* ================= TOP ================= */

.roast-top{
  text-align:center;

  max-width:850px;
  margin:0 auto 70px;
}

.roast-tag{
  display:inline-block;

  color:#c79c52;

  font-size:13px;
  font-weight:600;
  letter-spacing:4px;

  margin-bottom:20px;
}

.roast-top h2{
  color:#f7ead6;

  font-size:5rem;
  line-height:1;

  margin-bottom:24px;

  font-family:serif;
  font-weight:600;
}

.roast-top p{
  color:#d0bda7;

  font-size:1.08rem;
  line-height:1.9;
}

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

.roast-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);

  gap:30px;
}

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

.roast-card{
  background:rgba(255,255,255,0.04);

  border:1px solid rgba(255,255,255,0.08);

  border-radius:30px;

  padding:34px 30px;

  transition:0.45s ease;
}

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

  border-color:#c79c52;

  box-shadow:
  0 20px 50px rgba(0,0,0,0.25);
}

/* ROAST LABEL */

.roast-level{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:10px 18px;

  border-radius:50px;

  font-size:12px;
  letter-spacing:2px;

  margin-bottom:24px;
}

/* COLORS */

.light{
  background:#f0d9b0;
  color:#4b2d14;
}

.medium{
  background:#b97a45;
  color:#fff;
}

.dark{
  background:#3b2317;
  color:#f7ead6;
}

/* TITLE */

.roast-card h3{
  color:#fff4df;

  font-size:2rem;
  line-height:1.1;

  margin-bottom:18px;

  font-family:serif;
}

/* TEXT */

.roast-card p{
  color:#c9b49a;

  font-size:1rem;
  line-height:1.8;

  margin-bottom:30px;
}

/* ================= BARS ================= */

.roast-bars{
  display:flex;
  flex-direction:column;

  gap:18px;
}

/* ITEM */

.bar-item span{
  display:block;

  color:#f7ead6;

  font-size:14px;

  margin-bottom:8px;
}

/* BAR */

.bar{
  width:100%;
  height:10px;

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

  border-radius:50px;

  overflow:hidden;
}

/* FILL */

.fill{
  height:100%;

  border-radius:50px;

  background:
  linear-gradient(
    90deg,
    #7c4b2a,
    #d4a85d
  );
}

/* ================= REVEAL ================= */

.reveal{
  opacity:0;
  transform:translateY(60px);

  transition:
  opacity 1s ease,
  transform 1s ease;
}

.reveal.show{
  opacity:1;
  transform:translateY(0);
}

/* =========================
   TABLET
========================= */

@media(max-width:1100px){

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

}

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

@media(max-width:768px){

  .roast-section{
    padding:80px 20px;
  }

  .roast-top{
    margin-bottom:45px;
  }

  .roast-top h2{
    font-size:2.8rem;
    line-height:1.1;
  }

  .roast-top p{
    font-size:15px;
    line-height:1.8;
  }

  .roast-grid{
    grid-template-columns:1fr;
    gap:22px;
  }

  .roast-card{
    padding:24px 20px;

    border-radius:22px;
  }

  .roast-card h3{
    font-size:1.7rem;
  }

  .roast-card p{
    font-size:14px;
    line-height:1.7;
  }

}




/* =========================
   BULK SUPPLY BANNER
========================= */

.bulk-banner{
  position:relative;

  width:100%;
  padding:120px 8%;

  overflow:hidden;

  background:
  linear-gradient(
    135deg,
    #1b0b06,
    #2b140c,
    #140603
  );
}

/* ================= GLOW ================= */

.bulk-glow{
  position:absolute;

  border-radius:50%;

  filter:blur(120px);

  opacity:0.18;
}

.bulk-glow-1{
  width:320px;
  height:320px;

  background:#c79c52;

  top:-80px;
  left:-60px;
}

.bulk-glow-2{
  width:280px;
  height:280px;

  background:#7c4b2a;

  right:-60px;
  bottom:-80px;
}

/* ================= WRAPPER ================= */

.bulk-wrapper{
  position:relative;
  z-index:2;

  display:grid;
  grid-template-columns:1.2fr 1fr;

  gap:60px;
  align-items:center;

  padding:70px;

  border-radius:40px;

  background:
  linear-gradient(
    135deg,
    rgba(255,255,255,0.06),
    rgba(255,255,255,0.02)
  );

  border:1px solid rgba(255,255,255,0.08);

  backdrop-filter:blur(16px);

  box-shadow:
  0 25px 80px rgba(0,0,0,0.35);
}

/* ================= LEFT ================= */

.bulk-tag{
  display:inline-block;

  color:#d4a85d;

  font-size:13px;
  font-weight:600;
  letter-spacing:4px;

  margin-bottom:24px;
}

/* TITLE */

.bulk-left h2{
  color:#f8ecd8;

  font-size:5rem;
  line-height:0.98;

  margin-bottom:28px;

  font-family:serif;
  font-weight:600;
}

/* TEXT */

.bulk-left p{
  color:#d4c0a8;

  font-size:1.08rem;
  line-height:1.9;

  max-width:650px;
}

/* ================= RIGHT ================= */

.bulk-right{
  display:flex;
  flex-direction:column;

  gap:34px;
}

/* ================= STATS ================= */

.bulk-stats{
  display:grid;
  grid-template-columns:1fr;

  gap:18px;
}

/* STAT */

.bulk-stat{
  padding:24px 26px;

  border-radius:24px;

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

  border:1px solid rgba(255,255,255,0.08);

  transition:0.4s ease;
}

.bulk-stat:hover{
  transform:translateY(-6px);

  border-color:#c79c52;
}

/* NUMBER */

.bulk-stat h3{
  color:#f8ecd8;

  font-size:2.5rem;

  margin-bottom:8px;

  font-family:serif;
}

/* TEXT */

.bulk-stat span{
  color:#c8b49a;

  font-size:15px;
}

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

.bulk-buttons{
  display:flex;
  gap:16px;
}

/* DARK BUTTON */

.bulk-btn-dark{
  flex:1;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:16px 24px;

  border-radius:50px;

  background:#c79c52;

  color:#140603;
  text-decoration:none;

  font-weight:600;

  transition:0.4s ease;
}

.bulk-btn-dark:hover{
  background:#ddb26b;

  transform:translateY(-4px);
}

/* LIGHT BUTTON */

.bulk-btn-light{
  flex:1;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:16px 24px;

  border-radius:50px;

  border:1px solid rgba(255,255,255,0.14);

  color:#f8ecd8;
  text-decoration:none;

  transition:0.4s ease;
}

.bulk-btn-light:hover{
  background:rgba(255,255,255,0.06);

  transform:translateY(-4px);
}

/* ================= REVEAL ================= */

.reveal{
  opacity:0;
  transform:translateY(60px);

  transition:
  opacity 1s ease,
  transform 1s ease;
}

.reveal.show{
  opacity:1;
  transform:translateY(0);
}

/* =========================
   TABLET
========================= */

@media(max-width:1100px){

  .bulk-wrapper{
    grid-template-columns:1fr;

    padding:50px;
  }

  .bulk-left h2{
    font-size:4rem;
  }

}

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

@media(max-width:768px){

  .bulk-banner{
    padding:80px 20px;
  }

  .bulk-wrapper{
    padding:32px 24px;

    border-radius:28px;

    gap:40px;
  }

  .bulk-tag{
    font-size:11px;
    letter-spacing:3px;
  }

  .bulk-left h2{
    font-size:2.7rem;
    line-height:1.05;

    margin-bottom:20px;
  }

  .bulk-left p{
    font-size:15px;
    line-height:1.8;
  }

  /* STATS */

  .bulk-stats{
    gap:14px;
  }

  .bulk-stat{
    padding:20px;
    border-radius:20px;
  }

  .bulk-stat h3{
    font-size:2rem;
  }

  .bulk-stat span{
    font-size:14px;
  }

  /* BUTTONS */

  .bulk-buttons{
    flex-direction:column;
  }

  .bulk-btn-dark,
  .bulk-btn-light{
    width:100%;
    padding:15px;
  }

}


/* =========================
   CTA SECTION
========================= */

.cta-section{
  position:relative;

  width:100%;
  padding:120px 8%;

  overflow:hidden;

  background:
  linear-gradient(
    135deg,
    #140603,
    #2b140c,
    #1b0b06
  );
}

/* ================= GLOW ================= */

.cta-glow{
  position:absolute;

  border-radius:50%;

  filter:blur(120px);

  opacity:0.18;
}

.cta-glow-1{
  width:320px;
  height:320px;

  background:#c79c52;

  top:-80px;
  left:-60px;
}

.cta-glow-2{
  width:280px;
  height:280px;

  background:#7c4b2a;

  right:-60px;
  bottom:-80px;
}

/* ================= WRAPPER ================= */

.cta-wrapper{
  position:relative;
  z-index:2;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:50px;

  padding:70px;

  border-radius:40px;

  background:
  linear-gradient(
    135deg,
    rgba(255,255,255,0.06),
    rgba(255,255,255,0.02)
  );

  border:1px solid rgba(255,255,255,0.08);

  backdrop-filter:blur(16px);

  box-shadow:
  0 25px 80px rgba(0,0,0,0.35);
}

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

.cta-content{
  max-width:720px;
}

.cta-tag{
  display:inline-block;

  color:#d4a85d;

  font-size:13px;
  font-weight:600;
  letter-spacing:4px;

  margin-bottom:24px;
}

/* TITLE */

.cta-content h2{
  color:#f8ecd8;

  font-size:5rem;
  line-height:0.98;

  margin-bottom:28px;

  font-family:serif;
  font-weight:600;
}

/* TEXT */

.cta-content p{
  color:#d4c0a8;

  font-size:1.08rem;
  line-height:1.9;
}

/* ================= ACTION ================= */

.cta-action{
  display:flex;
  flex-direction:column;

  gap:18px;

  min-width:280px;
}

/* PRIMARY BUTTON */

.cta-btn-primary{
  display:flex;
  align-items:center;
  justify-content:center;

  padding:18px 28px;

  border-radius:50px;

  background:#c79c52;

  color:#140603;
  text-decoration:none;

  font-weight:600;

  transition:0.4s ease;
}

.cta-btn-primary:hover{
  background:#ddb26b;

  transform:translateY(-4px);
}

/* SECONDARY BUTTON */

.cta-btn-secondary{
  display:flex;
  align-items:center;
  justify-content:center;

  padding:18px 28px;

  border-radius:50px;

  border:1px solid rgba(255,255,255,0.14);

  color:#f8ecd8;
  text-decoration:none;

  transition:0.4s ease;
}

.cta-btn-secondary:hover{
  background:rgba(255,255,255,0.06);

  transform:translateY(-4px);
}

/* ================= REVEAL ================= */

.reveal{
  opacity:0;
  transform:translateY(60px);

  transition:
  opacity 1s ease,
  transform 1s ease;
}

.reveal.show{
  opacity:1;
  transform:translateY(0);
}

/* =========================
   TABLET
========================= */

@media(max-width:1100px){

  .cta-wrapper{
    flex-direction:column;
    align-items:flex-start;

    padding:50px;
  }

  .cta-content h2{
    font-size:4rem;
  }

  .cta-action{
    width:100%;

    flex-direction:row;
  }

  .cta-btn-primary,
  .cta-btn-secondary{
    flex:1;
  }

}

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

@media(max-width:768px){

  .cta-section{
    padding:80px 20px;
  }

  .cta-wrapper{
    padding:34px 24px;

    border-radius:28px;

    gap:36px;
  }

  .cta-tag{
    font-size:11px;
    letter-spacing:3px;
  }

  .cta-content h2{
    font-size:2.7rem;
    line-height:1.05;

    margin-bottom:20px;
  }

  .cta-content p{
    font-size:15px;
    line-height:1.8;
  }

  .cta-action{
    flex-direction:column;

    width:100%;
  }

  .cta-btn-primary,
  .cta-btn-secondary{
    width:100%;
    padding:15px;
  }

}


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

.about-hero{
  position:relative;

  width:100%;
  height:100vh;

  overflow:hidden;

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

  padding:0 8%;

  background-image:url('img/-coffee-424970.webp');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

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

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

  background:
  linear-gradient(
    to right,
    rgba(0,0,0,0.78),
    rgba(0,0,0,0.35),
    rgba(0,0,0,0.2)
  );
}

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

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

  max-width:850px;
}

/* TAG */

.about-tag{
  display:inline-block;

  color:#d4a85d;

  font-size:13px;
  font-weight:600;
  letter-spacing:4px;

  margin-bottom:26px;
}

/* TITLE */

.about-content h1{
  color:#f8ecd8;

  font-size:6rem;
  line-height:0.95;

  margin-bottom:30px;

  font-family:serif;
  font-weight:600;
}

/* TEXT */

.about-content p{
  color:#e0cfbc;

  font-size:1.1rem;
  line-height:1.9;

  max-width:700px;

  margin-bottom:38px;
}

/* BUTTONS */

.about-buttons{
  display:flex;
  gap:18px;
}

/* DARK BTN */

.about-btn-dark{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:18px 34px;

  border-radius:50px;

  background:#c79c52;

  color:#140603;
  text-decoration:none;

  font-weight:600;

  transition:0.4s ease;
}

.about-btn-dark:hover{
  background:#ddb26b;

  transform:translateY(-4px);
}

/* LIGHT BTN */

.about-btn-light{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:18px 34px;

  border-radius:50px;

  border:1px solid rgba(255,255,255,0.15);

  color:#f8ecd8;
  text-decoration:none;

  transition:0.4s ease;
}

.about-btn-light:hover{
  background:rgba(255,255,255,0.08);

  transform:translateY(-4px);
}

/* ================= SCROLL ================= */

.scroll-down{
  position:absolute;

  bottom:40px;
  left:50%;

  transform:translateX(-50%);

  color:#f8ecd8;

  font-size:12px;
  letter-spacing:4px;

  writing-mode:vertical-rl;

  animation:scrollMove 2s infinite;
}

/* ANIMATION */

@keyframes scrollMove{

  0%{
    transform:translateX(-50%) translateY(0);
  }

  50%{
    transform:translateX(-50%) translateY(10px);
  }

  100%{
    transform:translateX(-50%) translateY(0);
  }

}

/* ================= REVEAL ================= */

.reveal{
  opacity:0;
  transform:translateY(60px);

  transition:
  opacity 1s ease,
  transform 1s ease;
}

.reveal.show{
  opacity:1;
  transform:translateY(0);
}

/* =========================
   TABLET
========================= */

@media(max-width:1100px){

  .about-content h1{
    font-size:4.8rem;
  }

}

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

@media(max-width:768px){

  .about-hero{
    height:100vh;

    padding:0 20px;

    align-items:flex-end;
  }

  .about-overlay{
    background:
    linear-gradient(
      to top,
      rgba(0,0,0,0.85),
      rgba(0,0,0,0.35)
    );
  }

  .about-content{
    padding-bottom:90px;
  }

  .about-tag{
    font-size:11px;
    letter-spacing:3px;
  }

  .about-content h1{
    font-size:2.9rem;
    line-height:1.05;

    margin-bottom:20px;
  }

  .about-content p{
    font-size:15px;
    line-height:1.8;

    margin-bottom:28px;
  }

  .about-buttons{
    flex-direction:column;
  }

  .about-btn-dark,
  .about-btn-light{
    width:100%;
    padding:15px;
  }

  .scroll-down{
    display:none;
  }

}

/* =========================
   ABOUT STORY SECTION
========================= */

.about-story-section{
  position:relative;

  width:100%;
  padding:120px 8%;

  background:#f4efe7;

  overflow:hidden;
}

/* ================= BLUR ================= */

.story-blur{
  position:absolute;

  border-radius:50%;

  filter:blur(120px);

  opacity:0.12;
}

.story-blur-1{
  width:320px;
  height:320px;

  background:#c79c52;

  top:-80px;
  left:-60px;
}

.story-blur-2{
  width:260px;
  height:260px;

  background:#7c4b2a;

  right:-60px;
  bottom:-80px;
}

/* ================= WRAPPER ================= */

.about-story-wrapper{
  position:relative;
  z-index:2;

  max-width:1300px;
  margin:auto;

  display:grid;
  grid-template-columns:1fr 1fr;

  gap:80px;
  align-items:center;
}

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

.about-story-image{
  position:relative;

  height:700px;

  border-radius:34px;

  overflow:hidden;

  box-shadow:
  0 25px 70px rgba(0,0,0,0.12);
}

.about-story-image img{
  width:100%;
  height:100%;

  object-fit:cover;

  transition:1s ease;
}

.about-story-image:hover img{
  transform:scale(1.08);
}

/* FLOAT CARD */

.story-floating-card{
  position:absolute;

  left:30px;
  bottom:30px;

  padding:24px 28px;

  border-radius:24px;

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

  backdrop-filter:blur(14px);

  border:1px solid rgba(255,255,255,0.2);

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

.story-floating-card h3{
  color:#e2ae20;

  font-size:2rem;

  margin-bottom:10px;

  font-family:serif;
}

.story-floating-card p{
  color:#f7ead6;

  font-size:14px;
  line-height:1.7;
}

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

.about-story-tag{
  display:inline-block;

  color:#b38b55;

  font-size:13px;
  font-weight:600;
  letter-spacing:4px;

  margin-bottom:22px;
}

/* TITLE */

.about-story-content h2{
  color:#2b1b14;

  font-size:5rem;
  line-height:0.98;

  margin-bottom:28px;

  font-family:serif;
  font-weight:600;
}

/* TEXT */

.about-story-content p{
  color:#66584d;

  font-size:1.08rem;
  line-height:1.9;

  margin-bottom:24px;
}

/* ================= FEATURES ================= */

.story-features{
  display:flex;
  flex-direction:column;

  gap:22px;

  margin:40px 0;
}

/* ITEM */

.story-feature{
  display:flex;
  align-items:flex-start;

  gap:18px;
}

/* ICON */

.feature-icon{
  min-width:58px;
  width:58px;
  height:58px;

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

  border-radius:18px;

  background:#ece2cf;

  font-size:1.4rem;
}

/* FEATURE TEXT */

.story-feature h4{
  color:#2b1b14;

  font-size:1.1rem;

  margin-bottom:6px;
}

.story-feature span{
  color:#7a6d61;

  font-size:15px;
  line-height:1.7;
}

/* BUTTON */

.about-story-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:18px 34px;

  border-radius:50px;

  background:#2b1b14;

  color:#f7ead6;
  text-decoration:none;

  transition:0.4s ease;
}

.about-story-btn:hover{
  background:#b38b55;

  color:#140603;

  transform:translateY(-4px);
}

/* ================= REVEAL ================= */

.reveal{
  opacity:0;
  transform:translateY(60px);

  transition:
  opacity 1s ease,
  transform 1s ease;
}

.reveal.show{
  opacity:1;
  transform:translateY(0);
}

/* =========================
   TABLET
========================= */

@media(max-width:1100px){

  .about-story-wrapper{
    grid-template-columns:1fr;

    gap:60px;
  }

  .about-story-content h2{
    font-size:4rem;
  }

}

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

@media(max-width:768px){

  .about-story-section{
    padding:80px 20px;
  }

  .about-story-wrapper{
    gap:40px;
  }

  /* CONTENT FIRST */

  .about-story-content{
    order:1;
  }

  .about-story-image{
    order:2;

    height:420px;

    border-radius:24px;
  }

  .about-story-tag{
    font-size:11px;
    letter-spacing:3px;
  }

  .about-story-content h2{
    font-size:2.7rem;
    line-height:1.05;

    margin-bottom:20px;
  }

  .about-story-content p{
    font-size:15px;
    line-height:1.8;
  }

  /* FLOAT CARD */

  .story-floating-card{
    left:18px;
    right:18px;
    bottom:18px;

    padding:18px 20px;

    border-radius:18px;
  }

  .story-floating-card h3{
    font-size:1.5rem;
  }

  /* FEATURES */

  .story-features{
    gap:18px;

    margin:32px 0;
  }

  .feature-icon{
    min-width:48px;
    width:48px;
    height:48px;

    border-radius:14px;

    font-size:1.1rem;
  }

  .story-feature h4{
    font-size:1rem;
  }

  .story-feature span{
    font-size:14px;
  }

  /* BUTTON */

  .about-story-btn{
    width:100%;

    padding:15px;
  }

}

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

.mission-section{
  position:relative;

  width:100%;
  padding:120px 8%;

  overflow:hidden;

  background:
  linear-gradient(
    135deg,
    #140603,
    #2b140c,
    #1b0b06
  );
}

/* ================= GLOW ================= */

.mission-glow{
  position:absolute;

  border-radius:50%;

  filter:blur(120px);

  opacity:0.14;
}

.mission-glow-1{
  width:320px;
  height:320px;

  background:#c79c52;

  top:-80px;
  left:-60px;
}

.mission-glow-2{
  width:260px;
  height:260px;

  background:#7c4b2a;

  right:-60px;
  bottom:-80px;
}

/* ================= TOP ================= */

.mission-top{
  position:relative;
  z-index:2;

  text-align:center;

  max-width:850px;
  margin:0 auto 70px;
}

.mission-tag{
  display:inline-block;

  color:#d4a85d;

  font-size:13px;
  font-weight:600;
  letter-spacing:4px;

  margin-bottom:22px;
}

/* TITLE */

.mission-top h2{
  color:#f8ecd8;

  font-size:5rem;
  line-height:1;

  margin-bottom:24px;

  font-family:serif;
  font-weight:600;
}

/* TEXT */

.mission-top p{
  color:#d4c0a8;

  font-size:1.08rem;
  line-height:1.9;
}

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

.mission-grid{
  position:relative;
  z-index:2;

  display:grid;
  grid-template-columns:repeat(2,1fr);

  gap:30px;
}

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

.mission-card{
  position:relative;

  padding:50px 42px;

  border-radius:34px;

  background:
  linear-gradient(
    135deg,
    rgba(255,255,255,0.06),
    rgba(255,255,255,0.02)
  );

  border:1px solid rgba(255,255,255,0.08);

  backdrop-filter:blur(16px);

  transition:0.45s ease;

  overflow:hidden;
}

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

  border-color:#c79c52;

  box-shadow:
  0 25px 60px rgba(0,0,0,0.3);
}

/* ICON */

.mission-icon{
  width:74px;
  height:74px;

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

  border-radius:22px;

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

  font-size:2rem;

  margin-bottom:28px;
}

/* LABEL */

.card-label{
  display:inline-block;

  color:#d4a85d;

  font-size:12px;
  letter-spacing:3px;

  margin-bottom:18px;
}

/* TITLE */

.mission-card h3{
  color:#f8ecd8;

  font-size:2.5rem;
  line-height:1.1;

  margin-bottom:22px;

  font-family:serif;
  font-weight:600;
}

/* TEXT */

.mission-card p{
  color:#d4c0a8;

  font-size:1rem;
  line-height:1.9;

  margin-bottom:30px;
}

/* LINE */

.mission-line{
  width:100%;
  height:1px;

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

  margin-bottom:28px;
}

/* LIST */

.mission-card ul{
  display:flex;
  flex-direction:column;

  gap:16px;

  list-style:none;
}

.mission-card ul li{
  position:relative;

  padding-left:28px;

  color:#f7ead6;

  font-size:15px;
}

/* BULLET */

.mission-card ul li::before{
  content:"";

  position:absolute;

  left:0;
  top:8px;

  width:10px;
  height:10px;

  border-radius:50%;

  background:#c79c52;
}

/* ================= REVEAL ================= */

.reveal{
  opacity:0;
  transform:translateY(60px);

  transition:
  opacity 1s ease,
  transform 1s ease;
}

.reveal.show{
  opacity:1;
  transform:translateY(0);
}

/* =========================
   TABLET
========================= */

@media(max-width:1100px){

  .mission-grid{
    grid-template-columns:1fr;
  }

  .mission-top h2{
    font-size:4rem;
  }

}

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

@media(max-width:768px){

  .mission-section{
    padding:80px 20px;
  }

  .mission-top{
    margin-bottom:45px;
  }

  .mission-tag{
    font-size:11px;
    letter-spacing:3px;
  }

  .mission-top h2{
    font-size:2.8rem;
    line-height:1.08;
  }

  .mission-top p{
    font-size:15px;
    line-height:1.8;
  }

  /* CARD */

  .mission-card{
    padding:30px 24px;

    border-radius:24px;
  }

  .mission-icon{
    width:60px;
    height:60px;

    border-radius:18px;

    font-size:1.5rem;

    margin-bottom:22px;
  }

  .card-label{
    font-size:11px;
    letter-spacing:2px;
  }

  .mission-card h3{
    font-size:2rem;
    line-height:1.15;

    margin-bottom:18px;
  }

  .mission-card p{
    font-size:14px;
    line-height:1.8;
  }

  .mission-card ul li{
    font-size:14px;
  }

}

/* =========================
   ROASTING FACILITY SECTION
========================= */

.facility-section{
  position:relative;

  width:100%;
  padding:120px 8%;

  background:#f4efe7;

  overflow:hidden;
}

/* ================= BLUR ================= */

.facility-blur{
  position:absolute;

  border-radius:50%;

  filter:blur(120px);

  opacity:0.12;
}

.facility-blur-1{
  width:320px;
  height:320px;

  background:#c79c52;

  top:-80px;
  left:-60px;
}

.facility-blur-2{
  width:260px;
  height:260px;

  background:#7c4b2a;

  right:-60px;
  bottom:-80px;
}

/* ================= WRAPPER ================= */

.facility-wrapper{
  position:relative;
  z-index:2;

  max-width:1300px;
  margin:auto;

  display:grid;
  grid-template-columns:1fr 1fr;

  gap:90px;
  align-items:center;
}

/* ================= IMAGES ================= */

.facility-images{
  position:relative;

  min-height:760px;
}

/* MAIN IMAGE */

.facility-main-image{
  width:82%;
  height:620px;

  border-radius:34px;

  overflow:hidden;

  box-shadow:
  0 25px 70px rgba(0,0,0,0.12);
}

.facility-main-image img{
  width:100%;
  height:100%;

  object-fit:cover;

  transition:1s ease;
}

.facility-main-image:hover img{
  transform:scale(1.08);
}

/* SMALL IMAGE */

.facility-small-image{
  position:absolute;

  right:0;
  bottom:60px;

  width:300px;
  height:320px;

  border-radius:28px;

  overflow:hidden;

  border:8px solid #f4efe7;

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

.facility-small-image img{
  width:100%;
  height:100%;

  object-fit:cover;

  transition:1s ease;
}

.facility-small-image:hover img{
  transform:scale(1.08);
}

/* FLOAT CARD */

.facility-card{
  position:absolute;

  left:30px;
  bottom:20px;

  padding:24px 28px;

  border-radius:24px;

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

  backdrop-filter:blur(14px);

  border:1px solid rgba(255,255,255,0.2);

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

.facility-card h3{
  color:#fff;

  font-size:2rem;

  margin-bottom:10px;

  font-family:serif;
}

.facility-card span{
  color:#f7ead6;

  font-size:14px;
  line-height:1.7;
}

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

.facility-tag{
  display:inline-block;

  color:#b38b55;

  font-size:13px;
  font-weight:600;
  letter-spacing:4px;

  margin-bottom:22px;
}

/* TITLE */

.facility-content h2{
  color:#2b1b14;

  font-size:5rem;
  line-height:0.98;

  margin-bottom:28px;

  font-family:serif;
  font-weight:600;
}

/* TEXT */

.facility-content p{
  color:#66584d;

  font-size:1.08rem;
  line-height:1.9;

  margin-bottom:24px;
}

/* FEATURES */

.facility-features{
  display:grid;
  grid-template-columns:repeat(3,1fr);

  gap:18px;

  margin:42px 0;
}

.facility-feature{
  padding:24px 20px;

  border-radius:22px;

  background:#ece2cf;

  transition:0.4s ease;
}

.facility-feature:hover{
  transform:translateY(-6px);

  background:#e6d5ba;
}

.facility-feature h4{
  color:#2b1b14;

  font-size:1.3rem;

  margin-bottom:8px;

  font-family:serif;
}

.facility-feature span{
  color:#66584d;

  font-size:14px;
  line-height:1.7;
}

/* BUTTON */

.facility-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:18px 34px;

  border-radius:50px;

  background:#2b1b14;

  color:#f7ead6;
  text-decoration:none;

  transition:0.4s ease;
}

.facility-btn:hover{
  background:#b38b55;

  color:#140603;

  transform:translateY(-4px);
}

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

@media(max-width:1100px){

  .facility-wrapper{
    grid-template-columns:1fr;
  }

  .facility-content h2{
    font-size:4rem;
  }

}

@media(max-width:768px){

  .facility-section{
    padding:80px 20px;
  }

  .facility-content{
    order:1;
  }

  .facility-images{
    order:2;

    min-height:auto;
  }

  .facility-main-image{
    width:100%;
    height:420px;

    border-radius:24px;
  }

  .facility-small-image{
    width:140px;
    height:160px;

    right:-5px;
    bottom:70px;

    border-width:5px;

    border-radius:18px;
  }

  .facility-card{
    left:15px;
    bottom:15px;

    padding:18px 20px;

    border-radius:18px;
  }

  .facility-content h2{
    font-size:2.7rem;
    line-height:1.05;
  }

  .facility-content p{
    font-size:15px;
    line-height:1.8;
  }

  .facility-features{
    grid-template-columns:1fr;

    gap:14px;
  }

  .facility-btn{
    width:100%;
    padding:15px;
  }

}

/* =========================
   WHY CHOOSE US
========================= */

.choose-section{
  position:relative;

  width:100%;
  padding:120px 8%;

  overflow:hidden;

  background:
  linear-gradient(
    135deg,
    #140603,
    #2b140c,
    #1b0b06
  );
}

/* ================= BLUR ================= */

.choose-blur{
  position:absolute;

  border-radius:50%;

  filter:blur(120px);

  opacity:0.12;
}

.choose-blur-1{
  width:320px;
  height:320px;

  background:#c79c52;

  top:-80px;
  left:-60px;
}

.choose-blur-2{
  width:260px;
  height:260px;

  background:#7c4b2a;

  right:-60px;
  bottom:-80px;
}

/* ================= TOP ================= */

.choose-top{
  position:relative;
  z-index:2;

  text-align:center;

  max-width:850px;
  margin:0 auto 70px;
}

/* TAG */

.choose-tag{
  display:inline-block;

  color:#d4a85d;

  font-size:13px;
  font-weight:600;
  letter-spacing:4px;

  margin-bottom:22px;
}

/* TITLE */

.choose-top h2{
  color:#f8ecd8;

  font-size:5rem;
  line-height:1;

  margin-bottom:24px;

  font-family:serif;
  font-weight:600;
}

/* TEXT */

.choose-top p{
  color:#d4c0a8;

  font-size:1.08rem;
  line-height:1.9;
}

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

.choose-grid{
  position:relative;
  z-index:2;

  display:grid;
  grid-template-columns:repeat(3,1fr);

  gap:28px;
}

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

.choose-card{
  position:relative;

  padding:40px 34px;

  border-radius:30px;

  background:
  linear-gradient(
    135deg,
    rgba(255,255,255,0.06),
    rgba(255,255,255,0.02)
  );

  border:1px solid rgba(255,255,255,0.08);

  backdrop-filter:blur(16px);

  overflow:hidden;

  transition:0.45s ease;
}

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

  border-color:#8b5a2b;

  box-shadow:
  0 25px 60px rgba(0,0,0,0.3);
}

/* ICON */

.choose-icon{
  width:72px;
  height:72px;

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

  border-radius:22px;

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

  font-size:2rem;

  margin-bottom:26px;
}

/* TITLE */

.choose-card h3{
  color:#f8ecd8;

  font-size:2rem;
  line-height:1.15;

  margin-bottom:18px;

  font-family:serif;
  font-weight:600;
}

/* TEXT */

.choose-card p{
  color:#d4c0a8;

  font-size:15px;
  line-height:1.9;
}

/* ================= REVEAL ================= */

.reveal{
  opacity:0;
  transform:translateY(60px);

  transition:
  opacity 1s ease,
  transform 1s ease;
}

.reveal.show{
  opacity:1;
  transform:translateY(0);
}

/* =========================
   TABLET
========================= */

@media(max-width:1100px){

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

  .choose-top h2{
    font-size:4rem;
  }

}

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

@media(max-width:768px){

  .choose-section{
    padding:80px 20px;
  }

  .choose-top{
    margin-bottom:45px;
  }

  .choose-tag{
    font-size:11px;
    letter-spacing:3px;
  }

  .choose-top h2{
    font-size:2.8rem;
    line-height:1.08;
  }

  .choose-top p{
    font-size:15px;
    line-height:1.8;
  }

  /* GRID */

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

    gap:16px;
  }

  /* CARD */

  .choose-card{
    padding:24px 18px;

    border-radius:22px;
  }

  .choose-icon{
    width:54px;
    height:54px;

    border-radius:16px;

    font-size:1.4rem;

    margin-bottom:18px;
  }

  .choose-card h3{
    font-size:1.2rem;

    margin-bottom:12px;
  }

  .choose-card p{
    font-size:13px;
    line-height:1.7;
  }

}

/* =========================
   PROCESS SECTION
========================= */

.process-section{
  position:relative;

  width:100%;
  padding:120px 8%;

  overflow:hidden;

  background:#f4efe7;
}

/* ================= BLUR ================= */

.process-blur{
  position:absolute;

  border-radius:50%;

  filter:blur(120px);

  opacity:0.12;
}

.process-blur-1{
  width:320px;
  height:320px;

  background:#c79c52;

  top:-80px;
  left:-60px;
}

.process-blur-2{
  width:260px;
  height:260px;

  background:#7c4b2a;

  right:-60px;
  bottom:-80px;
}

/* ================= TOP ================= */

.process-top{
  position:relative;
  z-index:2;

  text-align:center;

  max-width:850px;
  margin:0 auto 80px;
}

.process-tag{
  display:inline-block;

  color:#b38b55;

  font-size:13px;
  font-weight:600;
  letter-spacing:4px;

  margin-bottom:22px;
}

.process-top h2{
  color:#2b1b14;

  font-size:5rem;
  line-height:1;

  margin-bottom:24px;

  font-family:serif;
}

.process-top p{
  color:#66584d;

  font-size:1.08rem;
  line-height:1.9;
}

/* ================= TIMELINE ================= */

.timeline-wrapper{
  position:relative;

  display:grid;
  grid-template-columns:repeat(4,1fr);

  gap:24px;

  margin-bottom:90px;
}

/* LINE */

.timeline-wrapper::before{
  content:"";

  position:absolute;

  top:38px;
  left:5%;

  width:90%;
  height:2px;

  background:#dccdb7;
}

/* ITEM */

.timeline-item{
  position:relative;
  z-index:2;
}

/* NUMBER */

.timeline-number{
  color:#b38b55;

  font-size:3rem;

  font-family:serif;

  margin-bottom:12px;
}

/* DOT */

.timeline-dot{
  width:18px;
  height:18px;

  border-radius:50%;

  background:#2b1b14;

  margin-bottom:28px;

  border:4px solid #f4efe7;
}

/* CARD */

.timeline-card{
  padding:34px 28px;

  border-radius:28px;

  background:#fff;

  box-shadow:
  0 18px 50px rgba(0,0,0,0.06);

  transition:0.4s ease;
}

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

  box-shadow:
  0 25px 60px rgba(0,0,0,0.1);
}

.timeline-card h3{
  color:#2b1b14;

  font-size:1.6rem;

  margin-bottom:16px;

  font-family:serif;
}

.timeline-card p{
  color:#6c5f53;

  font-size:15px;
  line-height:1.8;
}

/* ================= STATS ================= */

.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);

  gap:24px;
}

/* CARD */

.stat-card{
  padding:42px 28px;

  border-radius:28px;

  background:#2b1b14;

  text-align:center;

  transition:0.4s ease;
}

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

  background:#3d2419;
}

/* NUMBER */

.stat-card h3{
  color:#d4a85d;

  font-size:4rem;

  margin-bottom:14px;

  font-family:serif;
}

/* TEXT */

.stat-card span{
  color:#f7ead6;

  font-size:15px;

  letter-spacing:1px;
}

/* ================= REVEAL ================= */

.reveal{
  opacity:0;
  transform:translateY(60px);

  transition:
  opacity 1s ease,
  transform 1s ease;
}

.reveal.show{
  opacity:1;
  transform:translateY(0);
}

/* =========================
   TABLET
========================= */

@media(max-width:1100px){

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

  .timeline-wrapper::before{
    display:none;
  }

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

  .process-top h2{
    font-size:4rem;
  }

}

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

@media(max-width:768px){

  .process-section{
    padding:80px 20px;
  }

  .process-top{
    margin-bottom:50px;
  }

  .process-tag{
    font-size:11px;
    letter-spacing:3px;
  }

  .process-top h2{
    font-size:2.8rem;
    line-height:1.08;
  }

  .process-top p{
    font-size:15px;
    line-height:1.8;
  }

  /* TIMELINE */

  .timeline-wrapper{
    grid-template-columns:1fr;

    gap:20px;

    margin-bottom:50px;
  }

  .timeline-number{
    font-size:2.3rem;
  }

  .timeline-card{
    padding:24px 20px;

    border-radius:22px;
  }

  .timeline-card h3{
    font-size:1.3rem;
  }

  .timeline-card p{
    font-size:14px;
  }

  /* STATS */

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

    gap:16px;
  }

  .stat-card{
    padding:28px 16px;

    border-radius:20px;
  }

  .stat-card h3{
    font-size:2.5rem;
  }

  .stat-card span{
    font-size:13px;
    line-height:1.5;
  }

}


/* =========================
   FOUNDER SECTION
========================= */

.founder-section{
  position:relative;

  width:100%;
  padding:120px 8%;

  overflow:hidden;

  background:
  linear-gradient(
    135deg,
    #140603,
    #2b140c,
    #1b0b06
  );
}

/* ================= BLUR ================= */

.founder-blur{
  position:absolute;

  border-radius:50%;

  filter:blur(120px);

  opacity:0.12;
}

.founder-blur-1{
  width:320px;
  height:320px;

  background:#c79c52;

  top:-80px;
  left:-60px;
}

.founder-blur-2{
  width:260px;
  height:260px;

  background:#7c4b2a;

  right:-60px;
  bottom:-80px;
}

/* ================= WRAPPER ================= */

.founder-wrapper{
  position:relative;
  z-index:2;

  max-width:1300px;
  margin:auto;

  display:grid;
  grid-template-columns:1fr 1fr;

  gap:90px;
  align-items:center;
}

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

.founder-image{
  position:relative;

  height:720px;

  border-radius:36px;

  overflow:hidden;

  box-shadow:
  0 25px 70px rgba(0,0,0,0.35);
}

.founder-image img{
  width:100%;
  height:100%;

  object-fit:cover;

  transition:1s ease;
}

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

/* FLOAT CARD */

.founder-card{
  position:absolute;

  left:30px;
  bottom:30px;

  padding:24px 28px;

  border-radius:24px;

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

  backdrop-filter:blur(14px);

  border:1px solid rgba(255,255,255,0.12);

  box-shadow:
  0 15px 45px rgba(0,0,0,0.25);
}

.founder-card h3{
  color:#f7ead6;

  font-size:2rem;

  margin-bottom:10px;

  font-family:serif;
}

.founder-card span{
  color:#e9dbc8;

  font-size:14px;
  line-height:1.7;
}

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

.founder-tag{
  display:inline-block;

  color:#d4a85d;

  font-size:13px;
  font-weight:600;
  letter-spacing:4px;

  margin-bottom:22px;
}

/* TITLE */

.founder-content h2{
  color:#f8ecd8;

  font-size:5rem;
  line-height:0.98;

  margin-bottom:30px;

  font-family:serif;
  font-weight:600;
}

/* TEXT */

.founder-content p{
  color:#d4c0a8;

  font-size:1.08rem;
  line-height:1.95;

  margin-bottom:24px;
}

/* SIGNATURE */

.founder-signature{
  margin-top:40px;

  padding-top:28px;

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

.founder-signature h4{
  color:#f7ead6;

  font-size:1.3rem;

  margin-bottom:8px;

  font-family:serif;
}

.founder-signature span{
  color:#d4a85d;

  font-size:14px;

  letter-spacing:1px;
}

/* ================= REVEAL ================= */

.reveal{
  opacity:0;
  transform:translateY(60px);

  transition:
  opacity 1s ease,
  transform 1s ease;
}

.reveal.show{
  opacity:1;
  transform:translateY(0);
}

/* =========================
   TABLET
========================= */

@media(max-width:1100px){

  .founder-wrapper{
    grid-template-columns:1fr;

    gap:60px;
  }

  .founder-content h2{
    font-size:4rem;
  }

}

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

@media(max-width:768px){

  .founder-section{
    padding:80px 20px;
  }

  .founder-wrapper{
    gap:40px;
  }

  /* CONTENT FIRST */

  .founder-content{
    order:1;
  }

  .founder-image{
    order:2;

    height:460px;

    border-radius:24px;
  }

  /* CARD */

  .founder-card{
    left:15px;
    bottom:15px;

    padding:18px 20px;

    border-radius:18px;
  }

  .founder-card h3{
    font-size:1.5rem;
  }

  .founder-card span{
    font-size:13px;
  }

  /* TAG */

  .founder-tag{
    font-size:11px;
    letter-spacing:3px;
  }

  /* TITLE */

  .founder-content h2{
    font-size:2.7rem;
    line-height:1.05;

    margin-bottom:20px;
  }

  /* TEXT */

  .founder-content p{
    font-size:15px;
    line-height:1.85;
  }

  /* SIGNATURE */

  .founder-signature{
    margin-top:30px;
    padding-top:20px;
  }

  .founder-signature h4{
    font-size:1.1rem;
  }

}

/* =========================
   MNZ SECTION
========================= */

.mnz-section{
  position:relative;

  width:100%;
  padding:120px 8%;

  overflow:hidden;

  background:
  linear-gradient(
    135deg,
    #140603,
    #2b140c,
    #1b0b06
  );
}

/* ================= BLUR ================= */

.mnz-blur{
  position:absolute;

  border-radius:50%;

  filter:blur(120px);

  opacity:0.12;
}

.mnz-blur-1{
  width:320px;
  height:320px;

  background:#c79c52;

  top:-80px;
  left:-60px;
}

.mnz-blur-2{
  width:260px;
  height:260px;

  background:#7c4b2a;

  right:-60px;
  bottom:-80px;
}

/* ================= WRAPPER ================= */

.mnz-wrapper{
  position:relative;
  z-index:2;

  max-width:1300px;
  margin:auto;

  display:grid;
  grid-template-columns:1fr 1fr;

  gap:70px;
  align-items:start;
}

/* ================= LEFT ================= */

.mnz-tag{
  display:inline-block;

  color:#d4a85d;

  font-size:13px;
  font-weight:600;

  letter-spacing:4px;

  margin-bottom:24px;
}

/* TITLE */

.mnz-left h2{
  color:#f8ecd8;

  font-size:5rem;
  line-height:0.98;

  margin-bottom:30px;

  font-family:serif;
}

/* TEXT */

.mnz-left p{
  color:#d4c0a8;

  font-size:1.05rem;
  line-height:1.95;

  margin-bottom:22px;
}

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

.mnz-buttons{
  display:flex;
  align-items:center;

  gap:18px;

  margin-top:40px;

  flex-wrap:wrap;
}

/* BTN */

.mnz-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:18px 34px;

  border-radius:50px;

  text-decoration:none;

  font-weight:600;

  transition:0.4s ease;
}

/* PRIMARY */

.primary-btn{
  background:#c79c52;

  color:#140603;
}

.primary-btn:hover{
  background:#f2c57c;

  transform:translateY(-4px);
}

/* SECONDARY */

.secondary-btn{
  border:1px solid rgba(255,255,255,0.12);

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

  backdrop-filter:blur(12px);

  color:#f8ecd8;
}

.secondary-btn:hover{
  background:
  rgba(255,255,255,0.14);

  transform:translateY(-4px);
}

/* ================= RIGHT ================= */

.mnz-right{
  display:flex;
  flex-direction:column;

  gap:24px;
}

/* ================= VALUE CARD ================= */

.value-card{
  padding:38px 34px;

  border-radius:30px;

  background:
  linear-gradient(
    135deg,
    rgba(255,255,255,0.08),
    rgba(255,255,255,0.03)
  );

  border:1px solid rgba(255,255,255,0.08);

  backdrop-filter:blur(16px);

  transition:0.45s ease;
}

/* HOVER */

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

  border-color:#8b5a2b;

  background:
  linear-gradient(
    135deg,
    rgba(255,255,255,0.12),
    rgba(255,255,255,0.05)
  );
}

/* NUMBER */

.value-number{
  width:62px;
  height:62px;

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

  border-radius:18px;

  background:#c79c52;

  color:#140603;

  font-size:1.3rem;
  font-weight:700;

  margin-bottom:24px;
}

/* TITLE */

.value-card h3{
  color:#f8ecd8;

  font-size:2rem;

  margin-bottom:16px;

  font-family:serif;
}

/* TEXT */

.value-card p{
  color:#d4c0a8;

  font-size:15px;
  line-height:1.9;
}

/* ================= REVEAL ================= */

.reveal{
  opacity:0;
  transform:translateY(60px);

  transition:
  opacity 1s ease,
  transform 1s ease;
}

.reveal.show{
  opacity:1;
  transform:translateY(0);
}

/* =========================
   TABLET
========================= */

@media(max-width:1100px){

  .mnz-wrapper{
    grid-template-columns:1fr;
  }

  .mnz-left h2{
    font-size:4rem;
  }

}

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

@media(max-width:768px){

  .mnz-section{
    padding:80px 20px;
  }

  .mnz-wrapper{
    gap:45px;
  }

  /* TAG */

  .mnz-tag{
    font-size:11px;
    letter-spacing:3px;
  }

  /* TITLE */

  .mnz-left h2{
    font-size:2.8rem;
    line-height:1.08;

    margin-bottom:20px;
  }

  /* TEXT */

  .mnz-left p{
    font-size:15px;
    line-height:1.85;
  }

  /* BUTTONS */

  .mnz-buttons{
    flex-direction:column;

    width:100%;
  }

  .mnz-btn{
    width:100%;

    padding:15px;
  }

  /* CARD */

  .value-card{
    padding:28px 22px;

    border-radius:24px;
  }

  .value-number{
    width:54px;
    height:54px;

    border-radius:16px;

    font-size:1.1rem;

    margin-bottom:18px;
  }

  .value-card h3{
    font-size:1.5rem;

    margin-bottom:12px;
  }

  .value-card p{
    font-size:14px;
    line-height:1.8;
  }

}





/* =========================
   QUALITY SECTION
========================= */

.quality-section{
  position:relative;

  width:100%;
  padding:120px 8%;

  overflow:hidden;

  background:#f4efe7;
}

/* ================= BLUR ================= */

.quality-blur{
  position:absolute;

  border-radius:50%;

  filter:blur(120px);

  opacity:0.12;
}

.quality-blur-1{
  width:320px;
  height:320px;

  background:#c79c52;

  top:-80px;
  left:-60px;
}

.quality-blur-2{
  width:260px;
  height:260px;

  background:#7c4b2a;

  right:-60px;
  bottom:-80px;
}

/* ================= TOP ================= */

.quality-top{
  position:relative;
  z-index:2;

  text-align:center;

  max-width:850px;
  margin:0 auto 70px;
}

/* TAG */

.quality-tag{
  display:inline-block;

  color:#b38b55;

  font-size:13px;
  font-weight:600;
  letter-spacing:4px;

  margin-bottom:22px;
}

/* TITLE */

.quality-top h2{
  color:#2b1b14;

  font-size:5rem;
  line-height:1;

  margin-bottom:24px;

  font-family:serif;
  font-weight:600;
}

/* TEXT */

.quality-top p{
  color:#66584d;

  font-size:1.08rem;
  line-height:1.9;
}

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

.quality-grid{
  position:relative;
  z-index:2;

  display:grid;
  grid-template-columns:repeat(4,1fr);

  gap:24px;

  margin-bottom:60px;
}

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

.quality-card{
  position:relative;

  padding:40px 30px;

  border-radius:28px;

  background:#fff;

  box-shadow:
  0 18px 50px rgba(0,0,0,0.06);

  transition:0.45s ease;
}

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

  border:1px solid #8b5a2b;

  box-shadow:
  0 25px 60px rgba(0,0,0,0.1);
}

/* ICON */

.quality-icon{
  width:72px;
  height:72px;

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

  border-radius:22px;

  background:#ece2cf;

  font-size:2rem;

  margin-bottom:26px;
}

/* TITLE */

.quality-card h3{
  color:#2b1b14;

  font-size:1.7rem;
  line-height:1.2;

  margin-bottom:16px;

  font-family:serif;
}

/* TEXT */

.quality-card p{
  color:#6c5f53;

  font-size:15px;
  line-height:1.9;
}

/* ================= CERT BAR ================= */

.certification-bar{
  position:relative;
  z-index:2;

  display:grid;
  grid-template-columns:repeat(4,1fr);

  gap:20px;
}

/* ITEM */

.cert-item{
  padding:20px;

  border-radius:20px;

  text-align:center;

  background:#2b1b14;

  color:#f7ead6;

  font-size:15px;
  font-weight:500;

  letter-spacing:1px;

  transition:0.4s ease;
}

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

  background:#3a2218;
}

/* ================= REVEAL ================= */

.reveal{
  opacity:0;
  transform:translateY(60px);

  transition:
  opacity 1s ease,
  transform 1s ease;
}

.reveal.show{
  opacity:1;
  transform:translateY(0);
}

/* =========================
   TABLET
========================= */

@media(max-width:1100px){

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

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

  .quality-top h2{
    font-size:4rem;
  }

}

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

@media(max-width:768px){

  .quality-section{
    padding:80px 20px;
  }

  .quality-top{
    margin-bottom:45px;
  }

  .quality-tag{
    font-size:11px;
    letter-spacing:3px;
  }

  .quality-top h2{
    font-size:2.8rem;
    line-height:1.08;
  }

  .quality-top p{
    font-size:15px;
    line-height:1.8;
  }

  /* GRID */

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

    gap:16px;

    margin-bottom:30px;
  }

  /* CARD */

  .quality-card{
    padding:24px 18px;

    border-radius:22px;
  }

  .quality-icon{
    width:56px;
    height:56px;

    border-radius:16px;

    font-size:1.5rem;

    margin-bottom:18px;
  }

  .quality-card h3{
    font-size:1.2rem;

    margin-bottom:12px;
  }

  .quality-card p{
    font-size:13px;
    line-height:1.7;
  }

  /* CERT */

  .certification-bar{
    grid-template-columns:repeat(2,1fr);

    gap:14px;
  }

  .cert-item{
    padding:16px 12px;

    border-radius:16px;

    font-size:13px;
    line-height:1.5;
  }

}


/* =========================
   CLIENTS SECTION
========================= */

.clients-section{
  position:relative;

  width:100%;
  padding:120px 0;

  overflow:hidden;

  background:
  linear-gradient(
    135deg,
    #140603,
    #2b140c,
    #1b0b06
  );
}

/* ================= BLUR ================= */

.clients-blur{
  position:absolute;

  border-radius:50%;

  filter:blur(120px);

  opacity:0.12;
}

.clients-blur-1{
  width:320px;
  height:320px;

  background:#c79c52;

  top:-80px;
  left:-60px;
}

.clients-blur-2{
  width:260px;
  height:260px;

  background:#7c4b2a;

  right:-60px;
  bottom:-80px;
}

/* ================= TOP ================= */

.clients-top{
  position:relative;
  z-index:2;

  max-width:850px;

  margin:0 auto 70px;

  text-align:center;

  padding:0 20px;
}

/* TAG */

.clients-tag{
  display:inline-block;

  color:#d4a85d;

  font-size:13px;
  font-weight:600;

  letter-spacing:4px;

  margin-bottom:22px;
}

/* TITLE */

.clients-top h2{
  color:#f8ecd8;

  font-size:5rem;
  line-height:1;

  margin-bottom:24px;

  font-family:serif;
}

/* TEXT */

.clients-top p{
  color:#d4c0a8;

  font-size:1.08rem;
  line-height:1.9;
}

/* ================= SLIDER ================= */

.logo-slider{
  position:relative;
  width:100%;
  overflow:hidden;

  padding:20px 0;
}

/* TRACK */

.logo-track{
  display:flex;
  align-items:center;
  gap:10px;

  width:max-content;

  animation:logoScroll 10s linear infinite;
}

.logo-card{
  display:flex;
  align-items:center;
  justify-content:center;

  flex-shrink:0;

  transition:0.4s ease;
}


/* CARD */

.logo-card{
  width:240px;
  height:130px;

  margin:0 18px;

  border-radius:28px;

  background:
  linear-gradient(
    135deg,
    rgba(255,255,255,0.08),
    rgba(255,255,255,0.03)
  );

  border:1px solid rgba(255,255,255,0.08);

  backdrop-filter:blur(16px);

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

  transition:0.4s ease;

  flex-shrink:0;
}

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

  border-color:#8b5a2b;

  background:
  linear-gradient(
    135deg,
    rgba(255,255,255,0.12),
    rgba(255,255,255,0.05)
  );
}

/* IMAGE */

.logo-card img{
  width:120px;

  object-fit:contain;

  opacity:0.9;

  filter:grayscale(100%);

  transition:0.4s ease;
}

.logo-card:hover img{
  opacity:1;

  filter:grayscale(0%);
}

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

@keyframes logoScroll{

  0%{
    transform:translateX(0);
  }

  100%{
    transform:translateX(-50%);
  }

}

/* ================= REVEAL ================= */

.reveal{
  opacity:0;
  transform:translateY(60px);

  transition:
  opacity 1s ease,
  transform 1s ease;
}

.reveal.show{
  opacity:1;
  transform:translateY(0);
}

/* =========================
   TABLET
========================= */

@media(max-width:1100px){

  .clients-top h2{
    font-size:4rem;
  }

  .logo-card{
    width:210px;
    height:120px;
  }

}

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

@media(max-width:768px){

  .clients-section{
    padding:80px 0;
  }

  .clients-top{
    margin-bottom:45px;
  }

  .clients-tag{
    font-size:11px;
    letter-spacing:3px;
  }

  .clients-top h2{
    font-size:2.8rem;
    line-height:1.08;
  }

  .clients-top p{
    font-size:15px;
    line-height:1.8;
  }

  /* CARD */

  .logo-card{
    width:170px;
    height:95px;

    margin:0 12px;

    border-radius:20px;
  }

  .logo-card img{
    width:90px;
  }

  /* SPEED */

  .logo-track{
    animation:logoScroll 13s linear infinite;
  }

}


/* =========================
   ROOT
========================= */

:root{

  --gold:#c79c52;
  --gold-light:#f2c57c;

  --bg:#0f0b08;
  --text:#f6e9d5;
  --muted:#d7c4ad;

  --glass:rgba(255,255,255,0.08);
  --border:rgba(255,255,255,0.1);

}


body{
  background:var(--bg);
  font-family:'Inter',sans-serif;
}


/* =========================
   BLOG HERO
========================= */

.blog-hero{

  position:relative;

  width:100%;
  min-height:100vh;

  overflow:hidden;

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

  background:url('img/image.webp');
  background-size:cover;
  background-position:center;

}


/* VIDEO */

.blog-video-bg{

  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  z-index:0;

  opacity:0.35;

}


/* OVERLAY */

.blog-overlay{

  position:absolute;
  inset:0;

  background:
  radial-gradient(circle at top left,
  rgba(199,156,82,0.25),transparent 40%),

  linear-gradient(
    to bottom,
    rgba(0,0,0,0.45),
    rgba(0,0,0,0.82)
  );

  z-index:1;

}


/* GLOW */

.hero-glow{

  position:absolute;

  width:500px;
  height:500px;

  border-radius:50%;

  filter:blur(120px);

  z-index:1;

  opacity:0.22;

}

.glow-1{
  background:#c79c52;
  top:-150px;
  left:-120px;
}

.glow-2{
  background:#ffcb82;
  right:-120px;
  bottom:-200px;
}


/* =========================
   TOPBAR
========================= */

.blog-topbar{

  position:absolute;
  top:0;
  left:0;

  width:100%;

  padding:28px 8%;

  display:flex;
  align-items:center;
  justify-content:space-between;

  z-index:20;

}

.blog-logo{

  color:#fff;

  font-size:1.4rem;
  font-weight:700;

  letter-spacing:2px;

}

.blog-nav-links{
  display:flex;
  gap:34px;
}

.blog-nav-links a{

  color:#f5ead8;

  text-decoration:none;

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

  transition:0.4s ease;

}

.blog-nav-links a:hover{
  color:var(--gold-light);
}


/* =========================
   HERO CONTENT
========================= */

.blog-hero-content{

  position:relative;
  z-index:5;

  width:100%;
  max-width:920px;

  text-align:center;

  padding:120px 20px 40px;

}


.blog-tag{

  display:inline-flex;

  padding:10px 20px;

  border-radius:40px;

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

  border:1px solid rgba(255,255,255,0.1);

  backdrop-filter:blur(10px);

  color:var(--gold-light);

  font-size:12px;
  font-weight:600;

  letter-spacing:4px;

  margin-bottom:30px;

}


.blog-hero-content h1{

  color:var(--text);

  font-size:6.8rem;
  line-height:0.92;

  margin-bottom:30px;

  font-family:'Cormorant Garamond',serif;
  font-weight:600;

}


.blog-hero-content p{

  color:var(--muted);

  font-size:1.08rem;
  line-height:1.95;

  max-width:760px;

  margin:auto auto 42px;

}


/* =========================
   SEARCH
========================= */

.blog-search{

  width:100%;
  max-width:640px;

  margin:auto auto 55px;

  display:flex;
  align-items:center;

  padding:10px;

  border-radius:60px;

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

  border:1px solid rgba(255,255,255,0.12);

  backdrop-filter:blur(20px);

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

}


.blog-search input{

  flex:1;

  background:transparent;

  border:none;
  outline:none;

  padding:18px 24px;

  color:#fff;

  font-size:1rem;

}

.blog-search input::placeholder{
  color:#cfc4b5;
}


.blog-search button{

  border:none;

  padding:16px 30px;

  border-radius:50px;

  background:linear-gradient(
    135deg,
    #c79c52,
    #f2c57c
  );

  color:#160805;

  font-weight:700;

  cursor:pointer;

  transition:0.4s ease;

}

.blog-search button:hover{

  transform:translateY(-4px);

  box-shadow:
  0 10px 25px rgba(199,156,82,0.35);

}


/* =========================
   STATS
========================= */

.blog-stats{

  display:flex;
  justify-content:center;
  gap:30px;

  flex-wrap:wrap;

}

.stat-box{

  min-width:170px;

  padding:26px;

  border-radius:26px;

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

  border:1px solid rgba(255,255,255,0.08);

  backdrop-filter:blur(12px);

}

.stat-box h3{

  color:#fff;

  font-size:2rem;

  margin-bottom:8px;

}

.stat-box span{

  color:#d4c2aa;

  font-size:14px;

}


/* =========================
   SCROLL INDICATOR
========================= */

.scroll-indicator{

  position:absolute;

  bottom:30px;
  left:50%;

  transform:translateX(-50%);

  z-index:5;

}

.scroll-indicator span{

  display:block;

  width:2px;
  height:70px;

  background:linear-gradient(
    to bottom,
    transparent,
    #fff,
    transparent
  );

  animation:scrollMove 2s infinite;

}

@keyframes scrollMove{

  0%{
    transform:translateY(-10px);
    opacity:0;
  }

  50%{
    opacity:1;
  }

  100%{
    transform:translateY(10px);
    opacity:0;
  }

}


/* =========================
   FEATURED POSTS
========================= */

.featured-posts{

  position:relative;

  padding:120px 8%;

  background:#120d09;

}

.section-header{

  text-align:center;

  margin-bottom:70px;

}

.section-header span{

  color:var(--gold-light);

  letter-spacing:4px;

  font-size:12px;

}

.section-header h2{

  color:#f8ecd8;

  font-size:4rem;

  margin-top:18px;

  font-family:'Cormorant Garamond',serif;

}


.featured-grid{

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:34px;

}


.blog-card{

  overflow:hidden;

  border-radius:30px;

  background:#1a130d;

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

  transition:0.5s ease;

}

.blog-card:hover{

  transform:translateY(-12px);

  box-shadow:
  0 25px 50px rgba(0,0,0,0.35);

}

.blog-card-image{
  overflow:hidden;
}

.blog-card-image img{

  width:100%;
  height:300px;

  object-fit:cover;

  transition:0.6s ease;

}

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


.blog-card-content{
  padding:32px;
}

.card-category{

  color:#c79c52;

  font-size:12px;
  font-weight:600;

  letter-spacing:3px;

}

.blog-card-content h3{

  color:#f8ecd8;

  font-size:1.8rem;
  line-height:1.25;

  margin:20px 0;

  font-family:'Cormorant Garamond',serif;

}

.blog-card-content p{

  color:#d5c5b2;

  line-height:1.8;

  margin-bottom:24px;

}

.card-meta{

  display:flex;
  align-items:center;
  justify-content:space-between;

}

.card-meta span{
  color:#b8a892;
}

.card-meta a{

  color:#f2c57c;

  text-decoration:none;

  font-weight:600;

}


/* =========================
   REVEAL ANIMATION
========================= */

.reveal{

  opacity:0;

  transform:translateY(70px);

  transition:
  opacity 1s ease,
  transform 1s ease;

}

.reveal.show{

  opacity:1;

  transform:translateY(0);

}


/* =========================
   TABLET
========================= */

@media(max-width:1100px){

  .featured-grid{
    grid-template-columns:1fr 1fr;
  }

  .blog-hero-content h1{
    font-size:5rem;
  }

}


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

@media(max-width:768px){

  .blog-nav-links{
    display:none;
  }

  .blog-hero-content h1{

    font-size:3.3rem;

    line-height:1.05;

  }

  .featured-grid{
    grid-template-columns:1fr;
  }

  .section-header h2{
    font-size:2.6rem;
  }

  .blog-search{

    flex-direction:column;

    border-radius:28px;

    gap:14px;

  }

  .blog-search button{
    width:100%;
  }

}









/* =========================
   FLOATING WHATSAPP BUTTON
========================= */

.whatsapp-float{
  position:fixed;
  bottom:25px;
  right:25px;

  width:60px;
  height:60px;

  background:#25D366;
  color:#fff;

  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;

  font-size:28px;
  text-decoration:none;

  box-shadow:0 10px 25px rgba(0,0,0,0.3);
  z-index:9999;

  transition:0.3s ease;
}

/* Hover effect */
.whatsapp-float:hover{
  transform:scale(1.1) rotate(5deg);
  box-shadow:0 15px 35px rgba(37,211,102,0.4);
}

/* Tooltip */
.wa-tooltip{
  position:absolute;
  right:70px;
  background:#1d2711;
  color:#e5e7eb;

  padding:6px 10px;
  border-radius:8px;

  font-size:12px;
  white-space:nowrap;

  opacity:0;
  transform:translateX(10px);
  transition:0.3s ease;

  pointer-events:none;
}

/* Show tooltip on hover */
.whatsapp-float:hover .wa-tooltip{
  opacity:1;
  transform:translateX(0);
}

/* =========================
   CONTACT HERO
========================= */

.contact-hero{
  position:relative;

  width:100%;
  height:100vh;

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

  overflow:hidden;

  background-image:url('img/contact-banner.jpg');
  background-size:cover;
  background-position:center;
}

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

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

  background:
  linear-gradient(
    to bottom,
    rgba(0,0,0,0.55),
    rgba(0,0,0,0.78)
  );
}

/* ================= BLUR ================= */

.contact-blur{
  position:absolute;

  border-radius:50%;

  filter:blur(120px);

  opacity:0.12;
}

.contact-blur-1{
  width:320px;
  height:320px;

  background:#c79c52;

  top:-80px;
  left:-60px;
}

.contact-blur-2{
  width:260px;
  height:260px;

  background:#7c4b2a;

  right:-60px;
  bottom:-80px;
}

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

.contact-hero-content{
  position:relative;
  z-index:2;

  max-width:920px;

  text-align:center;

  padding:0 20px;
}

/* TAG */

.contact-tag{
  display:inline-block;

  color:#d4a85d;

  font-size:13px;
  font-weight:600;

  letter-spacing:4px;

  margin-bottom:24px;
}

/* TITLE */

.contact-hero-content h1{
  color:#f8ecd8;

  font-size:6rem;
  line-height:0.95;

  margin-bottom:28px;

  font-family:serif;
  font-weight:600;
}

/* TEXT */

.contact-hero-content p{
  color:#e5d9c8;

  font-size:1.1rem;
  line-height:1.9;

  max-width:760px;

  margin:auto auto 40px;
}

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

.contact-buttons{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:18px;

  flex-wrap:wrap;
}

/* BUTTON */

.contact-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:18px 34px;

  border-radius:50px;

  text-decoration:none;

  font-weight:600;

  transition:0.4s ease;
}

/* PRIMARY */

.primary-btn{
  background:#c79c52;

  color:#140603;
}

.primary-btn:hover{
  background:#f2c57c;

  transform:translateY(-4px);
}

/* SECONDARY */

.secondary-btn{
  border:1px solid rgba(255,255,255,0.18);

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

  backdrop-filter:blur(12px);

  color:#f8ecd8;
}

.secondary-btn:hover{
  background:
  rgba(255,255,255,0.14);

  transform:translateY(-4px);
}

/* ================= SCROLL ================= */

.scroll-down{
  position:absolute;

  bottom:30px;
  left:50%;

  transform:translateX(-50%);

  color:#d4c0a8;

  font-size:13px;

  letter-spacing:3px;

  animation:scrollMove 2s infinite;
}

/* ANIMATION */

@keyframes scrollMove{

  0%{
    transform:translate(-50%,0);
  }

  50%{
    transform:translate(-50%,10px);
  }

  100%{
    transform:translate(-50%,0);
  }

}

/* ================= REVEAL ================= */

.reveal{
  opacity:0;
  transform:translateY(60px);

  transition:
  opacity 1s ease,
  transform 1s ease;
}

.reveal.show{
  opacity:1;
  transform:translateY(0);
}

/* =========================
   TABLET
========================= */

@media(max-width:1100px){

  .contact-hero-content h1{
    font-size:4.8rem;
  }

}

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

@media(max-width:768px){

  .contact-hero{
    height:90vh;
  }

  .contact-tag{
    font-size:11px;
    letter-spacing:3px;
  }

  .contact-hero-content h1{
    font-size:3rem;
    line-height:1.08;

    margin-bottom:20px;
  }

  .contact-hero-content p{
    font-size:15px;
    line-height:1.8;

    margin-bottom:30px;
  }

  /* BUTTONS */

  .contact-buttons{
    flex-direction:column;

    width:100%;
  }

  .contact-btn{
    width:100%;

    padding:15px;
  }

  /* SCROLL */

  .scroll-down{
    font-size:11px;
  }

}


/* =========================
   CONTACT SECTION
========================= */

.contact-section{
  padding:120px 8%;

  background:#24130d;

  overflow:hidden;
}

/* WRAPPER */

.contact-wrapper{
  max-width:1400px;

  margin:auto;
}

/* ================= TOP ================= */

.contact-top{
  text-align:center;

  max-width:760px;

  margin:0 auto 70px;
}

.contact-tag{
  display:inline-block;

  color:#d4a85d;

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

  letter-spacing:4px;

  margin-bottom:20px;
}

.contact-top h2{
  color:#fff;

  font-size:5rem;
  line-height:1;

  margin-bottom:24px;

  font-family:serif;
}

.contact-top p{
  color:#d7c7bb;

  font-size:1.05rem;
  line-height:1.9;
}

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

.contact-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);

  gap:24px;
}

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

.contact-card{
  padding:38px 30px;

  border-radius:28px;

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

  border:1px solid rgba(255,255,255,0.08);

  backdrop-filter:blur(12px);

  transition:0.4s ease;
}

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

  border-color:#b78a49;
}

/* ICON */

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

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

  border-radius:20px;

  background:#b78a49;

  font-size:28px;

  margin-bottom:24px;
}

/* TITLE */

.contact-card h3{
  color:#fff;

  font-size:1.5rem;

  margin-bottom:14px;

  font-family:serif;
}

/* TEXT */

.contact-card p,
.contact-card a{
  color:#d8c9bc;

  font-size:15px;
  line-height:1.9;

  text-decoration:none;

  transition:0.3s ease;
}

.contact-card a:hover{
  color:#d4a85d;
}

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

@media(max-width:1100px){

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

}

@media(max-width:768px){

  .contact-section{
    padding:80px 20px;
  }

  .contact-top{
    margin-bottom:45px;
  }

  .contact-top h2{
    font-size:2.8rem;

    line-height:1.08;
  }

  .contact-top p{
    font-size:15px;
  }

  .contact-grid{
    grid-template-columns:1fr;

    gap:18px;
  }

  .contact-card{
    padding:28px 22px;

    border-radius:22px;
  }

  .contact-card h3{
    font-size:1.3rem;
  }

}

/* =========================
   EXPLORE SECTION
========================= */

/* =========================
   EXPLORE PRODUCTS SECTION
========================= */

.explore-section{
  position:relative;

  width:100%;
  padding:120px 8%;

  overflow:hidden;

  background:#f4efe7;
}

/* ================= TOP ================= */

.explore-top{
  max-width:950px;

  margin:0 auto 80px;

  text-align:center;
}

.explore-tag{
  display:inline-block;

  color:#b38b55;

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

  letter-spacing:4px;

  margin-bottom:24px;
}

.explore-top h2{
  color:#2b1b14;

  font-size:5rem;
  line-height:1;

  margin-bottom:28px;

  font-family:serif;
}

.explore-top p{
  color:#66584d;

  font-size:1.08rem;
  line-height:1.9;
}

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

.explore-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);

  gap:30px;
}

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

.explore-card{
  padding:42px 38px;

  border-radius:32px;

  background:#fff;

  border:1px solid #eadfce;

  box-shadow:
  0 18px 50px rgba(0,0,0,0.05);

  transition:0.45s ease;
}

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

  border-color:#6b3d20;

  box-shadow:
  0 28px 60px rgba(0,0,0,0.08);
}

/* PRODUCT LABEL */

.product-label{
  display:inline-block;

  color:#b38b55;

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

  letter-spacing:3px;

  margin-bottom:22px;
}

/* TITLE */

.explore-card h3{
  color:#2b1b14;

  font-size:2.2rem;
  line-height:1.2;

  margin-bottom:20px;

  font-family:serif;
}

/* DESCRIPTION */

.product-desc{
  color:#66584d;

  font-size:15px;
  line-height:1.9;

  margin-bottom:30px;
}

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

.product-info{
  display:flex;
  flex-direction:column;

  gap:18px;

  margin-bottom:34px;
}

.product-info span{
  color:#5f5348;

  font-size:14px;
  line-height:1.8;

  padding-bottom:16px;

  border-bottom:1px solid #efe5d7;
}

.product-info span:last-child{
  border-bottom:none;

  padding-bottom:0;
}

.product-info strong{
  color:#2b1b14;
}

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

.explore-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:100%;

  padding:18px 28px;

  border-radius:999px;

  background:#2b1b14;

  color:#f7ead6;

  text-decoration:none;

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

  letter-spacing:1px;

  transition:0.4s ease;
}

.explore-btn:hover{
  background:#b38b55;

  color:#140603;

  transform:translateY(-4px);
}

/* ================= REVEAL ================= */

.reveal{
  opacity:0;

  transform:translateY(60px);

  transition:
  opacity 1s ease,
  transform 1s ease;
}

.reveal.show{
  opacity:1;

  transform:translateY(0);
}

/* =========================
   TABLET
========================= */

@media(max-width:1100px){

  .explore-grid{
    grid-template-columns:1fr;
  }

}

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

@media(max-width:768px){

  .explore-section{
    padding:80px 20px;
  }

  .explore-top{
    margin-bottom:50px;
  }

  .explore-top h2{
    font-size:2.8rem;

    line-height:1.08;
  }

  .explore-top p{
    font-size:15px;
  }

  /* GRID */

  .explore-grid{
    gap:22px;
  }

  /* CARD */

  .explore-card{
    padding:28px 22px;

    border-radius:24px;
  }

  .explore-card h3{
    font-size:1.7rem;
  }

  .product-desc{
    font-size:14px;

    line-height:1.8;
  }

  .product-info span{
    font-size:13px;
  }

  .explore-btn{
    padding:16px 20px;

    font-size:13px;
  }

}

/* =========================
   GRADE SECTION
========================= */

.grade-section{
  padding:120px 8%;

  background:#fffaf4;
}

/* TOP */

.grade-top{
  text-align:center;

  max-width:850px;

  margin:0 auto 70px;
}

.grade-top span{
  display:inline-block;

  color:#b38b55;

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

  letter-spacing:4px;

  margin-bottom:22px;
}

.grade-top h2{
  color:#2b1b14;

  font-size:4.5rem;
  line-height:1.05;

  font-family:serif;
}

/* TABLE */

.grade-table{
  display:flex;
  flex-direction:column;

  gap:22px;

  max-width:1100px;

  margin:0 auto;
}

/* ROW */

.grade-row{
  display:grid;
  grid-template-columns:160px 1fr;

  gap:30px;

  align-items:center;

  padding:28px;

  border-radius:28px;

  background:#f4efe7;

  border:1px solid #eadfce;

  transition:0.4s ease;
}

.grade-row:hover{
  transform:translateY(-5px);

  border-color:#6b3d20;

  background:#fff;
}

/* CODE */

.grade-code{
  display:flex;
  align-items:center;
  justify-content:center;

  height:90px;

  border-radius:22px;

  background:#2b1b14;

  color:#f7ead6;

  font-size:2rem;
  font-weight:700;

  font-family:serif;
}

/* CONTENT */

.grade-content h3{
  color:#2b1b14;

  font-size:1.6rem;

  margin-bottom:10px;

  font-family:serif;
}

.grade-content p{
  color:#66584d;

  font-size:15px;
  line-height:1.9;
}

/* ================= REVEAL ================= */

.reveal{
  opacity:0;

  transform:translateY(60px);

  transition:
  opacity 1s ease,
  transform 1s ease;
}

.reveal.show{
  opacity:1;

  transform:translateY(0);
}

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

@media(max-width:768px){

  .grade-section{
    padding:80px 20px;
  }

  .grade-top{
    margin-bottom:45px;
  }

  .grade-top h2{
    font-size:2.7rem;

    line-height:1.1;
  }

  /* ROW */

  .grade-row{
    grid-template-columns:1fr;

    gap:20px;

    padding:22px;

    border-radius:22px;
  }

  .grade-code{
    height:75px;

    font-size:1.7rem;
  }

  .grade-content h3{
    font-size:1.3rem;
  }

  .grade-content p{
    font-size:14px;

    line-height:1.8;
  }

}


/* =========================
   HORECA / EXPORT / DOMESTIC
========================= */

.horeca-section,
.export-section,
.domestic-section{
  padding:120px 8%;

  background:#f8f4ee;
}

/* ================= TOP ================= */

.horeca-top,
.export-top,
.domestic-top{
  max-width:950px;

  margin:0 auto 70px;

  text-align:center;
}

.horeca-tag,
.export-tag,
.domestic-tag{
  display:inline-block;

  color:#b78a49;

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

  letter-spacing:4px;

  margin-bottom:24px;
}

.horeca-top h2,
.export-top h2,
.domestic-top h2{
  color:#24130d;

  font-size:5rem;
  line-height:1.02;

  margin-bottom:28px;

  font-family:serif;
}

.horeca-top p,
.export-top p,
.domestic-top p{
  color:#6d5d50;

  font-size:1.05rem;
  line-height:1.95;
}

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

.horeca-grid,
.export-grid,
.domestic-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);

  gap:26px;

  margin-bottom:70px;
}

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

.horeca-card,
.export-card,
.domestic-card{
  padding:36px;

  border-radius:30px;

  background:#fff;

  border:1px solid #ece2d3;

  transition:0.4s ease;

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

.horeca-card:hover,
.export-card:hover,
.domestic-card:hover{
  transform:translateY(-8px);

  border-color:#6f3f21;

  box-shadow:
  0 20px 50px rgba(0,0,0,0.08);
}

/* NUMBER */

.horeca-number{
  width:62px;
  height:62px;

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

  border-radius:18px;

  background:#2b1b14;

  color:#f8ecd8;

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

  margin-bottom:22px;
}

/* TITLE */

.horeca-card h3,
.export-card h3,
.domestic-card h3{
  color:#24130d;

  font-size:2rem;
  line-height:1.2;

  margin-bottom:16px;

  font-family:serif;
}

/* TEXT */

.horeca-card p,
.export-card p,
.domestic-card p{
  color:#6a5c50;

  font-size:15px;
  line-height:1.9;
}

/* ================= FIT / ORIGIN / IDEAL ================= */

.fit-box,
.origin-box,
.ideal-box{
  padding:42px;

  border-radius:34px;

  background:#2b1b14;

  color:#fff;

  margin-bottom:70px;
}

/* FIT */

.fit-box{
  display:grid;
  grid-template-columns:320px 1fr;

  gap:40px;
}

/* LABEL */

.fit-left span,
.origin-box span,
.ideal-box span,
.form-top span,
.process-top span{
  display:inline-block;

  color:#d4a85d;

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

  letter-spacing:3px;

  margin-bottom:14px;
}

/* HEADINGS */

.fit-left h3,
.process-top h3,
.form-top h3{
  font-size:3rem;

  line-height:1.1;

  font-family:serif;
}

.fit-left h3{
  color:#fff;
}

.process-top h3{
  color:#24130d;

  margin-top:14px;
}

.form-top h3{
  color:#24130d;

  margin-top:12px;
}

/* RIGHT */

.fit-right{
  display:grid;
  grid-template-columns:repeat(2,1fr);

  gap:18px;
}

/* ITEM */

.fit-item{
  padding:20px;

  border-radius:20px;

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

  line-height:1.8;

  color:#f5e8d8;

  font-size:15px;
}

/* ================= PROCESS ================= */

.process-wrapper{
  margin-top:40px;

  margin-bottom:80px;
}

.process-top{
  text-align:center;

  margin-bottom:40px;
}

/* PROCESS GRID */

.process-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);

  gap:18px;
}

/* PROCESS CARD */

.process-card{
  padding:30px 22px;

  border-radius:24px;

  background:#fff;

  text-align:center;

  border:1px solid #ece2d3;

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

.process-card h4{
  color:#6f3f21;

  font-size:1.2rem;

  margin-bottom:12px;
}

.process-card p{
  color:#6a5c50;

  font-size:14px;

  line-height:1.8;
}

/* ================= ORIGIN / IDEAL ================= */

.origin-grid,
.ideal-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);

  gap:18px;

  margin-top:24px;
}

.origin-grid div,
.ideal-grid div{
  padding:20px;

  border-radius:18px;

  text-align:center;

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

  color:#fff;

  font-size:15px;
}

/* ================= FORM BOX ================= */

.form-box{
  padding:50px;

  border-radius:34px;

  background:#fff;

  box-shadow:
  0 18px 50px rgba(0,0,0,0.06);
}

/* FORM TOP */

.form-top{
  text-align:center;

  max-width:800px;

  margin:0 auto 40px;
}

.form-top h3{
  font-size:2.2rem;

  line-height:1.4;
}

/* IFRAME */

.form-box iframe{
  width:100%;

  border:none;

  border-radius:24px;

  background:#fff;
}

/* ================= REVEAL ================= */

.reveal{
  opacity:0;

  transform:translateY(60px);

  transition:
  opacity 1s ease,
  transform 1s ease;
}

.reveal.show{
  opacity:1;

  transform:translateY(0);
}

/* =========================
   TABLET
========================= */

@media(max-width:1100px){

  .horeca-grid,
  .export-grid,
  .domestic-grid{
    grid-template-columns:1fr;
  }

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

  .origin-grid,
  .ideal-grid{
    grid-template-columns:repeat(3,1fr);
  }

}

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

@media(max-width:768px){

  .horeca-section,
  .export-section,
  .domestic-section{
    padding:80px 20px;
  }

  /* TOP */

  .horeca-top,
  .export-top,
  .domestic-top{
    margin-bottom:50px;
  }

  .horeca-top h2,
  .export-top h2,
  .domestic-top h2{
    font-size:2.8rem;

    line-height:1.08;
  }

  .horeca-top p,
  .export-top p,
  .domestic-top p{
    font-size:15px;
  }

  /* GRID */

  .horeca-grid,
  .export-grid,
  .domestic-grid{
    grid-template-columns:1fr;

    gap:20px;
  }

  /* CARD */

  .horeca-card,
  .export-card,
  .domestic-card{
    padding:28px 22px;

    border-radius:24px;
  }

  .horeca-card h3,
  .export-card h3,
  .domestic-card h3{
    font-size:1.6rem;
  }

  /* FIT */

  .fit-box{
    grid-template-columns:1fr;

    padding:28px 20px;
  }

  .fit-left h3{
    font-size:2rem;
  }

  .fit-right{
    grid-template-columns:1fr;
  }

  /* PROCESS */

  .process-wrapper{
    margin-bottom:60px;
  }

  .process-top h3{
    font-size:2.2rem;
  }

  .process-grid{
    grid-template-columns:1fr;
  }

  /* ORIGIN */

  .origin-box,
  .ideal-box{
    padding:28px 20px;
  }

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

  /* FORM */

  .form-box{
    padding:28px 18px;

    border-radius:24px;
  }

  .form-top{
    margin-bottom:30px;
  }

  .form-top h3{
    font-size:1.5rem;

    line-height:1.5;
  }

  .form-box iframe{
    border-radius:18px;
  }

}





/* =========================
   GREEN MOQ
========================= */

.green-moq{
  width:100%;
  margin-top:60px;
  display:flex;
  justify-content:center;
}

.green-moq-card{
  width:100%;
  max-width:720px;
  background:#f8f5ef;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:28px;
  padding:50px 45px;
  text-align:center;
  position:relative;
  overflow:hidden;
  transition:0.4s ease;
}

.green-moq-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:5px;
  background:#5c3d2e;
}

.green-moq-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(0,0,0,0.08);
}

.moq-tag{
  display:inline-block;
  font-size:0.8rem;
  letter-spacing:2px;
  color:#7b5a45;
  margin-bottom:18px;
  font-weight:600;
}

.green-moq-card h3{
  font-size:2rem;
  color:#1d1d1d;
  margin-bottom:18px;
  line-height:1.3;
}

.green-moq-card p{
  font-size:1rem;
  color:#555;
  line-height:1.8;
  max-width:520px;
  margin:auto;
}

.moq-value{
  margin-top:30px;
  font-size:1.15rem;
  color:#444;
}

.moq-value strong{
  color:#5c3d2e;
  font-size:2rem;
  display:block;
  margin-top:10px;
}

/* MOBILE */

@media(max-width:768px){

  .green-moq{
    margin-top:40px;
  }
  .green-moq-card{
    padding:35px 22px;
    border-radius:22px;
  }
  .green-moq-card h3{
    font-size:1.5rem;
  }
  .green-moq-card p{
    font-size:0.95rem;
  }
  .moq-value strong{
    font-size:1.6rem;
  }

}


/* nav 2 explore */

.quick-nav{
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: rgba(15,15,15,0.65);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 60px;
  z-index: 9999;
  box-shadow:
    0 10px 40px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.05);
  animation: floatBar 4s ease-in-out infinite;
}

/* FLOAT */

@keyframes floatBar{
  0%,100%{
    transform: translateX(-50%) translateY(0);
  }

  50%{
    transform: translateX(-50%) translateY(-4px);
  }
}

/* LINKS */

.quick-nav a{
  position: relative;
  text-decoration: none;
  color: #f5f5f5;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .5px;
  padding: 10px 18px;
  border-radius: 40px;
  transition: 0.35s ease;
  overflow: hidden;
  white-space: nowrap;
}

/* SHIMMER */

.quick-nav a::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.18),
    transparent
  );
  transform: translateX(-100%);
  transition: 0.5s;
}

.quick-nav a:hover::before{
  transform: translateX(100%);
}

/* HOVER */

.quick-nav a:hover{
  background: linear-gradient(135deg,#d4a017,#f7d774);
  color: #111;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(212,160,23,0.35);
}

/* ACTIVE */

.quick-nav a.active{
  background: linear-gradient(135deg,#d4a017,#f7d774);
  color: #111;
}

/* MOBILE */

@media(max-width:768px){

  .quick-nav{
    width: calc(80% - 20px);
    overflow-x: auto;
    margin-left: -40px;
    justify-content: flex-start;
    padding: 10px;
    gap: 8px;
    scrollbar-width: none;
  }

  .quick-nav::-webkit-scrollbar{
    display:none;
  }

  .quick-nav a{
    font-size: 12px;
    padding: 9px 14px;
    flex-shrink: 0;
  }

}