/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }


  
}
/* ---------------- */
/* utility classes  */
/* ---------------- */
.flex{
  display: flex;
  gap: var(--gap, 1rem);

}
.grid{
  display: grid;
  gap: var(--gap, 1rem);

}


/* The navigation bar */    
.navbar {
  overflow: hidden;
  background-color: transparent   ;
  position: absolute; /* Set the navbar to fixed position */
  top: 10%; /* Position the navbar at the top of the page */
  width: 100%; /* Full width */
  border-left: transparent;
  border-right: transparent;
  border-width: 0px;
  font-size: 1vw;
  position: center;
  font-family: 'Poppins';
  display: flex;
  justify-content: left;
 
  
  

}

/* Links inside the navbar */
.navbar a {
float: left;
display: block;
color: #000000;
text-align: center;
padding: 1px 1px;
text-decoration: none;
position: relative;
margin: 1.333vw;

}

/* Change background on mouse-over */
.main {
  margin-top: 30px; /* Add a top margin to avoid content overlay */
  
}


/* Main content */
.navbar a:hover {
  /*background-color: #FFEEDD;*/
  color: black;
  border-radius: 50px;
 
  
}



.navbar a::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 1px;
  bottom:0;
  left: 0;
  background-color: #000;
  transform: scaleX(0);
  transition: transform 0.3s ease;
  
}

.navbar a:hover::before {
  transform: scaleX(1);
 
}

.topstory-img{
 position: absolute; 
 display: flex;
 left: 3%;
 width:50%;
 height: auto;/* height of container */  
 top: 9%;
 border-radius: 10px;

 
 
 
 
}

.top-story-img-box{
  position:absolute;
  display: flex;
  width:75%;
  height: 60%;
  border-radius: 25px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  padding: 0px; 
  margin: 0px; 
  z-index: -3;
  top: 17%;
  background-color: aliceblue;


}

.topstoryTitle{
 position: absolute;
 text-decoration: underline;
 text-decoration-color: #551A8B;
 color: black;
 left: 50%;
 top: 47%;
 font-size: 2.5vw; 
 font-family: 'Poppins';  
 display: flex;
 width: 500px; 
 margin-top: 15px;
}

.topstory-title:hover{
  opacity: 40%;
}





.subscribebox{
 width: 250px ;

}

.title{
  display: flex;
  text-align: center;
  font-family: 'Poppins';
  font-size: 50px;
  padding-top: 10px;
  top: 8%;
  padding-bottom:10px;
  justify-content: center;
}

.topstory-discription{ 
  position: relative;
  font-family: 'Poppins'; 
  font-size: 1.5vw; 
  display: flex;
  margin-left: 40px;
  margin-right: 20px;
  flex-direction: column;
  overflow-wrap: break-word;
  border-radius: 0px;
  top: 28% ;
  
}

.outdoor-discription{ 
  position: relative;
  font-family: 'Poppins'; 
  font-size: 1.5vw; 
  display: flex;
  margin-left: 40px;
  margin-right: 20px;
  flex-direction: column;
  overflow-wrap: break-word;
  border-radius: 0px;
  top: 40% ;
  
}

.box1{
  position: absolute;
  display: flex;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  background-color: #B8B8FF; /*rgb(92, 122, 161);*/
  width: 31.25rem;
  height: 18.75rem;
  z-index: -1;
  border-radius: 10px;
  top: 50%;
  left: 65%
}

.secondstory-image{
position: absolute;
width: 30%;
border-radius: 10px;

top: 100%;
/*left:15%;*/
left: 20%;

}

.box2{
 position: absolute;
 display: flex;
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 width: 500px;
 height: 300px;
 /*left: 6%;*/
 left: 50px;
 top: 88%;
 background-color: #FFEEDD;
 z-index: -2;
 border-radius: 10px;
 opacity: 100%;
}

.box2-1{
position: absolute;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
display: flex;
width: 500px;
height: 350px;
/*left: 50%; */
left :600px;
top:  113%;
background-color: #FFEEDD;
z-index: -2;
border-radius: 10px;
opacity: 100%;
}

.secondstoryTitle{
position: absolute;
text-decoration: underline;
text-decoration-color: #6E9887;
color: black;
font-size: 3vw; 
width: 400px;
/*left: 8%;*/
left: 65px;
font-family: 'Poppins';  
top: 89%;

}
.secondstoryTitle:hover{
opacity: 40%;

}

.secondstorydiscrpition{
position: absolute; 
font-family: 'Poppins'; 
font-size: 1.4vw; 
width: 300px;
left: 35%;
top:5%;
display:  flex;
justify-content: flex-end;

}
/* Style the form element with a border around it */
form {
border: none;
font-family: 'Poppins' ;

}

/* Add some padding and a grey background color to containers */
.container{
position: absolute;
padding-top: 20px;
background-color: #B8B8FF;
border-radius: 7px;
font-family: 'Poppins' ;
border-color: transparent;
width: 100%;
top: 290%;
padding-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
}

/* Style the input elements and the submit button */
input[type=text], input[type=submit] {
width: 30%;
padding: 4px;
margin: 9px 13px;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
border-radius: 10px;
font-family: 'Poppins';
}

/* Add margins to the checkbox */
input[type=checkbox] {
margin-top: 16px;
}

/* Style the submit button */
input[type=submit] {
background-color: #9381FF;
color: white;
border: none;
border-radius: 10px;

}

input[type=submit]:hover {
opacity: 0.8;
}


* {box-sizing: border-box;}

body {
margin: 0;
font-family: 'Poppins';
}

.topnav {
overflow: hidden;
background-color: #e9e9e9;
font-family: 'Poppins';
}

.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 2.267vw;
}

.topnav a:hover {
background-color: #ddd;
color: black;
}

.topnav a.active {
background-color: #2196F3;
color: white;
}

.topnav .search-container {
float: right;
}

.topnav input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 2.267vw;
border: none;
}

.topnav .search-container button {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: #ddd;
font-size: 2.267vw;
border: none;
cursor: pointer;
}

.topnav .search-container button:hover {
background: #ccc;
}

@media screen and (max-width: 600px) {
.topnav .search-container {
  float: none;
}
.topnav a, .topnav input[type=text], .topnav .search-container button {
  float: none;
  display: block;
  text-align: left;
  width: 100%;
  margin: 0;
  padding: 14px;
}
.topnav input[type=text] {
  border: 1px solid #ccc;
  float: right;  
}

}
.thirdstory-title{
position: absolute;
display: flex;
text-decoration: underline;
text-decoration-color: #551A8B;
color: black;
font-size: 3vw; 
font-family: 'Poppins';  
left: 5%;
width: 500px;
z-index: 1;
}
.thirdstory-title:hover{
opacity: 40%;

}
.box3{
display: flex;
position: absolute;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
background-color: #307473;
border-radius: 10px; 
width: 550px;
height: 350px;
top: 180%;
left: 7%;
z-index: -1;

}
.thirdstoryimage{
display: flex;
position: absolute;
width: 30%;
height: auto;
top: 180%;
left:  50%;
z-index: -2;
}


.thirdstory-discription{
display: flex;
position: absolute; 
font-family: 'Poppins', sans-serif; 
font-size: 1.4vw; 
top: 40%;
left: 10.5%; 
width: 450px; 
overflow-wrap: break-word;
border-radius: 0px;
}

.comingsoon{
position: absolute;
font-family: 'Poppins';
font-size: 8vw;
color: gray;
text-align: center;
top: 50%;
left: 30%;
z-index: 1;
}
.comingsoonimg{
position: absolute;
width: 60%;
height: auto;
z-index: -1; 
left: 20%;
top: 18%;
}

/* The hero image */
.hero-image {
/* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
/* Set a specific height */
height: 50%;
width: 100%;
top: 18%;
/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: absolute
}

/* Place text in the middle of the image */
.hero-text {
text-align: center;
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
color: #FCFCFC;
font-size: 2.267vw;
font-family: 'Poppins';
}

.writing{
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  top: 325%;
  color: #000000;
  font-family: 'Poppins';
  font-size: 1.133vw;
  width: 50%;
  left: 20%;
  margin: 30px;
  line-height: 2;

}

.oldwriting{
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  top: 240%;
  color: #000000;
  font-family: 'Poppins';
  font-size: 1.133vw;
  width: 50%;
  left: 20%;
  margin: 30px;
  line-height: 2;

}


/* The hero image */
.hero-image1 {
/* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
/* Set a specific height */
height: auto;
width: 100%;
top: 19%;

/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;

}

/* Place text in the middle of the image */
.hero-text1 {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #EA9E8D;
font-size: 2.267vw;
font-family: 'Poppins';
}

.writing1{
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
top: 105%;
color: #000000;
font-family: 'Poppins';
font-size: 1.133vw;
width: 50%;
left: 20%;
margin: 30px;
line-height: 2;





}
.secound_image{
  display: flex;
  flex-direction: row;
}
.carousel-item{
padding-top: 150px;
padding-left: 350px;
padding-right: 350px;
height:32rem;
background: #777;
color: white;
position: absolute;
}

#myBtn {
display: none; /* Hidden by default */
position: fixed; /* Fixed/sticky position */
bottom: 20px; /* Place the button at the bottom of the page */
right: 30px; /* Place the button 30px from the right */
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
background-color: red; /* Set a background color */
color: white; /* Text color */
cursor: pointer; /* Add a mouse pointer on hover */
padding: 15px; /* Some padding */
border-radius: 10px; /* Rounded corners */
font-size: 2.4vw; /* Increase font size */
}

#myBtn:hover {
background-color: #555; /* Add a dark-grey background on hover */
}


/* The hero image */
.hero-image2 {
/* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
/* Set a specific height */
height: 50%;
top: 18%;
width: 100%;

/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;

}

/* Place text in the middle of the image */
.hero-text2 {
text-align: center;
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
color: #F3EAF4;
font-size: 2vw;
font-family: 'Poppins';
}

.writing2{
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  top: 235%;
  color: #000000;
  font-family: 'Poppins';
  font-size: 1.133vw;
  width: 50%;
  left: 20%;
  margin: 30px;
  line-height: 2;
  




}

.signupimage{
position: absolute;
left: 40% ;
bottom: 0px ;
width: 20%;
height: auto;
z-index: -1;
}