@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Agdasima&family=Anton&family=PT+Sans+Narrow:wght@700&family=Secular+One&family=Stick+No+Bills:wght@700;800&display=swap');

:root {
	--prime: #41807c;
	--second: white;
	--bg-light: #5ea6a1;
	--bg-yellow: #f1c50e;
	--bg-black: #1e1e1e;
}
/* general css */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: poppins,Arial, Helvetica, sans-serif;
}
html {
	font-size: 62.5%;
	overflow-x: hidden;
}
body{
	overflow-x: hidden;
}
.bg-prime {
	background-color: var(--prime);
	position: relative;
}
body {
	font-family: 'Poppins', sans-serif;
	font-size: 1.6rem;
	letter-spacing: 0.5px;
}
main{
	margin-top: 15rem;
	margin: 15rem 5rem;
}
p {
	font-size: 1.8rem;
}
h1 {
	font-size: 7rem;
}
h2 {
	font-size: 4.5rem;
}
h3 {
	font-size: 4rem;
}
h4 {
	font-size: 3rem;
}
h5 {
	font-size: 2rem;
}
h6 {
	font-size: 1rem;
}
section {
	/* min-height: 100vh; */
	margin: 4rem 0;
}

.logo-img {
	display: inline-block;
	height: 10rem;
}

.design-1 {
	position: absolute;
	top: -1rem;
	left: 25rem;
}

.design-2 {
	position: absolute;
	bottom: -1rem;
	right: 25rem;
}

.sub-con {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.btn-prime {
	border-radius: 50px;
	color: var(--second);
	background-color: var(--bg-yellow);
	padding: 10px;
	box-shadow: 3px 4px 0px 0.5px var(--prime);
	border: none;
	padding: 0.8rem 3rem;
	font-size: 2rem;
	font-weight: 600;
	/* margin-left: 2rem; */
}
.btn-prime:hover {
	background-color: var(--prime);
	box-shadow: 3px 4px 0px 0.5px var(--bg-yellow);
	transition: all 0.3s;
}

.btn-prime a {
	text-decoration: none;
	color: white;
}

.btn-yellow {
	color: var(--bg-black);
	background-color: var(--bg-yellow);
	border-radius: 50px;
	padding: 10px;
	border: none;
	font-size: 2rem;
}

.text-prime {
	color: var(--prime);
}
.white-card {
	background-color: white;
	border-radius: 1rem;
	padding: 5rem;
	margin: 5rem;
	/* border-radius:10px; */
}

/* navbar */
.nav-item {
	margin: 0 1rem;
}
nav a {
	font-size: 2rem;
	font-weight: 500;
	color: var(--bg-light);
}
nav a:hover {
	color: var(--prime);
}
/* top section */
.top{
	color: white;
	width: 80%;
	margin: auto;
}
.top h1{
	font-size: 5rem;
}
/* corporate items  */
.corporate{
	padding: 5rem;
}
.corporate__item{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.corporate__item__img{
	border-radius: 50%;
	width: 33vw;
	height: 33vw;
	background-color: wheat;
	position: relative;
}
.corporate .corporate__item:nth-child(1) .corporate__item__img,.corporate .corporate__item:nth-child(1) .corporate__item__img .round{
	background: #F1C50E;
}
.corporate .corporate__item:nth-child(1) .corporate__item__img .ring{
	border-color: #F1C50E;
}
.corporate .corporate__item:nth-child(2) .corporate__item__img .ring{
	border-color: #49DBD4;
}
.corporate .corporate__item:nth-child(3) .corporate__item__img .ring{
	border-color: #ffffff;
}
.corporate .corporate__item:nth-child(2) .corporate__item__img,.corporate .corporate__item:nth-child(2) .corporate__item__img .round{
	background: #49DBD4;
}
.corporate .corporate__item:nth-child(3) .corporate__item__img,.corporate .corporate__item:nth-child(3) .corporate__item__img .round{
	background: #ffffff;
}
.corporate .corporate__item:nth-child(4) .corporate__item__img,.corporate .corporate__item:nth-child(4) .corporate__item__img .round{
	background: #c3c3c3;
}
.corporate__item__img img{
	border-radius: 50%;
	width: 30vw;
	height: 30vw;
	margin: 1rem;
}
.corporate__item__img .round{
	width: 5rem;
	height: 5rem;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.692);
	position: absolute;
	opacity: 0.8;
}
.corporate__item__img .ring{
	width: 20rem;
	height: 20rem;
	border-radius: 50%;
	border: 4rem solid rgba(255, 255, 255, 0.722);
	position: absolute;
	opacity: 0.7;
}
.ring--left{
	left: -20rem;
	bottom: -5rem;
}
.ring--right{
	right: -18rem;
	bottom: -9rem;
}
.corporate__item__text{
	width: 50vw;
 	/* display: flex; */
	/* align-items: center; */
	color: white;
	align-items: center;

}
.corporate__item__text h2{
	font-size: 4rem;
    font-weight: 700;
}
.corporate__item__text li{
	font-size: 2.2rem;
	list-style-position: inside;
}
.corporate__item:nth-child(odd) .corporate__item__text{
	margin-right: 4rem;
}
/* steps */
.steps{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	grid-template-columns: repeat(4, 1fr);
  	gap: 2rem;
}

.step__item{
	width: 25rem;
	height: 25rem;
	border-radius: 50%;
	background-color: var(--bg-light);
	margin: auto;
	padding: 0 0.5rem;
}
.step__item:nth-child(1){
	background-color: #7ae4dd7c;
}
.step__item:nth-child(2){
	background-color: rgba(160, 160, 160, 0.503);
}
.step__item:nth-child(3){
	background-color: rgba(255, 142, 142, 0.535);
}
.step__item:nth-child(4){
	background-color: rgba(255, 194, 81, 0.628);
}
.step__item:nth-child(5){
	background-color:#f1c40e7a;
}
.step__item:nth-child(6){
	background-color: rgba(223, 223, 223, 0.66);
}
.step__item:nth-child(7){
	background-color: #4eedda64;
}
.step__item:nth-child(8){
	background-color: rgba(255, 255, 255, 0.402);
}
.step__item__upper p{
	position: relative;
	/* text-align: center; */
	font-size: 8rem;
	font-family: 'Agdasima', sans-serif;
	color: #ffffff9e;
	margin-left: 2rem;
	margin-bottom: 0;

}
.step__item__upper span{
	font-size: 10rem;
	font-family: 'PT Sans Narrow', sans-serif;
	font-family: 'Anton', sans-serif;
	position: absolute;
	top: -2rem;
	right: -1rem;
}
.step__item__lower{
	color: black;
	font-size: 2rem;
	text-align: center;
	margin: 0 1rem;
}
/* collaborate btn */
.about__btn{
	display: flex;
	justify-content: center;
	flex-direction: row;
	padding: 2rem 4rem;
	background-color: #49dbd4b0;
	align-items: center;
	width: fit-content;
	margin: auto;
	
}
.about__btn p{
	font-size: 4rem;
	margin-bottom: 0;
}
/* contact form css */
.contact {
	justify-content: space-between;
}
.contact-text__heading {
	margin-bottom: 3rem;
	font-weight: 700;
	font-size: 4.5rem;
}
.contact-text__info {
	font-size: 2.5rem;
}
.contact-form {
	background-color: var(--bg-light);
	border-radius: 3rem;
	padding: 4rem;
	width: 40%;
	/* width: 50%; */
}
.contact input,
.contact textarea {
	background-color: white;
	border: none;
	margin: 1rem 0;
	font-size: 2rem;
	border-radius: 3rem;
	padding: 1.5rem;
}
.contact input,
.contact textarea:focus-visible {
	/* border: 0.5rem solid var(--prime); */
	border: none;
}
input[type="checkbox"] {
	appearance: none;
	border-radius: 0.5rem;
	border: var(--bg-light);
	background-color: #ffffff;
	width: 1rem;
	height: 1rem;
	position: relative;
}
input[type="checkbox"]:checked {
	background-color: var(--prime);
	box-sizing: border-box;
	box-shadow: inset 0px 0px 0 3px #c6d8d7;
	color: #c6d8d7;
}
input[type="checkbox"]:checked::before {
	/* Custom style for checked state */
	content: "\2713"; /* Unicode for checkmark */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 14px;
	font-weight: bold;
	color: white;
}
.form-tc a {
	color: #235451;
}
.form-tc span {
	margin: 0 1rem;
}
.form-tc {
	display: flex;
	font-size: 2rem;
	align-items: center;
	/* justify-content: center; */
	color: white;
}

.contact-text {
	padding-right: 2rem;
}

/* footer{
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--bg-light);
	color: var(--second);
	padding: 3rem 0;
} */


.float-left {
	width: 50%;
	float: left;
	margin: 0 20px 10px 0; /* Adjust the margin as needed for spacing */
}

.container::after {
	content: "";
	display: table;
	clear: both;
}

@media screen and (max-width:768px) {
	.corporate{
		padding: 0;
	}
	main{
		margin: 15rem 2rem;
	}
	.corporate__item:nth-child(odd){
        flex-direction: column;
    }
    .corporate__item:nth-child(even){
        flex-direction: column-reverse;
    }
    .corporate__item__img{
        width: 80vw;
        height: 80vw;
    }
    .corporate__item__img img{
        width: 90%;
        height: 90%;
    }
	.steps{
		grid-template-columns: repeat(2,1fr);
	}
	.corporate__item__text{
		width: 85%;
		margin: 5rem 0;
	}
	.about__btn{
		flex-direction: column;
	}
}
@media screen and (max-width:500px) {
	.steps{
		grid-template-columns: repeat(1,1fr);
	}
}