/* Reset */
* { margin:0; padding:0; box-sizing:border-box; }
body { 
    font-family:'Segoe UI',sans-serif; 
    background:#000; 
    color:#fff; 
}

/* Navbar */
.navbar {
  position:fixed; 
  top:0; 
  left:0; 
  width:100%; 
  background:rgba(0,0,0,0.9);
  padding:15px 50px; 
  display:flex; 
  justify-content:space-between; 
  align-items:center;
  z-index:1000;
}
.logo { 
    font-size:24px; 
    font-weight:bold; 
    color:#e50914; 
}
.logo span { 
    color:#fff; 
}
.navbar ul {
    list-style:none; 
    display:flex; 
}
.navbar ul li { 
    margin-left:20px; 
}
.navbar ul li a {
  text-decoration:none; 
  color:#fff; 
  transition:.3s;
}
.navbar ul li a:hover { 
    color:#e50914; }

/* Hero (About) */
.hero {
  display:flex; 
  align-items:center; 
  justify-content:center;
  padding-top:100px; 
  min-height:100vh;
  background:linear-gradient(to bottom, #111, #000);
}
.hero-left { 
    flex:1; 
    display:flex; 
    justify-content:center; 
}
.avatar {
width: 400px;
  height: 400px;
  border-radius: 50%;
  border: 4px solid #e50914;
  box-shadow: 0 0 20px #e50914;
  object-fit: cover;
  transition: transform 0.3s ease-in-out;
}
.avatar:hover {
  transform: scale(1.1);
}

.hero-right { 
    flex:1; 
    padding:20px; 
}
.hero-right h1 { 
    font-size:42px;
     margin-bottom:20px; 
    }
.hero-right span { 
    color:#e50914; 
}
.hero-right p { 
    font-size:18px; 
    margin-bottom:20px; 
    color:#bbb; 
}
.btn {
  background:#e50914; 
  color:#fff; 
  padding:12px 24px;
  text-decoration:none; 
  border-radius:5px; 
  transition:.3s;
}
.btn:hover { 
    background:#b20710; 
}

/* Row Sections */
.row-section { 
    padding:60px 40px; 
}
.row-section h2 { 
    font-size:28px; 
    margin-bottom:20px; 
    color:#e50914; 
}
.row-cards {
  display:flex; 
  overflow-x:auto; 
  gap:40px;
  padding-bottom:10px;
}
.row-cards::-webkit-scrollbar { 
    display:none; 
}

/* Cards */
.card {
  background:#111; 
  padding:20px; 
  border-radius:12px;
  min-width:250px; 
  /*gap: 40px;*/
  flex-shrink:0;
  transition:.3s;
}
.card:hover {
  transform:scale(1.05);
  box-shadow:0 0 20px rgba(229,9,20,0.4);
}
.card h3 { 
    margin-bottom:10px; 
}

/* Contact Icons */
.contact-icons a {
  font-size:30px; 
  color:#fff; margin-right:20px; 
  transition:.3s;
}
.contact-icons a:hover { 
    color:#e50914; 
}