*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

a{
  color: white;  
  text-decoration: none;
}

ul{
    list-style: none;
}



body{
font-family: "Barlow Condensed", sans-serif;
}


.container{
padding-left: 1.4rem;
padding-right: 1.4rem;
margin: 0 auto;
}


@media (min-width: 568px){
    .container{
        width: 520px;
    }
}


@media (min-width: 768px){
    .container{
        width: 720px;
    }
}

@media (min-width: 992px){
    .container{
        width: 920px;
    }
}

@media (min-width: 1200px){
    .container{
        width: 1120px;
    }
}

@media (min-width: 1400px){
    .container{
        width: 1320px;
    }
}







header{
background-image: url("./overlay.png") ,
         url("./banner.jpg");
         text-align: center;
         color: #fff;
         background-size: cover;
}



header nav{
    padding: 1.6rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;

}

header nav > a{
    font-weight: bold;
    font-size: 1.6rem;
}


header nav ul{
    display: flex;
    gap: 1.2rem;
}

header nav ul a{
    font-size: 1.2rem;
}

.hero{
padding: 3rem 0 15rem 0;
}

.hero .icon{
    border:2px solid white;
    border-radius: 100%;
    width: 5rem;
    height: 5rem;
    margin: 0 auto 2.5rem auto;
    padding: 2rem;
}

.hero .icon i{
    transform: translate(-22px , -12px);
}

h1{
    
    font-size: 2.4rem;
    text-decoration: overline wavy 2px;
    text-decoration-style: wavy;
}

.hero p{
    width: 40%;
    font-size: 1.2rem;
    margin: 1.4rem auto; 
}

.btn{
    display: inline-block;
    background-color: white;
    color: black;
    padding: 1.2rem;
    font-weight: bold;
    margin: 0.6rem;
    border-radius: 3rem;
}

.hero{
    animation: fadeInUp 1.5s ease-in-out;
   
}

@keyframes fadeInUp{
from{
opacity: 0;
transform: translateY(40px);
}

to{
    opacity: 1;
transform: translateY(0);
}
}


@media(max-width:1200px)
{
    #services .row{
        flex-direction: column;
    }
    #Services img{
        width: 100%;
    }
}


@media (max-width:992px){

    .hero p{
        width: 80%;
    }
}


@media (max-width:768px){

    h1{
        font-size: 2rem;
    }
    .hero p{
        width: 95%;
    }
}


@media (max-width:568px){

    header nav{
        flex-direction: column;
        gap: 1rem;
    }
    h1{
        text-decoration: none;
    }
}

#services{
    background-color: #EEEE;
    padding: 4rem 0 6rem 0;
   margin: -6rem auto;
}


#services .row{
    display: flex;
    width: 75%;
    margin: 2rem auto;

}

#services .row:nth-child(1) .col:nth-child(2) , #services .row:nth-child(2) .col:nth-child(1) {
background-color: white;
padding: 2rem;
box-shadow: 1px 1px 1px white;
 
}

#services img{
    width: 500px;
    height: 100%;
}

#services h2{
    font-size: 2rem;
    margin-bottom: 1.4rem;
}

#services  .btn , #portfolio .btn{
    border: 2px solid black;
    border-radius: 0.5rem;
    padding: 0.5rem 0.9rem;
    margin-top: 1.5rem;
}

#services  .btn:hover, #portfolio .btn:hover{
background-color: black;
color: white;
transition: all 0.5s ease-in-out;

}


#portfolio{
    margin-top: 10rem;
    text-align: center;
}

#portfolio .row{

    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin:3rem auto 1rem auto;

}

#portfolio h2{
    margin-bottom: 1rem;
    font-size: 2rem;
}

#portfolio .col{
    width: 25%;
    margin: -2px;
}

 #portfolio img{
    width: 100%;
 }

 #portfolio .btn{
    margin-bottom: 4rem;
 }

 #contact , footer{
    background-color: #1E2832;
    color: white;
    text-align: center;
 }

 #contact h2{
    padding: 2.5rem 0 1.5rem 0;
    font-size: 1.8rem;
 }

 #contact p{
    padding-bottom: 1.5rem;
 }

 #contact .row{
    display: flex;
    justify-content: center;
    padding-bottom: 1.4rem;
    gap: 2px;
 }

 input[type="text"], 
 input[type="email"]
 {
    width: 400px;
    height: 40px;
    background-color: #29333C;
    border-style: none;
    border-radius: 6px;
    text-indent: 0.7rem;
    color: white;
 }

 #contact textarea{
    width: 802px;
    height: 140px;
    background-color: #29333C;
    border-style: none;
    border-radius: 6px;
    text-indent: 0.7rem;
    resize: none;
    font-size: 1rem;
    color: white;
    padding: 1rem 0;

}

#contact .submit{
    display: flex;
    justify-content: center;
    padding: 1rem;
    gap: 2px;
}

button{
    background-color: #29333C;
    color: white;
    padding: 0.8rem 1.5rem;
    margin: 0.6rem;
    border: none;
    border-radius: 0.8rem;
    cursor:pointer;
}

footer{
    padding-top: 3rem;
    padding-bottom: 1rem;
}

footer p{
    width: 150px;
    margin: auto;
}


@media(max-width:992px)
{

 #contact textarea{
    width: 502px;
    height: 140px;
    font-size: 1rem;
    color: white;
}


 input[type="text"], 
 input[type="email"]
 {
    width: 250px;   
 }

}

@media(max-width:768px)
{

 #contact textarea{
    width: 302px;
    height: 140px;
    font-size: 1rem;
    color: white;
}


 input[type="text"], 
 input[type="email"]
 {
    width: 150px;   
 }

}