:root {
      --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      --secondary-gradient: linear-gradient(135deg, #6a11cb, #2575fc);
      --dark-gradient: linear-gradient(135deg, #2c3e50, #4ca1af);
      --light-gradient: linear-gradient(135deg, #f5f7fa, #e4e8f0);
      --glass-effect: rgba(255, 255, 255, 0.85);
    }
    
    body {
      background: white;
      margin-bottom: 80px;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      min-height: 100vh;
    }

    .top-navbar {
      background: var(--glass-effect);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      padding: 12px 15px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      position: sticky;
      top: 0;
      z-index: 1000;
      border-bottom: 1px solid rgba(255,255,255,0.3);
    }

    .top-navbar .logo {
      font-size: 26px;
      font-weight: bold;
      color: #764ba2;
      text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
      font-family: 'Arial Rounded MT Bold', sans-serif;
    }

    .top-navbar .icons {
      flex: 1;
      display: flex;
      justify-content: center;
      gap: 15px;
    }

    .top-navbar .icons a {
      font-size: 20px;
      transition: all 0.3s ease;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      text-decoration: none !important;
    }

    /* Original brand colors for icons */
    .top-navbar .icons a:nth-child(1) { color: #1877F2; } /* Facebook */
    .top-navbar .icons a:nth-child(2) { color: #EA4335; } /* Gmail */
    .top-navbar .icons a:nth-child(3) { color: #FF0000; } /* YouTube */
    .top-navbar .icons a:nth-child(4) { color: #28a745; } /* Rupee */
    .top-navbar .icons a:nth-child(5) { color: #6f42c1; } /* Dollar */
    .top-navbar .icons a:nth-child(6) { color: #fd7e14; } /* Headphones */
    .top-navbar .icons a:nth-child(7) { color: #25D366; } /* WhatsApp */

    .top-navbar .icons a:hover {
      transform: translateY(-3px);
      background: rgba(255,255,255,0.3);
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

    /* Hamburger Menu Styles */
    .menu-toggle {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 30px;
      height: 21px;
      cursor: pointer;
      z-index: 1001;
    }

    .menu-toggle span {
      display: block;
      height: 3px;
      width: 100%;
      background: #764ba2;
      border-radius: 3px;
      transition: all 0.3s ease;
    }

    .menu-toggle:hover span {
      background: #667eea;
    }
    .side-box {
    background: white;
    border-radius: 12px;
    padding: 0; /* Changed from 2px to 0 to remove inner gap */
    margin: 1px; /* Changed from 2px to 1px for smaller gap */
    text-align: center;
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    overflow: hidden;
    border: none; /* Ensure no border creates extra space */
}

.side-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px; /* Match parent's border-radius */
    display: block; /* Remove any default inline spacing */
    margin: 0; /* Ensure no margin */
    padding: 0; /* Ensure no padding */
}

.side-box a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.side-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* Optional: To ensure the parent container doesn't add extra spacing */
.row-cols-4 > .col {
    padding: 1px; /* Adjust as needed */
}

    .main-content {
      background: white;
      padding: 25px;
      border-radius: 16px;
      box-shadow: 0 8px 20px rgba(0,0,0,0.1);
      margin: 15px 0;
    }

    .video-placeholder {
      border-radius: 16px;
      margin-bottom: 20px;
      overflow: hidden;
      box-shadow: 0 6px 15px rgba(0,0,0,0.1);
      transition: transform 0.3s ease;
    }

    .video-placeholder:hover {
      transform: scale(1.02);
    }

    .bottom-icon-bar {
      position: fixed;
      bottom: 1px;
      left: 50%;
      transform: translateX(-50%);
      background-color: rgba(0, 0, 0, 0.0); /* Black with 50% opacity */
      padding: 10px 20px;
      border-radius: 30px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.2);
      display: flex;
      justify-content: center;
      gap: 10px;
      z-index: 1000;
    }

    .bottom-icon-bar a {
      font-size: 18px;
      color: white;
      padding: 10px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      transition: all 0.3s ease;
      text-decoration: none !important;
    }

    .bottom-icon-bar a:hover {
      transform: translateY(-5px) scale(1.1);
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }

    .bottom-icon-bar a:nth-child(1) { background: #000; }
    .bottom-icon-bar a:nth-child(2) { background: var(--secondary-gradient); }
    .bottom-icon-bar a:nth-child(3) { background: #ff0000; }
    .bottom-icon-bar a:nth-child(4) { background: #4267B2; } /* Facebook blue */
    .bottom-icon-bar a:nth-child(5) { background: #ffc107; color: #333; }
    .bottom-icon-bar a:nth-child(6) { background: #6f42c1; }

    /* Login Form Styling */
    .btn-group .btn {
      transition: all 0.3s ease;
    }
    
    .btn-group .btn-light {
      background: white;
      border: 1px solid #ddd;
    }
    
    .btn-group .btn-success {
      background: var(--secondary-gradient);
      border: none;
      color: white;
    }
    
    .form-control {
      border-radius: 8px;
      padding: 10px 15px;
      border: 1px solid #ddd;
      transition: all 0.3s ease;
    }
    
    .form-control:focus {
      border-color: #6a11cb;
      box-shadow: 0 0 0 0.25rem rgba(106, 17, 203, 0.25);
    }
    
    .btn-primary {
      background: var(--primary-gradient);
      border: none;
      padding: 10px;
      border-radius: 8px;
      font-weight: 500;
      transition: all 0.3s ease;
      color: white;
    }
    
    .btn-primary:hover {
      background-position: right center;
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    
    .bg-primary {
      background: var(--secondary-gradient) !important;
      border-radius: 8px;
      font-weight: 500;
      height: 78px;
      letter-spacing: 0.5px;
    }

    @media (max-width: 768px) {
      .left-side, .right-side {
        display: none;
      }
      
      .bottom-icon-bar {
        bottom: 1px;
        padding: 8px 15px;
        gap: 5px;
      }
      
      .bottom-icon-bar a {
        width: 26px;
        height: 26px;
        font-size: 16px;
      }

      .top-navbar .icons {
        gap: 10px;
      }

      .top-navbar .icons a {
        width: 32px;
        height: 32px;
        font-size: 18px;
      }
    }



    @media (max-width: 550px) {
    .top-navbar .logo {
    font-size: 10px;
      }
    .top-navbar .icons {
        gap: 5px;
    }
    }