* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: sans-serif;
}

:root{
  --primary:#33bbff; /* Indigo */
  --primary-dark: #4f46e5;
  --secondary: hsl(165, 94%, 49%); /* Cyan */
  --accent: #a855f7; /* Purple */
  --dark-bg: #111827;
  --box-color:   hsl(220, 25%, 15%);
  --darker-bg: #030712;
  --text-primary: #f3f4f6;
  --text-secondary: #9ca3af;
  --navbar-bg: rgba(17, 24, 39, 0.1); /* Semi-transparent navbar background */
  --glass-effect: blur(12px);
  --transition-normal: all 0.3s ease;
  --border-glow: rgba(99, 102, 241, 0.3);
  --neon-shadow: 0 0 15px rgba(6, 182, 212, 0.5);
  --glow-cyan: 0 0 15px rgba(6, 182, 212, 0.5);
  --glow-indigo: 0 0 15px rgba(99, 102, 241, 0.5);
  --glow-purple: 0 0 15px rgba(168, 85, 247, 0.5);
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --gradient-purple:linear-gradient(270deg, #3b82f6, #9333ea,  #3b82f6);
    --gradient-cyber: linear-gradient(135deg, hsl(222 25% 8%), hsl(220 30% 15%), hsl(200 40% 20%));
    --gradient-neon: linear-gradient(135deg, hsl(200 100% 60%);, hsl(165, 94%, 49%));
    --gradient-hero: linear-gradient(135deg, hsl(222 25% 8%) 0%, hsl(220 30% 12%) 50%, hsl(200 20% 15%) 100%);
    --glow-primary: 0 0 30px hsl(200 100% 60% / .3);
    --glow-accent: 0 0 25px hsl(165 100% 50% / .3);
    --gradient-color:linear-gradient(135deg, hsl(222 25% 8%), hsl(220 30% 15%), hsl(200 40% 20%));

}




body {overflow: auto; 
  scrollbar-width: none; /* hides scrollbar */
}

body::-moz-scrollbar {  
  width: 0;    /* removes scrollbar width */
  height: 0;
  display: none; /* optional */
}










/* Scrollable container or body */
.scroll-container, body {
  overflow-y: auto;
  scrollbar-width: thin;               /* Firefox */
  scrollbar-color: #38bdf8 #0f172a;   /* thumb | track */
}

/* Webkit Browsers */
.scroll-container::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 12px;
}

.scroll-container::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: #0f172a;
  border-radius: 10px;
}

.scroll-container::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  border-radius: 10px;
  border: 3px solid #0f172a;
  background: linear-gradient(180deg, #3b82f6, #8b5cf6, #06b6d4);
  background-size: 300% 300%;
  box-shadow: 0 0 10px #3b82f6;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* Hover effect */
.scroll-container::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  box-shadow: 0 0 15px #8b5cf6;
}

/* Animated gradient for idle */
@keyframes thumbGlow {
  0% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}

.scroll-container::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  animation: thumbGlow 4s ease infinite;
}





/* Hide scrollbar for any scrollable container */
.scroll-container {
  overflow: auto;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;     /* Firefox */
}

.scroll-container::-webkit-scrollbar {
  display: none;             /* Chrome, Safari, Opera */
}


html {
  scroll-behavior: smooth; /* Enable smooth scrolling */
  scroll-padding-top: 80px; /* Account for fixed navbar */
}

body {
  font-family: 'Space Grotesk', sans-serif;
  background-color: var(--dark-bg);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
  transition:var(--transition-smooth)
}

section {
  margin: 0;
  padding: 0;
}

/*------------ panel--------- */

@media all{
  /* Section full height */
    #panelguide {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 5vh 2vw;
      box-sizing: border-box;
    }

    /* Title */
    #panelguide h1 {
      font-size: clamp(1.8rem, 2.5vw, 3rem);
      font-weight: 700;
      text-align: center;
      margin-bottom: 5vh;
      color: var(--primary);
    }

    /* Main container */
    .panel-container {

      display: flex;
      gap: 1vw;
      width: 80%;
      max-width: 1600px;
      margin: auto;
      background: #1f2937;
      padding: 1vh 1vw;
      border-radius: 12px;
      box-shadow: 0 6px 20px rgba(0,0,0,0.15);
      height: 75vh; /* scales inside the section */
    }

    /* Questions list */
    .panel-questions {
      flex: 1;
      border-right: 1px solid var(--border-color);
      border-radius: 8px;
      overflow-y: auto;
      scrollbar-width: thin;
    }

    .panel-questions ul {
      list-style: none;
      margin: 0;
      padding: 0;
      background: #374151;
      height: 100%;
    }

    .panel-questions ul li {
      position: relative;
      cursor: pointer;
      padding: 1rem;
      border-bottom: 1px solid var(--border-color);
      color: var(--text-secondary);
      font-size: clamp(0.9rem, 1vw, 1.2rem);
      transition: all 0.3s ease;
      overflow: hidden;
    }

    .panel-questions ul li:hover {
      background: #60a5fa;
      color: #fff;
    }

    .panel-questions ul li.active {
      background: var(--primary);
      color: #fff;
      font-weight: bold;
    }

    /* Progress bar inside each tab */
    .panel-questions ul li .progress {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 100%;
      width: 0%;
      background: rgba(255, 255, 255, 0.15);
      transition: width 5s linear;
      z-index: 0;
    }

    .panel-questions ul li span {
      position: relative;
      z-index: 1;
    }

    /* Answers area */
    .panel-answers {
      flex: 2;
      padding-left: 2vw;
      overflow-y: auto;
    }

    .panel-answers .answer {
      display: none;
      opacity: 0;
      transition: opacity 0.4s ease;
      text-align: center;
      height: 100%;
    }

    .panel-answers .answer.active {
      display: block;
      opacity: 1;
    }

.panel-answers img {
  max-width: 100%;
  height: auto;
  max-height: 55vh; /* increased size, scales to viewport height */
  object-fit: contain;
  display: block;
  margin: 0 auto 2vh auto;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}



    .panel-answers h3 {
      margin-bottom: 1vh;
      color: var(--primary);
      font-size: clamp(1.2rem, 1.6vw, 2rem);
    }

    .panel-answers p {
      color: var(--text-secondary);
      line-height: 1.6;
      font-size: clamp(0.9rem, 1vw, 1.1rem);
      padding: 0 5%;
    }

/* Mobile layout */
@media (max-width: 768px) {
  .panel-container {
    flex-direction: column;
    width: 96%;
    max-width: 100%;
    height: auto;
    padding: 2vh 4vw; /* adds breathing room on sides */
    box-sizing: border-box;
  }

  .panel-questions {
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    width: 100%;
  }

  .panel-answers {
    padding-left: 0;
    padding-top: 2vh;
    width: 100%;
  }
}


    /* Responsive */
    @media (max-width: 1024px) {
      .panel-container {
        flex-direction: column;
        height: auto;
      }
      .panel-questions {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
      }
      .panel-answers {
        padding-left: 0;
        padding-top: 2vh;
      }
    }

    @media (min-width: 2000px) {
      #panelguide h1 {
        font-size: 3.5rem;
      }
      .panel-container {
        max-width: 2200px;
        padding: 4vh 3vw;
      }
      .panel-answers img {
        max-height: 40vh;
      }
    }
}

  /* --------hero section start------ */
@media all{

.typewriter-wrapper {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.typewriter {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  line-height: 1.2em;
  height: 1.2em; /* keeps height fixed to prevent jumping */
  vertical-align: middle;
}

.cursor {
  width: 2px;
  height: 1.2em;
  background-color: #38bdf8;
  margin-left: 2px;
  animation: blink 0.8s infinite;
  flex-shrink: 0;
}

@keyframes blink {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; }
}


.highlight {
  color: #38bdf8;
  font-weight: 600;
}


/* default state: hidden */
body {
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* when fully visible */
body.fade-in {
  opacity: 1;
}

/* when leaving */
body.fade-out {
  opacity: 0;
}



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

    body, html { 
        height:100%;
        font-family:'Inter', sans-serif; 
        background:#0f172a; 
        color:#f1f5f9; 
        overflow-x:hidden; 
    }

    .btn {
        display: inline-flex;       /* make the <a> behave like a button */
        align-items: center;        /* center icon & text vertically */
        justify-content: center;    /* center text horizontally */
        padding: 0.5rem 1.2rem;
        border-radius: 6px;
        border: none;
        gap: .5rem;
        cursor: pointer;
        font-weight: 600;
        text-decoration: none;      /* remove underline */
        transition: 0.3s;
    }


a.btn-primary {   
  background: linear-gradient(to right, #3b82f6, #8b5cf6);
  color: white;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

a.btn-primary:hover {
  background:linear-gradient(to right, #2563eb, #7c3aed);
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

a.btn-primary:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}



    .btn-outline {
        background: transparent;
        border: 1px solid #3b82f6;
        color: #3b82f6;
    }

    .btn-outline:hover {
        background: #3b82f6;
        color: white;
    }



    /* Hero Section */
    .hero {
        display:flex;
        justify-content:space-between;
        align-items:center;
        flex-wrap:wrap;
        background:var(--gradient-cyber);
        padding-top: 2rem;  
        gap:3rem;
        min-height: 100vh;
        position:relative;
    }

    .hero-text {
        flex:1;
        min-width:320px;
        z-index:10;
        margin-left: 1rem;   /* desktop margin */
        margin-right: 1rem;
    }

    .hero-text h1 span { 
        color:#3b82f6; 
        font-weight:700;
        font-size: 4rem;
    }

    .hero-text p span { 
        color:#38bdf8; 
        font-weight:600; 
    }

    .hero-text h1 {
        font-size:4.5rem;            /* bigger title */
        line-height:1.1;
        color:#33bbff;
        margin-bottom:1.5rem;
    }

    .hero-text p {
        font-size:1.5rem;          /* bigger paragraph */
        color:#94a3b8;
        margin-bottom:2rem;
        max-width:550px;
    }

    .hero-text .features {
        display:flex;
        gap:1rem;
        margin-bottom:2rem;
        flex-wrap:wrap;
    }

    .hero-text .features div {
        background: rgba(255,255,255,0.05);
        padding:0.5rem 1rem;
        border-radius:8px;
        font-weight:500;
        transition: background 0.3s;
    }

    .hero-text .features div:hover { 
        background: rgba(59,130,246,0.2); 
    }

    .hero-text .hero-buttons { 
        display:flex; 
        gap:1rem; 
        flex-wrap:wrap; 
    }

    .btn-outline:first-child {
        margin: 1rem 0;
    }

    .game-carousel {
        flex:1;
        margin-right: 3rem;
        min-width:320px;
        max-width:800px;
        height:450px;              /* taller carousel */
        position:relative;
        overflow:hidden;
        border-radius:20px;
        box-shadow:0 15px 40px rgba(0,0,0,0.45);
    }



.game-slide {
  position: absolute;       /* keep slides stacked */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  pointer-events: none;     /* prevent clicks on hidden slides */
}

.game-slide.active {
  opacity: 1;
  pointer-events: auto;     /* only the active image is clickable */
}

.game-slide img {
  width: 100%;              /* image fills its container naturally */
  height: 100%;             /* maintain aspect ratio via object-fit */
  object-fit: cover;        /* keeps original image shape without stretching */
  border-radius: 20px;      /* optional styling */
  display: block;           /* avoid extra spacing */
}


    /* Progress Bar */
    .progress-bar {
        position:absolute;
        bottom:15px; 
        left:50%;
        transform:translateX(-50%);
        width:80%; 
        height:4px;
        background:rgba(255,255,255,0.2);
        overflow:hidden;
        border-radius:2px;
    }

    .progress-fill { 
        width:0%; 
        height:100%; 
        background:#38bdf8; 
        transition: width linear; 
    }

@media (max-width:768px) {
        .progress-bar { display:none; }
    
.hero-text{
  margin-top: 4rem;
}

    .game-carousel {
        margin-right: 1rem;
    }

    .hero { 
        padding:1rem 1rem; 
    }

 .hero-text {
        margin-left: 0;              /* no left margin on mobile */
        margin-right: 0;
        text-align: center;          /* center text */
    }

    /* Scroll Indicator */
    .scroll-indicator {
        position:absolute;
        bottom:20px;
        left:50%;
        transform:translateX(-50%);
        font-size:2rem;
        color:#38bdf8;
        cursor:pointer;
        animation:bounce 1.5s infinite;
    }
}
    @keyframes bounce {
        0%,20%,50%,80%,100% { transform:translate(-50%,0); }
        40% { transform:translate(-50%,-10px); }
        60% { transform:translate(-50%,-5px); }
    }


/* Mobile tweaks */
@media (max-width:480px){  
    .hero {
        height: 150vh;
        flex-direction: column;      /* stack text + image */
        align-items: center;         /* center horizontally */
        padding:6rem 1rem;
    }

    .hero-text {
        margin-left: 0;              /* no left margin on mobile */
        margin-right: 0;
        text-align: center;          /* center text */
    }
.hero-text{
  margin-top: -2rem;
}
    .hero-text h1 { 
        font-size:2.5rem; 
    }

    .hero-text p { 
        font-size:1rem; 
    }

    .game-carousel { 
        margin-right: 0;
        width: 95%;                  /* image takes 95% width */
        height: auto;    
        background-color: rgb(102, 154, 223);            /* auto height keeps aspect ratio */
        margin-top: .1rem;            /* spacing below text */
    }
}

/* 2K (1440p) and 4K (2160p) display optimizations */
@media (max-width: 1920px) {
  .btn-outline:first-child{
  margin-top: 4rem;}
}

@media (min-width: 1920px) {
  .hero-text h1 {
    font-size: 4rem;
  }

  .hero-text p {
    font-size: 1.8rem;
    max-width: 750px;
  }

  .hero-text {
    margin-left: 4rem;
  }

  .game-carousel {
    max-width: 1000px;
    height: 550px;
  }

  .btn {
    padding: 0.8rem 1.8rem;
    font-size: 1.1rem;
  }
}

@media (min-width: 2560px) {
  .hero-text h1 {
    font-size: 7rem;
  }

  .hero-text p {
    font-size: 2rem;
    max-width: 850px;
  }

  .hero-text {
    margin-left: 10rem;
  }

  .game-carousel {
    max-width: 1200px;
    height: 650px;
  }

  .btn {
    padding: 1rem 2.2rem;
    font-size: 1.2rem;
  }
}


}



/* =======games_section start=========== */
@media all {

.games_section {
  position: relative;
    background-color: var(--gradient-cyber);
  overflow: hidden;
}



#cursor-trail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;  /* don’t block mouse interaction */
  z-index: 0;            /* behind content */
}



/* ensure your content is above canvas */
.games_section .topheading,
.games_section .allgames {
  position: relative;
  z-index: 1;
}

.games_section .topheading {
  width: 50%;
  margin: 0 auto;
  text-align: center;
}

.games_section .topheading h1 {
  padding-top: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3rem;
  color: var(--primary);
  margin-bottom: 1.5rem;
  line-height: 3rem;
}

.games_section .topheading p {
  margin: 0 auto;
  max-width: 700px;
  color: var(--text-secondary);
  font-size: 1.2rem;
}


.games_section .allgames {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns equal width */
  gap: 40px;
  max-width: 1000px;
  margin: 0 auto;   /* centers the whole grid */
  padding: 40px 20px;
}

.games_section .allgames .game_card {
  background-color: hsl(200 20% 15%);
  padding: 25px;
  border-radius: 12px;
  color: #ffffff;
  font-family: sans-serif;
  display: flex;
  gap: 15px;
  flex-direction: column;
  min-height: 350px;
  transition: all 0.3s ease; /* smooth animation */
}

/* hover effect */
.games_section .allgames .game_card:hover {
  box-shadow: 0 0px 25px hsl(200, 100%, 30%); /* glowing blue shadow */
}


/* instead of gap, control spacing manually */
.card_header { margin-bottom: 10px; }
.card_desc { margin-bottom: 15px; }
.card_features { margin-bottom: 20px; }


.card_header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.card_icon {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    object-fit: cover;
}

.card_title h3 {
    margin: 0;
    font-size: 1.2rem;
}

.price {
    font-size: 1rem;
    color: var(--secondary);
}


.card_desc {
    font-size: 1.1rem;   /* bigger text */
    line-height: 1.6;   /* more breathing space */
    color: #cfd8dc;
    font-weight: 500;   /* optional: a little bolder */
}


.card_features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.card_features li::before {
    content: '•';
    color: #4fc3ff; /* cyan dot */
    display: inline-block;
    width: 1em;
}

.card_button {
    margin-top: auto;
    background-color: #4fc3ff;
    color: #0a1f34;
    text-align: center;
    padding: 10px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s;
    display: inline-flex;     /* 👈 align text + arrow */
    align-items: center;
    justify-content: center;
    gap: 8px;                 /* space between text & arrow */
}

.card_button::after {
    opacity: 0;      
    content: "→";             /* arrow */
    transition: transform 0.3s ease;
    transform: translateX(-5px);
}

.card_button:hover {
  background-color: hsl(200, 100%, 50%);
    transform: scale(1.05);
}

.card_button:hover::after {
   opacity: 1;   
    transform: translateX(5px);  /* arrow moves right */
}






/* Mobile: stack games in one column */
@media (max-width: 768px) {
  .games_section .allgames {
    padding: 10px;
    grid-template-columns: 1fr; /* one column only */
  }

  .games_section .topheading {
    width: 90%;
  }

  .games_section .topheading h1 {
    font-size: 2rem;
    line-height: 2.3rem;
    padding-top: 30px;
  }

  .games_section .topheading p {
    font-size: 1rem;
  }
}

/* Tablet adjustments */
@media (max-width: 1024px) {
  .games_section .topheading {
    width: 70%;
  }

  .games_section .topheading h1 {
    font-size: 2.5rem;
    line-height: 2.8rem;
  }

  .games_section .topheading p {
    font-size: 1.1rem;
  }
}

/* Extra small devices (phones under 480px) */
@media (max-width: 480px) {
  .games_section .topheading h1 {
    font-size: 1.6rem;
    line-height: 2rem;
  }

  .games_section .topheading p {
    font-size: 0.9rem;
  }
}
}

/* VPS Section */
@media all {

.vps_section {
  background: var(--gradient-cyber);
  color: var(--text-primary);
  text-align: center;
  padding: 60px 20px;
  font-family: Arial, sans-serif;
}

.vps_section .topheading h1 {
  font-size: 2.5rem;
  font-weight: bold;
}

.vps_section .topheading p {
  color: #aaa;
  color: text;
  max-width: 600px;
  margin: 10px auto 30px;
}

/* VPS Cards Container */
.vps_plansa {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin: 40px auto;

}

/* VPS Card */

.plana {
  min-height: 400px; /* taller cards */
  background: #161b22;
  border: 1px solid rgba(51, 187, 2550,0.2);
  padding: 25px;
  border-radius: 12px;
  width: 350px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 22px var(--neon-shadow);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;  /* optional if you want top-down layout */
}

.plana:hover {
  transform: translateY(-3px);
}


.plana::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px; /* border thickness */
  border-radius: 12px;

  /* Mouse-follow glow */
  background: radial-gradient(
    circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    var(--primary),
 hsl(200, 100%, 50%),          /* bright center */
    transparent 30%           /* fade to nothing */
  );

  opacity: 0; /* hidden by default */
  transition: opacity 0.3s ease;

  /* Chrome, Safari, Edge */
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;

  /* Standard property for Firefox & others */
  mask: 
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;

  pointer-events: none;
  z-index: 1;
}

/* Show glow on hover */
.plana:hover::before {
  opacity: 1;
}

/* Ensure content sits above the glowing border */
.plana > * {
  position: relative;
  z-index: 2;
}

/* Card Content */
.plana h3 {
  font-size: 20px;
  margin-bottom: 15px;
}

.plana .pricea {
  font-size: 28px;
  font-weight: bold;
  color: var(--primary);
  margin: 15px 0;
  transition: color 0.3s ease;
}

.plana ul {
  list-style: none;
  padding: 0;
  margin: 15px auto;
  text-align: left;
  max-width: 180px;
}

.plana ul li {
  margin: 8px 0;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
}

/* Deploy Button */
.vps_button {
  position: absolute;      /* stick to bottom */
  bottom: 30px;            /* distance from bottom of card */
  left: 50%;               /* center horizontally */
  transform: translateX(-50%);
  width: calc(100% - 50px); /* match card width minus padding */
  display: block;
  padding: 12px;
  background: transparent;
  border: 1.5px solid var(--primary);
  color: var(--text-primary);
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  transition: 0.3s;
}

.vps_button:hover {
  background: var(--primary);

}

/* VPS Features */
.vps_features {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary);
  margin-top: 40px;
}

.vps_features div {
  padding: 12px 20px;
  border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.vps_features div:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(51, 187, 2550,0.3);
}

/* -------------------
   Responsive Design
--------------------*/

/* Tablets */
@media (max-width: 992px) {
  .vps_section h1 {
    font-size: 2rem;
  }

  .vps_plansa {
    gap: 15px;
  }

  .plana {
    width: 48%; /* two per row */
  }
}

/* Mobile */
@media (max-width: 600px) {
  .vps_section h1 {
    font-size: 1.6rem;
  }

  .vps_plansa {
    flex-direction: column;
    align-items: center;
  }

  .plana {
 width: 95%;
    margin-bottom: 20px;
  }

  .plan:last-child {
    margin-bottom: 0;
  }

  .vps_features {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
  }
}

}



/* --------web host section start */
@media all {
  /*  
.webhost_section {
  background:var(--gradient-hero);
  color: #f5f5f5;
  text-align: center;
  padding: 60px 20px;
  font-family: Arial, sans-serif;
}

.webhost_section h1 {
  font-size: 2.5rem;
  font-weight: bold;
}

.webhost_section h1 span {
  color: #23e6c0;
}

.webhost_section p {
  color: #aaa;
  max-width: 600px;
  margin: 10px auto 30px;
}

// Domain Search 
.domain-search {
  margin: 20px auto;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.domain-search input {
  padding: 12px;
  width: 280px;
  border-radius: 8px;
  border: none;
  outline: none;
}

.domain-search button {
  background: #00f0ff;
  border: none;
  padding: 12px 18px;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  color: #000;
  transition: 0.3s;
}

.domain-search button:hover {
  background: #00d0df;
}

//  Domain Prices
.domain-prices {
  margin: 20px auto;
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;  
  padding: 40px 5px;
  border-radius: 16px;
}
.domain-prices:hover{

  box-shadow: 0 0 15px var(--primary);
}

.domain-prices span {
  border: 1px solid var(--border-glow);
  background: #161b22;
  padding: 10px 15px;
  border-radius: 6px;
  font-size: 14px;
  color: #ccc;
  transition: all .3s;
}
.domain-prices span:hover{
    transform: translateY(-10px);
  box-shadow: 0 0 15px var(--primary);
}
//  Pricing 
.pricing {

  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 40px auto;
  flex-wrap: wrap;
}

.plan {

    border: 1px solid var(--border-glow);
  background: #161b22;
  padding: 25px;
  border-radius: 12px;
  width: 280px;
  text-align: left;
  box-shadow:0 4px 22px  var(--neon-shadow);
  position: relative;
  transition:  .3s;
}
.plan:hover{
    transform: translateY(-10px);
  box-shadow: 0 0 15px var(--secondary);
}

.plan h2 {
  margin: 0;
  font-size: 20px;
  font-weight: bold;
}

.price {
  font-size: 28px;
  font-weight: bold;
  color: #23e6c0;
  margin: 15px 0;
}

.plan ul {
  list-style: none;
  padding: 0;
  margin: 15px 0;
}

.plan ul li {
  margin: 8px 0;
  font-size: 14px;
}

.plan button {
  width: 100%;
  padding: 12px;
  background: transparent;
  border: 2px solid #23e6c0;
  color: #23e6c0;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  transition: 0.3s;
}

.plan button:hover {
  background: #23e6c0;
  color: #000;
}

// Most Popular Tag 
.most-popular::before {
  content: "Most Popular";
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: #23e6c0;
  color: #000;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 20px;
  font-weight: bold;
}

//  Features 
.features {
  display: flex;
  justify-content: center;  /
  align-items: center;
  gap: 20px;
  margin: 30px auto;
  color: #aaa;
  flex-wrap: nowrap;       
  overflow-x: auto;          
  padding: 10px;
  -webkit-overflow-scrolling: 
}

.features div {
  flex: 0 0 auto;            
  width: 160px;            
  text-align: center;
}

.features div i {
  display: block;
  font-size: 28px;
  margin-bottom: 10px;
  color: #23e6c0;
}




// Tablet 
@media (max-width: 992px) {
  .webhost_section h1 {
    font-size: 2rem;
  }

  .pricing {
    gap: 15px;
  }

  .plan {
    width: 45%;
  }
}

// Mobile 
@media (max-width: 600px) {
  .webhost_section h1 {
    font-size: 1.6rem;
  }

  .domain-search input {
    width: 100%;
  }

  .pricing {
    flex-direction: column;
    align-items: center;
  }

  .plan {
    width: 90%;        
    margin-bottom: 20px; 
  }

  .plan:last-child {
    margin-bottom: 0;
  }

  // Keep features horizontal in mobile 
  .features {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
  }

  .features div {
    flex: 1 1 40%;  /
    max-width: 150px;
  }
}*/
}


/* ---------testimonial section */

@media all {

.testimonials {
  background: var(--gradient-hero);
  color: #f5f5f5;
  padding: 60px 20px;
  text-align: center;
  font-family: Arial, sans-serif;
}

.testimonial-heading h2 {
  font-size: 2rem;
  font-weight: bold;
}



.testimonial-heading h2 span {
  color: #23e6c0;
}

.testimonial-heading p {
  color: #aaa;
  margin-bottom: 40px;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  max-width: 1200px;
  margin: auto;
}

.testimonial-card {
  background: #41a5c614;
  padding: 20px;
  border-radius: 12px;
  text-align: left;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.testimonial-card .stars {
  color: #23e6c0;
  font-size: 18px;
  margin-bottom: 15px;
}

.testimonial-card p {
  font-size: 14px;
  color: #ccc;
  margin-bottom: 20px;
  line-height: 1.5;
}

.profile {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile h4 {
  margin: 0;
  font-size: 14px;
  font-weight: bold;
}

.profile span {
  font-size: 12px;
  color: #aaa;
}

.bottom-rating {
  margin-top: 40px;
}

.bottom-rating p {
  color: #aaa;
}

.bottom-rating h3 {
  font-size: 1.2rem;
  margin: 10px 0 0;
}

.bottom-rating span {
  color: #23e6c0;
  font-weight: bold;
}

/* Responsive */
@media (max-width: 992px) {
  .testimonial-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .testimonial-grid {
    grid-template-columns: 1fr;
  }
}
}


/* ------why us section */


@media all{
  .features-section {
  background: var(--dark-bg);
  text-align: center;
  padding: 80px 20px;  
  position: relative;
  color: var(--text-primary);
}

#features-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}


.features-section .feature-card {
  position: relative;
  z-index: 1;
}




.features-title {
  font-size: 2.7rem;
  color: var(--primary);
  margin-bottom: 1rem;
}

.features-subtitle {
  color: var(--text-secondary);
  font-size: 16px;
  max-width: 600px;
  margin: 0 auto 50px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.feature-card {
  background: var(--box-color);
  border-radius: 12px;
  padding: 20px;
  text-align: left;
  border: 2px solid transparent;
  transition: var(--transition-smooth);
}

.feature-card h3 {
  font-weight: 700;
  margin-bottom: 8px;
}

.feature-card p {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

/* Border colors */
.feature-card.green { border-color: var(--secondary); }
.feature-card.yellow { border-color: hsl(40, 90%, 55%); }
.feature-card.red { border-color: hsl(0, 90%, 60%); }
.feature-card.gray { border-color: hsl(220, 10%, 40%); }
.feature-card.blue { border-color: var(--primary); }
.feature-card.purple { border-color: var(--accent); }
.feature-card.orange { border-color: hsl(30, 100%, 50%); }   /* Bright orange */
.feature-card.teal { border-color: hsl(180, 60%, 45%); }     /* Teal/cyan */
.feature-card.pink { border-color: hsl(330, 70%, 55%); }     /* Soft pink */




/* Mobile: show first 4 features only */
@media (max-width: 640px) {
  .features-grid .feature-card:nth-child(n+5) {
    display: none; /* hide 5th and beyond */
  }
  .features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* Tablet: show first 6 features */
@media (min-width: 641px) and (max-width: 1024px) {
  .features-grid .feature-card:nth-child(n+7) {
    display: none; /* hide 7th and beyond */
  }
  .features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

/* Desktop: show all features */
@media (min-width: 1025px) {
  .features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}
}


/* ----about us section */
@media all {
.aboutus_section {
  background: var(--gradient-hero);
  padding: 60px 20px;
  text-align: center;
}

.aboutus_top {
  max-width: 800px;
  margin: 0 auto 50px;
}

.aboutus_top h1 {
  font-size: 3rem;
  color: var(--primary);
  margin-bottom: 1rem;
}

.aboutus_top p {
  color: var(--text-secondary);
  font-size: 1.2rem;
}

/* Info Blocks */
.aboutus_info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto 60px;
}

.info_block {
  background: var(--navbar-bg);
  padding: 25px;
  border-radius: 12px;
  box-shadow: var(--glow-primary);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.info_block h2 {
  color: var(--text-primary);
  margin-bottom: 15px;
  font-size: 1.5rem;
}

.info_block p {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.6;
}

.info_block:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

/* responsive */

/* Tablet (medium screens) */
@media (max-width: 992px) {
  .aboutus_info {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .aboutus_top h1 {
    font-size: 2.5rem;
  }

  .aboutus_top p {
    font-size: 1.1rem;
  }
}

/* Mobile (small screens) */
@media (max-width: 600px) {
  .aboutus_info {
    grid-template-columns: 1fr;
    gap: 15px;
    
  }

  .aboutus_top h1 {
    font-size: 2rem;
  }

  .aboutus_top p {
    font-size: 1rem;
  }

  .info_block {
    padding: 20px;
  }
}

}


/* Team Members */
@media all {

    /* Special 3D card wrapper */
    .special_card {
      display: flex;
      justify-content: center;
      margin-top: 50px;
    }

    /* 3D card */
    .card {
      width: 260px;
      height: 340px;
      perspective: 1000px;
    }

    .inner-card {
      width: 100%;
      height: 100%;
      border-radius: 20px;
      position: relative;
      transform-style: preserve-3d;
      transition: transform 0.9s ease;
      box-shadow: 0 0 25px rgba(0, 255, 255, 0.2);
    }

    .card:hover .inner-card {
      transform: rotateY(180deg);
      box-shadow: 0 0 35px rgba(0, 255, 255, 0.4);
    }

    .face {
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 20px;
      backface-visibility: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 20px;
      box-sizing: border-box;
    }

    .front {
      background: #121212;
    }

    .front img {
      width: 120px;
      height: 120px;
      object-fit: cover;
      border-radius: 50%;
      border: 3px solid cyan;
      margin-bottom: 15px;
    }

    .front h3 {
      margin: 10px 0 5px;
      font-size: 1.2rem;
    }

    .front p {
      color: #aaa;
      font-size: 0.95rem;
      text-align: center;
    }

    .back {
      background: #1a1a1a;
      transform: rotateY(180deg);
      text-align: center;
    }

    .back h3 {
      margin-bottom: 10px;
    }

    .social {
      display: flex;
      gap: 15px;
      justify-content: center;
      margin-top: 15px;
    }

    .social a {
      color: cyan;
      font-size: 22px;
      transition: color 0.3s;
      text-decoration: none;
    }

    .social a:hover {
      color: white;
    }

    /* Responsive grid */
    @media (max-width: 900px) {
      .team_grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 600px) {
      .team_grid {
        grid-template-columns: 1fr;
      }
      .card {
        width: 200px;
        height: 280px;
      }
    }
}

/* --------cta section */

@media all {
  .cta-section {
    background: var(--gradient-cyber); /* fallback dark background */
    text-align: center;
    padding: 80px 20px;
    color: #fff;
  }

  .cta-section h2 {
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .cta-section p {
    color: #bbb;
    font-size: 16px;
    margin-bottom: 25px;
  }

  .cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 20px;
  }

  .btn-primary {
    background-color: hsl(200 100% 60%);
    background-size: 300% 300%;
    color: #fff;
    align-content: center;
    padding: 12px 50px;
    border-radius: 2400px;
    text-decoration: none;
    font-weight: 600;
    transition: transform 0.2s;
    animation: gradientFlow 6s ease infinite;
    display: inline-block;
  }

  .btn-primary:hover {
    transform: translateY(-2px);
  }

  /* Gradient Border Button (secondary) */
  .btn-secondary {
    font-size: 18px;
    font-family: Arial, sans-serif;
    padding: 14px 50px;
    border: none;
    border-radius: 2400px;
    cursor: pointer;
    color: white;
    background: transparent;
    position: relative;
    z-index: 1;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
    text-decoration: none;
  }

.btn-secondary::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 2400px;
    padding: 3px;
    background: linear-gradient(90deg, #4f46e5, #3db7f4, #a855f7);
    background-size: 200% 100%;
    animation: gradientBorderLinear 3s linear infinite;

    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;

    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;

    z-index: -1;
    transition: opacity 0.3s ease;
}


  .btn-secondary:hover {
    transform: scale(1.01);
    background-color: var(--primary-dark, #23e6c0);
    color: #fff;
  }

  .btn-secondary:hover::before {
    opacity: 0;
  }

  @keyframes gradientBorderLinear {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  /* Responsive */
  @media (max-width: 992px) {
    .cta-buttons {
      flex-direction: column;
    }
    .cta-buttons a {
      width: 90%;
      text-align: center;
      margin: 0 auto;
    }
  }
}

@media all{
   .join-discord {
    width: 100%;
    background: linear-gradient(135deg, #5865f2, #3a45a1); /* Discord purple vibes */
    color: #fff;
    text-align: center;
    padding: 40px 20px;
  }

  .join-discord .join-container {
    max-width: 900px;
    margin: 0 auto;
  }

  .join-discord h2 {
    font-size: 2.5rem;
    margin-bottom: 15px;
  }

  .join-discord p {
    font-size: 1.1rem;
    margin-bottom: 30px;
    opacity: 0.9;
  }

  .discord-btn {
    display: inline-block;
    padding: 1rem 3rem;
    background: #fff;
    color:#4f46e5;
    font-size: 1.1rem;
    font-weight: 600;
border-radius: 8px; 

   text-decoration: none;
    transition: 0.3s ease;
  }

  .discord-btn:hover {
    color: rgb(255, 255, 255);
    background: rgb(148, 148, 236);
    transform: translateY(-3px);
  }

  @media (max-width: 600px) {
    .join-discord h2 {
      font-size: 2rem;
    }
    .discord-btn {
      width: 100%;
    }
  }
}

/* -------footer section start */