:root{
    --white:#ffffff;
    --green:  #2af598;
    --light-green: rgb(75, 255, 174);
    --blue:  #009efd;

    --light-navy:rgb(86, 98, 112);
    --dark-navy:rgb(30, 42, 56);
}

html{
    scroll-behavior: smooth;

}
body{
    margin: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    scroll-behavior: smooth;
    overflow-y: auto;
    overflow-x: hidden;

}

main{
    width: 100%;
}

.section{
    padding: 2rem 7%;
}

li{
    list-style: none;
  }

a{

    text-decoration: none;
    position: relative;
}

li a::after{
    content: "";
    position: absolute;
    height: 3px;
    width: 0rem;
    left: 0;
    bottom: -3px;
    background: var(--white);
    transform-origin: left;
    transition: all 0.5s ease;
  }

li a:hover::after{
    width: 2rem;
    transform-origin: right;
  }