:root{
  --color-mute:rgb(100,100,100); 
}



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

/*------------------header---------*/
.intro-container{
  height:65vh; 
  border-bottom:solid red 2px; 
}
.intro-cont-disc{
  height:65vh; 
  background-color:rgba(30, 30 ,30 , .55); 
  
 
}
.video-container{
  position:absolute; 
  z-index:-2; 
  height:65vh; 
  width:100%; 
  overflow-x:hidden;
  overflow-y:hidden;
  
}
.video-container img{
  width:100%; 
  height:100%; 
  
}
.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;
}
.intro-cont-disc h1{
  color:white; 
  font-size:3.6rem;
  margin-bottom:10px; 
  
}


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


  
/*menu-icon drop down menu*/
.menu-icon-container {
  cursor:pointer; 
  position:absolute; 
  z-index:2;
  right:20px;
  top:20px; 
  
  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:orange; 
  border:solid black 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; 
}

/*----------------about me---------------------*/
.about_container{
  display:grid;
  min-height:600px;
  padding-top:50px;
}
.about_wrapper{
  display:grid;
  grid-template-columns:1fr 1fr; 
  align-items:center; 
}
.image_wrapper{
  display:grid; 
  justify-items:center; 
  border-radius:10px;
}
.image_wrapper img{
  object-fit:fit; 
  width:250px; 
  height:250px; 
  border-radius:10px;
  border:solid black 1px; 
}

.detail_wrapper h3{
  margin-bottom:20px;
  text-align:center; 
  width:70%;
  padding:5px; 
  font-size:1.8;
}
.detail_wrapper p{
  color:var(--color-mute);
  margin-top:5px; 
  padding:5px; 
  width:70%; 
  font-size:1.1rem;
   
}
.an_badge_wrapper{
    display:grid;
    justify-items:center; 
    align-items:center;
     padding-top:30px;
    width:70%;
}
.an_badge{
    box-shadow:2px 2px 3px black;
}
.an_badge:hover{
    box-shadow:3px 3px 5px rgba(56, 115 ,161 , 78%);
}

/*------------------ PORTFOLIO--------*/
.container{
  margin-top:50px; 
  min-height:400px;
  padding-bottom:50px;
}

.container .title h3{
  text-align:center;
  padding:10px; 
  font-size:1.6rem; 
  color:black; 
  
}
.wrapper{
  display:grid; 
  grid-template-columns:1fr 1fr 1fr; 
  gap:5px; 
  padding:5px; 
}
.portfolio{
  position:relative; 
  height:250px; 
  border:solid black 1px; 
  box-shadow:2PX 2PX 5px black; 
}

.portfolio img{
  width:100%; 
  height:100%; 
  object-fit:fit; 
  position:relative; 
  z-index:-1; 
}
.portfolio a{
  display:none; 
 position:absolute;  
  width:100%; 
  height:100%; 
  color:black; 
  background-color:white; 
  transition: background-color 1.5s; 
  
    
   
}
.portfolio:hover a{
  justify-items:center; 
  position:absolute; 
  top:0px; 
  
  color:white; 
  z-index:1; 
  display:grid; 
}
.portfolio a:hover{
  
  background-color: rgba(56, 115 ,161 , 78%);
}
.portfolio a h3{
  margin-top:10px; 

  display:grid; 
  align-items:center; 
}
.portfolio a p{
  display:grid; 
  justify-items:center; 
  
  width:75%; 
}

/*--------------------------contact section--------------*/
.contact-info-container h1{
  font-weight:bold ; 
  font-style:italic;
   font-size:2.5rem; 
}
.contact-container{
  display:grid; 
  grid-template-columns:1fr 1fr; 
  align-items:center; 
  justify-items:center; 
  min-height:400px;
  
}
/*contact image*/

/*contact info*/
.contact-info-container{
  
  display:grid; 
   position:relative;
  transition:left .5s; 
   right:1500px; 
  justify-items:center; 
  align-items:center;
  max-height:100vh;
}

/*contact form*/
.contact-form-container{
  background-color:rgb(200,200,200); 
  
}
.contact-info-description{
  border-right:gray solid 4px;
}
.contact-info-description p {
  margin-left:25%; 
  margin-right:25%; 
  text-align:center; 
  font-style:italic; 
  line-height:1.5rem;
}
  /*contactgrid */
.contactgrid{
  width:90%; 
  max-height:100%; 
  margin-top:50px;
  display:none;
}
.contactform{
  background-color:rgba(56, 115 ,161 , 50%); 
  border:SOLID BLACK 1PX; 
  width:85%; 
  border-radius:10px; 
  display:grid; 
  justify-items:center; 
  align-items:center; 
  height:100%;
 
  
  
}
.contactform input{
  width:90%; 
  height:90%; 
 margin-top:40px; 
  border-radius:10px; 
  padding-left:5px; 
  font-size:1.1rem; 
}
.contactform .msg-text{
  width:90%; 
  height:100px; 
 margin-top:40px;
  border-radius:10px; 
  transition: height .5s; 
  font-size:1.2rem; 
  padding-left:5px; 
  padding-top:5px; 
}
.contactform button{
  margin-top:50px; 
  width:50%; 
  height:60%; 
  margin-bottom:50px; 
  border:white solid 1px ; 
  background-color:rgba(0,0,0,0); 
  color:white; 
  font-size:1.5rem; 
  cursor:pointer; 
  transition:background-color .5s; 
  border-radius: 10px; 
}
.contactform button:hover{
  background-color:rgb(50,50,50);
}

.error-input-contact{
        outline: 2px solid rgba(256, 55 ,61 , 88%);
     
    }    









/*footer*/
.footer_container{
  margin-top:20px; 
  height:100px; 
  display:grid; 
  align-items:Center; 
  justify-items:Center; 
  border-top:black solid 1px; 
}
.links_wrapper{
  display:grid;
  gap:55px; 
  grid-template-columns:1fr 1fr 1fr; 
}

.tableau{
  background-image:url(https://logos-world.net/wp-content/uploads/2021/10/Tableau-Emblem.png);
  background-size:85%; 
  
}
.tableau:hover{
  background-color:rgb(220,220,220);
}
.linkedin{
  background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAtMC4zIDEwNSAxMDUiPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xLjcsMzQuNmgyMS43djY5LjdIMS43VjM0LjZ6IE0xMi42LDBjNi45LDAsMTIuNiw1LjYsMTIuNiwxMi42YzAsNi45LTUuNiwxMi42LTEyLjYsMTIuNkM1LjYsMjUuMSwwLDE5LjUsMCwxMi42QzAsNS42LDUuNiwwLDEyLjYsMCIvPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0zNywzNC42aDIwLjh2OS41aDAuM2MyLjktNS41LDEwLTExLjMsMjAuNS0xMS4zYzIxLjksMCwyNiwxNC40LDI2LDMzLjJ2MzguMkg4Mi45VjcwLjRjMC04LjEtMC4yLTE4LjUtMTEuMy0xOC41Yy0xMS4zLDAtMTMsOC44LTEzLDE3Ljl2MzQuNUgzN1YzNC42eiIvPjwvc3ZnPg==);
  background-size:50%; 
}

.linkedin:hover{
  background-color:#007BB6;
}

.instagram{
  background-image:url(https://logos-world.net/wp-content/uploads/2020/06/Instagram-Logo.png);
  background-size:100%; 
  border:solid black 1px; 
}

.instagram:hover{
  background-color:#007BB6;
}

.wrap div{
  display: inline-block;
}

.icon{
  background-color:#222;
  background-repeat:no-repeat;
  background-position:center center;
  height: 4em;
  width: 4em;
  -webkit-transition: background-color 0.4s ease;
  -moz-transition: background-color 0.4s ease;
  -ms-transition: background-color 0.4s ease;
  -o-transition: background-color 0.4s ease;
  transition: background-color 0.4s ease;
}
.tableau{
  background-color:white; 
  border:solid black 1px; 
}
.instagram{
    background-color:white;
}


.goof{
  -webkit-transition: all 0.4s cubic-bezier(0,2,0,2);
  -moz-transition: all 0.4s cubic-bezier(0,2,0,2);
  -ms-transition: all 0.4s cubic-bezier(0,2,0,2);
  -o-transition: all 0.4s cubic-bezier(0,2,0,2);
  transition: all 0.4s cubic-bezier(0,2,0,2);
}

.goof:hover{
  background-size:35%;
}

.icon a{
  display: block;
  height: 100%;
  width: 100%;
  
}











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

@media (max-width:800px){
  
  .wrapper{
    grid-template-columns:1fr 1fr; 
  }
  .contact-container{
  
  grid-template-columns:1fr; 
  align-items:center; 
  justify-items:center; 
  
}
  .contact-info-description{
    border-right:none; 
  }
  
  .contactform{
    width:100%; 
  }
  
}

@media (max-width:600px){
  
  .about_wrapper{
 
  grid-template-columns: 1fr; 
  
}
.an_badge_wrapper{
    width:100%;
}
  .detail_wrapper h3{
    width:100%; 
    margin-top:20px; 
  }
  .detail_wrapper p{
    width:100%; 
    padding-left:10px;
    padding-right:10px; 
    margin-top:20px; 
  }
  
 .contactform{
    margin-top:50px; 
  }
  
  
}
@media (max-width:500px){
  
  .wrapper{
    grid-template-columns:1fr; 
  }
}