.animate{
    animation: fade;
    animation-name:fade;
    animation-delay: 2;
    animation-play-state: running;
    animation-fill-mode: forwards;
}

.mega{
    line-height: normal;
    font-size: 5em
}

/* Secondary Tab on Home Page */
.design-skill-tab{
    margin-top: -120px;
    border-radius: 19px;
    padding: 2%;
    height: 470px;
}



.tablinks2{
    font-size:1.5em;
    text-transform: uppercase;
}

/* Style the buttons inside the tab */
.tab2 button {
  background-color: inherit;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  box-shadow: none;
  width: auto;
  margin: .5em 1em;
  color: white
}
.tab2 button:hover {
  background-color: transparent;
  color: #9EBA3B;
  border-bottom: solid;
  border-bottom-color: #2685C0;
  border-bottom-style: inset;
}

/* Change background color of buttons on hover */
.tab2 button:hover {
  border-bottom: solid;
  border-bottom-color: #2685c0;
  border-bottom-style: inset;
  color:#76993e;
}

/* Create an active/current tablink class */
.tab2 button.active2 {
  background-color: transparent;
  border-bottom: solid;
  color:#76993e;
  border-bottom-color: #2685c0;
  border-bottom-style: inset;
}

/* Style the tab content */
.tabcontent2 {
  display: none;
  padding: 6px 2px;
}

/*slider animation*/


/*Animation*/
.design-skills-slider{
    display: inline-flex;
    flex-wrap: none;
    overflow:hidden;
    gap: 3em;
}

.skill-slider-container{
    overflow-x:hidden;
    scroll-behavior: smooth;
    margin:auto; 
    display: flex;
    white-space: nowrap;
    position:relative;
}
.skill-slider-container:before,
.skill-slider-container:after{
    position:absolute;
    top:0;
    width:205px;
    height:100%;
    content:"";
    z-index:2;
}
.resume-skills .skill-slider-container:before{
    left:0;
    background: linear-gradient(to left, rgba(0,46,37, 0), #02231D);
}
.skill-slider-container:before{
    left:0;
    background: linear-gradient(to left, rgba(0,46,37, 0), #002E25);
}
.resume-skills .skill-slider-container:after{
    right:0;
    background: linear-gradient(to right, rgba(0,46,37, 0), #02231D);
}
.skill-slider-container:after{
    right:0;
    background: linear-gradient(to right, rgba(0,46,37, 0), #002E25);
}
.skill-slider-container:hover .design-skills-slider,
.skill-slider-container:hover .design-skills-slider2
{
    animation-play-state: paused;
}

@keyframes scroll{
    0% { transform: translateX(0); }
	100% { transform: translateX(-100%)}
}
.text-wrap{
    position:relative;
}
strong span {
    background: 
    -webkit-linear-gradient(50deg, #2585BF, #76993E, #EC6024);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.new span{
    position:relative;
    display:inline-block;
    animation: waveAnim 1s infinite;
    animation-delay:calc(.1s * var(--i));
    font-size:1em;
}
.new-header-label{
    font-size:50%;
}
@keyframes waveAnim {
    0%,4%,100%{
        transform: translateY(0)
    }
    20%{
        transform: translateY(-20px)
    }
}

@keyframes fade{
    0%{opacity: 0%}
    5%{opacity:100%}
    95%{opacity:100%}
    100%{opacity: 0%}
}

.design-skills-slider{
    display:inline-block;
    animation: 30s scroll infinite linear;
    animation-fill-mode:both;
}
.design-skills-slider2 img,
.design-skills-slider img{
    margin: 1em;
}

.design-skills-slider2{
    display:inline-block;
    animation: 30s scroll infinite linear;
    animation-fill-mode:both;
    animation-direction:reverse;
}