/* =============================
   RetroUse v1.0.1 Website Styles
   ============================= */

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

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  background: #f9fafb;
}
.body-dm {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  background: #001121;
}
.BodyGS{
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  background: #f9fafb;
}
.BodyGS-dm{
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  background: #001121;
}

.container {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;;
}
.containerB {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;;
}
.containerB-dm {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;;
  color: #9b9bff;
  background: #001121;
}

/* Header */
.header {
  background: linear-gradient(to right, #cd5c5cd7, #6b21a8d7, #0891b2d7); /* Green to Purple to Cyan */
  color: #fff;
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start; 
}

.logo {
  font-size: 1.5rem;
  font-weight: bold;
}

.nav a {
  margin-left: 1.5rem;
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s;
}

.nav a:hover {
  color: #fde047; /* Yellow */
}

/* Hero */
.hero {
  background: linear-gradient(to right, #cd5c5c, #7e22ce, #06b6d4); /* Green → Purple → Cyan */
  color: white;
  text-align: center;
  padding: 6rem 2rem;
  margin-bottom: 3rem;
}

.hero h2 {
  font-size: 3rem;
  margin-bottom: 1rem;
  font-weight: 800;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

/* Sections */
.section {
  padding: 4rem 2rem;
  background: transparent;
  color: black;
}
.sectionGS-dm h2,
.sectionGS-dm ol,
.sectionGS-dm li,
.sectionGS-dm p,
.sectionGS-dm a,
.sectionGS-dm strong {
  background: transparent !important;
  color: #9b9bff !important;
}
.sectionDM {
  padding: 4rem 2rem;
  background: #001121;
  color: rgb(155, 155, 255);
}
.sectionGS-dm {
  padding: 4rem 2rem;
  background: #001121 !important;
  color: #9b9bff;
}

.sectionGS {
  padding: 4rem 2rem;
  background: #fff;
  color: black;
}
.section.alt {
  background: #f3f4f6;
  color: black;
}


.section h3 {
  font-size: 2rem;
  margin-bottom: 1rem;
  font-weight: 700;
  background: linear-gradient(to right, indianred, #7e22ce, #06b6d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section p, .section ol, .section li {
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

/* Cards */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.card {
  background: #fff;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.cardDM {
  background: #001121;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(47, 106, 255, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}


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

.card h4 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  background: linear-gradient(to right, #15803d, #7e22ce, #06b6d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Footer */
.footer {
  background: linear-gradient(to right, #166534, #6b21a8, #0891b2);
  color: white;
  text-align: center;
  padding: 1.5rem;
  margin-top: 3rem;
}
.how-to-use {
    border: 2px solid #4CAF50; 
    padding: 20px; 
    border-radius: 8px; 
    background-color: #f9f9f9; 
}

.how-to-use ul {
    padding-left: 20px; 
    margin-top: 10px;   
}
.SwitchDM{
    width: 40px;
    height: 20px;
    background-color: #ccc;
    height: 45px;
    width: auto;
    border-radius: 20px;
    position: relative;
    cursor: pointer;
    margin-left: 20px;
}
/* Download Box */
.download-box {
  background: linear-gradient(90deg, #f3f4f6 70%, #e0e7ff 100%);
  border: 2px solid #2E6F40;
  border-radius: 16px;
  padding: 2rem;
  margin: 2rem 0;
  box-shadow: 0 2px 8px rgba(47, 106, 255, 0.08);
  text-align: center;
}

.download-box h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: #2E6F40;
}

.download-box p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  color: #222;
}

.download-btn {
  display: inline-block;
  background: #30ce22;
  color: #fff;
  padding: 0.8rem 2rem;
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.3s;
  box-shadow: 0 2px 8px rgba(47, 106, 255, 0.12);
}

.download-btn:hover {
  background: #3dd928;
}
.download-box-dm {
  background: linear-gradient(90deg, #013220 70%, #065f46 100%);
  border: 2px solid #22c55e;
  border-radius: 16px;
  padding: 2rem;
  margin: 2rem 0;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.18);
  text-align: center;
}

.download-box-dm h3 {
  color: #22c55e;
}

.download-box-dm p {
  color: #bbf7d0;
}

.download-box-dm .download-btn {
  background: #22c55e;
  color: #013220;
}

.download-box-dm .download-btn:hover {
  background: #bbf7d0;
  color: #065f46;
}
.GS {
  margin: 0 auto;
  margin-bottom: 55px;
  padding: 10px 5px;
  text-align: center;
  font-size: 20px;
  border-radius: 50px;
  position: relative;
  background: #100c08;
  width: 270px;
  color: #f5f5f5;
  font-weight: 500;
  overflow: visible; 
  cursor: pointer;
}

@property --angle{
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.GS::after, .GS::before {
  content: '';
  position: absolute;
  height: calc(100% + 8px); 
  width: calc(100% + 8px);  
  background-image: conic-gradient(from var(--angle), #ff4545, #00ff99, #006aff, #ff0095, #ff4545);
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  border-radius: 50px; 
  animation: 3s spin linear infinite;
}
.GS::before {
  filter: blur(1.5rem);
  opacity: 0.5;
}
@keyframes spin{
  from{
    --angle: 0deg;
  }
  to{
    --angle: 360deg;
  }
}
/* Always visible navbar */
.Hnav {
  width: 100%;
  background: transparent;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.main-nav {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  list-style: none;
  padding: 0 2rem;
  background: transparent;
}

.main-nav li {
  height: 50px;
  display: flex;
  align-items: center;
}

.main-nav .logo {
  margin-right: auto;
}

.main-nav a {
  color: #fff;
  padding: 0 30px;
  text-decoration: none;
  font-weight: 500;
  display: flex;
  align-items: center;
  height: 100%;
  transition: background 0.3s;
}

.main-nav a:hover {
  background-color: #f0f0f0;
  color: #100c08;
}

.menu-button {
  display: none;
  cursor: pointer;
}

/* Sidebar styles */
.sidebar {
  position: fixed;
  top: 0;
  right: -250px;
  height: 100vh;
  width: 250px;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  box-shadow: -10px 0 10px rgba(0, 0, 0, 0.1);
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  transition: right 0.3s;
  z-index: 2000;
}

.sidebar.show {
  right: 0;
}

.sidebar li {
  width: 100%;
}

.sidebar a {
  width: 100%;
  color: #100c08;
  padding: 1rem 2rem;
  text-decoration: none;
  display: flex;
  align-items: center;
}

.sidebar a:hover {
  background-color: #f0f0f0;
}

/* Responsive: show hamburger on mobile, hide main nav */
@media (max-width: 900px) {
  .main-nav li:not(.logo):not(.menu-button) {
    display: none;
  }
  .menu-button {
    display: flex;
  }
}

/* Sidebar full width on very small screens */
@media (max-width: 400px) {
  .sidebar {
    width: 100%;
  }
}