style.css

*{
    margin: 0;
    padding: 0;
}
body{
    min-height: 100vh;
    background-image: url(image.png);
    background-size: cover;
    background-position: center;
    background-attachment: fixed; 
}
 nav{
    margin-top: 5%;
   }
.nvbaar{
    display: flex;
    justify-content:right;
   
    height:auto;
    width:auto;
}
.nvbaar h1{
   margin-right: 30%;
   font-family: Georgia, 'Times New Roman', Times, serif;
   font-size:200%;
   font-style: oblique;
   color: bisque;
}
.nvbaar li{
    margin-right:5%;
    list-style: none;
   
}
.nvbaar li a{
    text-decoration: none;
    font-size:200%;
    font-style: italic;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color:white;
}

main {
    display: flex;
    justify-content: space-between;
    margin:4%;
  
    color:rgb(3, 3, 3);
}

.left{
    margin-left:10%;
    width:80%;
    background-color: whitesmoke;
    border-radius: 5%;
}
.left h1{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 250%;
    text-align: center;
}
.left p{
    font-size:170%;
    line-height: 1.5;
    font-family: Georgia, 'Times New Roman', Times, serif;
    justify-content: space-around;
    text-align: justify;
 }
img{
    margin-left:50%;
   width:50%;
  border-radius:50%;
 }
 .secpg{
    display: flex;
    margin:4%;
 }
 .exp{
    background-color:#BFBFBF ;
    height:150%;
    width:50%;
    font-family:Arial, Helvetica, sans-serif;
    margin-right: 4%;
    line-height: 1.5;
    border-radius: 4%;
    text-align: center;
 }
 .plat{
    background-color: #BFBFBF;
    border-radius: 4%;
    height:200%;
    width:50%;
    font-family:Arial, Helvetica, sans-serif;
    text-align: center;
    line-height: 2.14;
 }
.plat h1{
    text-align: center;
    font-weight: 900;
    font-style: oblique;
   
 }
 .exp h1{
    text-align: center;
    font-weight: 900;
    font-style: oblique;
 }
 .thirdpg {
    background-color:wheat;
    margin: 4%;
    padding: 20px;
    height: auto;
    width: 30%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 4%;
    margin-left:35%;
    /* Centering content */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .thirdpg h2 {
    text-align: center;
  }
  
  label {
    display: block;
    margin-top: 15px;
    text-align: center;
    font-size: 16px;
  }
  
  input[type="text"],
  input[type="email"],
  textarea {
    width: 80%; /* Controls the width of input fields */
    padding: 8px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: center;
  }
  
  .thirdpg button {
    width: 80%;
    padding: 10px;
    margin-top: 20px;
    background-color: #333;
    color: white;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
  }
  
  .thirdpg button:hover {
    background-color: #555;
  }
  
  /* Responsive adjustments for smaller screens */
  @media (max-width: 768px) {
    .thirdpg {
      width: 80%; /* Reduce width on tablets and smaller devices */
    }
  }
  
  @media (max-width: 480px) {
    .thirdpg {
      width: 95%; /* Further reduce width on mobile devices */
    }
  
    input[type="text"],
    input[type="email"],
    textarea,
    .thirdpg button {
      width: 90%; /* Increase input field width on smaller screens */
    }
  }