body {
    /*width:1440px;
    height: 3619px;*/
      color:white;
      background: hsl(217, 28%, 15%);
      font-family: Open sans;
    }

    .bg {
      position: absolute;
      top: 600px;
      z-index: 1;
      background-size: 100% 100%;
    
    }

    #content {
      width: 100%;
      height:2500px;
      background-image: url('images/bg-curvy-desktop.svg');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      position: absolute;
      left:0px;
    }
    

    header {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      font-family: Raleway;
    }


    nav {
      width:15vw;
      font-weight: 700;
      color: white;
      display: flex;
      flex-direction: row;
      justify-content: space-evenly;
      position: relative;
      right: 25px;
      top: 10px;
    }

    li {
      list-style-type: none;
    }

  
    .heading {
      color: white;
      text-align: center;
      position: relative;
      top:70px;
    }


    button {
      width:10vw;
      height:4vh;
      border-radius: 30px;
      color: white;
      background-color:  hsl(176, 68%, 64%);
    }

    button:hover {
            animation-name: color;
            animation-duration: 500ms;
            animation-fill-mode: forwards;
        }
        @keyframes color {
            100% {
                background-color: hsl(219, 30%, 18%);
            }
        }

    .features {
      text-align: center;
      color:white;
      margin-top: 150px;
      display: grid;
      grid-template-columns: auto auto;  
    }


    .access {
      margin-left: 250px;
    }

    .security {
      margin-right: 250px;
    }

    .collaboration {
      margin-left: 250px;
    }

    .store {
      margin-right: 250px;
    }
    
    .enquiries {
      display: flex;
      flex-direction: row;
       margin-top: 70px;
      margin-left: 200px;
    }

    
  .p-content {
      width: 450px;
      margin-top: 100px;
      margin-left: 80px;
    }

    a {
      color:hsl(176, 68%, 64%);
      text-decoration: underline;
    }

    .testimonies {
      display: flex;
      flex-direction: row;
      justify-content: space-evenly;
      position: relative;
      top:100px
    }

    .testimony-bg {
      background-color: hsl(219, 30%, 18%);
      width:350px;
      height: 170px;
      border-radius: 10px;
      z-index: 2;
    }


    .testimony-text {
      position: relative;
      top:20px;
      left: 40px;
    }

    .pic {
      height: 30px;
      border-radius: 50%;
      position: absolute;
      left:-37px;
      bottom: 5px;
    }

    .profile {
      position: relative;
      left:70px;
    }

    .register {
      width: 700px;
      height: 250px;
      text-align: center;
      background-color:  hsl(219, 30%, 18%);
      border-radius: 10px;
      position: absolute;
      bottom: -1850px;
      left: 450px;
      z-index: 5;
    }

    .register-text {
      width:400px;
     
      position: relative;
      bottom:10px;
      left: 150px;
    }

    .email {
      width: 300px;
      height: 30px;
      border-radius: 20px;
      position: relative;
      right: 20px;
    }


    .footer {
     background-color: hsl(216, 53%, 9%);
      height: 300px;
      width:1440px;
     padding-bottom: 20px;
     padding-top: 80px;
      position: relative;
      bottom: -300px;
      left:30px;
      z-index:1 ;
    }


    .footer-logo {
      position: relative;
      left: 60px;
    }

    .info {
      display: flex;
      flex-direction: row;
      justify-content: space-evenly;
      margin-top:50px;
    }
    

    .icon {
      position: relative;
      right: 40px;
      top:22px;
    }



    @media ( max-width:376px) {         /* MEDIA QUERIES */
       body {
          width: 50vw;
      }

       .content {
        background-image: url('images/bg-curvy-mobile.svg');
        background-size: 100% 100%;
        height: 4500px;
      }

       header {
        width: 550px;
        display: flex;
    } 

    nav {
        width: 400px;
        margin-left: 40px;
        display: flex;
        justify-content: space-evenly;
    } 


    .head-pic {
        position: relative;
        right: 130px;
    }

    .heading {
        position: relative;
        left: 80px;
      }

    .features {
        width: 375px;
        display: flex;
        flex-direction: column;
        position: relative;
        right: 40px;
    }   
    
    .access {
        margin-left: 100px;
        margin-bottom: 70px;
        position: relative;
        right: 5px;
    }    

     .security {
        margin-right: 100px;
        margin-bottom: 50px;
        position: relative;
        left: 100px;
      }

      .collaboration {
        margin-left: 100px;
        margin-bottom: 50px;
        position: relative;
        right: 5px;
    }    

    .store {
      margin-right: 100px;
      margin-bottom: 50px;
      position: relative;
      left: 100px;
    }

    .enquiries {
      width:375px;
      display: flex;
      flex-direction: column;
      position: relative;
      right: 250px;
    }
    .p-content {
      width:400px;
      position: relative;
      right: 30px;
      }

      .testimonies {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        position: relative;
        left: 5px;
      }    

      .testimony-bg {
        margin-bottom: 45px;
      }

      .register {
        height:350px;
        width:355px;
        padding-top:50px;
        position: relative;
        left:2px;
        top: 70px;
      }

      .register-text {
        width:310px;
        position: relative;
        left: 20px;
      }

      .email {
        height:45px;
        width:300px;
        border-radius: 50px;
        position: relative;
        top:20px;
        right:10px;
      }

      button {
        height:40px;
        width:250px;
        position: relative;
        top:30px;
        right:10px;
      }

      .footer {
        width:500px;
        height:600px;
        position: relative;
        top: -200px;
        left:00px;
      }

      .footer-logo {
        position: relative;
        left: 50px;
        top: 100px;
      }

      .info {
        display: flex;
        flex-direction: column;
        position: relative;
        top:90px;
        left:70px;
      }



    }