/* 
Stud ID  : 10574308 
Stud Name: Mahara Brahakmanage Malindu Yasan Mahara
GDI3312.1 ADVANCED WEB DESIGN
Assignment 2  
*/

@import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");

body {
	/* All the background colors used in pages. */

	--index-blue: #2ea5e4;

	/* about us page - main, uses the same color as index page - main */
	--about-color-aside: #abbbb8;

	/* contribute page background color */
	--contribute-color: #d6e4ea;

	/* Project page background color */
	--project-color: #d6e4ea;

	--impact-color: #d6e4ea;

	margin: 0;
	font-family: "Lato", sans-serif;
	font-size: 16px;
}

/* ============== Wrap the content - giving max-width and min-width============== */
#wrapper {
	max-width: 1800px;
	min-width: 320px;
	margin: auto;
}

h1 {
	font-family: "Montserrat", sans-serif;
	font-size: 3em;
	line-height: 1.5em;
}

h2 {
	font-family: "Montserrat", sans-serif;
	font-size: 2em;
	line-height: 1.3em;
}

img {
	display: block;
	width: 100%;
	height: auto;
}

/* Hide the overlay of the hamburger menu */
.overlay {
	display: none;
}

.ham-menu {
	display: none;
	font-size: 30px;
	cursor: pointer;
}

/* ============== Header Styles ============== */

/* Use Flexbox */
header {
	display: flex;
	justify-content: space-between;
	align-items: center;

	padding: 1.5em 2em;
	background-color: #b8e1cf;
	font-family: "Montserrat", sans-serif;
}

.logo {
	width: 23em;
	height: auto;
}

/* Place the Nav Bar in the left corner and give its width as 60% from the parent container */
header nav {
	flex-basis: 60%;
}

/* Use Flexbox */
header nav ul {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;

	list-style-type: none;
	margin: 0;
}

header nav ul li {
	padding: 5px;
}

header nav a {
	color: #000000;
	text-decoration: none;
	font-weight: 700;
	text-align: center;
	display: block;
}

/* make the text blue when hovering */
header nav a:hover {
	color: #2ea5e4;
}

header .active {
	border-bottom: 4px solid black;
	padding: 0.5rem 0;
}

/* the active one doesn't change the color when hovering  */
header .active:hover {
	color: black;
}

/* ============== CONTRIBUTION Button Styles ============== */
.btn {
	font-family: "Montserrat", sans-serif;
	font-size: inherit;
	font-weight: 700;
	border: none;
	border-radius: 10px;
	text-align: center;

	text-transform: uppercase;
	cursor: pointer;
	outline: none;
	overflow: hidden;
	position: relative;
	color: rgb(255, 255, 255);
	background-color: #080e0e;
	padding: 1em 1.5em;
	margin: 0;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);
}

.btn span {
	position: relative;
	z-index: 1;
	transition-duration: 0.8s;
}

.btn:hover span {
	color: black;
}

/* button overlay with blue color square*/
.btn:after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 320%;
	width: 140%;
	background-color: #2ea5e4;
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	-webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
	transform: translateX(-98%) translateY(-25%) rotate(45deg);
}

.btn:hover:after {
	-webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
	transform: translateX(-9%) translateY(-25%) rotate(45deg);
}

/* =========== HERO Content ============== */

/* create grid to place text in top of a picture */
.hero-section {
	display: grid;
	grid-template-areas: "hero";
	justify-content: end;
	align-items: center;
}

.hero-section img {
	grid-area: hero;
}

.hero-section h1 {
	color: #080e0e;
	text-align: right;
	width: 50%;
	padding: 0 2.5rem;
	margin: 0;

	grid-area: hero;
	justify-self: end;
}

/* =========== MAIN Content ============== */
.main-content {
	padding-bottom: 1rem;
	background-color: #edeedc;
}

/* YELLOW BANNER 1 */

/* create grid to place text in top of a picture */
.banner-yellow {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas: "banner";

	padding: 2rem;
}

.banner-yellow img {
	grid-area: banner;
	width: 55%;
	justify-self: center;
}

.banner-yellow h2 {
	grid-area: banner;
	text-align: center;
	width: 55%;
	justify-self: center;
	margin: auto;
}

.section-main {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;

	padding: 1rem 2.5rem;
}

.section-main a {
	color: #f8c526;
	text-decoration: none;
	line-height: 3rem;
	font-weight: bold;
}

.section-main .text p:nth-child(3) {
	margin-top: 1.5em;
	font-style: italic;
}

.section-main > * {
	flex: 0 1 calc(50% - 1rem);
	margin: 0;
}

/* resize index and impact page - 3rd image */
#section-img-size img {
	aspect-ratio: 844 / 900;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.banner-blue {
	text-align: center;
	background-color: #79bde9;
	padding: 0.1rem;
	color: white;
}

/* ============== ASIDE Content==============  */
.info-panel {
	background-color: #abbbb8;
}

/* Use FlexBox */
.content-info {
	display: flex;
	flex-wrap: wrap;
	padding: 0 2.5rem;
	justify-content: space-between;
}

/* YELLOW BANNER 2 */

/* create grid to place text in top of a picture */
.banner-aside {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas: "banner";

	padding-top: 2rem;
	flex: 0 1 100%;
}

.banner-aside img {
	grid-area: banner;
	width: 38rem;
	justify-self: center;
}

.banner-aside h2 {
	grid-area: banner;
	text-align: center;
	width: 60%;
	justify-self: center;
	margin: auto;
}

.section-info {
	flex: 0 1 calc(50% - 2em);

	display: flex;
	margin-top: 2rem;
}

.section-info figure {
	margin: 1rem;
	flex: 0 0 2.5rem;
}

.section-info h2 {
	margin-top: 0.4em;
}

.info-panel .info-image {
	width: 100%;
	height: auto;
	margin: auto;
}

/* ============== FOOTER Content==============  */
footer {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	padding: 1.5em 2.5em 0.5em;
	background-color: #b8e1cf;
	color: #000000;
	font-family: "Montserrat", sans-serif;
}

footer nav {
	flex: 0 1 100%;
}

footer .logo {
	margin: auto;
}

footer nav ul {
	list-style-type: none;

	display: flex;
	flex-wrap: nowrap;
	justify-content: space-evenly;
	align-items: center;
	width: 70%;
	margin: 1.5rem auto;
	padding: 0;
}

footer nav a {
	flex: 0 1 100%;

	color: #000000;
	text-decoration: none;
	font-weight: 700;
}

/* footer content turns blue when hover over */
footer nav a:hover {
	color: #2ea5e4;
}

.nav-menu {
	margin-bottom: 2rem;
}

/* NAVIGATION for Social Medias using Fontawesome*/
.social-menu li a:before {
	font-family: "Fontawesome";
	content: "\f08e";
	font-size: 1.5rem;
}

.social-menu li a[href*="facebook.com"]::before {
	content: "\f09a";
}

.social-menu li a[href*="instagram.com"]::before {
	content: "\f16d";
}

.social-menu li a[href*="linkedin.com"]::before {
	content: "\f0e1";
}

.social-menu li a[href*="twitter.com"]::before {
	content: "\f099";
}

.social-menu li a[href*="youtube.com"]::before {
	content: "\f167";
}

footer .social-menu ul {
	width: 50%;
	margin: auto;
}

/* ######################################## Common All Pages without Index Page - Laptop S ######################################## */
body .all-hero-h1 {
	justify-self: start;
	text-align: left;
	color: white;
}
/* ######################################## ABOUT US PAGE - Laptop S ######################################## */

/* main section content has same style as index page, so new styles were not added for that. */

#about-project-main {
	padding: 1rem 0 1rem;
}

hr.section-break-line {
	border: 1px solid rgba(0, 0, 0, 0.5);
	margin: 1rem;
}

/* ============== ASIDE Content- Team ==============  */
#about-team {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;

	padding: 1.5rem 2.5rem;
	background-color: var(--about-color-aside);
}

#about-team .team-head {
	flex: 0 1 100%;

	text-align: center;
}

#about-team .team-member {
	flex: 0 1 calc(33% - 6em);

	padding: 1rem;
}

/* ######################################## CONTRIBUTE PAGE - Laptop S ######################################## */

#contribute-main {
	padding: 0 2.5rem;
	background-color: var(--contribute-color);
}

.contribute-aside {
	background-color: var(--contribute-color);
}

.contribute-article {
	padding: 2.5rem 10rem;
	text-align: justify;
}

.contribute-article h2 {
	text-align: center;
}

.contribute-article ul {
	margin: auto;
	padding: 1rem;
}

.contribute-article li {
	padding: 0.5rem;
}

/* ######################################## ONGOING PROJECTS PAGE - Laptop S ######################################## */

/* Main Section in Projects Page - uses same styles in About Page main section */
.project-bg {
	background-color: var(--project-color);
}

.about-project-section .text p:nth-child(3) {
	font-style: normal;
}

/* map section */
.project-article-map {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;

	padding: 2.5rem;
	text-align: center;
}

.project-article-map h2 {
	flex: 0 1 100%;

	margin: auto;
	/* color: var(--index-blue); */
}

.project-article-map p {
	flex: 0 1 70%;
	padding-bottom: 1rem;
}

.project-article-map iframe {
	flex: 0 1 80%;
}

/* ######################################## IMPACT PAGE - Laptop S ######################################## */
#impact-main {
	padding: 2.5rem 2.5rem;
	background-color: var(--impact-color);
}

#impact-main article {
	padding-bottom: 1rem;
}

/* .impact-article-para h2 {
	text-align: center;
	width: 70%;
	margin: auto;
} */

.impact-article-boxes {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
}

.impact-article-boxes h2 {
	flex: 0 1 100%;

	text-align: center;
}

.impact-section {
	flex: 0 1 calc(33% - 2rem);
}

.impact-section figure {
	width: 120px;
	margin-left: 0;
}

.impact-article-video {
	flex: 0 1 80%;
	margin: auto;

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.impact-article-video h2 {
	flex: 0 1 100%;

	text-align: center;
}

.impact-article-video iframe {
	border: 0px;
	flex: 0 1 80%;

	height: 500px;
}

/* ============== Media Query for Large Screen devices ============== */
@media screen and (min-width: 1500px) {
	body {
		font-size: 18px;
	}

	header nav {
		flex-basis: 60%;
	}

	.banner-yellow h2 {
		width: 45%;
	}

	.banner-yellow img {
		width: 45%;
	}

	.banner-aside img {
		width: 40em;
	}

	.nav-menu {
		margin: 1rem 0 2rem;
	}

	/* ######################################## ABOUT US PAGE - Laptop L ######################################## */

	/* ============== ASIDE Content- Team ==============  */
	#about-team .team-member {
		flex: 0 1 calc(33% - 11rem);
	}

	/* ######################################## IMPACT PAGE - Laptop L ######################################## */
	.impact-article-video iframe {
		flex: 0 1 70%;

		height: 600px;
	}
}

/* ============== Media Query for Tablet devices ============== */
@media screen and (max-width: 1023px) {
	body {
		font-size: 14px;
	}

	h1 {
		font-size: 35px;
		line-height: 1.5em;
	}

	h2 {
		font-size: 1.8em;
		line-height: 1.3em;
	}

	p {
		font-size: 14px;
		line-height: 1.3em;
	}

	header nav {
		flex-basis: 70%;
	}

	header nav ul li {
		padding: 5px;
	}

	/* Logo */
	.logo {
		width: 20em;
		height: auto;
	}

	/* Main - Banner Yellow */
	.banner-yellow h2 {
		width: 58%;
	}

	.banner-yellow img {
		width: 58%;
	}

	.section-main h2 {
		margin: 0;
	}

	/* Footer - Banner  */
	.banner-aside img {
		width: 60%;
	}

	/* ######################################## ABOUT US PAGE - Tab ######################################## */

	/* ============== ASIDE Content- Team ==============  */
	#about-team .team-member {
		flex: 0 1 calc(50% - 8em);
	}

	/* ######################################## CONTRIBUTE PAGE - Laptop S ######################################## */
	#contribute-main {
		padding-top: 40px;
	}

	.contribute-article {
		padding: 2.5rem 8rem;
		text-align: justify;
	}

	/* ######################################## IMPACT PAGE - Laptop S ######################################## */
	.impact-article-video iframe {
		flex: 0 1 90%;

		height: 400px;
	}
}

/* ============== Media Query for Mobile devices - Large ============== */
@media screen and (max-width: 767px) {
	body {
		font-size: 14px;
	}

	h1 {
		font-size: 30px;
		line-height: 1.5em;
	}

	h2 {
		font-size: 22px;
		line-height: 1.3em;
	}

	p {
		font-size: 1em;
		line-height: 1.3em;
	}

	/* Header */
	header {
		padding-left: 1em;
		align-items: flex-end;
	}

	.logo {
		width: 17em;
		height: auto;
	}

	.topnav {
		display: none;
	}

	.ham-menu {
		display: block;
		align-self: end;
	}

	/* make the overlay only in mobile viewport */
	.overlay {
		display: block;
		height: 0%;
		width: 100%;
		position: fixed;
		z-index: 5;
		top: 0;
		left: 0;
		background-color: rgb(0, 0, 0);
		background-color: rgba(0, 0, 0, 0.9);
		overflow-y: hidden;
		transition: 0.5s;
	}

	.overlay-content {
		position: relative;
		top: 25%;
		width: 100%;
		text-align: center;
		margin-top: 30px;
	}

	.overlay a {
		padding: 10px;
		text-decoration: none;
		font-size: 1.3rem;
		color: #818181;
		display: block;
		transition: 0.3s;
	}

	.overlay a:hover,
	.overlay a:focus {
		color: #f1f1f1;
	}

	.overlay .closebtn {
		position: absolute;
		top: 15px;
		right: 100px;
		font-size: 60px;
	}

	/* Hero Section */
	.hero-section {
		align-items: center;
	}

	.hero-section img {
		aspect-ratio: 360 / 310;
		object-fit: cover;
	}

	.hero-section h1 {
		grid-area: 1/1/3/2;

		padding: 0 30px;
		width: auto;
		text-align: center;
	}

	/* Main Section */
	.banner-yellow img {
		display: none;
	}

	.banner-yellow h2 {
		width: auto;
	}

	.section-main {
		flex-wrap: wrap;
		justify-content: space-between;

		margin-bottom: 2.8rem;
		padding: 0 30px;
	}

	.section-main > * {
		flex: 0 1 100%;
		margin: 0;
	}

	.section-main figure {
		order: -1;
	}

	.section-main h2 {
		margin: 1rem 0 0.5rem;
	}

	.section-main a {
		line-height: 1rem;
	}

	.section-main .text p:nth-child(2) {
		margin: auto;
	}

	.section-main .text p:nth-child(3) {
		margin: 1rem 0 1rem;
	}

	/* Aside Section */
	.banner-aside img {
		display: none;
	}

	.banner-blue {
		padding: 0.5em 30px;
	}

	.content-info {
		padding: 0 30px;
	}

	.section-info {
		flex: 0 1 100%;

		display: block;
		margin-top: 2rem;
	}

	.section-info figure {
		width: 100px;
		margin: auto;
	}

	.section-info .text-info {
		text-align: center;
	}

	.info-image img {
		aspect-ratio: 360 / 150;
		object-fit: cover;
	}

	/* Footer */
	footer {
		padding: 1.2em 30px 0.5em;
	}

	.nav-menu ul {
		flex-wrap: wrap;
		flex-direction: column;
		justify-content: center;

		padding: 0;
	}

	.nav-menu ul li {
		padding: 10px 0;
	}

	footer .social-menu ul {
		margin: auto;
		padding: 0;

		width: 70%;
	}

	footer p {
		text-align: center;
	}

	/* ######################################## Common All Pages - Mobile ######################################## */
	.hero-section .all-hero-img {
		aspect-ratio: 360 / 195;
		object-fit: cover;
	}

	.hero-section .all-hero-h1 {
		text-align: left;
		font-weight: 600;
	}

	/* ######################################## ABOUT US PAGE - Mobile ######################################## */
	#about-project-main {
		padding: 1rem 0 0rem;
	}

	#section-vision figure {
		order: 2;
	}

	#section-vision h2 {
		margin: 0.5rem 0 0.5rem;
	}

	/* ============== ASIDE Content- Team ==============  */

	#about-team {
		padding: 0 30px;
	}

	#about-team .team-member {
		flex: 0 1 calc(100% - 3em);
		padding: 0.5rem;
	}

	#about-project-main .about-project-section {
		margin-bottom: 0rem;
		padding-bottom: 1.5rem;
	}

	/* ######################################## CONTRIBUTE PAGE - Mobile ######################################## */

	#contribute-main {
		padding: 30px 30px 0;
	}

	.contribute-article {
		padding: 2.5rem 30px;
		text-align: justify;
	}

	.contribute-article h2 {
		font-size: 20px;
	}

	/* ######################################## ONGOING PROJECTS PAGE - Mobile ######################################## */
	/* map section */
	.project-article-map {
		padding: 30px;
	}

	.project-article-map h2 {
		flex: 0 1 100%;

		margin: auto;
	}

	.project-article-map p {
		flex: 0 1 100%;
		padding-bottom: 1rem;
	}

	/* map embedding styles */
	.project-article-map iframe {
		flex: 0 1 100%;

		height: 300px;
		overflow: hidden;
	}

	/* ######################################## IMPACT PAGE - Mobile ######################################## */
	#impact-main {
		padding: 30px;
	}

	.impact-section {
		flex: 0 1 100%;

		padding: 1rem;
	}

	.impact-section > * {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;

		text-align: center;
	}

	.impact-section figure {
		width: 120px;
		margin: auto;
	}

	/* youtube video embedding style */
	.impact-article-video iframe {
		flex: 0 1 100%;

		height: 300px;
		overflow: hidden;
	}
}

/* ============== Media Query for Mobile devices - Small  ============== */
@media screen and (max-width: 450px) {
	/* map */
	.project-article-map iframe {
		height: 200px;
	}

	/* youtube video */
	.impact-article-video iframe {
		height: 200px;
	}
}

/* overlay in mobile view - solving the height issue */
@media screen and (max-height: 450px) {
	.overlay {
		overflow-y: auto;
	}
	.overlay a {
		font-size: 20px;
	}
	.overlay .closebtn {
		font-size: 40px;
		top: 15px;
		right: 35px;
	}
}