/*---------------main------------*/
*{
  margin:0px;
  padding:0px; 
  box-sizing:border-box; 
  
  text-decoration: none;
  overflow-x:hidden; 
}
body{
  font-family:poppins,sans-serif; 
}

/*------------------header---------*/
.intro-container{
  height:100vh; 
  border-bottom:solid black 1px; 
  position:fixed; 
  width:40%; 
  overflow-y:hidden; 
}
.intro-cont-disc{
  height:100vh; 
  background-color:rgba(5, 50 ,250 , 58%); 
  
 
}
.video-container{
  position:absolute; 
  z-index:-2; 
  height:100vh; 
  width:100%; 
  overflow-x:hidden;
  overflow-y:hidden;
  
}
.video-container img{
  width:100%; 
  height:100%; 
  object-fit:cover; 
  
}
.intro-cont-disc h1,h2{
  color:white; 
  display:none; 
  text-align:center; 
  position:relative; 
  top:25%; 
  font-family:poppins,sans-serif; 
  font-size:1.9rem;
  text-shadow:1px 1px 1px black; 
}
.intro-cont-disc h1{
  color:white; 
  font-size:3.2rem;
  margin-bottom:10px; 
  
}
.intro-cont-disc .author{
  color:white; 
  position:relative; 
  top:70%;
  margin-left:5px; 
  font-style:italic; 
  
  
  
  
}

  /*drop down menu*/                             
  .modal-container{
    display:none;
  }
  


  
/*menu-icon drop down menu*/
.menu-icon-container {
  cursor:pointer; 
  position:absolute; 
  z-index:2;
  left:32%;
  top:20px; 
  position:fixed; 
  transition: transform 1s; 
  
}
.menu-icon-container div {
  width: 45px;
  height: 7px;
  background-color: white;
  margin: 6px 0;
  transition:background-color .5s, border .5s; 
  
}
.menu-icon-container:hover div{
  background-color:black; 
  border:solid white 1px; 
}
/*modal pop up*/
.modal-container{
  background-color:rgba(0,0,0,.8);
  position:absolute; 
  top:0; 
  width:100%; 
  height:100vh; 
  display:grid; 
  grid-template-columns:1fr;
  display:none;
  z-index:2;
  position:fixed;
  
}
.modal-content{
  width: 40% ;
  height:100% ; 
  background-color:rgba(13,13,13,.6);
  position:relative; 
  display:grid; 
  
z-index:2;
  
  
  
}
.modal-close{
  position:absolute; 
  top:0; 
  right:15px;
  font-size:2.2rem;
  transform:rotate(45deg);
  font-weight:bold; 
  color:white;
  cursor:pointer;
  font-family: Poppins, sans-serif; 
  text-shadow:1px 1px 1px black, -1px -1px 1px black; 
}
.modal-close:hover{
  color:orange;
  font-size:2.4rem;
  
}
.modal-container ul{
  margin-top:25%;

  
}
.modal-container li{
  cursor:pointer; 
  display:block; 
  padding:5px;
  margin-left:10px;
  width:80%; 
  transition:border-bottom .5s; 
  margin-top:10px; 
  
}
.modal-container li:hover{
  border-bottom:solid white 3px; 
}
.modal-container li:hover a{
  color:rgb(100,200,250);
  
}
.modal-container a{
    text-align:center;
  color:white; 
  font-family: Poppins, sans-serif; 
  font-size:1.5rem;
  font-weight:bold;
  text-decoration:none; 
  text-shadow:1px 1px 1px black, -1px -1px 1px black; 
  transition:color .5s; 
}

/*---------------------main---------------------------------------------*/
.case_container{
 display:grid; 
  grid-template-columns:1fr 1fr; 
  
}

.case_container .case_wrapper{
  display:grid; 
  align-items:center; 
  justify-items:center; 
  position:absolute; 

  left:40%;
  width:60%; 
  
}
.case_content{
 
  width:80%; 
}

.case_content h1{
  font-size:1.5rem; 
   margin:10px 0px 20px 30px; 
  
}
.case_content h4{
  margin-bottom:10px; 
}
.case_content p{
  margin-bottom:5px; 
  padding:20px 20px 20px 0px; 
}
.case_content p,ol,h4{
  margin-left:40px; 
}
.case_content ol li{
  list-style-position: inside;
  list-style-type:decimal; 
  margin-bottom:10px;
  margin-left:50px; 
}

.case_image{
  position:relative; 
  width:90%; 
   margin-left:60px;
  border:solid black 1px; 
  padding:2px; 
  overflow-y:hidden;
  display:grid; 
  min-height:200px;

}
.case_image .case_figure{
  border:solid red 1px; 
  position:absolute; 
  right:0px; 
  top:0px; 
  font-size:.8em;
  padding:1px; 
  width:40px; 
  color:red;
}
.case_image img{
    object-fit:contain;
    width:100%;
 
    
}

.case_img_rist{
  width:120%;
  
}
.case_intro {
  margin-top:100px; 
}
.case_cit_lis{
  display:grid; 
}





/*-----------responsive design------------*/

@media (max-width:850px){
  .case_container{
    display:grid; 
    grid-template-columns: 1fr; 
    
  }
  .intro-container{
   height:40vh; 
    width:100%; 
    position:relative; 
  }
  .video-container{
    height:40vh; 
    width:100%; 
  }
  .intro-cont-disc{
    height:40vh; 
    width:100%;
  }
  .intro-cont-disc .author{
    position:absolute; 
    left:40%; 
  }
  .menu-icon-container{
   position:absolute; 
    left:85%; 
  }
  .case_container .case_wrapper{
   top:40%; 
    width:100%;
    left:0; 
  }
}



@media (max-width:500px){
  .intro-cont-disc h1{
    font-size:2.2rem; 
  }
  .intro-cont-disc h2{
    font-size:1.6rem; 
  }
   .intro-cont-disc .author{
    position:absolute; 
     top:10%; 
    left:5%; 
  }
  .menu-icon-container{
   position:absolute; 
    left:82%; 
     
  }
  .menu-icon-container div {
  width: 40px;
    height: 5px;
  }
}