@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-BoldItalic.woff2') format('woff2'),
        url('fonts/OpenSans-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-ExtraBold.woff2') format('woff2'),
        url('fonts/OpenSans-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-ExtraBoldItalic.woff2') format('woff2'),
        url('fonts/OpenSans-ExtraBoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}


@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-Medium.woff2') format('woff2'),
        url('fonts/OpenSans-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}



@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-MediumItalic.woff2') format('woff2'),
        url('fonts/OpenSans-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-Regular.woff2') format('woff2'),
        url('fonts/OpenSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-Bold.woff2') format('woff2'),
        url('fonts/OpenSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-Italic.woff2') format('woff2'),
        url('fonts/OpenSans-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}


@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-SemiBold.woff2') format('woff2'),
        url('fonts/OpenSans-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-SemiBoldItalic.woff2') format('woff2'),
        url('fonts/OpenSans-SemiBoldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}






.casestudy{
    display: flex;
    height: auto;
    width: 100%;
    justify-content: space-around;
    align-items: center;
    background-color: #ffffff;
    /* border-bottom: 20px solid rgb(23, 40, 82); */

    
}

.casestudy .left{
    width: 50%;
    padding: 30px 20px;
    transition: all 2s;
    /* transform: translateY(-100%); */
    /* opacity: 0; */
    text-align: left;
    margin-left: 2%;
}


section.show-animation .casestudy .left{
    /* transform: translateY(0); */
    /* opacity: 1; */
}

.casestudy .left h2{
    font-family: "Open Sans", verdana, Helvetica, sans-serif;
    font-size: 30px;
    color: rgb(23,40,82);
    line-height: 120%;
    
}
.casestudy .right{

    width: 50%;
  
    padding: 50px 50px 50px 50px;
   
  

}
.casestudy .left p{
    font-family: "Open Sans", verdana, Helvetica, sans-serif ;
    font-size: 1.2rem;
    font-weight: 500;
}
.casestudy .left p,.casestudy .left h2, .casestudy .left a{
    font-family: "Open Sans", verdana, Helvetica, sans-serif;
    margin-bottom: 30px;
    
}
.casestudy .left a{
    text-decoration: none;
    color:  #ffffff;
    background-color: rgb(23,40,82);
    font-weight: bold;
    font-family: "Open Sans", verdana, Helvetica, sans-serif;
    font-size: 1.2rem;
    border: 1px solid rgb(23,40,82);
    padding: 5px 10px;
    border-radius: 2px;
}

.casestudy .left a:hover{
    background-color: #ffffff;
    color: rgb(23,40,82);
}
.casestudy .right img{
  
    width: 100%;
    transition:all 2s;

height: 400px;
    /* transform: translateY(100%); */
 
}


section.show-animation   .casestudy .right img{
    /* transform: translateY(0); */
   
}


section.animation-section.show-animation{
    margin-left: -5px;
    padding-left: 0px;
} 

 @media screen and (max-width: 768px){

.casestudy{

    flex-wrap: wrap;
    width: 100%;
    /* margin: 5px; */
    padding: 20px 20px;

}

.casestudy .left h2{
    font-size: 25px;
      text-align: left;
      font-family: "Open Sans", verdana, Helvetica, sans-serif;
      padding-top: 20px;
 
}

.casestudy .left {
    padding-bottom: 20px;
}

.casestudy .left,.right{
    width: 100%;
    margin: 5px;
    padding: 20px 0px;
    /* transform: translateX(0); */
    transition: all 1s;
}

.casestudy .right{

width: 100%;
flex-wrap: wrap;
padding: 20px 0px

}

.casestudy .right{
    width: 100%;
    /* transform: translateX(0); */
    transition: 1s;
    margin: 15px 0px;
    

}

.casestudy .right  img{
    width: 100%;
    height: auto;
    margin-top: -10px;
}
.card2:nth-child(2){
    margin-left: 0px;
}

.card2 h4, .card2 p, .card2 img{
    margin: 5px 0px;
    
}
 }

 
@keyframes CaseStudyLeft {
    0%{
      transform: translate(200px,0px);
      opacity: 0;
    }
    100%{
      transform: translate(0px,0px);
      opacity: 1;
    }
    
  }
  
  
  @keyframes CaseStudyRight {
    0%{
      transform: translate(0px,200px);
      opacity: 0;
    }
    100%{
      transform: translate(0px,0px);
      opacity: 1;
    }
    
  }