/* style.css for brollmanager.com homepage */

body {
  margin: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: #fff;
  background-color: #111;
}

.hero {
  position: relative;
  height: 70vh;
  min-height: 500px;
  background: url("brm_grid_bg.jpg") center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.5);
}

.hero > *{position:relative; z-index:1;}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 600px;
  padding: 20px;
}

.hero h1 {
  font-size: 4rem;
  margin: 0;
  letter-spacing: -1px;
}

.hero p {
  font-size: 1.2rem;
  margin: 20px 0;
  max-width:460px;
}

.tagline{
  display:inline-block;
  background:rgba(0,0,0,0.6);
  padding:8px 16px;
  border-radius:6px;
  box-shadow:0 2px 6px rgba(0,0,0,0.4);
}

.cta-button {
  background-color: #00c2ff;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  color: #000;
  font-weight: bold;
  text-decoration: none;
  transition: background 0.3s;
}

.cta-button:hover {
  background-color: #00a6d6;
}

.info {
  background-color: #1a1a1a;
  padding: 60px 20px;
  text-align: center;
}

.container {
  max-width: 800px;
  margin: 0 auto;
}

.info h2 {
  font-size: 2rem;
  margin-bottom: 20px;
}

.info p {
  font-size: 1rem;
  color: #ccc;
  margin-bottom: 20px;
}

ul {
  list-style: none;
  padding: 0;
  color: #ddd;
}

ul li {
  margin-bottom: 10px;
  font-size: 1rem;
}

.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;list-style:none;padding:0;margin:20px auto;max-width:700px;text-align:left;}
.features li{position:relative;padding-left:28px;line-height:1.4;background:rgba(255,255,255,0.05);border-radius:6px;padding:10px 12px 10px 32px;}
.features li::before{content:"✓";position:absolute;left:10px;top:50%;transform:translateY(-50%);color:#00c2ff;font-weight:bold;}
.features li:nth-child(odd){background:rgba(255,255,255,0.03);}

footer {
  background-color: #000;
  text-align: center;
  padding: 20px;
  font-size: 0.9rem;
  color: #777;
}

.footer-cols{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;text-align:left;}
.footer-cols a{color:#00c2ff;text-decoration:none;}
.footer-cols strong{color:#fff;}

.logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.logo-mark {
  height: 260px;
  width: auto;
  margin-bottom: 10px;
}

.logo-type {
  height: 130px;
  width: auto;
}

@media (max-width: 768px) {
  .logo-mark {
    height: 180px;
  }
  .logo-type {
    height: 90px;
  }
}

@media (max-width: 480px) {
  .logo-mark {
    height: 120px;
  }
  .logo-type {
    height: 60px;
  }
}