/* ================= Base Reset ================= */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Orbitron", sans-serif;
  background-color: var(--background);
  color: var(--text-color);
}

/* ================= Theme Variables ================= */
:root {
  /* -------- Light Mode -------- */
  --background: #ffffff;
  --text-color: #333;
  --header-bg: 
	linear-gradient(45deg, rgba(237, 237, 249, 0.7), rgba(252,243,243,0.85)),
	url("https://i.ibb.co/20bWfw9B/Copy-of-Blue-Modern-Futuristic-Technology-Presentation.jpg");
  --nav-link-color: #33357b;
  --nav-link-hover: blue;
  --nav-link-underline: #8e92f7;
  --hamburger-bar: #171616;
  --auth-btn-bg: #4b4c89;
  --auth-btn-hover: #3753d4;
  --dropdown-bg: #fff;
  --dropdown-border: #ddd;
  --dropdown-shadow: rgba(0,0,0,0.1);
  --dropdown-item-color: #333;
  --dropdown-hover: #f0f0f0;
  --dropdown-subtext: #888;
  --toggle-bg: #000007;
  --toggle-color: #afb3c7;

  /* Banner Light Mode Colors */
  --banner-bg-light: 
  url("https://i.ibb.co/PvgwpCK5/finallbg.png"),
     linear-gradient(135deg, rgba(8, 8, 8, 0.99), rgba(255, 255, 255, 0.05));

  --banner-text-light: #000105;
  --banner-slogan-light: var(--nav-link-color);
  --banner-line-light: linear-gradient(to right, #5ec1ff, #073aaf);
  --banner-text-shadow-light: 0 0 10px #2c07c0, 0 0 20px #f3f1fb;


  /* -------- Dark Mode -------- */
--banner-bg-dark: 
  radial-gradient(
    circle at center,
    rgba(60, 60, 255, 0.2),  
    rgba(25, 25, 25, 0.9),  
    rgba(0, 0, 0, 0.6)90%,
    rgba(0, 0, 0, 0.99)

  ),
  url("https://i.ibb.co/PvgwpCK5/finallbg.png");


  --banner-text-dark: rgb(236, 229, 229);
  --banner-slogan-dark: #fcfcffaa;
  --banner-line-dark: linear-gradient(to right, #0ef5e2, #aa8efc);
  --banner-text-shadow-dark: 0 0 10px rgb(2, 192, 240), 0 0 20px #290383;
  
  /* card Light Mode */
  --home-bg-light: linear-gradient(
	135deg,
	black,
	rgb(239, 242, 248),
	white,
	rgb(181, 165, 165)
  );

  --home-card-bg-light: 
	linear-gradient(
	  135deg,
	  rgba(236, 247, 255, 0.1),
	  rgba(151, 156, 156, 0.9),
	  rgba(167, 169, 171, 0.99),
	  rgba(116, 118, 118, 0.2)
	),
	url("https://i.ibb.co/3y8RJBwL/Copy-of-Blue-Modern-Futuristic-Technology-Presentation-1.png");

  --home-card-title-light: var(--form-color);
  --home-card-text-light: var(--nav-link-color);
  --home-card-btn-bg-light: #394447;
  --home-card-btn-text-light: rgb(189, 189, 232);

  /* Dark Mode */
  --home-bg-dark: linear-gradient(
	135deg,
	#050505,
	#0f1a1f,
	#161616,
	#1e1e2f
  );

  --home-card-bg-dark: 
	linear-gradient(
	  135deg,
	  rgba(40, 42, 55, 0.85),
	  rgba(20, 24, 30, 0.95),
	  rgba(18, 22, 28, 0.98)
	),
	url("https://i.ibb.co/20bWfw9B/Copy-of-Blue-Modern-Futuristic-Technology-Presentation.jpg");

  --home-card-title-dark: #c8c8ff;
  --home-card-text-dark: #d9d9e6;
  --home-card-btn-bg-dark: #22263a;
  --home-card-btn-text-dark: #f0f0ff;

  --section-bg: linear-gradient(135deg, rgba(28, 31, 40, 0.55), rgba(102, 117, 169, 0.55));
  --form-bg: rgba(128, 127, 131, 0.9);
  --form-color: #2a2a66;
  --input-bg: #c6d0dd;
  --input-shadow-dark: inset 6px 6px 12px rgba(150, 150, 200, 0.3);
  --input-shadow-light: inset -6px -6px 12px rgba(255, 255, 255, 0.7);
  --captcha-btn-bg: #dcdcf1;
  --captcha-btn-shadow-dark: 4px 4px 8px rgba(170, 170, 179, 0.3);
  --captcha-btn-shadow-light: -4px -4px 8px rgba(133, 122, 149, 0.2);
  --submit-bg: linear-gradient(145deg, #7e7ea5, #2b2d2d);
  --submit-color: #111;
  --link-color: #210c5c;
  --footer-bg:	linear-gradient(90deg, rgba(246, 249, 249, 0.4), rgba(103, 126, 151, 0.3)),
	url("https://i.ibb.co/fd970qyX/Blue-Modern-Futuristic-Technology-Presentation.jpg");
  --footer-link-color: #27275e;
  --footer-link-hover-gradient: linear-gradient(90deg, #84e156, #2d2b5b, #022b35);
  --made-by-color: #33357b;
  --made-by-gradient: linear-gradient(90deg, #0420bd, #38035f, #2302fb);
  --heart-color: rgb(246, 51, 13);
  --heart-shadow: 0 0 5px #3a1493;
  --footer-border-top-color:rgba(233,233,233,0.7);

  /* -------- Dark Mode -------- */

}


/* ================= Body Dark Mode Variables ================= */
body.dark {
  --background: #220000;
  --text-color: #e3e2ea;
  --header-bg: 
	radial-gradient(circle at 70% center, rgba(73,72,70,0.5) 0%, rgba(1,14,16,0.2) 30%, rgba(12,13,14,0.9) 100%),
	linear-gradient(45deg, rgb(0,0,0), rgba(4,26,28,0.8), rgba(0,6,6,0.9)),
	url("https://i.ibb.co/20bWfw9B/Copy-of-Blue-Modern-Futuristic-Technology-Presentation.jpg");
  --nav-link-color: white;
  --nav-link-hover: #4b4c89;
  --nav-link-underline: #86abd7;
  --hamburger-bar: #f5f5f5;
  --auth-btn-bg: rgb(38,38,131);
  --auth-btn-hover: #4b4c89;
  --dropdown-bg: #2a2a2a;
  --dropdown-border: #444;
  --dropdown-shadow: rgba(0,0,0,0.6);
  --dropdown-item-color: #f5f5f5;
  --dropdown-hover: #7a6f6f;
  --dropdown-subtext: #aaa;
  --toggle-bg: white;
  --toggle-bg-hover: rgb(143,152,110);
  --toggle-color: orange;
  --section-bg: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.6)),
	url("https://i.ibb.co/kVSx5r53/Copy-of-Blue-Modern-Futuristic-Technology-Presentation-6.png");
  --form-bg: rgba(1, 1, 12, 0.5);
  --form-color: #e0e0f0;
  --input-bg: #131322;
  --input-shadow-dark: inset 6px 6px 12px rgba(0, 0, 0, 0.5);
  --input-shadow-light: inset -6px -6px 12px rgba(100, 100, 150, 0.2);
  --captcha-btn-bg:  #49495a;
  --captcha-btn-shadow-dark: 4px 4px 8px rgba(0, 0, 0, 0.4);
  --captcha-btn-shadow-light: -4px -4px 8px rgba(255, 255, 255, 0.1);
  --submit-bg: linear-gradient(145deg, #837f8b, #412567);
  --submit-color: #fff;
  --link-color: #2c096c;
  --footer-bg: linear-gradient(135deg, rgba(0, 17, 17, 0.8), rgba(1, 7, 14, 0.99)),
	url("https://i.ibb.co/fd970qyX/Blue-Modern-Futuristic-Technology-Presentation.jpg");
  --footer-link-color: #c2c2c7;
  --footer-link-hover-gradient: linear-gradient(90deg, #5fff84, #a36eff, #03fffb);
  --made-by-color: #c3c3c5;
  --made-by-gradient: linear-gradient(90deg, #6b42ff, #0fb2ff, #ff4ea1);
  --heart-color: #ff4747;
  --heart-shadow: 0 0 5px #ff9a00;
}

/* ================= Dark Mode Toggle Button ================= */
.dark-mode-toggle {
  background: var(--toggle-bg);
  color: var(--toggle-color);
  border-radius: 50%;
  border: 1px solid gray;
  width: 5vmin;
  height: 5vmin;
  font-size: 4vmin;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 75%;
  left: 1%;
  transition: all 0.3s ease;
}

.dark-mode-toggle:hover {
  background: var(--toggle-bg-hover);
  transform: scale(1.1);
}

/* ================= Header Styling ================= */

.wb-home-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  height: 60px;
  background: var(--header-bg);
  background-size: cover;
  background-position: center;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.wb-home-header .logo img {
   width: 100px;
}

.wb-home-header .right-side {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.wb-home-header .nav-links {
  display: flex;
  gap: 2rem;
}

.wb-home-header .nav-links a {
  text-decoration: none;
  color: var(--nav-link-color);
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.wb-home-header .nav-links a:hover {
  color: var(--nav-link-hover);
}

.wb-home-header .nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--nav-link-underline);
  transform: scaleX(0);
  transition: transform 0.25s ease-out;
  transform-origin: bottom right;
}

.wb-home-header .nav-links a:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* ================= Hamburger Icon ================= */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 25px;
  height: 18px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1100;
}

.hamburger span {
  height: 3px;
  width: 100%;
  background-color: var(--hamburger-bar);
  border-radius: 2px;
  transition: all 0.3s ease;
}

.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
  color: red;
}

/* ================= Mobile Responsive ================= */
@media (max-width: 768px) {
  .wb-home-header .right-side {
	flex-direction: row; 
	justify-content: space-around;
	width: 100%;
	max-height: 0;
	overflow: hidden;
	gap: 1rem;
	background: var(--header-bg);
	background-position: center;
	background-size: cover;
	position: absolute;
	top: 100%;
	left: 0;
	padding: 0 2rem; 
	border-top: 2px dotted #86abd7;
	border-bottom: 2px dotted #86abd7;
	transform: translateY(-20px); 
	opacity: 0;
	transition: all 0.3s ease;
  }

.dark-mode-toggle {
	width: 5vmin;
	height: 5vmin;
	font-size: 5vmin;

}

.wb-home-header .right-side.open {
	display: flex;
	max-height: 500px; 
	transform: translateY(0); 
	opacity: 1;
	padding: 1rem 2rem;
}

  .wb-home-header .nav-links {
	flex-direction: column;
	gap: 1rem;
	width: 30%;
	background: transparent;
	position: relative;
	padding: 0;
 }

  .wb-home-header .nav-links a::after {
	 display: none;
  }

  .hamburger {
	display: flex;
  }
}

@media (max-width: 468px) {
	.dark-mode-toggle {
		width: 6.5vmin;
		height: 6.5vmin;
		font-size: 5vmin;

	}
}

/* ================= Auth Navigation ================= */
.wb-home-auth-nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.wb-home-auth-nav .login-buttons {
 display: flex;
 gap: 2vmin;
 margin-right: 2vmin;
}

.wb-home-auth-nav .btn {
  padding: 0.3vmin 1rem;
  background: var(--auth-btn-bg);
  color: #fff;
  border: none;
  border-radius: 1vmin;
  text-decoration: none;
  font-size: 0.9rem;
  transition: background 0.3s;
}

.wb-home-auth-nav .btn:hover {
  background: var(--auth-btn-hover);
}

/* Profile dropdown */
.wb-home-auth-nav .profile-button {
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 50%;
  overflow: hidden;
  padding: 0;
}

.wb-home-auth-nav .dropdown {
  position: relative;
}

.wb-home-auth-nav .dropdown-menu {
  position: absolute;
  top: 120%;
  right: 0;
  background: var(--dropdown-bg);
  border: 1px solid var(--dropdown-border);
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px var(--dropdown-shadow);
  min-width: 180px;
  z-index: 10;
  display: flex;
  flex-direction: column;
}

.wb-home-auth-nav .dropdown-menu .dropdown-item {
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  color: var(--dropdown-item-color);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.wb-home-auth-nav .dropdown-menu .dropdown-item:hover {
  background: var(--dropdown-hover);
}

.wb-home-auth-nav .dropdown-menu .name {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.wb-home-auth-nav .dropdown-menu .name .sub {
  color: var(--dropdown-subtext);
  font-size: 0.8rem;
}

.wb-home-auth-nav .dropdown-menu hr {
  margin: 0.5rem 0;
  border: none;
  border-top: 1px solid #eee;
}

/* Background with animated particles / gradient *//* ================= Banner Styles ================= */
.particles {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0; left: 0;
  background: transparent;
  z-index: -1;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #02606d;
  border-radius: 50%;
  animation: float 10s linear infinite;
  opacity: 0.7;
}

@keyframes float {
  0% { transform: translateY(100vh) translateX(0) rotate(0deg); }
  100% { transform: translateY(-10vh) translateX(50vw) rotate(360deg); }
}

.wb-banner {
  position: relative;		  
  overflow: hidden;
  height: 100vh;
}

.wb-banner::before {
  content: "";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  background:var(--banner-bg-light);
  background-size: cover;
  z-index: -2;
}

/* Dark Mode */
.dark .wb-banner::before {
    background: var(--banner-bg-dark);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: start;
}
/* Logo & Banner Text */

.wb-banner__content{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 100vh;
 
}

.wb-banner__logo__img {
	width: 350px;

}

.wb-banner__text {
  font-size: 8vmin;
  font-weight: 700;
  text-shadow:var(--banner-text-shadow-light);
  color: var(--banner-text-light);
  margin-top: 2vmin;
}

.dark .wb-banner__text {
  color: var(--banner-text-dark);
  text-shadow:var(--banner-text-shadow-dark);
}

.wb-banner__content hr {
  width: 50%;		 
  margin: 0.5vmin auto;   
  border: none;		 
  height: 2px;	  
  background:var(--banner-line-light);
  border-radius: 1px;
}

.dark .wb-banner__content hr {
  background: var(--banner-line-dark);
}


.wb-banner__slogan {
  font-size: 4vmin;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--banner-slogan-light);
  font-weight: 500;
}

.dark .wb-banner__slogan {
  color: var(--banner-slogan-dark);
}

.spread {
	height: 21vmin;
	position: absolute;
	z-index: 1;
}

/* duplicate behind main image */
.spread.duplicate {
  position: absolute;
  transform: scale(1.05);
  filter: blur(1px);
  opacity: 0.45;
  z-index: 0;
  pointer-events: none;
}

.playground {
  position: relative;
  background: lime;
}
/* individual offsets for duplicates */
.wb-banner__memory__img.duplicate {
  top: calc(40% + 15px);
  right: calc(1% + 15px);
  transform: translateX(-50%) scale(1.05);
}

.wb-banner__memory__img {
	top: 40%;
	right: 1%;
	transform: translateX(-50%);
}

.wb-banner__maximus__img.duplicate {
  top: calc(10% + 13px);
  right: calc(15% + 13px);
}

.wb-banner__maximus__img {
	top: 10%;
	right: 15%;
   
}

.wb-banner__quiz__img.duplicate {
  top: calc(20% + 10px);
  right: calc(8% - 10px);
}

.wb-banner__quiz__img {
	top: 20%;
	right: 8%;
  
}

.wb-banner__grotto__img.duplicate {
  top: calc(68% + 13px);
  right: calc(20% - 13px);
}

.wb-banner__grotto__img {
	top: 68%;
	right: 20%;
}

.wb-banner__code__img.duplicate {
  top: calc(50% + 10px);
  right: calc(5% - 10px);
}
.wb-banner__code__img {
	top: 50%;
	right: 5%;
}

.wb-banner__gemoku__img.duplicate {
  top: calc(66% + 10px);
  right: calc(10% + 10px);
}

.wb-banner__gemoku__img {
	top: 66%;
	right: 10%; 
}

/*Wb banner responsive  */

@media (max-width:768px) {
	.wb-banner__logo__img {
		width: 300px;	   
	   
	}

	.wb-banner__text {
		font-size: 4vmin;
		margin-top: 2.1vmin;
		margin-bottom: 0;
	}

	.wb-banner__slogan {
		font-size: 3vmin;  
	}

	.spread {
		height: 18vmin;
		position: absolute;
		z-index: 1;
	}

	.spread.duplicate {
		position: absolute;
		transform: scale(1.05);
		filter: blur(-4px);
		opacity: 0.45;
		z-index: 0;
		pointer-events: none;
	}

	.wb-banner__memory__img.duplicate {
		top: calc(75% + 10px);
		right: calc(7% + 10px);
		transform: translateX(-50%) scale(1.05);
	}

	.wb-banner__memory__img {
		top: 75%;
		right: 7%;
		transform: translateX(-50%);
	}

	.wb-banner__maximus__img.duplicate {
		top: calc(80% + 10px);
		right: calc(6% + 10px);
		
	}

	.wb-banner__maximus__img {
		top: 80%;
		right: 6%;
	}

	.wb-banner__grotto__img.duplicate {
		top: calc(42% + 10px);
		right: calc(4% - 10px);
	}

	.wb-banner__grotto__img {
		top: 42%;
		right: 4%;
	}

	.wb-banner__quiz__img.duplicate {
		top: calc(60% + 10px);
		right: calc(10% - 10px);
	}

	.wb-banner__quiz__img {
		top: 60%;
		right: 10%;
	}

	.wb-banner__code__img.duplicate {
		top: calc(70% + 10px);
		right: calc(3% - 10px);
	}
	.wb-banner__code__img {
		top: 70%;
		right: 3%;
	}

	.wb-banner__gemoku__img.duplicate {
		top: calc(70% + 10px);
		right: calc(17% + 10px);
	}

	.wb-banner__gemoku__img {
		top: 70%;
		right: 17%; 
	}

}

@media (max-width:480px) {

  .dark .wb-banner::before {
    background:radial-gradient(
    circle at center,
    rgba(0, 0, 15, 0.9),  
    rgba(25, 25, 25, 0.9),  
    rgba(0, 0, 0, 0.6),
    rgba(0, 0, 0, 0.99)

  ),
  url("https://i.ibb.co/PvgwpCK5/finallbg.png");
  background-size: cover;
  background-repeat: no-repeat

;
  }

	.wb-banner__content{
		top: 9%;
    position: absolute;
    height: 50%;
    left: 20%;

	}

	.wb-banner__logo__img {
		width: 230px;		    
	}

	.wb-banner__text {
		font-size: 5vmin;
    margin-top: 2px;

	}

	.wb-banner__slogan {
		font-size: 3vmin;   
	}

	.spread {
		height: 15vmin;
		position: absolute;
		z-index: 1;
	}

	.spread.duplicate {
		position: absolute;
		transform: scale(1.05);
		filter: blur(1px);
		opacity: 0.45;
		z-index: 0;
		pointer-events: none;
	}

	.wb-banner__memory__img.duplicate {
		top: calc(66% + 10px);
		right: calc(25% + 10px);
		transform: translateX(-50%) scale(1.05);
	}

	.wb-banner__memory__img {
		top: 66%;
		right: 25%;
		transform: translateX(-50%);
	}

	.wb-banner__maximus__img.duplicate {
		top: calc(78% + 10px);
		left: calc(22% + 10px);
		
	}

	.wb-banner__maximus__img {
		top: 78%;
		left: 22%;
	}

	.wb-banner__grotto__img.duplicate {
		top: calc(58% + 10px);
		right: calc(20% - 10px);
	}

	.wb-banner__grotto__img {
		top: 58%;
		right: 20%;
	}

	.wb-banner__quiz__img.duplicate {
		top: calc(83% + 10px);
		right: calc(42% - 10px);
	}

	.wb-banner__quiz__img {
		top: 83%;
		right: 42%;
	}


	.wb-banner__code__img.duplicate {
		top: calc(60% + 10px);
		left: calc(15% - 10px);
	}
	.wb-banner__code__img {
		top: 60%;
		left: 15%;
	}

	.wb-banner__gemoku__img.duplicate {
		top: calc(74% + 10px);
		right: calc(14% + 10px);
	}

	.wb-banner__gemoku__img {
		top: 74%;
		right: 14%; 
	}

}


/* ================= Home Section ================= */
.wb-home-content {
  padding: 3rem 2rem;
  background: var(--home-bg-light);
  position: relative;
}

.dark .wb-home-content {
  background: var(--home-bg-dark);
}

/* Section Title */
.wb-home-section-title {
  text-align: center;
  font-size: 2.5rem;
  margin: 0 0 7vmin 0;
  font-weight: 600;
  color: var(--form-color);
}

/* ================= Home Cards ================= */
.wb-home-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 300px));
  gap: 2rem;
  justify-content: center;
}

.wb-home-card {
  background: var(--home-card-bg-light);
  background-position: center;
  background-size: cover;
  border-radius: 20px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--home-card-text-light);
  border: none;
  box-shadow: 
	8px 8px 16px rgba(87, 101, 103, 0.8),  
	-8px -8px 16px rgba(90, 87, 100, 0.7);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dark .wb-home-card {
  background: var(--home-card-bg-dark);
  color: var(--home-card-text-dark);
  box-shadow: 
	8px 8px 16px rgba(10, 10, 15, 0.8),
	-8px -8px 16px rgba(25, 25, 40, 0.7);
}

.wb-home-card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow:
	12px 12px 20px rgba(52, 61, 77, 0.8),
	-12px -12px 20px rgba(62, 61, 88, 0.7);
}

@media (max-width:460px) {
  .wb-home-cards {
	grid-template-columns: repeat(1, minmax(400px, 450px));

}
}
/* ================= Card Title & Text ================= */
.wb-home-card-title {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  font-weight: 700;
  color: var(--home-card-title-light);
}
.dark .wb-home-card-title {
  color: var(--home-card-title-dark);
}

.wb-home-card-text {
  flex-grow: 1;
  line-height: 1.5;
}

/* ================= Card Button ================= */
.wb-home-card-button {
  margin-top: 1rem;
  padding: 0.75rem 1.5rem;
  background: var(--home-card-btn-bg-light);
  color: var(--home-card-btn-text-light);
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  border-radius: 8px 3px 14px 0;
  box-shadow: 
	4px 4px 6px #01161a,
	-4px -4px 6px #010813;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dark .wb-home-card-button {
  background: var(--home-card-btn-bg-dark);
  color: var(--home-card-btn-text-dark);
  box-shadow: 
	4px 4px 6px #0a0a1a,
	-4px -4px 6px #0e0e22;
}

.wb-home-card-button:hover {
  transform: translateY(-3px);
  background: #323464;
}


/* ========================
   Join Us Section 
======================== */

/*  Section Layout */
.wb-home-sign-up {
  margin-top: 4rem; 
  display: flex;
  gap: 2rem;
  justify-content: center;
  width: 100%;
  background: var(--section-bg);
  background-size: cover;
  background-position: center;
  padding: 3rem 1rem;
  border-radius: 1rem;
}

.wb-home-sign-up-form {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0; 
}

.form-p {
  font-weight: 700;
  font-size: clamp(24px, 2vmin, 18px);
  color: var(--form-color);
  writing-mode: vertical-rl;  
  text-orientation: mixed;
  margin-right: 0.5rem;
  flex-shrink: 0;
}


/* Form Card */
.wb-home-register {
  background: var(--form-bg);
  padding: 2rem;
  border-radius: 2vmin;
  max-width: 500px;
  margin: 0 auto;
  box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.4), -8px -8px 16px rgba(255, 255, 255, 0.1);
  font-family: "Orbitron", sans-serif;
  color: var(--form-color);
  transition: all 0.3s ease;
}

.wb-home-register__title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 1.5rem;
}

/*  Alert */
.wb-home-register__alert {
  background: rgba(255, 100, 100, 0.2);
  color: #ff3333;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  margin-bottom: 1rem;
  text-align: center;
}

/* Inputs */
.wb-home-register__form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.wb-home-register__input,
.wb-home-register__input-password {
  padding: 0.75rem 1rem;
  border-radius: 12px;
  border: none;
  background: var(--input-bg);
  box-shadow: var(--input-shadow-dark), var(--input-shadow-light);
  font-size: 1rem;
  width: 100%;
  color: inherit;
}

/*  Captcha */
.wb-home-register__captcha {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.wb-home-register__captcha img {
  height: 50px;
}

.wb-home-register__captcha-refresh {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: none;
  background: var(--captcha-btn-bg);
  box-shadow: 
	var(--captcha-btn-shadow-dark),
	var(--captcha-btn-shadow-light);
  cursor: pointer;
  font-weight: bold;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease;
}

.wb-home-register__captcha-refresh:hover {
  transform: translateY(-2px);
  box-shadow: 
	6px 6px 12px var(--captcha-btn-shadow-dark),
	-6px -6px 12px var(--captcha-btn-shadow-light);
}

/* Submit */
.wb-home-register__submit {
  padding: 0.75rem;
  border-radius: 15px;
  border: none;
  background: var(--submit-bg);
  color: var(--submit-color);
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wb-home-register__submit:hover {
  transform: translateY(-3px);
  box-shadow: 6px 6px 12px rgba(0, 200, 255, 0.6), 
			  -6px -6px 12px rgba(200, 255, 255, 0.7);
}

/* Extra Links */
.wb-home-register__text {
  text-align: center;
  margin-top: 1rem;
}

.wb-home-register__link {
  background: none;
  border: none;
  color: var(--link-color);
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
}

@media (max-width: 768px) {
  .wb-home-sign-up {
	flex-direction: column;
	padding: 2rem 1rem;

  }

  .wb-home-register__title {
	font-size: 1.75rem;
  }

  .wb-home-register__input,
  .wb-home-register__input-password {
	font-size: 0.95rem;
	padding:3vmin 1vmin;
	border-radius: 7px;
  }

  .wb-home-register__submit {
	padding: 0.65rem;
	font-size: 0.95rem;
  }

  .form-p {
    font-size: 4.5vmin;
    margin-bottom: 3vmin;
  }
}

@media (max-width: 480px) {
  .wb-home-register {
    padding: 1.7rem;
    border-radius: 2vmin;
  }

  .wb-home-register__text {
    text-align: center;
    margin-top:2vmin ;
    font-size: 3vmin;
  }
  
  .wb-home-register__input,
  .wb-home-register__input-password {
    font-size: 0.95rem;
    padding: 0.3rem 0.3rem;
    border-radius: 7px;
  }

  .wb-home-register__title {
	font-size: 1.5rem;
  }

  .wb-home-register__submit {
	padding: 0.3rem 0.3rem;
	font-size: 0.9rem;
	border-radius:2vmin;
  }

  .form-p {
	font-size: 4vmin;
	margin-bottom: 5vmin;
  }
}


/* wb home footer section */

.wb-home-footer {
  position: relative;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  text-align: center;
  padding:3vmin 0 2vmin 0;
  background:var(--footer-bg);
  background-size: cover;
  background-position: start;
  border-top:  var(--footer-border-top-color);
  border-bottom: 2px dotted  rgb(117, 161, 250);

}

/* ===== Particles Canvas ===== */
.footer-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  pointer-events: none;
}

/* ===== Footer Links ===== */
.wb-home-footer .footer-links {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 1rem;
  position: relative;
  z-index: 1;

}


.wb-home-footer a {
  text-decoration: none;
  transition: all 0.3s ease;
  border-radius: 0.2vmin 0.9vmin;
  color: var(--footer-link-color);
  position: relative;
  z-index: 1;
  padding: 0.3vmin 0.5vmin;
  
}

.wb-home-footer a:hover {
  transform: translateY(-3px) scale(1.1);
  background: var(--footer-link-hover-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 3px 3px 6px rgba(0,0,0,0.5), 1px 1px 2px rgba(0,0,0,0.3);
}


.wb-made-by {
  color: var(--made-by-color);
  font-weight: bolder;
  margin: 2vmin 0 2vmin 0;
}

.wb-made-by b {
  background:var(--nav-link-color);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 6vmin;
}


@keyframes heartbeat {
  0%, 40%, 100% { transform: scale(1); }
  20%, 60% { transform: scale(1.2); }
}

.red-heart {
  margin: 0 0.2rem;
  color: red;
  font-size: 1.3rem;
  vertical-align: middle;
  text-shadow: 2px 2px 5px blue;
  animation: heartbeat 1.3s infinite;
}