/* hero background image */
.bgimage {
    height:100vh;
    background: url('images/IMG_3040.JPG');
    background-size:cover;
    position:relative;
}
/* text css above hero image*/
.hero_title {
    font-size: 4.5rem;
}
.hero_desc {
    font-size: 2rem;
}
.hero-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
}

/* about section image css */
.imageAboutPage {
    width: 100%;
}

/* services section css */
.servicesText.card {
    height: 280px;
    cursor: pointer;
  }
.servicesIcon {
    font-size: 36px;
    text-align: center;
    width: 100%;
}
.card-title {
    text-align: center;
}
.card:hover .servicesIcon {
    color: orange;
}
.servicesText:hover {
    border: 1px solid orange;
}

/* display background color black on navbar scroll */
.navbarScroll.navbarDark {
    /* background-color: black; */
}


/* social media icons styling */
.social-icons {
    font-size: 36px;
    cursor: pointer;
}
.fa-facebook:hover,.fa-instagram:hover,.fa-twitter:hover,.fa-linkedin:hover, .fa-twitch:hover {
    color: orange;
}
.fab {
    color: #000000;
}


/* spacing on all sections */
#about, #services, #portfolio, #contact {
    margin-top: 4rem;
    padding-top: 4rem;
}
#contact {
    padding-bottom: 4rem;
}



  
  /* .content {
    margin-left: 10rem;
  } */
  
  
  #main .content .myTitle{
    font-size: 34px;
    font-weight: 600px;
    min-width: 200px;
  }
  .myTitle span{
    position: relative;
  }
  .myTitle span::before{
    color: orange;
    content: "Front-web developer";
    animation: word 2.8s infinite;
    z-index: -5;
  }
  .myTitle span::after{
    content: "";
    position: absolute;
    width: 10px;
    height: 100%;
    animation: cursor 2.8s infinite, typing 20s,steps(14) infinite;
  }
  @keyframes cursor{
    to{
  
    }
  }
  @keyframes word{
    0%,20%{
      content: "video editor";
    }
    21%,40%{
      content: "Graphic Designer";
    }
  } 

  .content h1 {
    margin-top: -50px;
      font-size: 26px;
    color: white;
  }
  .content h3 {
    padding-top:rem;
    color: white;
  }
  .content h3 #myName {
    color: white;
  }
  .content h3  {
    font-size: 35px;
  }
  
  .content .buttons {
    margin-top: 40px;
    column-gap: 10px;
  }
  .content .buttons a {
    text-decoration: none;
    border: 2px solid orange;
    padding: 5px;
    color: white;
    transition: 0.3s;
  }
  .content .buttons a:hover {
    border: 2px solid orange;
    color: orange;
  }


  .footer-basic {
    padding:40px 0;
    background-color: black;
    color: orange;
  }
  .footer-basic footer .list-inline{
    display: flex;
    justify-content: center;
  }
  
  .footer-basic ul {
    padding:0;
    list-style:none;
    text-align:center;
    font-size:18px;
    line-height:1.6;
    margin-bottom:0;
  }
  
  .footer-basic li {
    padding:0 10px;
  }
  
  .footer-basic ul a {
    color:inherit;
    text-decoration:none;
    opacity:0.8;
  }
  
  .footer-basic ul a:hover {
    opacity:1;
  }
  
  .footer-basic .social {
    text-align:center;
    padding-bottom:25px;
  }
  
  .footer-basic .social > a {
    font-size:24px;
    width:30px;
    height:30px;
    line-height:40px;
    display:inline-block;
    text-align:center; 
    margin:0 8px;
    color:inherit;
    opacity:0.75;
  }
  
  .footer-basic .social > a:hover {
    opacity:0.9;
  }
  
  .footer-basic .copyright {
    margin-top:15px;
    text-align:center;
    font-size:13px;
    color:orange;
    margin-bottom:0;
  }