*{
    padding: 0;
    margin: 0; 
    box-sizing: border-box;
    scroll-behavior: smooth;
  }
  body{
    font-family: Sora, sans-serif;
  }
  /* for scroll bar */
  * {
    scrollbar-width: auto;
    scrollbar-color:rgb(101, 99, 99) rgb(206, 206, 206);
  }
  
  *::-webkit-scrollbar {
    width: 10px;
  }
  
  *::-webkit-scrollbar-track {
    background: rgb(206, 206, 206);
  }
  
  *::-webkit-scrollbar-thumb {
    background-color: rgb(101, 99, 99);
  }
  
  ::-moz-selection { 
    color: black;
    background: yellow;
  }
  
  ::selection {
    color: black;
    background: yellow;
  }
  
  
  header{
    /* background-color: black; */
    background-color: orange;
    position: sticky;
    top: 0;
    box-shadow: rgba(27, 31, 35, 0.04) 0px 1px 0px, rgba(255, 255, 255, 0.25) 0px 1px 0px inset;
    padding: 0px 40px;
    z-index: 100;
  }
  
  li{
    list-style: none;
  }
  
  a{
    text-decoration: none;
    color: black;
  }
  
  .navbar{
    min-height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    font-weight: bold;
  }
  
  .nav-menu{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
  }
  
  .nav-brand{
    font-size: 2.6rem;
    -webkit-transition: all 0.6s ease-in;
    transition: all 0.6s ease-in;
    
  }
  
  /* .nav-brand:hover{
    transform: rotate(180deg); 
    font-size: 2.5rem;
    color:white;
  }  */
  
  .nav-link{
    transition: 0.4s ease;
  }
  
  .nav-link:hover{
    color: white;
    font-size: 18px;
  }
  
  .hamburger{
    display: none;
    cursor: pointer;
  }
  
  .bar{
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    background-color: white;
  }
  
  
  #js{
    width: 90%;
  }
  
  
  
  .stats{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
  }
  
  .stats>img{
    max-width: 100%;
    height: auto;
  }
  
  text.ContributionCalendar-label {
    fill: rgb(0, 0, 0);
    font-size: 13px;
  }
  
  
  
  footer{
    text-align: center;
    background-color: black;
    color: #AAABAB;
    padding-bottom: 20px;
  }

  #Heading-sizes{
    font-size: 45px;

    }
  
  
  @media  (max-width: 760px){
    header{
        padding: 0 0px;
    }
    .hamburger{
        display: block;
    }
  
    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }
    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
  
    .nav-menu{
        position: fixed;
        left: -100%;
        gap: 0;
        top: 70px;
        flex-direction:column;
        background-color: orange;
        opacity: 0.9;
        width: 100%;
        text-align: center;
        transition:0.5s ease;
    }
  
    .nav-item{
        margin: 16px 0;
    }
  
    .nav-menu.active{
        left: 0;
    }
  
    #dev1{
        display: none;
    }
  
  
      .calendar svg{
        max-width: 100%;
      }
  
  }
  
  @media  (max-width: 481px){
  
   
  .calendar svg{
    max-width: 100%;
  }
  
  }
  
  @media  (max-width: 281px){
  
    #btn-resume{
        width: 100%;
        margin-left: 0;
    }

  }
  
  
  
  
  /* main css thing */
  
  .bg-container {
    margin-top: -100px;
    background-image: url("https://previews.123rf.com/images/zinetron/zinetron2004/zinetron200400042/143977517-programming-and-software-development-web-page-banner-program-code-on-screen-device-software-developm.jpg");
    height: 100vh;
    background-size: cover;
    width: 100%;
    
  }
  /* .sub-name {
    color: darkred;
  } */
  .details-section {
    margin-top: 85px;
    padding: 90px;
  }

  #ganesh{
    margin-top: 10%;
  }
  .para1 {
    color: #ffffff;
    font-size: 50px;
   
  }
  .para2 {
    color: #ffffff;
    font-weight: bold;
    font-size: 60px;
   
  }

  

  .in-span {
    color: orange;
  }
  .button-resume {
    color: #ffffff;
    background-color: orange;
    border-radius: 5px;
    font-family: "Roboto";
    width: 120px;
    height: 40px;
    font-weight: bold;
    font-size: 20px;
  
  }.button-resume a {
    color: #ffffff;
    text-decoration: none;
  }.button-resume a:hover {
    color:black; 
    text-decoration:none; 
    cursor:pointer;  
  }
  #navitem-1 {
    color: #ffffff;
    font-weight: bold;
  }
  #navitem-2 {
    color: #ffffff;
    font-weight: bold;
  }
  #navitem-3 {
    color: #ffffff;
    font-weight: bold;
  }
  #navitem-4 {
    color: #ffffff;
    font-weight: bold;
  }
  #navitem-5 {
    color: #ffffff;
    font-weight: bold;
  }
  #navitem-1:hover {
    color: maroon;
  }
  #navitem-2:hover {
    color: maroon;
  }
  #navitem-3:hover {
    color: maroon;
  }
  #navitem-4:hover {
    color: maroon;
  }
  #navitem-5:hover {
    color: maroon;
  }
  
  
  /* style.css */
  
  
  *{
  
    margin: 0;
    padding: 0;
    font-family: sans-serif;
  }
  
  
  
  .container{
  
    display: grid;
    width: 94%;
    grid-template-columns: repeat(4,1fr);
    gap: 40px;
    margin: auto;
    text-align: center;
    margin-top: 40px;
  
  }
  .container .box > img{
    width: 50%;
    margin: auto;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
  
  
  }.container .box {
   
   box-sizing: border-box;
   margin: 10px 0; 
   border: 4px solid orange;
   border-radius: 10px;
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
   background-color: white;
    
  }
  .box > div{
  
  
    margin-top: 3px;
    padding-left: none;
  }
  .tool{
  
    font-size :45px;
    color: #fff;
  
  }#skill{
  
  
    padding: 2%;
    
  }
  .box .text{
  
    padding: 5%;
  }
  
  
  #about{
  
    padding: 80px 0;
    color: #ababab;
   
  
  }
  
  #about .row{ 
  
    display: grid;
    grid-template-columns: 35% 55%;
    gap: 40px;
    padding: 40px;
    justify-content: space-between;
  
  }
  .row .about-col-1 {
  
    padding: 20px;
    
  }
  .row .about-col-2{ 
  
    padding: 20px; 
  
  }
  
  .row .about-col-1 img{
  
    width: 80%;
    margin: auto;
    display: block;
  
  }
  
  .sub-title{
  
    font-size: 60px;
    font-weight: 600;
    color: rgb(228, 140, 58);
  }
  
  .tab-titles{
  
    display: flex;
    margin: 20px 0 40px;
  
  }
  .tab-links{
  
    font-size: 20px;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    margin-right: 50px;
  
  
  }
  
  .tab-links::after{
  
    content: '';
    width: 0; 
    height: 3px;
    background: orange; 
    left: 0;
    position: absolute;
    bottom: -8px;
    transition: 0.5s;
  
  
  }
  
  .tab-links.active-link::after { 
  
    width: 50%; 
  
  }
  .tab-contents ul li { 
  
  
   margin: 10px 2px;
  
  
  }
  .tab-contents ul li span {
  
   color: orange;
  
  
  }.tab-contents{
   display: none;
   color: white;
   font-weight: bold;
   /* Education skills white... */
  
  
  }.tab-contents.active-tab{
  
   display: block;
  }
  
  .row1{
  
    color: white;
    padding: 0 50% 0 4%; 
    line-height: 45px;
    
  
  }
  .sub-title{
  
    font-size: 45px;
    text-align: center;
    color: orange;
  
  } .social-icons{
  
  
    display: flex;
    width: 70%;
    padding: 10px;
    
  
  
  }.social-icons > div {
  
  border: 2px solid rgb(169, 143, 9);
  padding: 10px;
  border-radius: 3px;
  background-color: white;
  width: 20%;
  margin: auto;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  
  
  
  }.social-icons >div  img {
  
    width: 70%; 
    margin: auto;
    display: block;
  
  
  }
  .social-icons > div:hover {
  
    background-color: orange;
  
  }
  
  /* contact */
  
  
  .stat{
  
    padding: 15px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 40px;
    color: white;
    font-weight: 700;
    font-family: bold; 
  
  }.stat  .one {
  
    box-sizing: border-box;
    padding: 25px;
    text-align: center;

    
  
  }
  .stat .one .circle1{
  
    border: 5px solid  orange;
    /* height: 90px; */
    border-radius: 16%;
    padding: 70px 5px;
    display: flex;
    flex-direction: column;
    justify-content: center; 
    background-color: bisque;
    color: black;

  
  
  }
 
  
  #projects{
  
    background-color: black;
  
  }
  
  
  .rows{
    display: flex;
    padding: 30px;
    box-sizing: border-box;
    color: white;
  
  }.rows .col1{
  
    flex-basis: 40%;
    margin: auto;
    height: 100%;
    padding: 25px;
    box-shadow: rgba(62, 54, 54, 0.35) 0px 5px 15px;
    background-color: black;
    border-radius: 12px; 
    box-sizing: border-box;
    border: 4px solid orange;
  }
  
  .rows .col1:hover{
  
   
    box-shadow: orange 0px 5px 15px;  
  
  
  }
  
  .propic{
  
    padding: 20px 0; 
    border-radius: 15px;
    border: 1.4px solid  orange;
    
    
  }.propic > img {
  
    width: 90%;
    margin: auto;
    display: block;
  
  
  }
  .col1 span{
  
    font-size: 24px;
    /* color: rgb(223, 131, 51); */
  
  }.innerbox{
  
    display: flex;
    justify-content: space-evenly;
    margin-top: 20px;
    
  
  }.innerbox button{
   
    padding: 15px;
    font-size: 17px;
    /* background-color: rgb(120, 23, 210); */
    border-radius: 5px; 
    font-weight: bold;
    border: 2px solid orange;
  
  }.innerbox :hover{
   
    background-color: #332d2f;
    color: white;
  
  }
    
  .cont{

   width: 75%;
    margin: auto;
    display: flex;
    padding: 10px;
   
    font-weight: bold;
     
}

.cont .icont{

    width: 20%;
    margin: auto;
    border: 4px solid orange;
    border-radius: 15px;
    box-sizing: border-box;  
    background-color: bisque;
    padding: 20px;

}

.icont img {
  
    width: 50%; 
    padding: 10%;    
    margin: auto;
    display: block;
  
  }

  @media  (min-width:480px) and (max-width:800px) { 

    .cont{

      display: block;
    }

    .cont .icont{

      width: 80%;
      margin: auto;
      margin-top: 15px;
    }

   .icont img{

      width: 30%;

    }

  }


  @media  (min-width:360px) and (max-width:480px) { 

    .cont{
      width: 100%;
      display: block;
    }

    .cont .icont{

      width: 80%;
      margin: auto;
      margin-top: 15px;
    }

   .icont img{

      width: 30%;

    }
    /* #para0{

      font-size: 30px;
    } */

  }
  
  
  @media  (min-width:760px) and (max-width:900px) { 
  

    /* .nav-brand{

        font-size: 20px;

    } */

    /* .bg-container {
        
        height: 70vh;
       
      } */
  
    .para1 {
        
        font-size: 40px;
      }
      .para2 {
        
        font-size: 50px;
      }
  
    .container{
  
        
        display: grid;
        width: 80%; 
        grid-template-columns: repeat(3,1fr);
        gap: 30px; 
       
       
    
    }
    .container .box > img{
  
  
        width: 50%;
        margin: auto;
        display: block;
        margin-top: 10px;
        margin-bottom: 10px;
    
    
    }
  
   
    
  }
  
  @media  (min-width:480px) and (max-width:760px) { 
  
   .bg-container{

    font-size: 30px;

   }

   

   
    .container{
  
        display: grid;
        width: 80%;
        grid-template-columns: repeat(2,1fr);
        gap: 30px;
       
  
    }
  
    .tool{
  
        font-size :35px;
        text-align: center;
  
    }
    #about .row{
  
        display: block;
       
    }
    .row .about-col-1{
  
        padding: 20px;
  
        
    }
  
    .row .about-col-2{
  
  
        padding: 20px;
  
        
    }.row .about-col-1 img {
  
       width: 75%; 
  
        
    }
  
  
    .row1{
  
        padding: 10%;
        
  
    }
   .sub-title{
  
        font-size: 40px;
       
  
   } .social-icons{
  
     
        display: flex;
        width: 75%; 
        padding: 10px;
        
  
  
   }.social-icons > div {
  
    border: 2px solid rgb(169, 143, 9);
    padding: 10px;
    border-radius: 3px;
    background-color: white;
    width: 20%;
    margin: auto;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  
  
    
   }.social-icons >div  img {
  
        width: 70%;
  
    }
   
    .stat{
  
        padding: 15px;
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 30px;
        background-color: black;
        color: white;
        font-weight: 700;
        font-family: bold; 
  
    }
  
    .rows{
        display: block;
        padding: 50px; 
  
    }.rows .col1{
        width: 80%;
        margin: auto;
        border: 2px solid none;
        margin-bottom: 20px;
        padding: 25px;
    }
    .innerbox button{
  
        padding: 8px;
       
    }
    

    .youtubemini{

      margin-top: -20px;

    }
  
  
    
  }
  
  @media  (max-width:480px)  {
  

   
  
    .container{
  
        width: 60%;
        grid-template-columns: repeat(1,1fr);
    
  
    }
  
    .tool{
  
        font-size :25px;
        text-align: center;
  
  
    }
    /* #skill{
  
        margin-top: 50px;
    } */
  
    #about .row{
  
        display: block;
       
    }
    .row .about-col-1{
  
        padding: 20px;
  
        
    }
  
    .row .about-col-2{
  
  
        padding: 20px;
  
        
    }.row .about-col-1 img {
  
       width: 80%; 
  
        
    }
    .tab-titles{
  
            display: block;
           
  
    }
    .tab-titles .tab-links{
  
        margin-top :20px ;
  
    }
  
    .about-col-1 img{
  
            width: 45%;
          
    }
  
    .row1{
  
        background-color: black;
        color: white;
        padding: 10%;
        
  
    }
   .sub-title{
  
        font-size: 40px;
       
  
   } .social-icons{
  
     
        display: flex;
        width: 90%;
        padding: 10px;
        
  
  
   }.social-icons >div  img {
  
        width: 70%; 
        margin: auto;
        display: block;
  
  
    }
  
    
    .stat{
  
                
        display: block;
  
        background-color: black;
        color: white;
        font-weight: 700;
        font-family: bold; 
  
    }
    .stat .one{
  
        width: 200px;
        margin: auto;
    }
  
    .rows{
        display: block;
        padding: 20px; 
  
    }.rows .col1{
  
        width: 88%;
        margin: auto;
        border: 2px solid none;
        margin-bottom: 20px;
        padding: 16px;
    }
    .innerbox{
  
        display: block;
        
  
    }
    .innerbox button{
  
        padding: 8px;
        width: 80%;
        margin: auto;
        display: block;
    
  }             
  .para1{

    font-size: 34px;
  }
  
  .para2{

    font-size: 40px;

  }
  
  
  }

  @media (max-width:360px){

/* 
.bg-container{

  

} */

    .details-section {

        
       margin-top: 100px;
       padding-left: 15px;
      /* line-height: 45px; */

      
    }
    .nav-brand{
    
         font-size: 20px;

    }



    .para1{

       
        font-size: 40px;
        text-align: left;
        

      }
      
      .para2{
       
        text-align: left;
        font-size: 50px;
       

      }


  }
  
  
  /* Git stats and Calender */


  
:root {
    --color-calendar-graph-day-bg: #dddbdb;
    --color-calendar-graph-day-L1-bg: #39dd34;
    --color-calendar-graph-day-L2-bg: #45a045;
    --color-calendar-graph-day-L3-bg: #047526;
    --color-calendar-graph-day-L4-bg: #0a4208;
  }
  
  rect.ContributionCalendar-day[data-level='0'] {
      fill: var(--color-calendar-graph-day-bg);
  }
  
  rect.ContributionCalendar-day[data-level='1'] {
      fill: var(--color-calendar-graph-day-L1-bg);
  }
  
  rect.ContributionCalendar-day[data-level='2'] {
      fill: var(--color-calendar-graph-day-L2-bg);
  }
  
  rect.ContributionCalendar-day[data-level='3'] {
      fill: var(--color-calendar-graph-day-L3-bg);
  }
  
  rect.ContributionCalendar-day[data-level='4'] {
      fill: var(--color-calendar-graph-day-L4-bg);
  }
  
  .calendarg .width-full > .float-left {
      display: none;
  }
  
  .calendarg {
      font-family: Helvetica, arial;
      border: 3px solid  orange;
      border-radius: 3px;
      /* min-height: 243px; */
      text-align: center;
      margin: 0 auto;
      background-color: black;
      color: white;
      width:85%;
      padding: 2%;
  }
  
  .calendarg-graph text.wday,
  .calendarg-graph text.month {
      font-size: 10px;
      fill: #aaa;
  }
  
  
  
 
  
  .text-small {
      font-size: 12px;
      color: #767676;
  }
  
  .calendarg-graph {
      padding: 5px 0 0;
      text-align: center;
  }
  

  
  .calendarg img.spinner {
      width: 70px;
      margin-top: 50px;
      min-height: 70px;
  }
  
  .monospace {
      text-align: center;
      color: #000;
      font-family: monospace;
  }
  
  .monospace a {
      color: #a32626;
      text-decoration: none;
  }
  
  .contrib-footer {
      font-size: 11px;
      padding: 0 10px 12px;
      text-align: left;
      width: 100%;
      box-sizing: border-box;
      height: 26px;
  }
  
  .left.text-muted {
      float: left;
      margin-left: 9px;
      color: #767676;
  }
  .left.text-muted a {
      color: #a32626;
      text-decoration: none;
  }
  .left.text-muted a:hover,
  .monospace a:hover {
      text-decoration: underline;
  }
  
  h2.f4.text-normal.mb-3 {
      display: none;
  }
  
  .float-left.text-gray {
      float: left;
  }
  #user-activity-overview{
      display:none;
  }
  
  .day-tooltip {
      white-space: nowrap;
      position: absolute;
      z-index: 99999;
      padding: 10px;
      font-size: 12px;
      color: #959da5;
      text-align: center;
      background: rgba(0,0,0,.85);
      border-radius: 3px;
      display: none;
      pointer-events: none;
  }
  .day-tooltip strong {
      color: #dfe2e5;
  }
  .day-tooltip.is-visible {
      display: block;
  }
  .day-tooltip:after {
      position: absolute;
      bottom: -10px;
      left: 50%;
      width: 5px;
      height: 5px;
      box-sizing: border-box;
      margin: 0 0 0 -5px;
      content: " ";
      border: 5px solid transparent;
      border-top-color: rgba(0,0,0,.85)
  }
  
  text.ContributionCalendar-label {
      fill: #ccc;
      font-size: 11px;
  }
  
  .contrib-column{
    display: none;
  }
  
  .stats{
    display: flex;
    justify-content: center;
    padding-top: 10px;
  }
  
  /*  */
  
  /* github */
  
 /* #github-stats {
    
    margin-bottom: 25px;

  }  */
  
  .github-stats-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    margin-top: 50px;
    grid-gap: 40px;
  }
  
  
  .github-stat {
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
  }
  
  
  .github-stat img {
    width: 100%;
    border-radius: 10px;
    display: block;
    /* transition: transform 0.5s; */
    padding: 10px 30px;
  }
  
  .layer h3 {
    font-weight: 700;
    margin-bottom: 20px;
  }
  .containerg{
    text-align: center;
    
  }
  
  
  @media (max-width: 690px) {
  
  .github-stat {
    width: 300px;
    font-size: 8px;
  }
  
  .github-stat {
  width: 100%;
  font-size: 8px;
  }
  .containerg{
  text-align: center;
  }
  
  .cont-box-1>img{
  width: 45px;
  height: 45px;
  }
  
  .github-stat>img{
  margin: 0 auto;
  width: 100%;
  margin-top: 20px;
  }
  
  
  .github-stats-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
    margin-top: 50px;
    grid-gap: 40px;
  }
  }
  
  @media (max-width: 500px) {
  .github-stat {
    width: 100%;
    font-size: 8px;
  }
  
  .github-stat>img{
    margin: 0 auto;
    width: 100%;
    margin-top: 20px;
  }
  
  .github-stats-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
    margin-top: 50px;
    grid-gap: 40px;
  }

  #Heading-sizes{

    font-size: 35px;

    
 }

  }
  
  /* github */
  
  @media (max-width: 300px) {

    #Heading-sizes{
    font-size: 20px;

    }
    
  }