body {
       background-color: #111;
       color: #fff;
       font-family: 'Inter', sans-serif;
   }

   .navbar {
       background-color: #222;
   }

   .navbar-brand {
       color: #e30613 !important;
       font-weight: bold;
   }

   .nav-link {
       color: #fff !important;
   }

   .hero {
       background: url('https://via.placeholder.com/1600x600') center/cover no-repeat;
       padding: 6rem 2rem;
       text-align: center;
   }

   .hero h1 {
       font-size: 3rem;
       color: #fff;
   }

   .hero p {
       font-size: 1.2rem;
       color: #ccc;
   }

   .section-title {
       color: #e30613;
       margin-bottom: 2rem;
       text-align: center;
   }

   .card {
       background-color: #1c1c1c;
       border: none;
       color: #fff;
   }

   .card img {
       border-radius: 0.5rem 0.5rem 0 0;
   }

   footer {
       background-color: #222;
       color: #aaa;
       text-align: center;
       padding: 1.5rem 0;
   }

   .icon-title-container {

       align-items: center;
       /* Vertically center */
       text-align: center;
   }

   #unmuteOverlay {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
       background: rgba(0, 0, 0, 0.4);
       z-index: 10;
       cursor: pointer;
   }

   .unmute-button {

       padding: 12px 24px;
       font-size: 1rem;
       border: none;
       border-radius: 8px;
       background: rgba(0, 0, 0, 0.4);
       color: white;
   }

   .unmute-button:hover {
       background: #c00;
   }