@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');


:root{
    --main-color:#e8786e;
    --black:#555;
    --white:white;
    --bg:#F2E7FF;
    --light-color:#777;
    --yellow:#FFC200;
    --grey:#595959;
    --border:.1rem solid rgba(0,0,0,.1);
    --box-shadow:0 .5rem 1.5rem rgba(0,0,0,.1);
    --t-blue:#5CE1E6;
    /* #fceae9;     */
}

*{
    font-family: 'Nunito', sans-serif;
    margin:0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    border: none;
    text-decoration: none;
    /* text-transform: capitalize; */
    transition: all .2s ease-out;    
}
body{
    background:var(--bg);
}

html{
    font-size: 62.5%;
    scroll-behavior: smooth;
    scroll-padding-top: 9rem;
    overflow-x: hidden;
}
section{
    padding: 2rem 9%;
}
.heading{
    text-align: left;
    padding-bottom: 3rem;
    font-size: 4rem;
    color:var(--black);
}
.heading span{
    color:var(--yellow);
    border-radius: .5rem;
    background: var(--bg);
    padding: 0 1.5rem;
}
.btn{
    margin-top: 1rem;
    display: inline-block;
    padding: 1rem 3rem;
    font-size: 1.7rem;
    cursor: pointer;
    color:var(--white);
    background: var(--grey);
    border-radius: .5rem;
    border: none;
    box-shadow: var(--box-shadow);
    position: relative;
    top: 50%;
    left: 10%;
    transform: translate(-10%, -50%);
    -ms-transform: translate(-50%, -50%);
    overflow: hidden;
    height: 100%;
}
.btn::before{
    content: '';
    position:absolute;
    top:0; right: 0;
    height: 100%;
    width: 0%;
    background: var(--black);
    z-index: -1;
    transition: .3s ease-out;
}
.btn:hover::before{
    left:0;
    width: 100%;
}
.btn h2{
    font-size: 3rem;
    color: var(--bg);
}
.btn .ELib::after{
    content:'Enter Library';
}
.btn .ELib:hover::after{
    content:'لائبريري ۾ داخل ٿيو';
    color: var(--yellow);
}

.header{
    position: fixed;
    top:0; left: 0; right: 0;
    z-index: 1000;
    /* background: #fff; */
    background: var(--grey);
    box-shadow: var(--box-shadow);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 9%;
}
.header .logo{
    font-size: 2.5rem;
    /* color: var(--black); */
    color: #fff;
    font-weight: bolder;
}
.header .navbar a{
    font-size: 1.7rem;
    font-weight: bold;
    /* color: var(--light-color); */
    color:var(--yellow);
    margin-left: 4rem;
}
.header .navbar a:hover{
    font-weight: bolder;
    font-size: 2.2rem;
    color:var(--bg);
    text-decoration: none;
}
.header .navbar .hme::after{
    content: 'Home';
}
.header .navbar .hme:hover::after{
    content: 'گهر';
    transition: 1s;
}
.header .navbar .lib::after{
    content: 'Library';
}
.header .navbar .lib:hover::after{
    content: 'لائبريري';
    transition: 1s;
}
.header .navbar .abt::after{
    content: 'About';
}
.header .navbar .abt:hover::after{
    content: 'بابت';
    transition: 1s;
}
#menu-btn{
    cursor: pointer;
    font-size: 2.5rem;
    padding: 1rem 1.3rem;
    border-radius: .5rem;
    color: var(--main-color);
    background: var(--bg);
    display: none;
}
#menu-btn:hover{
    color: #fff;
    background: var(--main-color);
}

.home{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding-top: 10rem;
    /* background: var(--bg); */
    background-image: url("../images/bg.jpg");
    position: relative;
    background-repeat:no-repeat;
    background-size: 100% 100%;
    background-position:center;
    width: 100%;
    height: 100vh;
}
.home .overlay {
    margin-top:8rem;
    padding-top: 0rem;
    position: absolute; 
    top: 0;
    right: 0;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5); /* Black see-through */
    color: var(--bg);
    width: 40%;
    height: 85vh;
    transition: .5s ease;
    opacity:1;
    font-size: 1.9rem;
    padding: 2.5rem;
    text-align: center;
  }
  .home .overlay .quote{
    font-size: 1.9rem;
    line-height: 1.7em;
  }
  .home .overlay .author_name{
      font-size: 1.4rem;
      color: var(--yellow);
  }
  .home .overlay .partition{
    margin-top: 5%;
 }
.home .content{
    flex: 1 1 65rem;
}
.home .image{
    flex: 1 1 45rem;
}
.home .image img{
    width: 100%;
}
.home .content h3{
    font-size: 3.5rem;
    color:var(--black);
    line-height: 1.8;
}
.home .content p{
    font-size: 1.7rem;
    color: var(--light-color);
    line-height: 1.8;
    padding: 1rem 0;
}

.about .row{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}
.about .row .image{
    flex: 1 1 45rem;
    padding: 2rem;
}
.about .row .image img{
    width: 100%;
}
.about .row .content{
    flex: 1 1 45rem;
}
.about .row .content .title{
    font-size: 3rem;
    color: var(--black);
}
.about .row .content p{
    /* font-family: 'Lateef', cursive; */
    font-size: 1.5rem;
    /* font-weight: bold; */
    text-align: justify;
    color: var(--light-color);
    line-height: 1.8;
    padding: 2.2rem 0;
}
.about .row .content .author_name{
    color: var(--yellow);
}
/* .about .row .content .about-text::after{
    content: 'Italian philosopher Umberto Eco .... is the owner of a large personal library (containing thirty thousand books), and separates visitors into two categories: those who react with “Wow! Signore professore dottore Eco, what a library you have! How many of these books have you read?” and the others – a very small minority – who get the point that a private library is not an ego-boosting appendage but a research tool.';
}
.about .row .content .about-text:hover::after{
    content: 'اِطالوي فيلسوف اُمبَرٽو ايڪو وٽ 30 هزارن کان وڌيڪ ڪِتابن جو ذاتي ڪُتب خانو آهي. ساڻس ملڻ لاءِ ايندڙن کي هو ٻن ڀاڱن ۾ ورهائيندو آهي، هڪڙا اهي جيڪي ايترا گھڻا ڪتاب ڏسي وائڙا ٿي پڇندا آهن ته پروفيسر صاحب، واھ جي لائبريري آهي؛ توهان اهي سڀ ڪتاب پڙهي ڇڏيا آهن؟ ٻيا اُهي جيڪي ڪتابن گڏ ڪرڻ جي مقصد کي سمجھندا آهن ته اهي ڪتاب پاڻُ پَڏائڻ يا ڊاڙون هڻڻ جو نه پر اَڀياس ۽ تَحقيق جو هٿيار آهن۔';
}
.about .row .content .about-text-p2::after{
    content: 'Read books are far less valuable than unread ones. The library should contain as much of what you do not know .... You will accumulate more knowledge and more books as you grow older, and the growing number of unread books on the shelves will look at you menacingly. Let us call this collection of unread books an antilibrary.';
}
.about .row .content .about-text-p2:hover::after{
    content: 'پڙهيل ڪتابن جي ڀيٽ ۾ نهَ پڙهيل ڪتاب وڌيڪ ڪارائتا هوندا آهن ڇو جو اهي چِتائن ٿا ته توهان کي ڇا نه ٿو اچي ۽ اسانجي ڄاڻ ڪِٿي کُٽل آهي. ڪَٻَٽَ جي خانن ۾ رکيل نهَ پڙهيل ڪتاب وڌندڙ عمر سان گڏ وڌندا رهندا ۽ ڀرسان لنگھڻ وقت اسانتي ڦٽڪاريندي پڇندا: اڃا نه پڙهيو اٿئي، حيف هجئي. اچو ته اهڙن نه پڙهيل ڪتابن جي ڍڳ کي ائنٽي لائبريري يا ضد لائبريري سڏيون۔ ';
} */
.about .row .content .icons-container{
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 2rem;
}
.about .row .content .icons-container .icons{
   flex:1 1 15rem;
   border-radius: .5rem;
   border: var(--border);
   padding: 1.5rem;
   text-align: center;
}
.about .row .content .icons-container .icons i{
    border-radius: 50%;
    background: var(--bg);
    color: var(--grey);
    height: 5rem;
    width: 5rem;
    line-height: 5rem;
    font-size: 2rem;
}
.about .row .content .icons-container .icons h3{
    color:var(--light-color);
    font-size: 1.7rem;
    padding-top: 1rem;
}
.footer{
    margin-top: 1rem;
    background: var(--grey);
}
.footer .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
gap: 1.5rem;
}
.footer .box-container .box h3{
font-size: 2.5rem;
padding: 1rem 0;
color:var(--yellow);
}
.footer .box-container .box a{
    display: block;
    font-size: 1.5rem;
    padding: 1rem 0;
    color:var(--bg);
}
.footer .box-container .box a i{
    padding-right: .5rem;
    color: var(--yellow);
}
.footer .box-container .box a:hover i{
    padding-right: 2rem;
}
.footer .credit{
    color: var(--bg);
    text-align: center;
    padding: 1rem;
    margin-top: 2rem;
    padding-top: 2rem;
    font-size:2rem;
}
.footer .credit span{
    color:var(--yellow);
}

/* Details Page Start */
.content-details{
    display: flex;
    margin-top: 8rem;
    flex-wrap: wrap;
    gap: 1.5rem;
}
.content-details .card{
    flex: 1 1 65rem;
    box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2);
    max-width: 300px;
    margin:auto;
}
.content-details .details{
    flex: 1 2 65rem;
}
.cardd {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    width: 100%;
    background-color: var(--bg);
    margin:.5%;
  }
  
  .cardd:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  }
  
  .cardd .container {
    padding: 2px 16px;
  }
.cimage{
    width:100%;
    height:25vh;
  }

/* Details Page End */
.container{
    margin: 2rem;
  }
  /* Column container */
  .row {  
    display: flex;
    flex-wrap: wrap;
  }
  
  /* Create two unequal columns that sits next to each other */
  /* Image Container*/
  .image-container{
    flex: 23%;
  }
  /* Sidebar/left column */
  .side {
    display: flex;
    flex:100%;
    justify-content: flex-start;
    /* background-color: #D4D1D1; */
  }
  
  /* Main column */
  .main {
    flex: 75%;
  }
  .Recm-books{
    flex:100%;
    background-color: #D4D1D1;
    margin: 2rem;
    padding: 1.3rem;
  }
  .R-Heading{
    flex: 100%;
  }
  .left{
    float: left;
    margin: 1rem;
  }
  
  /* Fake image, just for this example */
  .fakeimg {
    background-color: #F2E7FF;
    flex: 33%;
    box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2);
      max-width: 300px;
      margin:auto;
  }
  .about-book{
      flex:60%;
      padding : 20px;
      padding-top:0%;
  }

  /* Table */
  table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
  }
  
  th, td {
    text-align: left;
    padding: 8px;
  }

  tr:nth-child(even){background-color: #f2f2f2}

  .h3{
    font-size: 2rem;
    font-weight: bold;
  }
  .h4{
    font-size: 1.4rem;
    font-weight: bold;
  }
  .h5{
    font-size: 1.3rem;
  }
  .share{
    padding: 1rem;
  }
  .db{
    background-color: var(--grey);
    border-radius: .3rem;
    color: white;
    padding: .5rem 1.6rem;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
  }
  

  /* Footer */
  .Rbooks{
    padding: 20px;
    text-align: center;
    background: #ddd;
  }
.yellow{
    color: var(--yellow);
}
.t-blue{
    color: var(--t-blue);
}
/* Details book images */
.book-img{
    width: 100%;
    height: auto;
}
















/* media queries */
@media (max-width:991px){
    html{
        font-size: 42%;
     }

     .header{
         padding: 2rem;
     }
     
     section{
         padding: 2rem;
     }
     .btn{
        top: 50%;
        left: 30%;
        transform: translate(-10%, -5%);
        -ms-transform: translate(-10%, -5%);
     }
     .side{
       flex-basis: auto;
     }
}
@media (max-width:768px){
    #menu-btn{
        display: initial;
    }
     .header .navbar{
         position: absolute;
         top:115%; right: 2rem;
         background: #fff;
         box-shadow: var(--box-shadow);
         border: var(--border);
         border-radius: .5rem;
         width: 30rem;
         transform: scale(0);
         transform-origin: top right;
         opacity: 0;
}
    .header .navbar.active{
        transform: scale(1);
        opacity: 1;
    }
    .header .navbar a{
        font-size: 2rem;
        display: block;
        padding: 1rem;
        margin: 1rem;
        border-radius: .5rem;
    }
    .header .navbar a:hover{
        background: var(--bg);
    }
    .home .overlay{
        width: 100%;
    }
    .side{
        flex-basis: auto;
     }
}
@media (max-width:450px){
    html{ 
        font-size: 45%;
     }
     .home .overlay{
         width: 100%;
         height: 92vh;
     }
     .side{
        flex-basis: auto;
        flex-wrap: wrap;
        background-color:var(--bg);
     }
     .cardd{
        margin-top:1%;
     }
     .cimage{
        width:100%;
        height:35vh;
      }
    }

@media screen and (max-width: 700px) {
    .row, .navbar {   
      flex-direction: column;
    }
  }