@font-face{

font-family: 'roboto';
src: url(/fonts/Roboto/static/Roboto-Regular.ttf);
font-display: swap;

}

/* desktop version ***********************************************/

@media only screen and (min-width:769px) {



  * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        /* Added for consistent box model */
    }

    body,
    html {
        width: 100%;
        height: 100%;
        overflow: hidden;
        /* Prevent body scroll */
    }



    .master_container {
        width: 100vw;
        height: 100%;
        position: absolute;
        overflow: hidden;
        margin: 0;
        padding: 0;
       
        
        
    }
    

   
    .main_container {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        gap: 10px;
        padding: 5px;
        margin: 0;
        position: relative;
        
        
    }

    .main_header_container {
        display: none;
        grid-template-columns: 25% calc(50% - 20px) 25%;
        width: 100%;
        height: 60px;
        gap: 10px;
        padding: 5px;
        border-radius: 8px;
    }

   

   


    .content_wraper {
        min-width: 100%;
        height: calc(100% - 0px);
        display: flex;
        flex-direction: column;
        gap: 0;
        overflow: hidden;
      
    }

    .left_panel {
        display: none;
    }

    .left_panel_mobile {
        min-width: 100%;
        height: 50px;
        overflow: hidden;
        white-space: nowrap;
        border-radius: 0px;
        padding: 5px;
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: center;
        justify-content: space-evenly;
        flex-shrink: 0;
        
    }

    .left_panel_top_container {
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: center;
        justify-content: flex-start;
    }

    .left_panel_bottom_container {
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        gap: 10px;
    }

    .right_panel {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        gap: 20px;
        padding: 5px;
        width: 100%;
        background-color: transparent;
        overflow-y: auto;
        overflow-x: hidden;
        border-radius: 8px;
        scrollbar-width: none;
        scrollbar-color: transparent transparent;
    }

    .right_panel::-webkit-scrollbar {
        width: 0;
        background-color: transparent transparent;
    }

    .right_panel::-webkit-scrollbar-thumb {
        width: 0;
        background-color: transparent transparent;
    }

    


    .slideshow_container {
        overflow: hidden;         
        width: 100%;
        height: 320px;
        flex-shrink: 0;
        padding-top: 10px;
        padding-bottom: 10px;
        background-color: transparent transparent;
        display:flex;
        justify-content:center;
        
    }
   
    .profile_name_container{
        width: 100%;
        height: 50px;
        position:relative;
        display:flex;
        justify-content:center;
       
    }
    
    

    
    


   

.container_b{
  width:100%;
  height:50px;
  display: flex;
  justify-content:center; 
  flex-shrink: 0;
  
}

.content_wrap{
  width:100%;  
  height: auto;  
  display: flex;
  justify-content:center; 
  flex-shrink: 0;
}

.content{
        width: 50%;
        height: 100%;
        border-radius: 12px;
        position:relative;
        display:flex;
        flex-direction: column;
        justify-content:center;
        align-items: center;
        gap: 0;
        overflow: hidden;
        
    }
.content_header{
    width: 100%;
    height: 30px;
    padding-left: 20px;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center; 
    flex-shrink: 0;
    
    
}

.content_title{
    display: flex;
    width: auto;
    height: auto;
    align-items: center;
    justify-content: center;
    font-family: roboto;
    font-weight: 400;
    font-size: 1rem;
}
.svg_header{
    width: 20px;
  height: 20px;
}
.svg_header svg{

  width: 20px;
  height: 20px;


}





.content_element{
        width: 100%;
        height: 100%;       
        position:relative;
        display:flex;
        justify-content:center;
        align-items: center;
        padding: 10px;
    }

    .left_panel_btn {
        display: grid;
        grid-template-rows: calc(100% - 2px);
        width: 50px;
        height: 35px;
        gap: 2px;
        padding: 2px;
        border-radius: 15px;
        text-align: center;
        user-select: none;
        cursor: pointer;
        transition: .5s
        
    }

    .left_panel_btn_icon_container {
        width: 100%;
        height: 100%;
        display: block
    }

    .left_panel_btn_icon {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

    .left_panel_btn:hover {
        transition: .8s
    }

    .left_panel_btn_name {
        display: none;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        padding: 2px;
        font-size: 8px;
        font-weight: 400;
        font-family: sans-serif;
    }

    .left_panel_btn_icon svg {
        width: 20px;
        height: 20px;
        display: block;

    }










.knowledge-section {
            background: rgba(0, 0, 0, 0.3);
            border-radius: 15px;
            padding: 25px;
            margin-bottom: 30px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }
        
       
        
        .skills-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
        }
        
        .skill-card {
           
            border-radius: 12px;
            padding: 20px;
            transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
            
        }
        
        .skill-card:hover {
            transform: translateY(-5px);
            background: rgba(255, 255, 255, 0.15);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
        }
        
        .skill-card h3 {
            font-size: 1.2rem;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-family: roboto;
        }
        
        
        .skill-card ul {
            list-style-type: none;
            padding-left: 0;
            
        }
        
        .skill-card li {
            padding: 8px 0;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .skill-card li:last-child {
            border-bottom: none;
        }
        
        .skill-card i {
            color: #ffcc00;
            width: 20px;

        }
        
        .tech-stack {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 20px;
        }

        .svg_mark{
            width: 15px;
            height: 15px;
        }
        .svg_mark svg{
            width: 15px;
            height: 15px;
        }
       
        .tech-stack span {
            font-family: roboto;
        }
        
        .tech-badge {
            
            padding: 8px 15px;
            border-radius: 50px;
            font-size: 0.9rem;            
            font-family: roboto;
        }







}


/* mobile version ***********************************************/

@media only screen and (max-width:768px) {
        * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        /* Added for consistent box model */
    }

    body,
    html {
        width: 100%;
        height: 100%;
        overflow: hidden;
        /* Prevent body scroll */
    }



    .master_container {
        width: 100vw;
        height: 100%;
        position: absolute;
        overflow: hidden;
        margin: 0;
        padding: 0;
       
        
        
    }
    

   
    .main_container {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        gap: 10px;
        padding: 5px;
        margin: 0;
        position: relative;
        
        
    }

    .main_header_container {
        display: none;
        grid-template-columns: 25% calc(50% - 20px) 25%;
        width: 100%;
        height: 60px;
        gap: 10px;
        padding: 5px;
        border-radius: 8px
    }
  

    .skills-grid {
                grid-template-columns: 1fr;
            }

    .header_item_one {
        width: 100%;
        height: 100%;
        border-radius: 6px;
        display: flex;
        flex-direction: row;
        gap: 5px;
        padding-left: 10px;
        align-items: center;
        justify-content: flex-start;
    }

    .header_item_three {
        width: 100%;
        height: 100%;
        border-radius: 6px;
    }

    .header_item_two {
        width: 100%;
        height: 100%;
        border-radius: 6px;
    }

    .logo_container {
        width: 35px;
        height: 35px;
        overflow: hidden;
        display: block;
        flex-shrink: 0;
    }

    .logo {
        min-width: 100%;
        min-height: 100%;
        object-fit: cover;
    }

    .company_name {
        font-size: 1rem;
        font-weight: 600;
    }


    .content_wraper {
        min-width: 100%;
        height: calc(100% - 0px);
        display: flex;
        flex-direction: column;
        gap: 0;
        overflow: hidden;
      
    }

    .left_panel {
        display: none
    }

    .left_panel_mobile {
        min-width: 100%;
        height: 50px;
        overflow: hidden;
        white-space: nowrap;
        border-radius: 0px;
        padding: 5px;
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: center;
        justify-content: space-evenly;
        flex-shrink: 0;
        
    }

    .left_panel_top_container {
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: center;
        justify-content: flex-start
    }

    .left_panel_bottom_container {
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        gap: 10px
    }

    .right_panel {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        gap: 10px;
        padding: 5px;
        width: 100%;
        background-color: transparent;
        overflow-y: auto;
        overflow-x: hidden;
        border-radius: 8px;
        scrollbar-width: none;
        scrollbar-color: transparent transparent
    }

    .right_panel::-webkit-scrollbar {
        width: 0;
        background-color: transparent transparent
    }

    .right_panel::-webkit-scrollbar-thumb {
        width: 0;
        background-color: transparent transparent
    }

    .slideshow_container {
        overflow: hidden;
         border-radius: 12px;
        width: 100%;
        height: 40%;
        flex-shrink: 0;
      background-color:#eaeaea;
      position:relative;
      display:flex;
      justify-content:center;
    }



    .slide_left {
        width: 100%;
        height: 100%;
        border-radius: 12px
    }

    .slide_right {
        display: none;
        grid-template-rows: calc(60% - 5px) calc(40% - 5px);
        gap: 10px;
        width: 100%;
        height: 100%
    }

    .sub_slide_one {
        width: 100%;
        height: 100%;
        border-radius: 12px;
    }

    .sub_slide_two {
        display: grid;
        grid-template-columns: calc(50% - 5px) calc(50% - 5px);
        gap: 10px;
        width: 100%;
        height: 100%;
        background-color: transparent;
    }

    .sub_slide_two_one {
        width: 100%;
        height: 100%;
        border-radius: 12px
    }

    .sub_slide_two_two {
        width: 100%;
        height: 100%;
        border-radius: 12px;
    }

    .app_slide_container {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 180px;
        border-radius: 12px;
        flex-shrink: 0;
    }

    .left_panel_btn {
        display: grid;
        grid-template-rows: calc(100% - 2px);
        width: 50px;
        height: 35px;
        gap: 2px;
        padding: 2px;
        border-radius: 15px;
        text-align: center;
        user-select: none;
        cursor: pointer;
        transition: .5s
        
    }

    .left_panel_btn_icon_container {
        width: 100%;
        height: 100%;
        display: block
    }

    .left_panel_btn_icon {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

    .left_panel_btn:hover {
        transition: .8s
    }

    .left_panel_btn_name {
        display: none;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        padding: 2px;
        font-size: 8px;
        font-weight: 400;
        font-family: sans-serif;
    }

    .left_panel_btn_icon svg {
        width: 20px;
        height: 20px;
        display: block;

    }

.container_b{
  width:100%;
  height:150px;
  background-color:#eaeaea;
  display: flex;
  flex-direction: row;    
  flex-shrink: 0;
}





}