* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100vh;
    width: 100%;
   
}

.main{
font-family: "Noto Sans", sans-serif;
}

#page1 {
    display: flex;
        flex-direction: column;
height: 110vh;
    width: 100%;
    background-color: rgb(0, 0, 0);
    

}


nav{
    height: 18vh;
    /* background-color: rgb(0, 0, 0); */
    width: 100%;
    display: flex;
    flex-direction: column;
    /* position: fixed; */
    align-items: center;
    /* position: fixed; */
    /* z-index: 50; */
/* border: 2px solid white; */
opacity: 0.9;
}

.nav1{
    width: 70vw;
    /* height: 40%; */
/* background-color: rgb(0, 0, 0); */
display: flex;
justify-content: space-between;
align-items: center;
padding: 2vh;
font-size: 15px;
font-family: "Noto Sans", sans-serif;
}
.nav2{
    width: 70vw;
    
    display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
font-family: "Noto Sans", sans-serif;
}

#logo{
    width: 3vw;
        height: 3vh;
       
        filter: invert(1);
}

.nav1 ul {
    display: flex;
        
        gap: 20px;
        list-style: none;
}
.nav1 ul li a{
    text-decoration: none;
        color: rgb(210, 206, 206);
}

#navsearch img {
    width: 1vw;
    height: 2vh;
    filter: invert(1);
}

#navsearch {
    padding: 10px;


}

.vid1{
    /* padding-top: 5vh; */
    width: 100%;
    height: 100vh;
    /* background-color: red; */
  position: relative;
object-position: center;
display: flex;
justify-content: center;
/* flex-direction: column; */
}


.vid1 video{
  width: 75%;
  height: 100%;
  object-fit: cover;
  /* position: absolute; */
object-position: center;
}

.contentimg{
position: absolute;
display: flex;
top: 75vh;
 left: 35vw;   
justify-content: center;
align-items: center;
flex-direction: column;
}

.contentimg img{
    filter: invert(1);
    width: 30vw;
    height: 10vh;

}
.contentimg h2{
    color: white;
    text-align: center;
    margin-bottom: 20px;
}




.chatbot {
    position: fixed;
    width: 3vw;
    padding: 6px;
    display: block;
    background-color: grey;
    top: 90%;
    right: 3%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    cursor: pointer;
 z-index: 200;
 
}

.chatbot img {
    filter: invert(1);
    width: 5vw;
    height: 5vh;
    /* position: relative; */
}

.displaychat {
    width: 20vw;
    height: 65vh;
    background-color: rgb(255, 255, 255);
    position: fixed;
    z-index: 200;
    top: 23%;
    right: 2%;
    border-radius: 20px;
    display: flex;
    transition: all 0.5 ease-in;
    flex-direction: column;
   
}

.heading{
    width: 100%;
    height: 15%;
    background-color: rgb(200, 200, 254);
    border-radius: 10px;
    z-index: 1;
    display: flex;
    align-items: center;
    padding: 2px;
    justify-content: center;
    flex-direction: column;
}

.chat{
    width: 100%;
    height: 73%;
    background-color: rgb(255, 255, 255);
    overflow-y: scroll;
}

.inputbox{
    width: 100%;
    height: 10%;
    background-color: rgb(255, 255, 255);
    display: flex;
    align-items: center;
    border-radius: 20px;
    padding: 5px;
}

.inputbox input{
    width: 90%;
    height: 100%;
    border-radius: 50px;
    

}
.inputbox img{
    width: 30px;
    height: 30px;
    padding: 1px;
}


.hide{
    opacity: 0;
    visibility: hidden;
}


.chat-incoming{
width: 60%;
background-color: rgb(200, 200, 254);
padding: 10px;
display: block;
margin: 10px;
    font-size: 20px;
        border-radius: 5px;
        padding: 10px;
}
.chat-outgoing{
    width: 80%;
    font-size: 20px;
    border-radius: 5px;
    padding: 10px;
   display: block;
background-color: rgb(184, 184, 187);
    margin: 10%;
    margin-left: 15%;
}

.message{
    width: 20vw;
    height: 8vh;
background-color: rgb(184, 184, 187);
    position: fixed;
    top:90vh ;
    left: 10vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
border-radius: 10px;
scale: 0;
}

#imgmessage{
width: 18%;
height: 100%;
padding: 10px;

}

#imgmessage img{
    width: 100%;
    height: 100%;
}

#contentmessage{
    width: 90%;
    height: 100%;
    display: flex;
    align-items: center;
}

#closedcontent{
    width: 10%;
    height: 100%;
  
}

#closecontent{
    width: 10%;
    height: 100%;
    /* padding: 10px; */
    display: flex;
    align-items: center;
    /* justify-content: center; */
}

#closedcontent img{
    width: 100%;
        height: 50%;
        filter: invert(0);
        padding: 1px;
}


.popup{
    width: 30vw;
    height: 50vh;
background-color: rgb(184, 184, 187);
    position: fixed;
    display: flex;
    align-items: center;
    z-index: 10;
    top: 20vh;
    flex-direction: column;
    justify-content: center;
    padding: 10px;
    border-radius: 10px;
    
}
.popup > :nth-child(1){
width: 60%;
height: 30%;
object-fit: cover;
}

.popup> :nth-child(1)>img{
    width: 100%;
    height: 100%;
    padding: 10px;
}

.popup> :nth-child(2) {
    width: 100%;
    height: 50%;
    font-size: 15px;
}
.popup> :nth-child(3) {
    width: 100%;
   
}

.popup> :nth-child(3) input{
width: 100%;
height: 5vh;
}

.send1{
    margin: 2px;
width: 4vw;
    height: 4vh;
    font-size: 15px;
    border: none;
    cursor: pointer;
}
  
.notnow{
        margin: px;
            width: 4vw;
            height: 4vh;
            font-size: 15px;
            /* padding: 5px; */
            border: none;
            cursor: pointer;
}

.internetconnection{
    position: fixed;
    top: 10vh;
background-color: rgb(210, 210, 213);
    width: 30vw;
    padding: 10px;
    border-radius: 10px;
    z-index: 10;
visibility: hidden;
}

.internetconnection button{
    margin: 10px;
    width: 10vw;
    height: 5vh;
    font-size: 15px;
    border: none;
    cursor: pointer;
    
}

.page{
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    background-color: black;
    position: fixed;
    width: 100%;
    height: 100vh;
    z-index: 11;
    flex-direction: column;
    font-size: 25px;
    /* visibility: hidden; */
}

#page3{
    width: 100%;
    display: flex;
        justify-content: center;
        align-items: center;
    height: 100vh;
    color: white;
    background-color: black;
    opacity: 0.9999;
    /* z-index: ; */
}


#page2 {

    height: 100vh;
    width: 100%;
    /* background-color: rgb(255, 255, 255); */
display: flex;
    justify-content: center;
    align-items: center;

}

#page2 video{
width: 100%;
height: 100vh;
object-fit: cover;
opacity: 1;
}

#page2 div{
 position: absolute;  
 /* align-items: center;  */
 white-space: nowrap;
 color: white;
/* text-align: center; */
margin-top: 200px;
}

#page2 div h1{
  font-size: 45px;
  
}



#page3 video{
    width: 100%;
    height: 100vh;
    object-fit: cover;
    z-index: 10;
}
#page3 div{
position: absolute;
    /* align-items: center;  */
    white-space: nowrap;
    color: white;
    /* text-align: center; */
    margin-top: 200px;
    z-index: 100;
}



#page4{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#page4 div img{
filter: invert(1);
width: 35vw;
height: 12vh;
}

#page4 div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#page4 div h2{
color: #ff5a00;
  
}
.flim:hover{
    cursor: pointer;
    border-bottom: 3px solid #ff5a00;
   
}



.watch:hover{
    cursor: pointer;
        border-bottom: 3px solid #ff5a00;
}


#page5{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}


#page5 img{
    width: 70%;
    height: 70vh;
    object-fit: cover;
}
#page5 button {
    width: 18vw;
    height: 8vh;
    font-size: 25px;
    border-radius: 50px;
    border: 3px solid black;
    cursor: pointer;
}
#page5 button:hover{
    background-color:rgb(76, 76, 76) ;
    color: white;
transition: all 0.5s ease-out;
}

#page6{
    width: 100%;
    height: 100vh;
display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}

#page6 video{
    width: 100%;
    height: 100vh;
    object-fit: cover;

}

#page6 div{
    position: absolute;
    color: rgb(255, 255, 255);
    margin-top: 200px;
    width: 60vw;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}


#page6 div h1{
    font-size: 60px;
    flex-wrap: nowrap;
}

#page7{
    width: 100%;
    height: 80vh;
    background-color: #f5f5f7;
    display: flex;
    padding: 50px;
    /* padding: 20px; */

}

.left7{
    width: 25%;
    height: 100%;
    padding: 20px;
    margin: 20px;
}
.right7{
    width: 50%;
    height: 100%;
    padding: 20px;
    font-size: 20px;
    margin: 20px;
    display: flex;
    /* justify-content: center; */
    color: rgb(104, 104, 104);
    font-weight: 500;
 flex-direction: column;
    
}

.right7 button{
    width: 20vw;
    height: 7vh;
    font-size: 20px;
    border-radius: 50px;
    padding: 5px;
    background-color: #ff5a00;
    color: white;
    margin-top: 30px;
    border: none;
    cursor: pointer;
}


#page8{
    width: 100%;
    height: 100vh;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#page8 div{
    width: 50%;
    height: 16vh;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 30px;
    position: absolute;
    color: white;
    margin-top: 200px;
}
#page8 video{
    width: 100%;
    height: 100vh;
    object-fit: cover;
    
}



#page9{
    width: 100%;
    height: 60vh;
    background-color: #f5f5f7;
    display: flex;
    padding: 50px;
    /* padding: 20px; */

}

.left7 {
    width: 25%;
    height: 100%;
    padding: 20px;
    margin: 20px;
}

.right7 {
    width: 50%;
    height: 100%;
    padding: 20px;
    font-size: 20px;
    margin: 20px;
    display: flex;
    /* justify-content: center; */
    color: rgb(104, 104, 104);
    font-weight: 500;
    flex-direction: column;

}

.right7 button {
    width: 20vw;
    height: 7vh;
    font-size: 20px;
    border-radius: 50px;
    padding: 5px;
    background-color: #ff5a00;
    color: white;
    margin-top: 30px;
    border: none;
    cursor: pointer;
}

#page10{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#page10 div{
    position: absolute;
    color: white;
    width: 50vw;
    height: 18vh;
    /* background-color: red; */
    padding: 10px;
    font-size: 35px;
    text-align: center;
    align-items: center;
    display: flex;
    margin-top: 200px;
}

#page10 video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#page11{
    width: 100%;
        height: 60vh;
        background-color: #f5f5f7;
        display: flex;
        padding: 50px;
}

#page12{
width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#page12 div{
    position: absolute;
        color: white;
        width: 50vw;
        height: 18vh;
        /* background-color: red; */
        padding: 10px;
        font-size: 35px;
        text-align: center;
        align-items: center;
        display: flex;
        margin-top: 200px;
}

#page12 video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#page13{
    width: 100%;
    height: 100vh;
    background-color: #f5f5f7;
    display: flex;
    justify-content: center;
}

.page13in{
    display: flex;
    flex-direction: column;
    width: 50vw;
    height: 100vh;
background-color: #f5f5f7;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    flex-wrap: nowrap;
    text-align: center;
}

.page13in>p{
    color: #89868b;
    font-size: 25px;
    font-weight: 500;
    margin: 35px;
}

.page13in>h4{
    font-size: 20px;
    /* margin: 20px; */
}
.page13in>h1{
    font-size: 60px;
    font-weight: 8000;
    /* flex-wrap: nowrap; */
}
.page13in >  img
{
    padding: 10px;
}
#page14{
    width: 100%;
    height: 150vh;
    background-color: white;
    display: flex;
   /* gap: 40px; */
   /* gap: -50px; */

}


#page14 div{
    width: 100%;
    height: 90%;
/* margin: 20px; */
display: flex;
gap: 20px;
/* justify-content: space-around; */
}

#page14 div img{
width: 100%;
height: 100%;
object-fit: cover;
/* padding-left: 50px; */
display: flex;
/* justify-content: start; */
}

#page15{
    width: 100%;
    height: 150vh;
    background-color: white;
    display: flex;
    justify-content: center;
    /* align-items: center; */
    text-align: center;
}
#page15:first-child{

}


#page15 div h1{
    width: 44%;
 text-align: center;
font-size: 20px;
background-color: #ffffff;
    color: #86868b;
    font-weight: 500;
}
#page15 div h1 span{
color: black;
}


#page15 div img{
scale: 1.5;
object-fit: cover;
}

#page16{
width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

}

#page16 div{
    position: absolute;
        color: white;
        width: 60vw;
        height: 18vh;
        /* background-color: red; */
        padding: 10px;
        font-size: 35px;
        text-align: center;
        align-items: center;
        display: flex;
        margin-top: 200px;
        flex-direction: column;
}

#page16 video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#page17{
    width: 100%;
    height: 50vh;
    background-color: #f5f5f7;
    display: flex;
    justify-content: center;
}

/* Scrollbar Track */
::-webkit-scrollbar {
    width: 12px;
    /* width of the scrollbar */
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
    /* color of the scrollbar handle */
    border-radius: 6px;
    /* roundness of the scrollbar handle */
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
    /* color of the scrollbar handle on hover */
}

/* Track */
::-webkit-scrollbar-track {
    background: #fff;
    /* color of the scrollbar track */
}

#page19{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
}
#page19 div{
    width: 60%;
    height: 90vh;

}
#page19 div img{
    object-fit: contain;
    width: 100%;
    height: 100%;

}

#page20{
    width: 100%;
    height: 40vh;
    display: flex;
    justify-content: center;
   
}


#page21{
    width: 100%;
        height: 100vh;
        background-color: #f5f5f7;
        display: flex;
        justify-content: center;
        font-size: 30px;
}
#page21 div {
    text-align: center;
}


#page22{
    width: 100%;
        height: 100vh;
        background-color: #f5f5f7;
        display: flex;
        justify-content: center;
        font-size: 30px;
}

footer {
    background-color: #f9f9f9;
    font-family: Arial, sans-serif;
    color: #333;
    padding: 40px 20px;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.footer-column {
    flex: 1 1 200px;
    margin: 10px;
}

.footer-column h4 {
    font-size: 18px;
    margin-bottom: 15px;
    color: #000;
}

.footer-column ul {
    list-style: none;
    padding: 0;
}

.footer-column ul li {
    margin-bottom: 10px;
}

.footer-column ul li a {
    text-decoration: none;
    color: #555;
    font-size: 14px;
}

.footer-column ul li a:hover {
    text-decoration: underline;
    color: #0071e3;
}

.footer-bottom {
    margin-top: 30px;
    text-align: center;
    font-size: 14px;
}

.footer-bottom a {
    text-decoration: none;
    color: #0071e3;
}

.footer-bottom a:hover {
    text-decoration: underline;
}