@import url('https://fonts.googleapis.com/css2?family=Didact+Gothic&family=Familjen+Grotesk:ital,wght@0,400..700;1,400..700&family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

.case h3{font-family:"Poppins", sans-serif ;font-weight: 600; color:#0A96FD;}

.page-nav{ background: #e7e7e7;font-size: 14px;padding: 5px 10px;}
.page-nav p {padding-top: 10px;width: 80%;margin: 0 auto;}
.page-nav p a{color: #111;}

.overview{width: 80%; margin: 5% auto 3%; text-align: center;}
.overview h2{margin: 1% 0 2%;}
.overview p{
 width: 80%;
 margin: 2% auto;
}
.overview .cont{
 width: 80%;
 margin: 5% auto;
 text-align: left;
}
 
.overview .cont p{
 width: 100%;
}
 
.Objectives {
  background: #e7e7e7;
}
.Objective{
  width: 80%;
  margin: 0 auto;
  padding: 5% 0;
  display: flex;
  flex-wrap: wrap;
}
.Objectives video{
 width: 90%;
 height:250px;
 margin-top: 5%;
 box-shadow: rgba(0, 2, 138, 0.24) 0px 3px 8px;
 border: 1px solid rgb(13, 0, 70);
}
.Objectives ul {
  margin-top: 5%;
}
.Objectives ul li:before {
  content: "\f2d9"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  padding: 0 20px 0 0 ;
}
.Objectives ul li {
  list-style: none;
  margin-top:10px ;
}

.challenges{
  width: 80%;
  margin: 5% auto;
}
.challenges h3{
  margin: 2% auto;
}
.challenges ul li {
  list-style: none;
}
.challenges ul li:before {
  content: "\f101"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  padding: 0 20px 0 0 ;
}

.turnkey {
 text-align: center;
 width: 80%;
 margin: 0 auto;
}
.turnkey h2{
 margin: 1% 0 2%;
}
.turnkey p{
 width: 80%;
 margin: 3% auto;
}

.turnkey .turnkey1 , .turnkey .interactive{
 display: flex;
 flex-wrap: wrap;
 margin: 5% 0;
 padding: 3% 0;
}
.turnkey .interactive{
   flex-wrap: wrap-reverse;  
}
.case h3{
 font-size:25px;
 text-align: left;
}
.turnkey .interactive .cont{
 padding-left: 20px;
}
.turnkey .interactive h3{
 padding-left: 10px;
}
.turnkey  ul {
 padding: 0;
}
.turnkey .turnkey1 ul li{
 list-style: none;
 text-align: left;
 margin: 1% 1% 0 0;
}
.turnkey .interactive ul li{
 list-style: none;
 text-align: left;
 margin: 1%  0 0 3%;
}
.interactive .cont p{
 text-align: left;
 margin: 1%  0 0 3%;
}

.turnkey ul li:before {
  content: "\f101"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  padding: 0 20px 0 0 ;
}
.turnkey .turnkey1 img , .turnkey .interactive img {
 width: 100%;
 height: 250px;
 box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}

.key-results{
   background-image: url('/assets/uploads/case/6.jpg');
   color: #fff;
   padding: 5% 0;
}
.key-results h3{
   text-align: center;
}
.key-results p{
  text-align: center;
}
.key-results ul{
    margin: 0 15%;
}
.key-results ul li{
  list-style: none;
}
.key-results ul li:before {
  content: "\f101"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  padding: 0 20px 0 0 ;
}
.feedback{
    width: 80%;
    margin: 5% auto;
}
.feedback h3{
    text-align: center;
}
.feedback .feedback1{
    margin: 3% 0;
    padding: 20px;
    border-radius: 10px;
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}
.conclusion p{
 width: 80%;
 margin: 0 auto 3%;
}

@media(max-width:767px){
  .overview{width: 90%;}
  .case h5{font-size: 18px;}
  .case h2{font-size: 25px;}
  .case p{width: 100%; margin: 2% auto;font-size: 14px;}
  .overview .cont{width: 100%; margin: 5% auto; text-align: left;}
  .case h3{font-size: 20px;}

  .challenges{width: 90%;}
  .case ul li {font-size: 14px;}

  .turnkey { width: 90%;}

  .turnkey .turnkey1 h3, .turnkey .interactive h3{
    text-align: center;
  }


.key-results ul{
    margin: 0 5%;
}

.feedback{
    width: 90%;
    margin: 10% auto ;
}

.feedback .feedback1{
    margin: 3% 0;
    padding: 10px;
}


}
@media(max-width:450px){
  .overview p{text-align: justify}
  .challenges ul li {text-align: justify;}
  .turnkey .turnkey1 ul li{
    text-align: justify;
  }
  .turnkey .interactive .cont{
   padding-left: 0px;
  }
  .key-results ul li{
    text-align: justify;
  }
  
  .key-results{
    padding: 20px 10px;
  }
  .key-results p{
    text-align: justify;
  }
.key-results ul{
    margin: 0 ;
    padding: 0;
}

}




  .case h3, .case img ,  .case li {
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
  }

  @keyframes appear {
    from {
      transform: scale(0.4);
    }
    to {
      transform: scale(1);
    
    }
  }