*{
    padding: 0;
    margin: 0;
    list-style: none;
    text-decoration: none;
    font-family: Netflix Sans,Helvetica Neue,Helvetica,Arial,sans-serif;
}
body{
    background-color: black;
}
/* nav styling */
nav img{
    width: 10%;
    padding: 20px;
}
.first{
    background: url(Images/r.jpeg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 110vh;
 

    
}
nav button{
    width: 100px;
 
    height: 35px;
    background-color: rgb(240, 0, 0);
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
margin-top: 20px;
margin-right: 30px;
}
nav h2{
    color: red;
    padding: 20px;
    font-size: 45px;
    font-family: 'Bebas Neue', cursive;
}
nav{
    display: flex;
    justify-content: space-between;
}
.a-text h1{
    color: aliceblue;
   text-align: center;
    padding-top: 90px;
    font-size: 50px;
}
.a-text p{
    text-align: center;
    color: aliceblue;
    font-size: 23px;
    padding-top: 20px;
}
.a-text span{
    font-size: 19px;
}
.a-text{
    text-align: center;
}
.a-text input{
    width: 570px;
    padding: 20px;
    margin-left: 170px;
    margin-top: 20px;
}
.a-text button{
    width: 200px;
    height: 64px;
    border: none;
    background-color: red;
    font-size: 23px;
    cursor: pointer;
}
.a-text button a{
    color: aliceblue;
}
.a-text input{
    color: aliceblue;
}


hr{
    height: 7px;
    width: 100%;
    background-color: rgb(70, 66, 66);
}
.b-text{
    animation-name: floating;
animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.seventh form p span:hover{
border-bottom: 1px solid blue;
transition: 0.2s ease-in-out;
cursor: pointer;
}


@keyframes floating {
    0% {
      transform: translate(0, 0px);
    }
    50% {
      transform: translate(0, 15px);
    }
    100% {
      transform: translate(0, -0px);
    }
  } 
@media(max-width:765px){
    nav img{
        width: 30%;
    }
    .first{
        height: 80vh;
        animation: change 15s  infinite ease-in-out;
    }
    nav{
        background-color: rgba(37, 34, 34,0.5);
        
    }
    nav button{
        width: 60px;
        height: 26px;
    }
    .a-text h1{
        font-size: 28px;
    }
    .a-text p{
        font-size: 18px;
        padding: 10px 20px;
    }
    .a-text span{
        font-size: 16px;
        
    }
    .sixth-text h1{
        font-size: 28px;
    }
    .sixth-text p{
        font-size: 18px;
        padding: 10px 20px;
    }
    .sixth-text span{
        font-size: 16px;
        
    }
    .a-text input{
        width: 300px;
        margin: 0;
        background-color: rgba(251, 253, 255,0.4);
        border: 1px solid aliceblue;
        margin-top: 20px;
        margin-bottom: 20px;
        padding: 14px;
    }
    .a-text button {
        width: 120px;
        font-size: 15px;
        height: 35px;
        
    }
    .second {
        background-color: black;
        padding-top: 40px;
        padding-left: 20px;
    }
    .second h1{
        color: aliceblue;
        font-size: 2.125rem;
        font-weight: 400;
        text-align: center;
        padding-bottom: 20px;
    }
    .second p{
        color: aliceblue;
        font-size: 17px;
        text-align: center;
    }
    .second img{
        width: 100%;
        animation-name: floating;
        animation-duration: 3s;
            animation-iteration-count: infinite;
            animation-timing-function: ease-in-out;
    }
    
    .third{
        background-color: black;
        padding-top: 40px;
        padding-left: 20px;
        padding-bottom: 120px;
        
    }
    .third h1{
        color: aliceblue;
        font-size: 2.125rem;
        font-weight: 400;
        text-align: center;
        padding-bottom: 20px;
    }
    .third p{
        color: aliceblue;
        font-size: 17px;
        text-align: center;
    }
    .third img{
        width: 100%;
  
        
    }

    .b-text{
        background-color: black;
        border: 3px solid white;
        max-width: 240px;
        margin: 0 auto;
        display: flex;
        border-radius: 20px;
        border: 3px solid rgb(143, 136, 136);
        position: absolute;
        bottom: -850px;
        left: 80px;
        animation-name: floating;
        animation-duration: 3s;
            animation-iteration-count: infinite;
            animation-timing-function: ease-in-out;
        
    

    }
    .b-text img{
        width:15%;
        padding-left: 20px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .b-text h5{
        color: aliceblue;
        font-size: 15px;
        padding-left: 20px;
        padding-top: 30px;
    }
    .fourth{
        background-color: black;
        color: aliceblue;
        padding-bottom: 50px;
        padding-top: 30px;

    }
    .fourth h1{
        font-size: 2.120rem;
        padding-left: 20px;
        padding-top: 30px;
        padding-bottom: 20px;
    }
    .fourth p{
        font-size: 17px;
        padding-left: 20px;
    }

    .c-text{
        background-color: rgb(65, 62, 62);
        max-width: 700px;     
        padding-bottom: 20px;
        margin-top: 20px;
      margin-left: 20px;
      margin-right:20px ;
        margin-bottom: 20px;
    }
    .c1-text{
        background-color: rgb(65, 62, 62);
        max-width: 700px;     
        padding-bottom: 20px;
        margin-top: 20px;
      margin-left: 20px;
      margin-right:20px ;
        margin-bottom: 20px;
    }
    .c-text h3{
    position: relative;
    right: 80px;
    top: 8px;
    font-size: 17px;
    }
    .fifth{
        background-color: black;
        text-align: center;
        color: aliceblue;
        padding-top: 70px;
        padding-bottom: 90px;
    }
    footer{
        background-color: black;
        color: lightgrey;
        padding-top: 40px;
        padding-left: 20px;
    }
    footer h6{
        font-size: 18px;
        padding-bottom: 20px;
    }
    footer a{
        color: lightgrey;
    }
    footer .d-text ul li{
        line-height: 30px;
    }
    .d-text{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    .seventh{
        text-align: center;
        background-color: rgba(0, 0, 0, 0.9);
        color: aliceblue;
        /* max-width: 450px; */
        
        padding-bottom: 180px;
        padding-top: 40px;
    
    }
   
    .seventh h3{
        font-size: 32px;
        padding-top: 20px;
        padding-bottom: 40px;
        text-align: left; 
        padding-left: 20px;
    
    }
    .seventh form input{
        width: 80%;
        border: none;
        font-size: 18px;
        border-radius: 10px;
        padding: 15px;
        background-color: rgb(41, 41, 41);
        color: aliceblue;
    
        margin-bottom: 20px;
    }
    .seventh form button{
        width:80%;
        font-weight: 800;
        font-size: 20px;
        margin-top: 30px;
        padding: 10px;
        margin-bottom: 50px;
       background-color: rgba(255, 0, 0, 0.664);
       color: aliceblue;
       border: none;
       cursor: pointer;
       border-radius: 10px;
    }
    .seventh  form p{
        font-size: 16px;
        padding-top: 10px;
        padding-bottom: 10px;
        color: gray;
     
    
    }

    @keyframes change{
        0%{
          background: url(https://user-images.githubusercontent.com/99909801/189293524-5b6d4010-8985-4bdf-b808-4713e6bce2a8.jpg);
          background-size: cover;
          background-position: center;
        background-repeat: no-repeat;
        transition: 0.6s ease-in-out;
        
      
        }
        20%{
          background: url(https://user-images.githubusercontent.com/99909801/189293732-e494cc5c-da3e-494e-9a88-1918f6144359.jpeg);
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          transition: 0.6s ease-in-out;
        }
        40%{
          background: url(https://user-images.githubusercontent.com/99909801/189293854-b60f7528-087a-40d1-b1db-748d7d39a877.jpeg);
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          transition: 0.6s ease-in-out;
        }
        60%{
          background: url(https://user-images.githubusercontent.com/99909801/189294130-dd128057-f6fa-4440-b466-fd19bdd8c9ea.jpg);
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          transition: 0.6s ease-in-out;
        }
        80%{
          background: url(https://user-images.githubusercontent.com/99909801/189294759-d5cac220-19fd-448f-b15c-bc8684044dca.jpg);
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          transition: 0.6s ease-in-out;
        }
        100%{
          background: url(https://user-images.githubusercontent.com/99909801/189294501-fd99f296-5255-4c9c-aefb-71b3717eeab4.jpg);
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          transition: 0.6s ease-in-out;
        }
      } 
}

@media(min-width:768px){
    .a-text button{
        position: relative;
        left: 206.6px;
        bottom: 63.7px;
        border: 3px solid rgb(240, 0, 0) ;
    }
    .first{
        height: 80vh;
    }
    .a-text input{
        color: gray;
        font-weight: 900;
        margin: 0;
        margin-top: 20px;
    }
    .second img{
     width: 50%;
     float: right;
     position: relative;
 
     bottom: 190px;
        
    }
    .second {
        background-color: black;
        height: 90%;
        padding-top: 180px;
        padding-bottom: 200px;
        padding-left: 40px;
    }
    .second h1{
        color: aliceblue;
        font-size: 2.125rem;
        padding-bottom: 20px;
    }
    .second p{
        color: aliceblue;
        font-size: 23px;
        width: 50%;
    }
    .third img{
        width: 50%;
        float: right;
        position: relative;
    
        bottom: 190px;
           
       }
        .third {
           background-color: black;
           height: 250px;
           padding-top: 80px;
           padding-bottom: 200px;
           padding-left: 40px;
       }
       .third h1{
           color: aliceblue;
           font-size: 2.125rem;
           padding-bottom: 20px;
           width: 50%;
       }
       .third p{
           color: aliceblue;
           font-size: 23px;
           width: 50%;
       } 
    .b-text{
        background-color: black;
        border: 3px solid white;
        max-width: 340px;
        margin: 0 auto;
        display: flex;
        border-radius: 20px;
        border: 3px solid rgb(143, 136, 136);
        position: absolute;
        bottom: -750px;
        left: 450px;
        
    

    }
    .b-text img{
        width:15%;
        padding-left: 20px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .b-text h5{
        color: aliceblue;
        font-size: 15px;
        padding-left: 20px;
        padding-top: 30px;
    }

    .fourth{
        background-color: black;
        color: aliceblue;
        padding-bottom: 50px;
        padding-top: 30px;

    }
    .fourth h1{
        font-size: 2.125rem;
        padding-left: 40px;
        padding-top: 30px;
        padding-bottom: 20px;
    }
    .fourth p{
        font-size: 22px;
        padding-left: 40px;
    }
.fifth{
    background-color: black;
    text-align: center;
    color: aliceblue;
    padding-top: 70px;
    padding-bottom: 90px;
}
.fifth h1{
    font-size: 45px;
    padding-top: 40px;
}
.c-text{
    background-color: rgb(65, 62, 62);
    max-width: 700px;
    
    padding-bottom: 30px;
    position: relative;
    left: 50px;
    top: 20px;
    margin-bottom: 20px;
}
.c1-text{
    background-color: rgb(65, 62, 62);
    max-width: 700px;
    
    padding-bottom: 30px;
    position: relative;
    left: 50px;
    top: 20px;
    margin-bottom: 20px;
}

.c-text h3{
position: relative;
right: 230px;
top: 8px;
font-size: 22px;
}

footer{
    background-color: black;
    color: lightgrey;
    padding-top: 40px;
}
footer h6{
    font-size: 20px;
    padding-left: 90px;
    padding-bottom: 10px;
}
footer a{
    color: lightgrey;
}
    .d-text{
        display: flex;
        padding-top: 20px;
        justify-content: space-around;
    }
    footer .d-text ul li{
        line-height: 30px;
    }
    footer .d-text ul li a:hover{
        color: gray;
        transition: 0.2s ease-in-out;
        border-bottom: 3px solid white;
    }
.seventh{
    text-align: center;
    background-color: rgba(0, 0, 0, 0.8);
    color: aliceblue;
    max-width: 450px;
    margin-left: 200px;
    border-radius: 20px;
    margin-bottom: 30px;
    padding-bottom: 100px;
    padding-top: 40px;

}
.seventh h3{
    font-size: 32px;
    padding-top: 20px;
    padding-bottom: 40px;
    text-align: left; 
    padding-left: 85px;

}
.seventh form input{
    width: 60%;
    border: none;
    font-size: 18px;
    border-radius: 10px;
    padding: 15px;
    background-color: rgb(41, 41, 41);
    color: aliceblue;

    margin-bottom: 20px;
}
.seventh form button{
    width:60%;
    font-weight: 800;
    font-size: 20px;
    margin-top: 30px;
    padding: 15px;
    margin-bottom: 70px;
   background-color: red;
   color: aliceblue;
   border: none;
   cursor: pointer;
   border-radius: 10px;
}
.seventh  form p{
    font-size: 16px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: gray;
 

}
}
@media(min-width:1064px){
    .a-text button{
       
        left: -90px;
top: 3px;
        border: 3px solid rgb(240, 0, 0) ;
    }
    .first{
        height: 150vh;
    }
    .a-text input{
        color: gray;
        font-weight: 900;
        margin-left: 170px;
        margin-top: 20px;
    }
    .second img{
        position: relative;
        width: 40%;
        bottom: 310px;
        right: 30px;
        animation-name: floating;
animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    }
    .second {
        background-color: black;
        height: 90%;
        padding-top: 180px;
        padding-left: 60px;
    }
    .second h1{
        color: aliceblue;
        font-size: 3.125rem;
        padding-bottom: 20px;
    }
    .second p{
        color: aliceblue;
        font-size: 27px;
        width: 50%;
    }
    .third img{
        position: relative;
        width: 40%;
        float: none;
        
    overflow: hidden;
        bottom: 0px;
        bottom: 310px;
        right: 30px;
    }
    .third {
        background-color: black;
        height: 250px;
        padding-top: 180px;
        padding-left: 60px;
        
    } 
    .third h1{
        color: aliceblue;
        width: 60%;
        font-size: 3.125rem;
        padding-bottom: 20px;
        position: relative;
        left: 500px;

    }
    .third p{
        color: aliceblue;
        position: relative;
        left: 500px;
        font-size: 27px;
        width: 50%;
    } 
    .b-text{
        background-color: black;
        border: 3px solid white;
        max-width: 340px;
        margin: 0 auto;
        display: flex;
        border-radius: 20px;
        border: 3px solid rgb(143, 136, 136);
        position: absolute;
        bottom: -1350px;
        left: 120px;
        
    

    }
    .b-text img{
        width:15%;
        padding-left: 20px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .b-text h5{
        color: aliceblue;
        font-size: 15px;
        padding-left: 20px;
        padding-top: 30px;
    }
    .fourth h1{
        font-size: 3.125rem;
        padding-left: 40px;
        padding-top: 30px;
        padding-bottom: 20px;
    }
    .fourth p{
        font-size: 22px;
        padding-left: 40px;
    }
    .c-text{
        background-color: rgb(65, 62, 62);
        max-width: 700px;
        position: relative;
        left: 250px;
    }
    .c1-text p{
        font-size: 20px;
        padding: 14px;
    }
    .c1-text{
        background-color: rgb(65, 62, 62);
        max-width: 700px;
        position: relative;
        left: 250px;
       display: none;
    }
    .close {
width: 3%;
    }
    .seventh{
        text-align: center;
        background-color: rgba(0, 0, 0, 0.8);
        color: aliceblue;
        max-width: 450px;
        margin-left: 400px;
        border-radius: 20px;
        margin-bottom: 30px;
        padding-bottom: 100px;
        padding-top: 40px;
    
    }
    .seventh h3{
        font-size: 32px;
        padding-top: 20px;
        padding-bottom: 40px;
        text-align: left; 
        padding-left: 85px;
    
    }
    .seventh form input{
        width: 60%;
        border: none;
        font-size: 18px;
        border-radius: 10px;
        padding: 15px;
        background-color: rgb(41, 41, 41);
        color: aliceblue;
    
        margin-bottom: 20px;
    }
    .seventh form button{
        width:60%;
        font-weight: 800;
        font-size: 20px;
        margin-top: 30px;
        padding: 15px;
        margin-bottom: 70px;
       background-color: red;
       color: aliceblue;
       border: none;
       cursor: pointer;
       border-radius: 10px;
    }
    .seventh  form p{
        font-size: 16px;
        padding-top: 10px;
        padding-bottom: 10px;
        color: gray;
     
    
    }
}