The display flex is not working - Posts

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Explore The World</title> <link rel="stylesheet" href="style.css"> </head> <body> <header class="header"> <a href="#" class="logo">Explore The World</a>

   <nav class="navbar">
        <a href="#">Home</a>
        <a href="#">Packages</a>
        <a href="#">Blog</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
    </nav>
</header>

<section class="landingvideo">
        <video autoplay muted loop>
            <source src="naturevideo.mp4">
        </video>

        <div class="overlaycontent">
            <h1>Explore the world</h1>
            <p>Embark on a journey of discovery as you explore the breathtaking beauty of nature's wonders.</p>
            <a href="#" class="button1">Learn More</a>
        </div>
</section>

<section class="secondclass">
    <div class="text">
         <p>Come and explore the vast wonders of the world through our state of the art digital experiences, and let us help you find the right destination for you.</p>
    
    </div>

    <img src="man in nature.jpg" alt="man">

</section>

<section class="packages">
    <div class="image1">
        <img src="package1.jpg" alt="pic">
    </div>

    <div class="title1">
        <h1>See the fucking beauty of the nature</h1>
    </div>

    <div class="des">
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae recusandae autem cum obcaecati esse dolorem?</p>

        <button>Read more</button>

    </div>

    <div class="image1">
        <img src="package2.jpg" alt="pic">
    </div>

    <div class="title1">
        <h1>See the fucking beauty of the nature</h1>
    </div>

    <div class="des">
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae recusandae autem cum obcaecati esse dolorem?</p>

        <button>Read more</button>

    </div>

    <div class="image1">
        <img src="package3.jpg" alt="pic">
    </div>

    <div class="title1">
        <h1>See the fucking beauty of the nature</h1>
    </div>

    <div class="des">
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae recusandae autem cum obcaecati esse dolorem?</p>

        <button>Read more</button>

    </div>


</section>

</section> </body> </html>

Css

*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: helvetica;

}

.header{
position:fixed;
width: 100%;
padding: 20px 10%;
display:flex;
justify-content: space-between;
align-items: center;
z-index: 100;
text-decoration: none;
background-color: rgba(0 , 0, 0, 0.3);

}

.logo{
text-decoration: none;
color: black;
font-size: 25px;
font-weight: 700;

}

.navbar a{
color: rgb(255, 255, 255);
text-decoration: none;
margin-left: 35px;
font-size: 25px;

}

.landingvideo{
position: relative;
width: 100%;
height: 100vh;

}

.landingvideo video{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

.overlaycontent{
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
padding: 20px;
color: #dce65b;
font-size: 50px;
margin-top: 220PX;
margin-left: 160px;

}

.overlaycontent h1{
font-size: 70px;
margin-bottom: 5px;
text-transform: uppercase;
font-family: franklin gothic medium;

}

.overlaycontent p{
font-size: 20px;
margin-bottom: 5PX;
color: bisque;
}

.button1{
display: inline-block;
padding: 10px 20px;
width: 22%;
text-decoration: none;
font-size: 30px;
border: 2px solid #d6e419;
border-radius: 20px;
background-color: red;
transition: background-color 0.3s;

}

.button1:hover{
background-color: rgb(51, 107, 228);

}

.secondclass img{
width: 30%;
padding: 40px;
border-radius: 20px;

}

.secondclass{
position: relative;
display: flex;
align-items: center;
justify-content: space-around;
padding: 40px;
width: 100%;
height: 100vh;
background-color:#38a7fc;

}

.secondclass .text{
font-size: 40px;
width: 50%;
margin-left: 180px;

}

.packages-container{

margin-top: 20px;

}

.packages{
width: 33%;

background-color: beige;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 10px;
border-radius: 15px;
box-shadow: 2px 2px 15px black;

}

.image1 img{
width: 100%;
border-top-right-radius: 15px;
border-top-left-radius: 15px;

}

.title1 h1{
text-align: center;
margin-top: 20px;

}

.des {
text-align: center;
margin-top: 20px;

}

button{
margin-top: 20px;
font-size: 25px;
cursor: pointer;
background-color: aliceblue;
color: black;
border-radius: 5px;
padding-left: 15px;
padding-right: 15px;
padding-top: 7px;
padding-bottom: 7px;
border: 1px solid blue;

}

button:hover{
background-color: #dce65b;
color: darkblue;
transition: .5s;
}