@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap');



h1 {
    
    font-family: 'almarai', sans-serif;
    font-weight: 700;
    font-size: 6vw; 
}

h2, h3, p {
    
    font-family: "almarai", sans-serif;
    font-weight: 500;
    
}


h2 {
    
    font-size: 4vw;
    
}


h3 {
    
    font-size: 2vw;
    
}

p {
    
    font-size: 1vw;
    opacity: 50%;
    
}


body {
    
    background-color: black;
    display: flex;
    align-content: center;
    background-size: cover;

}

.businessCard {
    
    background-color: #F5F5F2;
    background-repeat: no-repeat;
    background-size: cover;
    

    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    align-self: center;
    margin-top: 5vh;
    margin-left: 21vw;
    margin-right: 21vw;
    padding-left: 5vw;
    padding-top: 3vh;
    padding-bottom: 1.5vh;
    border-radius: 5vw;
    overflow: hidden;
    
}


.titleContainer {
    
    display: flex;
    justify-content: flex-start;
    padding-top: 0vh;
    border: 0px;
    line-height: 0.02;
    margin-bottom: -4%
}

.navBar {

    display: inline-flex;
    justify-content:flex-start;
    align-self: left;
    align-items: flex-start;
    flex-grow: 1;
    width: 100%;
    
}


.subheading {
    
    padding-right: 1.5vw;
    white-space: nowrap;
    line-height: 0.02;
    
}

.navItems{
    
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: auto;
    padding-top: 0.5vh;
    
    
}

.navItems h3 {
    
    padding-right: 1vw;
    padding-left: 1vw;
    
}

a {
    
    text-decoration: none;
    color: black;
    
}






#linkanimation {
  text-decoration: none;
  text-decoration-color: none;
  color: black;
  position: relative;
}
#linkanimation::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 2px;
  background-color: black;
  transform: scale(1,1);
  transition: background-color .5s ease-in-out;
  bottom: 0px;
}
#linkanimation:hover::before {
  animation: link ease 1s 1 300ms;
  transform-origin: right;  
}
@keyframes link {
  50%{
    transform: scaleX(0);
  }
  50.1% {
    transform: translateX(-100%) scalex( -0.01);   
  }
  100% {
    transform: translateX(-100%) scalex(-1);
  }
}