@font-face{
	font-family:'inter';
	src:url(fonts/inter/inter.ttf);
}

@font-face{
	font-family:'interbold18';
	src:url(fonts/inter/static/interbold18.ttf);
}

body {
	margin:0;
	padding:0;
	font-family:'inter';
	font-weight:normal;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	align-content:center;
}

a{
	text-decoration:none;
	color:rgb(255,255,255);
}

nav {
	color:white;
	font-size:1rem;
	font-weight:bold;
	display:flex;
	flex-direction:row;
	justify-content:flex-end;
	align-items:center;
	gap:1rem;
	width:90%;
	
	background-color:transparent;

}

#nav2{
	color:white;
	font-size:1rem;
	font-weight:bold;
	display:flex;
	flex-direction:row;
	justify-content:flex-end;
	align-items:center;
	gap:1rem;
	width:90%;
	
	background-color:transparent;
}

#hamburger-icon{
	width:1.5rem;
}

#hamburger-element{
	display:flex;

}

#xbtn-element{
	display:flex;
}

#xbtn{
	width:1.5rem;
}

#nav-div{
	width:100%;
	background-color:rgb(0, 0, 0);
	display:flex;
	justify-content:center;
	padding-top:0.5rem;
	padding-bottom:0.5rem;
	position: sticky;
	top: 0;
	z-index: 1000;
}

#nav-div2{
	width:100%;
	height:3rem;
	background-image: linear-gradient(to top left, rgb(8,46,0), rgb(17,103,0));
	display:flex;
	justify-content:center;
	padding-top:0.5rem;
	padding-bottom:0.5rem;
	position: sticky;
	top: 0;
	z-index: 1000;

}


.logo{
	margin-right:auto;
	font-size:1.25rem;
}

#poster-div{
	background-image: url("rfxbg.png");
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	aling-content:center;
	width:100%;
	background-repeat: no-repeat;
	background-size: cover;
	padding-bottom:1.5rem;

}

#poster-section1{
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	aling-content:center;
	width:90%;

}

#poster-img{
	width:90%;
	max-width:25rem;
	border-radius:1rem;
	margin-top:2.5rem;
	margin-bottom:3rem;
}

#poster-text{
	margin-top:5rem;
	color:rgb(255, 255, 255);
	
}

#poster-title{
	font-family:interbold18;
	font-size:bold;
	font-size:2rem;
}

#poster-desc{
	font-size:0.9rem;
	margin-top:1rem;
	color:rgb(255, 255 ,255);
	width:90%;
	max-width:25rem;
}




.posterbtn{
	margin-top:2rem;

	width:20rem;
	font-weight:bold;
	font-size:1rem;
	color:rgb(0, 0, 0);
	padding:0.5rem;
	border-radius:1.5rem;
	text-align:center;
	background-color:rgb(255, 255, 255);
	

}

.stepsbtn{
	margin-top:	1.5rem;
	padding:0.5rem;
	width:21rem;
	font-weight:bold;
	font-size:1rem;
	color:rgb(255, 255, 255);
	
	border-radius:1.5rem;
	text-align:center;
	background-color:rgb(17,103,0);
}

#ima{
	margin-top:3rem;
	font-size:2rem;
	font-weight:bold;
	color:rgb(255, 255, 255);
}

#btncontainer{
	margin-top:0.5rem;
	display:flex;
	justify-content:center;
	gap:1.5rem;
}

#steps-container{
	margin-top:1.5rem;
	
	width:20rem;
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
	align-items:flex-start;
	align-content:center;
	gap:0.75rem;
}

.divtitles{
	margin-top:2rem;
	font-size:1.5rem;
	font-weight:bold;
	text-align:center;
}

.stepnum{
	font-size:1.25rem;
	background-color:rgb(17,103,0);
	color:rgb(255, 255, 255);
	border-radius:50%;
	width:2rem;
	height:2rem;
	display:flex;
	justify-content:center;
	align-items:center;
	align-content:center;
}

.stepdesc{
	font-size:1rem;
	color:rgb(0, 0, 0);
}

.step-div{
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	align-content:center;
	gap:1rem;
	
}

#steps-section{
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	align-content:center;


}

#details-container{
	background-color:rgb(225, 255, 219);
	margin-top:2rem;
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
	align-items:center;
	align-content:center;
	padding-bottom:2rem;
	width:100%;
	

}

#list-container{
	width:90%;
	max-width:25rem;
	display:flex;
	justify-content:space-between;
	
	margin-top:2rem;


}

#divtitles-container{
	width:90%;

}


.list-div{
	
}

.details-link{
	color:rgb(17,103,0);
	font-size:0.9rem;
	text-decoration: underline;
}

#details-link-container{
	margin-top:0.5rem;
	width:90%;
	max-width:25rem;
}

.list-item{
	margin-bottom:0.5rem;
	display:flex;
	justify-content:flex-start;
	align-items:center;
	align-content:center;
	gap:0.5rem;
	font-size:0.9rem;
}

.listdot{
	width:0.5rem;
}

.stat-text{
	font-size:0.9rem;
	color:rgba(255, 255 ,255, 0.85);
}

.divtitles-stats{
	
	font-size:1.5rem;
	font-weight:bold;
	text-align:center;
	color:rgb(255,255,255);
}

#stats-div{
	background-image: linear-gradient(to top left, rgb(8,46,0), rgb(17,103,0));
	padding-top:2rem;
	padding-bottom:2rem;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	align-content:center;
	width:100%;
	
}

#statstitle{
	margin-bottom:1.5rem;
}

#stats-div2{
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	align-content:center;
	gap:1.5rem;

}

.stats-item{
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	align-content:center;

}

.stat-num{
	color:rgb(255, 255, 255);
	font-size:2rem;
	font-weight:bold;

}

#pricing-div{
	
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	align-content:center;
	padding-bottom:2rem;
	width:100%;
	gap:1rem;
}

.plan-container{
	margin-top:1rem;
	width:90%;
	max-width:30rem;
	border-radius:1rem;
	border:1px solid rgb(202,216,200);
	background-color:rgb(245, 255, 243);
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
	align-items:flex-start;
	align-content:flex-start;
	padding-bottom:1rem;
	
	

}

.plan-title{
	font-size:0.9rem;
	font-weight:bold;
	padding:1rem;
	padding-bottom:0.5rem;

}

.plan-price{
	font-size:2rem;
	font-weight:bold;
	color:rgb(17,103,0);
	padding-left:1rem;
	

}

.plan-price2{
	color:rgb(17,103,0);
	font-size:0.9rem;
}

.plan-desc{
	font-size:0.9rem;
	padding:1rem;
}

#disclaimer{
	font-size:0.8rem;
	font-style:italic;
	padding:1rem;	
}

.plan-desc2{
	font-size:0.9rem;
	padding-left:1rem;
}

.price-container{
	display:flex;
	flex-direction:row;
	justify-content:flex-start;
	align-items:center;
	align-content:flex-start;
	gap:0.5rem;
	margin-bottom:rem;
	
	width:100%;
	padding-bottom:0.5rem;
}

.select-plan{
	
	background-color:rgb(17,103,0);
	border-radius:1.5rem;
	padding:0.5rem;
	width:7rem;
	color:rgb(255, 255, 255);
	font-weight:bold;
	margin-left:1rem;
	margin-top:1rem;
	text-align:center;
}

.plan-desc-container{
	display:flex;
	justify-content:space-between;

	margin:1rem;
}

.plan-desc-container2{
	display:flex;
	justify-content:space-between;
	margin-top:1rem;
	margin-left:1rem;
}

.plan-desc-container3{
	display:flex;
	justify-content:space-between;

	margin-left:1rem;
}


#about-div{
	background-image: linear-gradient(to top left, rgb(8,46,0), rgb(17,103,0));
	padding-top:2rem;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	align-content:center;
	padding-bottom:2rem;
	width:100%;
	gap:1.5rem;
}

#about-desc{
	font-size:0.9rem;
	width:90%;
	color:rgba(255, 255 ,255, 0.85);


}

.portrait-img{
	width:6rem;
	border:1px solid rgb(17,103,0);
}

.port-name{
	font-size:1rem;
	font-weight:bold;

}

.port-title{
	font-size:0.9rem;
	
	text-align:center;
}





.port-div-container{
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	align-content:center;
	width:90%;
	
	

}

#meet-div{
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	align-content:center;
	width:100%;
	padding-bottom:3rem;
}

.portraits-div{
	display:flex;
	flex-direction:row;
	justify-content:space-around;
	align-items:center;
	align-content:center;
	
	width:100%;

}

#portraits-div1{
	margin-top:2rem;

}

.portrait-item{
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
	align-items:center;
	align-content:flex-start;
	gap:0.5rem;
	
	width:8rem;
	height:15rem;
}

#contact-div{
	background-image: linear-gradient(to top left, rgb(0,0,0), rgb(20,20,20));
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	align-content:center;
	padding-bottom:2rem;
	width:100%;
}

#contact-desc{
	font-size:0.9rem;
	margin-top:2rem;
	width:90%;
	color:rgb(255, 255 ,255);
}

#divtitles-contact{
	color:rgb(255, 255, 255);
}

footer{
	background-color:rgb(17,103,0);
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	align-content:center;
	gap:1rem;
	padding-top:1rem;
	padding-bottom:1rem;
	width:100%;
}

.footer-text{
	font-size:0.9rem;
	color:rgb(255, 255 ,255);
}

.footer-policies{
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	align-content:center;
	gap:1.5rem;
}

.footer-link{
	font-size:0.9rem;
	color:rgb(255, 255 ,255);
	text-decoration: underline;
}

#hamburger-menu{
	
	flex-direction:column;
	justify-content:flex-start;
	align-items:flex-start;
	align-content:flex-start;
	width:100%;	

}

.ham-item{
	width:100%;	
	height:3.5rem;
	border-bottom:1px solid rgb(202,216,200);
	color:rgb(17,103,0);
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	align-content:center;
	cursor:pointer;

}

.mobilenav-link{
	width:100%;
}

#ham-x{
	width:1.25rem;
}

#ham-top{
	display:flex;
	flex-direction:row;

}

.bignav-item{
	display:none;
	cursor:pointer;
}



#stepsbtnid{
	cursor:pointer;

}

#posterbtnid{
	cursor:pointer;
}









@media (min-width: 768px) {


	#list-container{
		max-width:35rem;
	}

	.bignav-item{
		display:block;
		color:rgb(255, 255 ,255);
		font-weight:bold;
		font-size:1.15rem;
	}

	.logo{
		font-size:1.4rem;
	}

	nav{
		gap:3rem;
		width:95%;
	}

	#nav-div{
		height:3rem;
	}

	#hamburger-element{
		display:none;
	}

	#poster-div{
		height:30rem;
		display:flex;
		flex-direction:row;

		justify-content:center;
		align-items:flex-start;
		aling-content:flex-start;
		gap:3rem;
		padding-bottom:3rem;
		padding-top:6rem;
	}

	#poster-img{
		width:60%;
		margin-top:0rem;
		
	}

	#poster-section1{
		
		max-width:40rem;
		justify-content:center;
		align-items:flex-start;
		align-content:center;
	}

	#poster-title{
		font-size:3rem;
		margin-top:0rem;
	}

	#poster-desc{
		font-size:1.25rem;
	}

	#poster-text{
		margin-top:0rem;
	}

	.posterbtn{
		width:25rem;
		font-size:1.25rem;
		padding-top:0.75rem;
		padding-bottom:0.75rem;
	}

	.stepsbtn{
		width:25rem;
		font-size:1.25rem;
		margin-top:3rem;
		padding-top:0.75rem;
		padding-bottom:0.75rem;
	}

	.divtitles{
		font-size:2.5rem;
	}

	.stepname{
		font-size:1.25rem;
	}

	#steps-container{
		width:25rem;
		gap:1.5rem;
		margin-top:3rem;

	}


	.list-text{
		font-size:1.25rem;
	}

	#list-container{
		height:20rem;
		padding-top:2rem;
		gap:3rem;
		margin-bottom:2rem;
	}

	.list-item{
		
		margin-bottom:0.75rem;
	}

	#details-container{
		padding-top:2rem;
		padding-bottom:2rem;
		height:25rem;
	}

	.details-link{
		font-size:1.25rem;
	}

	.details-link-container{
		margin-bottom:3rem;

	}

	.divtitles-stats{
		font-size:2.5rem;
	}

	.stat-text{
		font-size:1.25rem;
	}

	.stat-num{
		font-size:2.75rem;
	}

	#stats-div2{
		padding-top:4rem;
		flex-direction:row;
		padding-bottom:2rem;
		justify-content:space-evenly;
	}

	#stats-div{
		height:25rem;
		padding-top:0rem;
	}

	#about-desc{
		text-align:center;
		font-size:1.25rem;
		padding-top:1.5rem;
		padding-bottom:1.5rem;
	}

	.port-div-container{
		flex-direction:row;

	}

	.portraits-div{
	
		padding-top:3rem;
	}

	#portraits-div1{
		margin-top:0rem;
	}

	#contact-desc{
		font-size:1.25rem;
		text-align:center;
		padding-top:1rem;
		padding-bottom:1rem;
	}

	#contact-div{
		height:13rem;

	}

	#statstitle{
	margin-bottom:0rem;
	}

}