nav{
    background-color: rgb(247, 212, 212);
}

#header{
    position: inherit;
    background-color: #fff;
} 
#header .logo{
    position: absolute;
    top: 50%;
    margin-left: 7vw;
    transform: translate(0, -35%);
    filter: invert(1);
    
} 

.logo img {
    max-width:60%;
    height:auto;
}

body{
    margin-left: 6vw;
    font-family: Arial, Helvetica, sans-serif;
}

.body-content{
    padding: 3vh 5vw;
    margin-left: 3vw;
}


.nav-icons{
    
    width: 150%;
    height: auto;
    margin-top: 50%;
    margin-right: 500%;
    float: right;
    
}

.dp{
    margin-top: 8%;
    margin-bottom: auto;
    width: 30%;
    height: 30%;
    margin-left : 3%;
    margin-right: 150%;
    float: right;
    
}


.sidenav {
    padding-top: 100px;
    height: 100%;
    max-width: 7vw;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    overflow-x: hidden;
    padding-left: 20px;
    
  }
  .side-icon {
      height: 20px;
      width: 20px;
  }
 

  .sidenav li img {
      margin-left: 50%;
      margin-right: 10%;
  }

  .sidenav li{
    cursor: pointer;
  }

  .active{
    border-right: 4px solid #000;
    filter: invert(60%) sepia(53%) saturate(488%) hue-rotate(127deg) brightness(97%) contrast(83%);
  }
  
  .sidenav li:hover {
    color: #3EBCB3;
    border-right: 4px solid #000;
    filter: invert(60%) sepia(53%) saturate(488%) hue-rotate(127deg) brightness(97%) contrast(83%);
  }
  
  .main {
    margin-left: 200px; /* Same as the width of the sidenav */
  }

  .section{
      background-color: #f9fbfb;
      padding-left: 2vw;
  }

  .section-text{
      color: #a3a3a3;
      font-size: 13.5px !important;

  }
  .section-head{
      color: #3EBCB3;
      font-size: 125%;
  }

  p{
      font-family: unset;
      color: #a3a3a3;
      font-size: 14px;
     
  }

  .button-hollow{
      background-color: #f9fbfb;
      padding: 8px 20px;
      cursor: pointer;
      border: solid 1.3px #3EBCB3;
      border-radius: 4px;
      color: #3EBCB3;
      font-weight: 520;
      margin-top: 10px;
      
      
  }
  .button-hollow-card{
    background-color: #f9fbfb;
    padding: 8px 40px;
    cursor: pointer;
    border: solid 1.2px #3EBCB3;
    
    color: #3EBCB3;
    font-weight: 520;
    margin-top: 10px;
    
}
  .card img {
      display: inline-block;
      vertical-align: top;
      width: 23%;
      height: 23%;
      border-radius: 50%;
      margin: 0;
  }

  
  .card .card-action{
      border-top: 0;
      font-size: 11px;
      color: #3EBCB3;
      box-shadow: none;
      
  }
  .row{
    margin-right: 10vw; 
  }
  .row .col{
      padding: 0;
      padding-right: 2rem;
  }
  .section{
      margin-right: 2rem;
  }

  .card{
      box-shadow: none;
      padding: 10%;
      background-color: #fdfdfd;
      transition: all .2s ease-in-out;
      margin: 10% 0%;
  }
  .card:hover{
      transform: scale(1.05);
      background-color: #fff;
      box-shadow: 1px 1px 20px #888888;
      z-index: 2;
    }   
  .card .card-action a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(.btn-floating){
    
    font-size: 11px;
    font-family: Arial, Helvetica, sans-serif;
    color: #3EBCB3;
}
.card .card-action a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(.btn-floating):hover{
    color: #3EBCB3;
}

.cen li{
    text-align: center;
    display: inline-block;
    size: 50%;
}
footer ul{
    line-height: 50%;
    margin: 0;  
}

.container{
    margin-left: 30%;
    margin-right: 60%;
    
}
.footer-icons img{
    display: inline-block;
    float: left;
   
    margin-left: 8%;
} 
.footer-icons{
    display: inline-block;
    float: left;
   
    text-align: center;
    margin-left: 36%;
    margin-right: 15%;

} 

/* Media query */

@media only screen and (max-width: 600px) {
    .nav-icons{
    
        width: 150%;
        height: auto;
        margin-top: 50%;
        margin-right: 0%;
        float: right;
        
    }
    
    .dp{
        margin-top: 8%;
        margin-bottom: auto;
        width: 30%;
        height: 30%;
        margin-left : 3%;
        margin-right: 65%;
        float: right;
        
    }
    .sidenav li img {
        margin-left: 20%;
        margin-right: 10%;
    }
    .button-hollow{
        background-color: #f9fbfb;
        /* padding: 8% 10%; */
        cursor: pointer;
        border: solid 1.3px #3EBCB3;
        border-radius: 4px;
        color: #3EBCB3;
        font-weight: 520;
        font-size: 2vw;
        
    }
    .button-hollow-card{
        background-color: #f9fbfb;
        /* padding: 8px 40px; */
        padding : 2vw 8vw;
        cursor: pointer;
        border: solid 1.2px #3EBCB3;
        
        color: #3EBCB3;
        font-weight: 520;
        margin-top: 10px;
        font-size: 1.7vw;
        
    }
    
  }