/* Simple responsive under-construction page */

/* Reset */
*{box-sizing:border-box;margin:0;padding:0}

:root{
  --blue:#007bff;
  --yellow:#ffd700;
  --bg-opacity:0.65;
  --max-width:980px;
}

/* Background */
body{
  font-family: Arial, Helvetica, sans-serif;
  min-height:100vh;
  background-image: url('img/ExportPic.jpg');
  background-size: cover;
  background-position: center;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  position:relative;
  padding:20px;
}

.overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.45);
  z-index:0;
}

/* Container */
.container{
  position:relative;
  z-index:1;
  max-width:var(--max-width);
  width:100%;
  background: rgba(0,0,0,0.6);
  padding:80px;
  border-radius:50px;
  text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,0.5);
}

/* Header */
.top .logo{
  max-width:250px;
  width:60%;
  height:auto;
  display:block;
  margin:0 auto 8px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}
.top h1{
  color:var(--yellow);
  font-size:24px;
  margin-bottom:6px;
}
.tag{font-size:13px;color:#dcdcdc;margin-bottom:18px}

/* Content */
.content .icon{font-size:72px;margin-bottom:6px}
.content h2{font-size:22px;color:#fff;margin-bottom:8px}
.content p{font-size:15px;color:#e6e6e6;margin-bottom:14px}

/* Buttons - small, blue with yellow hover */
.buttons{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:8px 0 12px}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  padding:8px 14px;
  font-size:13px;
  border-radius:999px;
  transition: transform .15s ease, background-color .18s ease, color .18s ease;
  border:2px solid transparent;
  min-width:120px;
  white-space:nowrap;
}

/* Blue primary */
.btn-primary{
  background:var(--blue);
  color:#fff;
}
.btn-download{
  background:var(--blue);
  color:#fff;
  border:2px solid rgba(255,255,255,0.06);
}

/* More button slightly muted */
.btn-more{background:transparent;border:2px solid rgba(255,255,255,0.12);color:#fff}

/* Hover state: yellow bg, black text */
.btn:hover{
  background:var(--yellow);
  color:#000;
  transform:translateY(-3px) scale(1.02);
}

/* Small note */
.small{font-size:12px;color:#cfcfcf;margin-top:8px}

/* Footer */
.footer{font-size:12px;color:#cccccc;margin-top:14px}

/* Responsive tweaks */
@media (max-width:600px){
  .top .logo{max-width:140px;width:50%}
  .content .icon{font-size:48px}
  .btn{padding:7px 12px;font-size:12px;min-width:110px}
  .container{padding:18px}
}