:root {
  --brand-primary: #6b2b9b;
  --brand-dark: #0b0b0f;
  --text-muted: #c7c7c7;
}

body {
  font-family: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: #070406;
  color: #fff;
}

/* Navbar */
.navbar {
  background: #29243f;
  border-bottom: 3px solid #636060;
  color: #f3eded;
}
.navbar .brand-title,
.navbar-brand { color: #fff !important; }
.navbar .nav-link { color: #fff !important; transition: color 0.2s ease; }
.navbar .nav-link:hover { color: var(--brand-primary) !important; }
.navbar .brand-title { font-weight:700; letter-spacing: .5px; }
.navbar img { height:100px; }

/* custom override for .btn-primary */
.btn-primary {
  --bs-btn-bg: #443d6a; /* your new background color */
  --bs-btn-border-color: #443d6a;
  --bs-btn-hover-bg: #443d6a;
  --bs-btn-hover-border-color: #443d6a;
}

/* Info badges */
.navbar-info { min-width: 180px; }
.players-box {
  background: #333; color: #07aa1d;
  padding: 1px 35px; border-radius: 4px;
  font-weight: bold; font-size: 0.9rem;
}
.status-label {
  font-weight: bold; padding: 2px 11px; border-radius: 4px;
  font-size: 0.8rem; position: relative; right: -7px;
}
.status-label.online { background: #333; color: #fff; }
.status-label.offline { background: #dc3545; color: #fff; }
.server-time { font-size: 1.2rem; font-weight: bold; }
.time-box {
  background-color: #333; padding: 8px 15px; border-radius: 5px;
  font-weight: bold; font-size: 18px; text-align: center; width: 100%;
}

/* Hero Section */
.hero {
  padding: 25px 0;
  background-size: cover;
  background-position: center;
  min-height: 90vh;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.65));
  z-index: 1;
}
.hero .container {
  position: relative;
  z-index: 2;
  display: flex;            
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}


/* Left Side */

.hero-left { flex: 1; }

.hero-sprite {
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 20px;
  position: relative;
  left: 155px;
  top: -10px;
  z-index: 1;
}
.left-layout {
  background: #fff;
  width: 500px;
  height: auto;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  color: #000;
}
.left-text { text-align: center; }
.left-text h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 15px;
}
.left-text p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.left-content {
  width: 900px;
  height: auto; 
  background-color: #151515; 
  border: 2px solid rgba(67, 59, 58, 0.7); 
  padding: 20px; 
  box-sizing: border-box;
  color: #fff; 
  margin-top: -318px;
  position: relative;
  left: 52px;  
  z-index: 10;    
  border-radius: 3px;     
}

.left-content h2 {
  color: #FFD700;       
  font-size: 2.2rem;    
  font-weight: bold;   
  margin-bottom: 15px; 
  text-align: left;  
}


.welcome-image {
  display: block;
  max-width: 100%;  
  width: 880px;     
  height: auto;      
  margin: 0 auto 15px auto;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
}

/* Discord */
.center-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;

}

.widget-section {
  max-width: 1100px;
  width: 100%;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.widget-section widgetbot {
  width: 100%;
  height: 400px; 
}

/* Right Side */
.hero-right-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 20px;
}
.hero-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.hero-btn {
  width: 327px;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.hero-btn:hover { transform: scale(1.1); }

/* Login panel */
.login-panel {
  background: url('member.png') no-repeat center top;
  background-size: contain;
  width: 328px;
  height: 313px;
  margin-bottom: 20px;
  padding: 48px 3px 8px;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login-panel p {
  /* margin-top: 1px;    */
  text-align: left; 
  font-size: 11px;   
  color: #767676;       
}

.login-panel input {
  width: 100%;
  padding: 7px;
  margin: 10px 0;
  border: none;
  border-radius: 5px;
  outline: none;
  font-size: 9px;
}

.remember-me {
  display: flex;
  align-items: center; 
  gap: 6px;
  margin: 10px 0;
  font-size: 12px;
  color: #767676;
}

.remember-me input[type="checkbox"] {
  margin: 0;
  width: auto;   
}


.login-btn {
  width: 280px;
  height: 42px;
  background: url('login.png') no-repeat center center;
  background-size: contain;
  border: none;
  cursor: pointer;
}

.forgot-password {
  margin-top: 15px;
  text-align: center;
}
.forgot-password img {
  cursor: pointer;
  max-width: 150px;
}

/* Quick buttons */
.quick-buttons {
  display: flex;
  flex-direction: column;   
  gap: 3px;
  margin-left: 20px;
  padding: 20px;  
  background: url('quick-bg.png') no-repeat center top;
  background-size: contain;
  width: 328px;
  height: 313px;   
  margin-top: -16px;
}

.quick-btn {
  width: 286px;
  height: auto;
  cursor: pointer;
  transition: transform 0.2s;
}
.quick-btn:hover { transform: scale(1.1); }

.first-btn {
  margin-top: 45px;
}

.screenshots {
  margin-top: 5px;
  padding: 20px;
  background: url('screenshots-bg.png') no-repeat center top;
  background-size: contain;
  width: 328px;
  height: 313px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.screenshot-gallery {
  position: relative;
  width: 290px;  
  height: 180px; 
  margin: 0 auto;
  overflow: hidden; 
  border-radius: 6px;
}

.screenshot-gallery img {
  width: 290px; 
  height: 180px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
  transition: transform 0.3s;
}

.screenshot-gallery img:hover {
  transform: scale(1.05); 
}

.slides {
  margin-top: 30px;
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.slide {
  flex: 0 0 290px;        
  height: 180px;
  display: flex;          
  justify-content: center;
  align-items: center;
}

.slide img {
  width: 290px;
  height: 180px;
  border-radius: 6px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
}

.slide img:hover {
  transform: scale(1.05); 
}

.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: #FFD700;
  border: none;
  padding: 10px;
  cursor: pointer;
  border-radius: 100%;
  z-index: 10;
}

.prev { left: 10px; top: 105px; }
.next { right: 10px; top: 105px; }

.prev:hover,
.next:hover {
  background: rgba(0,0,0,0.8);
}

.bg-dark {
    --bs-bg-opacity: 1;
    background-color: rgb(68 61 106) !important;
}



/* Section helpers */
section { padding-top: 48px; padding-bottom: 48px; }
.bg-light { background: #0f0f12; }
.card { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); }
.cta-section { padding: 56px 0; }

/* Tablet (≤991px) */
@media (max-width: 991px) {
  .hero .container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
  }
  .navbar .nav-link {
      color: #fff !important;
      transition: color 0.2s ease;
      text-align: center;
  }
  .navbar-toggler-icon {
    display: inline-block;
    width: 0.8em;
    height: 1em;
    vertical-align: middle;
    color: #29243f;
    background-image: var(--bs-navbar-toggler-icon-bg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
  }
  .navbar-toggler {
      padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);
      font-size: var(--bs-navbar-toggler-font-size);
      line-height: 1;
      color: rgba(26, 2, 42, 0);
      background-color: #bbaacf;
      border: var(--bs-border-width) solid rgba(26, 2, 42, 0);
      border-radius: var(--bs-navbar-toggler-border-radius);
      transition: var(--bs-navbar-toggler-transition);
      position: relative;
      left: 175px;
      top: -37px;
  }
  .left-layout,
  .left-content,
  .quick-buttons {
    width: 100% !important;
    max-width: 450px;
    margin: 0 auto 20px auto;
    position: relative;
    top: -135px;
    left: 1px;
  }

  .login-panel {
    width: 100% !important;
    max-width: 450px;
    margin: 0 auto 20px auto;
    position: relative;
    top: -135px;
    left: 1px;
  }

  .login-panel p {
    /* margin-top: 1px;    */
    text-align: left; 
    font-size: 11px;   
    color: #767676;       
  }

  .login-panel input {
    width: 100%;
    padding: 7px;
    margin: 7px 0;
    border: none;
    border-radius: 5px;
    outline: none;
    font-size: 9px;
  }

  .screenshots {
    display: none;
  }

  .hero-sprite {
    left: 0;
    top: 0;
    margin: 0 auto;
    max-width: 400px;
  }

  .hero-btn {
    width: 100%;
    position: relative;
    top: -140px;
  }

  .quick-btn {
    width: 100%;
  }

  .welcome-image {
    width: 100%;
    max-width: 450px;
  }

  .rank-table {
    position: relative;
    right: 0;
}
  .top-categories {
    margin-top: 20px;
  }

  .screenshot-gallery,
  .screenshot-gallery img,
  .slide img {
    width: 100%;
    height: auto;
  }
}

/* Mobile (≤576px) */
@media (max-width: 576px) {
  .navbar img {
    height: 60px;
    position: relative;
    /* left: 75px; */
    top: 20px;
  }

  .navbar-info {
    min-width: auto;
    text-align: center;
    margin-top: 10px;
  }

  .players-box,
  .status-label {
    font-size: 0.75rem;
    padding: 2px 8px;
  }

  .hero .container {
    gap: 15px;
    margin-bottom: -128px;
  }

  .left-layout h2,
  .left-content h2 {
    font-size: 1.5rem;
  }

  .left-text p {
    font-size: 0.9rem;
  }

  .time-box {
    font-size: 14px;
    padding: 6px 10px;
  }

  .login-btn {
    width: 100%;
  }

  .forgot-password img {
    max-width: 120px;
  }
}