@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root{
  
  --color-11: #009284;
  --color-12: #001822;
	--font-primary: "Montserrat", sans-serif;

}

.container-fluid{
	padding: unset !important;
}
.case-study {
    /* border: 1px solid white; */
    padding-top: 100px;
	padding-inline: 5vw;
    font-family: var(--font-primary);
}

h6.title {
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    display: inline-grid;
}
h6.title.for_whitebg .overlays_title {
    background: white;
}

h6.title.for_whitebg .txt:before {
    background: var(--color-12);
}
h6.title .txt:before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 100px;
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
}
h6.title .overlays_title {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 9;
}

h6.title .txt {
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    padding: 6px 15px 6px 30px;
    border-radius: 100px;
    background: rgb(0 24 34 / 10%);
    position: relative;
    z-index: 3;
}

h6.title.for_whitebg .txt {
    color: var(--color-02);
}

h2{
 font-size: clamp(1.35rem, 3vw, 42px);
 font-weight: 400;
 line-height: 1;
	color: #000;
}

.case-study .container-fluid{
	padding-inline: unset;
	padding-top:0px;
}

.case-study .results-cards {
/*	min-height: 500px;*/
	margin-top: 5vw;

	border-radius:15px;
	color: #DFE2E4;
	padding:34px;
}

.case-study .results-cards:last-child {
	margin-bottom: 5vw;
}

.case-study .results-cards:nth-of-type(1),
.case-study .results-cards:nth-of-type(4){
	background-color: var(--color-12); 
}
.case-study .results-cards:nth-of-type(2),
.case-study .results-cards:nth-of-type(5){
	background-color: #DEF0EF; 
	color:black;
}
.case-study .results-cards:nth-of-type(3),
.case-study .results-cards:nth-of-type(6){
	background-color: var(--color-11);
}

.case-study .results-cards h3 span{
/*	 font-weight: 300;*/
	margin-right: 25px;
	visibility: hidden;

}
.case-study .results-cards h3{
	 font-weight: 400;
}

.case-study .results-cards .main-row{
	gap:8.5rem;
	margin-top:2rem;
}
.case-study .results-cards .img-box{
/*	border:1px solid red;*/
	max-width: 70%;
	aspect-ratio:16 / 9;
	object-fit: cover;
	border-radius:8px;
	margin-left:4.4rem;
	overflow: hidden;
	position: relative;
}


.case-study .results-cards .img-box:nth-of-type(1)::before{	content:"Before"; }
.case-study .results-cards .img-box:nth-of-type(2)::before{	content:"After"; }

.case-study .results-cards .img-box:nth-of-type(1)::before,
.case-study .results-cards .img-box:nth-of-type(2)::before{
	position: absolute;
	left:0;
	right:0;
	bottom:0;
	height: 40px;
	text-align: center;
	align-content: center;
	color:#fff;
	font-size: 20px;
	background: linear-gradient(180deg, rgba(0, 24, 34, 0.50) 0%, rgba(0, 24, 34, 0.75) 100%);
    backdrop-filter: blur(5px);
}

.case-study .results-cards .img-box img{width:100%; height:100%;}
.case-study .results-cards .img-box:nth-of-type(2){margin-top:20px;}
.case-study .results-cards article{
	border-bottom:1px solid rgba(255, 255, 255, 0.25);
}

.case-study .results-cards article h5,
.case-study .results-cards article p{
   font-weight: 400;	
}
.case-study .results-cards article h5{
	margin-bottom: 0.8rem;
	font-size: clamp(1.1rem, 2vw, 22px);
}
.case-study .results-cards article:not(:nth-of-type(1)) h5{
	margin-top:0.8rem;
}
.case-study .results-cards article,
.case-study .results-cards article p{
	width: 90%; }

.case-study .results-cards:nth-of-type(2) article,
.case-study .results-cards:nth-of-type(5) article{
   border-bottom:1px solid rgba(0, 0, 0, 0.25);
}



@media (max-width:1366px){
.case-study .results-cards article p{ font-size: 14px;}
.case-study .results-cards .main-row{ gap:8.5rem;}
.case-study .results-cards .img-box:nth-of-type(1)::before,
.case-study .results-cards .img-box:nth-of-type(2)::before{	font-size: 1rem; }
}
	
@media (max-width:1280px){
   .case-study .results-cards .main-row { gap: 3.5rem; }
	
.case-study .results-cards article,
.case-study .results-cards article p{
	width: 100%; }

}
@media (max-width:768px){
	.case-study .results-cards .img-box{margin-left:0px;}
	.case-study .results-cards .img-box {
		max-width: 100%; }
	.case-study .results-cards .main-row {
        gap: 2rem;
    }
	.case-study .results-cards .main-row .img-column{
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
}
.case-study .results-cards .img-box:nth-of-type(1)::before,
.case-study .results-cards .img-box:nth-of-type(2)::before{	font-size: 14px; }


}
@media (max-width:576px){
	h2{font-size:24px;}
	.case-study .results-cards h3{font-size: 20px;}

	.case-study .results-cards .img-box:nth-of-type(2){margin-top:0px; margin-left:20px;}
	
.case-study {padding-top: 50px;}
	.case-study .results-cards .main-row .img-column{flex-direction: row; justify-content: space-between;}
	.case-study .results-cards .img-box:nth-of-type(1)::before,
.case-study .results-cards .img-box:nth-of-type(2)::before{	font-size: 12px; height:28px;}
}

@media (max-width:480px){

	.case-study .results-cards h3 span{ margin-right: 10px; }
	.case-study .results-cards{	padding:20px;margin-top:24px; }
	.case-study .results-cards article p { font-size: 13px; }
	.case-study .results-cards .img-box:nth-of-type(1)::before,
    .case-study .results-cards .img-box:nth-of-type(2)::before{	font-size: 10px; height:18px;}
	
}