/*css resets*/

    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box; 
    }
    
    body{
        font-family: 'poppins' sans-serif;
        background-color: hsl(0, 18%, 97%);
    }
    
    /*Responsive navigation*/

    nav {
        position: fixed;
        height: 40px;
        width: 100%;
        z-index: 5;
        background-color: rgba(18, 194, 194, 0.911);
        color: #eee;
      }
      nav ul {
        padding: 0;
        margin: 0;
      }
      nav li {
        display: inline;
        float: left;
      }
      nav a {
        display: inline-block;
        width: 100px;
        font-weight: 00;
        text-align: center;
        text-decoration: none;
        padding: 10px 0;
        color: #eee;
        text-decoration: none;
      }
      nav li:hover {
        background-color: #444;
      }
      nav a#openup {
        display: none;
      }
      
      @media screen and (max-width: 680px) {
        h1 {
          font-size: 2.8em;
        }
      header {
         width: 100vw; 
      }
        nav {
          height: auto;
          border-bottom: 0;
          
        }
        nav ul {
          display: none;
          height: auto;
        }
        nav li {
          width: 100%;
          float: left;
          position: relative;
        }
        nav a {
          text-align: left;
          width: 100%;
          text-indent: 25px;
          background: #333;
          border-bottom: 1px solid #555;
        }
        nav a:hover {
          background: #444;
        }
        nav a#openup:after {
          content: "|||";
          transform: rotate(-90deg);
          -ms-transform: rotate(-90deg);
          /* IE 9 */
          -webkit-transform: rotate(-90deg);
          /* Safari and Chrome */
          width: 30px;
          height: 30px;
          display: inline-block;
          position: absolute;
          right: 8px;
          top: 22px;
        }
        nav a#openup {
          display: block;
          background-color: rgba(18, 194, 194, 0.794);
          width: 100%;
          color: #444;
          position: relative;
          font-weight: 600;
        }
      }
      .cf:before, .cf:after {
        content: "";
        display: table;
      }
      
      .cf:after {
        clear: both;
      }
      
      .cf {
        zoom: 1;
        width: 100vw;
        
      }
    /*End Navigation*/
    /*banner section*/
    .section-main {
        /*display: flex;*/
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 150vh;
        color: rgb(206, 206, 206);
        position: relative;
        overflow-y: hidden;
        /*margin-top: 20px;*/
    }
    
    .section-main h1 {
        text-transform: uppercase;
        font-family: 'poppins' sans-serif;
        margin-top: 30vh;
        justify-content: center;
        margin-left: 1.5em ;
        margin-right: 1.5em;
        align-items: center;
        text-align: center;
        font-size: 44px;
        color: rgb(255, 255, 255);
    }
    
    .section-main h2 {
        z-index: 100;
        margin-top: 15.0em;
        font-size: 22px;
        margin-left: 1.8em ;
        margin-right: 1.8em;
        color: rgba(18, 194, 194, 0.808);
        font-weight: 600;
        line-height: 12px;
        font-weight: 600;
       align-items: center;
        text-align: center;
        line-height: 1.3;
        padding-bottom: 18px;
        margin-bottom: 18px;
        
        
    
    }
    .section-main::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -3;
        background-size: cover;
        box-shadow: inset 260px 260px 260px #000000b7, inset -260px -260px -260px #000000e5;
        /*background-blend-mode: overlay;*/
        opacity: 0.9;
        background: url("images/lucy-dhobi-banner.png") no-repeat center/cover;
    }
    
    /*start of about section part 1*/
    .about-me{
        display: flex;
        flex-direction: row;
        /*height: 60vh;*/
        justify-content: center;
        align-items: center;
        background-color: #4e4b4b;
        color: #ffff;
        padding-bottom: 1.2em;
        padding-top: 1.2em;
        text-align: center;
        
    }
    
    .img-about img  {
        width: 28vw;
        height: auto;
        padding-left:  0.8em;
        padding-right:  0.8em;
        margin-left: 4em
        
    }
    
     .content-about  {
       padding: 0.5em 0.5em;
       background-color: rgba(121, 117, 117, 0.5);
       color: rgba(255, 255, 255, 0.685);
       margin: 0.5em 6em;
       border-radius: 10px;
       font-size: 1.8em;
       /*letter-spacing: 1.8px;*/
    }
    
    .content-about h2 {
        padding-bottom: 18px;
    }
    
    /*end of about section part 1*/
    
    /*start of about section part 2*/
    .about-values {
        background-color: rgba(134, 105, 62, 0.829);
        display: flex;
        flex-direction: row;
        align-items: center;
        align-content: center;
        padding: 2em 0;
        text-align: center;
        width: 100%;
        place-items: center;
     
        
    
    }
    
    .about-icons  {
       /*font-size: 28px;*/
       margin: 36px 8px;
       border-radius: 0.4em;
       align-content: center;
       align-items: center;
       padding: 6px 3px;
    }
    
   
    
    
    .icons-p  p{
        margin-top: 1em;
        align-content: center;
        align-items: center;
        text-align: center;
        align-content: center;
        font-size: 28px;
        font-family: sans-serif;
        font-weight: 650;
        letter-spacing: 2px;
        color: rgba(2, 32, 32, 0.767);  
    }
    
    .special-icon {
        height: -300px;
        margin-top: 30px;
    }


    .about-icons img {
        
        text-align: center;
        margin-left: 2.7em;
        margin-right: 2.7em;
        align-content: center;
        align-items: center;
        
    }
    /*end of about section part 2*/
    
    /*contact section*/
    
    .contact-section {
        
        background-color: #ffffff;
        align-content: center;
        text-align: center;
        display: flex;
        flex-direction: column;
        flex: 1;
        padding: 8px;
        place-items: center;
       
    }
    
    .contact-section h2 {
    text-transform: uppercase;
    font-size: 2em;
    padding: 0.5em 1em;
    text-align: center;
    letter-spacing: 1.5px;
    }
    
    .contact-section h3{
        display: inline;
        flex-direction: row;
        align-items: center;
        align-content: center;
        line-height: 1.8;
        color: rgba(0, 0, 0, 0.698);
        font-size: 1.4em;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.712);
        letter-spacing: 2px;
        font-family: poppins;
    }

.contact-me h3{
    font-weight: 400;
    color:rgba(18, 194, 194, 0.931);
    
}

.contact-me{

    display: flex;
    flex-direction: row;
}
    
    .contact-button {
        position: relative;
        margin: 0.2em 3em;
        font-size: 1.2em;
        text-align: center;
    }
    .contact-me a{
        margin-left: 0em;
        margin-bottom: 2em;
        color: #000;
    }
    
    .contact-me a>i:hover{
        color: rgba(0, 0, 0, 0.616);
    }
    
   
    /*porfolio section*/
    
    
    .portfolio-section {
        background-color: rgba(10, 10, 10, 0.842);
        /*padding: 12px 16px;*/
        align-items: center;
        align-content: center;
        display: flex;
        flex-direction: row;
     
        
    }
    
    .portfolio-content{
        
        
       
        align-items: center;
        padding-right: 0.8em;
        padding-left: 0.8em;
        align-content: center;
        width: 100%;
        height: auto;
        /*background-color: rgba(61, 60, 60, 0.938);*/
    }
    
    /*Video section*/
    .video-section {
        display: flex;
        flex-direction: row;
        background-color: rgba(98, 95, 95, 0.938);
        padding: 18px 16px 18px 19px;
    }
    
    /*Footer section*/
    
    .footer-section {
        background-color: slategray;
        align-items: center;
        place-items: center;
        display: flex;
        flex-direction: column;
        text-align: center;
        
        
    }
    .footer-section  p {
        align-items: center;
        align-content: center;
        justify-content: center;
        place-items: center;
    }
    .footer-content p, h5 {
        align-items: center;
        align-content: center;
        text-align: center;
        line-height: 1.0;
        margin-top: 0.5em;
        width: auto;
        
    }
    
    .footer-content h5, a {
        align-content: center;
        justify-content: center;
        text-align: center;
        
       
    }
    
    .footer-content a {
        text-decoration: none;
        font-size: 16px;
        color: rgba(33, 218, 231, 0.301);
        padding-left: 0;
        margin-left: 0;
    }
    
    .footer-content a:hover{
        color: rgb(18, 194, 194);;
    }
    
    
    .menu-btn:hover{
        opacity: 0.5;
    }
    
/*Media quries*/
@media only screen and (max-width: 800px) {
    
    button{
      display: block;
      top: 0;
      margin-top: 0;
      padding: 2.9vw;
      color: black;
      font-size: 3vh;
      background-color: rgba(18, 194, 194, 0.808);;
      border: none;
      outline: none;
      cursor: pointer;
      align-self: flex-start;
      
    }

    

    .about-me{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .content-about {
        margin: 1.5rem;
    }

    .img-about img {
        margin: 0;
        width: 60vw;
    }

    .about-values{
        flex-direction: column;
    }

    .portfolio-section{
        flex-direction: column;
        padding: 2em;
    }

    .video-section{
        flex-direction: column;
        padding: 12px;
    }

    .section-main{
        height: auto;
    }

    .section-main h1 {
        margin-top: 20vh;
    }

    .section-main h2 {
        margin-top: 18vh;
    }
    .contact-me{
        flex-direction: column;
    }
  }