*{
padding:0;
margin:0;
color:black;
font-family:sans-serif;
}

#mainpdf{
	position:relative;
	top:75px;
    left:30px;
	height:440px;
	border-radius:10px;
	border:2px solid black;
	border-bottom:2px solid black;
	
	}

.backBtn{
	position:relative;
	top:45px;
	left:40px;
	z-index:9999;
	}


#noSlider #card1 {
  opacity: 1;
  transition: opacity 0.25s ease;
}
#Eng, #Engi, #ourd, #oUr,{
	display:none;
	}
.hidden-card {
  opacity: 0;
}
/* optional fade-in */
.fade-in {
  animation: fadeIn 250ms ease forwards;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
#accBtn{
position:relative;
top:3px;
font-size:15px;
    text-decoration:none;
    color:#fff;
    background:blue;
    padding:4px;
    border-radius:5px;
    cursor:pointer;
    
}
input{
    outline:none;
}
#infoShow{
    transition:0.3s;
}
.hamburger{
	position:absolute;
	right:10px;
	width:35px;
	
	}
.sidebar{
	width:250px;
	position:fixed;
	bottom:-28%;
	left:-250px;
	height:120%;
	background: #efefef;
    color: white;
    overflow-y: auto;
    transition: left 0.3s ease;
    z-index: 1000;
    padding-top: 60px;
	
	}
 .overlay {
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: 999;
  }
.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 25px;
    cursor: pointer;
  }
.sidebar.active {
    left: 0;
  }






     


.urTitle{
    display:none;
    
}
#pehlaNav{
display:flex;
align-items:center;

}
#div1{
background: linear-gradient(90deg, #4c1d95, #9d174d);

}
#logo{
border:2px solid white;
border-radius:50%;
width: 50px;
}

#navInput{
border:1px solid black;
border-radius:0 20px 20px 0;
position:relative;
top:13px;
left:-32px;
height:20px;

}
#Search{
position:relative;
left:0px;
top:2px;
z-index:1;
font-size:15px;
}
#div2{
background: white;
position:relative;
top:13px;
left:-31px;
height:20px;
border:1px solid black;
border-radius:20px 0 0 20px;
padding-left:5px;
}
#home{
position:relative;
bottom:10px;
left:7px;
color:#fff;
border:1.5px solid white;
padding:3px;
font-size:10px;
background: #2bc0ff;
border-radius:20px;
text-decoration:none;
}
#lang{
outline:none;
position: relative;
left:-216px;
bottom:10px;
background:#efefef;
border-radius:20px;
margin-left:13px;
}
#lang:active{
background: #2b82ff;
}

}
#slider-wrapper{
background: blue;
padding: 20px;
border-radius:20px;

overflow-x:auto;

}
#slider{
overflow-y:hidden;
display:flex;
gap:10px;
overflow-x:auto;
scroll-snap-type: x mandatory;

}
.cardBahar{
flex:0 0 auto;
background: #efefef;
border-radius:30px;
padding:20px;
width:270px;
height:140px;
border:2px solid black;

}
#ttt{
font-size:10px;
margin-left:10px;
}
#baharTitle{
margin-left: 10px;
position:relative;
left:112px;
bottom:148px;
font-size:12px;
}
#baharWriter{
margin-top: 10px;
margin-left:10px;
position:relative;
left:112px;
bottom:148px;
font-size:12px;
}
#jildBahar{
margin-left: 10px;
position:relative;
left:114.5px;
bottom:140px;
font-size:15px;
}
.readBahar{
display:inline-block;
position: relative;
left: 138px;
font-size:15px;
bottom: 117px;
border:1px solid black;
padding:4px;
border-radius:20px;
background: #00eaff;
color:#091613;

}
.cardBahar img{
position: relative;
left:-8px;
bottom:8px;
border:2px solid black;
border-radius:10px;
height: 150px;;
width:120px;
}
.readQanoon{
display:inline-block;
position: relative;
left: 138px;
font-size:15px;
bottom: 117px;
border:1px solid black;
padding:4px;
border-radius:20px;
background: #00eaff;
color:#091613;
}

#card1{

position:relative;
top:10px;
left:0px;
margin-top:5px;
padding:20px;
background: #efefef;
border-radius:30px;
border:2px solid black;

}
#card1 img{
width:100px;
height:130px;
border:2px solid black;
border-radius:13px;
position: relative;
left:0px;
bottom:10px;
}
#card1title{
position: relative;
bottom:7px;
font-size:8px;
}
.card1Read{
display:inline-block;
position: relative;
left: 25px;
font-size:10px;
bottom: 8px;
border:1px solid black;
padding:4px;
border-radius:20px;
background: #00eaff;
color:#091613;
}
#noSlider{
display:grid;
grid-template-columns:repeat(2, 170px);
grid-template-rows:repeat(1000, 180px);

}
#card1jild{
color:blue;
font-size:9px;
position: relative;
bottom:7px;
}
#card1writer{
position: relative;
bottom:7px;
font-size:8px;
}
.card1Readm{
display:inline-block;
position: relative;
left: 25px;
bottom: 0px;
border:1px solid black;
padding:4px;
font-size:10px;
border-radius:20px;
background: #00eaff;
color:#091613;
}
#viewer{
	height:550px;
display:none;
position: relative;
left:-15px;
bottom:40px;
margin-bottom:10px;

}
.backBtn{
width:60px;
border-radius:20px;
}
#abb{
margin-top:13px;
}
@media(min-width:320px) and (max-width:359px) {
#mainpdf{
position:relative;
	right:40px !important;
}
	.sidebar{
	width:250px;
	position:fixed;
	bottom:-31%;
	left:-250px;
	height:120%;
	background: #efefef;
    color: white;
    overflow-y: auto;
    transition: left 0.3s ease;
    z-index: 1000;
    padding-top: 60px;
	
	}
	
#div1{
height:60px;

}
#logo{
position:relative;
top:3px;
border:2px solid white;
width:50px;
}
  #filterBtn{
position:relative;
    left:-200px;
    bottom:11px;
    border-radius:15px;
    background:blue;
    border:2px solid white;
    transition:200ms ease;
    color:white;
    padding:3px;
  }
  #filterBtn:active{
background:hotpink;
  }
#home{
font-size:10px;
width:30px;
margin-left:2px;
margin-right:1.5px;
border:1.5px solid white;
height: 7px;
display:flex;
align-items:center;
justify-content:center;
}
#div2{
width:15px;
height:20px;
}
#navInput{
height:20px;
width: 180px;
}
#Search{
position:relative;
top:1px;
left: -4px;
font-size:15px;
}
.cardBahar{
width: 200px;
height: 115px;
}
.cardBahar img{
position:relative;
right:0px;
bottom:10px;
width:90px;
height: 130px;
}
#card1{
width:115px;
height:180px;
margin:0;
}
#card1 img{
position:relative;
left:6px;
}

#baharTitle{
position: relative;
bottom:130px;
left:90px;
font-size:10px;
}
#baharWriter{
position: relative;
bottom:130px;
left:90px;
font-size:10px;
}
#jildBahar{
position: relative;
bottom:130px;
left:90px;
font-size:15px;
}
.readQanoon{
position: relative;
bottom:110px;
left:100px;
font-size:15px;
}
.readBahar{
position: relative;
bottom:110px;
left:100px;
font-size:15px;
}
#lang{
position: relative;
left: -208px;
}
  
#viewer{
position:relative;
left:-15px !important;

}
.up360{
position:relative;
 bottom:-2px;
}

.card1Readm{
position:relative;
}
.card1Read{
position:relative;

}
.backBtn{
margin:0;
  position:relative;
 
 
}
#noSlider{
display:grid;
grid-template-columns:repeat(2, 160px);
grid-template-rows:repeat(1000, 230px);
}
	#filterBtns{
    display:grid;
    grid-template-columns:repeat(4 , 25%);
    grid-template-rows:repeat(100, 50px);
	}
}
@media(min-width:360px) and (max-width:375px){

.sidebar{
	width:250px;
	position:fixed;
	bottom:-27%;
	left:-250px;
	height:120%;
	background: #efefef;
    color: white;
    overflow-y: auto;
    transition: left 0.3s ease;
    z-index: 1000;
    padding-top: 60px;
	
	}
 #filterBtn{
position:relative;
    left:-180px;
    bottom:11px;
    border-radius:15px;
    background:blue;
    border:2px solid white;
    transition:200ms ease;
    color:white;
    padding:3px;
  }
  #filterBtn:active{
background:hotpink;
  }
#filterBtns{
    display:grid;
    grid-template-columns:repeat(4 , 25%);
    grid-template-rows:repeat(100, 50px);
}
#filterBtns button{
    
    margin:0;
    height:50px;
    width:90px;
}
#viewer{
position:relative;
left:-5px;

}
#card1{
width:125px;
height:190px;
}
#card1 img{
width:120px;
height:145px;
}
.card1Readm{
position:relative;
}
  .up360{
position:relative;
   bottom:0px;
  }
.card1Read{
position:relative;
}
#noSlider{
display:grid;
grid-template-columns:repeat(2, 180px);
grid-template-rows:repeat(1000, 240px);
}
#lang{
position:relative;
left:-190px;

}
#home{
position:relative;
left:15px;
}
}
@media(min-width:376px) and (max-width:414px){

  #filterBtn{
position:relative;
    left:-200px;
    bottom:11px;
    border-radius:15px;
    background:blue;
    border:2px solid white;
    transition:200ms ease;
    color:white;
    padding:3px;
  }
	#filterBtns{
    display:grid;
    grid-template-columns:repeat(4 , 25%);
    grid-template-rows:repeat(100, 50px);
}
#card1{
width:130px;
height:190px;
}
#noSlider{
display:grid;
grid-template-columns:repeat(2, 49%);
grid-template-rows:repeat(1000, 240px) ;
}
#card1 img{
width:125px;
height:150px;
}
.card1Read{
position:relative;
bottom:10px;
left:30px;
}
.card1Readm{
position:relative;
bottom:2px;
left:30px;
}
.readBahar , .readQanoon{
width:80px;
}

#lang{
position:relative;
left:-210px;
}
#home{
position:relative;
left:15px;
}
}
@media(min-width:415px) and (max-width:440px){
#lang{
position:relative;
left:-215px;
}
#noSlider{
display:grid;
grid-template-columns:repeat(2,  205px);
grid-template-rows:repeat(1000, 260px);
}
#card1{
width:150px;
height:210px;
}
#card1 img{
position:relative;
left:5px;
width:140px;
height:165px;
}
.card1Read{
position:relative;
left:40px;

}
  
.card1Readm{
position:relative;
left:40px;
}
.readBahar , .readQanoon{
width:80px;
}
}
@media(min-width:441px) and (max-width:460px){
#noSlider{
display:grid;
grid-template-columns:repeat(2, 210px);
grid-template-rows:repeat(1000, 260px);
}
#card1{
width:150px;
height:210px;
}
#card1 img{
position:relative;
left:5px;
width:140px;
height:165px;
}
.card1Read{
position:relative;
left:40px;

}
.card1Readm{
position:relative;
left:40px;
}
.readBahar , .readQanoon{
width:80px;
}

}
@media(min-width:461px) and (max-width:479px) {
#lang{
position:relative;
  left:-190px;
  margin:0;
}
  #home{
width:30px;
    
  }
  #navInput{
width:170px;
  }
  #noSlider{
display:grid;
grid-template-columns:repeat(2, 230px);
grid-template-rows:repeat(1000, 260px);
}
#card1{
width:150px;
height:210px;
}
#card1 img{
position:relative;
left:5px;
width:140px;
height:165px;
}
.card1Read{
position:relative;
left:40px;

}
.card1Readm{
position:relative;
left:40px;
}
.readBahar , .readQanoon{
width:80px;
}
  
  }
@media(min-width:480px) and (max-width:500px) {
#noSlider{
display:grid;
grid-template-columns:repeat(2, 160px);
grid-template-rows:repeat(1000, 230px);
}
#card1{
width:100px;
height:180px;
}
#card1 img{
position:relative;
left:0px;
width:100px;
height:130px;
}
.card1Read{
position:relative;
left:30px;

}
.card1Readm{
position:relative;
left:30px;
}
.readBahar , .readQanoon{
width:80px;
}
  
}