@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');



:root {

  --primary: #1D4ED8;

  --secondary: #2563EB;

  --navy: #1E3A8A;

  --dark: #1E1B4B;

  --green: #2d6a4f;

  --cream: #F5F8FF;

  --cream2: #EEF2FF;

  --light: #F5F8FF;

  --shadow: 0 8px 40px rgba(30, 27, 75, 0.10);

  --shadow-lg: 0 20px 60px rgba(30, 27, 75, 0.18);

}



* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



html {

  scroll-behavior: smooth;

}



body {

  font-family: var(--font-primary, "Poppins", sans-serif);

  color: var(--text-body-color, #334155);

  background: #fff;

  overflow-x: hidden;

  font-size: var(--text-body, 1rem);

  line-height: var(--text-body-lh, 1.7);

}



h1,

h2,

h3,

h4,

h5,

h6 {

  color: var(--dark);

  font-family: var(--font-primary, "Poppins", sans-serif);

}



p {

  font-family: var(--font-primary, "Poppins", sans-serif);

  font-size: var(--text-body, 1rem);

  line-height: var(--text-body-lh, 1.7);

  color: var(--text-body-color, #334155);

}



a {

  text-decoration: none;

  transition: all 0.3s;

}



img {

  max-width: 100%;

}



::-webkit-scrollbar {

  width: 5px;

}



::-webkit-scrollbar-thumb {

  background: var(--secondary);

  border-radius: 10px;

}



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

#topbar {

  background: #111;

  padding: 8px 0;

  font-size: 0.82rem;

}



#topbar span {

  color: #aaa;

  margin-right: 16px;

}



#topbar span i {

  color: var(--secondary);

  margin-right: 5px;

}



#topbar .tsoc a {

  width: 27px;

  height: 27px;

  border-radius: 50%;

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

  display: inline-flex;

  align-items: center;

  justify-content: center;

  color: #bbb;

  font-size: 0.75rem;

  margin-left: 5px;

  transition: 0.3s;

}



#topbar .tsoc a:hover {

  background: var(--primary);

  color: #fff;

}



.ttag {

  background: var(--primary);

  color: #fff;

  padding: 2px 10px;

  border-radius: 20px;

  font-size: 0.7rem;

  font-weight: 600;

  text-transform: uppercase;

}



/* ===================== SECTION COMMONS ===================== */

section {

  padding: 60px 0;

}



.slbl {



  font-size: 1.35rem;

  color: var(--primary);

  display: block;

  margin-bottom: 4px;

}



.stitle {

  font-size: var(--text-h2);

  font-weight: var(--text-h2-weight);

  line-height: var(--text-h2-lh);

  margin-bottom: var(--text-h2-margin, 1rem);

}



.stitle span {

  color: var(--primary);

}



.sline {

  width: 58px;

  height: 4px;

  border-radius: 4px;

  background: linear-gradient(90deg, var(--primary), var(--secondary));

  margin: 0 auto 12px;

}



.sline.lft {

  margin-left: 0;

}



.sdesc {

  color: var(--text-lead-color);

  font-size: var(--text-lead);

  line-height: var(--text-lead-lh);

  text-align: justify;

  text-justify: inter-word;

  -webkit-hyphens: auto;

  -ms-hyphens: auto;

  hyphens: auto;

}



.btn-red {

  background: linear-gradient(135deg, var(--primary), var(--navy));

  color: #fff;

  border: none;

  border-radius: 50px;

  padding: 14px 32px;

  font-weight: 600;

  font-size: 0.93rem;

  box-shadow: 0 8px 24px rgba(29, 78, 216, 0.35);

  transition: 0.3s;

  display: inline-flex;

  align-items: center;

  gap: 9px;

  cursor: pointer;

  font-family: "Poppins", sans-serif;

}



.btn-red:hover {

  transform: translateY(-3px);

  box-shadow: 0 14px 34px rgba(29, 78, 216, 0.45);

  color: #fff;

}



/* 

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

#hero {

  background: var(--cream);

  min-height: 92vh;

  display: flex;

  align-items: center;

  position: relative;

  overflow: hidden;

}



.hbgtxt {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  font-size: 22vw;

  font-weight: 900;



  color: rgba(0, 0, 0, 0.04);

  pointer-events: none;

  white-space: nowrap;

}



.hs {

  position: absolute;

  border-radius: 50%;

}



.hs1 {

  width: 480px;

  height: 480px;

  background: radial-gradient(circle, rgba(29, 78, 216, 0.07), transparent 70%);

  top: -90px;

  right: -80px;

  animation: fsh 8s ease-in-out infinite;

}



.hs2 {

  width: 280px;

  height: 280px;

  background: radial-gradient(circle,

      rgba(96, 165, 250, 0.09),

      transparent 70%);

  bottom: -50px;

  left: 8%;

  animation: fsh 10s ease-in-out infinite reverse;

}



@keyframes fsh {



  0%,

  100% {

    transform: translateY(0);

  }



  50% {

    transform: translateY(-28px);

  }

}



.hbadge {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  background: #fff;

  border-radius: 30px;

  padding: 6px 16px 6px 6px;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

  margin-bottom: 22px;

}



.hbadge .hbi {

  width: 30px;

  height: 30px;

  border-radius: 50%;

  background: linear-gradient(135deg, var(--primary), var(--secondary));

  display: flex;

  align-items: center;

  justify-content: center;

  color: #fff;

  font-size: 0.78rem;

}



.hbadge span {

  font-size: 0.76rem;

  font-weight: 600;

  color: var(--dark);

}



.htitle {

  font-size: var(--text-h1);

  font-weight: var(--text-h1-weight);

  line-height: var(--text-h1-lh);

  letter-spacing: var(--text-h1-ls);

  margin-bottom: 18px;

}



.htitle .hl {

  color: var(--primary);

  position: relative;

  display: inline-block;

}



.htitle .hl::before {

  content: "";

  position: absolute;

  bottom: 2px;

  left: 0;

  right: 0;

  height: 7px;

  background: rgba(29, 78, 216, 0.14);

  border-radius: 4px;

  z-index: -1;

}



.hdesc {

  font-size: 1rem;

  color: #666;

  line-height: 1.8;

  max-width: 470px;

  margin-bottom: 30px;

}



/* FIX 2 — Video play button */

.btn-play {

  display: inline-flex;

  align-items: center;

  gap: 12px;

  color: var(--dark);

  font-weight: 600;

  font-size: 0.9rem;

  padding: 10px 16px;

  transition: 0.3s;

  cursor: pointer;

}



.btn-play .pico {

  width: 48px;

  height: 48px;

  border-radius: 50%;

  background: #fff;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);

  color: var(--primary);

  font-size: 0.95rem;

  transition: 0.3s;

  flex-shrink: 0;

}



.btn-play:hover .pico {

  background: var(--primary);

  color: #fff;

  transform: scale(1.1);

}



.btn-play:hover {

  color: var(--primary);

}



.hstats {

  display: flex;

  gap: 20px;

  flex-wrap: wrap;

  margin-top: 32px;

}



.hstat .snum {



  font-size: 1.9rem;

  font-weight: 900;

  color: var(--dark);

  display: block;

  line-height: 1;

}



.hstat .snum em {

  color: var(--primary);

  font-style: normal;

}



.hstat small {

  font-size: 0.7rem;

  color: #aaa;

  text-transform: uppercase;

  letter-spacing: 1px;

}



.sdiv {

  width: 1px;

  background: #ddd;

  height: 38px;

  align-self: center;

}



.hcircle {

  width: 480px;

  height: 480px;

  border-radius: 50%;

  background: radial-gradient(circle at 40% 40%, #F5F8FF, #EEF2FF);

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0 auto;

  position: relative;

  box-shadow: 0 28px 76px rgba(29, 78, 216, 0.14);

}



.hcircle img {

  width: 90%;

  height: 90%;

  object-fit: cover;

  border-radius: 50%;

}



.fcard {

  position: absolute;

  background: #fff;

  border-radius: 11px;

  padding: 10px 15px;

  box-shadow: var(--shadow);

  display: flex;

  align-items: center;

  gap: 9px;

}



.fcard.fc1 {

  top: 55px;

  left: -15px;

  animation: fltc 4s ease-in-out infinite;

}



.fcard.fc2 {

  bottom: 75px;

  right: -25px;

  animation: fltc 4s ease-in-out infinite 1.5s;

}



.fcard.fc3 {

  top: 38%;

  right: -45px;

  animation: fltc 4s ease-in-out infinite 0.8s;

}



@keyframes fltc {



  0%,

  100% {

    transform: translateY(0);

  }



  50% {

    transform: translateY(-9px);

  }

}



.fcoi {

  width: 34px;

  height: 34px;

  border-radius: 8px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 0.95rem;

}



.fcoi.r {

  background: rgba(29, 78, 216, 0.11);

  color: var(--primary);

}



.fcoi.y {

  background: rgba(96, 165, 250, 0.14);

  color: var(--secondary);

}



.fcoi.g {

  background: rgba(45, 106, 79, 0.11);

  color: var(--green);

}



.fcnum {

  font-weight: 700;

  font-size: 0.92rem;

  color: var(--dark);

  display: block;

  line-height: 1;

}



.fcsm {

  font-size: 0.66rem;

  color: #999;

}



/* ===================== MARQUEE ===================== */

.mqsec {

  background: var(--primary);

  padding: 13px 0;

  overflow: hidden;

}



.mqtrack {

  display: flex;

  gap: 38px;

  white-space: nowrap;

  animation: mqrun 22s linear infinite;

}



.mqitem {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  color: #fff;

  font-size: 0.86rem;

  font-weight: 500;

}



.mqitem i {

  color: rgba(255, 255, 255, 0.55);

  font-size: 0.55rem;

}



@keyframes mqrun {

  from {

    transform: translateX(0);

  }



  to {

    transform: translateX(-50%);

  }

}



/* ===================== CATEGORY ===================== */

#category {

  background: var(--cream);

}



.catcard {

  background: #fff;

  border-radius: 15px;

  padding: 22px 14px;

  text-align: center;

  cursor: pointer;

  transition: 0.4s;

  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);

  border: 2px solid transparent;

}



.catcard:hover,

.catcard.active {

  transform: translateY(-7px);

  box-shadow: 0 14px 38px rgba(29, 78, 216, 0.14);

  border-color: var(--primary);

}



.catimg {

  width: 86px;

  height: 86px;

  border-radius: 50%;

  object-fit: cover;

  margin: 0 auto 12px;

  display: block;

  transition: 0.4s;

}



.catcard:hover .catimg {

  transform: scale(1.1) rotate(-4deg);

}



.catnm {

  font-size: 0.86rem;

  font-weight: 600;

  color: var(--dark);

  margin-bottom: 3px;

}



.catct {

  font-size: 0.73rem;

  color: #bbb;

}



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

#about {

  background: #fff;

}



.astack {

  position: relative;

}



.amain {

  border-radius: 18px;

  overflow: hidden;

  box-shadow: var(--shadow-lg);

}



.amain img {

  width: 100%;

  height: 440px;

  object-fit: cover;

  display: block;

}



.asm {

  position: absolute;

  bottom: -26px;

  right: -26px;

  width: 170px;

  height: 170px;

  border-radius: 14px;

  overflow: hidden;

  border: 5px solid #fff;

  box-shadow: var(--shadow);

}



.asm img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.aexp {

  position: absolute;

  top: 28px;

  left: -16px;

  background: var(--primary);

  color: #fff;

  border-radius: 14px;

  padding: 18px 22px;

  text-align: center;

  box-shadow: 0 10px 28px rgba(29, 78, 216, 0.4);

}



.aexp .anum {



  font-size: 2.3rem;

  font-weight: 900;

  line-height: 1;

  display: block;

}



.aexp small {

  font-size: 0.7rem;

  opacity: 0.9;

}



.fti {

  display: flex;

  align-items: flex-start;

  gap: 13px;

  margin-bottom: 18px;

}



.ftico {

  width: 46px;

  height: 46px;

  border-radius: 11px;

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.15rem;

  transition: 0.3s;

}



.ftico.r {

  background: rgba(29, 78, 216, 0.1);

  color: var(--primary);

}



.ftico.y {

  background: rgba(96, 165, 250, 0.11);

  color: var(--secondary);

}



.ftico.g {

  background: rgba(45, 106, 79, 0.1);

  color: var(--green);

}



.fti:hover .ftico {

  transform: scale(1.1);

}



.fti h6 {

  font-size: 0.9rem;

  font-weight: 700;

  color: var(--dark);

  margin-bottom: 2px;

  font-family: "Poppins", sans-serif;

}



.fti p {

  font-size: 0.8rem;

  color: #888;

  margin: 0;

  line-height: 1.6;

  text-align: justify;

  text-justify: inter-word;

  -webkit-hyphens: auto;

  -ms-hyphens: auto;

  hyphens: auto;

}



/* ===================== MENU ===================== */

#menu {

  background: var(--light);

}



/* FIX 3 — Filter buttons */

.filtbtn {

  border: 2px solid #e5e5e5;

  background: #fff;

  border-radius: 50px;

  padding: 8px 20px;

  font-size: 0.84rem;

  font-weight: 600;

  color: #666;

  cursor: pointer;

  transition: 0.3s;

  margin: 3px;

  font-family: "Poppins", sans-serif;

}



.filtbtn.active,

.filtbtn:hover {

  background: var(--primary);

  border-color: var(--primary);

  color: #fff;

  box-shadow: 0 5px 18px rgba(29, 78, 216, 0.24);

}



.mwrap {

  transition: 0.35s;

}



.mwrap.gone {

  display: none !important;

}



.mcard {

  background: #fff;

  border-radius: 18px;

  overflow: hidden;

  transition: 0.4s;

  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.07);

  cursor: pointer;

}



.mcard:hover {

  transform: translateY(-9px);

  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.13);

}



.mimg {

  position: relative;

  overflow: hidden;

  height: 215px;

  background: var(--cream2);

}



.mimg img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: 0.5s;

}



.mcard:hover .mimg img {

  transform: scale(1.09);

}



.mbdg {

  position: absolute;

  top: 13px;

  left: 13px;

  background: var(--primary);

  color: #fff;

  border-radius: 7px;

  padding: 3px 11px;

  font-size: 0.7rem;

  font-weight: 700;

}



.mbdg.new {

  background: var(--green);

}



.mbdg.hot {

  background: var(--secondary);

  color: var(--dark);

}



/* FIX 4 — Heart & Plus buttons stop propagation */

.mhrt {

  position: absolute;

  top: 13px;

  right: 13px;

  width: 33px;

  height: 33px;

  border-radius: 50%;

  background: #fff;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #ccc;

  cursor: pointer;

  transition: 0.3s;

  box-shadow: 0 2px 9px rgba(0, 0, 0, 0.1);

}



.mhrt:hover {

  color: var(--primary);

  transform: scale(1.18);

}



.mbody {

  padding: 18px;

}



.mcat {

  font-size: 0.7rem;

  font-weight: 600;

  color: var(--secondary);

  text-transform: uppercase;

  letter-spacing: 1px;

  margin-bottom: 5px;

}



.mtit {

  font-size: 1.05rem;

  font-weight: 700;

  margin-bottom: 5px;



}



.mdesc {

  font-size: 0.78rem;

  color: #aaa;

  margin-bottom: 13px;

  line-height: 1.5;

}



.mfoot {

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.mprice {

  font-size: 1.25rem;

  font-weight: 800;

  color: var(--primary);



}



.mprice small {

  font-size: 0.72rem;

  font-weight: 400;

  color: #ccc;

  text-decoration: line-through;

  margin-left: 5px;

}



.mstars {

  font-size: 0.73rem;

  color: var(--secondary);

}



/* FIX 4 — Plus button opens detail popup */

.madd {

  width: 36px;

  height: 36px;

  border-radius: 50%;

  background: linear-gradient(135deg, var(--primary), #c01e12);

  border: none;

  color: #fff;

  font-size: 1rem;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: 0.3s;

  box-shadow: 0 4px 11px rgba(232, 40, 26, 0.28);

}



.madd:hover {

  transform: scale(1.15) rotate(90deg);

}



*/



/* ===================== SPECIAL OFFER ===================== */

#special {

  background: linear-gradient(135deg, #0b1629 0%, #0f1e40 100%);

  position: relative;

  overflow: hidden;

}



.spbg {

  position: absolute;

  inset: 0;

  pointer-events: none;

  opacity: 0.03;

  background: repeating-linear-gradient(45deg,

      #fff 0,

      #fff 1px,

      transparent 0,

      transparent 50%);

  background-size: 40px 40px;

}



.sptag {

  display: inline-block;

  background: var(--secondary);

  color: var(--dark);

  border-radius: 6px;

  padding: 4px 15px;

  font-size: 0.76rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 2px;

  margin-bottom: 14px;

}



.sptitle {

  font-size: clamp(2.3rem, 5vw, 3.8rem);

  font-weight: 900;

  color: #fff;

  line-height: 1.1;

}



.sptitle span {

  color: var(--secondary);

}



.spdesc {

  color: rgba(255, 255, 255, 0.62);

  margin: 18px 0;

  font-size: 0.93rem;

  line-height: 1.8;

}



.cdwrap {

  display: flex;

  gap: 14px;

  margin: 26px 0;

}



.cditem {

  text-align: center;

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

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

  border-radius: 11px;

  padding: 13px 18px;

  min-width: 72px;

}



.cdnum {



  font-size: 2.1rem;

  font-weight: 900;

  color: #fff;

  display: block;

  line-height: 1;

}



.cdlbl {

  font-size: 0.63rem;

  text-transform: uppercase;

  letter-spacing: 1px;

  color: rgba(255, 255, 255, 0.48);

  margin-top: 3px;

  display: block;

}



.spimgw {

  position: relative;

  text-align: center;

}



.spglow {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 360px;

  height: 360px;

  border-radius: 50%;

  background: radial-gradient(circle,

      rgba(96, 165, 250, 0.24),

      transparent 70%);

}



.spimgw img {

  position: relative;

  z-index: 2;

  width: 100%;

  max-width: 440px;

  filter: drop-shadow(0 28px 56px rgba(246, 166, 35, 0.28));

  animation: fltimg 5s ease-in-out infinite;

}



@keyframes fltimg {



  0%,

  100% {

    transform: translateY(0);

  }



  50% {

    transform: translateY(-17px);

  }

}



.sppbdg {

  position: absolute;

  top: 18px;

  left: 18px;

  z-index: 3;

  background: var(--primary);

  color: #fff;

  width: 86px;

  height: 86px;

  border-radius: 50%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  box-shadow: 0 8px 24px rgba(29, 78, 216, 0.5);

  animation: plsbdg 2.5s ease-in-out infinite;

}



@keyframes plsbdg {



  0%,

  100% {

    transform: scale(1);

  }



  50% {

    transform: scale(1.06);

    box-shadow: 0 12px 34px rgba(29, 78, 216, 0.7);

  }

}



.sppbdg .old {

  font-size: 0.68rem;

  text-decoration: line-through;

  opacity: 0.7;

}



.sppbdg .np {

  font-size: 1.25rem;

  font-weight: 900;

}



/* ===================== GALLERY ===================== */

#gallery {

  background: var(--light);

}



.ggrid {

  display: grid;

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

  grid-template-rows: repeat(2, 215px);

  gap: 13px;

}



.gitem {

  border-radius: 14px;

  overflow: hidden;

  position: relative;

  cursor: pointer;

}



.gitem:first-child {

  grid-row: span 2;

}



.gitem img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: 0.5s;

}



.gitem:hover img {

  transform: scale(1.08);

}



.gover {

  position: absolute;

  inset: 0;

  background: linear-gradient(to top, rgba(0, 0, 0, 0.76), transparent 60%);

  opacity: 0;

  transition: 0.4s;

  display: flex;

  align-items: flex-end;

  padding: 18px;

}



.gitem:hover .gover {

  opacity: 1;

}



.gover span {

  color: #fff;

  font-weight: 600;

  font-size: 0.88rem;

}



.gover i {

  color: var(--secondary);

  margin-right: 5px;

}



/* ===================== HISTORY — FIX 8 ===================== */

#history {

  background: var(--cream);

}



.timeline {

  position: relative;

  padding: 18px 0;

}



.timeline::before {

  content: "";

  position: absolute;

  left: 50%;

  transform: translateX(-50%);

  width: 2px;

  background: linear-gradient(to bottom, var(--primary), var(--secondary));

  top: 0;

  bottom: 0;

}



/* Grid: left-col | dot-col | right-col */

.tli {

  display: grid;

  grid-template-columns: 1fr 36px 1fr;

  margin-bottom: 50px;

  align-items: start;

}



.tl-left {

  padding-right: 32px;

  text-align: right;

}



.tl-center {

  display: flex;

  justify-content: center;

  padding-top: 5px;

}



.tl-right {

  padding-left: 32px;

  text-align: left;

}



/* ODD → show LEFT text, hide RIGHT */

.tli:nth-child(odd) .tl-right {

  visibility: hidden;

}



/* EVEN → hide LEFT, show RIGHT */

.tli:nth-child(even) .tl-left {

  visibility: hidden;

}



.tldot {

  width: 18px;

  height: 18px;

  border-radius: 50%;

  background: var(--primary);

  border: 4px solid #fff;

  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.3);

  flex-shrink: 0;

}



.tlyear {



  color: var(--primary);

  font-size: 1.15rem;

  margin-bottom: 3px;

}



.tl-left h5,

.tl-right h5 {

  font-size: 1.05rem;

  font-weight: 700;

  margin-bottom: 7px;



  color: var(--dark);

}



.tl-left p,

.tl-right p {

  font-size: 0.83rem;

  color: #888;

  line-height: 1.7;

  margin: 0;

}



@media (max-width: 767px) {

  .timeline::before {

    left: 17px;

  }



  .tli {

    grid-template-columns: 32px 1fr;

    gap: 0;

  }





  .tl-right {

    display: block !important;

    visibility: visible !important;

    padding-left: 18px;

    text-align: left;

  }



  .tl-center {

    padding-top: 5px;

  }







  .tli:nth-child(odd) .tl-right {

    visibility: visible !important;

  }

}



/* ===================== CHEFS ===================== */

#chefs {

  background: #fff;

}



.chcard {

  border-radius: 18px;

  overflow: hidden;

  background: #fff;

  transition: 0.4s;

  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07);

}



.chcard:hover {

  transform: translateY(-9px);

  box-shadow: var(--shadow-lg);

}



.chimg {

  position: relative;

  overflow: hidden;

  height: 268px;

  background: var(--cream2);

}



.chimg img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: top;

  transition: 0.5s;

}



.chcard:hover .chimg img {

  transform: scale(1.05);

}



.chsoc {

  position: absolute;

  bottom: -50px;

  left: 0;

  right: 0;

  display: flex;

  justify-content: center;

  gap: 7px;

  transition: 0.4s;

  padding: 10px 0;

  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);

}



.chcard:hover .chsoc {

  bottom: 0;

}



.chsoc a {

  width: 33px;

  height: 33px;

  border-radius: 50%;

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

  display: flex;

  align-items: center;

  justify-content: center;

  color: #fff;

  font-size: 0.78rem;

  transition: 0.3s;

}



.chsoc a:hover {

  background: var(--primary);

}



.chbody {

  padding: 18px;

  text-align: center;

}



.chnm {

  font-size: 1.05rem;

  font-weight: 700;

  margin-bottom: 2px;

}



.chrole {

  font-size: 0.78rem;

  color: var(--primary);

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.8px;

}



.chexp {

  font-size: 0.76rem;

  color: #bbb;

  margin-top: 5px;

}



/* ===================== HOURS ===================== */

#hours {

  background: linear-gradient(135deg, var(--green), #1a4a35);

  position: relative;

  overflow: hidden;

}



.hrsbg {

  position: absolute;

  inset: 0;

  opacity: 0.05;

  background: repeating-linear-gradient(45deg,

      #fff 0,

      #fff 1px,

      transparent 0,

      transparent 50%);

  background-size: 28px 28px;

}



.hrscard {

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

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

  border-radius: 18px;

  padding: 28px;

}



.hrsrow {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 13px 0;

  border-bottom: 1px solid rgba(255, 255, 255, 0.09);

}



.hrsrow:last-child {

  border: none;

}



.hrsday {

  color: rgba(255, 255, 255, 0.78);

  font-size: 0.9rem;

  font-weight: 500;

}



.hrstime {

  color: #fff;

  font-weight: 700;

  font-size: 0.9rem;

}



.hdot {

  width: 7px;

  height: 7px;

  border-radius: 50%;

}



.hdot.on {

  background: #4ade80;

  box-shadow: 0 0 7px #4ade80;

}



.hdot.off {

  background: #ff6b6b;

}



.hrscta {

  background: var(--primary);

  border-radius: 18px;

  padding: 28px;

  text-align: center;

  box-shadow: 0 18px 48px rgba(29, 78, 216, 0.4);

}



.hrscta h4 {

  color: #fff;

  font-size: 1.4rem;

  font-weight: 800;

}



.hrscta p {

  color: rgba(255, 255, 255, 0.78);

  font-size: 0.86rem;

  margin: 9px 0 18px;

}



.btnw {

  background: #fff;

  color: var(--primary);

  border-radius: 50px;

  padding: 11px 28px;

  font-weight: 700;

  font-size: 0.88rem;

  display: inline-block;

  transition: 0.3s;

}



.btnw:hover {

  transform: translateY(-3px);

  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);

  color: var(--primary);

}



/* ===================== TESTIMONIALS ===================== */

#testimonials {

  background: #fff;

}



.tescard {

  background: var(--cream);

  border-radius: 18px;

  padding: 28px;

  position: relative;

  overflow: hidden;

  transition: 0.4s;

}



.tescard:hover {

  transform: translateY(-5px);

  box-shadow: var(--shadow);

}



.tesq {

  position: absolute;

  top: 18px;

  right: 22px;

  font-size: 4.5rem;

  color: rgba(29, 78, 216, 0.07);



  line-height: 1;

}



.tess {

  color: var(--secondary);

  font-size: 0.83rem;

  margin-bottom: 12px;

}



.testxt {

  font-size: 0.88rem;

  color: #666;

  line-height: 1.8;

  margin-bottom: 18px;

}



.tesauth {

  display: flex;

  align-items: center;

  gap: 11px;

}



.tesauth img {

  width: 46px;

  height: 46px;

  border-radius: 50%;

  object-fit: cover;

  border: 3px solid var(--primary);

}



.tesnm {

  font-weight: 700;

  font-size: 0.88rem;

  color: var(--dark);

  margin-bottom: 1px;



}



.tesrl {

  font-size: 0.73rem;

  color: #aaa;

}



/* ===================== RESERVATION — FIX 5 ===================== */

#reservation {

  background: var(--light);

}



.resico {

  width: 54px;

  height: 54px;

  border-radius: 13px;

  background: rgba(29, 78, 216, 0.1);

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--primary);

  font-size: 1.25rem;

  flex-shrink: 0;

}



.flbl {

  font-size: 0.83rem;

  font-weight: 600;

  color: var(--dark);

  margin-bottom: 5px;

  display: block;

}



.fctrl {

  width: 100%;

  border: 2px solid #eee;

  border-radius: 9px;

  padding: 11px 15px;

  font-family: "Poppins", sans-serif;

  font-size: 0.88rem;

  outline: none;

  transition: 0.3s;

  color: var(--dark);

  background: #fff;

  appearance: auto;

}



.fctrl:focus {

  border-color: var(--primary);

}



.fcard {

  background: #fff;

  border-radius: 18px;

  padding: 32px;

  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.08);

}



.sucmsg {

  display: none;

  text-align: center;

  padding: 16px;

  background: rgba(45, 106, 79, 0.07);

  border-radius: 11px;

  margin-top: 14px;

}



.sucmsg i {

  color: var(--green);

  font-size: 1.7rem;

  display: block;

  margin-bottom: 7px;

}



.sucmsg p {

  color: var(--green);

  font-weight: 600;

  margin: 0;

  font-size: 0.88rem;

}



/* ===================== BLOG ===================== */

#blog {

  background: var(--light);

}



.blcard {

  background: #fff;

  border-radius: 18px;

  overflow: hidden;

  transition: 0.4s;

  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);

}



.blcard:hover {

  transform: translateY(-7px);

  box-shadow: var(--shadow-lg);

}



.blimg {

  position: relative;

  height: 195px;

  overflow: hidden;

}



.blimg img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: 0.5s;

}



.blcard:hover .blimg img {

  transform: scale(1.06);

}



.bldatebdg {

  position: absolute;

  top: 14px;

  left: 14px;

  background: var(--primary);

  color: #fff;

  border-radius: 9px;

  padding: 5px 11px;

  text-align: center;

  line-height: 1.2;

}



.bldatebdg .bd {

  font-size: 1.15rem;

  font-weight: 800;

  display: block;

}



.bldatebdg .bm {

  font-size: 0.63rem;

  text-transform: uppercase;

  letter-spacing: 0.8px;

}



.blbody {

  padding: 20px;

}



.bltag {

  font-size: 0.7rem;

  font-weight: 600;

  color: var(--primary);

  text-transform: uppercase;

  letter-spacing: 0.8px;

  margin-bottom: 7px;

}



.bltit {

  font-size: 1rem;

  font-weight: 700;

  margin-bottom: 9px;

  line-height: 1.4;

}



.bltit a {

  color: var(--dark);

}



.bltit a:hover {

  color: var(--primary);

}



.blmeta {

  display: flex;

  gap: 14px;

  font-size: 0.76rem;

  color: #bbb;

  margin-bottom: 13px;

}



.blmeta i {

  color: var(--primary);

  margin-right: 3px;

}



.blmore {

  font-size: 0.8rem;

  font-weight: 600;

  color: var(--primary);

  display: inline-flex;

  align-items: center;

  gap: 5px;

}



.blmore i {

  transition: 0.3s;

}



.blmore:hover {

  color: var(--dark);

}



.blmore:hover i {

  transform: translateX(5px);

}



/* ===================== NEWSLETTER ===================== */

#newsletter {

  background: linear-gradient(135deg, var(--primary), var(--navy));

  position: relative;

  overflow: hidden;

  padding: 80px 0;

}



.nlbg {

  position: absolute;

  inset: 0;

  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ccircle cx='50' cy='50' r='40' fill='none' stroke='white' stroke-width='.4' opacity='.1'/%3E%3C/svg%3E");

  background-size: 75px;

}



.nlw {

  position: relative;

  z-index: 2;

}



.nlw h2 {

  color: #fff;

  font-size: 2.1rem;

}



/* Newsletter form — fixed layout */

.nl-form-wrap {

  display: flex;

  gap: 10px;

  max-width: 560px;

  margin: 0 auto;

  align-items: center;

}



.nlinput {

  flex: 1;

  min-width: 0;

  border: none;

  border-radius: 50px;

  padding: 14px 22px;

  font-size: 0.9rem;

  outline: none;

  font-family: "Poppins", sans-serif;

  color: #333;

}



.nlbtn {

  flex-shrink: 0;

  background: var(--secondary);

  color: var(--dark);

  border: none;

  border-radius: 50px;

  padding: 14px 26px;

  font-weight: 700;

  font-size: 0.9rem;

  cursor: pointer;

  white-space: nowrap;

  transition: 0.3s;

  font-family: "Poppins", sans-serif;

}



.nlbtn:hover {

  transform: scale(1.05);

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);

}



@media (max-width: 540px) {

  .nl-form-wrap {

    flex-direction: column;

    padding: 0 10px;

  }



  .nlinput {

    width: 100%;

    border-radius: 12px;

  }



  .nlbtn {

    width: 100%;

    border-radius: 12px;

  }

}



/* ===================== CONTACT — FIX 6 ===================== */

#contact-section {

  background: #fff;

}



.ctdark {

  background: var(--dark);

  border-radius: 18px;

  padding: 38px;

  height: 100%;

}



.ctdark h4 {

  color: #fff;

  margin-bottom: 7px;

}



.ctdark .ctsub {

  color: rgba(255, 255, 255, 0.58);

  font-size: 0.88rem;

  margin-bottom: 26px;

}



.ctitem {

  display: flex;

  gap: 13px;

  margin-bottom: 20px;

  align-items: flex-start;

}



.cticon {

  width: 40px;

  height: 40px;

  border-radius: 9px;

  background: rgba(29, 78, 216, 0.18);

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--primary);

  font-size: 0.9rem;

  flex-shrink: 0;

}



.ctinfo strong {

  display: block;

  color: #aaa;

  font-size: 0.73rem;

  text-transform: uppercase;

  letter-spacing: 0.8px;

  margin-bottom: 1px;

  font-family: "Poppins", sans-serif;

}



.ctinfo span {

  color: #fff;

  font-size: 0.87rem;

}



.ctsocrow {

  display: flex;

  gap: 8px;

  margin-top: 14px;

}



.ctsocrow a {

  width: 35px;

  height: 35px;

  border-radius: 8px;

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

  display: flex;

  align-items: center;

  justify-content: center;

  color: #bbb;

  transition: 0.3s;

}



.ctsocrow a:hover {

  background: var(--primary);

  color: #fff;

}



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

footer {

  background: var(--dark);

  padding: 68px 0 0;

}



.fnm {



  font-size: 1.9rem;

  font-weight: 900;

  color: #fff;

}



.fnm span {

  color: var(--primary);

}



.fdesc {

  color: #777;

  font-size: 0.86rem;

  line-height: 1.8;

  margin-top: 9px;

}



.fsoc {

  display: flex;

  gap: 9px;

  margin-top: 18px;

}



.fsoc a {

  width: 36px;

  height: 36px;

  border-radius: 9px;

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

  display: flex;

  align-items: center;

  justify-content: center;

  color: #777;

  font-size: 0.88rem;

  transition: 0.3s;

}



.fsoc a:hover {

  background: var(--primary);

  color: #fff;

  transform: translateY(-3px);

}



.ftit {

  color: #fff;

  font-size: 0.95rem;

  font-weight: 700;

  margin-bottom: 18px;

  padding-bottom: 9px;

  border-bottom: 2px solid var(--primary);

  display: inline-block;

  font-family: "Poppins", sans-serif;

}



.flinks li {

  list-style: none;

  margin-bottom: 9px;

}



.flinks a {

  color: #777;

  font-size: 0.86rem;

  display: inline-flex;

  align-items: center;

  gap: 7px;

  transition: 0.3s;

}



.flinks a:hover {

  color: var(--secondary);

  padding-left: 5px;

}



.flinks a i {

  color: var(--primary);

  font-size: 0.68rem;

}



.fci {

  display: flex;

  align-items: flex-start;

  gap: 11px;

  margin-bottom: 14px;

}



.fciico {

  width: 34px;

  height: 34px;

  border-radius: 7px;

  background: rgba(29, 78, 216, 0.14);

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--primary);

  font-size: 0.82rem;

  flex-shrink: 0;

}



.fciinfo {

  color: #777;

  font-size: 0.83rem;

  line-height: 1.6;

}



.fciinfo strong {

  color: #bbb;

  display: block;

  font-size: 0.77rem;

}



.fbot {

  border-top: 1px solid rgba(255, 255, 255, 0.06);

  padding: 18px 0;

  margin-top: 46px;

}



.fbot p {

  color: #555;

  font-size: 0.8rem;

  margin: 0;

}



.fbot span {

  color: var(--primary);

}



.fbot a {

  color: #555;

  font-size: 0.8rem;

  margin-left: 18px;

}



.fbot a:hover {

  color: var(--secondary);

}



/* ===================== UTILITIES ===================== */

#btt {

  position: fixed;

  bottom: 28px;

  right: 28px;

  z-index: 9990;

  width: 44px;

  height: 44px;

  border-radius: 11px;

  background: linear-gradient(135deg, var(--primary), var(--navy));

  color: #fff;

  border: none;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 0.95rem;

  box-shadow: 0 6px 18px rgba(29, 78, 216, 0.38);

  opacity: 0;

  transform: translateY(18px);

  transition: 0.4s;

}



#btt.show {

  opacity: 1;

  transform: translateY(0);

}



#btt:hover {

  transform: translateY(-4px) !important;

}



.cartfl {

  position: fixed;

  bottom: 28px;

  left: 28px;

  z-index: 9990;

  background: var(--secondary);

  border-radius: 50px;

  padding: 11px 18px;

  display: flex;

  align-items: center;

  gap: 9px;

  box-shadow: 0 7px 22px rgba(37, 99, 235, 0.38);

  cursor: pointer;

  transition: 0.3s;

  color: #fff;

  font-weight: 700;

  font-size: 0.88rem;

}



.cartfl:hover {

  transform: translateY(-4px);

}



.cartfl .ccount {

  background: var(--primary);

  color: #fff;

  width: 20px;

  height: 20px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 0.68rem;

  font-weight: 800;

}



/* ====================================================

   ALL POPUP / MODAL STYLES

==================================================== */



/* --- FIX 1: SEARCH POPUP --- */

#searchOv {

  display: none;

  position: fixed;

  inset: 0;

  z-index: 99999;

  background: rgba(5, 5, 5, 0.97);

  flex-direction: column;

  align-items: center;

  justify-content: flex-start;

  padding-top: 78px;

}



#searchOv.open {

  display: flex;

  animation: fadeov 0.28s ease;

}



@keyframes fadeov {

  from {

    opacity: 0;

  }



  to {

    opacity: 1;

  }

}



#searchOv .sovclose {

  position: absolute;

  top: 22px;

  right: 28px;

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

  border: none;

  width: 42px;

  height: 42px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #fff;

  font-size: 1.15rem;

  cursor: pointer;

  transition: 0.3s;

}



#searchOv .sovclose:hover {

  background: var(--primary);

}



.sovbox {

  width: 100%;

  max-width: 680px;

  padding: 0 18px;

}



.sovbox h4 {

  color: #fff;

  text-align: center;

  font-size: 1.5rem;

  margin-bottom: 26px;



}



.sovinput {

  display: flex;

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

  border-radius: 60px;

  overflow: hidden;

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

}



.sovinput input {

  flex: 1;

  background: transparent;

  border: none;

  padding: 17px 24px;

  color: #fff;

  font-size: 1.05rem;

  font-family: "Poppins", sans-serif;

  outline: none;

}



.sovinput input::placeholder {

  color: rgba(255, 255, 255, 0.38);

}



.sovinput button {

  background: var(--primary);

  border: none;

  padding: 0 26px;

  color: #fff;

  font-size: 1.1rem;

  cursor: pointer;

  transition: 0.3s;

}



.sovinput button:hover {

  background: #c01e12;

}



.sovcats {

  display: flex;

  flex-wrap: wrap;

  gap: 9px;

  justify-content: center;

  margin-top: 28px;

}



.sovcat {

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

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

  border-radius: 50px;

  padding: 7px 18px;

  color: rgba(255, 255, 255, 0.78);

  font-size: 0.83rem;

  cursor: pointer;

  transition: 0.3s;

  display: flex;

  align-items: center;

  gap: 7px;

  font-family: "Poppins", sans-serif;

}



.sovcat img {

  width: 26px;

  height: 26px;

  border-radius: 50%;

  object-fit: cover;

}



.sovcat:hover,

.sovcat.active {

  background: var(--primary);

  border-color: var(--primary);

  color: #fff;

}



.sovtrend {

  text-align: center;

  margin-top: 26px;

}



.sovtrend p {

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

  font-size: 0.8rem;

  margin-bottom: 9px;

}



.sovtrend .ttag {

  display: inline-block;

  margin: 3px;

  background: rgba(246, 166, 35, 0.13);

  border: 1px solid rgba(246, 166, 35, 0.28);

  color: var(--secondary);

  border-radius: 20px;

  padding: 3px 13px;

  font-size: 0.76rem;

  cursor: pointer;

  transition: 0.3s;

}



.sovtrend .ttag:hover {

  background: var(--secondary);

  color: var(--dark);

}



/* --- FIX 4: MENU DETAIL POPUP --- */

#menuPop {

  display: none;

  position: fixed;

  inset: 0;

  z-index: 99999;

  background: rgba(0, 0, 0, 0.84);

  backdrop-filter: blur(5px);

  align-items: center;

  justify-content: center;

  padding: 18px;

}



#menuPop.open {

  display: flex;

  animation: fadeov 0.28s ease;

}



.mpbox {

  background: #fff;

  border-radius: 22px;

  max-width: 800px;

  width: 100%;

  max-height: 88vh;

  overflow-y: auto;

  position: relative;

  display: flex;

  flex-wrap: wrap;

}



.mpbox::-webkit-scrollbar {

  width: 3px;

}



.mpbox::-webkit-scrollbar-thumb {

  background: var(--primary);

}



.mpbox .mpimg {

  width: 44%;

  background: var(--cream2);

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 22px 0 0 22px;

  overflow: hidden;

  min-height: 400px;

}



.mpbox .mpimg img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.mpbox .mpbody {

  width: 56%;

  padding: 34px 30px;

}



.mpclose {

  position: absolute;

  top: 14px;

  right: 14px;

  width: 34px;

  height: 34px;

  border-radius: 50%;

  background: #f2f2f2;

  border: none;

  font-size: 0.95rem;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: 0.3s;

  z-index: 2;

}



.mpclose:hover {

  background: var(--primary);

  color: #fff;

}



#mpCat {

  font-size: 0.7rem;

  font-weight: 700;

  color: var(--secondary);

  text-transform: uppercase;

  letter-spacing: 1.3px;

  margin-bottom: 7px;

}



#mpTitle {

  font-size: 1.7rem;

  font-weight: 900;

  margin-bottom: 9px;



  color: var(--dark);

}



#mpStars {

  color: var(--secondary);

  font-size: 0.88rem;

  margin-bottom: 14px;

}



#mpDesc {

  font-size: 0.88rem;

  color: #777;

  line-height: 1.8;

  margin-bottom: 18px;

}



#mpPrice {

  font-size: 1.9rem;

  font-weight: 900;

  color: var(--primary);

  margin-bottom: 14px;



}



#mpPrice small {

  font-size: 0.95rem;

  color: #ccc;

  text-decoration: line-through;

  margin-left: 7px;

}



.mpmeta {

  display: flex;

  gap: 12px;

  margin-bottom: 20px;

  flex-wrap: wrap;

}



.mpm {

  text-align: center;

  background: var(--light);

  border-radius: 9px;

  padding: 9px 14px;

}



.mpmv {

  font-weight: 700;

  font-size: 0.92rem;

  color: var(--dark);

}



.mpml {

  font-size: 0.68rem;

  color: #bbb;

}



.mpqty {

  display: flex;

  align-items: center;

  gap: 11px;

  margin-bottom: 18px;

}



.mpqbtn {

  width: 34px;

  height: 34px;

  border-radius: 50%;

  border: 2px solid var(--primary);

  background: transparent;

  color: var(--primary);

  font-size: 1.05rem;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: 0.3s;

  font-weight: 700;

}



.mpqbtn:hover {

  background: var(--primary);

  color: #fff;

}



.mpqnum {

  font-size: 1.15rem;

  font-weight: 700;

  color: var(--dark);

  min-width: 30px;

  text-align: center;

}



.mptags {

  display: flex;

  flex-wrap: wrap;

  gap: 5px;

  margin-bottom: 20px;

}



.mptag {

  background: rgba(246, 166, 35, 0.11);

  color: var(--dark);

  border-radius: 20px;

  padding: 3px 11px;

  font-size: 0.73rem;

  font-weight: 600;

}



.mpaddcart {

  width: 100%;

  background: linear-gradient(135deg, var(--primary), #c01e12);

  color: #fff;

  border: none;

  border-radius: 12px;

  padding: 15px;

  font-size: 0.96rem;

  font-weight: 700;

  cursor: pointer;

  font-family: "Poppins", sans-serif;

  transition: 0.3s;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

}



.mpaddcart:hover {

  transform: translateY(-3px);

  box-shadow: 0 10px 28px rgba(29, 78, 216, 0.38);

}



/* --- FIX 7: GALLERY POPUP --- */

#galPop {

  display: none;

  position: fixed;

  inset: 0;

  z-index: 99999;

  background: rgba(0, 0, 0, 0.96);

  align-items: center;

  justify-content: center;

  padding: 18px;

}



#galPop.open {

  display: flex;

  animation: fadeov 0.28s ease;

}



.gpbox {

  max-width: 880px;

  width: 100%;

  position: relative;

  text-align: center;

}



.gpbox img {

  width: 100%;

  max-height: 64vh;

  object-fit: contain;

  border-radius: 14px;

}



.gpclose {

  position: absolute;

  top: -46px;

  right: 0;

  width: 38px;

  height: 38px;

  border-radius: 50%;

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

  border: none;

  color: #fff;

  font-size: 1.1rem;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: 0.3s;

}



.gpclose:hover {

  background: var(--primary);

}



.gpcap {

  color: #fff;

  margin-top: 18px;

}



.gpcap h5 {

  font-size: 1.25rem;

  margin-bottom: 5px;

  color: #fff;

}



.gpcap p {

  color: rgba(255, 255, 255, 0.58);

  font-size: 0.88rem;

}



.gpnav {

  display: flex;

  justify-content: center;

  gap: 11px;

  margin-top: 14px;

}



.gpnav button {

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

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

  color: #fff;

  border-radius: 50px;

  padding: 7px 20px;

  cursor: pointer;

  font-size: 0.83rem;

  font-family: "Poppins", sans-serif;

  transition: 0.3s;

}



.gpnav button:hover {

  background: var(--primary);

  border-color: var(--primary);

}



/* Magnific video override */

.mfp-bg {

  background: #000 !important;

  opacity: 0.93 !important;

}



.mfp-close {

  color: #fff !important;

}



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

@media (max-width: 991px) {

  .hcircle {

    width: 320px;

    height: 320px;

  }



  .fc1,

  .fc2,

  .fc3 {

    transform: scale(0.82);

    transform-origin: center;

  }



  .ggrid {

    grid-template-columns: 1fr 1fr;

    grid-template-rows: auto;

  }



  .gitem:first-child {

    grid-row: span 1;

  }



  .asm {

    display: none;

  }



  .mpbox .mpimg,

  .mpbox .mpbody {

    width: 100%;

  }



  .mpbox .mpimg {

    border-radius: 22px 22px 0 0;

    min-height: 240px;

  }



  .mpbox .mpbody {

    padding: 22px 18px;

  }



  /* Timeline mobile: collapse to single column */

  .timeline::before {

    left: 16px;

  }



  .tli {

    grid-template-columns: 32px 1fr !important;

  }



  /* .tl-left {

    display: none !important;

  } */



  .tl-right {

    display: block !important;

    visibility: visible !important;

    padding-left: 18px !important;

    text-align: left !important;

  }



  .tl-center {

    padding-top: 5px;

  }



  .tli:nth-child(odd) .tl-right,

  .tli:nth-child(even) .tl-right {

    visibility: visible !important;

    display: block !important;

  }

}



@media (max-width: 767px) {

  section {

    padding: 55px 0;

  }



  #topbar .top-contact span:last-child {

    display: none;

  }



  .hcircle {

    width: 260px;

    height: 260px;

  }



  /* Hide only hero floating cards, NOT form cards */

  .fcard.fc1,

  .fcard.fc2,

  .fcard.fc3 {

    display: none !important;

  }



  .hstats {

    display: none !important;

  }



  .ggrid {

    grid-template-columns: 1fr;

    grid-auto-rows: 250px;

  }



  .gitem:first-child {

    grid-row: span 1;

  }



  .cdwrap {

    gap: 8px;

  }



  .cditem {

    min-width: 56px;

    padding: 9px;

  }



  .nl-form-wrap {

    flex-direction: column;

    padding: 0 8px;

  }



  .nlinput,

  .nlbtn {

    width: 100%;

    border-radius: 12px;

  }



  .fcard {

    padding: 22px 18px;

  }

}



@media (max-width: 480px) {

  .hcircle {

    width: 220px;

    height: 220px;

  }



  .htitle {

    font-size: var(--text-h1);

  }



  .stitle {

    font-size: var(--text-h2);

  }

}



/* ===================== FACTORY DETAIL PAGE ===================== */

.factory-detail-wrapper {

  background-color: #f9fafb;

  color: #333;

}



.factory-detail-wrapper .wrap {

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 20px;

}



.factory-detail-wrapper .section-head {

  text-align: center;

  margin-bottom: 50px;

}



.factory-detail-wrapper .section-head .tag {

  display: inline-block;

  background: rgba(29, 78, 216, 0.1);

  color: var(--primary);

  padding: 6px 16px;

  border-radius: 30px;

  font-weight: 600;

  font-size: 0.85rem;

  text-transform: uppercase;

  letter-spacing: 1px;

  margin-bottom: 15px;

}



.factory-detail-wrapper .section-head h2 {

  font-size: 2.5rem;

  color: var(--dark);

  font-weight: 700;

  margin-bottom: 20px;

}



.factory-detail-wrapper .section-head p {

  font-size: 1.1rem;

  color: #555;

  max-width: 700px;

  margin: 0 auto;

  line-height: 1.6;

}



/* Hero Section */

.factory-detail-wrapper .hero {

  background: linear-gradient(135deg, var(--navy) 0%, var(--primary) 100%);

  padding: 100px 0;

  color: #fff;

  text-align: center;

}



.factory-detail-wrapper .hero .eyebrow {

  display: inline-block;

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

  padding: 5px 15px;

  border-radius: 20px;

  font-size: 0.9rem;

  font-weight: 500;

  margin-bottom: 20px;

  text-transform: uppercase;

  letter-spacing: 1px;

}



.factory-detail-wrapper .hero h1 {

  font-size: 3.5rem;

  font-weight: 800;

  color: #fff;

  margin-bottom: 20px;

  line-height: 1.2;

}



.factory-detail-wrapper .hero h1 span {

  color: #93c5fd;

}



.factory-detail-wrapper .hero p {

  font-size: 1.2rem;

  max-width: 800px;

  margin: 0 auto;

  opacity: 0.9;

  line-height: 1.6;

}



/* Process Timeline */

.factory-detail-wrapper .process {

  padding: 80px 0;

  background: #fff;

}



.factory-detail-wrapper .timeline {

  position: relative;

  max-width: 900px;

  margin: 0 auto;

}



.factory-detail-wrapper .timeline .track {

  position: absolute;

  top: 0;

  bottom: 0;

  left: 50%;

  transform: translateX(-50%);

  width: 4px;

  background: #e5e7eb;

  border-radius: 4px;

}



.factory-detail-wrapper .step {

  display: flex;

  margin-bottom: 40px;

  position: relative;

  width: 100%;

}



.factory-detail-wrapper .step:last-child {

  margin-bottom: 0;

}



.factory-detail-wrapper .step:nth-child(even) .step-card {

  margin-right: auto;

}



.factory-detail-wrapper .step:nth-child(odd) .step-card {

  margin-left: auto;

}



.factory-detail-wrapper .step-marker {

  width: 84px;

  flex-shrink: 0;

  display: flex;

  justify-content: center;

  position: absolute;

  left: 50%;

  transform: translateX(-50%);

  z-index: 2;

}



.factory-detail-wrapper .step-num {

  width: 40px;

  height: 40px;

  background: var(--primary);

  color: #fff;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: 700;

  font-size: 1.1rem;

  box-shadow: 0 0 0 8px #fff;

}



.factory-detail-wrapper .step-card {

  background: #f8fafc;

  border: 1px solid #e2e8f0;

  border-radius: 12px;

  padding: 24px;

  width: calc(50% - 42px);

  display: flex;

  gap: 20px;

  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);

  transition: transform 0.3s ease, box-shadow 0.3s ease;

}



@media (max-width: 768px) {

  .factory-detail-wrapper .timeline .track {

    left: 40px;

    transform: none;

  }

  .factory-detail-wrapper .step-marker {

    position: relative;

    left: 0;

    transform: none;

    width: 84px;

  }

  .factory-detail-wrapper .step-card {

    width: auto;

    flex-grow: 1;

    margin-left: 0 !important;

    margin-right: 0 !important;

  }

  .factory-detail-wrapper .step {

    flex-direction: row !important;

    justify-content: flex-start;

  }

}



.factory-detail-wrapper .step-card:hover {

  transform: translateY(-5px);

  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

}



.factory-detail-wrapper .step-card .icon {

  width: 48px;

  height: 48px;

  background: rgba(29, 78, 216, 0.1);

  color: var(--primary);

  border-radius: 10px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}



.factory-detail-wrapper .step-card .icon svg {

  width: 24px;

  height: 24px;

}



.factory-detail-wrapper .step-body .phase {

  font-size: 0.85rem;

  color: var(--primary);

  font-weight: 600;

  text-transform: uppercase;

  margin-bottom: 5px;

  display: block;

}



.factory-detail-wrapper .step-body h3 {

  font-size: 1.3rem;

  margin-bottom: 10px;

  color: var(--dark);

}



.factory-detail-wrapper .step-body .desc {

  color: #64748b;

  line-height: 1.6;

}



/* Features */

.factory-detail-wrapper .features {

  padding: 80px 0;

  background: var(--cream);

}



.factory-detail-wrapper .features-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

  gap: 30px;

}



.factory-detail-wrapper .feature-card {

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

  backdrop-filter: blur(10px);

  padding: 35px 30px;

  border-radius: 20px;

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

  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

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

  position: relative;

  overflow: hidden;

  z-index: 1;

}



.factory-detail-wrapper .feature-card::before {

  content: "";

  position: absolute;

  top: 0; left: 0; width: 100%; height: 100%;

  background: linear-gradient(135deg, rgba(29, 78, 216, 0.05) 0%, rgba(29, 78, 216, 0) 100%);

  z-index: -1;

  opacity: 0;

  transition: opacity 0.4s ease;

}



.factory-detail-wrapper .feature-card:hover {

  transform: translateY(-8px);

  box-shadow: 0 20px 40px rgba(29, 78, 216, 0.08);

  border-color: rgba(29, 78, 216, 0.1);

}



.factory-detail-wrapper .feature-card:hover::before {

  opacity: 1;

}



.factory-detail-wrapper .feature-card .icon {

  width: 60px;

  height: 60px;

  background: linear-gradient(135deg, var(--primary), var(--secondary));

  color: #fff;

  border-radius: 16px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 24px;

  box-shadow: 0 10px 20px rgba(29, 78, 216, 0.2);

  transition: transform 0.4s ease;

}



.factory-detail-wrapper .feature-card:hover .icon {

  transform: scale(1.1) rotate(5deg);

}



.factory-detail-wrapper .feature-card .icon svg {

  width: 28px;

  height: 28px;

}



.factory-detail-wrapper .feature-card h3 {

  font-size: 1.3rem;

  margin-bottom: 15px;

  font-weight: 700;

  color: var(--dark);

}



.factory-detail-wrapper .feature-card p {

  color: #555;

  line-height: 1.7;

  font-size: 0.95rem;

}



/* Benefits */

.factory-detail-wrapper .benefits {

  background: var(--dark);

  color: #fff;

  border-radius: 20px;

  margin-top: 40px;

}



.factory-detail-wrapper .benefits .section-head h2 {

  color: #fff;

}



.factory-detail-wrapper .benefits .section-head p {

  color: #cbd5e1;

}



.factory-detail-wrapper .benefits-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

  gap: 40px;

}



.factory-detail-wrapper .benefit-item {

  display: flex;

  gap: 20px;

}



.factory-detail-wrapper .benefit-item .num {

  font-size: 3rem;

  font-weight: 800;

  color: rgba(255, 255, 255, 0.1);

  line-height: 1;

}



.factory-detail-wrapper .benefit-item h4 {

  color: #fff;

  font-size: 1.2rem;

  margin-bottom: 10px;

}



.factory-detail-wrapper .benefit-item p {

  color: #94a3b8;

  font-size: 0.95rem;

  line-height: 1.6;

}



/* Why */

.factory-detail-wrapper .why {

  padding: 80px 0;

}



.factory-detail-wrapper .why-inner {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 60px;

  align-items: center;

}



.factory-detail-wrapper .why-copy .tag {

  display: inline-block;

  background: rgba(29, 78, 216, 0.1);

  color: var(--primary);

  padding: 6px 16px;

  border-radius: 30px;

  font-weight: 600;

  font-size: 0.85rem;

  text-transform: uppercase;

  letter-spacing: 1px;

  margin-bottom: 15px;

}



.factory-detail-wrapper .why-copy h2 {

  font-size: 2.5rem;

  margin-bottom: 20px;

}



.factory-detail-wrapper .why-copy p {

  font-size: 1.1rem;

  color: #64748b;

  margin-bottom: 30px;

  line-height: 1.7;

}



.factory-detail-wrapper .why-list {

  list-style: none;

}



.factory-detail-wrapper .why-list li {

  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 15px;

  font-weight: 500;

  color: var(--dark);

}



.factory-detail-wrapper .why-list li svg {

  width: 24px;

  height: 24px;

  color: var(--primary);

  flex-shrink: 0;

}



.factory-detail-wrapper .stat-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 24px;

}



.factory-detail-wrapper .stat-card {

  background: var(--cream);

  padding: 30px;

  border-radius: 16px;

  text-align: center;

}



.factory-detail-wrapper .stat-card .num {

  font-size: 2.5rem;

  font-weight: 700;

  color: var(--primary);

  margin-bottom: 5px;

}



.factory-detail-wrapper .stat-card .label {

  font-weight: 500;

  color: #475569;

}



/* Responsive */

@media (max-width: 768px) {

  .factory-detail-wrapper .why-inner {

    grid-template-columns: 1fr;

  }



  .factory-detail-wrapper .hero h1 {

    font-size: 2.5rem;

  }



  .factory-detail-wrapper .timeline .track {

    left: 20px;

  }



  .factory-detail-wrapper .step-marker {

    width: 40px;

  }



  .factory-detail-wrapper .step-card {

    flex-direction: column;

    margin-left: 10px;

  }

}