body{
    font-family: 'IBM Plex Sans', sans-serif;
        margin:0;
        padding: 0;
}
h1,h2,h3,h4,h5,h6{
font-family: 'IBM Plex Sans', sans-serif;
    font-weight: bold;
}
h2{
    font-size: 50px;
}
p{
    font-family: 'IBM Plex Sans', sans-serif;
}
.topmenu{
   background:rgba(240, 240, 240, 1);
}
.workmenu{
   background:rgba(240, 240, 240, 1);
}
a{
    text-decoration: none;
}
a:hover{
    color: rgba(0, 255, 153, 1);
}
.valigntext{
    margin-top: auto;
    margin-bottom: auto;
}
.topmenu a{
        text-align: left;
        font-family: 'IBM Plex Sans', sans-serif;
            font-style: normal;

            font-size: 22px;
            text-decoration: none;
            color: rgba(0, 0, 0, 1);
}
#videossection h4{
  margin-top: 20px;
}
.workmenu a{
        text-align: left;
        font-family: 'IBM Plex Sans', sans-serif;
            font-style: normal;

            font-size: 22px;
            text-decoration: none;
            color: rgba(0, 0, 0, 1);
}
.innermenu{
    background:rgba(217, 217, 217, 1);
    font-size:23px;
}
.innermenu a{
color:black;
margin-right: 10px;

}
.workmenu i{
    margin-right: 10px;
}
.workmenu a{
    margin-right: 50px;
}
.currentcolor{
    color: rgba(0, 0, 255, 1) !important;
}
.menuitem{
    display:inline-block;
    margin-left: 35px;
}
.menuitem:hover{
    color: rgba(0, 0, 255, 1);
}
#mainslider{
    height:100vh;
  background-color: #f0f0f0 ;

}
.silder-mainimg{
    margin-top: 120px;
  /*  -webkit-animation: float 4s ease-in-out infinite;
    animation: float 4s ease-in-out infinite;*/
}

#Hey_Im_Farouq{
        white-space: nowrap;
            line-height: 90px;
            margin-top: 220px;
            text-align: left;
            font-family: 'IBM Plex Sans', sans-serif;
            font-style: normal;
            font-weight: bold;
            font-size: 80px;
            color: #000;
}
#Senior_Graphic_Designer{
    margin-top: 30px;
        text-align: left;
            font-family: 'IBM Plex Sans', sans-serif;
            font-style: normal;

            font-size: 50px;
            color: #000;
}
.reachicons{
    margin-top: 150px;
}
.reachicons i{
      color: #ffffff;
    font-size: 27px;
    width: 50px !important;
height: 50px;
text-align: center;
}
.reachicons i:hover{
    color:#000;
    background-color: #D9D9D9;

}
.footericons{
    margin-top: 20px;
    margin-bottom: 20px;
}
.footericons i{
      color:white;
    font-size: 35px;
}
.footericons i:hover{
    color:#0000ff;
    background-color: #fff;

}
 .footericons i,.reachicons i{
   background-color: #0000ff;
   border-radius: 50%;
   border: 1px solid grey;
      padding: 11px;
}
.iconsvg{
  width: 40px;
  margin-right: 10px;
}
.iconsvg:hover  {
  opacity: 0.7;

}


#summery p{
 font-size:25px;

 margin-bottom: 40px;
}
#work p{
 font-size:25px;

 margin-bottom: 40px;
}
#timeline{
    background: rgba(0, 0, 0, 1);
    color:white;
}
#timeline h2{

    color:white;
}
#work{
    background: rgba(0, 0, 0, 1);
    color:white;
}
#work h2{

    color:white;
}
#skills{
    background: rgba(0, 0, 0, 1);
    color:white;
}
#skills h2{

    color:white;
}
.skillstitle{
    font-size: 22px;
}
.skillslist{
    font-size: 22px;
    font-weight: bold;
}
.green{
    color:rgba(0, 255, 153, 1) !important;
}


.workicons{
font-size: 22px;

}
.workicons td{
padding-left: 20px;
padding-right: 20px;
}
@-webkit-keyframes float {
    0% {
        -webkit-transform: translatey(0px);
        transform: translatey(0px)
    }

    50% {
        -webkit-transform: translatey(-20px);
        transform: translatey(-20px)
    }

    100% {
        -webkit-transform: translatey(0px);
        transform: translatey(0px)
    }
}

@keyframes float {
    0% {
        -webkit-transform: translatey(0px);
        transform: translatey(0px)
    }

    50% {
        -webkit-transform: translatey(-20px);
        transform: translatey(-20px)
    }

    100% {
        -webkit-transform: translatey(0px);
        transform: translatey(0px)
    }
}

@keyframes pulse {
    0% {
        -webkit-transform: scale(0.75);
        transform: scale(0.75)
    }

    70% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    100% {
        -webkit-transform: scale(0.75);
        transform: scale(0.75)
    }
}
.graybg{
    background:#D9D9D9;
}
.showmobile{
display: none;
}
.workicons i{
    font-size: 60px;
    background: none;
    border:none;
    margin-bottom: 10px;

}
.workicons a{
color:rgb(255, 255, 255);

}
.workicons a:hover{
color:rgba(0, 255, 153, 1);

}

.innersection h2{
    font-size: 22px;
    font-weight: normal;

}

.portfoliogrid img{
    margin-bottom: 20px;
}
#packaging img{
    margin-bottom: 20px;
}
@media only screen and (max-width: 768px) {
.workmenu .menuitem{
  text-align: center;
  font-size: 12px;

}
.innermenu{
  text-align: center;
}
.innermenu a{
      font-size: 12px;
    margin: 0 auto;
    margin-left: 10px;
}
.workmenu a{
  margin-right: initial;
  float:left;
}
    .workicons i {
            font-size: 40px;
        }
.hidemobile {
        display: none;
    }
        .showmobile {
            display: initial;
        }
.workicons img{
    width: 50%;
}

#mainslider{
    height: auto;
}
#Hey_Im_Farouq{
    padding-left: 20px;
    font-size: 35px;
    margin-top: 70px;
    line-height: 32px;
}
#Senior_Graphic_Designer{
    padding-left: 20px;
    font-size: 25px;
    line-height: 35px;
    margin-top: 10px;
}
.workicons{
    width: 80%;
    font-size:12px;
}
#summery,#work,#timeline,#skills{
    height: auto;

}
section {
    overflow: hidden;
}
.reachicons{
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
}
.skillstitle{
    margin-top: 20px;
}
}