/*Base styles*/
body {
    font-family: Georgia,serif;
    line-height: 1.6;
    color: antiquewhite;
    background-color: rgb(95, 93, 93);
    margin: 0 50px;
    padding: 4;
}
/*header*/
header {
    background-color: rgb(159, 157, 161);
    color: white;
    padding: 20px;
    text-align:center;
}
header h1{
    margin:0;
    font-size: 28px
}



/*navigation menu*/
nav{
    background-color:rgb(238, 46, 46);
    margin: 15px;
    font-size: 18px;
    padding: 12px;
    text-align: center;
}


nav a{
    color: cornsilk;
    text-decoration: rgb(162, 205, 240);
    margin: 15px;
    font-size: 14px;
}
nav a:hover{
    color: darkolivegreen;
}

/*Hero-section*/
.hero-section{
    background-color: rgb(238, 205, 20);
    color: white;
    text-align: center;
    padding: 50px;
    border-radius: 10px;
}
.hero-section h2{
    font-size: 32px;
    margin-bottom: 15px;
}
.hero-section p{
    font-size: 18px;
    max-width:1000px;
    margin: auto;
}
/*Button style*/
.hero-section{
    background-color: tomato;
    color: rgb(230, 74, 74);
    padding:12px;
    text-decoration: none;
    border-radius: 24px;
    font-size: 18px;
    display: inline-block;
}
.hero-section a:hover{
    background-color: yellow;
}
/*General section styling*/
section{
    max-width:1000px;
    margin: 030px;
    padding: 20px ;
}

/*card style*/
.my-goal,.services,.who-iam,.background,.skills
{
    background-color: #74a3e0;
    padding: 25px;
    border-radius: 10px;
    border: 1px solid;
    margin-bottom: 25px;
}
/*what i do section*/
.services h2{
    color: turquoise;
    margin-bottom: 20px;
}
.services li{
    background-color: tomato;
    padding: 12px 20px;
    margin-bottom: 10px;
    border-radius: 6px;
    list-style-position: inside;
}
/*page titleS*/
.page{
    text-align:center;
    color: #1e3a5f;
    margin: 30px;
    }
        /*.Education table*/
        table{
            width: 100%;
            border-collapse:collapse;
            margin-top: 15px;
        }
        th,td{
            border: 1px solid #ccc;
            text-align: left;

        }
th{
background-color: #1e5f46;
color: rgb(99, 140, 187);
}
/*skills section*/
.skills ul{
    list-style-type: square;
/*simple square bullets*/
}
.skills li{
    padding: 8px 0;
    font-size: 18px;
}
/*contact form*/
.contact-form{
    max-width:  450px;px;
    margin: auto;
    background-color:white ;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid gray;
}
.contact-form label{
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    
}
   .contact-form input,
    .contact-form textarea{
      width: 100%;
      padding: 10px 20px;
      background-color: green;
      color: white;
      border: none;
       margin-bottom: 15px;
     border: 1px solid #ccc;
      border-radius: 6px;
       font-size: 16px;
}
.contact-form input["type=submit"]
{
    .background-color:#1e3a5f;
    color: white;
    border:none;
    padding: 12px;
    font-size 18px;
    cursor:pointer;
    boader-radius:6px;

}
.contact-form
input[type="'submint"]:hover
{
    background: color #2c5282;
}
/*sidebar(contact information)*/
aside{
    max-width: 1001px;
    margin: 30px auto;
    background-color: #ecf0ee;
    color: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}
aside p{
    margin: 8px 0;
    font-size: 18px;
}
/*footer*/
footer{
    background-color: #1e3a5f;
    color: #333;
    text-align: center;
    padding: 20px;
    margin-top: 40px;
}
/*======================= RESPONSIVE(make it work on phones)========*/
  @ media(max-width: 768px){
      nav a{
          display:block;
          margin: 10px 0;
      }
      .hero-section{
          background image
          -image: url('image.jpg');
          -size
          margin: 10px;
          padding: 30px 15px;
      }
  }