body{
    padding: 0px;
    margin: 0px;  
    font-family: Arial, Helvetica, sans-serif;
    overflow-x: hidden;
   }   
a:link{
  color:white;
}
nav{
      height: auto;
      padding: 1em;
     
        }
        /*#nav1{
          background-color: white;
          height: 100px;
          top:0;
        }*/
        
        #nav2{
          top:0;
          bottom:0;
          margin-top:-10px;
          background-color:#fff;
          color: white;
          width:98.95%;
          height: 50px;
          padding-top: 25px;
          padding-bottom: 30px;
          
}
        #nav2 ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
             margin-left: 475px;
            }

        #nav2 li {
            float: left ;
            display: inline;
            margin-left:20px;


        }

        #nav2 li a {
            display: block;
            color: #2d2d2d;
            text-align: center;
            padding: 20px 16px;
            text-decoration: none;
            font-size: 18px;
        }
        #nav2 .topnav-right {
  float: right;
  margin-right:15px;
 margin-top:6px;
    height: 100%;
 /* margin-right: 1%;*/
}

#nav2 .bttn{

    background-color: #359fb0;
    color: white;
    height:40px;
    width:95px;

}
#nav2 .bttn:hover{
   
  /*background-color: #555;*/
  background: #2b3532;
  border: 1px solid #fff;
  color: #fff;
  cursor: pointer;
  box-shadow: 0px 0px 6px 4px rgba(230,196,196,0.3);

}
#nav2 a:hover {
    color: #02b8dd;
}
 .container{
      width: 90%;
      margin: auto;
      overflow: hidden;
    }
    /* contact form css */


    #contact-section{
      background: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.9)),url(https://raw.githubusercontent.com/MujtabaOfficial/My-youtube-channel-TWD-tutorials-code/master/My%20Youtube%20channel%20TWD%20tutorials%20code/Responsive%20HTML5%20form/imgs/contact.jpg);
      background-size: cover;
      background-position: center;
      height: 100%;
      width: 100% ;
      padding-bottom: 15%;
    }

    #contact-section .container h2{
      text-align: right;
      padding-right: 23%;
      text-decoration: underline;
      text-decoration-color:red; 
      text-underline-position: under;
      color: rgb(238, 235, 235);
      letter-spacing: 2px;
    }

    #contact-section .container p{
      text-align:right; 
      width: 85%; 
      margin-left: auto;
       margin-right: auto; 
       padding-bottom: 3%;
       color: #fff;
       letter-spacing:3px;
    }

    .contact-form i.fa{
       color: red; 
       color: #fff; 
      font-size: 22px; 
      padding: 3%;
      background-color: none;
      border-radius: 80%;
      margin: 2%;
       border: 2px solid #fff; 
      cursor: pointer;
      border:2px solid rgb(190, 190, 190);
      color: rgb(190, 190, 190);
    }
    
    .contact-form i.fa:hover{
      cursor: pointer;
      border:2px solid white;
      color: white;
    }
     
      .contact-form{
        display: grid;
        grid-template-columns: auto auto;
         }
      
      .form-info{
        font-size: 16px;
        font-style: italic;
        color: white;
        letter-spacing: 2px;
      }
      input{
        padding: 10px;
        margin:10px;
        width: 80%;
        background-color:rgba(136, 133, 133, 0.5);
        color: white;
        border: none;
        outline:none;
      }

      input::placeholder{
        color: white;
      }
    
       textarea{
      padding: 10px;
      margin: 10px;     
      width: 80%;
      background-color:rgba(136, 133, 133, 0.5);
      color: white;
      border: none;
      outline:none;
     }
     textarea::placeholder{
       color: white;
     }
     
      
    
      .submit{
      width: 40%;
      background: none;
      padding: 4px;
      outline: none;
      border: 1px solid #fff;
      color: #fff; 
      font-size: 13px;
      font-weight: bold;
      letter-spacing: 2px;
      height: 40px;
      text-align: center;
      cursor: pointer;
      letter-spacing: 2px;
      margin-top: 5%;
      margin-left: 25%;
      border:2px solid rgb(190, 190, 190);
      color: rgb(190, 190, 190);
     }

     .submit:hover{
      border: 1px solid #fff;
      color: #fff;
      cursor: pointer;
      box-shadow: 0px 0px 6px 4px rgba(230,196,196,0.3);
     }
}

  .line{
    margin-top: 10px;
    margin-bottom: 10px;
    width:72%;
    border-bottom: 2px solid #000000;
  }
  .horizontal-list{
    list-style: none;
    padding-left: 0px;
    margin: 0px;
  }
  .horizontal-list li{
    display: inline-block;
    margin: 10px 18px 8px 38px;
  }
  /*.text-center{
    text-align: center;
  }*/
  .social-icons li a i{
    padding: 10px;
    font-size: 1rem;
    color: #dfecf7;
    border-radius: 50%;
  }
  .social-icons li a i:hover{
    box-shadow: 0px 0px 6px 4px rgba(230,196,196,0.3);
  }
  /**, *:before, *:after {
box-sizing: border-box;
}*/

/*body {
font-family: "Montserrat", sans-serif;
margin: 0;
display: grid;
font-size: 15px;
color: red;
}*/
/*.footer header p {
padding: 75px;
text-align: center;
color: black;
text-transform: uppercase;
font-size: 65px;
font-weight: 700;
}
.footer {
display: flex;
flex-flow: row wrap;
padding: 20px;
color: white;
background-color: #2d2d2d;
flex-wrap: wrap;
}

.footer > * {
flex:  1 100%;
color: white;
}

.l-footer {
margin-right:3px;
margin-bottom: 2em;
padding-left: 20px;
color: white;
}

.footer h2 {
font-weight: 400;
font-size: 15px;
color: white;
}

.footer ul {
list-style: none;
padding-left: 0;
color: white;;
}

.footer li {
line-height: 2em;
color: white;
}

.footer a {
text-decoration: none;
color: white;

}

.footer .r-footer {
display: flex;
flex-flow: row wrap;
color: white;
}

.footer .r-footer > * {
flex: 1 50%;
margin-right: 1.25em;
color: white;

}

.footer .box a {
color: #999;
color: white;
}

.footer .h-box {
column-count: 2;
column-gap: 1.25em;
}

.footer .b-footer {
text-align: center;
color:white;
padding-top: 50px;
}

.footer .l-footer p {
padding-right: 20%;
color: white;
}   

@media screen and (min-width: 600px) {
.footer .r-footer > * {
flex: 1;
color: white;
margin-left: 60px;
}

.footer .features {
flex-grow: 3;
color: white;
padding-left: -100px;
}
.footer .box-h-box{
  margin-left: 50px;
  margin-left:0px;
}
.footer .box1-h-box1{
  margin-left: 50px;
margin-left:-20px;
margin-top: 8%;
}

.footer .l-footer {
flex: 1 0px;
color: white;
margin-right: 2px;
}
.footer .social-icons li a i{
    padding: 10px;
    margin-left: 10px;
    font-size: 1rem;
    color: #dfecf7;
    border-radius: 50%;
  }
.footer  .social-icons li a i:hover{
    box-shadow: 0px 0px 6px 4px rgba(230,196,196,0.3);
      padding-left: -10px;
  }
.footer  .horizontal-list li{
    display: inline;
    margin: 30px -10px 1px 3px;

  }
.footer  .horizontal-list{
    list-style: none;
    padding-left: -10px;
    margin: 0px; 
  }
 .footer .Input[placeholder]{
  /*flex:4;*/
    /*height:0px;
    width:230px;
    padding: 5%;*/
    /*margin-left:700px;*/
  /*}
.footer  .submit{
      width: 70%;
      background-color:#359fb0;
      padding: 4px;
      outline: none;
      border: 1px solid #fff;
      color:white; 
      font-size: 13px;
      font-weight: bold;
      letter-spacing: 2px;
      height: 30px;
      text-align: center;
      cursor: pointer;
      letter-spacing: 2px;
      margin-top: 5%;
      margin-left: 17%;
      border:2px solid rgb(190, 190, 190);
      color: white;
     }
.footer .r-footer {
flex: 2 0px;
color: white;
margin-right: 220px;
margin-left: -45px;
}
}*/
#logo{
  position: absolute;
  left:0;
  top:0;
  margin-top:-1rem;
}

#logo img{
  height:5.5rem;
  width:6rem;
}