/*
* CS1 - CASE STUDIE 1 - Helping Start-Ups Improve Customer Experience
* CS2 - Helping Companies Unlock Talent
* CS3 - Streamlining Data Processing
*/

/*--------------------------------------------------------------
# TITLE PAGE - CASE STUDIES
--------------------------------------------------------------*/
	#case-study{
		background: #0c2340;
		color: #f7f7f7;
	}

	.cs1-banner,
	.cs2-banner,
	.cs3-banner{
		padding: 6em 0 6em 0;
		margin: 0;
	} /*BANNER TITLE PAGE padding*/

	.cs1 > h1, 
	.cs2 > h1,
	.cs3 > h1{
		color: #00C756;
		font-size: 4em;
		font-weight: 700;
		line-height: normal;
		text-transform: capitalize;
		background-color: #0c2340;
    	z-index: 1;
		padding: 0 0.5em 0 1.5em;
	} /*TITLE config*/
	

	.cs1-content > h2,
	.cs2-content > h2,
	.cs3-content > h2{
		color: #A8ADB0;
		font-size: 3rem;
		font-weight: 600;
		line-height: normal;
		text-transform: uppercase;
		margin-left: 2.3em;
	}

	.cs1, .cs2, .cs3 {
		margin-bottom: 1em;
	}

	.title-line-container {
		display: flex;
		align-items: center;
	}

	.title-line {
		border-bottom: 0.5em solid #00c756;
		max-width: 100%;
		position: absolute;
		right: 0;
		z-index: 0;
		margin-top: 5.5em;
	}

/* RESPONSIVE TITLE PAGE */
		@media (max-width: 1400px){
			.cs1 > h1, .cs2 > h1, .cs3 > h1{
				font-size: 3.5em;
				padding-left: 0.9em;
			}
			.cs1-content > h2, .cs2-content > h2, .cs3-content > h2{
				font-size: 2.5em;
				margin-left: 1.3em;
			}
			.cs1-banner, .cs2-banner, .cs3-banner{
				padding: 5em 0 6em 0;
			}
			.title-line{
				margin-top: 5em;
			}
		}

		@media (max-width: 1200px){
			.cs1 > h1, .cs2 > h1, .cs3 > h1{
				font-size: 3em;
				padding-left: 1em;
			}
			.title-line{
				border-bottom: 0.4em solid #00c756;
				margin-top: 4em;
			}
		}

		@media (max-width: 1000px){
			.cs1 > h1 > br{
				display: none !important;
			}
			.cs1 > .title-line, .cs2 > .title-line, .cs3 > .title-line{
				display: none !important;
			}
			.cs1-content, .cs2-content, .cs3-content{
				border-left: 0.5em solid #00c756;
    			margin-left: 4em;
				padding-left: 2em;
				padding-right: 0;
			}
			.cs1 > h1, .cs2 > h1, .cs3 > h1{
				font-size: 2.5em;
				padding-left: 0;
				padding-right: 2em;
			}
			.cs1-content > h2, .cs2-content > h2, .cs3-content > h2{
				font-size: 2em;
				margin-left: 0;
			}
		}

		@media (max-width: 768px){
			.cs1 > h1, .cs2 > h1, .cs3 > h1{
				font-size: 2.5em;
				padding-left: 0;
				padding-right: 1.5em;
			}
			.cs1-content > h2, .cs2-content > h2, .cs3-content > h2{
				font-size: 2em;
				margin-left: 0;
			}
			.cs1-banner, .cs2-banner, .cs3-banner{
				padding: 5em 0 6em 0;
			}
			.cs1-content, .cs2-content, .cs3-content{
    			margin-left: 3em;
				padding-left: 1em;
			}
		}

		@media (max-width: 500px){
			.cs1 > h1, .cs2 > h1, .cs3 > h1{
				font-size: 30pt;
				padding-right: 2em;
			}
			.cs1-content > h2, .cs2-content > h2, .cs3-content > h2{
				font-size: 1.5em;
			}
			.cs1-content, .cs2-content, .cs3-content{
				border-left: 0.3em solid #00c756;
				margin-left: 2em;
			}
			.cs1-banner, .cs2-banner, .cs3-banner{
				padding: 3em 0 6em 0;
			}
		}

		@media (max-width: 425px){
			.cs1 > h1, .cs2 > h1, .cs3 > h1{
				font-size: 30pt;
				padding-right: 2em;
			}
			.cs1-banner, .cs2-banner, .cs3-banner{
				padding: 2em 0 5em 0;
			}
		}

		@media (min-width: 300px) and (max-width: 405px){
			.cs1 > h1, .cs2 > h1, .cs3 > h1{
				padding-right: 4em;
			}
		}



/* SECTION TITLES */
	#cs1-title1, #cs1-title2, #cs1-title3,
	#cs2-title1, #cs2-title2,
	#cs3-title1, #cs3-title2, #cs3-title3{
		margin-right: 1em;
	}
		
	#cs1-s2-title1, #cs1-s3-title2, #cs1-s4-title3,
	#cs2-s2-title1, #cs2-s3-title2,
	#cs3-s2-title1, #cs3-s3-title2, #cs3-s4-title3{
		font-size: 2em;
		font-weight: 600;
		color: #a8adb0;
		margin-left: 0.8em;
		line-height: normal;
		z-index: 2;
		position: relative;
		text-transform: uppercase;
	}

	/* GRAY EXCEPTION TITLES SECTION */
	#cs1-title1::before, #cs1-title2::before, #cs1-title3::before, /*Titles case study 1*/
	#cs2-title1::before, #cs2-title2::before, /*Titles case study 2*/
	#cs3-title1::before, #cs3-title2::before, #cs3-title3::before /*Titles case study 3*/{
		content: "";
		height: 1.8em;
		width: 1em;
		background-color: #a8adb0;
		position: absolute;
		margin: 0;
		margin-top: 0.3em;
	}

/* SECTION TITLES EXCEPTIONS */
	/* NORMAL TEXT */
	#cs1-s3-title2 > h6 > span, 
	#cs2-s2-title1 > h6 > span,
	#cs3-s3-title2 > h6 > span{
		text-transform: none;
	}

	/* BLUE TITLE */
		#cs1-s2-title1, #cs3-s2-title1{
			color: #0c2340 !important;
		}

		#cs1-title1::before, #cs3-title1::before{
			background-color: #0c2340 !important;
		}

	/* RESPONSIVE TITLE AREA */
		@media (max-width: 768px){
			#cs1-title1::before, #cs1-title2::before, #cs1-title3::before, 
			#cs2-title1::before, #cs2-title2::before,
			#cs3-title1::before, #cs3-title2::before, #cs3-title3::before{
				width: 0.5em;
				height: 1.5em;
				margin: 0;
			}
			#cs1-s2-title1, #cs1-s3-title2, #cs1-s4-title3,
			#cs2-s2-title1, #cs2-s3-title2,
			#cs3-s2-title1, #cs3-s3-title2, #cs3-s4-title3{
				font-size: 1.5em;
				top: -2px;
                padding-right: 1em;
			}
		}

/* SECTION GREEN SUBTITLES & TEXT */
	.cs1-s4-col > .card-body > h5,
	.cs2-s3-col > .card-body > h5,
	.cs3-s4-col > .card-body > h5,
	.cs1-2-card > .card-body > .card-title,
	.cs2-2-card > .card-body > .card-title,
	.cs3-2-card > .card-body > .card-title,
	.cs1-s3-card-cap > h5,
	.cs3-s3-card-cap > h5{
		color: #00c756;
		font-size: 20pt !important;
		text-transform: none;
	}

/* SECTION TEXT BODY */
	.cs-card-content > p, /*intro text*/
	.cs1-s3-card-cap > p, /*solutions text case1*/
	.cs1-s4-col > .card-body > p, /*results case1*/
	.cs3-s3-card-cap > p, /*solutions text case3*/
	.cs3-s4-col > .card-body > p, /*results case3*/
	.cs-card-content > div > ul > li, /*objectives*/
	.cs1-s4-col > .card-body > p, /*results case1*/
	.cs2-s3-col > .card-body > ul,
	.cs2-s2-text{
		color: #F3F3F3;
		text-align: justify;
		font-size: 14pt;
		list-style-position: outside;
	}

	@media (max-width: 768px){
		.cs-card-content > p, 
		.cs1-s3-card-cap > p,
		.cs1-s4-col > .card-body > p,
		.cs3-s4-col > .card-body > p,
		.cs3-s3-card-cap > p,
		.cs-card-content > div > ul > li,
		.cs1-s4-col > .card-body > p,
		.cs2-s3-col > .card-body > ul,
		.cs2-s2-text{
			font-size: 12pt !important;
		}
	}

/* CASES FIRST SECTION */
	.cs1-section1,
	.cs2-section1,
	.cs3-section1{
		padding: 0 6em;
		margin: 0;
		display: flex;
		justify-content: center;
	}/*SECTION config*/

	.cs1-section1-card,
	.cs2-section1-card,
	.cs3-section1-card{
		--bs-card-bg:none;
		--bs-border-width: 0;
	}

	.cs1-sec1-content,
	.cs2-sec1-content,
	.cs3-sec1-content{
		flex-direction: row-reverse;
	}

	.cs1-img > img,
	.cs2-img > img,
	.cs3-img > img{
		height: -webkit-fill-available;
	    object-fit: cover;
		padding-left: 2.5em;
	}
	
	.cs1-dark-card,
	.cs2-dark-card,
	.cs3-dark-card{
		background: transparent !important;
		border: 0.01em solid #a8adb0;
		padding: 2em;
	} /*CONFIG CARDS transparent intro +objetives*/
	
	.cs-card-content > h5{
		color: #00c756;
		padding-bottom: 0.5em;
	}

	.cs-card-content > div > ul{
		padding-left: 1em;
	}

	/* RESPONSIVE CASES FIRST SECTION */
		@media (max-width: 1400px){
			.cs1-section1, .cs2-section1, .cs3-section1{
				padding: 0 3.5em;
			}
			.cs1-img > img, .cs2-img > img, .cs3-img > img{
				padding-left: 1em;
			}
		}

		@media (max-width: 768px){
			.cs1-section1, .cs2-section1, .cs3-section1{
				padding: 0em 2em;
			}
			.cs1-img > img, .cs2-img > img, .cs3-img > img{
				padding-left: 0;
				width: 100%;
				height: auto;
			}
			.cs1-cards > .mb-5, .cs2-cards > .mb-5, .cs3-cards > .mb-5{
				margin: 0 !important;
				margin-top: 1.5em !important;
			}
			.cs1-dark-card{
				padding: 1em;
			}
			.cs1-dark-card, .cs2-dark-card, .cs3-dark-card{
				padding: 1em !important;
				margin-top: 1.5em !important;
			}
		}

		@media (max-width: 500px){
			.cs1-section1, .cs2-section1, .cs3-section1 {
				padding: 0em 1.5em;
			}
		}

/* CHANGES SECOND SECTION */
	.cs1-section2, .cs3-section2{
		background-color: #A8ADB0;
		margin-top: 6em;
		padding: 4em 0;
	}/*SECTION config*/

	.cs1-sec2-cards, .cs3-sec2-cards{
		padding: 2em 6em 0 6em;
	}

	.cs1-2-card, .cs3-2-card {
		--bs-card-border-radius: none;
		margin: 1em 0;
		border: 0;
		border-left: 1em solid #0c2340 !important;
	}

	.cs1-2-card > .card-body,
	.cs3-2-card > .card-body {
		margin: 1em 2em;
	}

	/* RESPONSIVE CHANGES SECOND SECTION */
		@media (max-width: 1400px){
			.cs1-section2, .cs3-section2{
				margin-top: 4em;
			}
			.cs1-sec2-cards, .cs3-sec2-cards {
				padding: 2em 3.5em 0 3.5em;
			}
		}

		@media (max-width: 768px){
			.cs1-sec2-cards, .cs2-sec2-cards, .cs3-sec2-cards {
				padding: 1.5em 2em 0 2em;
			}
			.cs1-2-card > .card-body > p, .cs3-2-card > .card-body > p {
				font-size: 12pt;
			}	
			.cs1-sec2-cards > div:first-child, .cs3-sec2-cards > div:first-child {
				margin: 0 0 1em 0 !important;
			}
		
			.cs1-sec2-cards > div:last-child, .cs3-sec2-cards > div:last-child{
				margin: 1em 0 0 0 !important;
			}
		}

		@media (max-width: 500px){
			.cs1-section2, .cs3-section2{
				margin-top: 3em;
				padding: 3em 0;
			}
			.cs1-2-card, .cs3-2-card{
				border-left: 0.5em solid #0c2340 !important
			}
			.cs1-2-card > .card-body, .cs3-2-card > .card-body{
				margin: 0.75em 1em;	
			}
			.cs1-sec2-cards, .cs2-sec2-cards, .cs3-sec2-cards{
				padding: 1.5em 1.5em 0 1.5em;
			}
		}

/* SOLUTIONS THIRD SECTION */
	.cs1-section3, .cs2-section2, .cs3-section3{
		padding: 6em 0;
	}/*SECTION config*/

	.cs1-s3-content > .card, .cs1-s3-card, 
	.cs3-s3-content > .card, .cs3-s3-card{
		--bs-border-color-translucent: none !important;
		--bs-card-bg: transparent;
	}

	.cs1-s3-content, .cs3-s3-content{
		padding: 4em 6em 2em 6em;
	}

	.cs1-s3-col > .col, .cs3-s3-col > .col{
		margin-bottom: 2em;
	}

	.cs1-s3-cap2, .cs1-s3-cap4,
	.cs3-s3-cap2, .cs3-s3-cap4{
		 margin-left: 1.5em;
	}

	.cs1-s3-cap1, .cs1-s3-cap3,
	.cs3-s3-cap1, .cs3-s3-cap3{
		 margin-right: 1.5em;
	}	

	/* RESPONSIVE CHANGES SECOND SECTION */
		@media (max-width: 1400px){
			.cs1-section3, .cs3-section3{
				padding: 4em 0;
			}
			.cs1-s3-content, .cs3-s3-content{
				padding: 2em 3.5em 0 3.5em;
			}
			.cs1-s3-cap2, .cs1-s3-cap4, .cs3-s3-cap2, .cs3-s3-cap4{
				 margin-left: 1em;
			}
			.cs1-s3-cap1, .cs1-s3-cap3, .cs3-s3-cap1, .cs3-s3-cap3{
				 margin-right: 1em;
			}
		}

		@media (max-width: 768px){
			.cs1-s3-content, .cs3-s3-content {
				padding: 2em 2em 1em 2em;
			}
			.cs1-s3-cap2, .cs1-s3-cap4, .cs3-s3-cap2, .cs3-s3-cap4, .cs1-s3-cap1, .cs1-s3-cap3, .cs3-s3-cap1, .cs3-s3-cap3{
				 margin: 0;
			}
			.cs1-s3-bg > img, .cs3-s3-bg > img{
				height: auto !important;
			}
		}

		@media (max-width: 500px){
			.cs1-section3, .cs3-section3 {
				padding: 3em 0;
			}
			.cs1-s3-content, .cs3-s3-content {
				padding: 1.5em 1.5em 2em 1.5em;
			}
			.cs1-s3-col > .col, .cs3-s3-col > .col {
				margin-bottom: 1em;
			}
			.cs1-s3-col > div:last-child, .cs3-s3-col > div:last-child {
				margin-bottom: 3em;
			}
		}


/* RESULT FOUR SECTION */
	.cs1-section4,
	.cs2-section3,
	.cs3-section4{
		padding-bottom: 6em;
	}/*SECTION config*/

	.cs1-s4,
	.cs2-s3,
	.cs3-s4{
		padding: 3em 6em 2em 6em;
	}

	.cs1-s4 > .card,
	.cs2-s3 > .card,
	.cs3-s4 > .card{
		--bs-card-bg: #f7f7f71c;
		--bs-border-radius: 0.5em;
		border: 0.15em solid #00c756;
		box-shadow: -2px 2px 10px 8px #07182f;
	}

	.cs1-s4-col,
	.cs2-s3-col,
	.cs3-s4-col{
		padding: 4em;
	}
	
	.cs2-s4-col{
		padding-left: 5em !important;
	}

	.cs1-s4-col > .card-body,
	.cs2-s3-col > .card-body,
	.cs3-s4-col > .card-body{
		padding-bottom: 3em;
	}

	.cs2-s4-col > .card-body > .list-card{
		list-style-position: outside;
		text-align: justify;
	}
	
	.cs1-s4-col > div:last-child, 
	.cs2-s3-col > div:last-child,
	.cs3-s4-col > div:last-child{
		padding: 0;
	}

	/*EXCEPTION CARD LIST*/
		.cs2-s3-col > .card-body > ul{
			padding-left: 1em;
		}

		.list-card > li > span{
			color: #00C756;
			font-weight: 600;
		}


	/* RESPONSIVE CHANGES SECOND SECTION */
		@media (max-width: 1400px){
			.cs1-s4, .cs2-s3, .cs3-s4{
				padding: 2em 3.5em 0 3.5em;
			}
			.cs1-s4-col, .cs2-s3-col, .cs3-s4-col {
				padding: 3em;
			}
			.cs2-s4-col{
				padding-left: 4em !important;
			}
			.cs1-section4, .cs2-section3, .cs3-section4 {
				padding-bottom: 4em;
			}
		}

		@media (max-width: 768px){
			.cs1-s4, .cs2-s3, .cs3-s4{
				padding: 2em 2em 0 2em;
			}
			.cs1-s4-col, .cs2-s3-col, .cs3-s4-col {
				padding: 1.5em;
			}
			.cs2-s4-col{
				padding-left: 3em !important;
			}
			.cs1-s4 > .card >.row, .cs2-s3 > .card >.row, .cs3-s4 > .card >.row {
				flex-direction: column-reverse;
			}
			.cs1-s4-img, .cs2-s3-img, .cs3-s4-img{
				display: flex;
				border-bottom-right-radius: 0.5em;
				border-top-left-radius: 0 !important;
				width: 100%;
				height: auto !important;
			}
			.list-card > li{
				font-size: 13pt !important; /* case 2 result card*/
			}
		}

		@media (max-width: 500px){
			.cs1-s4, .cs2-s3, .cs3-s4 {
				padding: 1.5em 1.5em 0 1.5em;
			}
			.cs1-s4-col, .cs2-s3-col, .cs3-s4-col {
				padding: 2em 1em;
			}
		}


	/* SOLUTIONS CARDS */
		.cs2-s2-text{
			padding: 4em 6em;
		}

		.cs2-s2-text > p{
			font-size: 14pt !important;
		}

		.cs2-2-card > .card-body {
			margin: 2em;
		}

		#cs2-s2-cards{
			display: flex;
			flex-direction: row;
			width: 100%;
			padding: 0 6em 1em 6em;
		}

		#cs2-s2-box, .cs2-sec2-cards{
			width: 50%;
		}

		.cs2-sec2-cards{
			padding-left: 4em;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

		.cs2-solid-card{
			border: 0;
			background-color: #a8adb0 !important;
			padding: 2em;
			color: aliceblue;
		}

		.cs2-2-card{
			--bs-card-border-radius: none;
			border: 0;
			border-left: 1em solid #adadb0 !important;
		}

		.cs2-2-b-title{
			color: #0c2340 !important;
			text-transform: none !important;
		}

		.cs2-2-b-title > span{
			color: #f7f7f7;
		}

		.cs2-solid-card > .cs-card-content > .card-body > ul > li{
			color: #0c2340;
		}/*EXCEPTION CARD*/

		.cs2-solid-card > .cs-card-content > .card-body > ul{
			padding: 0.5em 2em;
		}

		.card-img-top{
			max-height: 45em;
			height: 25em;
			object-fit: cover;
		}/*SOLUTION IMG*/
			/* RESPONSIVE SOLUTIONS IMG AREA */
			@media (min-width: 1701px){
				.card-img-top{
					height: 45em;
				}
			}

			@media (max-width: 1700px){
				.card-img-top{
					height: 40em;
				}
			}

			@media (max-width: 1500px){
				.card-img-top{
					height: 40em;
				}
			}
	

		/* RESPONSIVE SOLUTIONS CARDS AREA */
			@media (max-width: 1400px){
				.cs2-s2-text{
					padding: 2em 3.5em;
				}
				#cs2-s2-cards{
					padding: 0 3.5em;
				}
				.cs2-section2{
					padding: 4em 0;
				}
				.cs2-sec2-cards{
					padding-left: 2em;
				}
			}

			@media (max-width: 1080px){
				#cs2-s2-cards{
					flex-direction: column;
				}
				#cs2-s2-box, .cs2-sec2-cards{
					width: 100%;
				}
				.cs2-sec2-cards{
					padding: 0;
				}
				.cs2-2-card{
					margin-top: 1.5em;
				}
			}

			@media (max-width: 768px){
				.cs2-s2-text {
					padding: 2em;
					font-size: 13pt;
				}
				#cs2-s2-cards {
					padding: 0 2em;
				}
				.cs2-solid-card{
					padding: 1em;
				}
				.cs2-2-card > .card-body{
					margin: 1em 1.5em;
				}
			}

			@media (max-width: 500px){
				.cs2-solid-card > .cs-card-content > .card-body > ul{
					padding: 0.5em 1em;
				}
				.cs2-2-card {
					border-left: 0.5em solid #adadb0 !important;
				}	
				.cs2-2-card > .card-body{
					margin: 0.7em 1em;
				}	
			}

	/*END SOLUTIONS CARDS*/

/* CALL TO ACTION */
	.action-banner{
		background-color: #f7f7f7;
	}


/* FIREFOX EXCEPTIONS */
	@-moz-document url-prefix() {
		.cs1-s3-col > .col > .card > .card-body > h5 > li,
		.cs1-s4-col > .card-body > .card-title > li,
		.cs3-s3-col > .col > .card > .card-body > h5 > li,
		.cs3-s4-col > .card-body > .card-title > li {
			margin-left: 1em;
		}
	}