/* Reset + Base */
:root{
  --primary: #007B83;
  --navy: #00394F;
  --accent: #00C4CC;
  --muted: #F5F7FA;
  --text: #333333;
  --card-shadow: 0 8px 24px rgba(2,18,25,0.08);
  --radius: 10px;
}
*{box-sizing:border-box}

html,body{height:100%; scroll-behavior: smooth;}
body{
  font-family: "Inter", "Lato", Arial, sans-serif;
  color:var(--text);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  margin: 0px;
}

/* Header */
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1200;
  background: rgb(255 255 255 / 60%);
  transition: background 300ms ease, box-shadow 300ms ease, padding 300ms ease;
}
.site-header.scrolled{
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.95));
  box-shadow: 0 6px 18px rgba(10,25,35,0.06);
}
.header-inner{
  max-width:1160px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px;
}
.logo img{height:56px; display:block}

/* Nav */
.primary-nav ul{display:flex;gap:10px;align-items:center;margin:0;padding:0;list-style:none}
.primary-nav a{color:var(--text);text-decoration:none;padding:8px 12px;font-weight:600;font-size:0.95rem}
.primary-nav a:hover{color:var(--primary)}
.loginbutton{background:var(--primary);color:#fff;border-radius:6px;padding:8px 12px;border:none;cursor:pointer;font-weight:700}
.mobile-nav-toggle{display:none;border:0;background:transparent;cursor:pointer}
.mobile-nav-toggle span{display:block;width:22px;height:2px;background:#555;margin:5px 0;border-radius:2px}

/* Hero */
.hero{
  position:relative;
  min-height:68vh;
  display:flex;
  align-items:center;
  color:#fff;
  background-size:cover;
  background-position:center;
}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,57,79,0.55), rgba(0,57,79,0.6));backdrop-filter:blur(1px)}
.hero-inner{position:relative;max-width:1160px;margin:0 auto;padding:120px 20px 80px}
.hero h1{font-size:2.6rem;line-height:1.05;margin-bottom:0.6rem;font-weight:800}
.hero .lead{font-size:1.05rem;opacity:0.95;margin-bottom:1.2rem}

/* Buttons */
.btn{display:inline-block;border-radius:8px;padding:0.6rem 1rem;text-decoration:none;transition:all .2s ease;font-weight:700}
.btn-primary{background:var(--accent);color:var(--navy);border:2px solid rgba(255,255,255,0.06)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:var(--card-shadow)}
.btn-outline{background:transparent;color:#fff;border:2px solid rgba(255,255,255,0.18)}

/* Sections */
.section{padding:60px 0}
.inner{max-width:1160px;margin:0 auto;padding:0 20px}
.section-title{font-size:1.9rem;margin-bottom:0.4rem;font-weight:700}
.section-sub{color:#6b7278;margin-bottom:1.2rem}

/* About */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
.about-media img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius);box-shadow:var(--card-shadow)}
.about-content h2{margin-bottom:0.6rem; text-align: left;}
.readmore{display:inline-block;margin-top:10px;color:var(--primary);font-weight:700}
.about-content {text-align: justify;}

/* Products grid */
.products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:20px}
.product-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:var(--card-shadow);transition:transform .28s ease,box-shadow .28s ease}
.product-card img{width:100%;height:180px;object-fit:cover;display:block}
.card-body{padding:16px}
.product-card h3{margin:0 0 8px;font-size:1.1rem}
.product-card p{margin:0 0 12px;color:#5d6467}
.product-card:hover{transform:translateY(-8px);box-shadow:0 18px 40px rgba(3,22,28,0.12)}

/* Certificates */
.cert-grid{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:16px; justify-content: space-around;}
.cert-item{background:#fff;padding:12px 10px;border-radius:10px;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:140px;box-shadow:var(--card-shadow)}
.cert-item img{max-width:100%;height:60px;object-fit:contain}
.cert-item span{font-size:0.85rem;color:#2c3b3f;font-weight:700}

/* Contact CTA */
.contact-cta{background:linear-gradient(90deg,var(--primary), var(--navy));color:#fff;padding:48px 0;border-radius:8px; margin: 8px;}
.cta-inner{text-align:center}
.cta-actions{margin-top:16px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Footer */
.site-footer{background:var(--navy);color:#fff;padding:40px 0 20px;margin-top:40px}
.footer-inner{max-width:1160px;margin:0 auto;padding:0 20px}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.footer-col h4{color:#fff;margin-bottom:8px}
.footer-col p, .footer-col a{color:rgba(255,255,255,0.88);text-decoration:none;font-size:0.95rem}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.06);margin-top:20px;padding-top:14px;display:flex;justify-content:space-between;align-items:center}

/* Utilities */
.textcenter{text-align:center}

/* Responsive tweaks */
@media (max-width: 980px){
  .about-grid{grid-template-columns:1fr}
  .products-grid{grid-template-columns:repeat(2,1fr)}
  .header-inner{padding:12px 16px}
  .hero-inner{padding:100px 16px 60px}
}
@media (max-width: 640px){
  .primary-nav ul{display:none}
  .mobile-nav-toggle{display:block}
  .products-grid{grid-template-columns:1fr}
  .hero h1{font-size:1.8rem}
  .hero-inner{padding:80px 14px 40px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .site-footer{padding:30px 0}
  .product-card img{height:160px}
}

/* small polish */
a.readmore i{margin-left:6px}


/* Swiper in About section */
.about-media .swiper { width: 40vw; height: 100%; border-radius: var(--radius); overflow: hidden; box-shadow: var(--card-shadow); }
.about-media .swiper-slide img { width: 40vw; height: 100%; object-fit: cover; transition: transform 3s ease; }
.about-media .swiper-slide-active img { transform: scale(1.05); } /* subtle zoom effect */
.about-media .swiper-button-next, .about-media .swiper-button-prev { color: var(--accent); }
.about-media .swiper-pagination-bullet { background: var(--accent); opacity: 0.8; }
.about-media .swiper-pagination-bullet-active { background: var(--primary); opacity: 1; }


/* Ensure about-media swiper has intrinsic height so slides are visible */
.about-media { display:block; }
.about-media .swiper { width:40vw; min-height:320px; height:320px; border-radius:var(--radius); overflow:hidden; }
@media (max-width: 980px){ .about-media .swiper { min-height:240px; height:240px; width: 90vw;} }
@media (max-width: 640px){ .about-media .swiper { min-height:180px; height:180px; width: 90vw;} }
/* Make sure images fill slides */
.about-media .swiper-slide img { display:block; width:100%; height:100%; object-fit:cover; }
.about-media .swiper-button-next, .about-media .swiper-button-prev { color:var(--accent); z-index: 20; }



/* Mobile nav behaviour */
@media (max-width: 640px) {
  .primary-nav {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--navy);
    display: none;
    flex-direction: column;
  }
  body.nav-open .primary-nav {
    display: flex;
  }
  .primary-nav ul {
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .primary-nav li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
  }
  .primary-nav a {
    color: white;
    display: block;
    padding: 14px;
  }
}