.logo{
	width:20rem;
}
header {
	background: #ADD1F1;
}

body {
	position: relative;
}

.container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 90%;
	margin: 0 auto;
	padding: 1rem 1rem;
}

ul {
	list-style-type: none;
	padding: 0;
}

li {
	display: inline-block;
	padding: 0 1.25rem;
	font-size: 2.2rem;
}

li a:link,li a:visited {
	color: #fff;
	text-decoration: none;
	font-weight: 500;

	transition: all 0.3s;
}

li a:hover,li a:active {
	text-decoration: underline;
	text-underline-offset: 10px;
	color:#FF5F05;
}

.nav-toggle {
	display: none;
	position: absolute;
	right: 2.5rem;
	top: 2rem;
	cursor: pointer;
}

.nav-toggle img {
	width: 3rem;
	transition: 300ms all ease;
}

.nav-toggle:hover img {
	opacity: 0.6;
}

.open {
	height: 40vh;
}

.hidden {
	display: none;
}
@media all and (max-width: 720px) {
	.container {
		flex-direction: column;
		align-items: flex-start;
	}
	nav {
		height: 0;
		overflow: hidden;
		width: 100%;
		transition: 250ms height ease-in-out;
	}
	li {
		display: block;
		text-align: center;
		padding: 1.5rem 0;
	}
	li a {
		font-size: 2.4rem;
	}
	.nav-toggle {
		display: block;
	}
}
/* hero */
h1{
	color:#FF5F05;
	font-size:4.8rem;
	text-align: center;
	margin-top: 6rem;
}
.herosection{
	padding:2rem 8rem 5rem 8rem;
	background-color: #fff;

	border-bottom: #ADD1F1 solid 2px; 
}
.herocontainer{
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	justify-items: center;
}
.banner{
	width:120%;
	z-index: 100;
	/* transform: translateX(-10rem); */
}
.herocontent{
	background-color:#fff ;
	box-shadow: 0 0 1.5rem 0.5rem rgba(221, 221, 221, 0.779);
	border-radius: 5rem;
	padding:6rem 4rem 6rem 4rem;
	

	/* width:80%;
	height:80%; */
	align-items: center;

	/* display: flex;
	flex-direction: column;
	align-items: center; */
}
.herocontent span{
	font-size:2.8rem;
	line-height: 1.5;
	color:#3C7AB0;
	margin-bottom:2.5rem;
}
.herocontentList{
	font-size: 3.2rem;
	margin-bottom: 3rem;
	list-style-type:disc;
}
.herocontentList li{
	margin:2rem 0;
	display: block;
	color:#FF5F05;
	font-size: 3.3rem;
	font-weight: 500;
}
.checkmark{
	color:#FF5F05;
	font-size: 4rem;
	transform: translateY(1rem);
}
.btnBox{
	display: flex;
	justify-content: center;
}
.heroBtn:link,.heroBtn:visited{
	padding:1.5rem 2rem;
	background-color: #ADD1F1;
	color:#fff;
	border-radius: 1rem;

	transition: all 0.3s;
}
.heroBtn:hover,.heroBtn:active{
	box-shadow: 0 0 1.5rem 0.5rem rgba(185, 221, 250, 0.779);
	transform: scale(1.1);
}
/* section function */
.sectionfuncton{
	padding:8rem 8rem 0 8rem;
}
.functonTittle{
	text-align: center;
	color:#3C7AB0;
	font-size: 3rem;
}
.deviceBox{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	justify-items:center;

	margin-bottom: 3rem;
}
.device{
	margin-top: 3rem;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.deviceImg{
	width:40%;
}
.devieceTittle{
	font-size: 2.8rem;
	color: #3C7AB0;
	display: inline-block;
	/* text-align: center; */
}
.functioncontainer{
	display: flex;
	align-items: center;
	justify-content: center;
	padding:0 4rem;
}
.textBox{
	background-color:#EBEBEB;
	padding:6rem 4rem;
	width:50%;
	border-radius:4rem;

	transform: translateX(10rem);
}
.textBox p{
	font-size:2.8rem;
	line-height: 1.5;
	color:#3C7AB0;
}
.functionImg{
	width:70%;
	opacity: 0.7;
}
/* section Step */
.stepSection{
	padding:4rem 12rem;
}
.stepBox{
	display:grid;
	grid-template-columns: 1fr 1fr;
	justify-items: center;
	align-items: center;
	margin:2rem 9.6rem;
}
.stepimg{
	width:70%;
}
.stepimgBox{
	display: flex;
	justify-content: center;
	align-items: center;

	position: relative;
}
.steptext{
	display: flex;
	justify-content: center;
}
.stepTitle{
	font-size:12rem;
	color:#eee;
	margin-bottom: 1rem;
}
.stepsecondaryTitle{
	font-size:3.6rem;
	color:#3C7AB0;
	margin-bottom: 2.4rem;
}
.stepcontent{
	font-size:2.4rem;
	color:#555;
	line-height: 1.5;

}
/* sectionApply */
.sectionapply{
	padding:4rem 8rem;
	display: flex;
	justify-content: center;
}
.applyBox{
	width:80%;
	background-color:#FFDFCD ;
	border-top-left-radius:25rem;
	border-bottom-right-radius:25rem;

	box-shadow: 1rem 1rem 2.8rem 0.3rem rgba(221, 221, 221, 0.6);

}
.applycontentBox{
	margin:8rem 0 0 12rem;
}
.applytitle{
	color:#FF5F05;
	font-size:4rem;
	margin-bottom:2rem;
}
.applycontent{
	font-size:2.2rem;
	color:#777;
	line-height: 1.5;
}
.applyimgBox{
	display: grid;
	grid-template-columns: 1fr 1fr;
	justify-content: center;
	align-items: center;
	margin:4rem 0 3rem 0;
	transform: translate(4rem,-6rem);
}
.applytablet{
	width:90%;
}
.applythirdtitle{
	font-size:3.2rem;
	color:#FF5F05;
	margin-bottom:1.5rem;
}
.applylist{
	list-style:circle;
}
.applylistItem{
	display: block;
	margin-bottom: 1rem;
}
.applylistItem:last-child{
	margin-bottom: 3rem;
}

.applyBtn:link,.applyBtn:visited{
	padding:1.5rem 2rem;
	background-color: #FF5F05;
	color:#fff;
	border-radius: 1rem;
	font-size:3rem;
	transition: all 0.3s;

	margin-bottom: 2rem;
}
.applyBtn:hover,.applyBtn:active{
	box-shadow: 0 0 1.5rem 0.5rem rgba(255, 97, 5, 0.618);
	transform: scale(1.1);
}
.applyBtn:link,.applyBtn:visited{
	padding:1.5rem 2rem;
	background-color: #FF5F05;
	color:#fff;
	border-radius: 1rem;

	transition: all 0.3s;
}
.applyBtn:hover,.applyBtn:active{
	box-shadow: 0 0 1.5rem 0.5rem hsla(22, 95%, 68%, 0.7);
	transform: scale(1.1);
}
.imgcopyright{
	color:#2e5a80;
}
footer{
    background-color: #2a557b;
    padding:4rem 5rem 4rem 5rem;
    color:#fff;

    display: flex;
    flex-direction: column;
    gap:1rem;

	position: fixed;
	bottom: 0;
	width: 100vw;
}
.normalfooter{
    background-color: #2a557b;
    padding:4rem 5rem 4rem 5rem;
    color:#fff;
	position:inherit;
    display: flex;
    flex-direction: column;
    gap:1rem;
}
.sectionPrice {
	padding:4rem 12rem;
	border-top: 5px dotted #4B98DC;
	margin-bottom: 5rem;
}
.priceTitle {
	color: #3C7AB0;
	font-size: 3rem;
	text-align: center;
}
.priceContainer {
	margin: 3rem 0 6rem 0;
	padding: 0 2rem;
	display: flex;
	gap: 8rem;
	justify-content: center;
}
.priceBox {
	border: #4B98DC 2px solid;
	border-radius: 15px;
}
.priceBoxTitle {
	padding: 5rem 3rem;
	background-color: #4B98DC;
	color: #fff;
	font-size: 3.2rem;
	font-weight: 500;
	border-radius: 12px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
	text-align: center;
}
.priceBoxMoney {
	padding: 3rem;
	background-color: #fff;
	color: #FF5F05;
	font-size: 2.8rem;
	border-radius: 16px;
	text-align: center;
}
.priceBoxMoney b {
	font-size: 3.8rem;
	color: #FF5F05;
}
.priceBoxMoney2 {
	padding: 1rem 3rem 2rem 3rem;
	color: #2a557b;
}
.priceBoxMoneyDelete {
	text-decoration: line-through;
}
.priceDiscountTitle {
	color: #FF5F05;
	font-size: 3rem;
	text-align: center;
	margin-bottom: 5rem;
	line-height: 1.3;
}
.signupBtnBox {
	margin-top: 3rem;
}