/* Modern Drosoflipper refresh - non destructive layer above the old template */
:root {
  --droso-primary: #0f7c8f;
  --droso-primary-dark: #075464;
  --droso-accent: #16bfd3;
  --droso-ink: #17202a;
  --droso-muted: #65717f;
  --droso-bg: #f5f8fb;
  --droso-card: #ffffff;
  --droso-border: #e6edf2;
  --droso-shadow: 0 18px 45px rgba(9, 39, 54, .12);
}

html { scroll-behavior: smooth; }
body { background: var(--droso-bg); color: var(--droso-ink); }
p { color: var(--droso-muted); font-size: 16px; line-height: 1.75; }
h1, h2, h3, h4 { color: var(--droso-ink); letter-spacing: -0.02em; }

.header .navbar {
  background: rgba(255,255,255,.94);
  border: 0;
  box-shadow: 0 8px 26px rgba(15, 34, 50, .08);
  backdrop-filter: blur(10px);
}
.header .nav-item-child {
  color: #23313d;
  font-weight: 700;
  letter-spacing: .04em;
}
.header .nav-item-hover:after { background: var(--droso-accent); }
.logo-img { object-fit: contain; }

.modern-hero {
  position: relative;
  min-height: 720px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(110deg, rgba(3, 28, 39, .78), rgba(3, 28, 39, .42)), url('../newfotos/todos.jpg') center center/cover no-repeat;
}
.modern-hero__overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 75% 35%, rgba(22,191,211,.32), transparent 34%);
}
.modern-hero__content { position: relative; z-index: 2; padding-top: 80px; }
.modern-eyebrow {
  display: inline-block;
  color: var(--droso-accent);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.modern-hero h1 {
  color: #fff;
  font-size: clamp(48px, 8vw, 92px);
  line-height: .95;
  margin-bottom: 18px;
}
.modern-hero h2 {
  color: #fff;
  font-size: clamp(26px, 4vw, 44px);
  max-width: 850px;
  font-weight: 600;
}
.modern-hero__text {
  color: rgba(255,255,255,.88);
  max-width: 660px;
  font-size: 20px;
  margin: 22px 0 34px;
}
.modern-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.modern-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 15px 26px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.modern-btn:hover { transform: translateY(-2px); text-decoration: none; }
.modern-btn--primary { background: var(--droso-accent); color: #062f38; box-shadow: 0 14px 30px rgba(22,191,211,.28); }
.modern-btn--primary:hover { background: #4de0ee; color: #062f38; }
.modern-btn--secondary { color: #fff; border: 2px solid rgba(255,255,255,.72); }
.modern-btn--secondary:hover { background: #fff; color: var(--droso-primary-dark); }

.modern-benefits { margin-top: -72px; position: relative; z-index: 4; padding-bottom: 45px; }
.modern-card {
  background: var(--droso-card);
  border: 1px solid var(--droso-border);
  border-radius: 24px;
  box-shadow: var(--droso-shadow);
}
.modern-card--mini { min-height: 142px; padding: 28px 22px; margin-bottom: 22px; }
.modern-card--mini strong { display: block; color: var(--droso-primary-dark); font-size: 25px; line-height: 1.1; margin-bottom: 10px; }
.modern-card--mini span { color: var(--droso-muted); font-size: 15px; }

.modern-distributors { padding: 70px 0 80px; background: #fff; }
.modern-section-heading { max-width: 760px; margin: 0 auto 34px; }
.modern-section-heading h2 { font-size: clamp(34px, 5vw, 52px); margin-bottom: 12px; }
.modern-distributor-grid { display: flex; flex-wrap: wrap; align-items: stretch; }
.modern-distributor-card {
  min-height: 210px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 22px;
  background: #fff;
  border: 1px solid var(--droso-border);
  border-radius: 26px;
  box-shadow: 0 14px 34px rgba(9, 39, 54, .08);
  padding: 32px;
  margin-bottom: 24px;
}
.modern-distributor-card:hover { transform: translateY(-3px); box-shadow: var(--droso-shadow); }
.modern-distributor-card img { max-width: 220px; max-height: 90px; width: auto; height: auto; object-fit: contain; }
.modern-distributor-card span { color: var(--droso-primary-dark); font-size: 16px; font-weight: 800; }

.bg-color-sky-light { background: var(--droso-bg) !important; }
.content-lg { padding-top: 90px; padding-bottom: 90px; }
.accordion .panel-default { border-radius: 18px; overflow: hidden; box-shadow: 0 8px 24px rgba(9,39,54,.06); margin-bottom: 14px; }
.accordion .panel-title-child { padding: 24px 28px; }
.accordion [aria-expanded="true"], .accordion .collapse.in { background: var(--droso-primary); }

.masonry-grid .img-responsive,
.modern-products .img-responsive,
.work .img-responsive,
.pricing img {
  border-radius: 22px;
  box-shadow: 0 14px 34px rgba(9, 39, 54, .10);
}
.modern-products .col-sm-4 { margin-bottom: 32px; }
.modern-products h4 a { color: var(--droso-primary-dark); font-weight: 900; }
.modern-pricing-section .pricing {
  border-radius: 28px;
  box-shadow: var(--droso-shadow);
  border: 1px solid var(--droso-border);
}
.btn-theme.btn-default-bg,
.btn.btn-primary {
  background: var(--droso-primary) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: 0 12px 28px rgba(15,124,143,.22);
}
.btn-theme.btn-default-bg:hover,
.btn.btn-primary:hover { background: var(--droso-primary-dark) !important; }

.modern-contact { background: #fff; }
.modern-contact h3 { color: var(--droso-primary-dark); }
.modern-contact .col-sm-4 { margin-bottom: 25px; }
.footer { background: #111b22; color: #dbe6ec; }
.footer a, .footer .footer-list-item { color: #dbe6ec; }
.back-to-top { border-radius: 999px; background: var(--droso-primary); }

.popup-overlay { z-index: 999999; }
.popup-box { border-radius: 24px !important; border: 1px solid var(--droso-border); box-shadow: var(--droso-shadow) !important; }
.popup-btn { background: var(--droso-primary) !important; border-radius: 999px !important; font-weight: 700; }

@media (max-width: 991px) {
  .modern-hero { min-height: 640px; }
  .header .navbar-collapse { background: #fff; }
}
@media (max-width: 767px) {
  .modern-hero { min-height: 620px; text-align: left; }
  .modern-hero__content { padding-top: 95px; }
  .modern-hero h1 { font-size: 52px; }
  .modern-hero h2 { font-size: 28px; }
  .modern-hero__text { font-size: 18px; }
  .modern-benefits { margin-top: -44px; }
  .modern-card--mini { min-height: 120px; padding: 22px 18px; }
  .modern-distributor-card { min-height: 170px; }
}


/* Product photography showcase */
.modern-product-showcase {
  padding: 88px 0 96px;
  background: linear-gradient(180deg, #f5f8fb 0%, #ffffff 100%);
}
.modern-feature-photo {
  overflow: hidden;
  margin: 18px 0 36px;
}
.modern-feature-photo img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  background: #050708;
}
.modern-feature-copy {
  padding: 54px 46px;
}
.modern-feature-copy h3 {
  font-size: clamp(30px, 4vw, 46px);
  margin-bottom: 16px;
}
.modern-color-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin-top: 28px;
}
.modern-secondary-photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 22px;
}
.modern-photo-card {
  background: #fff;
  border: 1px solid var(--droso-border);
  border-radius: 24px;
  box-shadow: 0 14px 34px rgba(9, 39, 54, .08);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.modern-photo-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--droso-shadow);
}
.modern-photo-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #050708;
}
.modern-photo-card strong {
  display: block;
  padding: 16px 18px 18px;
  color: var(--droso-primary-dark);
  font-size: 17px;
}
.modern-photo-card--wide img { aspect-ratio: 21 / 9; }
@media (max-width: 991px) {
  .modern-color-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modern-secondary-photos { grid-template-columns: 1fr; }
  .modern-feature-copy { padding: 34px 28px; }
}
@media (max-width: 520px) {
  .modern-color-grid { grid-template-columns: 1fr; }
  .modern-feature-photo img { min-height: 240px; }
}