@media (prefers-color-scheme:dark) {
    :root {
        background-color: #1f1f1f;
    }

    .master_container {
        background: #1f1f1f;
    }



    .main_header_container {
        background-color: transparent;
    }

    .header_item_one {
        background-color: transparent;
        border: 1px solid transparent;
    }

    .header_item_three {
        background-color: transparent;
        border: 1px solid #eaeaea11;
    }

    .header_item_two {
        background-color: transparent;
        border: 1px solid #eaeaea11;
    }

    .company_name {
        color: #ffffff;
    }

    .logo_container svg path {
        fill: #ffffff;
    }

    .left_panel {
        background-color: transparent;
        border: 1px solid transparent;
    }

    .left_panel_mobile {
        background-color: transparent;
        border: 1px solid #eaeaea11;
    }

    

    .menu-btn svg path{
       
        stroke: #ffffff;
    }
    .menu-btn:hover{
background-color: #eaeaea30;

}


    
    
    .img_wraper{
        
   background: radial-gradient(circle at center, #4187d6 0%, #1A1A2E 100%);
  /* Fallback for older browsers (solid dark color) */
   background-color: #1A1A2E; 
   box-shadow: 0px 8px 11px 0px rgba(0, 0, 0, 0.1);

    }

   

    .image_container{
     
     box-shadow: 0 0 0 5px #ffffff;
    
     
   }

    .content{
        box-shadow: 0 0 0 1px #eaeaea05;
        background-color: rgba(0, 0, 0, 0.104);
    }

    .right_panel {
        background-color: transparent;
        /*border: 1px solid #eaeaea11;*/
    }

    .right_panel::-webkit-scrollbar {
        background-color: #2a2a2a1c;
    }

    .right_panel::-webkit-scrollbar-thumb {
        background-color: #2a2a2a69;
    }

    .slide_left {
        background-color: transparent;
        border: 1px solid #eaeaea11;
    }

    .sub_slide_one {
        background-color: transparent;
        border: 1px solid #eaeaea11;
    }

    .sub_slide_two {
        background-color: transparent;
    }

    .app_slide_container {
        background-color: transparent;
        border: 1px solid #eaeaea11;
    }

    .sub_slide_two_one {
        background-color: transparent;
        border: 1px solid #eaeaea11;
    }

    .sub_slide_two_two {
        background-color: transparent;
        border: 1px solid #eaeaea11;
    }

    .left_panel_btn {
        border: 1px solid transparent;
    }

    .left_panel_btn:active {
        background-color: #0253b5c5;
    }

    .left_panel_btn:hover {
        background-color: #eaeaea30;
    }

    .left_panel_btn_name {
        color: #ffffff;
    }

    .left_panel_btn_icon svg path {

        stroke: #ffffff;
        stroke-width: 1;
    }

    .left_panel_btn_icon svg circle {
        fill: #ffffff;

    }

    .left_panel_btn:active {
        background-color: rgba(0, 145, 255);


    }

    .left_panel_btn:active .left_panel_btn_name {
        color: #ffffff;


    }



    .left_panel_btn:active svg path {
        stroke: #ffffff;


    }

    .left_panel_btn:active svg circle {
        stroke: #ffffff;


    }

   .profile_name{     
         
        
        color: #eaeaea;
        

    }
    
   .content_title{
    color: #eaeaea;
}

.skill-card {
            background: rgba(255, 255, 255, 0.08);           
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

     .skill-card h3 {
            color: #fff;
        }

.skill-card label {
            
            color: #eaeaea;
           
        }

.skill-card li {
            
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);            
            color: #eaeaea;
        }

         .svg_mark svg path{
            stroke: #f6ff00;
        }

    .tech-stack span {
            color: #fff;
            
        }

.tech-badge {
            background: rgba(0, 255, 106, 0.3);
            border: 1px solid rgba(0, 255, 106, 0.3);
            
        }


  .svg_header svg path{

fill: #f6ff00;

 }



.active{
     border-radius: 100%;
    background-color: #eaeaea30;
}


}


@media (prefers-color-scheme:light) {


    :root {
        background-color: #ffffff;
    }


    .master_container {
        background: #ffffff;
    }

    .main_header_container {
        color: #000000;
        background-color: transparent;
    }

    .header_item_one {
        border: 1px solid transparent;
    }

    .header_item_three {
        border: 1px solid #7178945e;
    }

    .header_item_two {
        border: 1px solid #7178945e;
    }

    .company_name {
        color: #1f1f1f;
    }

    .logo_container svg path {
        fill: #000000;
    }

    .left_panel {
        background-color: transparent;
        border: 1px solid #7178945e
    }

    .left_panel_mobile {
        background-color: transparent;
        border: 1px solid #7178945e
    }

    .menu-btn svg path{
      
        stroke: #1f1f1f;
    }

    .menu-btn:hover{
        background-color: #2a2a2a30;

}



    .img_wraper{
        
   background: radial-gradient(circle at center, #4187d6 0%, #1A1A2E 100%);
  /* Fallback for older browsers (solid dark color) */
   background-color: #1A1A2E; 
   box-shadow: 0px 8px 11px 0px rgba(0, 0, 0, 0.1);

    }

     .image_container{
     
     box-shadow: 0 0 0 5px #ffffff;
    
     
   }


    

    .content{
        box-shadow: 0 0 0 1px #00000005;   
        background-color: rgba(194, 194, 194, 0.12);    
         
    }

    .right_panel {
        background-color: transparent
    }

    .right_panel::-webkit-scrollbar {
        background-color: #eaeaea1c
    }

    .right_panel::-webkit-scrollbar-thumb {
        background-color: #717894
    }

    .slide_left {
        border: 1px solid #7178945e;
        background-color: transparent
    }

    .sub_slide_one {
        border: 1px solid #7178945e;
        background-color: transparent
    }

    .sub_slide_two {
        background-color: transparent
    }

    .app_slide_container {
        border: 1px solid #7178945e;
        background-color: transparent
    }

    .sub_slide_two_one {
        border: 1px solid #7178945e;
        background-color: transparent
    }

    .sub_slide_two_two {
        border: 1px solid #7178945e;
        background-color: transparent
    }

    .left_panel_btn {
        border: 1px solid transparent;
    }

    .left_panel_btn:hover {
        background-color: #2a2a2a20;




    }

    .left_panel_btn:active {
        background-color: rgba(0, 136, 255);


    }

    .left_panel_btn:active .left_panel_btn_name {
        color: #ffffff;


    }


    .left_panel_btn_name {
        color: #1f1f1f;
    }

    .left_panel_btn:active svg path {
        stroke: #ffffff;


    }

    .left_panel_btn:active svg circle {
        stroke: #ffffff;


    }

    .left_panel_btn_icon svg path {

        stroke: #1f1f1f;
        stroke-width: 1;
    }

    .left_panel_btn_icon svg circle {
        fill: #1f1f1f;

    }


    .profile_name{     
         
        
        color: #000000;
        

    }
   
    .content_title{
    color: #000000;
}

.skill-card {
            background: rgb(255, 255, 255);            
            
            border: 1px solid rgb(255, 255, 255);
        }

.skill-card h3 {
            color: #000000;
        }


.skill-card label {
            
            color: #000000;
           
        }

.skill-card li {
            
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
           
            color: #000000;
        }

.svg_mark svg path{
            stroke: #003cff;
        }

.tech-stack span {
            color: #fff;
            
        }


        .tech-badge {
            background: rgba(0, 12, 69, 0.756);
            border: 1px solid rgba(54, 138, 247, 0.3);
            
        }

 .svg_header svg path{

fill: #003cff;

 }


.active{
     border-radius: 100%;
    background-color: #2a2a2a30;
}


}