@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@400;600&family=Poppins:wght@400;500;700&display=swap");
:root {
	--primary-color: rgb(14, 151, 175);
}

ul {
	list-style: none;
}

body {
	margin: 0;
	padding: 0px 0 0 0;
	font-family: 'Poppins', sans-serif;
	font-size: 0.9em;
	text-align: justify;
}

* {
	margin: 0;
	padding: 0;
}

.container,
.case-studies {
	width: 100%;
	margin: 0;
	padding: 1em 0;
	/* background-color: var(--primary-color); */
	color: rgb(15, 15, 15);
	background: rgb(227, 227, 227);
}
.wrapper {
	margin: 0 auto;
	padding: 0;
	width: 80%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	text-align: center;
}

.gap-navigation{
	margin-top: 4em;
}

.role {
	padding: 1em 0;
}

.role h3 {
	text-align: left;
}

.role img {
	border-radius: 0 !important;
	margin-top: 1em;
	max-width: 50%;
	min-width: 50%
}

.wrapper .h1 {
	margin-top: 3em;
	background-color: rgba(255, 255, 255, 0.8);
	line-height: 1.3em;
	width: 400;
	padding: 1em;
	color: #000;
}

.wrapper ul {
	display: grid;
	grid-template-columns: repeat(5, 38px);
	width: 192px;
}
.wrapper .email{
	display: inline-block;
	padding: 0.5em;
	text-align: center;
	background-color: rgb(14, 151, 175);
	border-radius: 50px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	font-size: 1.5em;
	color: rgb(255, 255, 255) !important;
	width: 200px;
	
}
.wrapper .talign{
	text-align: left;
}

.wrapper .email:hover{
	background: none;
	border: 2px solid rgb(14, 151, 175);
	color: rgb(14, 151, 175) !important;
	
}



.wrapper ul li {
	text-align: left;
	display: inline-block;
}

.wrapper ul li img {
	width: 30px;
	margin-right: 20px;
}

.wrapper h1 {
	font-size: 1.8em;
	line-height: 1.2em;
	font-weight: normal;
	text-align: left;
	margin: 0.5em 0;
}

.wrapper h3 {
	font-size: 1.4em;
	line-height: 1em;
	font-weight: normal;
	margin: 0.5em 0 1em 0;
}

.wrapper p {
	text-align: left;
	padding: 0 0 1em 0;
}

.wrapper .profile-name {
	text-align: center;
}

.wrapper img {
	width: 200px;
	border-radius: 50%;
}

.general {
	grid-template-columns: 1fr;
	text-align: center;
}

.general img {
	width: 100%;
	border-radius: 0%;
	}

.general .content,
.general h3 {
	text-align: left;
}


.mockups{
	max-width: 90%;
	min-width: 90%;
}



/* CASE STUDY SECTION HOME PAGE */

.case-studies {
	background-color: #fff;
}

.bg-white {
	background: #fff !important;
	padding: 2.5em 0 !important;
}

.case-studies .wrapper {
	margin: 0 auto;
	padding: 0.3em;
	width: 80%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	text-align: center;
}

.case-studies .wrapper div {
	margin: 0 1em;
}

.case-studies .wrapper a,
.case-studies .wrapper a:visited {
	color: #fff;
	background-color: var(--primary-color);
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	font-size: 1.2em;
	line-height: 1.8em;
	border-radius: 50px;
	
	display: block;
	width: 140px;
	height: 30px;
	font-weight: normal;
	text-decoration: none;
	margin: 10px auto 0 auto;
	text-align: center;
}

.case-studies .wrapper a:hover {
	border: 2px solid var(--primary-color);
	color: var(--primary-color);
	background: none;
}

.case-studies h1 {
	font-size: 1.8em;
	line-height: 1em;
	font-weight: normal;
	text-align: center;
	margin: 0.5em 0 1em 0;
}

.case-studies .wrapper h2 {
	font-size: 1.5em;
	line-height: 1.4em;
	font-weight: normal;
	margin: 0.5em 0;
	border-bottom: 1px solid var(--primary-color);
}

.case-studies .wrapper h3 {
	text-align: left;
}

.case-studies .wrapper p {
	text-align: left;
	padding: 0 0 1em 0;
}

.case-studies .wrapper .profile-name {
	text-align: center;
}

.case-studies .wrapper img {
	width: 100%;
	border-radius: 0%;
}


/* CASE STUDY PAGE */

.art-history-banner,
.elderly-care-banner, .pastryshop-banner {
	height: 300px;
	background-repeat: no-repeat;
	background-position: 0% 0% !important;
	background-size: cover !important;
}

.art-history-banner {
	background: #F0F0F0 url("../images/art/bg-art-history.png");
}
.pastryshop-banner {
	background: #F0F0F0 url("../images/pastryshop/pastryshop-banner.png");
}

.elderly-care-banner {
	background: #F0F0F0 url("../images/elder/bg-elderly-care.png");
}

.case-studies-main {
	background-color: #fff;
}

.case-studies-main .wrapper {
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto auto auto;
	grid-template-areas: "a b" "c d" "e f" "g h"
}

#a {
	grid-area: a;
}

#b {
	grid-area: b;
}

#c {
	grid-area: c;
}

#d {
	grid-area: d;
}

#e {
	grid-area: e;
}

#f {
	grid-area: f;
}

#g {
	grid-area: g;
}

#h {
	grid-area: h;
}

.case-studies-main .wrapper img {
	width: 100%;
	border-radius: 0%;
}
.case-studies-main h1 {
	text-align: left;
}
/* Pain Points Section */
.painpoints{
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}
.painpoints2{
	width: 50%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 0 auto;
}
.painpoints p, .painpoints2 p{
	padding: 1em;
	text-align: center;
}
.painpoints h4, .painpoints2 h4{
	/* color: #fff; */
	font-size: 1.5em;
	line-height: 1.1em;
	
}
.painpoints h4 span, .painpoints2 h4 span{
	padding: 0.5em;
	background-color: rgb(14, 151, 175);
	width: 24px;
	height: 24px;
	text-align: center;
	color: #fff;
	border-radius: 100px;
	display: inline-block;
}
.contact-section{
	min-height: 72vh;
}
/* Footer Style */
.footer-bg{
	background: #2b2a2a;
}
.footer {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	text-align: center;
	align-items: baseline;
	
}

.wrapper .links {
	text-align: left;
	padding-bottom: 1em;
}
.wrapper .links a{
	text-decoration: none;
	color: #fff;
}
.wrapper .links a:hover{
	color:rgb(14, 151, 175);
}
.wrapper  .links ul{
	display: grid;
	grid-template-columns: 1fr;
}
.wrapper  .links ul li{
	height: 27px;
}
@media only screen and (min-width: 320px) and (max-width: 768px) {
	.art-history-banner,
	.elderly-care-banner,
	.pastryshop-banner {
		height: 130px;
		background-position: 0% -1%;
		background-size: cover;
	}
}
@media only screen and (min-width: 320px) and (max-width: 768px) {
	.wrapper ul li {
		text-align: center;
	}
}

@media only screen and (min-width: 320px) and (max-width: 768px) {
	.wrapper .talign{
		text-align: center;
	}
}

@media only screen and (min-width: 320px) and (max-width: 768px) {
	.footer #brand {
		margin-top: 0;
	}
}
@media only screen and (min-width: 320px) and (max-width: 768px) {
	.wrapper .email{
		margin: 0 auto;
		
	}
}


@media only screen and (min-width: 320px) and (max-width: 768px) {
	.wrapper .h1 {
		margin-top: 1em;
		line-height: 1.2em;
		font-size: 1.5em;
		width: 200px;
	}
}

@media only screen and (min-width: 320px) and (max-width: 768px) {
	.wrapper,
	.case-studies .wrapper {
		grid-template-columns: 1fr;
	}
}

@media only screen and (min-width: 320px) and (max-width: 768px) {
	.wrapper ul {
		margin: 0 auto;
	}
}

@media only screen and (min-width: 320px) and (max-width: 768px) {
	.case-studies .wrapper h1, .case-studies-main h1, .wrapper h1, h1, .big-white h1  {
		text-align: center;
	}
}

/* @media only screen and (min-width: 320px) and (max-width: 768px) {
	.case-studies-main h1 {
		text-align: center;
	}
} */




@media only screen and (min-width: 1000px) {
	img {
		width: 100%;
	}
}

@media only screen and (min-width: 1000px) {
	.wrapper,
	.case-studies .wrapper {
		width: 70%;
	}
}

@media only screen and (min-width: 320px) and (max-width: 768px) {
	.case-studies-main .wrapper {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto auto auto auto auto auto;
		grid-template-areas: "a" "b" "d" "c" "e" "f" "h" "g"
	}
}
@media only screen and (min-width: 320px) and (max-width: 768px) {
	.painpoints, .painpoints2{
		grid-template-columns: 1fr;
	}
}
@media only screen and (min-width: 320px) and (max-width: 768px) {
	body {
		
		padding: 0;
		
	}
}
@media only screen and (min-width: 320px) and (max-width: 768px) {
	.footer {
		display: grid;
		grid-template-columns: 1fr;
		text-align: center;
		
		
	}
}

@media only screen and (min-width: 320px) and (max-width: 768px) {
	.brand {
		display: inline-block;
		
		
	}
}

@media only screen and (min-width: 1552px) and (max-width: 1728px) {
	body {
		font-size: 1.3em;
	}
}

@media only screen and (min-width: 1552px) and (max-width: 1728px) {
	.wrapper .h1 {
		font-size: 1.5em;
	}
}