@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;500;700&display=swap');

*{
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
    color: #FFFFFF
  
}

.outer-container {
   background-color: black;
    position: relative;
    /* width: 1110px; */
    padding:20px 120px;
    overflow-x: hidden;
 }

 .protofolio-title{
    color: #FFFFFF;
    font-size: 24px;
    font-weight: 700;
 }

 .portfolio-intro-section{
 display: flex;

 }


 .ring-svg{
   position: absolute;
   left: -100px;
   top:100px
 }
 .greetings{
    margin-top: 100px;
    color: #FFFFFF;
    font-size: 88px;
    font-weight: 500;
    
 }

 .intro{
    margin-top: 40px;
    color: #D9D9D9;
    font-size: 18px;
    width: 40%;
    font-weight: 300;
    margin-bottom: 50px;
 }

 .name{
    border-bottom: 3px solid #4EE1A0;
 }

 .intro-pragraphs{
   flex: 2;
   z-index: 10;
 }

 .portfolio-image{
   position: relative;
  flex: 1;
   z-index: 0;
   height: 720px;
   width:900px;
   overflow:hidden; 
 
   /* transform: translate(-100px,-60px); */
 }

 .circle{
   position: absolute;
   left: -110;
   bottom: 0;
 }

 .portfolio-image img{
object-fit:fill;
 }

 .contact-me{
   text-decoration: none;
    margin-top: 10px;
    width:fit-content;
    font-size: 24px;
    font-weight: 300;
    border-bottom: 1px solid #4EE1A0;
 }

 .contact-me:hover{
   color:#4EE1A0 ;
 }

 .project-contact-me{
   text-decoration: none;
    margin-top: 0px;
    width:fit-content;
    font-size: 24px;
    font-weight: 300;
    border-bottom: 1px solid #4EE1A0;
 }

 .skill-section{
   padding-top: 50px;
    margin-top: 75px;
    border-top: 0.5px solid #FFFFFF;
    display: grid;
    grid-gap: 40px;
    grid-template-columns: repeat(3, 1fr); 
   background-color: black;
 }

 .skill{
   font-size: 40px;
 }

 .experience{
   margin-top: 14px;
   font-size: 15px;
   font-weight: 300;
   color: #D9D9D9;
 }


 .project{
   height:fit-content;
   margin-top: 100px;
  
 }

.project-header-container{
   display: flex;
   justify-content: space-between;
}
 .project-title{
   font-size: 84px;
 }

 .project-container{
   position: relative;
   width: 385px;
   height:350px;
  
 }
 .image-container{

   overflow:hidden;
   height:250px;
  
 }
 .project-img{
   width:100%;
   height:250px;
   object-fit: fill;
 }

 .project-list{
   margin-top: 80px;
   display: grid;
   grid-column-gap: 30px;
   grid-row-gap:10px;
   grid-template-columns: repeat(3, 1fr); 
   margin-bottom: 80px;

 }

 .contact-section{
   background-color:#242424;
   width: 100%;
   padding:60px 120px;
   position: absolute;
   left: 0px;
   display: flex;
   align-items: center;
   flex-shrink: 1;
 }

 .contact-title{
   font-size: 48px;
 }

 .contact-message{
   width: 500px;
   font-size: 18px;
   font-weight: 100;
   margin-top: 30px;
 }

 .contact-ring-svg{
   position: absolute;
   right: 100px;
   top:-60px
 }

 .social-media{
   display: flex;
   align-items: flex-end;
   justify-content: center;
   width:100%;
 }

 .social-media svg{
   margin-right: 50px;
 }

 .social-media svg:hover path{
   fill:#4EE1A0
 }

 .name-of-project{
   width: 100%;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   margin-top: 20px;
   font-size: 24px;
 }
.status-of-project{
   color: #4EE1A0;
   font-size: medium;
}


 .project-status{
   color: #4EE1A0;
 }

 .tech-used{
   margin-top: 10px;
 }

 .tech-used span{
   margin-right: 10px;
 }

 .hover-effect{
   top: 0;
   left: 0;
   position:absolute;
   width: 100%;
   height:250px;
   opacity: 0;
   display: block;
   background: rgba(0, 0, 0, 0.7);
   transition: all 0.5s ease-out;
   color: white;
   z-index: 20;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 }
 .hover-effect a{
   padding-bottom: 5px;
   text-decoration: none;
   margin-bottom: 20px;
   border-bottom: 2px solid #4EE1A0;
 }

 .hover-effect a:hover{
   color: #4EE1A0;
 }
.project-container:hover .hover-effect{
   opacity: 1;
}
 

@media screen and (max-width: 400px){
  
   .outer-container{
      padding:10px 40px;
   }
   .portfolio-image{
      margin-top: 50px;
      height: 0px;
      width:0px;
   }
   .portfolio-image img{
      display: none;
      object-fit:fill;
       }
   .protofolio-title{
      display:  flex;
      justify-content: center;
      font-size: 18px;
   }

  
   .ring-svg{
     left: -400px;
   }

  
   .greetings{
      margin-top: 0px;
      font-size: 32px;
      width: 100%;
      text-align: center;
   }
   .portfolio-intro-section{
      display: flex;
      flex-direction: column-reverse;
      align-items: center;
     
   }

   .intro-pragraphs{
      display: flex;
      flex-direction: column;
     align-items: center;
   }
   .intro{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      text-align: center;
   }

   .experience{
margin-top: 5px;
   }
   .project-list{
      grid-template-columns: repeat(1, 1fr); 
      justify-content: center; 
    }
    .skill-section{
    grid-gap: 20px;
    grid-template-columns: repeat(1, 1fr);
    border-bottom: 1px solid #FFFFFF;
    padding-bottom: 50px;
    
    }

    .project{
      margin-top: 40px;
    }
    .image-container{
      height: 398px;
      width: 343px;
    }
    .project-list{
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      margin-top: 30px;
    }

    .name-of-project{
      margin-bottom: 10px;
      justify-content: space-around;

     }

     .tech-used{
      margin-bottom: 10px;
      justify-content: flex-start;
     }

     .project-header-container{
      display: flex;
      justify-content: center;
      /* text-align: center; */
     }
     .project-title{
      font-size: 50px;
      text-align: center;
    }
   
    .project-container{
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0px 20px;
      margin-bottom: 20px;

    }
    .skill-section div{
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .skill{
       font-size: 32px;
    }
    .contact-section{
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      padding:0px;
      align-items: center;
      width: 400px;
    }

     .social-media svg{
      margin:0px 20px;
    }

    .contact-message{
    width: 300px;
    text-align: center;
    }
    .social-media{
      margin-top: 30px;
      text-align: center;
    }

   
    .hover-effect{
      margin-top: 10px;
      height: fit-content;
      position: relative;
      opacity: 1;
      flex-direction: row;
      justify-content: space-around;
    }
    .contact-info-sec{
      display: flex;
      flex-direction: column;
      align-items: center;

    }
    .contact-title{
      text-align: center;
    }

    .last-circle{
      display: none;
    }
}