/* Container to center the button */
.sample-container {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 2rem 0; /* Less outside padding */
  }
  
  /* Main button style */
  .btn-sample {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1rem 3rem; /* More inside padding */
	overflow: hidden;
	background-size: 300% 300%;
	backdrop-filter: blur(1.5rem);
	border-radius: 5rem;
	transition: transform 0.5s, box-shadow 0.5s;
	animation: gradient_301 6s ease infinite;
	border: double 5px transparent;
	background-image: 
	  linear-gradient(#121212, #121212), 
	  linear-gradient(135deg, #ff9100, #ff6f00, #f9ff41, #ff1744);
	background-origin: border-box;
	background-clip: content-box, border-box;
	box-shadow: 0 0 25px rgba(255, 87, 34, 0.5);
	cursor: pointer;
  }
  
  .btn-sample:hover {
	transform: scale(1.12);
	box-shadow: 0 0 40px rgba(255, 111, 0, 0.7);
  }
  
  .btn-sample:active {
	border-color: #ff6f00;
	animation: none;
  }
  
  /* Text inside the button */
  .btn-sample strong {
	position: relative;
	z-index: 2;
	font-family: 'Poppins', sans-serif;
	font-size: 1.1rem;
	letter-spacing: 2.5px;
	color: #fff;
	text-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
	animation: textBreathe 3s ease-in-out infinite;
  }
  
  @keyframes textBreathe {
	0%, 100% {
	  transform: scale(1);
	  opacity: 1;
	}
	50% {
	  transform: scale(1.05);
	  opacity: 0.9;
	}
  }
  
  /* Glow container and circles */
  #glow {
	position: absolute;
	display: flex;
	width: 12rem;
	z-index: -1;
  }
  
  .circle {
	width: 100%;
	height: 30px;
	filter: blur(2rem);
	animation: pulse_3011 4s infinite;
	background: rgba(255, 94, 0, 0.9);
  }
  
  /* Stars background */
  #container-stars {
	position: absolute;
	z-index: -2;
	width: 100%;
	height: 100%;
	overflow: hidden;
	transition: 0.5s;
	backdrop-filter: blur(1rem);
	border-radius: 5rem;
  }
  
  .btn-sample:hover #container-stars {
	z-index: 1;
	background-color: #212121;
  }
  
  #stars {
	position: relative;
	background: transparent;
	width: 200rem;
	height: 200rem;
  }
  
  #stars::after {
	content: "";
	position: absolute;
	top: -10rem;
	left: -100rem;
	width: 100%;
	height: 100%;
	background-image: radial-gradient(#ffffff 1px, transparent 1%);
	background-size: 50px 50px;
	animation: animStarRotate 90s linear infinite;
  }
  
  #stars::before {
	content: "";
	position: absolute;
	top: 0;
	left: -50%;
	width: 170%;
	height: 500%;
	background-image: radial-gradient(#ffffff 1px, transparent 1%);
	background-size: 50px 50px;
	opacity: 0.5;
	animation: animStar 60s linear infinite;
  }
  
  /* Keyframes */
  @keyframes gradient_301 {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
  }
  
  @keyframes pulse_3011 {
	0% {
	  transform: scale(0.75);
	  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
	}
	70% {
	  transform: scale(1);
	  box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
	}
	100% {
	  transform: scale(0.75);
	  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}
  }
  
  @keyframes animStar {
	from { transform: translateY(0); }
	to { transform: translateY(-135rem); }
  }
  
  @keyframes animStarRotate {
	from { transform: rotate(360deg); }
	to { transform: rotate(0); }
  }

  /* How It Works Section */
.how-it-works {
    background: var(--surface-color);
    color: var(--text-color);
    text-align: center;
    padding: 20px 20px;
}

/* Grid Layout */
.how-it-works-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

/* Individual Cards */
.work-step {
    background: rgba(69, 69, 69, 0.2);
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
	min-height: 200px;
	display: flex; /* 👈 ADD this */
    flex-direction: column; /* 👈 ADD this */
    justify-content: center;
    align-items: center; /* 👈 ADD this */
    text-align: center;
}

/* Hover Effect */
.work-step:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Headings */
.work-step h3 {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: 10px;
}

/* Paragraphs */
.work-step p {
    font-size: 1rem;
    color: var(--secondary-text-color);
}

/* Mobile Responsive Layout */
@media (max-width: 768px) {
    .how-it-works-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .work-step {
        margin-bottom: 20px;
    }
}

/* Advantage Section */
.advantage {
    padding: 20px 20px;
    background: var(--surface-color);
    color: var(--text-color);
    text-align: center;
}

.advantage .h2 {
	margin-bottom: 0px;
}

/* Subheadline */
.advantage .subheadline {
    font-size: 1.2rem;
    color: var(--secondary-text-color);
    margin-bottom: 40px;
}

/* Stats Grid */
.stats-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 40px;
}

/* Individual Stat Card */
.stat {
    background: rgba(69, 69, 69, 0.2);
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    max-width: 200px;
    width: 100%;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Stat Circle */
.stat h3 {
    width: 100px;
    height: 100px;
    margin: 0 auto 15px auto;
    border: 3px solid var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: var(--primary-color);
	transition: transform 0.3s ease;
}

/* Stat Description */
.stat p {
    font-size: 1.25rem;
    color: var(--secondary-text-color);
}

/* Hover Effect */
.stat:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.stat:hover h3 {
	transform: scale(1.15);
	transition: transform 0.3s ease;
}

.ready-to-host {
    background: rgba(69, 69, 69, 0.2); /* Subtle card background */
    color: var(--text-color);
    padding: 40px 20px;
    border-radius: 12px;
    margin-top: 60px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Heading inside the card */
.ready-to-host h3 {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 20px;
}

/* Guarantee Text */
.ready-to-host .guarantee-text {
    font-size: 1.2rem;
    color: var(--secondary-text-color);
    margin-bottom: 30px;
}

@media (max-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr); /* 👉 2 columns at tablet size */
    }
}

@media (max-width: 600px) {
    .stats-grid {
        grid-template-columns: 1fr; /* 👉 Only 1 column on very small screens */
    }
}