*{
margin: 0;
padding: 0;
box-sizing: border-box;    
}
body{
    background-color: #EEE;
  font-family :sans-serif;

}
.container{
  width: 1000px;
  background-color: #E4F9F5;
  margin: 0 auto;
  padding: 15px;
}
.profile-photo{
  width: 100px;
  height: 100px;
  border: 3px solid white;
  border-radius: 50%;
  float: left;
}
.header-bio{
  float: left;
  padding: 15px;
}
h1,h2,h3,h4,h5{
  color:#11999e ;
}
.header-contact{
  float: right;
  padding: 15px;
}
.header-contact a{
  text-decoration: none;
  color: teal;
  font-weight: bold;
}
.header-contact a:hover{
background-color:tan;
color: black;
 }
 .div-clear{
  clear: both;
 }
 hr{
  border: 1px solid black;
  width: 100%;
  margin: 20px auto;
  /* personal section start */
 }
.personal-section {
  margin-top: 30px;
}
.Work-section{
margin-top: 30px;
}
.Education-Section{
  margin-top: 30px;
}
  
  .Point-Section{
  margin-top: 30px;
  }

  .Language-section{
     margin-top: 30px;
     margin-bottom: 15px;
  }
.content {
  overflow: hidden;
}

.left-div {
  float: left;
  width: 40%;
}

.right-div {
  float: right;
  width: 60%;
}

.right-div p {
  margin-bottom: 8px;
  font-size: 16px;
}

.right-div strong {
  color: #11999e;
}
.common-hr{
  border: solid black 1px;
  border-bottom: none;
  width: 100%;
  margin:15px auto ;
}


  /* personal section end */

  /* educational qualification table */

    table {
      width: 100%;
      border-collapse: collapse;
      background-color:#E4F9F5;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }

    th, td {
      border: 1px solid#11999e;
      padding: 12px;
      text-align: center;
    }

    th {
      background-color:#11999e;
      color: white;
    }

    tr:nth-child(even) {
      background-color: #EEE;
    }
.footer{
  background-color:#11999e ;
  text-align: center;
  padding: 10px;
  color: #EEE;
}
.footer a{
  text-decoration: none;
  margin: 10px;
  color: white;
}
.footer a:hover{
  background-color:yellowgreen;
  color: black;
  font-weight: bold;
  border-radius: 5%;
}
.footer p{
  padding: 10px;
  color: black;
  font-weight: bold;
}
.right-div {
  flex: 3 1 500px;
  padding: 10px;
}

.skill {
  margin-bottom: 15px;
}

.skill-name {
  margin-bottom: 8px;
  font-weight: bold;
  color: #444;
}

.progress {
  width: 100%;
  background: #ddd;
  border-radius: 25px;
  overflow: hidden;
  height: 12px;
}

.progress-bar {
  height: 100%;
  text-align: right;
  padding-right: 10px;
  font-size: 10px;
  line-height: 12px;
  border-radius: 25px;
  white-space: nowrap;
  color: white;
}

/* Individual skill colors */
.html    { width: 90%; background: #e34c26; }
.css     { width: 70%; background: #264de4; }
.js      { width: 60%; background: #f0db4f; color: #000; }
.php     { width: 75%; background: #787cb5; }
.python  { width: 30%; background: #306998; }

/* Clearfix if needed */
.div-clear {
  clear: both;
}

/* Responsive for Tablets (width: 768px - 991px) */
@media only screen and (max-width: 991px) {
  .container {
    width: 95%;
    padding: 10px;
  }

  .left-div,
  .right-div {
    float: none;
    width: 100%;
  }

  .profile-photo {
    display: block;
    margin: 0 auto;
    float: none;
  }

  .header-bio,
  .header-contact {
    float: none;
    text-align: center;
    padding: 10px 0;
  }

  .header-contact a {
    display: inline-block;
    margin: 5px 10px;
  }
}

/* Responsive for Mobile (width: 0px - 767px) */
@media only screen and (max-width: 767px) {
  .container {
    width: 95%;
    padding: 10px;
  }

  .left-div,
  .right-div {
    float: none;
    width: 100%;
  }

  .profile-photo {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    display: block;
    float: none;
  }

  .header-bio,
  .header-contact {
    float: none;
    text-align: center;
    padding: 10px 0;
  }

  .header-contact a {
    display: block;
    margin: 5px 0;
  }

  table, th, td {
    font-size: 14px;
    padding: 8px;
  }

  h1, h2, {
    font-size: 20px;
  }
 /* progressbar responsive start */

/* Tablet Responsive: 768px - 991px */
 /* Mobile */
  /* Responsive Design */
@media (max-width: 600px) {
  .content {
    flex-direction: column;
  }
  .left-div,
  .right-div {
    flex: 1 1 100%;
    padding: 10px 0;
  }
  .progress-bar {
    font-size: 9px;
    padding-right: 5px;
  }
}


  .footer {
    padding: 8px;
  }

  .footer a {
    display: block;
    margin: 5px 0;
  }
}