/* styles.css — separate file as requested */
/* Base layout and typography */
:root{
  --accent-brown:#7a4b2a;
  --accent-brown-2:#b36b44;
  --muted:#f7f5f2;
  --dark:#101014;
  --text:#1b1b1b;
  --glass: rgba(255,255,255,0.85);
  --max-width:1200px;
  font-family: "Courier New", monospace;
  font-size:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background:var(--muted);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Fixed header with vertical menu + centered animated logo */
.site-header{
  position:fixed;
  top:0;
  gap: 50px;
padding:15px 0;
  left:0;
   background:linear-gradient(90deg, rgba(255,255,255,0.95), rgba(250,250,250,0.8));
  backdrop-filter: blur(6px);
   width: 100%;
  border-bottom:1px solid rgba(0,0,0,0.04);
  z-index:50;
}
.container {
   gap: 50px;
   max-width: 1200px;
   width: 100%;
    padding: 0 30px;
    margin: 0 auto;
    display:flex;
  align-items:center;
  justify-content:space-between;
}
.hero .cta-block {
   flex-direction: column;
}
.vertical-nav{
 
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
}
.vertical-nav ul{list-style:none;padding:0;margin:0;display:flex; gap:6px}
.vertical-nav a{
  display:block;
  text-decoration:none;
  color:var(--text);
  padding:8px 10px;
  border-radius:6px;
  text-align:center;
  font-size:14px;
  opacity:.9;
}
.pay-logos img {
   width: 50px;
   height: 35px;
   object-fit: contain;
   background: #fff;
}
a {
   transition: all 0.23s linear;
}
footer a {
   color: #fff;
}
footer a:hover {
   text-decoration: none;
   color: #b36b44;
}
.vertical-nav a.active{background:linear-gradient(180deg,var(--accent-brown) 0%, var(--accent-brown-2) 100%);color:#fff}
.vertical-nav a:hover {
   color: #a66a45;
}.vertical-nav a.active:hover {
   color: #fff;
   background: #1b1b1b;
}
/* center animated logo */
.logo-wrap{display:flex;align-items:center;height:100%;justify-content:center}
.logo{
  display:inline-flex;
  gap:6px;
  align-items:baseline;
  font-weight:700;
  transform-origin:center;
  animation: logoFloat 6s ease-in-out infinite;
  font-size:20px;
}
.logo-part{color:var(--text)}
.logo-accent{color:var(--accent-brown)}

/* hero layout */
.page{padding-top:96px;max-width:var(--max-width);margin:0 auto;padding:110px 20px 60px}
.hero{display:flex;gap:28px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.hero-content{flex:1 1 420px;padding:20px; order:2}
.hero-content.right{text-align:right}
.hero-visual{width: 50%; order:1; display:flex;align-items:center;justify-content:center}
.hero-visual img{max-width:100%;border-radius:8px;box-shadow:0 8px 20px rgba(0,0,0,0.08)}
.hero-title{font-size:34px;margin:0 0 12px}
.gradient-h1{
  background:linear-gradient(90deg,var(--accent-brown),#a66a45);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  display:inline-block;
}

/* CTA */
.cta-block{margin-top:16px;display:flex;gap:12px;align-items:center;justify-content:flex-end}
.animated-text{font-weight:600;opacity:.95;animation: pulse 3s infinite}
.btn{
  display:inline-block;
  padding:10px 16px;
  border-radius:6px;
  text-decoration:none;
  font-weight:700;
  border:1px solid rgba(0,0,0,0.06);
  background:white;
  box-shadow: 0 8px 18px rgba(0,0,0,0.06);
  transition:transform .18s ease, box-shadow .18s ease;
}
.btn.small{padding:8px 12px;font-size:16px}

/* highlighted button style */
.btn.highlight{
  position:relative;
  overflow:hidden;
  background:linear-gradient(90deg,var(--accent-brown),var(--accent-brown-2));
  color:#fff;
}
.btn.highlight::after{
  content:"";
  position:absolute;
  left:-60%;
  top:0;
  width:40%;
  height:100%;
  transform:skewX(-18deg);
  background:rgba(255,255,255,0.12);
  transition:left .45s cubic-bezier(.2,.9,.3,1);
}
.btn.highlight:hover::after{left:160%}
.btn:hover{transform:translateY(-3px);box-shadow:0 16px 28px rgba(0,0,0,0.12)}

/* features / products */
.section-title{font-size:22px;margin:30px 0 12px}
.feature-grid{display:flex;gap:12px;flex-wrap:wrap}
.feature-card{background:white;padding:16px;border-radius:8px;box-shadow:0 8px 20px rgba(0,0,0,0.04);flex:1}

/* products grid - 5 items */
.products-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.product-card{background:#fff;padding:12px;border-radius:8px;box-shadow:0 8px 20px rgba(0,0,0,0.05);display:flex;flex-direction:column;gap:8px}
.product-card img{width:100%;height:auto;border-radius:6px;
aspect-ratio: 3/2;
object-fit: cover;}
.product-title{margin:0;font-weight:700}
.product-price, .contact-card a{color:var(--accent-brown);font-weight:800}

.contact-card a:hover {
   text-decoration: none;
}
.gallery {
   width: 80%;
   margin: 0 auto;
}
/* gallery carousel narrow */
.carousel{position:relative;overflow:hidden;border-radius:8px}
.carousel-track{display:flex;transition:transform .5s ease}
.carousel img{min-width:100%;height:300px;object-fit:cover}
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.9);border:none;padding:8px 12px;border-radius:4px;cursor:pointer;box-shadow:0 6px 12px rgba(0,0,0,0.08);
border: 4px solid #b36b44;
z-index: 10;transition: all 0.23s linear;}
.carousel-btn:hover {
   opacity: 0.6;
}
.detail-card img {
   border-radius: 5px;width: 50%;
   height: 350px;
   object-fit: cover;
}
.carousel-btn.prev{left:8px}
.carousel-btn.next{right:8px}

/* contact / map strip */
.map-strip{height:120px;overflow:hidden;border-radius:6px;border:1px solid rgba(0,0,0,0.06)}
.map-strip iframe{width:100%;height:120px;border:0;display:block}

/* footer dark two-column */
.site-footer{background:#0e0e10;color:#fff;padding:20px 0;margin-top:30px}
.footer-inner{max-width:var(--max-width);margin:0 auto;display:flex;justify-content:space-between;gap:20px;padding:0 20px;align-items:center}
.footer-left, .footer-right{display:flex;flex-direction:column;gap:10px}
.footer-menu a{color:#fff;text-decoration:none;margin-right:8px;font-size:15px}
.pay-logos{display:flex;gap:8px;align-items:center;flex-wrap: wrap;}

/* small utilities */
.section-title + .products-grid{margin-top:8px}
.detail-card{background:#fff;padding:16px;border-radius:8px;margin:12px 0;box-shadow:0 8px 18px rgba(0,0,0,0.05)}
.contact-grid{display:flex;gap:12px;flex-wrap:wrap}
.contact-card{background:#fff;padding:14px;border-radius:8px;box-shadow:0 8px 18px rgba(0,0,0,0.04);flex:1}

/* responsive breakpoints requested */
@media (max-width:800px){
  .hero{flex-direction:column-reverse}
   .page{padding:110px 12px;}
   header .container ,
   .footer-inner{
      flex-direction: column;
      gap: 15px;
   }
   .detail-card img,
   .hero-visual img,.hero-visual {
      width: 100%;
   }
}

@media (max-width:375px){
  :root{font-size:16px}
  .logo{font-size:18px}
}

/* animations */
@keyframes logoFloat{
  0%{transform:translateY(0)}
  50%{transform:translateY(-6px) rotate(-1deg)}
  100%{transform:translateY(0)}
}
@keyframes pulse{
  0%{opacity:.9}
  50%{opacity:1; transform:translateY(-3px)}
  100%{opacity:.9}
}


 @keyframes logoFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
  }
 
 
  .hero.about {
   padding: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 70vh;
    background: url('assets/three.jpg') center/cover no-repeat;
    position: relative;
    border-radius: 15px;
  }

  .hero-text {
    background: rgba(255,250,245,0.9);
    padding: 30px;
    max-width: 500px;
    border-radius: 12px;
  }

  .cta-btn {
   text-decoration: none;
    display: inline-block;
    margin-top: 15px;
    padding: 12px 28px;
    background-color: #3e2c1c;
    color: #fffaf5;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .cta-btn:hover {
    background: linear-gradient(90deg, #b88746, #e0c097);
    color: #3e2c1c;
  }

  .gallery.about {
    display: flex;
 text-align: center;
    margin: 35px auto;
    text-align: center;
    overflow-x: auto;
    gap: 10px;
  }

  .gallery img {
    width: 300px;
    height: 200px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
  }
 

  .payments img {
    height: 30px;
    margin: 0 10px;
    vertical-align: middle;
  }