@import url('/fonts/fonts.css');

:root {
	/* Primary Color */
	--next-primary: #0D3817;
	/* Secondary (Accent) Color */
	--next-secondary: #00D773;
	/* Tertiary Color */
	--next-tertiary: #8B634B;
	/* Accent (White) */
	--next-accent: #FFFFFF;
}

.bg-primary {
	background-color: var(--next-primary) !important;
}

.bg-secondary {
	background-color: var(--next-secondary) !important;
}

.bg-tertiary {
	background-color: var(--next-tertiary) !important;
}

.bg-accent {
	background-color: var(--next-accent) !important;
}

.txt-primary {
	color: var(--next-primary) !important;
}

.txt-secondary {
	color: var(--next-secondary) !important;
}

.txt-tertiary {
	color: var(--next-tertiary) !important;
}

.txt-accent {
	color: var(--next-accent) !important;
}

.fw-light {
	font-weight: 300 !important;
}

.fw-medium {
	font-weight: 500 !important;
}

.fw-semibold {
	font-weight: 600 !important;
}

.fw-bold {
	font-weight: 700 !important;
}

a {
	text-decoration: none;
}

html, body {
	overflow-x: hidden;
}

body, h1, h2, h3, h4, h5, h6, .btn {
	font-family: 'Poppins', Arial, sans-serif;
}

body {
	background-color: var(--next-primary) !important;
	background-image: url('/images/body-bg.jpg');
	background-position: center left;
	background-repeat: no-repeat;
	background-size: auto;
	background-attachment: fixed;
}

.main-container {
	padding: 0px;
	margin: 0px auto;
	max-width: 1920px;
}

.ct-container {
	padding: 70px;
	margin: 0px;
}

.fl-container {
	padding: 0px;
	margin: 0px;
}

.two-col-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	width: 100%;
}

.grid-col {
	padding: 0px;
	margin: 0px;
}

header {
	padding: 0px;
	margin: 0px;
}

.hero-section {
	padding: 0px;
	margin: 60px 0px;	
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10rem;
	width: 100%;
}


.hero-section h1 {
	font-size: clamp(1.7rem, 8vw, 85px);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.1;
	padding: 0;
	margin: 0;
	white-space: nowrap;
}

.hero-p {
	font-size: clamp(1rem, 4vw, 25px);
	font-weight: 200;
	line-height: 1.1;
	color: #fff;
	padding: 20px 0px;
}

.hero-image {
	background-image: url('/images/Next-Level_Hero-Photo.jpg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 35px;
	width: 100%;
	max-width: 1864px;
	aspect-ratio: 1864 / 547;
	margin: 70px auto 0px auto;
	/* Optional: Add min-width for very small screens if desired */
	/* min-width: 320px; */
}

.hero-photo {
	position: sticky;
	top: 0;
	height: 400px;
	background-image: url('/images/Next-Level_Hero-Photo.jpg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 20px;
	z-index: 1;
}

.hero-pg-button {
	white-space: nowrap;
	color: #fff;
	border: 2px solid var(--next-secondary);
	padding: 6px 14px;
	text-decoration: none;
	letter-spacing: 5px;
	font-size: 20px;
	font-weight: 500;
	transition: background-color 0.8s, border-color 0.8s, color 0.8s;
}

.hero-pg-button:hover {
	color: #fff;
	border: 2px solid var(--next-secondary);
	background-color: var(--next-secondary);
}

@keyframes arrow-bounce {
  	0%   { transform: translateY(0); }
  	40%  { transform: translateY(8px); }
  	60%  { transform: translateY(4px); }
  	80%  { transform: translateY(8px); }
  	100% { transform: translateY(0); }
}

.hero-pg-button .fa-arrow-down {
  	color: var(--next-secondary);
  	transition: color 0.8s;
  	will-change: transform;
}

.hero-pg-button:hover .fa-arrow-down {
  	color: #fff;
  	animation: arrow-bounce 0.8s;
}

.the-fold {
	margin: 80px 0px 0px 0px;
	text-align: left;
}

.the-fold h1 {
	font-size: clamp(1.7rem, 8vw, 85px);
}

.the-fold p {
	background-image: url('/images/asterisk.png');
	background-position: left middle;
	background-repeat: no-repeat;
	padding: 0px 400px 0px 130px;
	margin: 40px 0px 35px 0px;
	font-size: 25px;
	font-weight: 300;
	color: #fff;
}

.cs-container {
	background-color: #fff;
	padding: 0px;
	margin: 10px 0px;	
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0px;
	width: 100%;
}

.cs-image {
	background-image: url('/images/Next-Level_2nd-img.jpg');
	background-position: center right; 
	background-repeat: no-repeat;
	background-size: cover;
}
.cs-h1 {
	font-size: clamp(1.7rem, 8vw, 95px);
	color: var(--next-primary);
}
.cs-p {
	font-size: 26px;
	color: var(--next-primary);
	padding: 0px;
}

.cs-button {
	border: 2px solid var(--next-secondary);
	border-radius: 18px;
	margin: 14px auto;
	padding: 28px 0px;
	width: 800px;
	text-decoration: none;
	text-align: center;
	letter-spacing: 5px;
	font-weight: 600;
	display: inline-block;
	font-size: 20px;
	transition: 
		background-color 0.7s, 
		color 0.7s, 
		border-color 0.7s;
}

.cs-resume-button {
	background-color: #fff;
	color: var(--next-primary);
}

.cs-resume-button:hover {
	background-color: var(--next-secondary);
	color: #fff;
}

.cs-signup-button {
	background-color: var(--next-secondary);
	color: #fff;
}

.cs-signup-button:hover {
	border: 2px solid var(--next-primary);
	background-color: var(--next-primary);
}

footer {
	padding: 0px;
	margin: 0px;	
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 0px;
	width: 100%;
}
.footer-section {
	font-size: clamp(1rem, 4vw, 25px);
}
.footer-txt {
	font-size: clamp(1rem, 4vw, 30px);
	color: var(--next-secondary);
}

.footer-social {
	display: flex;
	gap: 1.2rem;
	align-items: center;
	margin-top: 12px;
	padding: 0px 0px 0px 20px;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;             /* Circle diameter */
  height: 48px;
  border-radius: 50%;
  background: #fff;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: box-shadow 0.3s, background 0.3s;
}

.footer-social a:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  background: #f5f5f5;
}

.footer-social i {
  color: var(--next-primary);    /* Or your accent color */
  font-size: 1.5rem;
  transition: color 0.3s;
}

.footer-social a:hover i {
  color: var(--next-secondary);  /* Or your hover color */
}


@media ( max-width : 1680px) {
	.ct-container {
		padding: 55px;
		margin: 0px;
	}
	.logo {
		height: 65px;
	}
	.hero-section {
		margin: 40px 0px;	
		gap: 7rem;
	}		
	.hero-section h1 {
		font-size: clamp(1.7rem, 8vw, 75px);
	}
	
	.hero-p {
		font-size: clamp(1rem, 4vw, 20px);
	}
	.hero-pg-button {
		font-size: 18px;
	}
	.the-fold h1 {
		font-size: clamp(1.7rem, 8vw, 75px);
	}
	.the-fold p {
		padding: 0px 400px 0px 130px;
		margin: 40px 0px 35px 0px;
	}	
	.cs-h1 {
		font-size: clamp(1.7rem, 8vw, 75px);
	}
	.cs-p {
		letter-spacing: 0.05rem;
		font-size: clamp(1rem, 4vw, 22px);
	}
	.cs-button {
		margin: 14px auto;
		padding: 20px 0px;
		width: clamp(320px, 80vw, 700px);
		font-size: clamp(1rem, 4vw, 15px);
	}
	.footer-section {
		font-size: clamp(1rem, 4vw, 20px);
	}
	.footer-txt {
		font-size: clamp(1rem, 4vw, 25px);
	}
}

@media (max-width: 1480px) { 
	.ct-container {
		padding: 40px;
		margin: 0px;
	}
	.logo {
		height: 55px;
	}
	.hero-section h1 {
		font-size: clamp(1.7rem, 8vw, 70px);
		letter-spacing: -0.2rem;
	}
	.the-fold h1 {
		font-size: clamp(1.7rem, 8vw, 65px);
	}	
	.the-fold p {
		background-size: 90px;
		font-size: clamp(1rem, 4vw, 20px);
	}		
	.cs-h1 {
		font-size: clamp(1.7rem, 8vw, 70px);
	}
	.cs-p {
		letter-spacing: 0.03rem;
		font-size: clamp(1rem, 4vw, 20px);
	}	
	.cs-button {
		width: clamp(320px, 80vw, 600px);
	}
	.footer-section {
		font-size: clamp(1rem, 4vw, 19px);
	}
	.footer-txt {
		font-size: clamp(1rem, 4vw, 22px);
	}	
}

@media (max-width: 1360px) {
	.hero-section {
		gap: clamp(1rem, 80vw, 3rem);	
	}
	.hero-section h1 {
		font-size: clamp(1.7rem, 8vw, 60px);
	}
	.hero-pg-button {
		font-size: 14px;
	}
	.the-fold h1 {
		font-size: clamp(1.7rem, 8vw, 55px);
	}
	.the-fold p {
		background-size: 80px;
		padding: 0px 10px 0px 100px;
		margin: 40px 0px 0px 0px;
		min-height: 110px;
	}	
}

@media (max-width: 1100px) {
	.hero-section {
		gap: clamp(1rem, 80vw, 2rem);	
	}
	.hero-section h1 {
		font-size: clamp(1.7rem, 8vw, 55px);
	}
	.the-fold h1 {
		font-size: clamp(1.7rem, 8vw, 50px);
	}
}

@media (max-width: 1040px) {
	.ct-container {
		padding: 20px;
		margin: 0px;
	}	
	.hero-section {
    	grid-template-columns: 1fr;
    	gap: 4rem;
  	}
	.hero-section h1 {
		font-size: clamp(1.7rem, 8vw, 75px);
	} 
	.hero-pg-button {
		font-size: clamp(1.7rem, 8vw, 6px);
	}
	.cs-container {
		grid-template-columns: 1fr;
	}	
	.cs-image {
		display: none;
	}
}

@media (max-width: 770px) {
	.hero-section {
		gap: 2rem;
	}
	.hero-section h1 {
		font-size: 80px;
	} 	
	.hero-p {
		font-size: 20px;
		padding: 5px 0px;
	}
	.hero-image {
		background-image: url('/images/Next-Level_Hero-Photo-Mobile.jpg');
		background-position: center center;
		border-radius: 20px;
		height: 300px;
		aspect-ratio: unset; 
		min-width: 320px;
	}	
	footer {
		grid-template-columns: 1fr;
	}		
}

@media (max-width: 650px) {
	.logo {
		height: unset;
		width: 325px;
	}
	.hero-section h1 {
		font-size: 40px;
	} 
  	.hero-pg-button {
  		font-size: 14px;
	    white-space: normal;
	    max-width: 95vw;
	    width: 100%;
	    display: inline-block;
	    box-sizing: border-box;
	    text-align: center;
	    padding-left: 10px;
	    padding-right: 10px;
  	}
}
@media ( min-width : 1921px) {
	body {
		background-size: cover;
	}
}