body{margin: 0;
font-family:  Helvetica, sans-serif;}
nav ul{
    list-style: none;
    
}

ul{padding: 0;}

header{
    background-color: rgb(56, 53, 53);

 padding-top: .3rem;
 padding-left: 1rem;
 display: flex;
 justify-content: space-between;
flex-direction: column;
padding-bottom: .5rem;


 
}
header p{
    color:#f0008c;
    font-family: "Kaushan Script", cursive;
    margin: 1rem;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    
}
header a {color: aliceblue;
text-decoration: none;

margin: 1rem;
border-bottom: 1px solid white;
padding: .7rem;}


.Hero{background-image: url("images/hero-bg.jpg");
background-size: cover;
display: flex;
align-items: center;
flex-direction: column;
text-align: center;
justify-content: center;

height: 60vh;}

.Hero h1{
    font-family: "Kaushan Script";
    color: aliceblue;
}

.Hero p{
    color: aliceblue;
    font-size: 2.4rem;
    text-transform: uppercase;
    
     font-weight: bold;
}

.Hero a{color: aliceblue;
text-decoration: none;

text-transform: uppercase;
padding-top: .8rem;
padding-bottom: .8rem;
padding-left: 2.3rem;
padding-right: 2.3rem;
background-color: rgb(98, 213, 255);
border-radius: 10px;

}


.services_para{
   
    text-align: center;
  color: gray;
}
.services_para p{
    font-size: 1.3rem;
}
h2{color: black;}

.Services{text-align: center;
}
.Services p{color: gray;}

.Services a{color: aliceblue;
text-decoration: none;
padding-left: 1rem;
padding-right: 1rem;
padding-top: .5rem;
padding-bottom: .5rem;
background-color: #a90047;
border-radius: 8px;
text-transform: uppercase;
font-size: .7rem;
margin: 1rem;
display: inline-block;
}

.Services img{
    margin-top: 1.2rem;
    margin-bottom: .6rem;
}

.portitle{
    text-align: center;
  
    background-color: rgb(219, 219, 219);
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.portitle h2{
    text-align: center;
  
    font-size: 2rem;
}

.portitle p{
    text-align: center;
    
    font-size: 1.2rem;
    color: rgb(92, 92, 92);
}

.Portofolio {
    background-color: rgb(219, 219, 219);
       padding: 1.4rem;

   
}

.Portofolio section{
    background-color: aliceblue;
  text-align: center;
  

  

}

.Portofolio h3{
margin-top: .5rem;
}
.Portofolio p{
margin-top: 1rem;
padding-bottom: 1rem;
}

.Portofolio img{
    width: 100%;
  
}


footer{font-family:  Helvetica, sans-serif;
display: flex
; justify-content: space-between;
padding: 1rem;
flex-direction: column; }



.foot, a{display: block;}


footer a{
    color: #f169a1;
    text-decoration: none;
    
}


@media (min-width:1200px){
    .Services{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1.2rem;
    }
    .Portofolio{
        display: grid;
        grid-template-columns: 1fr 1fr;
         gap: 1.2rem;
    }
    footer{
        align-items: center;
       display: flex;
        flex-direction: row;
     
        
    }
    .foot,a{
        display: inline-block;
    margin: .7rem;


    
}
header{flex-direction: row; display: flex; }
 header a{border-bottom: none; }



nav ul{display: flex;}






}


@media (min-width:1700px){

      .Services{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1.2rem;
    }
    .Portofolio{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
         gap: 1.2rem;
    }
  footer{
        align-items: center;
       display: flex;
        flex-direction: row;
        
        
    }
    .foot,a{
             display: inline-block;
    margin: .7rem;
}


}