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

}

.header{
background: linear-gradient( to bottom, rgb(0, 20, 87), rgb(0, 53, 167));
width: 100%;
height: 90vh;
margin-bottom: 100px;
text-align: center;
color: white;

}

.nav-bar{
display: flex;
color: rgb(201, 201, 201);
justify-content: space-around;
height: 80px;
width: 100%;
align-items: center;
font-size: larger;
gap: 50px;
font-family: Arial, Helvetica, sans-serif;
text-transform: capitalize;
font-weight: bold;
}

.nav-bar ul{
list-style-type: none;
font-size: larger;
gap: 50px;
font-family: Arial, Helvetica, sans-serif;
display: flex;
text-transform: capitalize;


}

.nav-bar li:hover{
color: white;
transition: 1s ease-in-out;

}

.nav-bar p{
color: white;
font-size: xx-large;

}

.nav-bar button{
width: 250px;
height: 60px;
font-size: x-large;
outline: none;
border: solid white;
color: white;
background: none;
border-radius: 30px;
text-transform: capitalize;

}


.div1{
width:auto ;
display: flex;
justify-content: center;
align-items: left;
height: 85vh;
font-size: x-large;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
flex-direction: column;
padding: 30px;
position: absolute;
top: 0px;
left: 0px;
text-align: left;
line-height: 40px;

}

.div1 button{
color: white;
background: linear-gradient(rgb(34, 86, 255), rgb(94, 145, 255),rgb(141, 219, 255),rgb(117, 246, 255) );
height: 70px;
width: 170px;
font-size: large;
border: none;
outline: none;
border-radius: 50px;
margin-top: 10px;

}

.main{
    /* position: relative; */
display: flex;
justify-content:space-around;
align-items: center;

}

.div2 {
position:relative;
width: 1000px;

}

.hero-img{
position:relative;


}



.Popular-Destination{
font-size: xx-large;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
text-align: center;
color: rgb(26, 26, 26);
margin-bottom: 100px;

}

.div3{
display: flex;
justify-content: space-around;
align-items: center;
height: 60vh;
width: 100%;
/* border: solid; */
text-align: center;
margin-bottom: 100px;

}

.div4{

height: 65vh;
/* border: solid; */
width: 30vw;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
line-height: 50px;
transition: 1s ease-in-out;

}

.div4 h5{
font-size: xx-large;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
color: rgb(11, 32, 63);
}

.div4 p{
font-size: x-large;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
color: rgb(11, 32, 63);
}

.div5{
width: 200px;
height: 200px;
border-radius:50% ;
/* border: solid; */
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
background-color: white;

}

.div5 img{

width: 90px;
height: 90px;

}

.div4:hover{

background: linear-gradient(rgb(34, 86, 255), rgb(94, 145, 255),rgb(141, 219, 255),rgb(117, 246, 255) );
transition:2s ease-in-out;

}

.div6{
width: 100%;
height: 80vh;
background-color: whitesmoke;
display: flex;
justify-content: space-around;
align-items: center;

}

.div8 h2{
font-size: 50px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
text-transform: capitalize;
color: rgb(11, 32, 63);
padding-bottom:100px ;
box-sizing: border-box;

}


.div9{
display: flex;
justify-content: center;
align-items: center;
width: 40vw;
align-items: center;
margin-bottom: 50px;

}

.bold{
font-size: xx-large;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
color: rgb(11, 32, 63);

}

.light{
font-size: larger;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
color: rgb(11, 32, 63);
line-height: 40px;

}

.div9 img{
width: 100px;
height: 100px;
margin-right: 30px;

}

.div8 button{
height: 70px;
width: 200px;
font-size: x-large;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
color:white;
background: linear-gradient(rgb(34, 86, 255), rgb(94, 145, 255),rgb(141, 219, 255),rgb(117, 246, 255) );
text-transform: capitalize;
border: none;
border-radius: 30px;
outline: none;

}

.div8 button:hover{
background: linear-gradient( to bottom, rgb(34, 86, 255), rgb(94, 145, 255),rgb(141, 219, 255),rgb(117, 246, 255) );

}

.div11{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 90vh;
background: linear-gradient( to bottom, rgb(0, 20, 87), rgb(0, 53, 167));
margin-bottom: 100px;



}

.div12{
display: flex;
justify-content:space-around;
align-items: center;
width: 100%;
height: auto;
margin-bottom: 50px;
}

.child{
width: 40%;
height: auto;

}

.child h2{
font-size: 45px;
color: white;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;


}

.child p{
font-size: x-large;
color: white;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;


}

.div13{
display: flex;
justify-content: space-around;
align-items: center;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
color: white;
text-align: center;

}

.child1{
border: solid rgb(17, 13, 139) 0.5px;
height: 30vh;
width: 20vw;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size:x-large;
margin: 20px;

}

.child1 img{
width: 70px;
height: 70px;

}

.child1:hover{

background-color:rgb(17, 13, 139) ;

}

.div14{
font-size: x-large;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
margin-top: 70px;

}

.div15{
font-size: x-large;
font-family: Arial, Helvetica, sans-serif;
color: rgb(10, 8, 48);
width: 100%;
text-align: center;
line-height: 40px;

}

.div15 button{
outline: none;
border: solid rgb(238, 96, 80) 0.5px;
height: 70px;
width: 300px;
font-size: x-large;
color:rgb(255, 97, 80);
background: none;
margin:  100px 0px;
border-radius: 50px;


}


.div15 button:hover{

font-weight: bold;
background-color:rgb(10, 8, 48) ;
color: white;
border: none;
transition: 1s ease-in-out;


}

.div16{
font-size: xx-large;
font-family: Arial, Helvetica, sans-serif;
width:100% ;
height: auto;
display: flex;
justify-content: space-around;
align-items: center;
margin-bottom: 100px;
}

.child2{
width: 90%;
height: auto;
/* border: solid; */
align-items: center;
justify-content: center;
display: flex;
text-align: center;
flex-direction: column;
color: rgb(10, 8, 48);


}

.div17{
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 100px;
/* height: 0vh; */

}

.child3{
width:1000px;
font-size: larger;
margin: 50px;
line-height: 50px;
/* border: solid; */

}

.child3 img{
width: 200px;
height: 70px;

}

input{
height: 60px;
width: 300px;
outline: none;
border-radius: 30px;
font-size: large;
color: rgb(10, 8, 48) ;
padding: 20px;
margin-top: 20px;

}

/* 
break point */



@media (max-width:768px) {




.nav-bar{
display: flex;
color: rgb(201, 201, 201);
justify-content: space-around;
height: 80px;
width: 100%;
align-items: center;
font-size: large;
gap: 20px;
font-family: Arial, Helvetica, sans-serif;
text-transform: capitalize;
/* font-weight: bold; */
position: fixed;
background:  rgb(0, 20, 87) ;

}

.nav-bar ul{
list-style-type: none;
font-size: large;
gap: 20px;
font-family: Arial, Helvetica, sans-serif;
display: flex;
text-transform: capitalize;


}

.nav-bar li:hover{
color: white;
transition: 1s ease-in-out;

}

.nav-bar p{
color: white;
font-size: larger;

}


.nav-bar button{
width: 250px;
height: 60px;
font-size: x-large;
outline: none;
border: solid white;
color: white;
background: none;
border-radius: 30px;
text-transform: capitalize;
display: none;
}


.div1{
width:auto ;
display: flex;
justify-content: center;
align-items: left;
height: 85vh;
font-size: x-large;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
flex-direction: column;
padding: 30px;
position: absolute;
top: 0px;
left: 0px;
text-align: left;
line-height: 40px;

}

.div1 button{
color: white;
background: linear-gradient(rgb(34, 86, 255), rgb(94, 145, 255),rgb(141, 219, 255),rgb(117, 246, 255) );
height: 70px;
width: 170px;
font-size: large;
border: none;
outline: none;
border-radius: 50px;
margin-top: 10px;

}

.main{
    /* position: relative; */
display: flex;
justify-content:space-around;
align-items: center;

}

.div2 {
position:relative;
width: 1000px;

}

.hero-img{
position:relative;
display: none;

}

.div3{
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
height: 250vh;
width: 100%;
/* border: solid; */
text-align:center;
/* margin-bottom: 100px; */

}

.div4{

height: 65vh;
/* border: solid; */
width: 50vw;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
line-height: 50px;
transition: 1s ease-in-out;

}

.div4 h5{
font-size: xx-large;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
color: rgb(11, 32, 63);
}

.div4 p{
font-size: x-large;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
color: rgb(11, 32, 63);
}

.div5{
width: 200px;
height: 200px;
border-radius:50% ;
/* border: solid; */
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
background-color: white;

}

.div5 img{

width: 90px;
height: 90px;

}

.div4:hover{

background: linear-gradient(rgb(34, 86, 255), rgb(94, 145, 255),rgb(141, 219, 255),rgb(117, 246, 255) );
transition:2s ease-in-out;

}

.div6{
width: 100%;
height: 170vh;
background-color: whitesmoke;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
margin-bottom: 100px;
}

.div8 h2{
font-size: xx-large;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
text-transform: capitalize;
color: rgb(11, 32, 63);
padding-bottom:100px ;
box-sizing: border-box;

}


.div9{
display: flex;
justify-content: left;
flex-direction: column;
align-items: start;
width: 60vw;
margin-bottom: 50px;

}

.bold{
font-size: x-large;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
color: rgb(11, 32, 63);

}

.light{
font-size: large;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
color: rgb(11, 32, 63);
line-height: 40px;

}

.div9 img{
width: 100px;
height: 100px;
margin-right: 30px;

}

.div8 button{
height: 70px;
width: 200px;
font-size: x-large;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
color:white;
background: linear-gradient(rgb(34, 86, 255), rgb(94, 145, 255),rgb(141, 219, 255),rgb(117, 246, 255) );
text-transform: capitalize;
border: none;
border-radius: 30px;
outline: none;

}

.div8 button:hover{
background: linear-gradient( to bottom, rgb(34, 86, 255), rgb(94, 145, 255),rgb(141, 219, 255),rgb(117, 246, 255) );

}


.div11{
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
width: 100%;
height: 200vh;
background: linear-gradient( to bottom, rgb(0, 20, 87), rgb(0, 53, 167));
margin-bottom: 100px;



}

.div12{
display: flex;
flex-direction: column;
justify-content:space-evenly;
align-items: center;
width: 100%;
height: auto;
margin-bottom: 50px;
}

.child{
width: 100%;
height: auto;
margin: 20px;
}

.child h2{
font-size: 45px;
color: white;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
margin: 20px;

}

.child p{
font-size: x-large;
color: white;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
margin: 20px;

}

.div13{
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
color: white;
text-align: center;
width: 100%;

}

.child1{
border: solid rgb(17, 13, 139) 0.5px;
height: 30vh;
width:90%;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size:xx-large;
margin: 20px;

}

.child1 img{
width: 70px;
height: 70px;

}

.child1:hover{

background-color:rgb(17, 13, 139) ;

}

.div14{
font-size: x-large;
color: white;
display: flex;
justify-content: space-evenly;
align-items: center;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
margin-top: 70px;
margin-bottom: 100px;

}

.div16{
font-size: x-large;
font-family: Arial, Helvetica, sans-serif;
width:100% ;
height: auto;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
margin-bottom: 100px;
}

.child2{
width: 90%;
height: auto;
/* border: solid; */
align-items: center;
justify-content: center;
display: flex;
flex-direction: column;
text-align: center;
flex-direction: column;
color: rgb(10, 8, 48);
margin: 20px;

}

.div17{
display: flex;
justify-content: space-evenly;
align-items: center;
margin-top: 100px;
height: 130vh;
width: 100%;
flex-direction: column;
margin-bottom:100px ;
}

.child3{
width:100%;
font-size: larger;
margin: 50px;
line-height: 50px;
/* border: solid; */

flex-direction: column;
display: flex;

}

.child3 img{
width: 200px;
height: 70px;

}

input{
height: 60px;
width: 300px;
outline: none;
border-radius: 30px;
font-size: large;
color: rgb(10, 8, 48) ;
padding: 20px;
margin-top: 20px;

}







    
}