.modal-container{

	display: flex;

	flex-direction: column;

	align-items: center;

	gap: 6rem;

	padding: 50px 23% 10px 23%;

	background-color:#215732;

	border:4px solid white;

	height:100%;

	justify-content: center;

}



body{

	background-color:#215732;

}



b{

	font-weight:500;

}



.modal-container .title{

	display: flex;

	justify-content: center;

	font-size: 6.7rem;

	font-style: normal;

	text-transform: uppercase;

	letter-spacing: 0px;

	text-align: center;

	padding: 8px 61px 8px 62px;

	border: 4px solid #fff;

	border-radius: 21px;

}



.modal-container .items{

	max-width: 730px;

	display: flex;

	flex-direction: column;

	gap: 3rem;

	font-size: 3.2rem;

}



.modal-container .items .item1{

	display: flex;

	align-items: center;

	gap: 46px;

	flex-shrink: 0;

	padding: 2px;

}



.modal-container .items .item1 .img{

	width: 13rem;

	flex-shrink: 0;

}



.modal-container .items .item1 .desc{

	flex-grow: 1;

}



.modal-container .btn-close{

	top: 74px; right:50px; transform:scale(0.8);

	position: absolute;

	width: 51px; height: 51px;

}











/* responsive */

@media(max-width:1190px){

	.modal-container .title{ font-size:50px;}

	.modal-container{

		padding: 50px 8% 10px 8%;

	}

}





@media(max-width:728px){

	.modal-container .title{ 

		font-size:40px;

		padding: 4px 30px 1px 30px;

		border-width:2px;

		border-radius:18px;

	}

	.modal-container{

		padding: 90px 5% 10px 5%;

	}

	.modal-container .items{

		font-size:20px;

		gap:18px;

	}

	.modal-container .items .item1 .img{

		width:9rem;

	}

	.modal-container .items .item1{

		flex-direction: column;

		text-align:center;

		gap:16px;

	}

	.modal-container .btn-close{

		top: 14px; left:50%; transform:translateX(-40%) scale(0.7);

	}	

	

}

@media(max-width:500px){

	.modal-container .title{ 

		font-size:29px;

	}

	.modal-container .items .item1 .img{

		width:70px;

	}

	.modal-container .items{

		gap:12px;

		font-size:24px;

	}

	.modal-container{

		padding-top:80px;

		gap:20px;

	}

}