*{
    
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Big Shoulders Display', sans-serif;
font-family: 'Lexend Deca', sans-serif;
font-family: 'Poppins', sans-serif;
  
}

html{
    scroll-behavior: smooth;
}
body{
text-decoration: none;
list-style: none;
     display: flex;
    flex-direction: column;
    min-height: 100vh;
}
:root{
    --desktop-resposive : 1360px;
    --para-color:#8B8A8B;
    --primary-color:black;
--secondary-color:#0288D1;                                                                                                                              
}
/* header css */

header{
    background-color: white;
    width: 100%;
    position: sticky;
    left: 0;
    top: 0 ;
    z-index: 1;
}
nav{
    padding: 0.8rem 1rem;
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#home_button{
    font-weight: 900;
}
#home_button > a{
    
    color: var(--primary-color);
}
.tabs_container{
 display: flex;   
 justify-content: space-between;
}
.tabs_container > a{
    
    color: black;
}
.tab{
    color: black;
    cursor: pointer;
    margin: 0 0.6rem;
}
.tab:hover{
    font-weight: 600;
    cursor: pointer;
    margin: 0 0.6rem;
}

/* navigation slide mobile responsive */

.hamburger_icon{
    display: none;
}
.sidebar{
    display: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    position: absolute;
    width: 250px;
    height: 100vh;
    top: 0px;
    right: -2px;
    z-index: 2;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
    background-color: white;
}

.sidebar > img{
    margin: 10px 0 0 10px;   
}

.sidebar > a{
    padding: 10px 0;
}


/* navigation slide mobile responsive */

@media screen and (max-width:650px) {
     .hamburger_icon{
          display: block;
     } 
     .tabs_container{
        display: none;
     }
     .header{
     background-color: white;
     width: 100%;
     position: sticky;
     left: 0;
     top: 0 ;
     z-index: 1;
    }
    
}



/* header css */

main{
    z-index: 0;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 100vh;
}

.intro_container{
    
    align-items: center;
    display: flex;
    max-width:var(--desktop-resposive);
    margin: 0 auto;
    justify-content: space-around;
    }

.about_container > h1{
        line-height: 0.7in;
        font-size: 4rem;
        font-weight: 800;
        font-style: bold;
        margin-bottom: 3rem;    
}



.icon {
    cursor: pointer;
    width: 32px;
}


.icon:hover{
    border-bottom: 2px solid var(--secondary-color);
    cursor: pointer;
    width: 32px;
}

.github_icon:hover{
    border-bottom: 2px solid var(--primary-color) !important;
}

.intro_container > img{
    max-width: 400px;
    max-height: 700px;

    object-fit: contain;
}

@media screen and (max-width:650px) {
    .about_container > p{
      margin: 0;
    }
    .intro_container{
        flex-direction: column-reverse;
      
        max-width:var(--desktop-resposive);
       
      
        }
        .intro_container > img{
            max-width: 150px;
            max-height: 450px;
        }

        .about_container>    h1{
            line-height: .4in;
            font-size: 2rem;
            text-align: center;
        
        
    }

    .about_container > p{
        text-align: center;
    }
    
}

/* about me */

.about_me{
    z-index: 0;
    display: flex;
    align-items: center;
min-height: 100vh;
    width: 100%;
}

.about_me_container{
    width: 900px;
    display: flex;
    margin: 0 auto;
}

.img_container {
    width: 900px;
    height: 270px;
}
.img_container > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.details{
    margin: 0 50px;
}

.details > h6{

   color: var(--secondary-color);
   font-size: 1rem;
   text-align: left;
}

.details >h4{
    text-align: left;
}

.details > p{
    font-size: 0.9rem;
    color: var(--para-color);

}
@media screen and (max-width:650px) {
    .about_me_container{
    
     flex-direction: column;
        align-items: center;
   
    }

    .img_container {
        width:50%;
        height: 130px;
    }
    .img_container > img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .details > h6{
        margin-top: 50PX;
text-align: center;
        color: var(--secondary-color);
        font-size: 1rem;
      
     }
     
     .details >h4{
         text-align: center;
     }
     
     .details > p{
        text-align: center;
         font-size: 0.9rem;
         color: var(--para-color);
     
     }

}


/* about me */


/* project section */

.project_section{
    z-index: 0;
    width: 100%;
    min-height: 100vh;
}

.projects_container{
    max-width:850px;
    margin: 0 auto;
}

.projects_container > h1{
    color: var(--secondary-color);
}

.project_container{
    cursor: pointer;
    display: flex;
    padding: 40px 0;
   align-items: center;
}

.project_container:hover{
    
    border-bottom: 2px solid var(--secondary-color);
    cursor: pointer;
    display: flex;
   align-items: center;
}

.screenshot{
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    width: 540px;
    height: 350px;
    object-fit: contain;
}
.snapkoo_ > img{
    margin-right: 6rem;
}

.tech_stack_list{
    display: flex;
   }


.tech_stack_list > p{
    margin: 0 0.6rem;
}


.source_code_n_live_demo{
    
    display: flex;
    margin-top: 40px;
}


.source_code_n_live_demo > a>p{
   color: var(--primary-color);
   font-weight: 800;
}
.code_container{
    margin-right: 15px;
}


.source_code_n_live_demo>a>img{
    width: 36px;
}
.source_code_n_live_demo>a{
    
   display: flex;
   align-items: center;
   font-size: 0.8rem;
}

h4{
    margin-bottom: 1.5rem;
    text-align: center;
   text-transform: uppercase;
    letter-spacing: 0.1rem;
}

.information_container > p{
    margin-bottom: 1.5rem;
    text-align: center;
    color: var(--para-color);
}


.snapphotos_ > img{
    margin-left: 6rem;
}

.snapimdb_ > img{
    margin-right: 6rem;
}


@media screen and (max-width: 650px) {
    .projects_container > h1{
     text-align: center;
    }   
    .project_container{
        cursor: pointer;
        display: flex;
        padding: 40px 0;
       align-items: center;
       flex-direction: column;
    }
    .snapphotos_{
        flex-direction: column-reverse !important;
    }

    .snapphotos_ > img{
        margin: 0 auto;
    }
    
    .snapimdb_ > img{
        margin: 0 auto;
    }
    .snapkoo_ > img{
        margin: 0 auto;
    }
    .information_container > p{
      padding: 0 150px;
    }
    .tech_stack_list{
    display: flex;
    justify-content: space-evenly;
    }
    .source_code_n_live_demo{
    justify-content: space-evenly;
    display: flex;
    margin-top: 40px;
    } .information_container > p{
            padding: 0 20px;
          }
.screenshot{
       width: 390px;
          height: 200px;
}
       
}

@media screen and (max-width:663px) {
   
    .information_con > img{
        width:28px;
        height: 28PX;
        margin: 0 0.7rem;
    } 
       
      }

/* project section */

/* FOOTER SECTION */

footer{
    z-index: 0;
    padding-top: 5rem;
    margin-top: 5rem;
    width: 100%;
    background-color: #F1F5F9;
}

.contact_section{
    padding: 20px 0;
    max-width: var(--desktop-resposive);
    margin: 0 auto;
}

@media screen and (max-width:1100px) {
    .contact_section{
        margin: 0 100px;
           
    }

    .information_con > img{
        margin: 0;
    }
}                                                                                                       


@media screen and (max-width:663px) {
    .contact_section{
        margin: 0 10px;
    }
    .information_con > img{
        width:28px;
        height: 28PX;
        margin: 0 0.7rem;
        
      }
      .info_container{
        display: flex;
        flex-direction: column-reverse;
        margin-top: 5rem;
    }
    
}

h5{
    color: var(--secondary-color);

}
.info_container{
    display: flex;
    margin-top: 5rem;
}


.information_con{
    display: flex;
  
}

.information_con > img{
  width: 42px;
  margin: 0 0.7rem;
  
}


.location_container{
    margin-right: 20px;
}