*{
  margin: 0;
  padding: 0;
}
.sidebar{
  background-color: rgb(239, 232, 232);
  width: 20%;
  font-family: 'Times New Roman', Times, serif;
  font-size: 24px;
  height: 100vh;
  
}
.sidebar nav{
  padding: 30px;
}
.sidebar nav li{
  list-style: none;
  padding: 15px 0;
}
.sidebar nav li a{
  text-decoration: none;
  color: black;
}
.main{
  
  width: 90%;
}
.container{
  display: flex;
  
}
.infocontainer{
  /*background-color: green;*/
  margin: 130px auto;
  height: 50vh;
  width: 70vw;
  display: flex;
  justify-content: space-around;
  
}
.devinfo{
  display: flex;
  justify-content: center;
  flex-direction: column;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.hello{
 font-size: 50px;
 padding-right: 100px ;
}
.name{
 font-size: 40px;
 font-weight: bold;
}
.about{
  font-size: 25px;
}
.button{
  margin-top: 30px;
}
.button button{
padding: 7px 12px;
border-radius: 22px;
color: white;
background-color: dodgerblue;
font-weight: bold;
font-size: 14px;
margin: 0 3px;
cursor: pointer;
}
.button button:hover{
  background-color: white;
  color: dodgerblue;
}

  .pic img {
    width: 100px; 
    height: 100px; 
    border-radius: 50%; 
    object-fit: cover; 
    margin-right: 15px; 
    float: right; 
  }
  .contactform{
    padding: 0 30px;
    padding-top: 120px;

  }
  .contactform h1{
    text-align: center;
  }
.contactform .fmain{
  padding-left: 350px;
  padding-top: 30px;
}
.contactform .fmain label{
  font-size: 25px;
  margin-bottom: 5px;
  
  text-align: left;
  width: 100%; 
}
.contactform input[type="text"],
.contactform input[type="email"],
.contactform input[type="tel"] {
  width: 50%;
  padding: 12px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  box-sizing: border-box;
}
.contactform .form-text {
  font-size: 18px;
  color: #888;
  margin-top: 5px;
  text-align: left;
}
.contactform input[type="checkbox"] {
  margin-right: 10px;
}
.contactform button{
  margin-top: 20px;
    padding: 7px 12px;
    border-radius: 16px;
    color: white;
    background-color: dodgerblue;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    }
    .contactform button:hover{
      background-color: white;
      color: dodgerblue;
    }

  

.blogcontainer {
  
  margin: 40px auto;
  padding: 20px;
}

.blogcontainer h1 {
  text-align: center;
  font-size: 32px;
  color: #333;
  font-family: 'Times New Roman', Times, serif;
  margin-bottom: 50px;
  margin-right: 500px;
}

.blogitem {
  margin-bottom: 30px;
  padding: 20px;
}

.blogitem h2 {
  font-size: 24px;
  color: #007BFF;
  margin-bottom: 10px;
  font-family: 'Times New Roman', Times, serif;
}

.blogitem p {
  font-size: 18px;
  color: #555;
  margin-bottom: 10px;
  font-family: 'Times New Roman', Times, serif;
}
.fa-github{
  font-size: 30px;
}
.fa-github:hover {
  color: #000; 
    transform: scale(1.1); }

  



.intocontainer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}


.devinfo {
  padding: 30px;
  font-family: 'Times New Roman', Times, serif;
}

.devinfo h1 {
  font-size: 40px;
  margin-bottom: 20px;
  text-align: center;
}


.devinfo p {
  font-size: 24px; 
  color: #555; 
  line-height: 1.6;
  text-align: justify; 
  margin-bottom: 20px; 
}
.devinfo p br {
  margin: 10px 0;
}





.skill h2 {
  font-size: 32px; 
  text-align: center;
  margin-bottom: 20px; 
  font-family: 'Times New Roman', Times, serif;
}


.skill ul li {
  font-size: 20px; 
  margin-left: 550px;
  padding: 10px; 
  
}
.services {
  background-color: #f9f9f9; 
  padding: 60px 20px; 
  text-align: center; 
}

.services h2 {
  font-size: 36px;
  color: #333;
  margin-bottom: 40px;
  font-family: 'Times New Roman', Times, serif;
}
.service-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  justify-items: center;
}


.service-item {
  background-color: #fff; 
  padding: 30px;
  border-radius: 10px; 
}

.service-item h3 {
  font-size: 28px; 
  color: #007bff;
  margin-bottom: 15px;
  font-family: 'Helvetica', sans-serif;
}

.service-item p {
  font-size: 20px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 20px;
}

nav a:hover {
  color: #007bff; 
  background-color: #fff;

}

.fa-square-facebook{
  font-size: 30px;
  color:#000
}

.fa-instagram{
  font-size: 30px;
  color:#000
}
.fa-linkedin{
  font-size: 30px;
  color:#000
}

a {
  margin: 0 15px; 
  font-size: 30px; 
  color: #333; 
  transition: color 0.3s ease;
}
.iccon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin-right: 150px;
}



/* ===== ADD AT BOTTOM ONLY ===== */

/* Mobile fix */
@media (max-width: 767px) {
  .container {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    height: auto;
  }

  .infocontainer {
    flex-direction: column;
    text-align: center;
  }
}

/* Tablet fix */
@media (min-width: 768px) and (max-width: 1023px) {
  .container {
    flex-direction: row;
  }

  .sidebar {
    width: 220px;
  }
}