@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap');


:root {
--bg: #f4f6f8;
--panel: #ffffff;
--text: #111827;
--muted: #6b7280;
--shadow: #bdbdbd ;
--backdrop: #dcdcdc6c;
}


.dark {
--bg: #0f172a;
--panel: #020617;
--text: #e5e7eb;
--muted: #94a3b8;
--shadow: #15161a ;
--backdrop: #02061776;
}


* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "IBM Plex Sans", sans-serif;
}


body {
background: var(--bg);
color: var(--text);
}

/*///////////////////////////////////////////
////////. Override style /////////////////*/


.bg-none{
  background-color: #00000000;
}

.bg-auto{
    background-color: var(--panel);
    color: var(--text);
}

.text-auto{
  color: var(--text);
}

.bg-auto-r{
    background-color: var(--bg);
    color: var(--text);
}

.shadow-xl{
  box-shadow: 5px 5px 20px var(--shadow);
}

.btn-auto{
  box-shadow: 1px 1px 2px gray;
  border: .5px solid whitesmoke;
}


.form-control, .form-select{
  background-color: transparent;
  color: var(--text);
  box-shadow: 1px 1px 2px #444444;
  border: 1px solid var(--panel);
}
.form-control:focus , .form-select:focus{
  background-color: var(--bg);
  color: var(--text);
  box-shadow: 1px 1px 2px #44444462;
  border-color: #007a35a8;
}

.form-label{
  margin-left: 10px;
  font-size: 14.5px;
}



small{
  font-size: smaller !important;
}

.page-link{
  border-color: #d00000;
 color: #d00000;
}
.active>.page-link{
 background-color: #d00000;
 border-color: #d00000;
}

.btn-red{
  background-color: #d00000;
  color: whitesmoke;
  font-weight: 600;
    letter-spacing: .8px;

}
.btn-red:hover{
  background-color: #a20000;
  color: whitesmoke;
  font-weight: 600;
}

.btn-outline-red{
  background-color: transparent;
  border: 1px solid #d00000;
  color: #d00000;
  font-weight: 600;
  letter-spacing: .8px;
}
.btn-outline-red:hover{
  background-color: #d00000;
  border: 1px solid #d00000;
  color: whitesmoke;
}

/*///////////////////////////////////////////
////////. /Override style /////////////////*/

.border-start{
    border: none;
    border-left: 4px solid var(--text) !important;
    margin-right: 5px ;
}



.app {
display: flex;
min-height: 100vh;
}


.main {
flex: 1;
display: flex;
flex-direction: column;
position: relative;
height: 100%;
}


.navmenu {
position: fixed;
top: 2%;
left: 30%;
width: 40%;
background: var(--panel);
backdrop-filter: blur(5px);
border-radius: 20px;
align-items: center;
padding: 8px 0;
box-shadow: 2px 2px 10px var(--shadow);
z-index: 999;
}

.navmenu .nav-items{
background-color: transparent;
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}


.navmenu .nav-items a{
    text-decoration: none;
    color: var(--text);
    font-size: 25px;
}

.link-active{
  color: #d00000 !important;
}


.content {
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
}

.content .inner-section{
    background-color: var(--bg);
    color: var(--text);
    padding: 2%;
    width: 100%;
    margin-top: 4%;
}

.media-row{
  flex-wrap: wrap;
  gap: 3px;
}

.video-card, .audio-card, .book-card{
    width: 270px;
    height: auto;
    aspect-ratio: calc(5/6);
    overflow: hidden;
    background-color: var(--panel);
    position: relative;
    margin-block: 2px;
    transition: all .4s;
}

.video-card img, .audio-card img, .book-card img{
   object-fit: cover;
   width: 100%;
   height: auto;
    aspect-ratio: calc(3/4);
}


.audio-card:hover , .video-card:hover, .book-card:hover{
   transform: translateY(-4px);
}


.video-card p, .audio-card p, .book-card p{
    position: absolute;
    bottom: 0;
    left: 0;
   opacity: 0;
   font-weight: 600;
   background-color: #0000004f;
   color: #ffffff;
   transition: opacity .3s;
}

.video-card:hover> a p, .audio-card:hover> a p, .book-card:hover> a p{
  opacity: 1;
}

.upgrade-section, .pay-section{
  border-radius: 20px;
  padding-block: 10%;
  padding-inline: 2%;
}

.upgrade-button, .pay-button{
  background-color: #d00000;
  color: whitesmoke;
  font-weight: 600;
  transition: all .4s;
  
}

.upgrade-button:hover{
  background-color: #b30000;
  color: whitesmoke;
  font-weight: 600;
  
}



/**************** index page ***/
.main-section{
  
  padding: 3%;
}
.main-section .inner-section{
  position: relative;
  /*height: 75vh;*/
  background-image: url('/images/index.avif');
  background-position: center;
  background-size: cover;
  border-radius: 20px;
  padding-block: 13%;
}

.main-section .inner-section .text-card{
  height: fit-content;
  margin-right: 3%;
  /*margin-top: 10%;*/
  padding: 2%;
  border-radius: 20px;
}
.main-section .inner-section .text-card p{
  font-size: 40px;
}




@media screen and (max-width: 767px) {


.navmenu {
position: fixed;
top: 95%;
left: 0%;
width: 100%;
padding: 0px 0;

}

    .content .inner-section{
        margin-top: 0%;
    }

    .video-card, .audio-card, .book-card{
    width: 49.3%;
    height: auto;
    aspect-ratio: calc(3/4);
    padding-bottom: 10px;
}


.video-card img, .audio-card img, .book-card img{
   width: 100%;
    height: auto;
    aspect-ratio: calc(3/4);
}


.video-card p, .audio-card p, .book-card p{
   font-size: 13px;
}

.upgrade-section, .pay-section{
  margin-top: 50%;
  border-radius: 20px;
  padding-block: 10%;
  padding-inline: 2%;
}


.main-section .inner-section{
  position: relative;
  height: 80vh;
  margin-top: 20px;
  padding: 10px;
  border-radius: 20px;
}

.main-section .inner-section .text-card{
  height: fit-content;
  margin-right: 0%;
  margin-top: 30rem;
  padding: 20px;
  border-radius: 20px;
}
.main-section .inner-section .text-card p{
  font-size: 20px;
}

.footer{
  margin-top: 20%;
}



}