body{background-color: rgb(251, 247, 243);
    

}
body a {
    text-decoration: none;
}
nav  {
    background-color: rgb(253, 250, 246);
    font-family:sans-serif;
    width: 100%;
    height: 4em;
    color: black;
    margin: 0%;
    border-bottom: rgb(240, 236, 228) solid 2px;

    
}



@media (min-width: 767px) and (max-width: 1024px) {
    nav {
        height: 5em;
    }
}



.logo{
    width: 100%;
    height: auto;
    
    margin-top: 1%;
}
nav a {height: 3em;
       line-height: 3em;    
     }

.menu_nav{
    float: right;
    width: 10%;
    height: 10%;
    
    margin-top: 1%;

}

.navitem{
    font-size: 100% ;
    float: right;
    margin-left: 7%;  
     
}

.length_button , .category_button , .level_button{
    cursor:pointer;
}

.length_menu , .category_menu ,  .level_menu{
    background-color: WHITE;
    height:auto;
    display: none;
}

.length_menu.show , .category_menu.show , .level_menu.show{
    display: block;
}





.drop_down_item{
    background-color: white;
    float: left;
    margin-left: 2%;
    margin-right: 7%;
    margin-top: 1%;
    margin-bottom: 1%;
    font-family:sans-serif;
    color: black;
}

nav a{

color: black;
}

.write:link{color:white;
       
}

.write{background-color: black;
       color: white;
       width: +8.5%;
       border-radius: 14%;
       text-align: center;
       width: 5.6em;
       
       
}
.write:visited{color:white}

 /* nav mobile*/

 .mobile_menu , .length_menu , .level_menu , .category_menu{
    background-color: white;
    font-family: sans-serif;
 }

 .mobile_menu_item a{
    background-color: white;
    color: black;
    display: flex;
    justify-content: center;
    margin-top: 2.5%;
    margin-bottom: 2.5%;
 }

.mobile_drop_down_item a{
    display: block;
}


.mobile_length_drop_down_menu , .mobile_category_drop_down_menu , .mobile_level_drop_down_menu {
    display: none;
}

.mobile_length_drop_down_menu.show , .mobile_category_drop_down_menu.show , .mobile_level_drop_down_menu.show {
    display: block;
}

.mobile_menu {
    display: none;
}

.mobile_menu.show {
    display: block;
}

 /* main hero*/


 .hero{
    
    font-family: sans-serif;

    padding-left: 3%;
    padding-right: 3%;
    margin-top: 3%;
    margin-bottom: 3%;
   

}
.herotitle1{transform: scaleY(1.05);
    margin-top: 2%;
    
    font-weight: bold;
    font-size: 270%;



}
.herotext1{
    font-size: 150%;
    color: rgb(64, 64, 64);
    text-align: justify;
   
    
   
  
    
}

    

.heropic_wrapper{
    margin-right: 5%;
}

.heropic{
    width:80%;
    
    margin-right: 10% ;
    margin-top: 8%;
    
    
    display:block;
    float: left;
    
    border-radius:16px;
}

.heropic3{
    width:100%;
    
   
}
.aboutpic4{
    width: 100%;
    height: 60%;
    margin-top: 8%;

}

.aboutpic5{
    width: 100%;
    height: 50%;
    margin-top: 10%;

}


.aboutpic6{
    width: 100%;
    height: 40%;
    margin-top: 3%;

}
 /* main form*/

 /* Tom Select customization */
.ts-control,
.ts-control .item,
.ts-control input::placeholder {
    color: #000;
}

.form{
     
     
     
}

 .textform{line-height: 275%;
    width: 88%;
    margin-left: 1%;
    margin-right: 1%;
   
}
.selectform{
    width: 20%;
    margin-top:2% ;
    margin-left: 2%;
    
    
    
}

.formsubmit{
    width: 20%;
    margin-left: 1%;
    margin-right: 1%;
    margin-top: 1.8%;
    margin-left: 6%;
    margin-right: 6%;
    float: right;
}

.line{
    border-bottom: rgb(220, 213, 199)  solid 2px;
}


.popular_wrapper{

    margin-top: 5.5%; 
    margin-bottom: 3%;
    
}


.popular{
    margin-top: 3%;
    font-weight: bold;
    font-size: 270%;
    font-family: sans-serif;
    margin-left: 8%;
    display: inline;

}

.viewallstories{
    color: black;
    font-size: 200%;
    display: inline-block;
    float: right;
    font-family: sans-serif;
    margin-right: 8%;

}

/* main list*/
.imagecontainer{
    margin-left: 2.5%;
    
}

.image{
 
    width: 100%;
    height: auto;


}
.list{
    
    
    
}

.storydetail{
    color: rgb(64, 64, 64);
    line-height: 1.5;
    height: calc(1.5em * 3);
    overflow: hidden;
    font-size: 125%;
}

.storytitle{
    font-family: sans-serif;
    
    font-size: 150%;
    
    
}

.length_list , .level_list{
    height: 1em;
    overflow: hidden;
    text-overflow: ellipsis;

}



.view-all-container{
    text-align:left;
    margin-left: 11%;
    margin-top:3%;
}

.view-all-btn{
    display:inline-block;
    width:20%;
    max-width:260px;
    min-width:180px;

    padding:1% 0;
    background: rgb(136, 100, 68);
    color:#fff;
    text-decoration:none;
    text-align:center;

    border-radius:10px;
    font-size:1rem;
    font-weight:600;
    transition:background .2s ease;
}

.view-all-btn:hover{
    background:#222;
}

/* pagination*/
.pagination{

 background-color:#FBFBFB;

 margin-bottom: 4%;
margin-top: 4%;

}

.pagination__button{
text-align: center;
color: black;
font-size: 150%;
margin-left: 1%;
margin-right: 1%;



}

.abouttitle{
    margin-top: 3%;
    font-weight: bold;
    font-size: 270%;
    font-family: sans-serif;
    margin-left: 6.5%;


}

.abouttext{
    margin-top: 3%;
    font-weight: normal;
    font-size: 180%;
    font-family: sans-serif;
    padding-left: 11%;

}

.aboutpic{
    width: 100%;
   
}

/* footer*/
.footerclass{background-color: white;
    color:black;
    font-family: sans-serif;
    }

.footerlogo{
    margin-top: 5%;
    margin-bottom: 5%;


}

.footertitle{
    color:black;
    font-weight: lighter;
    font-size: small;
}

.footerdetail{
    color: rgb(64, 64, 64);
    font-size: smaller;
}