*{
    margin: 0;
    padding: 0;
    box-sizing:border-box;
    font-family: 'DaxlinePro';
    }
:root{
       --yellow:#fdd401; 
       --black:#000000;
       --white:#ffffff;
    }
    @font-face { font-family: DaxlinePro;  
       
        src:url('../fonts/DaxlinePro.ttf');
    } 
    /* bold version */
    @font-face {
      font-family: 'DaxlinePro';
      font-weight: bold;
      font-weight: 500;
      src:url('../fonts/DaxlineProBold.ttf');
     
    }
   
    .header{
         width: 100%;
        height: 100vh;
       /*  position: relative;
        background-image: linear-gradient(rgba(186, 224, 48,0.8),rgba(53, 194, 42,0.5)),url(../images/banner.png);
        background-position: center;
       background-size: cover;
      overflow-x: hidden; */
       overflow: hidden;
       margin:0 auto;
        }
        .css3ad-first, .css3ad-second, .css3ad-third, .css3ad-fourth, .css3ad-fifth {
            width: 100%;
            height: 100vh;
             position: absolute;
             overflow-x: hidden;
         top:0px;
            /* margin-top: 100px; */
            cursor:pointer;
            -webkit-transition: all 0s linear;
            transition: all 0s linear;   /*  */
            }
            .css3ad-first {
                background-image: linear-gradient(rgba(225, 232, 49,0.8),rgba(42, 192, 42,0.5)),url(../images/banner.png);
                background-position: center;
               background-size: cover;
              overflow-x: hidden;
            animation: cycle 25s linear infinite;
            -webkit-animation: cycle 25s linear infinite;
            }
            .css3ad-second {
        
            background-image: linear-gradient(rgba(186, 224, 48,0.8),rgba(53, 194, 42,0.5)),url(../images/bannerslider1.png);
            background-position: center;
           background-size: cover;
          overflow-x: hidden;
            animation: cycletwo 25s linear infinite;
            -webkit-animation: cycletwo 25s linear infinite;
            }
            .css3ad-third {
                background-image: linear-gradient(rgba(186, 224, 48,0.8),rgba(53, 194, 42,0.5)),url(../images/bannerslider2.png);
                background-position: center;
               background-size: cover;
              overflow-x: hidden;
            animation: cyclethree 25s linear infinite;
            -webkit-animation: cyclethree 25s linear infinite;
            }
            .css3ad-fourth {

           background-image: linear-gradient(rgba(186, 224, 48,0.8),rgba(53, 194, 42,0.5)),url(../images/bannerslider3.png);
            background-position: center;
           background-size: cover;
          overflow-x: hidden;
            -webkit-animation: cyclefour 25s linear infinite;
            }
            /* .css3ad-fifth {
            background:url("5.jpg") no-repeat;
            animation: cyclefive 25s linear infinite;
            -webkit-animation: cyclefive 25s linear infinite;
            } */
            @-webkit-keyframes cycle {
               0%  { top: 0px;  z-index: -1;} /* When you start the slide, the first image is already visible */
               4%  { top: 0px;z-index: -1; } /* Original Position */
               16% { top: 0px; opacity:1; z-index: -1; } /* From 4% to 16 % = for 3 seconds the image is visible */
               21% { top: 0px; opacity: 0; z-index: -1; } /* Return to Original Position */
               92% { top: 0px; opacity: 0; z-index: -1; }
               96% { top: 0px; opacity: 0; z-index: -1; } /* From 96% to 100% = for 1 second enter image*/
               100%{ top: 0px; opacity: 1; z-index: -1;}
            }
            @-webkit-keyframes cycletwo {
               0%  { top: 0px; opacity: 0;z-index: -1; } /* Original Position */
               16% { top: 0px; opacity: 0;z-index: -1; }/* Starts moving after 16% to this position */
               20% { top: 0px; opacity: 1;z-index: -1; }
               24% { top: 0px; opacity: 1; z-index: -1;}  /* From 20% to 24% = for 1 second enter image*/
               36% { top: 0px; opacity: 1; z-index: -1; }   /* From 24% to 36 % = for 3 seconds the image is visible */
               41% { top: 0px; opacity: 0; z-index: -1; }   /* Return to Original Position */
               100%{ top: 0px; opacity: 0; z-index: -1; }
            }
            
            @-webkit-keyframes cyclethree {
               0%  { top: 0px; opacity: 0;z-index: -1; }
               36% { top: 0px; opacity: 0;z-index: -1; }
               40% { top: 0px; opacity: 1;z-index: -1; }
               44% { top: 0px; opacity: 1; z-index:-1;}
               56% { top: 0px; opacity: 1;z-index: -1; }
               61% { top: 0px; opacity: 0; z-index: -1; }
               100%{ top: 0px; opacity: 0; z-index: -1; }
            }
            
            @-webkit-keyframes cyclefour {
               0%  { top: 0px; opacity: 0;z-index: -1; }
               56% { top: 0px; opacity: 0; z-index: -1;}
               60% { top: 0px; opacity: 1;z-index: -1; }
               64% { top: 0px; opacity: 1; z-index:-1}
               76% { top: 0px; opacity: 1; z-index: -1; }
               81% { top: 0px; z-index: -1; z-index: -1;}
               100%{ top: 0px; z-index: -1;z-index: -1; }
            }
            @-webkit-keyframes cyclefive {
               0%  { top: 0px; opacity: 0;z-index: -1; }
               76% { top: 0px; opacity: 0;z-index: -1; }
               80% { top: 0px; opacity: 1; z-index: -1;}
               84% { top: 0px; opacity: 1; z-index:-1;}
               96% { top: 0px; opacity: 1; z-index: -1; }
            }
        .vatpaylogin{
            width: 100%;
            height: 100vh;
            background-image: linear-gradient(rgba(186, 224, 48,0.8),rgba(53, 194, 42,0.5)),url(../images/slide.png);
            background-position: center;
           background-size: cover;
           overflow-x: hidden;
            }
   nav{
width:100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1px 8%;
background:var(--white);
transition: background 1s;
   }
   nav .logo{
       display: flex;
       align-items: center;
       font-size: 26px;
       font-weight: 600;
       color: var(--black);
   }
   nav .logo img{

width: 52px;
margin-right: 10px;

   }
   nav .vatlinks{
    display: inline-block;
    list-style: none;
    margin: 10px 20px;

   }
   nav .vatlinks a{
    text-decoration: none;
   }
   nav ul li{
       display: inline-block;
       list-style: none;
       margin: 10px 20px;
   }

   nav ul li a{
       text-decoration: none;
       color: var(--black);
       font-weight: 500;
   }

  /*  nav:hover{
    background: rgba(197, 226, 48,0.9);
   background: linear-gradient(rgba(186, 224, 48,0.6)); 
   background:#E1E831;
   color: var(--white);
   }
   nav:hover .logo{
    color: var(--white);

   }
   nav:HOVER ul li a{
    text-decoration: none;
    color: var(--white);
    font-weight: 500;
}*/
.content{
    margin-top: 6%;
    margin-bottom: 6%;
   
    color: var(--white);

}
/*Added by Mustapha*/
.contentForRegister {
    margin-top: 2%;
    margin-left: 8%;
    color: var(--white);
}

.content h1{
    font-size: 70px;
    line-height: 100px;
    font-weight: 500;
}
.content p{
max-width: 500px;
line-height: 28px;
opacity: 0;

}
.links{
    margin-top: 30px;
    opacity: 0;
}
.links a{
    color: var(--black);
    text-decoration: none;
    display: inline-block;
}
/*
.links a{
    color: var(--white);
    text-decoration: none;
    display: inline-block;
}*/
 .btnvat{
    font-size: 14px;
    border: 2px solid #93d62a;
    padding: 5px 20px;
    color:#93d62a ;
    border-radius: 10px;
} 
.btnvat2{
    font-size: 14px;
    border: 2px solid #2EC029;
    padding: 5px 20px;
    color: var(--white);
    background-color: #2EC029;
    border-radius: 10px;
} 
.btn{

    padding: 10px 35px;
    border-radius: 10px;
    color: #141414;
    font-weight: 500;
    background-color: #F4EE34;
}
.slide-left{
    animation: vatpay 1s linear forwards;
}
@keyframes vatpay{
0%{

    transform: translate(100px);
    opacity: 0;
}
100%{

    transform: translate(0px);
    opacity: 1;
}

}
p.slide-left{
 animation-delay: 1s;

}
.links.slide-left{
    animation-delay: 2s;
}
.footer p{
    font-family:DaxlinePro ;
    font-weight: normal; 
    color: var(--white);
    font-size: 1em; 
}
 .footer{
     background-color:#141414 ;
position: absolute;
bottom: 0;
width: 100%;
padding: 10px 50px;
display: flex;
justify-content: space-between;
align-items: center;
 }
.sci{
    display: flex;
}
.sci li{
list-style: none;
}
.sci li a{
    color: var(--white);
    font-size: 1em;
    margin-right: 20px;
    transition: 0.25s;
    list-style: none;
    text-decoration:none;
}
.sci li a:hover{
    color: var(--yellow);

}
@media screen and (max-width: 600px) {
    .content h1 {
        font-size: 3em;
        font-family: DaxlinePro;
        font-weight: 500;
     
        color: var(--white);
      }
     

 
}
@media (min-width: 200px) and (max-width: 600px) {

    content h1{
        font-size: 40px;
        line-height: 100px;
        font-weight: 300;
    }
    .content p{
    max-width: 500px;
    line-height: 28px;
    opacity: 0;
    
    }

}

/* Login */
.wrapper{
 color: #ccc;
    max-width: 480px;
    width: 80%;
    background: #FFF;
    padding: 35px 40px;
    border-radius: 6px;
    box-shadow: rgba(0,0,0,0.2);

    margin: auto;
}
.wrapper .input-box{
position: relative;
height: 45px;
margin: 25px 0;
}

.input-box input{
height: 100%;
width: 100%;
background: #FFF;
color: #141414;
font-size: 18px;
font-weight: 500;
border-radius: 8px;
padding: 0 40px 0 16px;
border: 2px solid #a6a6a6;
outline: none;
transition: all 0.3s ease;
}

.input-box input:focus ~ label{
top:0;
color: #2EC029;
font-size: 14px;
background: #FFF;
}
.input-box label,
.input-box i{
position: absolute;
top:50%;
transform: translateY(-50%);
color: #141414;
}
.input-box input:focus{
    border-color: #2EC029;
}
.input-box label{
left: 15px;
font-size: 18px;
font-weight: 400;
background: #fff;
padding: 0 6px;
pointer-events: none;
}

.input-box i{
    right: 15px;
    padding: 8px;
    cursor: pointer;
    }

    .input-box input:focus ~label,
    .input-box input:valid ~label{
top:0;
color: #93d62a;
font-size: 14px;

    }

    .vatforgot{
        text-align: center;
        text-decoration: underline;
      font-size: 13px;
        align-items: center;
        margin: auto;
        color: #1A82F7;
        margin-top: -15px;
    }
    .forgot{
       
        margin-right: 5%;
    }
    .alert{
        text-align: center;
       
        align-items: center;
        margin: auto;
        color: #141414;
    }
    .alert .questionmark{
      
        margin-right: 18px;
    }
    .alert .text{
       
        color: #6F6F6F;
        font-size: 18px;
        font-weight: 500;
    }
    .input-box.button #button{

        background: #2EC029;
        border: none;
        font-size: 20px;
        color: var(--white);
        letter-spacing: 1px;
        cursor:not-allowed;
    }
    .input-box.button #button:hover{
        background: #93d62a;

    }
    .input-box.button #buttonup{

        border: 2px solid #93d62a;
      
        font-size: 20px;
        color:#93d62a;
        letter-spacing: 1px;
        cursor:not-allowed;
    }
    .input-box.button #buttonup:hover{
        background: #93d62a;
        color:var(--white);
    }