.case-study-section h2{
    text-align: center;
    font-size: 3.5rem;
}

.case-study-section .sub_text{
    text-align: center;
}

.case-stuides-con {
    display: grid;
    grid-template-columns: 74% 24%;
    grid-gap: 1em;
    max-height: 60vh;
    margin: 3em 0;
    grid-row-gap: 0;
}

.case-stuides-con img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.case-stuides-con .case-study{
    max-height: 60vh;
    aspect-ratio: 16 / 9;
}

.case-stuides-con .case-study:first-child{
    grid-column: 1;
    grid-row: 1 / span 5;
    margin: auto;
}


.recent-title{
    color: var(--black-color);
    font-weight: 700;
    font-size: 1.1rem;
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    line-height: 80%;
}

.case-stuides-con .case-study:not(.case-study:first-child){
    grid-column: 2;
}

.case-stuides-con .case-study:not(.case-study:first-child){
    height: calc(50vh / 3);
}

.view-all-cat{
    grid-column: 2;
    color: var(--black-color);
    /* margin-top: -1em; */
}

.case-study{
    position: relative;
    overflow: hidden;
    
}

.case-study *,
.case-study{
    transition: all 1s ease;
}

.case-study svg{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 30%;
    opacity: 1;
    transition: opacity 0.3s ;
}

.case-study figcaption {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 15px 20px;
}

.case-study a{
    text-decoration: none;
}

.case-study h3{
    margin: 0;
    font-size: 1.1em;
    opacity: 0;
    color: var(--white-color);
}

.case-stuides-con .case-study:first-child h3{
    font-size: 2rem;
}

.case-study:hover{
    background-color: rgba(0,0,0, 1);
}

.case-study:hover img{
    zoom: 1;
    opacity: 0.2;
}

.case-study:hover h3 {
    opacity: 1;
    transition-delay: 0.3s;
}

.case-study:hover svg{
    opacity: 0;
}

.case-study figcaption::before {
    position: absolute;
    top: 1em;
    right: 100%;
    bottom: 1em;
    left: 1em;
    border-right: 4px solid rgba(255, 255, 255, 0.8);
    content: '';
    opacity: 0;
    background-color: rgba(255, 255, 255, 0.5);
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s;
}

.case-study:hover figcaption::before {
    background: rgba(255, 255, 255, 0);
    right: .5em;
    opacity: 1;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}





@media(max-width: 1024px){
    .view-all-cat{
        margin-top: 0;
    }
    .case-stuides-con .case-study:not(.case-study:first-child){
        height: auto;
    }
    .case-stuides-con .case-study:first-child{
        aspect-ratio: auto;
    }
}

@media(max-width: 750px){
    .case-study-section h2{
        font-size: 2rem;
    }
    .case-stuides-con{
       grid-template-columns: 1fr; 
       max-height: none;
       grid-row-gap: 1em
    }

    .case-stuides-con .case-study{
        grid-row: auto !important;
        grid-column: 1 !important;
    }
    .recent-title{
        display: none;
    }
    .view-all-cat{
        grid-column: 1;
    }
    .case-stuides-con .case-study:first-child h3{
        font-size: 1.1em;
    }
}

@media(max-width: 600px){
    .case-stuides-con .case-study:first-child,
    .case-stuides-con .case-study{
        aspect-ratio: 16 / 9;
    }
    .case-study h3{
        opacity: 1;
    }
    .case-study {
        background-color: rgba(0,0,0, 1);
    }
    .case-study img{
        opacity: .5;
    }
}