.portfolio{
  display: flex;
 flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
}

.conteinerOne, .headOne{
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 45vh;
  flex:0.5;
  padding: 15px;
}



.conteinerTwo, .projects{
display: flex;
justify-content: center;

}

.headTwo{
display: flex;
flex-direction: column;
justify-content: center;
background-color: #ecac5d;
flex: 1;
padding: 15px;
}

.heading{
display: flex;
justify-content: center;
align-items: center;
color:#fff9b2;
font-family: "Oswald", sans-serif;

}

h1{
color:#3f0713;
font-size: 70px;
font-family: "Oswald", sans-serif;
}

h2{
color:#3f0713;
font-size: 60px;
margin-bottom: 150px;
margin-right: 100px;
font-family: "Oswald", sans-serif;
}

h3{
margin-bottom: 100px;
font-size: 55px;
color:#3f0713;
font-family: "Oswald", sans-serif;
}


h4{
font-size: 50px;
font-family: "Oswald", sans-serif;
position: absolute;
top: 15px;
left: 40px;
backdrop-filter: blur(6px);
color:#3f0713;
font-size: 0;
}

.certificates{
display: flex;
justify-content:center;
color:#fff9b2;
font-family: "Oswald", sans-serif;
}



label{
font-size: 25px;
color:#3f0713;
font-family: "Oswald", sans-serif;
flex: 1;
}

.text-input{
background-color:white;
border: none;
padding: 12px 20px;
color: #ecac5d;
flex:1;
}

.btn{
font-family: "Oswald", sans-serif;
font-size: 30px;
color:#3f0713;
background-color: #fff9b2;
flex: 1;
}

.contact{
margin-left: 600px;
margin-top: 100px;
height: 100%;
}

.foot{
display: flex;
justify-content: center;
}

.container{
display: flex;

}

.item{
height: 75vh;
width: 25vh;
background-size: cover;
background-position: center;
font-family: "Oswald", sans-serif;
margin: 5px;
position: relative;
}

.par{
display: flex;
flex-direction: column;
position: absolute;
top: 100px;
left: 40px;
backdrop-filter: blur(8px);
color:#3f0713;
font-size: 0;
font-family: "Oswald", sans-serif;
text-transform: uppercase;
}

.look{
position: absolute;
bottom: 40px;
left: 40px;
backdrop-filter: blur(8px);
border-radius: 50px;
border: none;
padding: 20px;
opacity: 0.6;
font-weight: bolder;
}

.look:hover{
background: linear-gradient(to right, #3f0713);
background-color:dodgerblue;
}

a{
text-decoration: none;
color:#3f0713;
font-size: 25px;
font-family: "Oswald", sans-serif;
}

.selected{
flex: 4;
}

.selected h4 {
font-size: 40px;
transition: all 1s ease-in;
}

.selected .par {
font-size: 20px;
transition: all 1s ease-in;
}

.one{
  background-image: url('https://cdn.glitch.global/cb7c97ef-9958-4da4-8e54-8e2b49331684/%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202024-05-31%20091345.png?v=1717139865164');
}

.two{
  background-image: url('https://cdn.glitch.global/cb7c97ef-9958-4da4-8e54-8e2b49331684/pictures2.png?v=1715868505147');
}

.three {
  background-image: url('https://cdn.glitch.global/cb7c97ef-9958-4da4-8e54-8e2b49331684/pictures1.jpg?v=1715868491618');
}

.four{
  background-image: url('https://cdn.glitch.global/cb7c97ef-9958-4da4-8e54-8e2b49331684/pictures4.png?v=1715868528606');
}

.five{
background-image: url('https://cdn.glitch.global/cb7c97ef-9958-4da4-8e54-8e2b49331684/%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202024-05-27%20113106.png?v=1716802700270');
}

.six{
background-image: url('https://cdn.glitch.global/cb7c97ef-9958-4da4-8e54-8e2b49331684/%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202024-05-28%20100635.png?v=1716883861568');
}

@media all and (max-width: 500px){
  .conteinerOne{
    display: flex;
    flex-direction: column;
  }
  .contact{
    margin-left: 30px;
    margin-top: 100px;
    height: 50%;

    }
    .headOne{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 80px;
    height: 25vh;
    flex:0.5;
    padding: 15px;
    }
  h1{
    flex-direction: column;
    font-size: 45px;
  }
   h2{
    flex-direction: column;
    font-size: 35px;
    margin-bottom: 200px;  
  }
  h3{
    font-size: 30px;
    background-position: center;
    margin-bottom: 30px;
  }
  h4{
    font-size: 30px;
  }
  .head, .heading{
    justify-content: center;
  }
  .par{
  font-size: 20px;
   padding: 5px;
  }
  .container{
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .item{
    height: 50vh;
    width: 50vh;
  }
  btn{
    width: 10px;
  }
}