*{
    margin: 0;
    padding: 0;
    box-sizing:border-box;
    font-family: 'Helvetica';
    }
:root{
       --yellow:#fdd401; 
       --black:#000000;
       --white:#ffffff;
    }
    @font-face { font-family: Helvetica;  
        src:url('../fonts/HelveticaNeue.ttf');
    } 
    /* bold version */
    @font-face {
      font-family: 'Helvetica';
      font-weight: bold;
      font-weight: 500;
      src:url('../fonts/HelveticaNeuBold.ttf');
     
    }
    
    
    body{
    
        font-family: Helvetica;
        
    }
    .main{
        position: relative;
       
        min-height: 100vh;
       
        padding: 30px 100px;
        display: flex;
         align-items:center;
         justify-content: space-around;
         flex-direction: column;   
    }
    .main{
        /* height: auto;
         background: transparent url('../images/banner.png') 0% 0% no-repeat padding-box;
         opacity: 1;
         background-size: cover;
         background-size: 100% 100%;
         background-position: center bottom;
         background-image:linear-gradient(to bottom, rgba(252, 249, 245, 0.52), rgba(117, 19, 93, 0.73)), */
        
         background-image:
         linear-gradient(to bottom,rgba(0, 0, 0, 0.73), rgba(0, 0, 0, 0.52)),
         url('../images/banner.png');
         width: 102%;
         height: 400px;
         background-size: cover;
         background-size: 100% 100%;
         margin-left:-15px;
         height: auto;

    }
    .main::before{
        content: 'The Gambia';
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        font-size:7vw;
        font-weight: 700;
        color:rgba(255,255,255,0.05)
    }
    header{
position:absolute;
top: 0;
left: 0;
width: 100%;
padding: 10px 100px;
display: flex;
justify-content: space-between;
align-items: center;
    }

.logo{
/* max-width: 300px; */
}
.navigation{
    display: flex;
}
.navigation li{
list-style: none;
}
.navigation li a{
    position: relative;
    color: var(--white);
    margin-left: 40px;
    text-decoration: none;
    transition: 0.25s;
    }
    .navigation li a:hover{
        color: var(--yellow);
    }
.content{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; 
    margin-top: 80px;
    z-index: 1;
}
.content h2{
font-size: 3.5em;
font-family:Helvetica ;
font-weight: 500;
text-align: center;
color: var(--white);
}
#content span{
    font-family:Helvetica ;
    font-weight: normal; 
    color: var(--white);
    margin-top: 2%;
    font-size: 1.8em;
}
.content span{
    font-family:Helvetica ;
    font-weight: normal; 
    color: var(--white);
    font-size: 2em;
}

.btn{
display: inline-block;
background: var(--yellow);
color: var(--black);
text-decoration: none;
padding: 20px 40px;
margin-top: 5%;
margin-right: 5px;
border-radius: 50px;
font-family:Helvetica ;
font-weight: 500;
font-size: 1.25em;
transform: 0.25s;
}
.btn:hover{
    font-family:Helvetica ;
    font-weight: 500;
letter-spacing: 0.5px;
}
.footer p{
    font-family:Helvetica ;
    font-weight: normal; 
    color: var(--white);
    font-size: 1em; 
}
 .footer{
position: absolute;
bottom: 0;
width: 100%;
padding: 30px 100px;
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);

}
.waec-reg{  margin-top: 2%;font-size:16px;bottom:calc(100% + var(--space-md))}
.waec-reg{-webkit-transition:opacity .4s ease-in-out .4s,-webkit-transform .4s ease-in-out .4s,-webkit-filter .4s ease-in-out .4s;transition:opacity .4s ease-in-out .4s,-webkit-transform .4s ease-in-out .4s,-webkit-filter .4s ease-in-out .4s;transition:transform .4s ease-in-out .4s,opacity .4s ease-in-out .4s,filter .4s ease-in-out .4s;transition:transform .4s ease-in-out .4s,opacity .4s ease-in-out .4s,filter .4s ease-in-out .4s,-webkit-transform .4s ease-in-out .4s,-webkit-filter .4s ease-in-out .4s;-webkit-transition-duration:.4s;transition-duration:.4s;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1}
.waec-reg{font-size:16px;bottom:calc(100% + var(--space-md));letter-spacing:1pt;text-transform:uppercase;color:#fff}
.waec-reg{font-size:10pt}
.reg-select{font-weight: 500;font-size: 1.2em;width:80%;position: relative;padding: 16px 100px 16px 25px;border-radius: 50px 0px 0px 50px; border:1px solide #616161;   font-family: 'Helvetica';}
.button {background-color:var(--yellow);border: none;color: black;padding: 20px 50px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;border-radius: 0px 50px 50px 0px;
  }
  .buttonWaec {background-color:var(--yellow);border: none;color: black;padding: 16px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;border-radius: 50px 50px 50px 50px;
  }.buttonWaec a{color: black;}

  /* Now Make it Responsive */
  @media(max-width : 992px)
  {
      .main{
          padding: 40px;
      }
      header{
          padding: 10px 10px;
      }
      .content h2{
        font-size: 3em;
        font-family:Helvetica ;
        font-weight: 500;
        text-align: center;
        color: var(--white);
        }
        .logo{
            /* max-width: 0px; */
            }
      .footer{
        padding: 0px 40px;
        position: relative;
        margin-top: 50px;
        flex-direction: column-reverse;
    }

    .sci{

        margin-top: 40px;
    }
    .toggle{
        position: relative;
        width: 32px;
        height: 40px;
      
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        z-index: 1000;
    }
    .toggle.active{
     position:fixed;
      top:30px;
      right: 40px;
    }
    .toggle::before{
        content:'';
        position: absolute;
        width: 100%;
        height: 2px;
        background: var(--white);
        transform:translateY(-10px);
        transition: 0.25s;
        box-shadow: 0 10px 0 var(--white);
    }
    .toggle.active::before{
        transform:translateY(0) rotate(45deg);
        box-shadow: 0 0 0 var(--white);
    }
    .toggle::after{
        content:'';
        position: absolute;
        width: 100%;
        height: 2px;
        background: var(--white);
        transform:translateY(10px);
        transition: 0.25s;
    }
    .toggle.active::after{
        transform:translateY(0) rotate(-45deg);
    }
    .navigation{
        display: none;
    }

    .navigation.active{
       position: fixed;
       top:0;
       left:0;
       width: 100%;
       height: 100%;
       display: flex;
       justify-content: center;
       align-items:center;
       flex-direction: column;
       z-index: 999;
       background: var(--black);
    }
    .navigation li a{
        font-size:1.5em;
        margin: 10px 0;
        display: inline-block;
        font-family:Helvetica ;
    }
   
  }
  @media (min-width: 768px) and (min-width: 992px) {
 #navigation li a{
        font-size:1em;

    }

  }
  @media only screen and (min-width: 768px) {
   
    .content h2{
        font-size: 2.8em;
        font-family:Helvetica ;
        font-weight: 500;
        text-align: center;
        color: var(--white);
        }
        .content {
            
            margin-top: 40px;
            z-index: 1;
          }
        header {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
           
            display: flex;
            justify-content: space-between;
            align-items: center;
          }

  }

  @media (min-width: 600px) and (max-width: 768px) {
    .content h2{
        font-size: 2em;
        font-family:Helvetica ;
        font-weight: 500;
        text-align: center;
        color: var(--white);
        }
        .reg-select{font-weight: 500;font-size: 1.2em;width:60%;position: relative;padding: 16px 50px 16px 25px;border-radius: 50px 0px 0px 50px; border:1px solide #616161;   font-family: 'Helvetica';}
        .button {background-color:var(--yellow);border: none;color: black;
            /* padding: 18px 30px; */
            text-align: center;
            text-decoration: none;display: inline-block;font-size: 16px;border-radius: 0px 50px 50px 0px;
          }
        
    }
  /* On screens that are 600px or less, set the background color to olive */
@media screen and (max-width: 600px) {
    .content h2 {
        font-size: 1.7em;
        font-family: Helvetica;
        font-weight: 500;
        text-align: center;
        color: var(--white);
      }
      #content span {
        font-family: Helvetica;
        font-weight: normal;
        color: var(--white);
        margin-top: 2%;
        font-size: 1.2em;
      }
      .reg-select{font-weight: 500;font-size: 1.2em;width:70%;position: relative;padding: 16px 50px 16px 25px;border-radius: 50px 0px 0px 50px; border:1px solide #616161;   font-family: 'Helvetica';}
.button {background-color:var(--yellow);border: none;color: black;
    /* padding: 18px 30px; */
    text-align: center;
    text-decoration: none;display: inline-block;font-size: 16px;border-radius: 0px 50px 50px 0px;
  }

  .footer {
    padding: 0px 40px;
    position: relative;
    margin-top: 10px;
    flex-direction: column-reverse;
  }
}

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

    .reg-select{font-weight: 500;font-size: 1.2em;width:60%;position: relative;padding: 16px 50px 16px 25px;border-radius: 50px 0px 0px 50px; border:1px solide #616161;   font-family: 'Helvetica';}
}