/*** transformation benefits ***/
.transformation-flex-container {
display:flex;
flex-wrap:wrap;
font-size:19px;
font-weight:bold;
justify-content:center;
padding:40px 0px;
background-image:linear-gradient(to bottom left, rgba(87, 164, 77, 0.83), rgba(4, 153, 183, 0.82));
background-repeat:no-repeat;
background-size:cover;
background-position:center;
}

.transformation-flex-item-header, 
.transformation-flex-item-subheader {
flex:100%;
text-align:center;
color:#fff;
}

.transformation-flex-item-header {
font-size:2.125em;
font-weight:bold;
}

.transformation-flex-item-subheader {
padding-top:0.5em;
padding-bottom:1.5em;
font-size:1.2em;
}

.transformationbenefits-flex-item {
flex:220px 1 0;
text-align:center;
padding:15px 10px;
}

.transformationbenefits-flex-item i {
font-size:85px;
font-weight:bold;
color:#fff;
}

.transformationbenefits-flex-item p {
margin:0;
font-size:22px;
color:#fff;
padding-top:14px;
}

.transformationbenefits-lord-icon {
width:130px;
height:130px
}

/*** Styling ***/
@media (min-width:320px) and (max-width:499px) {
.transformation-flex-container {background-image: linear-gradient(to top, rgba(87, 164, 77, 0.83), rgba(4, 153, 183, 0.82));}
.transformationbenefits-flex-item {flex:100%;}
.transformation-flex-item-header {font-size:1.0em;padding:0 10px;}
.transformationbenefits-lord-icon {width:100px;height:100px}
.transformationbenefits-flex-item p {font-size:18px;}
}

/*** metrics ***/

.metrics-intro {
display:flex;
flex-wrap:wrap;
flex-direction:row;
}

.metrics-intro-item {
flex:1 1 0%;
padding:30px 20px 10px 20px;
margin:5px;
}

.metrics-title, .metrics-subtitle {
text-align:center;
}

.metrics-title {
font-size:2.125em;
font-weight:bold;
}

.metrics-subtitle {
padding-top:0.5em;
padding-bottom:0.5em;
font-size:1.2em;
}

.metrics-grid {
display:flex;
flex-wrap:wrap;
flex-direction:row;
padding:0 2em 3em 2em;
}

.metrics-grid-item {
flex:1 1 30%;
min-width:300px;
margin:5px;
padding:0 2em 0 2em;
}

.metric {
margin-left:10px;
font-size:5em;
font-weight:bold;
background: linear-gradient(to bottom left, rgba(87, 164, 77, 0.83), rgba(4, 153, 183, 0.82));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.metric-title {
font-size:1.1em;
font-weight:bold;
}

.metric-caption {
padding-top:0.5em;
padding-bottom:0.5em;
font-size:0.9em;
}

/********** metric media queries ***********/

@media (min-width:320px) and (max-width:499px) {
.metric {font-size:3em;}
.metric-title{font-size:0.8em;padding:0 30px;}
.metric-caption{display:none;}
}

@media (min-width:320px) and (max-width:720px) {
.metrics-grid, .metrics-grid-item {text-align:center;}
.metrics-grid {padding:0 0 3em 0;}
}

@media (min-width:320px) and (max-width:363px) {
.metrics-title {font-size:1.4em;}
.metrics-subtitle {font-size:1em;padding-bottom:0;}
.metrics-intro-item {padding-bottom:0;}
}

@media (min-width:364px) and (max-width:408px) {
.metrics-title {font-size:1.8em;}
.metrics-subtitle {font-size:1.1em;padding-bottom:0;}
.metrics-intro-item {padding-bottom:0;}
}


/*** carousel ***/
.slide1, .slide2, .slide3, .slide4 {
background-color:#eff2f3;
}

.slide-grid {
display:grid;
grid-gap:2px;
grid-template-columns: repeat(5, minmax(170px, 220px));
justify-content:center;
align-content:center;
padding-top:110px;
padding-bottom:75px;
}

.slide-grid-item {
padding:0px;
}

.slide-grid img {
width:100%;
height:100px;
padding:10px;
object-fit: contain;
}

.carousel-inner {
position:relative;
}

.slide-header {
position:absolute;
text-align:center;
top:20%;
left:50%;
transform:translate(-50%, -50%);
}

.slide-header h1 {
font-size:2em;
font-weight:bold;
}

.carousel .carousel-indicators li {
width:0.6em;
height:0.6em;
border-radius:100%;
border:1px solid #323e48;
background-color:transparent;
}

.carousel .carousel-indicators li.active {
background-color:#fcb900;
}

/*** carousel media queries ***/

@media (min-width:320px) and (max-width:499px) {
.slide-grid {grid-template-columns:200px;padding-top:80px;padding-bottom:50px;}
.slide-grid-item {height:75px;padding:0px;}
.slide-header {top:12%;}
}

@media (min-width:500px) and (max-width:850px) {
.slide-grid {grid-template-columns:200px;padding-top:100px;padding-bottom:70px;}
.slide-grid-item {height:75px;}
.carousel-indicators{bottom: 10px;}
.slide-header {top:12%;}
}

@media (min-width:320px) and (max-width:499px) {
.slide-header {left:50%;}
.slide-header h1 {font-size:1.21em;left:40%;}
}

/* Case Study 
---------------------------------------------*/

.index-casestudy-container {
/*background-color:#eff2f3;*/
display:grid;
grid-template-columns:650px 1fr;
grid-auto-rows:auto;
grid-gap:1px;
padding:50px 0;
margin:50px 0;
}

.index-casestudy-item-left {
display:flex;
flex-direction:column;
align-items:left;
justify-content:left;
}

.index-casestudy-item-right {
display:flex;
flex-direction:column;
/*align-items:center;*/
/*justify-content:center;*/
padding:75px 30px 0 0;
}

.index-casestudy-left-heading {
margin-left:30px;
padding:50px 0 20px 0;
font-size:15px;
position:relative;
font-weight:bold;
}

.index-casestudy-left-caption {
margin-left:30px;
font-size:48px;
font-weight:bold;
}

.index-casestudy-left-heading-footnote {
margin-left:30px;
font-size:28px;
font-weight:bold;
padding-top:35px;
}

.index-casestudy-left-desc {
margin-left:30px;
font-size:16px;
padding:30px 0 40px 0;
font-weight:bold;
}

/*** case study media queries */

@media (min-width:320px) and (max-width:499px) {
}

@media (min-width:500px) and (max-width:1085px) {
.index-casestudy-container {grid-template-columns:1fr;}
.index-casestudy-item-left {align-items:center;justify-content:center;}
.index-casestudy-left-heading:after {left:30%;}
.index-casestudy-left-desc {text-align:center;}
}


/* Our mission 
---------------------------------------------*/

.index-mission-container {
background-color:#eff2f3;
display:grid;
grid-template-columns:350px 1fr;
grid-auto-rows:auto;
grid-gap:1px;
padding:150px 0;
margin:50px 0;
}

.index-mission-item-left {
display:flex;
flex-direction:column;
align-items:left;
justify-content:left;
}

.index-mission-item-right {
display:flex;
flex-direction:column;
/*align-items:center;*/
/*justify-content:center;*/
padding:0 30px 0 0;
}

.index-mission-left-heading {
margin-left:30px;
padding:0px 0 20px 0;
font-size:28px;
position:relative;
font-weight:bold;
}

.index-mission-left-desc {
margin-left:30px;
font-size:32px;
padding:0px 0 40px 0;
font-weight:bold;
}

/*** case study media queries */

@media (min-width:320px) and (max-width:499px) {
}

@media (min-width:500px) and (max-width:1085px) {
.index-mission-container {grid-template-columns:1fr;}
.index-mission-item-left {align-items:center;justify-content:center;}
.index-mission-left-heading:after {left:30%;}
.index-mission-left-desc {text-align:center;}
}



/* Client Feeback 
---------------------------------------------*/

.index-clientfeedback-container {
display:flex;
flex-direction:row;
margin:20px;
padding:120px 0;
}

.index-clientfeedback-item-left {
flex: 0 1 50%;
display:flex;
flex-direction:column;
align-items:left;
justify-content:left;
padding:50px 30px;
position:relative;
}

.index-clientfeedback-item-left-title {
font-size:3em;
font-weight:bold;
line-height:1.2em;
padding-bottom:20px;
position:relative;
color:#5a6771;
}

.index-clientfeedback-item-right {
flex: 0 0 575px;
}

.slideA, .slideB, .slideC, .slideD {
background-color:transparent !important;
min-height:430px;
padding:50px 20px 50px 30px;
}

.ac-intro-carousel-slide-header {
font-size:1.55em;
color:#5a6771;
padding-bottom:30px;
line-height:1.8em;
}

.carousel-caption {
text-align:left !important;
padding-top:0 !important;
left:30px !important;
color:#5a6771 !important;
max-width: 100%;
width:100%;
}

.ac-intro-carousel-slide-name {
font-size:1em;
color:#5a6771;
padding-top:30px;
}

.ac-intro-carousel-slide-title {
font-size:0.7em;
color:#5a6771;
padding-top:10px;
}

/*** into carousel media queries */

@media (min-width:500px) and (max-width:1085px) {
.index-clientfeedback-container {flex-direction:column;padding:0;}
.index-clientfeedback-item-left {padding:20px 0;}
.index-clientfeedback-item-left-title {text-align:center;padding:0;margin:0;}
.index-clientfeedback-item-left-title:after{font-align:center;left:48%;}
.index-clientfeedback-item-right {padding:0;margin:0;flex:0 0 auto;}
.slideA, .slideB, .slideC, .slideD {padding:0px 0px;min-height:400px;}
.ac-intro-carousel-slide-header {text-align:center;padding:0 20px;margin:0;}
.carousel-caption {text-align:center !important;left:0 !important;padding:20px 0 !important;}
#clientQuotesA{display:none;}
#clientQuotesB{display:block;}
}

@media (min-width:1086px) {
#clientQuotesB{display:none;}
}