/* html,
body {
} */

* {
	padding: 0;
	margin: 0;
	/* box-sizing: border-box; */
	/* line-height: 0; */
}
header {
	background: #e4e7ed;
}
header .headerWrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: 1rem;
	padding-inline: clamp(1rem, 14vw, 12rem) clamp(1rem, 8vw, 10rem);
	/* padding-inline: 12rem 10rem; */
}
header .icon {
	width: 50px;
	height: 50px;
	background: black;
	color: white;
	position: relative;
	border-radius: 5px;
}
.icon p {
	position: absolute;
	bottom: 3px;
	left: 3px;
}
.icon .triangle-bottomleft {
	width: 0;
	height: 0;
	border-bottom: 20px solid white;
	border-right: 20px solid transparent;
	border-radius: 0 0 0 3px;
	position: absolute;
	top: 0;
	right: 0;
}
header .loginBotton {
	display: flex;
	gap: 1rem;
}
.loginBotton .login {
	border: 1px solid black;
	padding: .7rem clamp(1rem, 4vw, 3.5rem);
}
.loginBotton .register {
	border: 1px solid black;
	padding: .7rem clamp(1rem, 3.5vw, 2.5rem);
	/* padding: .7rem 2.5rem; */
	background: #111f36;
	color: white;
}
.section1 {
	display: grid;
	grid-template-columns: 60% 40%;
	padding: 2rem;
}
.leftSection1 .leftTopTriangle {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}
.leftTopTriangle .triangle-topright {
	width: 0;
	height: 0;
	border-top: clamp(150px, 17vw, 230px) solid #f5c842;
	border-left: clamp(150px, 17vw, 230px) solid transparent;
	border-radius: 0 35px 0 0px;
}
.leftTopTriangle .square {
	width: clamp(150px, 17vw, 230px);
	height: clamp(150px, 17vw, 230px);
	background: #2b83b5;
	border-radius: 0 35px 0 35px;
}
.leftTopTriangle .triangle-topleft {
	width: 0;
	height: 0;
	border-top: clamp(150px, 17vw, 230px) solid #b2cbd9;
	border-right: clamp(150px, 17vw, 230px) solid transparent;
	border-radius: 35px 0 0 0;
}
.section1Detail {
	padding: 2rem;
}
.section1Detail h3 {
	font-size: clamp(2rem, 4.3vw, 3.8rem);
	/* font-size: 3.8rem; */
}
.section1Detail h3:nth-child(2) {
	color: #2b83b5;
}
.section1Detail a {
	margin-top: 2rem;
	text-decoration: none;
	display: inline-block;
	text-align: center;
	background: #111f36;
	color: white;
	padding: 1rem clamp(4rem, 8vw, 6rem);
	/* padding: 1rem 6rem; */
	font-size: clamp(.8rem, 1.4vw, 1.1rem);
}
.rightSection1 .rightTopTriangle {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.rightTopTriangle .triangle-topright {
	width: 0;
	height: 0;
	border-top: clamp(150px, 17vw, 230px) solid #f5c842;
	border-left: clamp(150px, 17vw, 230px) solid transparent;
	border-radius: 0 35px 0 0px;
}
.rightTopTriangle .squareBlack {
	width: clamp(150px, 17vw, 230px);
	height: clamp(150px, 17vw, 230px);
	background: black;
	border-radius: 0 35px 0 35px;
}
.rightTopTriangle .triangle-bottomleft {
	width: 0;
	height: 0;
	border-bottom: clamp(150px, 17vw, 230px) solid #b2cbd9;
	border-right: clamp(150px, 17vw, 230px) solid transparent;
	border-radius: 0 0 0 35px;
}

.rightTopTriangle .squareBlue {
	width: clamp(150px, 17vw, 230px);
	height: clamp(150px, 17vw, 230px);
	background: #2b83b5;
	border-radius: 0 0 35px 0;
}
.rightTopTriangle .squareWhite {
	width: clamp(150px, 17vw, 230px);
	height: clamp(150px, 17vw, 230px);
	background: white;
	border-radius: 0 35px 0 35px;
}
.wrapper {
	padding: 10rem clamp(10rem, 20vw, 16rem);
	/* padding: 10rem 16rem; */
}
.section2 {
	background: #111f36;
	color: white;
}
.section2Wrapper p {
	font-size: clamp(1rem, 3vw, 2rem);
	/* font-size: 2rem; */
}
.section3Wrapper .heading {
	font-size: 2rem;
	margin-bottom: 5rem;
}
.seciton3Content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1rem, 4.5vw, 4rem);
	/* gap: 1rem; */
	align-items: center;
	/* padding-right: 3rem; */
}
.seciton3Content img {
	margin-bottom: clamp(1rem, 2vw, 3rem);
	height: clamp(10rem, 20vw, 15rem);
}
.seciton3Content h3 {
	font-size: clamp(1rem, 2.2vw, 1.8rem);
	margin-bottom: 1rem;
}
.section4 {
	background: #111f36;
	color: white;
}
.section4Wrapper h3 {
	font-size: clamp(1rem, 3vw, 2rem);
	font-weight: 100;
}
.section4Wrapper h2 {
	font-size: clamp(1rem, 2.5vw, 1.8rem);
}
.section4Wrapper h2:nth-child(4),
.section4Wrapper h2:nth-child(5) {
	font-weight: 100;
}
.section4Wrapper h3,
.section4Wrapper h2 {
	margin-bottom: 1.5rem;
}
.section4Wrapper a {
	margin-top: 2rem;
	text-decoration: none;
	display: inline-block;
	text-align: center;
	background: #2b83b5;
	color: white;
	padding: 1rem clamp(1rem, 8vw, 6rem);
	font-size: clamp(.8rem, 1.3vw, 1.1rem);
	/* font-size: 1.1rem; */
}
.section5 {
	background: #e4e7ed;
}
.section5Wrapper {
	font-size: clamp(.8rem, 1.8vw, 1.5rem);
}
.section5Content {
	padding-right: clamp(15rem, 25vw, 20rem);
	display: grid;
	gap: 1rem;
}
.section5Content h3 {
	font-weight: 100;
}
.section5Content a {
	margin-top: 2rem;
	text-decoration: none;
	display: flex;
	justify-content: space-between;
	border: 1px solid black;
	color: black;
	padding: 1rem;
	font-size: clamp(.7rem, 1.5vw, 1.1rem);
	/* font-size: 1.1rem; */
}
.section5Content img {
	font-size: clamp(.4rem, 1.5vw, 1rem);
}
footer {
	background: white;
}
footer .footerWrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: 1rem;
	/* padding-inline: 12rem 10rem; */
	padding-inline: clamp(1rem, 14vw, 12rem) clamp(1rem, 8vw, 10rem);
}
footer .icon {
	width: 30px;
	height: 30px;
	background: black;
	color: white;
	position: relative;
	border-radius: 5px;
}
footer .icon p {
	position: absolute;
	font-size: 10px;
	bottom: 3px;
	left: 3px;
}
footer .icon .triangle-bottomleft {
	width: 0;
	height: 0;
	border-bottom: 12px solid white;
	border-right: 12px solid transparent;
	border-radius: 0 0 0 3px;
	position: absolute;
	top: 0;
	right: 0;
}
footer .storeApp {
	display: flex;
	gap: 1rem;
}
.storeApp .playStore img {
	height: .7rem;
}
.storeApp .appStore img {
	height: .7rem;
}
@media screen and (max-width: 880px) {
	.leftTopTriangle .triangle-topright {
		border-top: clamp(100px, 17vw, 150px) solid #f5c842;
		border-left: clamp(100px, 17vw, 150px) solid transparent;
	}
	.leftTopTriangle .square {
		width: clamp(100px, 17vw, 150px);
		height: clamp(100px, 17vw, 150px);
	}
	.leftTopTriangle .triangle-topleft {
		border-top: clamp(100px, 17vw, 150px) solid #b2cbd9;
		border-right: clamp(100px, 17vw, 150px) solid transparent;
	}

	.section1Detail h3 {
		font-size: clamp(1rem, 4vw, 2rem);
	}

	.rightTopTriangle .triangle-topright {
		border-top: clamp(100px, 17vw, 150px) solid #f5c842;
		border-left: clamp(100px, 17vw, 150px) solid transparent;
	}
	.rightTopTriangle .squareBlack {
		width: clamp(100px, 17vw, 150px);
		height: clamp(100px, 17vw, 150px);
	}
	.rightTopTriangle .triangle-bottomleft {
		border-bottom: clamp(100px, 17vw, 150px) solid #b2cbd9;
		border-right: clamp(100px, 17vw, 150px) solid transparent;
	}

	.rightTopTriangle .squareBlue {
		width: clamp(100px, 17vw, 150px);
		height: clamp(100px, 17vw, 150px);
	}
	.rightTopTriangle .squareWhite {
		width: clamp(100px, 17vw, 150px);
		height: clamp(100px, 17vw, 150px);
	}
	.wrapper {
		padding: clamp(4rem, 15vw, 10rem) clamp(4rem, 16vw, 14rem);
	}
	.section2Wrapper p {
		font-size: clamp(1rem, 3vw, 1.5rem);
	}
	.section3Wrapper .heading {
		font-size: 2rem;
		margin-bottom: 3rem;
	}
	.seciton3Content {
		display: grid;
		grid-template-columns: 1fr 1fr;
		/* gap: 4rem; */
		align-items: center;
		/* padding-right: 3rem; */
	}
	.seciton3Content img {
		margin-bottom: clamp(1rem, 2vw, 3rem);
		height: clamp(6rem, 20vw, 15rem);
	}
	.seciton3Content h3 {
		font-size: clamp(1rem, 2.2vw, 1.8rem);
		margin-bottom: 1rem;
	}
	.section4Wrapper h3 {
		font-size: clamp(1rem, 3vw, 1.8rem);
	}
	.section4Wrapper h2 {
		font-size: clamp(.8rem, 2.5vw, 1.2rem);
	}
	.section4Wrapper h3,
	.section4Wrapper h2 {
		margin-bottom: 1.1rem;
	}
	.section4Wrapper a {
		/* font-size: clamp(.8rem, 1.8vw, 1.1rem); */
		/* font-size: 1.1rem; */
	}
	.section5Wrapper {
		font-size: clamp(.8rem, 1.8vw, 1.5rem);
		display: grid;
		justify-items: center;
	}
	.section5Content {
		padding-right: clamp(7rem, 20vw, 15rem);
		display: grid;
		gap: 1rem;
	}
	.section5Content h3 {
		font-weight: 100;
	}
	.section5Content a {
		margin-top: 1rem;
	}
}
@media screen and (max-width: 660px) {
	.loginBotton h4 {
		font-size: clamp(.6rem, 2.5vw, .8rem);
	}
	.section3 {
		/* display: none; */
		/* background: red; */
	}
	.section1 {
		display: grid;
		grid-template-columns: 1fr;
		justify-items: center;
		padding: 2rem;
	}
	.section1 .leftSection1 {
		display: grid;
		justify-content: center;
		justify-self: center;
	}
	.leftTopTriangle .triangle-topright {
		border-top: clamp(80px, 26.5vw, 200px) solid #f5c842;
		border-left: clamp(80px, 26.5vw, 200px) solid transparent;
	}
	.leftTopTriangle .square {
		width: clamp(80px, 26.5vw, 200px);
		height: clamp(80px, 26.5vw, 200px);
	}
	.leftTopTriangle .triangle-topleft {
		border-top: clamp(80px, 26.5vw, 200px) solid #b2cbd9;
		border-right: clamp(80px, 26.5vw, 200px) solid transparent;
	}
	.rightSection1 .rightTopTriangle {
		display: none;
	}
	.wrapper {
		padding: clamp(2rem, 12vw, 8rem) clamp(2rem, 11vw, 8rem);
	}
	.section2Wrapper p {
		font-size: clamp(.8rem, 3vw, 1.5rem);
	}
	.seciton3Content p {
		font-size: clamp(.8rem, 3vw, 1rem);
	}
	.section3Wrapper .heading {
		font-size: 1.5rem;
		margin-bottom: 3rem;
	}
	.section4Wrapper h3 {
		font-size: clamp(.8rem, 3vw, 1.4rem);
	}
	.section4Wrapper h2 {
		font-size: clamp(.7rem, 2.5vw, 1rem);
	}
	.section4Wrapper h3,
	.section4Wrapper h2 {
		margin-bottom: 1rem;
	}
	.section4Wrapper a {
		font-size: clamp(.7rem, 2.5vw, 1rem);
		/* font-size: 1.1rem; */
		margin-top: 1rem;
	}
	.section5Wrapper {
		font-size: clamp(.6rem, 2.2vw, 1rem);
	}
	.section5Content {
		padding: clamp(1rem, 7vw, 5rem);
		display: grid;
		gap: 1rem;
	}
	.section5Content a {
		margin-top: .5rem;
		font-size: clamp(.5rem, 1.5vw, 1.1rem);
		/* font-size: 1.1rem; */
	}
	.section5Content img {
		height: clamp(1rem, 2vw, 2rem);
	}
}
@media screen and (max-width: 490px) {
	header .icon {
		width: clamp(30px, 8.5vw, 40px);
		height: clamp(30px, 8.5vw, 40px);
	}
	.icon p {
		font-size: clamp(.2rem, 3vw, .8rem);
	}
	.icon .triangle-bottomleft {
		border-bottom: clamp(10px, 3.5vw, 15px) solid white;
		border-right: clamp(10px, 3.5vw, 15px) solid transparent;
	}
	.seciton3Content {
		row-gap: 2rem;
	}
	.section5Content a {
		padding: .8rem;
	}
}