:root{
  --dark-background: #0a2540;
  --cyan-accent: #01caf4;

  --personal-tag-color: red;
  --course-tag-color: limegreen;
  
}
*{
  scroll-behavior: 2smooth;
}
html,body {
    margin:0;
    padding:0;
    width:100%;
     height:100%;
  }
  .gradient-canvas {
    position: absolute;
    z-index: -1;
    width:100%;
    height:100%;
    transform: skewY(-12deg);
    top: -380px;

    --gradient-color-1: #0A2540; 
    --gradient-color-2: #01CAF4; 
    --gradient-color-3: #766dff;  
    --gradient-color-4: #009ffd;
    

    /* Alternative stripe colors
    --gradient-color-1: #ef008f; 
    --gradient-color-2: #88f3ff; 
    --gradient-color-3: #766dff;  
    --gradient-color-4: #ffba27; 
    */
  }

  .gradient-text{
    background: linear-gradient(-45deg,#009ffd, #766dff,#09c6f9,#0A2540 );
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    
    background-clip: text;
    
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .gradient-background{
    background: linear-gradient(-45deg,#009ffd, #766dff,#00FFFF,#0A2540 );
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
  }

  @keyframes gradient{
    0%{
      background-position: 0% 50%;
    }
    50%{
      background-position: 100% 50%;
    }
    100%{
      background-position: 0% 50%;
    }
  }

  /* non gradient related css */
  .header_area .navbar {
		background: transparent;
	}
	.header_area.navbar_fixed .navbar {
		background: #0A2540;
	}
  .rounded-corners{
      border-radius: 12px;
  }
  .home-socials{
      color: #0A2540;
  }
  /* navbar css */
  .personal-logo{
    height: 25px;
  }

  /*about me css */

  .welcome_area{
      padding: 0px 0px 120px;

  }

  .welcome_area h1{
    
  }
  @media (min-width: 768px) {
    .wel_item{
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      height: 100%;
      margin-bottom: 30px;
    } 
  }
  #work-link{
    padding:0;
  }
  #work-link:hover{
    color: var(--cyan-accent);
  }
  
 
  

  .currently-btn{
    width: auto;
    max-width: 30ch;
    text-align: center;
  }

  .skill-icon{
      max-width: 50px;
      margin: 0 10px;
      
  }

  .grid-container{
  display: inline-grid;
  grid-template-columns: auto auto auto auto;
  padding: 10px;
  width: 90%;
}

.grid-item {
  padding: 0px;
  width: 50px;
  height: 50px;
  font-size: 30px;
  text-align: center;
  margin: 20px 20px;
}

.logos-col{
    max-width: 30%;
}
  @media screen and (max-width: 1200px){
      .welcome_area{
          padding-top: 50px;
      }
  }
  .wel_item button{
    margin-top: 5px;
  }

  /* timeline css */

  *{
      box-sizing: border-box;
  }

  .timeline-section { 
      background-color: #0A2540;
      transform: skewY(-12deg);

  }

  .timeline {
      position: relative;
      max-width: 1200px;
      padding: 100px 0px 150px;
      margin: 0 auto;
      transform: skewY(12deg);
  }
/* timeline ruler */
  .timeline::after{
      content: '';
      height: 100%;
      position: absolute;
      width: 6px;
      background-color: white;
      top:0;
      bottom:0;
      left:50%;
      margin-left:-5px;
  }

  .tl-entry{
      padding: 10px 40px;
      position: relative;
      background-color: inherit;
      width: 50%;
  }
/* timeline circles */
  .tl-entry::after{
      content: '';
      position: absolute;
      width: 25px;
      height: 25px;
      right: -10px;
      background-color: var(--dark-background);
      border: 4px solid white;
      top: 15px;
      border-radius: 50%;
      z-index: 1;

      /* background: linear-gradient(-45deg,#009ffd, #766dff,#00FFFF,#0A2540 );
      background-size: 400% 400%;
      animation: gradient 15s ease infinite; */
  }

  .left{
      left:0;
  }

  .right{
      left: 50%;
  }

  .left::before{
      content: '';
      height: 0;
      position: absolute;
      top: 22px;
      width: 0;
      z-index:1;
      right: 30px;
      border: medium solid white;
      border-width: 10px 0 10px 10px;
      border-color: transparent transparent transparent white;
  }

  .right::before{
      content: '';
      height: 0;
      position: absolute;
      top: 22px;
      width: 0;
      z-index: 1;
      left: 30px;
      border: medium solid white;
      border-width: 10px 10px 10px 0;
      border-color: transparent white transparent transparent;
  }

  .right::after{
      left: -16px;
  }

  .content{
      padding: 10px 20px;
      background-color: white;
      position: relative;
      border-radius: 6px;
  }
  /* Timeline typography */
  #my-journey{
    padding-left: 40px;
    padding-top: 40px;
    color: white;
    font-family: "Heebo", sans-serif;
    font-size: 36px;
    margin-bottom: 18px;
    text-transform: uppercase; }
  .timeline-tenure{
      margin: 0;

      
  }
  .timeline-title{
    margin: 0;
    height: auto;
    color: #222222;
    padding-right: 60px;
   }
   .timeline-subtitle{
     padding-right: 60px;
   }

   .time .bullet-element{
    line-height: normal;
  }

  .btn{
    background-color: #01CAF4;
    border-color: transparent;
    border-radius: 6px;
    color:#0a2540;
  }
  .btn:hover{
    background-color: #0A2540;
    color: white;
    transition: ease-in 0.15s;
    transition: ease-out 0.15s 
  }
  .timeline-logo{
    position: absolute;
    top: 10px;
    right: 10px;
    max-height: 50px;
    max-width: 150px;
    margin: 5px
  }
  
  /* responsive timeline on sizes<600px wide */
  @media screen and (max-width: 900px){
      /* places all of timeline to left */
    .timeline::after{
          left:31px;
      }
    /* Full-width containers */
    .tl-entry {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }
  
    .tl-entry::before {
        left: 60px;
        border: medium solid white;
        border-width: 10px 10px 10px 0;
        border-color: transparent white transparent transparent;
    }

        /* Make sure all circles are at the same spot */
    .left::after, .right::after {
        left: 15px;
    }

        /* Make all right containers behave like the left ones */
    .right {
        left: 0%;
    }
  }

  /* End of experience section */

  /* projects section */
  .projects-container{
      margin-top: 150px;
  }
  
  .feature_item{
    height:95%;
    background-color: var(--dark-background);
  }
  .project-img{

    width: 100%;
    border-radius: 6px;
    padding-bottom: 20px;
    aspect-ratio: 4 / 3;
  }
  .project-img-div{
    position: relative;
    width:100%;
  }
  .img-overlay{
      position: absolute;
      top:0;
      bottom:0;
      right: 0;
      left:0;
      height: 100%;
      width: 100%;
      opacity: 0;
      transition: 0.5s ease;
      background-color: #0a2540;
      border-radius: 6px;
  }

  .project-img-div:hover  .img-overlay{
      opacity: 0.9;
  
  }
  .project-img-div:hover  .project-tag{
    opacity: 0;

}

  .img-overlay p{
    z-index: 2;
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;

  }

  .tech-used{
    position: relative;
    
    bottom: 0;
      margin-top: 20px;
      text-align: center;
  }

  .project-tag{
    position: absolute;
    bottom: calc(25px/2);
    width: 100px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    border-radius: 3px;
    background: var(--dark-background);
    color:#fff;
    
    transition: ease-in-out 300ms;
  }
  .feature_item{ /* spaces content and footer (places tech used at bottom of card) */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  } 


  /* end of projects section */
  
/* Footer Section */

  .site-footer
{
  background-color:#0A2540; 
  padding:0px 0 20px;
  font-size:15px;
  line-height:24px;
  color: #d3d3d3;
}
.site-footer hr
{
  border-top-color: white;
  opacity:0.5;
  margin : 1rem 0;
}

.site-footer h6
{
  color: white;
  font-size:16px;
  text-transform:uppercase;
  margin-top:5px;
  letter-spacing:2px
}
.site-footer a
{
  color: #d3d3d3;
}
.site-footer a:hover
{
  color:#01CAF4;
  text-decoration:none;
}
.site-footer.lnr{
  margin-right: 10px;
}
.footer-links
{
  padding-left:0;
  list-style:none
}
.footer-links li
{
  display:block;
}
.footer-links a
{
  color:#d3d3d3
}
.footer-links a:active,.footer-links a:focus,.footer-links a:hover
{
  color:#01CAF4;
  text-decoration:none;
}
.footer-links.inline li
{
  display:inline-block
}
.site-footer .social-icons
{
  text-align:right
}
.site-footer .social-icons a
{
  width:40px;
  height:40px;
  line-height:40px;
  margin-left:6px;
  margin-right:0;
  border-radius:100%;
  background-color:#33353d
}
.copyright-text
{
  margin:0
}

  .site-footer [class^=col-]
  {
    margin-top:30px;
  }

@media (max-width:767px)
{
  .site-footer
  {
    padding-bottom:0
  }
  .site-footer .copyright-text,.site-footer .social-icons
  {
    text-align:center
  }
}


.footer-contact{
    width: 100%;
}
.footer-contact{
    font-family: "Roboto", sans-serif;
}
#footer-logo{
  margin-bottom: 1rem;
}
#read-it-again{
  margin-bottom: 0px;
}