@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
body, html{
    padding:0;
    margin:0;
    box-sizing: border-box;
}
body{
    font-family: 'Lato', sans-serif;
}
#blue{
    color:#73c2fb;
    font-weight:700;
}
.nav{
    font-weight: 800;
     background-color: white;
}

.text-area {
    resize: none;
  }

  .portfolio{
    color:#73c2fb !important;
    font-weight:700;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 20%;
    height: 20%;
    border-radius: 10%;
  }

  /* #portfolio{
    color:#73c2fb;
    font-weight:700;
    font-size: 25px;
    height: 50%;
    width: 50%;
    text-align: center;

  } */
/* phone screens */
@media only screen and (max-width:480px){

    .portfolio{
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 20%;
        height: 20%;
        border-radius: 10%;
      }
    
    .icon{
        position:fixed;
        top:0;
        font-size:30px;
        cursor:pointer;
        background-color: white;
      
        
    }
    .logo{
        width:0;
    }
    .fa-times{
        color:white;
    }
    
    .nav{
        height:100%;
        width:0;
        background-color: #111;
        position:fixed;
        z-index:2;
        top:0;
        left:0;
        overflow-x: hidden;
        padding-top:60px;
        transition:0.6s;
        
    }
    .nav .col-8 ul li a{
       
        padding:9px;
        left:0;
        text-decoration: none;
        font-size:18px;
        color:#f1f1f1;
        display:block;
        transition:0.4s;
        border-bottom:1px solid #f1f1f1;
    }
    .nav .col-8 ul li{
        list-style: none;
    }
    .nav ul li a:hover{
     background: #2dbacb;
    }
    
    #landingpic{
        width:300px;
        height:294px;
        position:relative;
        left:50%;
        transform:translateX(-50%);
       
    }
    /* About section*/
    .about{
        margin-top: 50px;
        text-align: center;
    }
    .about-text{
        font-size: 20px;
    }
    .line{
        width:100%;
        height:3px;
        color:black;
    }
    #blue, #thir{
        font-size: 30px;;
    }
    .about-image{
       
        display: none;
      
    }
    /* services section */
    .services{
       text-align: center;
       height:100%;
    }
    #same{
        width:200px;
        height:80px;
    }
    .img1, .img2, .img3, .img4, .img5, .img6{
        padding:20px 0;
    }
    #services{
        color:#bbbbbb;
        font-weight: 700;
        font-size: 20px;
        padding:10px 0;
    }
    #clients{
        font-size: 20px;
        font-weight: 700;
    }
 
    /*project section */
    .projects{
        text-align: center;
    }
 
    /*contact section */
    .contact{
        text-align: center;
        color:white;
        background-color: black;
    }
    .form{
        width:60%;
        text-align: center;
        position:relative;
        left:50%;
        transform:translateX(-50%);
        
    }
    .btn{
        margin:20px 0;
        width:40%;
    }
 
    /*footer*/
    .footer{
        background-color:#303030;
         color:white;
         font-weight: 700;
         
    }
    .far, .fab ,.fas{
     position:relative;
     left:50%;
     transform:translateX(-50%);
    }
    #last{
        text-align: center;
        color: white;
        font-weight: 700;
    }
    .icons{
        color:#73c2fb;
        font-size: small;
        padding-top: 5%;
        
       }
       .phone{
           text-align: center;
       }
    /* projects section */
    #projo{
        color:#bbbbbb;
        font-weight: 700;
        font-size: 20px;
        padding:10px 0;
        }
        .food-recipe{
            border-radius: 10%;
            width:300px;
            height:200px;
        }
        .project1,.project2,.project3,.project4{
            padding-bottom: 2rem;
        }
      .projects p{
          font-weight: 700;
        }
   
}

/* small tablet screens*/
@media only screen and (max-width: 768px) and (min-width: 481px){
    .portfolio{
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 20%;
        height: 20%;
        border-radius: 10%;
      }

   .fas{
       position:relative;
       top:10px;
       font-size:30px;
       cursor:pointer;
   }
   .icon{
       position:fixed;
       top:0;
       font-size:30px;
       cursor:pointer;
       background-color: white;
     
       
   }
   .logo{
       display: none;
   }
   .fa-times{
       color:white;
   }
   
   .nav{
       height:100%;
       width:0;
       background-color: #111;
       position:fixed;
       z-index:1;
       top:0;
       left:0;
       overflow-x: hidden;
       padding-top:60px;
       transition:0.6s;
       
   }
   .nav .col-8 ul li a{
       position: relative;
       left:0;
       padding:9px;
       text-decoration: none;
       font-size:18px;
       color:#f1f1f1;
       display:block;
       transition:0.4s;
       border-bottom:1px solid #f1f1f1;
   }
   .nav .col-8 ul li{
       list-style: none;
   }
   .nav ul li a:hover{
    background: #2dbacb;
   }
   
   #landingpic{
       width:300px;
       height:294px;
       position:relative;
       left:50%;
       transform:translateX(-50%);
      
   }
   /* About section*/
   .about{
       margin-top: 50px;
       text-align: center;
   }
   .about-text{
       font-size: 20px;
   }
   .line{
       width:100%;
       height:3px;
       color:black;
   }
   #blue, #thir{
       font-size: 30px;;
   }
   .about-image{
       
       display: none;
     
   }
   /* services section */
   .services{
      text-align: center;
      height:100%;
   }
   #same{
       width:200px;
       height:80px;
   }
   .img1, .img2, .img3, .img4, .img5, .img6{
       padding:20px 0;
   }
   #services{
       color:#bbbbbb;
       font-weight: 700;
       font-size: 20px;
       padding:10px 0;
   }
   #clients{
       font-size: 20px;
       font-weight: 700;
   }

   /*project section */
   .projects{
       text-align: center;
   }

   /*contact section */
   .contact{
       text-align: center;
       color:white;
       background-color: black;
   }
   .form{
       width:60%;
       text-align: center;
       position:relative;
       left:50%;
       transform:translateX(-50%);
       
   }
   .btn{
       margin:20px 0;
       width:40%;
   }

   /*footer*/
   .footer{
    background-color:#303030;
        color:white;
        font-weight: 700;
        
   }
   .far, .fab ,.fas{
    position:relative;
    left:50%;
    transform:translateX(-50%);
   }
   #last{
       text-align: center;
       color: white;
       font-weight: 700;
   }
   .icons{
    color:#73c2fb;
    font-size: small;
    padding-top: 5%;
    
   }
   .phone{
       text-align: center;
   }
/*projects section*/
   #projo{
    color:#bbbbbb;
    font-weight: 700;
    font-size: 20px;
    padding:10px 0;
    }
    .food-recipe{
        border-radius: 10%;
        width:300px;
        height:200px;
    }
    .project1,.project2,.project3,.project4{
        padding-bottom: 2rem;
    }
  .projects p{
      font-weight: 700;
    }
   }   






/*large tablet screens and laptops*/
@media only screen and (max-width: 1024px) and (min-width: 769px){
   
    .portfolio{
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 20%;
        height: 20%;
        border-radius: 10%;
      }

    .fas{
        display:none;
    }
    .nav{
        position:sticky;
        top:0;
        border-bottom: 3px solid #f5f5f5;
        height:4rem;
        box-sizing: border-box;
        z-index: 1;
        
        
    }
   
    
    .nav ul li{
       
        list-style: none;
        float: left; 
        padding-top: 0.5%;
       
        
    }
    .content{
        margin-top: 5rem;
    }
    .right{
        bottom:0;
    }
    
    .nav ul li a{
        display:block;
        text-decoration: none;
        margin:0 0.5rem;
    } 
    #blue, #thir{
        font-size: 40px;
    }
    
    .landing{
       display: flex;
       margin: 0 0 0 5rem;
       padding-bottom: 5rem;
       

    }
    
    .about,.service-h,.clients, .projects, .contact1{
        text-align: center;
    }
    .about-text{
        font-size: 30px;
        color:gray;
        text-align: center;
    }
    .about-image{
        display: none;
    }

    /*services section */

    #clients{
        font-size: 20px;
        font-weight: 700;
        text-align: center;
    }
    .services{
        padding-top: 4rem;
       
    }
    #same{
        width:300px;
        height:200px;
        padding:20px 0;
    }
    .img1, .img2, .img3,.img4,.img5,.img6{
        display: flex;
        flex-direction: row;
        margin: 0 0 0 1rem;
       
    }
    #services{
        color:#bbbbbb;
        font-weight:700;
        font-size: 30px;
        margin: 100px 0 0 50px;
    }


    .contact{
        color:white;
        background-color: black;
        padding:3rem 0;
    }
    .form{
        text-align: center;
        width:60%;
        position:relative;
        left: 50%;
        transform: translateX(-50%);
    }
    /*footer section*/
    .footer{
        background-color:#303030;
         color:white;
         font-weight: 700;
         
    }
    .icons{
        display: flex;
        text-align: center;
        margin-left: 30%;
        color:#73c2fb;
    }
    .fab, .far,.fas{
        padding:20px;
        margin-left: 3%;
       
      
    }
    #last{
        text-align: center;
        color: white;
        font-weight: 700;
    }
    .phone{
        margin: 1rem 0 0 1rem;
    }
    /*projects section*/
     #projo{
        color:#bbbbbb;
        font-weight: 700;
        font-size: 30px;
        padding:10px 0;
        }
        .food-recipe{
            border-radius: 10%;
            width:300px;
            height:200px;
        }
        
       .projects p{
          font-weight: 700;
        }  
       .showcase1,.showcase2{
           display:flex;
           margin:10px 0 0 200px;
       }
      
}








/* desktop screens and larger*/
@media only screen and (min-width:1025px){
   
    .portfolio{
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 20%;
        height: 20%;
        border-radius: 10%;
      }

    .fas{
        display:none;
    }
    .nav{
        position:sticky;
        top:0;
        border-bottom: 3px solid #f5f5f5;
        height:4rem;
        box-sizing: border-box;
        background-color: white;
        width:100%;
        z-index: 1;
        
    }
    
    
    .nav ul li{
       
        list-style: none;
        float: left; 
        padding-top: 0.5%;
       
        
    }
    .content{
        margin-top: 5rem;
    }
    .right{
        bottom:0;
    }
    
    .nav ul li a{
        display:block;
        text-decoration: none;
        margin:0 3rem;
    } 
    #blue, #thir{
        font-size: 40px;
    }
    
    .landing{
       display: flex;
       margin: 0 0 0 20rem;
       padding-bottom: 5rem;
       

    }
    .landing-image{
        margin-left: 20%;
    }
    .about,.service-h,.clients, .projects, .contact1{
        text-align: center;
    }
    .about-text{
        font-size: 30px;
        color:gray;
        text-align: center;
    }
    .about-image{
        display: none;
    }

    /*services section */

    #clients{
        font-size: 20px;
        font-weight: 700;
        text-align: center;
    }
    .services{
        padding-top: 4rem;
       
    }
    #same{
        width:300px;
        height:200px;
        padding:20px 0;
    }
    .img1, .img2, .img3,.img4,.img5,.img6{
        display: flex;
        flex-direction: row;
        margin: 0 0 0 20rem;
       
    }
    #services{
        color:#bbbbbb;
        font-weight:700;
        font-size: 30px;
        margin: 100px 0 0 100px;
    }

    /* projects section */



    /* contact section*/

    .contact{
        color:white;
        background-color: black;
        padding:3rem 0;
    }
    .form{
        text-align: center;
        width:60%;
        position:relative;
        left: 50%;
        transform: translateX(-50%);
    }
    /*footer section*/
    .footer{
        background-color:#303030;
         color:white;
         font-weight: 700;
         
    }
    .icons{
        display: flex;
        text-align: center;
        margin-left: 30%;
        color:#73c2fb;
    }
    .fab, .far,.fas{
        padding:20px;
        margin-left: 5%;
       
      
    }
    #last{
        text-align: center;
        color: white;
        font-weight: 700;
    }
    .phone{
        margin: 1rem 0 0 1rem;
    }
    /*more projects section*/
    #projo{
        color:#bbbbbb;
        font-weight: 700;
        font-size: 30px;
        padding:10px 0;
        }
        .food-recipe{
            border-radius: 10%;
            width:300px;
            height:200px;
            margin-left:40px;
        }
        
       .projects p{
          font-weight: 700;
        }  
       .showcase1,.showcase2{
           display:flex;
           position: relative;
           
          
       }
       .projects{
           margin-top: 5rem;
       }
       .showcase{
         margin: 0 0 0 30%;
           
       }
}