*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-decoration: none;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;

}

.header1{
    position: fixed;
    top: 0;
   
    height: 10vh;
    width:100%;
    display: flex;
    justify-content:right;
    align-items: center;
    padding:15px;
    background-color: #0f0f10;
    margin-bottom: 10px;
    z-index: 10;
    

   
}
.header1 a{
    color: red;
    font-size: 40px;
    
}
.logo {
    font-size: 45px;
    position: absolute;
    left:5%;
    right: 80px;
    letter-spacing: 6px;
    color: rgb(249, 5, 5);
    opacity: 0.8;
    padding: 0 20% 0 0;
    
}

.navbar{
    position: sticky;
    display: flex;
    justify-content: center;
    align-items: center;
}
.navbar a{
    font-size: 200%;
    font-weight: 200;
    color: white;
    padding: 1rem 1rem;
    border-radius: 5px;
    opacity: 0.8;

}
.navbar a:hover, .active1{
    background-color: rgb(33, 36, 40);
    transition: 0.6s;
    color: rgb(120, 199, 225);
}

header .btn{
    font-size: 25px;
    color: rgb(228, 231, 234);
    cursor: pointer;
    display: none;
}
header .btn:hover{
    color: black;
    transition: 0.6s;
}
#page1{
    height: 100vh;
    background-color: #0f0f10;
    color: rgb(2, 2, 2);
    

}
#page1 img{
    height: 80vh;
    width: 100vw;
    
}

#page1 section{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
section h2{
   height: 10vh;
    color: rgb(249, 249, 252);
    font-size: 90px;
    font-family: Georgia, 'Times New Roman', Times, serif;
   font-style: italic;

}

/* our plans */
#page2{
    height: 90vh;
    width:100%;
    
}
.header2{
    position: relative;
    top:10vh;
    margin:20px 0;
    height: 10vh;
    width:100%;
    display: flex;
    justify-content:center;
    align-items: center;
    overflow: hidden;
    padding:15px;
    background-color: yellow;
    font-size: 70px;
    letter-spacing: 20px;
}

.cont2{
    background-color: #fdfafa;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height:85vh;
    gap:60px;
}
.box3{
    background-color: #e0dede;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:10px;
    height: 60vh;
    width:400px;
    box-shadow: 14px 14px 1px rgba(8, 8, 8, 0.932);
    
}
.box3 h3{
    background-color: rgb(13, 13, 14);
    opacity: 0.8;
    font-size: 37.5px;
    color: rgb(253, 253, 251);
    font-family: Georgia, 'Times New Roman', Times, serif;
    width:400px;
    position: relative;
    top:0;
}
hr{
    width: 400px;
}
.box3 p{
    font-size: 20px;
}
.box3 h4{
    font-size: 25px;
    color: rgb(198, 38, 38);
    letter-spacing: 5px;
}
.box3 ul li{
    font-size: 18px;
}


/* survey */
#page3{
    height: 100vh;
    width:100%;
    background-color: #fdfafa;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#page3 h2{
    margin-top: 30px;
    color: #090909;
    text-align: center;
    font-size: 50px;
    letter-spacing: 8px;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

.box{
    background-color:yellow;
    opacity: 0.8;
    width:50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    margin:10px 0;
    border-radius: 5px;
    border: 1px solid #090a0a;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}
#submit1{
    background:none;
    border: none;
    box-shadow: none;
}
.box label{
    margin-right: 15px;
    font-size: 30px;
}
.box .button{
    background-color: #fdfafa;
    width:37px;
    height: 37px;
    border: 1px solid #7a6867;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: rgb(8, 17, 9);
    cursor: pointer;
}
.box .button:active{
    background-color: #c9dec8;
}
.box input{
    width: 100px;
    padding: 5px 10px;
    text-align: center;
    border: 1px solid #4d6163;
    border-radius: 5px;
    font-size: 20px;
    margin: 0 10px;
    
}
#submit1 button{
    height: 50px;
    width: 20%;
    font-size: 25px;
    
}





/* dynamic form */
#page6{

    height: 100vh;
    width:100%;
    background-color: #f9fbfb;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:30px;
    background: url(images/bookss.jpg) no-repeat center/cover;
    background-size: 1800px;
    
}
#page6 header{
    position: relative;
    bottom:142px;

    width:100%;
    height: 15px;
    background-color: #090909;
}
#page6 h2{
    font-size: 80px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    width: 100vw;
    color: rgb(9, 9, 9);
    text-align: center;
}
.semi-cont{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:30px;
}
.semi-cont p{
    font-size: 50px;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
.semi-cont button{
    height: 60px;
    width: 150px;
    font-size: 40px;
    background-color: #8ff16b;
    cursor: pointer;
}
.semi-cont button:hover{
    background-color: #33b902;
}
#dform{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;

    background-color: #edf5b1;
    gap: 20px;
}
.cont-input2{
    height: 50px;
    width:400px;
    font-size: 25px;
    text-align: center;
    margin: 10px 10px 0 10px;   
}
.remember-forgot{
    font-size: 15px;
    margin-left: 10px;
}
#dform button{
    height: 35px;
    width:90px;
    margin: 0 0 10px 10px;
    font-size: 20px;
    cursor: pointer;
}
/* more */
 #page7 img{
    height: 250px;
    width: 250px;
 }

#page7{
    /* min-height: 100vh; */
    height: 100vh;
    display: grid;
    place-items: center;
    background: linear-gradient( 90deg, #fff 30%, #e4fb62);
}
#page7 h2{
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 5rem;
    color: red;
    margin-top: 50px;
    
}
#page7 .container{
height: 350px;
margin: auto;
position: relative;
width: 90%;
display: grid;
place-items: center;
overflow: hidden;
}

#page7 .slide-cont{
    display: flex;
    width: calc(250px * 18);
    animation: scroll 20s linear infinite;
}
@keyframes scroll {
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(calc(-250px*9));
    }
}

.slide-img{
    height: 300px;
    width: 300px; 
    display: flex;
    align-items: center;
    padding: 15px;
}
 #page7 img{
    width:100%;
    
 }
 #page7 img:hover{
    
    height: 300px;
    width: 300px; 
    box-shadow: 5px 5px 15px rgba(4, 4, 4, 0.5);
 }
/* More */
 #page8{
    height: 100vh;
    background: linear-gradient( 90deg, #fff 30%, #e4fb62);
 }
 #page8 .about{
    padding: 168px 0;
 }
 #page8 .about img{
    height: 350px;
    width: 480px;
 }
 .about-text{
 width:550px;
 }
 .about-text h1{
    font-size: 80px;
    margin-bottom: 20px;
    font-family: Georgia, 'Times New Roman', Times, serif;
 }
 .about-text h5{
    font-size: 35px;
    letter-spacing: 2px;
    margin-bottom: 25px;
 }
 .about-text h5 span{
    color: red;
 }
 .about-text p{
    color: rgb(117, 81, 68);  
 }
 .last-page{
    width:1130px;
    max-width: 95%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
 }








 /* contact us html form */
#page777{
    height: 100vh;
}
#section1{
    width: 100%;
}
.box1{
    position: relative;
    /* width:1100px; */
    margin:auto;
    /* border-radius: 30px; */
}
.info-wrap{
    width:35%;
    height: 100vh;
    /* height: 551px; */
    padding: 40px;
    float: left;
    display: block;
    /* border-radius: 30px 0px 0px 30px; */
    background: linear-gradient(144deg, rgb(255, 254, 255) 0%, rgb(8, 8, 8) 59%);
    color: #fff;
}
.info-title{
    margin-top: 8vh;
    text-align: left;
    font-size: 28px;
    letter-spacing: 0.5px;
}
.info-sub-title{
    font-size: 18px;
    font-weight: 300;
    margin-top: 17px;
    letter-spacing: 0.5px;
    line-height: 26px;
}
.info-details {
    list-style: none;
    margin: 60px 0px;
}
.info-details li {
    margin-top: 25px;
    font-size: 18px;
    color: #fff;
}
.info-details li i {
    background: #F44770;
    padding: 12px;
    border-radius: 50%;
    margin-right: 5px;
}
.info-details li a {
    color: #fff;
    text-decoration: none;
}
.info-details li a:hover {
    color: #F44770;
}
.social-icons {
    list-style: none;
    text-align: center;
    margin: 40px 0px;
}
.social-icons li {
    display: inline-block;
}
.social-icons li i {
    background: #F44770;
    color: #fff;
    padding: 15px;
    font-size: 20px;
    border-radius: 22%;
    margin: 95px 5px;
    cursor: pointer;
    transition: all .5s;
}
.social-icons li i:hover {
    background: #fff;
    color: #000000;
}
.form-wrap{
    width:65%;
    height: 100vh;
    float: right;
    padding:50px 25px 55px 25px;
    border-radius: 0px 30px 30px 0px;
    background: white;
    
}
.form-title{
    margin-top: 5vh;
    text-align: left;
    margin-left: 23px;
    font-size: 58px;
    letter-spacing: 0.5px;
    color: #585353;
}
.form-fields{
    /* display: table; */
    width: 100%;
    padding: 15px 5px 5px 5px;
}
.form-fields input,
.form-fields textarea{
    border: none;
    outline:none;
    background: none;
    font-size: 22px;
    color:#555;
    padding: 30px 10px 30px 5px;
    width:100%
}
.form-fields textarea{
    height: 150px;
    resize: none;
}
.form-group{
    width: 46%;
    float: left;
    padding: 0px 30px;
    margin: 14px 12px;
    border-radius: 25px;
    box-shadow: inset 8px 8px 18px #cbced1, inset -8px -8px 8px #ffffff;
}
 .textarea2{
    width: 96%;
}
.submit-button{
    width: 96%;
    height: 60px;
    margin: 30px 12px;
    border-radius: 30px;
    font-size: 30px;;
    font-weight: 700;
    outline: none;
    border:none;
    cursor: pointer;
    color:#fff;
    text-align: center;
    background: #F44770;
    box-shadow: 3px 3px 8px #b1b1b1, -3px -3px 8px #ffffff;
    transition: .5s;
}
.submit-button:hover{
    background: #529d27;
}












/* review */
#page88{
    height: 80vh;
    width:100%;
    background-color: #fdfafa;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    background: url(images/Review-page.png) no-repeat ;
    background-position-x: center;
    background-size: 400px 100px;
    margin-top: 70px;
}
#page88 h2{
    color: #21293a;
    text-align: center;
    font-size: 60px;
    letter-spacing: 10px;
    /* position: relative;
    top:5px; */
    margin-bottom: 5px;

}
#page88 .box2{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    margin:10px 0;
}
#textarea1{
    width:40%;
    height: 30%;
    border: 1px solid #4d6163;
    border-radius: 5px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}
 #page88 .submit2{
    height: 50px;
    width: 20%;
    font-size: 25px;
    cursor: pointer;
    border-radius: 25px;
    }
.popup{
    width: 400px;
    background: #fff;
    border-radius: 6px;
    position: absolute;
    top:0;
    left: 50%;
    transform: translate(-50%,-50%)scale(0.1);
    text-align: center;
    padding: 0 30px 30px;
    color: #21293a;
    visibility: hidden;
}
.open-popup{
    visibility: visible;
    top:50%;
    transform: translate(-50%,-50%)scale(1);

}

.popup img{
    width: 80px;
    height: 80px;
    margin-top: -35px;
    border-radius: 50%;  
}
.popup h3{
    font-size: 38px;
    font-weight: 500;
    margin: 20px 0 0 0;
}
.popup p{
    font-size: 20px;
    margin: 20px 0 10px;
}
.popup button{
    width: 100%;
    margin-top: 30px;
    padding: 10px 0;
    background: #33b902;
    color: #fff;
    border: 0;
    outline: none;
    font-size: 18px;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
    
}
/* end of the page */
footer{
    position: relative;
    height: 10vh;
    background-color: #090909;
    color: white;
    /* margin-top: 65px; */
    text-align: center;
    font-size: 30px;
    letter-spacing: 7px;
 }

.form-wrap2{
    margin-top: 100px;
}





@media(max-width:1250px){
    html{
        font-size: 53%;
    }
    header{
        height:10vh;
        padding: 1rem 0 0 40rem;
    }
    .logo{
        position: absolute;
        left:0;
        font-size:31px ;
        padding: 1rem 1rem 0 2rem;
    }
    section h2{
        height: 10vh;
         color: rgb(249, 249, 252);
         font-size: 60px;
         font-family: Georgia, 'Times New Roman', Times, serif;
        font-style: italic;
     
     }
    .header2{
        height: 10vh;
        width:100%;
        display: flex;
        justify-content:center;
        align-items: center;
        overflow: hidden;
        padding:15px;
        background-color: yellow;
        font-size: 50px;
        letter-spacing: 15px;
    }
    
    .cont2{
        background-color: #fdfafa;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height:90vh;
        gap:30px;
    }
    .box3{
        background-color: #e0dede;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap:1px;
        height: 25vh;
        width:700px;
        box-shadow: 14px 14px 1px rgba(8, 8, 8, 0.932);
        
    }
    .box3 h3{
        background-color: rgb(13, 13, 14);
        opacity: 0.8;
        font-size: 25px;
        color: rgb(253, 253, 251);
        font-family: Georgia, 'Times New Roman', Times, serif;
        width:700px;
        position: relative;
        top:0;
    }
    hr{
        width: 700px;
    }
    .box3 p{
        font-size: 18px;
    }
    .box3 h4{
        font-size: 22px;
        color: rgb(198, 38, 38);
        letter-spacing: 5px;
    }
    .box3 ul li{
        font-size: 15px;
    }
    
    #page7 h2{
        font-size: 80px;
        text-align: center;
    }

    #page8 .about{
        padding: 48px 0;
     }
     #page8 .about img{
        height: 450px;
        width: 380px;
     }
     .about-text{
     width:550px;
     margin-left: 5px;
     margin-top: 85px;
     }
     .about-text h1{
        font-size: 60px;
        margin-bottom: 20px;
        font-family: Georgia, 'Times New Roman', Times, serif;
     }
     .about-text h5{
        font-size: 35px;
        letter-spacing: 2px;
        margin-bottom: 25px;
     }

     .about-text p{
        color: rgb(117, 81, 68);  
        font-size: 13px;
     }
    #page3 h2{
        font-size: 40px;
        letter-spacing: 6px;
    }

    #page4 h2{
        font-size: 50px;
        letter-spacing: 9px;
    }
/* dynamic form */
    #page6 .semi-cont p{
        font-size: 30px;
        color: red;
    }
/* contact us */
    
     .info-details li{
        font-size: 14px;
    }
    .info-wrap{
        font-size: 20px;
        
    }
    .form-wrap{
        border-radius: 0px 0px 30px 30px;
    }
    .form-group{
        width: 100%;
        float: none;
        margin: 15px 0px;
        height: 65px;
    }
    .submit-button{
        margin: 10px 0px;
    } 
    .social-icons li i {
        margin: 15px 5px;
    }
    #page8 .about .last-page img{
        margin-top: 100px;
        height: 350px;
    }
    .header2{
        height: 8px;
        visibility: hidden;
      }

}






@media(max-width:750px){

    .logo{
        display: none;
    }
      .navbar{
        display: inline-block;
        font-size: 100px;
        line-height: 0;
        margin-bottom: 31px;
    }

    header .navbar a{
        font-size: 18px;
        
    }
    
    #page1 section h2{
           display: flex;
        flex-grow: 1;
        font-size: 580%;
        text-align: center;
    }
     #page1 section img{
        max-height: 550px;
    }


#page7 h2{
    width: 99vw;
    font-size: 60px;
    text-align: center;
    margin: 0 3px;
    margin-top: 80px;
}
#page7 .container{
    margin-bottom: 136px;
}

#page8  .last-page{
    display: flex;
    flex-direction: column;
 }
 #page8 .about .last-page img{
    margin-top: 70px;
    height: 300px;
    width:90%;
}
 .about-text{
 width:90%;
 text-align: center;
 }
 .about-text h1{
    display: none;
 }
 .about-text h5{
    font-size: 42px;
    letter-spacing: 2px;
    margin-bottom: 15px;
    margin-top: -50px;
 }
 .about-text p{
    color: rgb(117, 81, 68);  
    font-size: 15px;
 }

/* our plans */
    .header2{
      display: none;
    }
    .cont2{
        margin-top: 30px;
        background-color: #fdfafa;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height:95vh;
        gap:40px;
    }
    .box3{
        background-color: #e0dede;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap:1px;
        height: 25vh;
        width:300px;
        box-shadow: 14px 14px 1px rgba(8, 8, 8, 0.932);
    }
    .box3 h3{
        background-color: rgb(13, 13, 14);
        opacity: 0.8;
        font-size: 20px;
        color: rgb(253, 253, 251);
        font-family: Georgia, 'Times New Roman', Times, serif;
        width:300px;
        position: relative;
        top:0;
    }
    hr{
        width: 300px;
    }
    .box3 p{
        font-size: 15px;
    }
    .box3 h4{
        font-size: 20px;
        color: rgb(198, 38, 38);
    
    }
    .box3 ul li{
        font-size: 14px;
    }

/* survey */
    #page3 h2{
        font-size: 30px;
        letter-spacing: 3px;
    }
    .box{
        width: fit-content;
    }
    .box label{
        margin-right: 15px;
        font-size: 20px;
    }
    .box input{
        width: 70px;
    }
    #submit1 button{
        height: 50px;
        width:70px;
        font-size: 20px;
    }
    hr{
        margin-top: 20px;
    }

    /* dynamic form */
       #page6 h2{
            font-size: 40px;   
        }
        .semi-cont{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        #page6 .semi-cont p{
            font-size: 15px;
            color: red;
        }
       #btn6{
        height: 45px;
        border-radius: 10px;
        font-size: 30px;
       }
       #dform{
        width:80%;
        margin-left: 40px;
       }
       .cont-input2{
        width: 90%;
       }
      
/* cpntact us */
.box1{
    width: 100%;
}

.form-wrap{
    width: 100%;
    height: 100vh;
    float: none;  
}
.info-wrap{
    display: none;
}
.form-wrap{
    border-radius: 0px 0px 30px 30px;
}
.form-title{
    margin-top: 60px;
    font-size: 50px;
}
.form-group{
    width: 100%;
    float: none;
    margin: 15px 0px;
    height: 65px;
}
.submit-button{
    margin: 10px 0px;
}


       /* review */
       #page88 h2{
        position: relative;
        top:60px;
        font-size: 40px;
        letter-spacing: 8px;
    }
    #page88 .box2{
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
        margin-top:60px;

    }
    #textarea1{
        width:70%;
        height: 100px;
    }
    #page88 .submit2{
        height: 35px;
        width: 20%;
        font-size: 20px;
        margin-bottom: 80px;
        }

        .popup{
            width: 300px;
            padding: 0 30px 30px;
           
        }
        
        .popup img{
            width: 70px;
            height: 70px;
            margin-top: -38px; 
        }
        .popup h3{
            font-size: 35px;
            font-weight: 500;
            margin: 10px 0 0 0;
        }
        .popup p{
            font-size: 20px;
            margin: 20px 0 10px;
        }
        .popup button{
            width: 80%;
            margin-top: 10px;
            padding: 10px 0;
            font-size: 20px;
            
            
        }
       
 }