style.css

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

}

html,body{
  height: 100%;
  width: 100%;
  
}
/* body.no-scroll {
overflow: hidden;
} */
/* body {
overflow: hidden; 
} */
/* ---------loader---------------- */

/* ---------loader---------------- */

#video{
width: 100%;
height: 100%;
position: fixed;
}

#video video{
width: 100%;
height: 100%;
object-fit: cover;
}
#img{
width: 100%;
height: 100%;
position: fixed;

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

#main{
position: relative;
background-color: rgba(0, 0, 0, 0.229);
}
#page1{
position: relative;
width: 100%;
min-height: 100vh;
padding-top: 30px;
/* background-color: red; */
z-index: 5;
}

#nav{
width: 100%;
height: 80px;
display: flex;
justify-content: center;
/* background-color: green; */
}
#nav_content{
width: 95%;
height: 100%;
/* background-color: red; */
border: 2px solid white;
border-radius: 10px;
display: flex;
}

#brand_name{
height: 100%;
width: 20%;
/* background-color: aqua; */
display: flex;
justify-content: center;
align-items: center;
}
#brand_name h1{
font-family: "noe";
font-size: 2.5vw;
color: white;
font-weight: 900;  
}
#brand_name a {
text-decoration: none;
}
#vertical_line{
width: 0.1%;
height: 100%;
background-color: white;
}
#subpage{
height: 100%;
width: 36%;
/* background-color: lightcoral; */
display: flex;
/* justify-content: space-around; */
/* gap: 4vw; */
/* align-items: center; */
/* padding-left: 60px; */
padding: 20px 40px 20px 50px;
gap: 40px;
}

#groups{
width: 33.33%;
height: 100%;
/* background-color: #FF4411; */
position: relative;
overflow: hidden;

}
#up_groups{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
/* background-color: yellow; */
transition: all ease 0.5s;
display: flex;
justify-content: center;
align-items: center;
}
#up_groups a{
font-size: 1.5vw;
color: white;
text-decoration: none;
text-transform: uppercase;
}
#lower_groups{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 100%;
/* background-color: yellowgreen; */
transition: all ease 0.5s;
display: flex;
justify-content: center;
align-items: center;

}
#lower_groups a{
font-size: 1.5vw;
color: white;
text-decoration: none;
text-transform: uppercase;

}
#groups:hover #up_groups{
transform: translateY(-100%);
}
#groups:hover #lower_groups{
transform: translateY(-100%);
}
#talk{
width: 33.33%;
height: 100%;
/* background-color: aquamarine; */
position: relative;
overflow: hidden;


}
#up_talk{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
/* background-color: lightgoldenrodyellow; */
transition: all ease 0.5s;
display: flex;
justify-content: center;
align-items: center;

}
#up_talk a{
font-size: 1.5vw;
color: white;
text-decoration: none;
text-transform: uppercase;

}
#lower_talk{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 100%;
/* background-color: rgb(205, 50, 50); */
transition: all ease 0.5s;
display: flex;
justify-content: center;
align-items: center;

}
#lower_talk a{
font-size: 1.5vw;
color: white;
text-decoration: none;
text-transform: uppercase;

}
#talk:hover #up_talk{
transform: translateY(-100%);
}
#talk:hover #lower_talk{
transform: translateY(-100%);
}
#more{
width: 33.33%;
height: 100%;
/* background-color: bisque; */
position: relative;
overflow: hidden;

}
#up_more{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
/* background-color: rgb(25, 0, 255); */
transition: all ease 0.5s;
display: flex;
justify-content: center;
align-items: center;

}
#up_more a{
font-size: 1.5vw;
color: white;
text-decoration: none;
text-transform: uppercase;

}
#lower_more{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 100%;
/* background-color: rgb(126, 152, 74); */
transition: all ease 0.5s;
display: flex;
justify-content: center;
align-items: center;

}
#lower_more a{
font-size: 1.5vw;
color: white;
text-decoration: none;
text-transform: uppercase;

}
#more:hover #up_more{
transform: translateY(-100%);
}
#more:hover #lower_more{
transform: translateY(-100%);
}

/* #subpage  a{
text-decoration: none;
color: white;
font-size: 1.5vw;
letter-spacing: 1px;
text-transform: uppercase;
} */


/* #groups::before{
content: "Groups";
color: white;
text-transform:uppercase;
position: absolute;
left: 0;
top: -100%;
}
#groups::after{
content: "Groups";
color: white;
text-transform:uppercase;
position: absolute;
left: 0;
bottom: -100%;
} */

#search{
position: relative;
display:inline-block ;
height: 100%;
width: 50%;
/* background-color: rgb(234, 0, 0); */
display: flex;
/* justify-content: center; */
align-items: center;
padding-left: 110px;
}
#search i{
position: absolute;
left: 19vw;
top:30px;
transform: translateX(540%);
color:#FF4411;
font-size: larger;
font-weight: 900;
}
#search_button{
width: 320px;
display: inline-flex;
align-items: center;
background-color: white;
color: #FF4411;
border: 2px solid transparent;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
outline-color: #FF4411;
display: flex;
justify-content: space-between;
} 
#search_button::placeholder {
color: #FF4411; /* Placeholder color */
}




#login{
height: 100%;
width: 10%;
/* background-color: rgb(0, 234, 20); */
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
padding: 20px;
}
#login_text{
/* background-color: #FF4411; */
width: 4.5vw;
height: 100%;
position: relative;
overflow: hidden;
}
#up_login{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
/* background-color: yellow; */
transition: all ease 0.5s;
display: flex;
justify-content: center;
align-items: center;
}
#up_login a{
font-size: 1.5vw;
color: white;
text-decoration: none;
text-transform: uppercase;
}
#lower_login{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 100%;
/* background-color: yellowgreen; */
transition: all ease 0.5s;
display: flex;
justify-content: center;
align-items: center;

}
#lower_login a{
font-size: 1.5vw;
color: white;
text-decoration: none;
text-transform: uppercase;

}
#login_text:hover #up_login{
transform: translateY(-100%);
}
#login_text:hover #lower_login{
transform: translateY(-100%);
}
#login h1{
font-size: 1vw;
color: white;
text-transform: uppercase;
letter-spacing: 2px;
}
#login i{
font-size: 2vw;
color: #FF4411;
}
#reading_cart{
height: 100%;
width: 8.9%;
/* background-color: lightslategrey; */
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
/* justify-content: baseline; */
gap: 1vw;

}
#reading_cart i{
font-size: 2vw;
color: #FF4411;
}
#reading_cart h1{
font-size: 1.5vw;
color: white;
padding-bottom: 5px;
}

#text{
width:50vw;
height: fit-content;
/* background-color: green;  */
margin:45px 45px;
line-height: 8vw;
position: relative;
letter-spacing: 1px;
/* overflow: hidden; */

}
#text h1{
white-space: nowrap;
font-size: 7vw;
color: white;
font-family: "impact";
text-transform: uppercase;
}
#first_text {
/* background-color: #FF4411; */
overflow: hidden;
}
#sec_text{
overflow: hidden;
}

#first_text h1::before{
content: "Endless Stories,";
text-transform: uppercase;
color: white;
position: absolute;
-webkit-text-stroke: 1.5px #7A928F ;
top: -4px;
left: -4px;
z-index: -1;
}
#sec_text h1{
position: relative;

}

#sec_text h1::before{
content: "Begin Here";
text-transform: uppercase;
color: white;
position: absolute;
-webkit-text-stroke: 1.5px  #7A928F  ;
/* top: 118px;
left: -4.5px; */
top: -4px;
left: -4px;
z-index: -1;

}
#para{
width: 85%;
height: fit-content;
margin-top: 15px;
/* background-color: red; */
}
#para p{
color: white;
font-family:"Neo Display Medium";
font-size: 1.8vw;
line-height: 2vw;
font-weight: 900;
}

#button{
display: flex;
justify-content: start;
align-items: center;
gap: 4vw;
position: absolute;
left: 4%;
/* padding-left: 10px; */
}
#button h4{
width: 16vw;
height: 4.3vw;
border: 2px solid #7A928F;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.7vw;
letter-spacing: 1.5px;
position: relative;
overflow: hidden;
transition: all ease 0.4s;

}

#button h4::after{
content: "";
width: 100%;
height: 100%;
background-color: white;
position: absolute;
bottom: -100%;
left: 0%;
border-radius:50% ;
transition: all ease 0.4s;


}
#button h4:hover::after{
bottom: 0;
border-radius: 0;

}
#button h4 a{
text-decoration: none;
color: white;
z-index: 9;

}
#button h4:hover a{
color: #7A928F;

}
#arr{
display: flex;
justify-content: center;
align-items: center;
width: 250px;
height: 250px;
color: white;
position: absolute;
left: 83%;
bottom:-2%;
border: 2px solid white;
border-radius: 50%;
transition: all ease 0.4s;
overflow: hidden;
z-index:1 ;

}
#arr i{
font-size: 4vw;
font-weight: 100;
}

#arr:hover{
scale:0.4;
background: #FF4411;
color: white;
border: 2px solid white ;
}
/* ----------------------page 2 --------------------------*/
#page2{
min-height: 100vh;
width: 100%;
background-color: white;
/* border-radius-top: 50px; */
border-top-left-radius: 30px;
border-top-right-radius: 30px;
z-index: 10;
position: relative;
}
.recent_text{
width: 100%;
height: 15%;
/* background-color: #FF4411; */
/* position: absolute; */
/* position: relative; */
display: flex;
justify-content: center;
align-items: center;
padding: 5px 20px 25px 20px;
}
.text_rec{
width: fit-content;
height: 100%;
/* background-color: aqua; */
/* position: relative; */
overflow: hidden;
}

.recent_text h1{
position: relative;
letter-spacing: 2px;
font-weight: 100;
/* font-family:"Neo Display Medium"; */

}
.recent_text h1::before{
content: "";
width: 0;
height: 2px;
position: absolute;
left: 0;
bottom: 0;
transition:  width 0.5s ease-in-out  ;
background-color: #FF4411;
}
.recent_text h1:hover::before{
width: 100%;
}
.recent_text h1{
font-size: 4vw;
color: #7A928F;
/* text-transform: uppercase; */
}
#rec_box{
/* position: absolute; */
width: 100%;
height: 80vw;
/* background-color: antiquewhite; */
padding: 50px;
/* position: relative; */
}
#rec_upper{
height: 50%;
width: 100%;
/* background-color: aqua; */
display: flex;
/* justify-content: space-between; */

}
#rec_lower{
height: 50%;
width: 100%;
/* background-color: rgb(34, 247, 11); */
display: flex;
/* justify-content: space-between; */
}
.rec_col{
padding: 10px;
width: 25%;
height: 100%;
/* background-color: aquamarine; */
border-right: 2px solid #7a928f4a;
border-bottom:2px solid #7a928f4a;
/* position: relative; 
flex-basis: 24%;  */
}

.col_category{
width: 100%;
height: 10%;
/* padding: 10px 10px 10px 30px ; */
/* background-color: #c7ff11; */
display: flex;
justify-content: space-between;
align-items: center;
gap: 70px;
}
.category_name{
height: 100%;
width: 100%;
display: flex;
/* background-color: #df176e; */
justify-content: center;
align-items: center;

}
.category_name h1{
font-family: "noe";
font-weight: 900;
display: flex;
justify-content: center;
width: 100%;
border: 2px solid #FF4411;
font-size: 1.5vw;
/* padding-left: 30px; */
border-radius: 5px;
color: #7A928F;
/* color: rgba(0, 0, 0, 0.655); */
letter-spacing: 2px;

/* width: fit-content; */

}
.bookmark{
width: 40%;
height: 100%;
/* background-color: #6c6500; */
display: flex;
justify-content: flex-end;
align-items: center;
/* padding-right: 5px; */
padding-top: 20px;
}
.bookmark_logo{
width: 4vw;
height: 4vw;
border: 1px solid #7A928F;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.5s ease;

}
.bookmark_logo::before{
content: "";
position: absolute;
width: 0;
height: 0;
background-color: #ff6347;
border-radius: 50%;
transition: width 0.3s ease-out, height 0.3s ease-out;
z-index: 0;
}
.bookmark_logo:hover::before{
width: 100%;
height: 100%;
}
/* .bookmark_logo:hover::before {
background-color: #ff6347;
transform: scale(1.2);
} */
.bookmark_logo:hover{
transform: scale(0.9);
border: 1px solid #FF4411;

}
/* .bookmark_logo:hover i{
font-size: 1.5vw;
} */
.bookmark_logo i{
color: #FF4411;
font-size: 1.5vw;
z-index: 1;
position: relative;
transition: color 0.6s ease;
}
.bookmark_logo:hover i{
color: white;
/* transform: none; */
}
.col_book{
width: 100%;
height: 65%;
/* background-color: #17bdcc; */
/* padding-top: 10px;
 */
 margin-top: 20px;
}
.img_book{
width: 100%;
height: 90%;
/* background-color: #df7b17; */
display: flex;
justify-content: center;
align-items: center;
}
.image_div{
height: 100%;
width: 59%;
display: flex;
overflow: hidden;
position: relative;
/* background-color: #1dff11;   */

}
.image_div img{
object-fit: contain;
width: 100%;
height: 100%;
}



.book_author{
width: 100%;
height: 10%;
/* background-color: #6c0053; */
display: flex;
justify-content: center;
align-items: center;
}
.book_author h3{
font-family: "noe";
font-weight: 900;
font-size: xx-large;
/* color: #c5d0cf; */
color: #7A928F;

font-weight: 200;
font-size: 1vw;
letter-spacing: 1px;
}

.col_lower_sec{
width: 100%;
height: 25%;
/* background-color: #fd96e5; */
display: flex;
flex-direction: column;
}
.top_book_name{
width: 100%;
height: 60%;
/* background-color: #dbf588; */
display: flex;
justify-content: center;
align-items: center;
}
.top_book_name p{
flex-wrap: wrap;
color: #FF4411;
font-size: 2vw;
}

.bottom_star_bookmark{
width: 100%;
height: 40%;
/* background-color: #df176e; */
display: flex;
justify-content: center;
align-items: center;
/* padding: 20px; */
padding-bottom: 30px;
}
.bottom_star{
width: 60%;
height: 100%;
/* background-color: #7A928F; */
display: flex;
justify-content: center;
align-items: center;
}
.bottom_star i{
color: gold;
font-size: x-large;
}
#borderDiv{
display: none;
position: absolute;
z-index: 999;
pointer-events: none;
}
/* ----------------------page 3 --------------------------*/
#page3{
width: 100%;
min-height: 150vh;
background-color: #fff;
padding: 50px;
/* margin-bottom: 6vw; */
}
.page3_nav{
height: 5vh;
width: 100%;
/* background-color: #008000; */
display: flex;
justify-content: center;
align-items: center;
}
#page3_nav-container{
width: 37vw;
/* background-color: red; */
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
/* padding-bottom:5px ; */
border-bottom: 2px solid #7a928f4a;

}
.page3_nav_text h4{
font-family:"Neo Display Medium";
font-size: 1.8vw;
color: #828282;

}
/* #page3_nav-container #all h4{
color: #FF4411;
border-bottom: 2px solid #FF4411;
} */
/*----------testing opacity----------*/
/* Default styles for navigation items */
#page3_nav-container .page3_nav_text h4 {
color: #828282;
border-bottom: none;
cursor: pointer;
transition: color 0.3s, border-bottom 0.3s;
}

/* Active state for the navigation items */
#page3_nav-container .page3_nav_text h4.active {
color: #FF4411;
border-bottom: 2px solid #FF4411;
}

/* Default opacity for content sections */
#page3_all_images_content .page3_content {
opacity: 0;
transition: opacity 0.3s ease;
height: 0; /* To avoid taking up space when not visible */
overflow: hidden; /* Hide content when opacity is 0 */
}

/* Active content (visible) */
#page3_all_images_content .page3_content.active {
opacity: 1;
height: auto; /* Restore the content's height when visible */
}

/*----------testing opacity----------*/

.page3_nav_text h4::before{
content: "";
width: 0;
height: 2px;
position: absolute;
left: 0;
bottom: 0;
transition:  width 0.5s ease-in-out  ;
background-color: #FF4411;
}

.page3_nav_text h4:hover::before{
width: 100%;
}
/* .page3_recent_text{
width: 100%;
height: 15%; */
/* background-color: #FF4411; */
/* position: absolute; */
/* position: relative; */
/* display: flex;
justify-content: center;
align-items: center;
padding: 5px 20px 25px 20px;
}
.page3_text_rec{
width: fit-content;
height: 100%;
background-color: aqua; */
/* position: relative; */
/* overflow: hidden;
}

.page3_recent_text h1{
position: relative;
letter-spacing: 2px;
font-weight: 100;
font-family:"Neo Display Medium";

}
.page3_recent_text h1::before{
content: "";
width: 0;
height: 2px;
position: absolute;
left: 0;
bottom: 0;
transition:  width 0.5s ease-in-out  ;
background-color: #FF4411;
}
.page3_recent_text h1:hover::before{
width: 100%;
}
.page3_recent_text h1{
font-size: 4vw;
color: #7A928F;
text-transform: uppercase;
} */
#page3_all_images_content{
display: flex;
width: 100%;
height: 100%;
position: relative;
/* margin-bottom:10vw ; */
}
.page3_content{
position: absolute;
height: 95vh;
width: 100%;
/* background-color: #7A928F; */
display: flex;
padding: 0 50px;
}
.page3_left{
width: 30%;
/* height: 100vh; */
/* background-color: #ff6347; */
display: flex;
justify-content: center;
align-items:center ;
/* padding: 20px; */
}
#page3_div_left_image{
width: 90%;
height: 90%;
/* background-color: antiquewhite; */
}
#page3_div_left_image img{
object-fit: contain;
object-position: center;
height: 100%;
width: 100%;
}
.page3_right{
width: 70%;
/* height: 100vh; */
/* background-color: #21a3cb; */
padding: 20px;
display: flex;
flex-direction: column;
/* gap: 10px; */
}
.page3_upward_sec{
width: 100%;
height: 50%;
/* background-color: #ff47e6; */
/* border: 2px solid black; */
display: flex;
/* gap: 20px; */
justify-content: space-around;
border-bottom:2px solid #7a928f4a;


}
.page3_downward_sec{
width: 100%;
height: 50%;
/* background-color: #ff47e6; */
/* border: 2px solid black; */
display: flex;
justify-content: space-around;
border-bottom:2px solid #7a928f4a;

/* gap: 20px; */
}
.page3_right-div{
height: 100%;
width: 33.3%;
background-color: antiquewhite;
}
.page3_rec_col{
padding: 10px;
width: 35%;
height: 100%;
/* background-color: aquamarine; */
border-right: 2px solid #7a928f4a;
/* border-bottom:2px solid #7a928f4a; */
/* position: relative; 
flex-basis: 24%;  */
}

.page3_col_category{
width: 100%;
height: 10%;
/* padding: 10px 10px 10px 30px ; */
/* background-color: #c7ff11; */
display: flex;
justify-content: space-between;
align-items: center;
gap: 50px;
}
.page3_category_name{
height: 100%;
width: 100%;
display: flex;
/* background-color: #df176e; */
justify-content: center;
align-items: center;
/* padding: 20px; */

}
.page3_category_name h1{
font-family: "noe";
font-weight: 900;
display: flex;
justify-content: center;
width: 100%;
border: 2px solid #FF4411;
font-size: 1vw;
/* margin: 20px; */
/* padding-left: 30px; */
border-radius: 5px;
color: #7A928F;
/* color: rgba(0, 0, 0, 0.655); */
letter-spacing: 2px;

/* width: fit-content; */

}
.page3_bookmark{
width: 40%;
height: 100%;
/* background-color: #6c6500; */
display: flex;
justify-content: center;
align-items: flex-end;
/* padding-right: 5px; */
padding-top: 20px;
margin-top: 20px;
}
.page3_bookmark_logo{
width: 2.5vw;
height: 2.5vw;
border: 1px solid #7A928F;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.5s ease;

}
.page3_bookmark_logo::before{ 
content: "";
position: absolute;
width: 0;
height:0;
background-color: #ff6347;
border-radius: 50%;
transition: width 0.3s ease-out, height 0.3s ease-out;
z-index: 0;
}
.page3_bookmark_logo:hover::before{
width: 100%;
height: 100%;
}
/* .bookmark_logo:hover::before {
background-color: #ff6347;
transform: scale(1.2);
} */
.page3_bookmark_logo:hover{
transform: scale(0.9);
border: 1px solid #FF4411;

}
/* .bookmark_logo:hover i{
font-size: 1.5vw;
} */
.page3_bookmark_logo i{
color: #FF4411;
font-size: 1vw;
z-index: 1;
position: relative;
transition: color 0.6s ease;
}
.page3_bookmark_logo:hover i{
color: white;
/* transform: none; */
}
.page3_col_book{
width: 100%;
height: 65%;
/* background-color: #17bdcc; */
/* padding-top: 10px;
 */
 margin-top: 20px;
}
.page3_img_book{
width: 100%;
height: 90%;
/* background-color: #df7b17; */
display: flex;
justify-content: center;
align-items: center;
}
.page3_image_div{
height: 100%;
width: 42%;
display: flex;
overflow: hidden;
position: relative;
/* background-color: #1dff11;   */

}
.page3_image_div img{
object-fit: contain;
width: 100%;
height: 100%;
}



.page3_book_author{
width: 100%;
height: 10%;
/* background-color: #6c0053; */
display: flex;
justify-content: center;
align-items: center;
}
.page3_book_author h3{
font-family: "noe";
font-weight: 900;
/* font-size: 20vw; */
/* color: #c5d0cf; */
color: #7A928F;
font-weight: 200;
font-size: 0.8vw;
letter-spacing: 1px;
}

.page3_col_lower_sec{
width: 100%;
height: 25%;
/* background-color: #fd96e5; */
display: flex;
flex-direction: column;
}
.page3_top_book_name{
width: 100%;
height: 60%;
/* background-color: #dbf588; */
display: flex;
justify-content: center;
align-items: center;
}
.page3_top_book_name p{
flex-wrap: wrap;
color: #FF4411;
font-size: 1.5vw;
}

.page3_bottom_star_bookmark{
width: 100%;
height: 40%;
/* background-color: #df176e; */
display: flex;
justify-content: center;
align-items: center;
/* padding: 20px; */
padding-bottom: 30px;
padding-top: 15px;
}
.page3_bottom_star{
width: 60%;
height: 100%;
/* background-color: #7A928F; */
display: flex;
justify-content: center;
align-items: center;
}
.page3_bottom_star i{
color: gold;
font-size: 1vw;
}
/* .page3_nav {
width: 100%;
height: 15vh;
background-color: #deff04;
display: flex;
align-items: center;
justify-content: space-around;
}

.page3_nav div {
cursor: pointer;
padding: 10px 20px;
background-color: #007bff;
color: white;
border-radius: 5px;
transition: background-color 0.3s;
}

.page3_nav div:hover {
background-color: #0056b3;
}

.page3_content {
width: 100%;
height: 85vh;  
display: flex;
flex-direction: column;
background-color: pink;
}

.page3_left {
height: 100%;
width: 30%;
background-color: #10c90d;
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(220, 10, 45);

}

.page3_left img {
width: 80%;
height: auto;
}

.page3_right {
height: 100%;
width: 70%;
display: flex;
flex-direction: column;
background-color: #007bff;
padding: 10px;
margin-left: auto;
}

.page3_upward_sec, 
.page3_downward_sec {
flex: 1;
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}

.page3_downward_sec {
margin-bottom: 0;
}

.page3_upward_sec div, 
.page3_downward_sec div {
width: 30%;
display: flex;
align-items: center;
justify-content: center;
background-color: #f9f9f9;
}

.page3_upward_sec div img, 
.page3_downward_sec div img {
width: 100%;
height: auto;
} */
#page4{
min-height:120vh ;
width: 100%;
background-color: #fff;
padding: 0 50px;
/* margin-top: 5vw; */
/* margin: 50px; */
}
#page4_crousel{
height: 120vh;
width: 100%;
background-color: #E7E6E0;
/* background-color: red; */
padding: 60px 50px 50px 50px;
}
#page4_upper_div{
height: 15vh;
/* background-color: #4e4e4e; */
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 30px;
}
#page4_upper_text h3{
font-size: 3vw;
/* font-family:"Neo Display Medium"; */
color: #7A928F;
letter-spacing: 2.5px;
}
#page4_read_more{
/* background-color: #FF4411; */
width: 9vw;
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
#page4_read_more h4 {
font-size: 1.3vw;
font-family:"Neo Display Medium";
color:#FF4411;
}
#page4_read_more i{
font-size: 1.3vw;
font-family:"Neo Display Medium";
color:#FF4411;

}
#sliding_div{
position: relative;
height: 100%;
width: 100%;
/* background-color: pink; */
display: flex;
overflow: hidden;  

}
.page4_lower_div{
position: absolute;
display: flex;
margin-top: 30px;
/* background-color: blue; */
width: 100%;
height: 100%;
transition: transform 0.5s ease; 
}
#page4_lower_left{
width: 50%;
height: 85vh;
/* background-color: aquamarine; */
display:flex ;
}
#page4_left_arrow{
width: 15%;
height: 100%;
/* background-color: lightcoral; */
display: flex;
justify-content: center;
align-items: center;
}
#page4_left_arrow i{
font-size: 3vw;
/* font-weight: 100; */
color: #828282;
}
#page4_image_div{
width:85%;
height: 100%;
/* background-color: rgb(0, 191, 255); */
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
#page4_background_div{
height: 80%;
width: 80%;
background-color: #DBD7C9;
}
#page4_image{
height: 80%;
width: 80%;
/* background-color: lightgreen; */
position: absolute;
top:0;
right: 0;
}
#page4_image img{
height: 100%;
width: 100%;
object-fit: contain;
}
#page4_lower_right{
width: 50%;
height: 85vh;
/* background-color: yellowgreen; */
display: flex;
}
#page4_right_content{
width: 85%;
height: 100%;
/* background-color: lightpink; */
display: flex;
flex-direction: column;
margin-left: 20px;
}
#page4_name_star{
width: 100%;
height: 15%;
/* background-color: lime; */
padding: 10px 20px;
}
#page4_name_star h1{
font-family:"Neo Display Medium";
font-size: 2.5vw;
color: #828282;
}
#page4_star{
display: flex;
justify-content: flex-start;
align-items: center;
padding-top:10px ;
gap: 20px;
}
#page4_star i{
color: gold;
}
#page4_star h3{
font-size: 1vw;
font-family:"Neo Display Medium";
color: #828282;

}
#page4_right_paragraph{
width: 100%;
height: 25%;
/* background-color: yellow; */
padding: 30px 20px;

}
#page4_right_paragraph p{
font-size: 1.3vw;
font-family:"Neo Display Medium";
letter-spacing: 1px;

}
#page4_book_by{
width: 100%;
height: 10%;
/* background-color: rgb(208, 208, 255); */
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 20px;
}
#page4_book_by h3{
font-family:"Neo Display Medium";
color: #828282;
}
#page4_book_by_view{
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
#page4_book_by_view h4{
font-family:"Neo Display Medium";
font-size: 1vw;
color: #FF4411;
}
#page4_book_by_view i{
font-size: 1vw;
color: #FF4411;

}
#page4_book_image{
width: 100%;
height: 30%;
/* background-color: #e7b2b2; */
display: flex;
gap: 15px;
padding: 10px 20px;

}
.page4_img1{
height: 100%;
width: 40%;
display: flex;
/* overflow: hidden; */
/* position: relative; */
/* background-color: #1dff11;  */

}
.page4_img1 img{
object-fit: contain;
width: 100%;
height: 100%;
}

#page4_right_arrow{
width: 15%;
height: 100%;
/* background-color: lightcoral; */
display: flex;
justify-content: center;
align-items: center;
}
#page4_right_arrow i{
font-size: 3vw;
/* font-weight: 100; */
color: #828282;
}
/* #crousel {
width: 100%;
height: 100vh;
background-color: lightcoral;
display: flex;
padding: 100px;
} */

/* #left_button {
background-color: aqua;
width: 10%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
button {
height: 10%;
width: 80%;
}
#container {
width: 100%;
height: 100%;
background-color: aquamarine;
display: flex;
position: relative;
}
#right_button {
background-color: aqua;
width: 10%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.slide {
height: 100%;
width: 100%;
position: absolute;
}
#slide1 {
background-color: yellow;
}
#slide2 {
background-color: lightblue;
}
#slide3 {
background-color: brown;
} */










#page5{
width: 100%;
min-height: 100vh;
background-color: #fff;
padding: 4vw 7.5vw;
/* padding: 0 50px; */

display: flex;
flex-direction: column;
align-items: center;
}
/* Explore Page  */

#page5 h2{
font-size: 4vw;
font-weight: 200;
text-align: center;
margin-bottom: 4vw;
}
#page5 .box{
width: 26vw;
height: 25vw;
border-radius: 10px;
overflow: hidden;
display: inline-block;
margin: 12px;

}
.hover{
width: 100%;
height: 40%;
position: absolute;
bottom: 0;
background: linear-gradient(rgba(255, 254, 254, 0),rgb(2, 2, 2));
display: flex;
align-items: center;
justify-content: space-between;
padding: 2vw 1.2vw 0.2vw 1.2vw;
opacity: 0;
transition: all linear 0.2s;
}
#page5 .box .boxImg:hover .hover{
opacity: 1;
}
.hover h6{
font-size: 1vw;
color: white;
font-weight: 100;
font-family:"Neo Display Medium";

}
.hover i{
background-color: white ;
/* color: black; */
padding: 10px 12px;
border-radius: 50%;
}
#page5 .box .boxImg{
width: 100%;
height: 85%;
position: relative;
overflow: hidden;
border-radius: 10px;
}
#page5 .box .boxImg img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
#page5 .box .boxFooter{
width: 100%;
height: 15%;
display: flex;
align-items: center;
/* gap: 50px; */
justify-content: space-between;
color: #4e4e4e;
}
.logo_with_text{
display: flex;
gap: 50px;
/* justify-content: space-between; */
align-items: center;
}
#page5 .box .boxFooter img{
width: 1.8vw;
border-radius: 50%;
}
.boxFooter i{
font-size: 1.1vw;
}
#page5 .box .boxFooter p{
font-size: 1.5vw;
color: black;
font-family:"Neo Display Medium";

}
#pro{
font-family:"Neo Display Medium";
background-color: #828282;
color: white;
font-size: 1vw;
padding: 0.5vw;
border-radius: 12px;
}
.explore{
font-size: 1.2vw;
font-weight: 700;
padding: 1.2vw 1.8vw;
border-radius: 2vw;
border: 2px solid black;
background-color: transparent;
margin-top: 2vw;
font-family:"Neo Display Medium";
}

#footer{
width: 100%;
min-height:50vh ;
background-color: #fff;
padding: 50px;
}
#footer_main{
width: 100%;
height: 100%;
background-color: #7a928f;
padding: 10px;
border-radius: 20px;
border: 2px solid #FF4411;
}
#footer_above_div{
width: 100%;
height: 40%;
/* background-color: #828282; */
display: flex;
gap: 35%;
}
#footer_above_left{
width: 40%;
height: 100%;
/* background-color: lightsteelblue; */
padding-left: 40px;
}
#footer_above_text{
width: 100%;
height: 50%;
/* background-color: gold; */
}
#footer_above_text p{
font-size: 3.5vw;
font-family:"Neo Display Medium";
font-weight: 900;
color: #fff;

}
#footer_above_inputs{
width: 100%;
height: 50%;
/* background-color: #ff6347a6; */
display: flex;
/* justify-content: space-between; */
gap: 15px;

}
#footer_above_inputs input{
width: 50%;
height: 100%;
border-radius: 50px;
padding: 21px;
font-family:"Neo Display Medium" ;
font-size: 1vw;
/* background-color: #ff634789; */
color: #fff;
border: 2px solid black;

}
#subscribe_div{
width: 30%;
height: 90%;
display: flex;
justify-content: space-around;
align-items: center;
border: 2px solid #FF4411;
border-radius: 50px;
padding: 15px;
}
#footer_arrow_div{
width: 25px;
height: 25px;
border-radius: 50%;
background-color: #ff6347;
display: flex;
justify-content: center;
align-items: center;
}
#footer_arrow_div i{
color: #fff;
}
#subscribe_div h3{
font-size: 1.5vw;
color: white;
letter-spacing: 1px;
}
#footer_above_right{
width: 25%;
height: 100%;
/* background-color: rgb(37, 37, 4); */
display: flex;
gap: 20px;
}
#footer_above_quicklinks{
width: 50%;
height: 100%;
/* background-color: skyblue; */
display: flex;
flex-direction: column;
justify-content: flex-start;
}
#footer_above_quicklinks h3{
font-family:"Neo Display Medium" ;
font-size: 1.7vw;
font-weight: 900;
color: #000;

}
#footer_quicklinks_links{
height: 100%;
/* background-color: greenyellow; */
display: flex;
flex-direction: column;
/* justify-content: center; */
align-items: flex-start;
padding-top: 15px;
}
#footer_quicklinks_links a{
font-family:"Neo Display Medium" ;
text-decoration: none;
color: #fff;
font-size: 1.4vw;

}
#footer_quicklinks_links a i{
color: #FF4411;
}
#footer_above_connects{
/* width: 50%;
background-color: goldenrod; */
width: 50%;
height: 100%;
/* background-color: skyblue; */
display: flex;
flex-direction: column;
justify-content: flex-start; 
} 
#footer_above_connects h3{
font-family:"Neo Display Medium" ;
font-size: 1.7vw;
font-weight: 900;
color: #000;

}
#front_connects_links{
height: 100%;
/* background-color: greenyellow; */
display: flex;
flex-direction: column;
gap: 1px;
/* justify-content: center; */
align-items: flex-start;
padding-top: 15px;
}
#front_connects_links a{
font-family:"Neo Display Medium" ;
text-decoration: none;
color: #fff;
font-size: 1.4vw;

}
#front_connects_links a i{
color: #FF4411;
}
#footer_middle_div{
width: 100%;
height: 50%;
/* background-color: lightgreen; */
display: flex;
justify-content: center;
align-items: center;
}
#footer_middle_div h1{
font-size: 12vw;
letter-spacing: 10px;
-webkit-text-stroke: 1px white;
font-weight: 500;
/* color: #fff; */
/* color: #FF4411; */
}
#footer_lower_div{
width: 100%;
height: 10%;
/* background-color: lightgoldenrodyellow; */

}
#underline{
width: 100%;
height: 2px;
background-color:#000;
/* border: 0.5px solid #FF4411; */
}
#footer_allrights{
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 20px;
}
#footer_allrights h3{
font-family:"Neo Display Medium" ;
font-size: 900;
color: #fff;
}
#privacy_text{
display: flex;
gap: 30px;
}
#privacy_text h3{
font-family:"Neo Display Medium" ;
font-size: 900;
color: #fff;
}
/* ......Scroller ...... */
/* .scrollerContainer{
display: flex;
overflow-x:hidden ;
gap: 26px;
flex-wrap: nowrap;
margin-top: 2vw;
}
.scroller{
width: fit-content;
flex-shrink: 0;
height: 59vh;
display: flex;
gap: 30px;
flex-wrap: nowrap;
padding: 0.5vw;
overflow: hidden;
animation: anime;
animation-duration: 60s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.scroller .elem{
flex-shrink: 0;
width: 22vw;
height: 100%;
background-color: yellow;
border-radius: 3vw;
overflow: hidden;
position: relative;
}
.overlay{
height: 40%;
width: 100%;
position: absolute;
bottom: 0;
display: flex;
flex-direction: column;
padding: 1vw  1.2vw;
color: #FF4411;
font-weight: 500;
}
.overlay p{
font-size: 1.5vw;
font-weight: 500;
}
.overlay div{
margin-top: 1.7vw;
}
.overlay span{
padding: 0.5vw 1vw;
border: 0.5px solid white;
font-size: 1vw;
border-radius: 3vw;
}
@keyframes anime {
from{
  transform: translateX(0);
}
to{
  transform: translateX(calc(-100% - 30px));
}
}
.scroller .elem img, .scroller .elem video{
object-fit: cover;
object-position: center;
width: 100%;
height: 100%; 
} */
/* #page3_head{
font-size: 2vw;
} */

/* #loader {
position: absolute;
width: 100%;
height: 100%;
background-color: #FF4411;
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
display: flex;
}
.loaderContent h1{
color: whitesmoke;
font-size: 5vw;

}
.timer {
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
}

.timer h2 {
font-size: 4vw;
color: whitesmoke;
} */
/* #loader{
width: 100%;
height: 100%;
background-color: #FF4411;
/* position: absolute; */


/* #loader {
width: 100%;
height: 100vh;
background: #FF4411;
position: absolute;
top: 0;
padding: 7vw 6vw;
z-index: 151;
}
.loaderContent{
width: fit-content;
margin: 0.5vw;
overflow: hidden;
display: flex;
align-items: center;
gap: 2.8vw;
}
.timer {
display: flex;
height: 100%;
font-family: 'silk serif';
width: 20vw;
justify-content: flex-end;
align-items: start;
}
.timer h2 {
font-family: "impact";
color: white;
font-size: 4vw;
font-weight: 400;
}
.loaderContent h1 {
font-family: "neo";
color: white;
font-size: 7vw;
text-transform: uppercase;
font-family: "plain light";
font-weight: 600;
}
.blink {
font-size: 4vw;
width: 16vw;
display: flex;
align-items: center;
height: 14vh;
}
.blink h2 {
font-family: "impact";
font-weight: 400;
opacity: 0;
animation-duration: 2s;
animation-iteration-count: infinite;
color: whitesmoke;
}
@keyframes blinker {
0% {
  opacity: 1;
  color: white;
}
40% {
  opacity: 0;
}
60% {
  opacity: 1;
  font-family: "silk serif";
  color: transparent;
  -webkit-text-stroke: 1px white;
}
80% {
  opacity: 0;
}
100% {
  opacity: 1;
}
}
.waiting {
overflow: hidden;
margin-left: 30%;
margin-top: 3vw;
}
.waiting h3 {
font-family: "impact";
color: whitesmoke;
font-size: 1.1vw;
font-weight: 100;
} */

/* .bookmark{
width: 40%;
height: 100%;
background-color: #6c6500;
display: flex;
justify-content: center;
align-items: center;
}
.bookmark_logo{
width: 4vw;
height: 4vw;
border: 1px solid #7A928F;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;

}
.bookmark i{
color: #FF4411;
font-size: 1.5vw;
} */
/* .star-rrating {
direction: rtl;
font-size: 2em;
}
.star-rating input {
display: none;
.star-rating label {
color: grey;
cursor: pointer;
}
.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label {
color: gold;
}
*/
/* -------------------------group-------------------------------- */
body{
/* background-color: #E7E6E0; */

}
#main2{
position: relative;
/* min-height: 100vh; */
/* background-color: #E7E6E0; */

/* background-color: #fff; */
/* padding: 0 ; */
}
#group_nav{
width: 100%;
height: 90px;
display: flex;
justify-content: center;
/* background-color: #DBD7C9; */
/* background-color: green; */
background-color: #7A928F;
position: fixed;
z-index: 999;
padding: 10px;
}
#group_page1{
min-height: 100vh;
width: 100%;
/* background-color: #E7E6E0; */
/* background-color: #fff; */
position: relative;
}
.group_content{
width: 100%;
height: 100%;
/* background-color: #ff6347; */
/* margin-top: 5vw; */
position: absolute;
top: 14%;
/* background-color: #E7E6E0; */
}
#group_head_text{
width: 100%;
height: 7%;
/* background-color: yellow; */
display: flex;
justify-content:space-between;
align-items: center;
padding: 0 50px;
}
#group_head_text h1{
font-size: 3vw;
/* font-family:"Neo Display Medium"; */
color: #7A928F;
/* color: #FF4411; */
letter-spacing: 2px;

}
#group_button{
width: 30%;
height: 70%;
display: flex;
justify-content: space-around;
/* background-color: blue; */
}
#group_button input{
width: 55%;
height: 100%;
border: 2px solid transparent;
border-radius: 6px;
padding-left: 25px;
font-family:"Neo Display Medium";
border: 1px solid #FF4411;

}
#group_button button{
width: 35%;
height: 100%;
border: 2px solid transparent;
border-radius: 6px;
font-family:"Neo Display Medium";
font-size: 1vw;
font-weight: 300;
color: #fff;
background-color: #7a928f;
display: flex;
justify-content: space-around;
align-items: center;

/* padding-left: 25px; */
}
#group_button button i{
font-size:1vw ;
}
#group_active_text{
width: 100%;
height: 10%;
/* background-color: skyblue; */
padding: 20px 50px;
}
#group_active_text h2{
font-size: 2vw;
font-family:"Neo Display Medium";
color: #FF4411;
}

.group_box_main{
width: 100%;
min-height:100vh;
/* background-color: greenyellow; */
padding: 0 50px;
display: flex;
/* justify-content: center;
align-items: center; */
flex-direction: column;
}
.box_outer{
width: 100%;
height: 30vh;
/* background-color: lightpink; */
/* border: 2px solid black; */
display: flex;
padding: 10px;
justify-content: space-between;
}
.box_group{
width: 32%;
height: 100%;
/* background-color: orange; */
/* border: 1px solid black; */
display: flex;
border: 2px solid #FF4411;
border-radius: 20px;
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.15); /* Strong shadow for more depth */
transition: box-shadow 0.3s ease-in-out;

}
.box_group:hover {
box-shadow: 0 25px 40px rgba(0, 0, 0, 0.3), 0 10px 20px rgba(0, 0, 0, 0.2);
}
.box_left{
width: 35%;
height: 100%;
/* background-color: lightgoldenrodyellow; */
padding-top: 20px;
/* padding-left: 20px; */
display: flex;
justify-content: center;

}
.box_image{
width:70%;
height: 40%;
/* background-color: violet; */
}
.box_image img{
width: 100%;
height: 100%;
}
.box_right{
width: 65%;
height: 100%;
/* background-color: rgb(255, 255, 0); */
}
.box_upper_para{
width: 100%;
height: 30%;
/* background-color: #FF4411; */
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
}
.box_upper_para h2{
font-size:1.5vw ;
font-family:"Neo Display Medium";
font-weight: 900;
}
.box_upper_para h4{
font-size:1vw ;
font-family:"Neo Display Medium";
font-weight: 900;
}

.box_lower_para{
font-family:"Neo Display Medium";
padding-top: 10px;
font-weight: 900;
}
.group_button{
height: 10%;
width: 100%;
/* background-color: red; */
display: flex;
justify-content: center;
align-items: center;
padding-bottom: 40px;
}


/* -------------------------talk-------------------------------- */

#main3{
/* position: relative; */
}
#talk_page1{
min-height: 100vh;
width: 100%;
/* position: relative; */
position: absolute;
top: 14%;
}
#talk_head{
width: 100%;
height: 7%;
/* background-color: yellow; */
display: flex;
justify-content:space-between;
align-items: center;
padding: 0 50px;
}
#talk_head h1{
font-size: 3vw;
/* font-family:"Neo Display Medium"; */
color: #7A928F;
/* color: #FF4411; */
letter-spacing: 2px;
}
#talk_main{
min-height: 120vh;
width: 100%;
/* background-color: lightgreen; */
/* margin: 0 50px; */
padding: 20px 50px;

}
#talk_table{
height: 100%;
width: 100%;
/* background-color: #7a928f; */
border-left: 2px solid #FF4411;
border-right: 2px solid #FF4411;


}
#talk_table_head{
height: 3%;
width: 100%;
/* background-color: lightcoral; */
display: flex;
border-top: 2px solid #FF4411;
border-bottom: 2px solid #FF4411;
background-color: #7a928f7a;


}

#talk-group{
height: 100%;
/* background-color: red; */
width: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.head_table h2{
font-family:"Neo Display Medium";
font-size: 2vw;

}
.head_table i{
font-size: 2vw;
}
#topic{
height: 100%;
/* background-color: rgb(43, 255, 0); */
width: 15%;
display: flex;
justify-content: flex-start;
align-items: center;
}
#messages{
height: 100%;
/* background-color: rgb(76, 0, 255); */
width: 20%;
display: flex;
justify-content: flex-start;
align-items: center;
}
#last_messages{
height: 100%;
/* background-color: rgb(255, 0, 204); */
width: 15%;
display: flex;
justify-content: center;
align-items: center;
}
#last_messages i{
color: #FF4411;
}
.table_row{
height: 2%;
width: 100%;
display: flex;
border-bottom:1px solid #FF4411 ;
}
.table_col1{
width: 15%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
/* background-color: #ff6347; */

.table_col2{
width: 35%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
/* background-color: #7bff47; */

.table_col3{
width: 15%;
height: 100%;
/* background-color: #47d7ff; */
}
.table_col4{
width: 20%;
height: 100%;
/* background-color: #6347ff; */
}
.table_col5{
width: 15%;
height: 100%;
/* background-color: #ff47a0; */
display: flex;
justify-content: center;
align-items: center;
}

.table_col5 i{
color: red;
}
.col_table p{
font-size: 1.3vw;
font-family:"Neo Display Medium";

}

/* -------------------------------------------------more----------------------------------------------------- */

#more_button{
  width: 30%;
  height: 70%;
  display: flex;
  justify-content: space-around;
  /* background-color: blue; */
  }
  #more_button input{
  width: 55%;
  height: 100%;
  border: 2px solid transparent;
  border-radius: 6px;
  padding-left: 25px;
  font-family:"Neo Display Medium";
  border: 1px solid #FF4411;
  
  }
  #more_button button{
  width: 25%;
  height: 100%;
  border: 2px solid transparent;
  border-radius: 6px;
  font-family:"Neo Display Medium";
  font-size: 1vw;
  font-weight: 300;
  color: #fff;
  background-color: #7a928f;
  display: flex;
  justify-content: space-around;
  align-items: center;
  
  /* padding-left: 25px; */
  }
  #more_button button i{
  font-size:1vw ;
  }
  .more_box_outer{
    width: 100%;
    height: 45vh;
    /* background-color: lightpink; */
    /* border: 2px solid black; */
    display: flex;
    padding: 10px;
    justify-content: space-between;
    }
    .more_left{
      height: 100%;
      width: 70%;
      /* background-color: yellow; */
    }
    .more_head{
      /* background-color: pink; */
      height: 20%;
      width: 100%;
      /* position: relative; */
      padding: 20px;
    }
    .more_head h3{
      font-size: 1.5vw;
      font-family:"Neo Display Medium";
      font-weight: 900;
      color: #ff6347;


    }
    .more_para{
      padding: 20px;
      /* background-color: skyblue; */
      width: 100%;
      height: 50%;
    }
    .more_para p{
      font-size: 1.2vw;
      font-family:"Neo Display Medium";
      font-weight: 500;

    }
    .more_below_text{
      padding: 20px;
    }
    .more_below_text a{
      text-decoration: none;
      /* color: #ff6347; */
      font-family:"Neo Display Medium";
      font-size: 1.3vw;
      font-weight: 900;

    }
    .more_right{
      height: 100%;
      width: 40%;
      /* background-color: orange; */
      /* position: relative; */
    }
    .more_right img{
      height: 55%;
      width: 90%;
      position: relative;
      top: 10%;
    }