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

body {
  background-color: #0a0a0a;
  color: #e0e0e0;
  font-family: 'Rubik', sans-serif;
  line-height: 1.6;
}

header {
  background-color: #111;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  border-bottom: 2px solid #333;
}

.logo {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: nowrap;
}

.logo img {
  height: 80px;
  max-width: 100%;
}

.logo-text {
  font-family: 'Rubik', sans-serif;
  font-size: 2rem;
  text-transform: uppercase;
  color: #00d2ff;
}

nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.5rem;
}

nav a {
  color: #ccc;
  margin: 0 1rem;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
}

nav a:hover {
  color: #00d2ff;
}

.hero {
  background: #1a1a1a;
  padding: 3rem 2rem;
  text-align: center;
}

.hero h1 {
  font-size: 2rem;
  font-family: 'Rubik', sans-serif;
  margin-bottom: 0.5rem;
}

.section {
  padding: 2rem;
  max-width: 1000px;
  margin: auto;
}

.section h2 {
  font-size: 1.5rem;
  color: #00d2ff;
  margin-bottom: 1rem;
  font-family: 'Rubik', sans-serif;
}

.section ul {
  list-style-type: none;
  padding-left: 0;
}

.section ul li {
  margin-bottom: 0.5rem;
  padding-left: 1rem;
  position: relative;
}

.section ul li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #00d2ff;
}

.table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  overflow-x: auto;
}

.table th,
.table td {
  border: 1px solid #333;
  padding: 0.75rem;
  text-align: center;
}

.footer {
  text-align: center;
  padding: 1rem;
  font-size: 0.9rem;
  color: #666;
  border-top: 1px solid #333;
  margin-top: 2rem;
}

iframe {
  border-radius: 8px;
  width: 100%;
  max-width: 100%;
  height: 300px;
  display: block;
}

/* ======= Responsīvais dizains ======= */
@media (max-width: 768px) {
  .logo-text {
    font-size: 1.5rem;
  }

  nav {
    flex-direction: column;
    align-items: center;
  }

  nav a {
    margin: 0.5rem 0;
  }

  .hero h1 {
    font-size: 1.5rem;
  }

  .section {
    padding: 1rem;
  }

  .table th,
  .table td {
    font-size: 0.9rem;
    padding: 0.5rem;
  }
}

@media (max-width: 480px) {
  .logo {
    flex-direction: column;
    align-items: center;
  }

  .logo img {
    height: 60px;
  }

  .logo-text {
    font-size: 1.3rem;
    text-align: center;
  }

  .hero h1 {
    font-size: 1.2rem;
  }

  .hero p {
    font-size: 0.9rem;
  }

  .section h2 {
    font-size: 1.2rem;
  }
}
.hero-logo {
  width: 180px;
  max-width: 90%;
  margin-bottom: 1rem;
  filter: drop-shadow(0 0 8px #00d2ff);
}
<style>
.cs-slideshow{position:relative;max-width:100%;margin: 0 auto;overflow:hidden;border-radius:8px}
.cs-slides{position:relative;height:0;padding-bottom:56%; /* соотношение 21:9, изменяй по вкусу */
 display:block}
.cs-slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;display:flex;align-items:center;justify-content:center}
.cs-slide img{width:100%;height:100%;object-fit:cover;display:block}
.cs-slide.active{opacity:1;z-index:2}
.cs-caption{position:absolute;left:16px;bottom:16px;background:rgba(0,0,0,.45);color:#fff;padding:8px 12px;border-radius:6px;font-size:14px}
.cs-arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.35);border:none;color:#fff;padding:10px 12px;border-radius:50%;cursor:pointer;font-size:20px}
.cs-prev{left:12px}.cs-next{right:12px}
.cs-arrow:focus{outline:2px solid #fff}
.cs-dots{position:absolute;left:50%;transform:translateX(-50%);bottom:12px;display:flex;gap:8px}
.cs-dot{width:10px;height:10px;border-radius:50%;border:none;background:rgba(255,255,255,.5);cursor:pointer}
.cs-dot.active{background:rgba(255,255,255,1)}
@media (max-width:600px){
  .cs-caption{font-size:12px;padding:6px 8px}
  .cs-arrow{padding:8px;font-size:18px}
}
</style>