@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
html{
    scroll-behavior: smooth;
}

body{
    background-color:black;
    color:white;
    font-family:'Roboto';
    display:flex;
    justify-content:center;
    align-items:center;
    margin:0 auto;
}
.main_container{
    display:flex;
    flex-direction:column;
    flex-wrap:wrap;
    width:900px;
}
.top_navigation{
    width:1000px;
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    gap:100px;
    position:fixed;
    background-color:black;
}
.left_section{
    display:flex;
    float:left;
    flex:1;
    justify-content:left;
    
}
.name_container{
    float:left;
    align-items:center;
    cursor:pointer;
}
.name{
    color:#A8ADB2;
    font-size:20px;
    font-weight:bold;
    letter-spacing: 1px;
    cursor:pointer;
}
.name:hover{
    color:white;
}
.head-link{
    cursor:pointer;
    text-decoration:none;
}
.right_section{
    margin-left:50px;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:right;
    gap:20px;
    font-size:18px;
    letter-spacing:1px;
    color:#A8ADB2;;
}
.work_container{
    color:#A8ADB2;
    cursor:pointer;
}
.work_container:hover{
    color:white;
}
.work_link{
    color:#A8ADB2;
    text-decoration:none;
}
.work:hover{
    color:white;
}
.project_container{
    cursor:pointer;
}
.project_container:hover{
    color:white;
}
.project_link{
    color:#A8ADB2;
    text-decoration:none;
}
.project:hover{
    color:white;
}
.Contact_container{
    cursor:pointer;
}
.Contact_container:hover{
    color:white;
}
.contact_link{
    color:#A8ADB2;
    text-decoration:none;
}
.contact:hover{
    color:white;
}
.middle_container{
    display:flex;
    flex-direction:column;
    align-items:left;
    gap:10px;
    padding-top:100px;
}
.center_container{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:50px;
    /* margin-top:100px;
    margin-left:50px; */
}
.profile_container{
    padding:10px;
    background:linear-gradient(to right,blue,pink);
    width:170px;
    height:170px;
    border-radius:50%;
    overflow:hidden;
}
.profile{
    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover;
}
.detail_container{
    width:500px;
    padding:10px;
    display:flex;
    align-items:center;
    display:flex;
    flex-direction:column;
   
}
.detail{
    font-family:'Roboto';
    font-weight:bold;
    font-size:28px;
    letter-spacing:1.5px;
}
.detail_inside{
    color:#A8ADB2;
}
.work_button{
    padding:4px 12px;
    font-size:14px;
    background-color:#16A34A33;
    color:#16A34A;
    border:none;
    border-radius:40px;
    font-weight:bold;
    margin-left:5px;
}
.link_container{
    color:#A8ADB2;
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:20px;
    margin-top:-10px;
    margin-left:-50px;
}
.linkedin_container{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:left;
}
.location_container{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:10px;
    letter-spacing:1.5px;
}
.house_image_container{
    width:20px;
}
.house{
    width:100%;
}
.house_name_container{
    cursor:pointer;
}
.house_name_link{
    text-decoration:none;
}
.home_name_link::after{
    text-decoration:none;
}
.house_name_link:active{
    text-decoration:none;
}
.house_name{
    color:#A8ADB2;
    text-decoration:none;
}
.house_name:hover{
    color:white;
}
.social_link_container{
    display:flex;
    flex-direction:row;
    justify-content:right;
    align-items:center;
    gap:20px;
    margin-left:30px;
    letter-spacing: 1.5px;

}
.linkedin_container{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:10px;
}
.linkedin_image_container{
    width:30px;
}
.linked_image{
    width:100%;
}
.linkedin_name{
    cursor: pointer;
}
.linkedin_name::after{
    color:#A8ADB2;
    text-decoration:none;
}
.linkedin_name_link{
    color:#A8ADB2;
    text-decoration:none;
}
.linkedin_name_link:active{
    color:#A8ADB2;
    text-decoration:none;
}
.linkedin_name_link::after{
    text-decoration:none;
}
.linkedin_name:hover{
    color:white;
}
.github_container{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:10px;
}
.github_image_container{
    width:30px;
}
.github{
    width:100%;
}
.github_name_link{
    color:#A8ADB2;
    text-decoration:none;
}
.github_name_link:hover{
    color:white;
}
.github_name_link:active{
    color:#A8ADB2;
    text-decoration:none;
}
.github_name_link::after{
    color:#A8ADB2;
    text-decoration:none;
}
.tech_stack_container{
    margin-top:200px;
    display:flex;
    flex-direction:column;
    gap:20px;
}
.techstack{
    font-size:30px;
    letter-spacing:1.5px;
}
.techstack_logos{
    display:flex;
    flex-wrap:wrap;
    row-gap:20px;
    column-gap:20px;
}
.react_container{
    border:1px solid gray;
    border-radius:10px;
    padding-top:10px;
    padding-bottom:10px;
    padding-right:50px;
    padding-left:50px;
    display:flex;
    flex-direction:column;
    align-items:center;
    cursor:pointer;
    transition:all 0.5s ease;
}
.react_container:hover{
    background-color:rgba(255, 255, 255, 0.16);
    transform: translateY(-5px);
}
.react_image_container{
    width:70px;
    margin-bottom:0;
}
.react_image{
    margin-left:20px;
    width:32px;
    margin-bottom:0;
}
.react_name_container{
    margin-top:5px;
}
.react_name{
    margin-top:5px;
}
.nextjs_container{
    border:1px solid gray;
    border-radius:10px;
    padding-top:10px;
    padding-bottom:10px;
    padding-right:50px;
    padding-left:50px;
    display:flex;
    flex-direction:column;
    align-items:center;
    cursor:pointer;
    transition:all 0.5s ease;
}
.nextjs_container:hover{
    background-color:rgba(255, 255, 255, 0.16);
    transform: translateY(-5px);
}
.nextjs_image_container{
    width:70px;
    margin-bottom:0;
}
.nextjs_image{
    margin-left:20px;
    width:32px;
    margin-bottom:0;
}
.nextjs_name_container{
    margin-top:5px;
}
.nextjs_name{
    margin-top:5px;
}
.javascript_container{
    border:1px solid gray;
    border-radius:10px;
    padding-top:10px;
    padding-bottom:10px;
    padding-right:50px;
    padding-left:50px;
    display:flex;
    flex-direction:column;
    align-items:center;
    cursor:pointer;
    transition:all 0.5s ease;
}
.javascript_container:hover{
    background-color:rgba(255, 255, 255, 0.16);
    transform: translateY(-5px);
}
.javascript_image_container{
    width:70px;
    margin-bottom:0;
}
.javascript_image{
    margin-left:20px;
    width:32px;
    margin-bottom:0;
}
.javascript_name_container{
    margin-top:5px;
}
.javascript_name{
    margin-top:5px;
}
.typescript_container{
    border:1px solid gray;
    border-radius:10px;
    padding-top:10px;
    padding-bottom:10px;
    padding-right:50px;
    padding-left:50px;
    display:flex;
    flex-direction:column;
    align-items:center;
    cursor:pointer;
    transition:all 0.5s ease;
}
.typescript_container:hover{
    background-color:rgba(255, 255, 255, 0.16);
    transform: translateY(-5px);
}
.typescript_image_container{
    width:70px;
    margin-bottom:0;
}
.typescript_image{
    margin-left:20px;
    width:32px;
    margin-bottom:0;
}
.typescript_name_container{
    margin-top:5px;
}
.typescript_name{
    margin-top:5px;
}
.tailwind_container{
    border:1px solid gray;
    border-radius:10px;
    padding-top:10px;
    padding-bottom:10px;
    padding-right:50px;
    padding-left:50px;
    display:flex;
    flex-direction:column;
    align-items:center;
    cursor:pointer;
    transition:all 0.5s ease;
}
.tailwind_container:hover{
    background-color:rgba(255, 255, 255, 0.16);
    transform: translateY(-5px);
}
.tailwind_image_container{
    width:70px;
    margin-bottom:0;
}
.tailwind_image{
    margin-left:20px;
    width:32px;
    margin-bottom:0;
}
.tailwind_name_container{
    margin-top:5px;
}
.tailwind_name{
    margin-top:5px;
}
.html-container{
    border:1px solid gray;
    border-radius:10px;
    padding-top:10px;
    padding-bottom:10px;
    padding-right:50px;
    padding-left:50px;
    display:flex;
    flex-direction:column;
    align-items:center;
    cursor:pointer;
    transition:all 0.5s ease;
}
.html-container:hover{
    background-color:rgba(255, 255, 255, 0.16);
    transform: translateY(-5px);
}
.html_image_container{
    width:70px;
    margin-bottom:0;
}
.html_image{
    margin-left:20px;
    width:32px;
    margin-bottom:0;
}
.html_name_container{
    margin-top:5px;
}
.html_name{
    margin-top:5px;
}
.css_container{
    border:1px solid gray;
    border-radius:10px;
    padding-top:10px;
    padding-bottom:10px;
    padding-right:50px;
    padding-left:50px;
    display:flex;
    flex-direction:column;
    align-items:center;
    cursor:pointer;
    transition:all 0.5s ease;
}
.css_container:hover{
    background-color:rgba(255, 255, 255, 0.16);
    transform: translateY(-5px);
}
.css_image_container{
    width:70px;
    margin-bottom:0;
}
.css_image{
    margin-left:20px;
    width:32px;
    margin-bottom:0;
}
.css_name_container{
    margin-top:5px;
}
.css_name{
    margin-top:5px;
}
.mongodb_container{
    border:1px solid gray;
    border-radius:10px;
    padding-top:10px;
    padding-bottom:10px;
    padding-right:50px;
    padding-left:50px;
    display:flex;
    flex-direction:column;
    align-items:center;
    cursor:pointer;
    transition:all 0.5s ease;
}
.mongodb_container:hover{
    background-color:rgba(255, 255, 255, 0.16);
    transform: translateY(-5px);
}
.mongodb_image_container{
    width:70px;
    margin-bottom:0;
}
.mongodb_image{
    margin-left:20px;
    width:32px;
    margin-bottom:0;
}
.mongodb_name_container{
    margin-top:5px;
}
.mongodb_name{
    margin-top:5px;
}
.express_container{
    border:1px solid gray;
    border-radius:10px;
    padding-top:10px;
    padding-bottom:10px;
    padding-right:50px;
    padding-left:50px;
    display:flex;
    flex-direction:column;
    align-items:center;
    cursor:pointer;
    transition:all 0.5s ease;
}
.express_container:hover{
    background-color:rgba(255, 255, 255, 0.16);
    transform: translateY(-5px);
}
.express_image_container{
    width:70px;
    margin-bottom:0;
}
.express_image{
    margin-left:20px;
    width:32px;
    margin-bottom:0;
}
.express_name_container{
    margin-top:5px;
}
.express_name{
    margin-top:5px;
}
.java_container{
    border:1px solid gray;
    border-radius:10px;
    padding-top:10px;
    padding-bottom:10px;
    padding-right:50px;
    padding-left:50px;
    display:flex;
    flex-direction:column;
    align-items:center;
    cursor:pointer;
    transition:all 0.5s ease;
}
.java_container:hover{
    background-color:rgba(255, 255, 255, 0.16);
    transform: translateY(-5px);
}
.java_image_container{
    width:70px;
    margin-bottom:0;
}
.java_image{
    margin-left:20px;
    width:32px;
    margin-bottom:0;
}
.java_name_container{
    margin-top:5px;
}
.java_name{
    margin-top:5px;
}
.python_container{
     border:1px solid gray;
    border-radius:10px;
    padding-top:10px;
    padding-bottom:10px;
    padding-right:50px;
    padding-left:50px;
    display:flex;
    flex-direction:column;
    align-items:center;
    cursor:pointer;
    transition:all 0.5s ease;
}
.python_container:hover{
    background-color:rgba(255, 255, 255, 0.16);
    transform: translateY(-5px);
}
.python_image_container{
    width:70px;
    margin-bottom:0;
}

.python_image{
    margin-left:20px;
    width:32px;
    margin-bottom:0;
}
.python_name_container{
    margin-top:5px;
}
.python_name{
    margin-top:5px;
}
.work_experience_container{
    display:block;
    align-items:center;
    margin-top:100px;
}
.experience_heading{
    font-size:30px;
    letter-spacing: 1.5px;
}
.first_work{
   display:grid;
   grid-template-columns:200px 1fr;
}
.first_work_date_container{
    display:block;
}
.first_work_date{
    color:#A8ADB2;
    font-size:16px;
}
.first_work_detail_title_container{
    margin-bottom:0;
}
.first_work_detail_title{
    color:white;
    font-size:18px;
    font-weight:bold;
    letter-spacing: 2px;
    margin-bottom:0;
}
.first_company_name{
    color:#A8ADB2;
    margin-top:10px;
    font-size:16px;
    margin-bottom:0;
    letter-spacing:1px;
}
.first_work_detail_container{
    margin-top:10px;
}
.first_work_detail{
    font-size:16px;
    color:#A8ADB2;
    letter-spacing:1px;
}
.my_project_container{
    margin-top:100px;
    display:flex;
    flex-direction:column;
    padding-top:10px;
    padding-bottom:10px;
    padding-right:20px;
    padding-left:20px;
}
.project_heading{
    letter-spacing:1.5px;
    align-items:left;
}

.first_project{
    padding-top:60px;
    padding-bottom:20px;
    padding-right:40px;
    padding-left:40px;
    border:1px solid gray;
    border-radius:10px;
    display:flex;
    flex-direction:column;
    gap:10px;
    width:600px;
    align-items:center;
    margin-top:20px;
}
.project_image_container{
    width:500px;
    margin-bottom:0;
}
.project_image{
    width:100%;
}
.first_project_detail_container{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    margin-bottom:0;
    width:100%;
}
.first_project_title_container{
    margin-bottom:0;
}
.first_project_breif_container{
    margin-top:-20px;
    width:100%;
}
.first_project_breif{
    font-size:18px;
    color:gray;
    letter-spacing:1.5px;
}
.first_techonologies_container{
    display:flex;
    gap:10px;
}
.project_button_container{
    margin-top:20px;
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    width:550px;
}
.live_demo_button{
    font-size:18px;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:10px;
    padding-right:10px;
    color:white;
    border:none;
    background-color:rgba(160, 160, 160, 0.4);
    border-radius:20px;
    cursor:pointer;
    transition:all 0.5s ease;
}
.live_demo_button:hover{
    background-color:gray;
}
.source_code_button{
    font-size:18px;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:10px;
    padding-right:10px;
    color:white;
    border:none;
    background-color:rgba(160, 160, 160, 0.4);
    border-radius:20px;
    cursor:pointer;
    transition:all 0.5s ease;
}
.source_code_button:hover{
    background-color:gray;
}
.my_contact_container{
    margin-top:50px;
    border-top:1px solid gray;
    display:flex;
    align-items:center;
    gap:20px;
    font-size:20px;
    letter-spacing: 1px;
    cursor:pointer;
}
#popup {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #4CAF50;
  color: white;
  padding: 10px 16px;
  border-radius: 8px;
  opacity: 0;
  transition: opacity 0.3s ease;
  font-family: Arial, sans-serif;
}
#close{
    display:none;
}
#mobile i{
    display:none;
}
#popup.show {
  opacity: 1;
  padding-right:100px;
}
/* html{
    scroll-behavior:smooth;
} */
@media(max-width:799px){
    body{
        width:700px;
    }
    .top_navigation{
       width:750px;
    }
    #nav.active{
        right:0;
    }
    .name{
        font-size:17px; 
    }
    .right_section{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        justify-content:flex-start;
        position:fixed;
        top:0;
        right:-300px;
        height:100vh;
        width:300px;
        background-color:black;
        box-shadow:0 40px 60px rgba(0,0,0,0.1);
        padding-top:80px;
        padding-left:10px;
        padding-bottom:0;
        padding-right:0;
        transition:0.3s;
    }
    #mobile{
        display:flex;
        align-items:center;
    }
    #mobile i{
        display:initial;
        color:white;
        font-size:24px;
        padding-left:20px;
        padding-right:30px;
        cursor:pointer;
    }
    #close{
        display:initial;
        position:absolute;
        top:30px;
        left:30px;
        color:white;
        font-size:24px;
        cursor:pointer;
    }
    .center_container{
        flex-direction:column;
        justify-content:center;
        align-items:center;
    }
    .profile_container{
        /* padding:10px; */
        background:linear-gradient(to right,blue,pink);
        width:100px;
        height:100px;
        border-radius:50%;
        overflow:hidden;
    }
    .profile{
        width:100%;
        height:100%;
        border-radius:50%;
        object-fit:cover;
    }
    .detail_container{
        width:600px;
        /* padding:10px; */
        display:flex;
        align-items:center;
        margin-top:-50px;
    }
    .detail{
        font-family:'Roboto';
        font-weight:bold;
        font-size:20px;
        letter-spacing:1.5px;
    }
    .link_container{
        display:flex;
        flex-direction:row;
        color:#A8ADB2;
        display:flex;
        flex-direction:row;
        align-items:center;
        gap:20px;
        margin-top:-10px;
        margin-left:-50px;
    }
    .middle_container{
        margin-bottom:0;
    }
    .tech_stack_container{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:20px;
        margin-top:-5px;
    }
    .techstack_logos{
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
        align-items:center;
        justify-content:center;
    }
    .techstack{
        font-size:20px;
    }
    .react_name,.nextjs_name,.javascript_name,
    .typescript_name,.tailwind_name,.mongodb_name,
    .express_name,.java_name,.python_name{
        font-size:14px;
    }
    .work_experience_container{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        align-items:center;
        margin-top:50px;
    }
    .experience_heading{
        font-size:20px;
        letter-spacing: 1.5px;
    }
    .first_work_date_container{
        display:block;
    }
    .first_work_date{
        color:#A8ADB2;
        font-size:16px;
    }
    .first_work_detail_title_container{
        margin-bottom:0;
    }
    .first_work_detail_title{
        font-size:16px;
    }
    .first_company_name{
        font-size:14px;
    }
    .first_work_detail{
        font-size:16px;
    }
    .my_project_container{
        margin-top:50px;
        display:flex;
        flex-direction:column;
        align-items:center;
        padding-top:10px;
        padding-bottom:10px;
        padding-right:20px;
        padding-left:20px;
    }
    .project_heading{
        font-size:17px;
    }
    .first_project{
        padding-top:60px;
        padding-bottom:20px;
        padding-right:40px;
        padding-left:40px;
        border:1px solid gray;
        border-radius:10px;
        display:flex;
        flex-direction:row;
        gap:10px;
        width:150px;
        height:150px;
        align-items:center;
        margin-top:20px;
    }
    .first_project_breif{
        display:none;
    }
    .first_project_title{
        font-size:16px;
    }
    .project_image_container{
        width:200px;
        margin-bottom:0;
    }
    .project_image{
        width:100%;
    }
    .first_techonologies_container{
        display:none;
    }
    .project_button_container{
        display:none
    }
    .first_project_breif{
        font-size:12px;
    }
}
@media(max-width:825px){
    body{
        width:700px;
    }
    .top_navigation{
       width:750px;
    }
    #nav.active{
        right:0;
    }
    .name{
        font-size:17px; 
    }
    .right_section{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        justify-content:flex-start;
        position:fixed;
        top:0;
        right:-300px;
        height:100vh;
        width:300px;
        background-color:black;
        box-shadow:0 40px 60px rgba(0,0,0,0.1);
        padding-top:80px;
        padding-left:10px;
        padding-bottom:0;
        padding-right:0;
        transition:0.3s;
    }
    #mobile{
        display:flex;
        align-items:center;
    }
    #mobile i{
        display:initial;
        color:white;
        font-size:24px;
        padding-left:20px;
        padding-right:30px;
        cursor:pointer;
    }
    #close{
        display:initial;
        position:absolute;
        top:30px;
        left:30px;
        color:white;
        font-size:24px;
        cursor:pointer;
    }
    .center_container{
        flex-direction:column;
        justify-content:center;
        align-items:center;
    }
    .profile_container{
        /* padding:10px; */
        background:linear-gradient(to right,blue,pink);
        width:100px;
        height:100px;
        border-radius:50%;
        overflow:hidden;
    }
    .profile{
        width:100%;
        height:100%;
        border-radius:50%;
        object-fit:cover;
    }
    .detail_container{
        width:600px;
        /* padding:10px; */
        display:flex;
        align-items:center;
        margin-top:-50px;
    }
    .detail{
        font-family:'Roboto';
        font-weight:bold;
        font-size:20px;
        letter-spacing:1.5px;
    }
    .link_container{
        display:flex;
        flex-direction:row;
        color:#A8ADB2;
        display:flex;
        flex-direction:row;
        align-items:center;
        gap:20px;
        margin-top:-10px;
        margin-left:-50px;
    }
    .middle_container{
        margin-bottom:0;
    }
    .tech_stack_container{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:20px;
        margin-top:-5px;
    }
    .techstack_logos{
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
        align-items:center;
        justify-content:center;
    }
    .techstack{
        font-size:20px;
    }
    .react_name,.nextjs_name,.javascript_name,
    .typescript_name,.tailwind_name,.mongodb_name,
    .express_name,.java_name,.python_name{
        font-size:14px;
    }
    .work_experience_container{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        align-items:center;
        margin-top:50px;
    }
    .experience_heading{
        font-size:20px;
        letter-spacing: 1.5px;
    }
    .first_work_date_container{
        display:block;
    }
    .first_work_date{
        color:#A8ADB2;
        font-size:16px;
    }
    .first_work_detail_title_container{
        margin-bottom:0;
    }
    .first_work_detail_title{
        font-size:16px;
    }
    .first_company_name{
        font-size:14px;
    }
    .first_work_detail{
        font-size:16px;
    }
    .my_project_container{
        margin-top:50px;
        display:flex;
        flex-direction:column;
        align-items:center;
        padding-top:10px;
        padding-bottom:10px;
        padding-right:20px;
        padding-left:20px;
    }
    .project_heading{
        font-size:17px;
    }
    .first_project{
        padding-top:60px;
        padding-bottom:20px;
        padding-right:40px;
        padding-left:40px;
        border:1px solid gray;
        border-radius:10px;
        display:flex;
        flex-direction:row;
        gap:10px;
        width:150px;
        height:150px;
        align-items:center;
        margin-top:20px;
    }
    .first_project_breif{
        display:none;
    }
    .first_project_title{
        font-size:16px;
    }
    .project_image_container{
        width:200px;
        margin-bottom:0;
    }
    .project_image{
        width:100%;
    }
    .first_techonologies_container{
        display:none;
    }
    .project_button_container{
        display:none
    }
    .first_project_breif{
        font-size:12px;
    }
}
@media(max-width:477px){
    body{
        width:430px;
    }
    .top_navigation {
        width: 430px;
    }
    .name {
        padding-left:40px;
        font-size: 17px;
    }
    .detail_container {
        width:450px;
    }
    .detail {
        font-size: 14px;
    }
    .link_container {
        margin-top: -10px;
        margin-left:2px;
    }
    .house_image_container {
        width: 20px;
    }
    .house_name_container {
        margin-left:-10px;
        cursor: pointer;
    }
    .work_experience_container {
       font-size:14px;
       padding:10px 40px
    }
    .first_work_detail {
        display:none;
    }
    .my_contact_container {
       display:flex;
       justify-content:center;
       align-items:center;
       text-align:center;
    }
    .tech_stack_container {
        padding-left:30px;
        padding-right:30px 
    }
}
@media(max-width:377px){
    body{
        width:365px;
        font-size:12px;
    }
    .top_navigation {
        width: 450px;
    }
    .detail {
        font-size: 12px;
        padding-left:30px;
        padding-right:30px
    }
    .link_container {
        font-size:12px;
    }
    #mobile i {
        padding:10px 40px;
    }
    .name {
        padding-left: 60px;
    }
    .work_experience_container {
       padding-left:70px;
       padding-right:60px;
    }
    .tech_stack_container {
        padding-left:30px;
        padding-right:30px 
    }
    .techstackClass{
        width:50px;
    }
    .techstack_logos{
        width:400px;
    }
    .linkedin_image_container {
        width: 20px;
    }
    .github_image_container {
        width: 20px;
    }
}