/* main */

@font-face {
	font-family: "Geogrotesque Regular";
	src: url("../fonts/Geogrotesque-Rg.otf");
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "Geogrotesque Bold";
	src: url("../fonts/Geogrotesque-Bd.otf");
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: "Geogrotesque Bold Italic";
	src: url("../fonts/Geogrotesque-BdIt.otf");
	font-weight: 700;
	font-style: normal;
}

body {
	font-family: "Geogrotesque Regular";
	color: #303030;
}

.geogrotesque-regular {
	font-family: "Geogrotesque Regular";
}

.geogrotesque-bold-italic {
	font-family: "Geogrotesque Bold Italic";
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Geogrotesque Bold";
}

a.btn:hover,
button:hover {
	background-color: #3a90d6 !important;
}

button.i-text-orange:hover {
	color: #ffffff !important;
	border-color: #0778D4 !important;
}

a.bg-white:hover {
	background-color: rgb(247, 247, 247) !important;
	border-color: white !important;
}

a.i-text-orange:hover {
	color: white !important;
	border-color: #0778D4 !important;
}

input,
input::placeholder {
	color: #0778D4 !important;
	padding-left: 1em;
}

.i-bg-primary {
	background-color: #0778D4;
}

.i-bg-secondary {
	background-color: #5AB2BB;
}

.i-text-primary {
	color: #0778D4;
}

.i-text-secondary {
	color: #5AB2BB;
}

.i-text-orange {
	color: #FAD033
}

.i-bg-gradient {
	background: linear-gradient(146.98deg, #0778D4 0%, #5AB2BB 97.95%);
	box-shadow: 30px 30px 60px 0px #00000026;
}

.i-shadow {
	box-shadow: 0px 0px 40px 0px #00000026;
}

.navbar .shadow {
	box-shadow: 0px 44px 150px 0px #0000001A !important;
}

.navbar-nav li a {
	width: 3em;
	height: 3em;
	background-color: white !important;
}

.navbar-nav li a:hover {
	border: 1px solid #0778d4;
}

.navbar-nav li a:active {
	background-color: #96b7d3 !important;
}

.hero-section,
.about-section,
.donate-section {
	margin-top: 8vw;
	margin-bottom: 8vw;
}

.hero-img,
.hero-img2,
.hero-img3 {
	position: relative;
	background-color: #0778D4;
	width: 100%;
	height: 35em;
	overflow: visible;
	border-top-right-radius: 5em;
	border-top-left-radius: 5em;
	clip-path: xywh(0px -5em 100% 40em round 0% 0px);
}

.hero-img::before {
	content: "";
	position: absolute;
	top: -20%;
	left: 0%;
	width: 100%;
	height: 150%;
	background-image: url(../img/happy-children.webp);
	background-size: 150%;
	background-repeat: no-repeat;
	background-position: center center;
}

.hero-img2::before {
	top: -10%;
	background-image: url("../img/young-child-with-IRS.webp");
	background-size: 30em;
	background-position: top;
}

.hero-img3::before {
	top: -7%;
	background-image: url("../img/IRS-giving-food-to-boy.webp");
	background-size: 30em;
	background-position: top;
}

.grid,
.grid2,
.grid3 {
	display: grid;
	position: relative;
	grid-template-rows: repeat(3, 1fr);
	grid-template-columns: repeat(6, 1fr);
	width: 100%;
	height: 100%;
}

.grid::before,
.grid2::before,
.grid3::before {
	content: "Un acte de générosité";
	width: 50%;
	height: 70%;
	position: absolute;
	top: -1em;
	left: -1em;
	color: white;
	font-weight: bolder;
	display: flex;
	padding: 1em;
	justify-content: center;
	align-items: center;
	font-size: xx-large;
	border-radius: 0.3em;
	z-index: 1;
	background: linear-gradient(146.98deg, #0778D4 0%, #5AB2BB 97.95%);
	box-shadow: 40px 40px 40px 0px #00000040;
}

.grid2::before {
	content: "Votre Zakat en Action";
	height: 100%;
}

.grid3::before {
	content: "Actes de Générosité";
	height: 100%;
}

.child {
	border-radius: 0.5em;
}

/* Position the first child */
.child-1 {
	grid-row: 1;
	grid-column: 3 / 6;
	background-image: url("../img/IRS-offloading-goods.webp");
	background-size: cover;
	background-position: center center;
	transform: translateX(15%);
}

.about-img-1 {
	background-image: url("../img/african-children-happy.webp");
}

.about-img-4 {
	background-image: url("../img/family-enjoying-IRS-food.webp");
}

/* Position the second child */
.child-2 {
	grid-row: 2 / 4;
	grid-column: 1 / 3;
	background-image: url("../img/IRS-warehouse.webp");
	background-size: cover;
	background-position: center center;
	transform: translateY(10%);
}

.about-img-2 {
	background-image: url("../img/two-children-happy.webp");
}

.about-img-5 {
	background-image: url("../img/IRS-with-a-lot-of-reached-children.webp");
	background-repeat: no-repeat;
}

/* Position the third child */
.child-3 {
	grid-row: 2 / 4;
	grid-column: 3 / 7;
	background-image: url("../img/men-sharing-food.webp");
	background-size: cover;
	background-position: center center;
}

.about-img-3 {
	background-image: url("../img/three-children-happy.webp");
}

.about-img-6 {
	background-image: url("../img/children-receiving-food-from-IRS.webp");
}

.about-img {
	height: 20em;
}

.donation-design,
.donation-design-2,
.donation-design-3 {
	position: relative;
	height: 12em;
	border-top-left-radius: .5em;
	border-bottom-left-radius: .5em;
	background: linear-gradient(146.98deg, #0778D4 0%, #5AB2BB 97.95%);
}

.donation-design::before,
.donation-design-2::before,
.donation-design-3::before {
	content: "";
	position: absolute;
	top: 2em;
	left: 2em;
	width: 42%;
	height: 20em;
	border-radius: .5em;
	background-image: url("../img/boy-helped-by-IRS.webp");
	background-size: cover;
	background-position: center left;
	box-shadow: 0px 50px 100px 20px #0000001A;
}

.donation-design::after,
.donation-design-2::after,
.donation-design-3::after {
	content: "";
	position: absolute;
	top: 2em;
	right: 2em;
	width: 42%;
	height: 20em;
	border-radius: .5em;
	background-image: url("../img/People-managing-IRS-goods.webp");
	background-size: 100%;
	background-position: center left;
	box-shadow: 0px 50px 100px 20px #0000001A;
}

.donation-design-2::before {
	background-image: url("../img/young-girls-happy.webp");
	background-position: center center;
}

.donation-design-2::after {
	background-image: url("../img/IRS-working-together.webp");
	background-position: center center;
	background-size: cover;
}

.donation-design-3::before {
	background-image: url("../img/IRS-celebrating-children.webp");
	background-position: center center;
}

.donation-design-3::after {
	background-image: url("../img/IRS-man-serving-food.webp");
	background-position: center center;
	background-size: cover;
}

.donate-section-2,
.donate-section-3 {
	position: relative;
	background-image: url("../img/childred-reached.webp");
	background-size: 120%;
	background-position: center center;
}

.donate-section-3 {
	background-image: url("../img/people-traveling.webp");
}

.donate-section-2::before,
.donate-section-3::before {
	content: "";
	position: absolute;
	inset: 0;
	backdrop-filter: blur(10px);
	z-index: 0;
	background-color: rgba(255, 255, 255, 0.7);
}

.donate-section-2>*,
.donate-section-3>* {
	position: relative;
	z-index: 1;
}

footer {
	margin-top: 15%;
}

footer .footer-top {
	background: linear-gradient(90.62deg, rgba(5, 120, 213, 0.8) 0%, rgba(90, 178, 187, 0.8) 100%), url("../img/IRS-offloading-goods.webp");
	background-size: cover;
	background-position: center center;
}

@media (max-width: 1024px) {
	.hero-img {
		height: 25em;
		clip-path: xywh(0px -5em 100% 30em round 0% 0px);
	}

	.hero-img2::before {
		background-size: 21em;
	}

	.hero-img3::before {
		background-size: 25em;
	}

	.about-section {
		margin-top: 8em;
	}
}

@media (max-width: 768px) {
	.hero-img {
		height: 20em;
		clip-path: xywh(0px -5em 100% 25em round 0% 0px);
	}

	.hero-img2::before {
		background-size: 17em;
	}

	.hero-img3::before {
		background-size: 18em;
	}

	.donate-section {
		margin-top: 5em;
	}

	.donation-design::before {
		left: 1.5em;
		width: 42%;
		height: 15em;
	}

	.donation-design::after {
		right: 1.5em;
		width: 42%;
		height: 15em;
	}
}

@media (max-width: 425px) {
	.hero-img {
		height: 20em;
		clip-path: xywh(0px -5em 100% 25em round 0% 0px);
	}

	.hero-img2::before {
		background-size: 17em;
	}

	.hero-section {
		margin-top: 15vw;
	}

	.grid::before {
		left: 10px;
	}

	.donation-design {
		margin-bottom: 6em;
	}

	.grid::before,
	.grid2::before,
	.grid3::before {
		padding: 3em
	}
}