html {
	background: var(--black2);
	color: var(--timberwolf);
	font-family: "Montserrat", serif;
	font-size: 20px;
	font-weight: 450;
}

body {
	display: grid;
	place-items: center;
	margin: 0px;
}

p {
	line-height: 24px;
}

#content {
	background: var(--night);
	max-width: 1016px;
	width: 100%;
}

header {
	margin: 8px;
}

header .navbar {
	display: flex;
	justify-content: space-between;
	background-color: var(--pakistan-green);
	border-radius: 10px;
	min-height: 62px;
	box-shadow: var(--night) 0px 0px 5px inset;
}

header .navbar .logo {
	display: none;
	line-height: 58px;
	margin-left: 20px;
	font-family: "Audiowide", serif;
	font-weight: bold;
	font-style: italic;
	font-size: 30px;
	color: var(--night);
	text-decoration: none;
	text-shadow: 4px 4px 5px rgba(0, 0, 0, 0.45);
}

header nav {
	background-color: var(--pakistan-green);
	box-shadow: var(--night) 0px 0px 5px inset;
	border-radius: 10px;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
	white-space: nowrap;
	width: 100%;
}

header nav.menuOpen {
	display: flex;
}

header nav a {
	line-height: 61px;
	margin-right: 0px;
	border-radius: 5px;
	color: var(--silver);
	font-size: 24px;
	text-decoration: none;
	padding: 4px 9px;
	white-space: nowrap;
	margin: 8px;
}

header nav a.selected, header nav a:hover {
	background-color: var(--night);
	box-shadow: 0px 0px 5px var(--night);
}

#menu-btn {
	cursor: pointer;
	background-color: var(--night);
	border: solid 3px var(--pakistan-green);
	box-sizing: border-box;
	border-radius: 5px;
	width: 62px;
}

#menu-btn.menuOpen img.menu-icon {
	display: none;
}

#menu-btn:not(.menuOpen) img.close-icon {
	display: none;
}

h1 {
/* 	font-family: "Cardo", serif; */
/* 	color: var(--silver); */
	font-size: 55px;
	font-weight: 500;
	text-align: center;
}

h2 {
	/* color: var(--silver); */
	font-size: 28px;
	font-weight: normal;
	text-align: center;
}

h3 {
	font-size: 24px;
	font-weight: normal;
	text-align: center;
}

#sec-headline {
	margin: 0px 8px;
}

#sec-headline h1 {
	margin: 100px 0px;
}

#sec-headline .cta-wrapper {
	display: flex;
	justify-content: center;
}

#sec-headline .cta-wrapper div {
	text-align: center;
}

#sec-headline .cta-wrapper .cta-btn {
	line-height: 200px;	
}

#sec-headline .cta-wrapper .side {
	display: none;
}

.cta-btn {
	background-color: var(--pakistan-green);
	border-radius: 30px;
	color: var(--night);
	text-decoration: none;
	font-size: 30px;
	font-weight: bold;
	padding: 11px 25px;
	box-shadow: var(--night) 0px 0px 5px inset;
	text-shadow: 0px 4px 5px rgba(0, 0, 0, 0.35);
	white-space: nowrap;
	border: 0px;
    font-family: "Montserrat", serif;
}

.cta-btn:hover {
	background-color: var(--forest-green);
}

#sec-agitate {
	margin: 225px 8px 0px 8px;
	display: flex;
	justify-content: center;
}

#sec-agitate .border {
	border: solid 3px var(--pakistan-green);
	border-radius: 30px;
	text-align: center;
	max-width: 828px;
}

#sec-agitate .border div {
	text-align: center;
}

#sec-agitate p.problem {
	margin: 45px 19%;
}

#sec-agitate p.resolution {
	color: var(--pakistan-green);
	font-weight: bold;
	font-size: 24px;
	text-shadow: 0px 4px 4px var(--black);
	margin: 60px 7%;
}

#sec-services {
	margin: 225px 8px 0px 8px;
	display: flex;
	justify-content: center;
}

#sec-services .card {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 40px;
	border: solid 3px var(--pakistan-green);
	border-radius: 15px;
	text-align: center;
	max-width: 940px;
}

#sec-services h2 {
	font-weight: 500;
}

#sec-services img {
	height: 90px;
	width: 90px;
	margin: 30px;
}

#sec-services p {
	margin: 20px 25px;
}

.sec-cta {
	margin: 150px 8px 150px 8px;
	display: flex;
	justify-content: center;
}

footer {
	display: flex;
	justify-content: center;
	border-top: solid 3px var(--pakistan-green);
}

footer p {
	font-size: 15px;
	text-align: center;
}



#sec-form-headline p {
	text-align: center;
}

#sec-form {
  margin: 50px 38px 0px 38px;
	gap: 40px;
	display: flex;
	flex-direction: column;
}

#sec-form .input-wrapper label, #sec-form .input-wrapper input {
    display: block;
}

#sec-form .input-wrapper-row {
	display: flex;
	flex-direction: column;
	gap: 38px;
}

#sec-form label {
	white-space: nowrap;
	margin: 0px 0px 5px 11px;
}

#sec-form input {
	height: 50px;	
}

#sec-form input:focus, #sec-form textarea:focus {
  outline: 0 !important;
	border-color: var(--forest-green);
}

#sec-form input, #sec-form .input-wrapper-row .input-wrapper {	
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
}

#sec-form textarea {	
	box-sizing: border-box;
	max-width:  100%;
	min-width:  100%;
	min-height: 220px;
	resize:vertical;
}

input, textarea {
	background-color: var(--night);
	border: solid 3px var(--pakistan-green);
	border-radius: 9px;
	color: var(--body);
	font-size: 20px;
	padding: 3px 10px;
}



.main-about section, #sec-about-cta {
	margin: 60px 0px 0px 0px;
}

#sec-profile {
	display: flex;
	justify-content: center;
}

#img-portrait {
	max-height: 240px;
	max-width: 240px;
	border-radius: 50%;
}

#sec-copy-about-me {
	display: flex;
	justify-content: center;
}

#sec-copy-about-me p {
	max-width: 542px;
	text-align: center;
}

#sec-post-scriptum p {
	text-align: center;
}

#sec-contact {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#sec-contact p {
	text-align: center;
}

#sec-contact a {	
	color: var(--timberwolf);
}

#sec-contact {	
	margin-bottom: 110px;
}



@media (min-width: 430px) {	
	#menu-btn {
		display: none;
	}
	
	header nav {
		display: flex;
		flex-direction: row;
		background: none;
		box-shadow: none;
		width: 400px;
	}
	
	header nav a {
		margin: 0px;		
	}
}

@media (min-width: 480px) {
	header nav {
		width: 450px;
	}

	#sec-form .input-wrapper-row {
		flex-direction: row;
	}
}

@media (min-width: 630px) {
	#sec-headline .cta-wrapper .side {
		display: block;
	}

	#sec-headline .cta-wrapper div {
		width: calc(100% / 3);
	}
	
	#sec-services .card {
		flex-direction: row;
	}
	
	#sec-services img {
		margin: 55px;
	}
}

@media (min-width: 750px) {
	header .navbar .logo {
		display: inline;
	}
}