/* Drakkar Industries v3 — the Wix layout, borrowed and rebuilt.
   Dark navy panel, full-width fluid. Algerian: nav, header name, headings only.
   Body: Times New Roman, near-white, strong contrast. */

@font-face{
  font-family:'Algerian';
  src:url('fonts/ALGER.TTF') format('truetype');
  font-display:swap;
}

:root{
  --navy:#050a1e;
  --panel:#0a1430;
  --card:#101e45;
  --card-border:#2c447c;
  --ink:#f5f8ff;
  --muted:#c9d9f6;
  --accent:#9cc2ff;
  --sail:#f2c230;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:'Times New Roman',Times,serif;
  font-size:18px;
  line-height:1.6;
  color:var(--ink);
  background:var(--navy);
}

/* ---------- Header: cityscape banner, name as live Algerian text ---------- */
header.banner{
  position:relative;
  overflow:hidden;
  min-height:250px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:#0a1c38;
}
header.banner .banner-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
}
header.banner .banner-brand{position:relative; padding:34px 14px 30px; width:100%}
h1.site-name{
  font-family:'Algerian',serif;
  font-weight:normal;
  color:#ffffff;
  font-size:64px;
  letter-spacing:.04em;
  margin:0;
  text-shadow:0 3px 4px rgba(0,0,0,.85), 0 0 22px rgba(0,0,0,.55), 2px 2px 0 rgba(10,20,50,.9);
}
.tagline{
  font-family:'Brush Script MT','Segoe Script','Lucida Handwriting',cursive;
  font-style:italic;
  color:#bfe0ff;
  font-size:30px;
  margin:10px 0 0;
  text-align:right;
  max-width:1100px;
  margin-left:auto; margin-right:auto;
  padding-right:18px;
  text-shadow:0 2px 5px rgba(0,0,0,.9);
}

/* ---------- Nav: the Wix pill bar ---------- */
nav.pillbar{
  display:flex;
  margin:14px auto 0;
  max-width:1240px;
  padding:0 10px;
}
nav.pillbar .bar{
  display:flex;
  flex:1;
  border-radius:20px;
  overflow:hidden;
  border:1px solid #6f83b8;
  box-shadow:0 0 18px rgba(140,180,255,.55), 0 4px 10px rgba(0,0,0,.6);
  background:#241b4d;
}
nav.pillbar a{
  flex:1 1 0;
  display:flex; align-items:center; justify-content:center;
  min-height:52px;
  padding:10px 4px;
  font-family:'Algerian',serif;
  font-size:19px;
  letter-spacing:.05em;
  color:#ffffff;
  text-decoration:none;
  text-align:center;
  background:linear-gradient(180deg,#d6d1ee 0%,#9a91c4 32%,#51468a 66%,#2a2160 100%);
  border-right:1px solid rgba(255,255,255,.45);
  text-shadow:0 1px 3px rgba(0,0,0,.65);
}
nav.pillbar a:last-child{border-right:none}
nav.pillbar a:hover{color:#dceeff; filter:brightness(1.12)}
nav.pillbar a.active{
  background:#1d1545;
  color:#ffffff;
  box-shadow:inset 0 4px 10px rgba(0,0,0,.85), inset 0 -1px 0 rgba(255,255,255,.12);
  filter:none;
  cursor:default;
}

/* ---------- Content ---------- */
main{
  max-width:1200px;
  margin:0 auto;
  padding:10px 20px 44px;
}
h2{
  font-family:'Algerian',serif;
  font-weight:normal;
  letter-spacing:.05em;
  color:#bcd6ff;
  font-size:32px;
  margin:38px 0 12px;
  padding-bottom:6px;
  border-bottom:3px solid var(--sail);
  text-shadow:0 1px 0 rgba(255,255,255,.15), 0 2px 4px rgba(0,0,0,.7);
}
h3{
  font-family:'Algerian',serif;
  font-weight:normal;
  letter-spacing:.04em;
  color:#bcd6ff;
  font-size:23px;
  margin:24px 0 8px;
  text-shadow:0 2px 3px rgba(0,0,0,.7);
}
p{margin:10px 0}
a{color:var(--accent)}
strong{color:#ffffff}

.cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; margin:16px 0}
.card{
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:12px;
  padding:14px;
  box-shadow:0 2px 8px rgba(0,0,0,.45);
}
.card img{width:100%; height:auto; border-radius:8px; display:block}
.card p{color:var(--ink)}

.hero{margin:18px 0}
.hero img{width:100%; height:auto; border-radius:12px; display:block}

ul.services{columns:2; column-gap:36px; font-size:19px; padding-left:22px}
ul.services li{margin:5px 0}

.gallery{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin:16px 0}
.gallery figure{
  margin:0;
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:12px;
  padding:10px;
  box-shadow:0 2px 8px rgba(0,0,0,.45);
}
.gallery img{width:100%; height:220px; object-fit:cover; border-radius:8px; display:block}
.gallery figcaption{margin-top:8px; font-size:16px; color:var(--muted); text-align:center}

.contact-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; margin:18px 0}
.contact-grid .card p{margin:6px 0}
.contact-label{
  font-family:'Algerian',serif;
  letter-spacing:.04em;
  color:#bcd6ff;
  font-size:20px;
  margin:0 0 6px;
}
.contact-grid a{color:var(--accent); font-weight:bold; text-decoration:none}
.contact-grid a:hover{text-decoration:underline}

footer{
  background:#03061a;
  color:var(--muted);
  text-align:center;
  padding:20px 12px;
  font-size:16px;
  border-top:1px solid #22335f;
}
footer a{color:var(--sail); text-decoration:none}

/* ---------- Phones: one responsive site ---------- */
@media (max-width:720px){
  body{font-size:17px}
  header.banner{min-height:170px}
  h1.site-name{font-size:11vw}
  .tagline{font-size:21px; text-align:center; padding-right:0}
  nav.pillbar{padding:0 6px; margin-top:10px}
  nav.pillbar .bar{flex-wrap:wrap; border-radius:14px}
  nav.pillbar a{flex:1 1 33.33%; min-height:58px; font-size:16px; border-bottom:1px solid rgba(255,255,255,.35)}
  main{padding:6px 14px 34px}
  .cols{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .gallery img{height:150px}
  ul.services{columns:1}
  h2{font-size:26px}
  h3{font-size:20px}
}