/*=============================================================
    Authour URL: www.designbootstrap.com
    
    http://www.designbootstrap.com/

    License: MIT

    http://opensource.org/licenses/MIT

    100% Free To use For Personal And Commercial Use.

    IN EXCHANGE JUST TELL PEOPLE ABOUT THIS WEBSITE
   
========================================================  */


/* =============================================================
   GENERAL STYLES
 ============================================================ */

@import url(http://fonts.googleapis.com/css?family=Roboto); /* FREE GOOGLE FONT */

html,body {
    top:0;
    left:0;
    width: 100%;
    height: 100vh;
}
body {
            background: linear-gradient(135deg, #0f4c75 0%, #1b262c 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 30px 20px;
            color: #fff;
            position: relative;
        }
    //****body {
    background-image: url('intro3.gif');
	background-size: cover;
	background-position:center;
	font-family: 'Droid Arabic Kufi', serif;
	margin: 10px auto;
	footer {
	    bottom: 0px;
	}***//
	container {
	top:0;
    left:0;
    width: 100%;
    height: 70%vh;
	}
</style>
    	<style>
.containzer{
  background-color: none;
  opacity: 100%;
  width: 100%;
  background-size: cover;
  padding: 0px auto;
  text-align: center;
}
.containzer p {
  max-width: 960px;
  margin: 0px auto;
  font-size: 18px;
  font-weight: 300;
  opacity: 100%;
}
.email-box{
  height: 28px;
  opacity: 100%;
  justify-content: center;
  display: flex; /*its better to use inline-flex*/
}
.email-box i{
  background: gold;
  border: .6px solid green;
  color: green;
  width: 100px;
  left: 6px;
  text-transform: uppercase;
  opacity: 100%;
}
.tbox,.btn{
  top: -80px;
  background: gold;
  border: .6px solid green;
  color: green;
  padding: 0px;
  text-transform: uppercase;
}
.tbox{
  width: 70px;
  transition: 0.5s;
  opacity: 100%;
}
.email-box:hover > .tbox,.tbox:focus{
  width: 70%;
  padding: 0px;
  border: none;
  color: green;
}
.btn{
  top:-15px;
  left:12px;
  background: gold;
  border: .6px solid green;
  color: green;
  padding: 3px;
  text-transform: uppercase;
  opacity: 100%;
  cursor: pointer;
}
.ez{
            background: linear-gradient(175deg, gray 0%, lightgray 90%);
            min-height: 15px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            max-width: 650px;
            position: inline-flex;

}
.ez hover {
            background: linear-gradient(270deg, #0ff75 0%, #1c262c 100%);
            min-height: 17px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 3px 2px;
            color: #fff;
            position: inline-flex;

}
.btn:hover{
  background: green;
  color:#fff;
}
.payment-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    padding: 20px;
}

.paypal-button-wrapper {
    width: 100%;
    max-width: 400px;
    text-align: center;
    background: #f9f9f9;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.paypal-button-wrapper h3 {
    margin-bottom: 20px;
    color: #333;
}

.note {
    margin-top: 15px;
    font-size: 12px;
    color: #666;
}
    
 /*==============================================
    Ezzat  STYLES    
 =============================================*/   


    .textbox {
    top: 50%;
    left: 50%;
    transform: translate(2%, 0%);
    font-family: 'Droid Arabic Kufi', serif;
    line-height: 220%;
    }
    .login-box img {
    width:60px;
    height: 60px;
    }
    .login h4 {
    font-size: 18px;
    color: #fff;
    background: red;
    text-transform: center;
    }
    .login-box a {
    width:16%;
    padding: 5px;
    font-family: 'Droid Arabic Kufi', serif;
    line-height: 220%;
    color:blue;
    font-size:76%;
    text-transform: center;
    }
    .login-box:hover a {
    color:red;
    }
    .textbox:hover i {
    font-size: 20px;
    color: #09AD85;
    }
    .textbox input {
    width: 78%;
    padding: 5px;
    font-size: 20px;
    border: solid 1px #09AD85;
    border-radius: 25px;
    color: gray;
    }
    .textbox:hover input {
    border: solid 2px #09AD85;
    font-size: 22px;
    border-radius: 25px;
    color: green;
    }
    .textbox p {
    font-family: 'Droid Arabic Kufi', serif;
    line-height: 220%;
    color:blue;
    font-size:76%;
    text-transform: center;
    }
    .textbox lable {
    font-family: 'Droid Arabic Kufi', serif;
    line-height: 220%;
    color: blue;
    font-size:76%;
    text-transform: center;
    }
    .textbox a {
    font-family: 'Droid Arabic Kufi', serif;
    line-height: 220%;
    color: blue;
    font-size:76%;
    text-transform: center;
    }
    .textbox a {
    font-family: 'Droid Arabic Kufi', serif;
    line-height: 220%;
    color:blue;
    font-size:76%;
    text-transform: center;
    }
    .textbox:hover a {
    font-size: 18px;
    color: red;
    }
    .textbox h5 {
    font-size: 16px;
    color: #fff;
    background: red;
    text-transform: center;
    }
    .textbox h4 {
    font-size: 18px;
    color: #fff;
    background: red;
    text-transform: center;
    }
    .textbox:hover h5 {
    font-size: 18px;
    color: red;
    background: #09AD85;
    }
    .message {
    font-size: 15px;
    color: #fff;
    text-transform: bold;
    background: #09AD85;
        
    }