/* Case Study Archive Page 15 June */
.case-study-wrapper{
    width:100%;
    margin:0 auto;
}

article.case-study{
    padding:32px 50px;
    background:#fff;
    box-shadow:0 0 13px rgba(0,0,0,.13);
    margin-bottom:50px;
}

.row, .case-study-row {
    display:flex;
    flex-wrap:wrap;
    width:100%;
    gap:30px;
}

.col-left,
.col-right{
    flex:1 1 calc(50% - 15px);
    min-width:0;
}

.col-3{
    flex:1 1 calc(25% - 23px);
    min-width:220px;
}

/* Product Gallery Slider */
.case-study-gallery-slider {
    overflow: hidden;
	position : relative;
}

.gallery-track {
    display: flex;
	gap: 20px;
}

.gallery-slide {
    flex: 0 0 50%;
    max-width: 50%;
}

/* Mobile */
@media (max-width: 767px) {
    .gallery-slide {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.gallery-slide img {
    width: 100%;
    display: block;
	aspect-ratio : 16/9;
	object-fit: cover;
	height: 100%;
}


/* Toggel Button */
.case-study-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.case-study-toggle, .case-study-toggle:focus, .case-study-toggle:hover {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    border: 0;
    background: #CCF4DA;
    width: 100%;
    padding: 16px;
    justify-content: center;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 150%;
    color: #017729;
    margin-top: 16px;
}

.toggle-icon {
    font-size: 24px;
    line-height: 1;
}


h2.case-study-title{

font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 700;
color:#101010;
font-size: 36px;
line-height: 100%;
	margin: 0px 0px 10px 0px;

}

.case-study-location {
    display: flex;
    align-content: center;
    align-items: center;
    gap: 10px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    line-height: 150%;
  color : #2B2B2B;

}

.product-dosage {
    padding: 30px;
    background: #F5F3E8;
}

.product-item {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0px 24px;
	margin-bottom: 20px;
}
.product-info p {
    margin: 0px;
}
.product-item img {
        background: #fff;
    padding: 12px 24px;
    width: 120px;
}

h4.case-study-heade-3 {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 150%;
    color : #017729;
  margin-bottom : 10px !important
    
}

button.gallery-prev {
    position: absolute;
    z-index: 2;
    top: 40%;
    border: none;
    left : 0px;
}
button.gallery-next {
    position: absolute;
    z-index: 2;
    top: 40%;
    border: none;
  right : 0px;
}
button.gallery-prev:hover, button.gallery-next:hover,button.gallery-prev:focus,button.gallery-next:focus  {

  background-color: transparent !important;
}

.case-study-location {
    margin-bottom: 32px;
}


.product-benefits {
    margin-bottom: 32px;
}

h3.products-benifit-number {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 100%;
  margin: 0px 0px 10px 0px;
  color : #017729;
}
p.products-benifit-text{
   font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 700;
font-size: 24px;
  color : #017729;
line-height: 100%;

}

h4.case-study-heade-3 {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    margin: 10px 0px 7px 0px;
    color: #01772A;
}

h3.case-study-heade-3{
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 700;
margin: 0px 0px 20px 0px;
font-size: 20px;
color : #2B2B2B;
line-height: 100%;

}
.highlight-item.col-3{
  display : flex;
  gap : 20px;
  
}
h4.heading-4 {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    margin: 0px;
    color: #2B2B2B;
}
p.description-4 {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: #2B2B2B;
    margin: 0px;
}

.key-highlights.row {
    padding: 0px 0px 30px 0px;
    border-width: 0px 0px 1px 0px !important;
    border: solid;
    border-color: #DBDBDB;
}
.key-results-sec{

  padding : 35px 0px;

}
.key-results.row {
    padding: 45px;
    background-color: #FFFCE5;
}

.result-info {
    width: 70%;
}
h4.heading-result-info {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: 25px;
    line-height: 100%;
    margin: 0px 0px 10px 0px;
}
.result-item.col-3 {
    display: flex;
    gap: 20px;
}
.col-left.about-sec {
    padding: 0px 67px 108px 0px;
    border-right: 1px solid #C0C0C0;
}
.case-study-content p.wp-block-paragraph {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 160%;
    color: #2E2E2E;
}

.col-right.user-info {
    padding: 0px 0px 50px 145px;
}
p.user-review {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: 25px;
    line-height: 36px;
    color : #101010;
}

.user-info-box {
    display: flex;
    gap: 20px;
}

.user-main-info h4 {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 160%;
    margin: 6px 0px 0px 0px;
    color: #101010;
}
.user-main-info p {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    margin: 0px !important;
  color : #2B2B2B;
}
.load-more-btn {
    text-align: center;
}

.case-study-hidden {
    display: none !important;
}
p#case-study-end-message{
	font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 150%;
    margin: 0px !important;
  color : #2B2B2B;
}
 
button#load-more-case-studies{

      background-color: #F8BE00;
    font-family: "Bricolage Grotesque", Sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
    line-height: 16px;
    fill: #101010;
    color: #101010;
    border-radius: 0px 0px 0px 0px;
    padding: 14px 32px 14px 32px;
    border : none 
}

.case-study-row {
    margin-bottom: 30px;
}
.case-study-row.row-top {
    margin-bottom: 0px;
}



@media (max-width:1200px){

    article.case-study{
        padding:40px;
    }

    .col-left.about-sec{
        padding-right:40px;
    }

    .col-right.user-info{
        padding-left:60px;
    }

}


@media (max-width:991px){

    article.case-study{
        padding:32px;
    }

   
	    .col-left, .col-right {
        flex: 1 1 calc(50% - 15px);
    }

    .col-left.about-sec{
        border-right:none;
        padding:0 0 40px;
    }

    .col-right.user-info{
        padding:0;
    }

    .key-highlights .col-3,
    .key-results .col-3{
        flex:1 1 calc(50% - 15px);
        min-width:unset;
    }

    .product-dosage{
        padding:30px;
    }

    .key-results.row{
        padding:30px;
    }

    h2.case-study-title{
        font-size:32px;
    }

    h3.products-benifit-number{
        font-size:32px;
    }

    p.products-benifit-text{
        font-size:22px;
    }

    .case-study-content p.wp-block-paragraph{
        font-size:18px;
    }

    p.user-review{
        font-size:22px;
        line-height:32px;
    }
	.case-study-location {
    margin-bottom: 10px;
}

}



@media (max-width:767px){

    article.case-study{
        padding:24px 20px;
        margin-bottom:30px;
    }

    .row{
        gap:24px;
    }

    .col-left, .col-right {
        flex: 1 1 calc(50% - 15px);
    }

    .col-3{
        flex:1 1 100%;
        min-width:100%;
    }
.case-study-location {
    margin-bottom: 0px;
}
    h2.case-study-title{
        font-size:28px;
        line-height:1.2;
    }

    .case-study-location{
        font-size:14px;
        margin-bottom:20px;
    }

    h3.products-benifit-number{
        font-size:28px;
    }

    p.products-benifit-text{
        font-size:18px;
        line-height:1.4;
    }

    .product-benefits{
        margin-bottom:24px;
    }

    .product-dosage{
        padding:20px;
    }

    .product-item{
        gap:15px;
    }

    .product-item img{
        width:80px;
        padding:10px;
    }

    .highlight-item.col-3,
    .result-item.col-3{
        gap:15px;
    }

    .key-results.row{
        padding:20px;
    }

    h3.case-study-heade-3{
        font-size:18px;
        margin-bottom:15px;
    }

    h4.heading-result-info{
        font-size:22px;
    }

    .result-info{
        width:100%;
    }

    .case-study-content p.wp-block-paragraph{
        font-size:16px;
        line-height:1.7;
    }

    p.user-review{
        font-size:18px;
        line-height:1.6;
    }

    .user-info-box{
        gap:15px;
    }

    .user-main-info h4{
        font-size:18px;
    }

    .user-main-info p{
        font-size:14px;
    }

    button.gallery-prev,
    button.gallery-next{
        top:45%;
    }

    .case-study-toggle{
        padding:14px;
        font-size:15px;
    }

}


@media (max-width:600px){
	
	
	.col-left, .col-right {
        flex: 1 1 100%;
    }

    article.case-study{
        padding:20px 16px;
    }

    h2.case-study-title{
        font-size:24px;
    }

    h3.products-benifit-number{
        font-size:24px;
    }

    p.products-benifit-text{
        font-size:16px;
    }

    .product-item{
        flex-direction:column;
        align-items:flex-start;
    }
	.row.key-highlights-sec {
    margin-top: 20px;
}

    .product-item img{
        width:70px;
    }
    .col-left.about-sec {
        border-right: none;
        padding: 0 0 0px;
    }
    .user-info-box {
        flex-direction: row;
        align-items: flex-start;
    }

    .user-main-info h4{
        margin-top:0;
    }

    .case-study-toggle{
        font-size:14px;
    }
	.result-item.col-3 {
    width: 100% !important;
    flex: 100%;
}
	.highlight-item.col-3 {
    flex: 100%;
}
.case-study-gallery-slider.slider-ready {
    margin-bottom: 10px;
}
}


/* Tablet */
@media (max-width: 1024px){

    .ma-table-head,
    .ma-row{
        grid-template-columns:80px 1fr 140px;
    }

    .ma-table-head div,
    .ma-row div{
        font-size:15px;
    }

}

/* Mobile */
@media (max-width: 767px){

    .ma-table-head,
    .ma-row{
        grid-template-columns:50px 1fr 100px;
        column-gap:10px;
    }

    .ma-table-head{
        padding:12px 15px;
    }

    .ma-table-head div,
    .ma-row div{
        font-size:14px;
        line-height:140%;
    }

    .ma-table-body{
        gap:18px;
        margin-top:18px;
    }

}