*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Poppins,sans-serif;
}

body{
   padding:20px;
}

.container{
display:flex;
background:
linear-gradient(
rgba(255,255,255,0.40),
rgba(255,255,255,0.40)
),
url("../images/backgrounds/library.jpeg");

background-size:cover;
background-position:center;
background-repeat:no-repeat;

border-radius:20px;
overflow:hidden;
min-height:90vh;
}
.level-header{
background:linear-gradient(90deg,#0b5ed7,#6ea8fe);
color:white;

padding:12px 25px;
border-radius:12px;

font-size:18px;
font-weight:700;

display:inline-block;
text-align:center;

margin:0 auto 20px auto;

box-shadow:0 4px 12px rgba(11,94,215,0.25);
letter-spacing:1px;
}

.sidebar{
width:250px;
background:rgba(255,255,255,0.92);
backdrop-filter:blur(8px);
padding:25px;
display:flex;
flex-direction:column;
border-right:1px solid rgba(11,94,215,0.15);
}
.logo{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
margin-bottom:40px;
}

.logo img{
width:60px;
height:auto;
}

.logo img:first-child{
width:95px;
}

.logo img:last-child{
width:75px;
}

.sidebar h4{
margin-bottom:20px;
font-size:24px;
font-weight:700;
color:black;
text-align:center;
letter-spacing:1px;
}

.dept-title{
display:block;
padding:12px;
background:#0b5ed7;
color:white;
border-radius:8px;
cursor:pointer;
font-weight:600;
}

.dept-title:hover{
background:#0849a8;
}

.menu{
list-style:none;
}

.menu li{
padding:15px;
margin-bottom:10px;
cursor:pointer;
border-radius:10px;
transition:.3s;
}

.menu li.active{
background:#0b5ed7;;
color:white;
}

.powered{
margin-top:30px;
text-align:center;
font-size:18px;
font-weight:800;
letter-spacing:1px;
}

.powered span:first-child{
color:#09153e;
}

.powered span:last-child{
color:#1847ff;
}

.main-content{
flex:1;
padding:30px;
}

.back-home{
margin-top:10px;
padding-left:10px;
}

.back-home a{
text-decoration:none;
color:#0b5ed7;
font-weight:600;
font-size:14px;
transition:0.3s;
}

.back-home a:hover{
color:#09153e;
}
.level-menu{
display:none;
list-style:none;
margin-top:10px;
padding-left:15px;
}

.level-menu li{
padding:8px;
background:white;
margin-bottom:5px;
border-radius:6px;
}

.level-menu li a{
text-decoration:none;
color:#333;
display:block;
}

.level-menu.show{
display:block;
}

.tabs{
display:flex;
background:#f5f5f5;
border-radius:10px;
overflow:hidden;
margin-bottom:30px;
}

.tab-btn{
flex:1;
padding:15px;
border:none;
background:none;
cursor:pointer;
}

.tab-btn.active{
background:#eaf3ff;;
color:#0b5ed7;;
font-weight:bold;
}

.tab-content{
display:none;
animation:slide .4s ease;
}

.tab-content.active{
display:block;
}

.card-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
gap:25px;
}

.card{
background:white;
border-radius:15px;
padding:15px;
box-shadow:0 0 10px rgba(0,0,0,.08);
}

/*.card img{
width:100%;
height:180px;
object-fit:cover;
border-radius:10px;
}*/

.card img{
width:100%;
height:170px;
object-fit:contain;
background:#f5f5f5;
padding:8px;
border-radius:10px;
}

.card h3{
margin:15px 0;
font-size:18px;
}

.download-btn{
display:block;
text-align:center;
background:#0b5ed7;
color:white;
text-decoration:none;
padding:12px;
border-radius:8px;
}
.mobile-menu-btn{
display:none;
}
.mobile-home-btn{
display:flex;
align-items:center;
justify-content:center;

position:fixed;
top:40px;
right:40px;

font-size:28px; /* bigger than before */
width:50px;
height:50px;

background:white;
color:#0b5ed7;

border-radius:8px;
box-shadow:0 2px 10px rgba(0,0,0,.15);

text-decoration:none;
z-index:2000;
transition:0.3s ease;
}

.mobile-home-btn:hover{
background:#0b5ed7;
color:white;
transform:scale(1.08);
}

/* PDF BUTTON CONTAINER */
.pdf-buttons{
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin-top: 15px;
}

/* BOTH BUTTONS */
.pdf-buttons .download-btn{
    display: block;
    width: 100%;
    padding: 14px 20px;
    text-align: center;
    text-decoration: none;
    background: #0066cc;
    color: #fff;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    transition: 0.3s ease;
}

.pdf-buttons .download-btn:hover{
    background: #004d99;
    transform: translateY(-2px);
}

@keyframes slide{

from{
opacity:0;
transform:translateX(30px);
}

to{
opacity:1;
transform:translateX(0);
}

}

/* PHONE STYLING */

@media (max-width: 768px){

body{
padding:10px;
}
  .pdf-buttons{
        gap: 20px;
        margin-top: 12px;
    }

    .pdf-buttons .download-btn{
        font-size: 15px;
        padding: 15px 15px;
        border-radius: 6px;
    }
.menu{
max-height:none;
overflow:visible;
}
.level-menu li a{
font-weight:600;
font-size:14px;
color:#333;
display:block;
text-decoration:none;
transition:0.3s ease;
}
.level-menu li{
background:white;
border-radius:8px;
transition:0.3s ease;
}

.level-menu li:hover{
background:#eaf3ff;
transform:translateX(5px);
}

.level-menu li:hover a{
color:#0b5ed7;
font-weight:700;
}

.container{
flex-direction:column;
border-radius:15px;
}

/* Sidebar */

.sidebar{
width:100%;
border-right:none;
border-bottom:1px solid rgba(11,94,215,0.15);
padding:20px 15px;
}

/* push logo down a bit so it doesn't clash with menu icon */
.logo{
    margin-top: 40px;
    justify-content: center;
}

.logo img:first-child{
    width: 120px; 
}

.logo img:last-child{
    width: 100px; 
}


.mobile-menu-btn{
    top: 20px;
    left: 20px;
    font-size: 32px;
}
.mobile-menu-btn:hover{
background:#0b5ed7;
color:white;
transform:scale(1.05);
transition:0.3s ease;
}

.mobile-home-btn{
display:flex;
align-items:center;
justify-content:center;

position:fixed;
top:15px;
right:15px;

width:48px;
height:48px;

font-size:24px;
text-decoration:none;

background:white;
color:#0b5ed7;

border-radius:8px;
box-shadow:0 2px 10px rgba(0,0,0,.15);

z-index:2000;
transition:.3s;
}

.mobile-home-btn:hover{
background:#0b5ed7;
color:white;
}

.sidebar h4{
font-size:22px;
margin-bottom:15px;
}

/* Department buttons */

.dept-title{
font-size:15px;
padding:14px;
}

.mobile-menu-btn{
display:block;
position:fixed;
top:15px;
left:15px;
font-size:30px;
font-weight:bold;
cursor:pointer;
z-index:2000;
background:white;
padding:5px 12px;
border-radius:8px;
box-shadow:0 2px 10px rgba(0,0,0,.15);
}

/* Hide sidebar initially */

.sidebar{
position:fixed;
top:0;
left:-280px;
width:260px;
height:100vh;
z-index:1500;
transition:.4s ease;
overflow-y:scroll;
}

/* Show sidebar when clicked */

.sidebar.show-sidebar{
left:0;
}

/* Main content full width */

.main-content{
width:100%;
padding-top:60px;
}

/* Powered By */

.powered{
margin-top:20px;
font-size:16px;
}

/* Main Content */

.main-content{
padding:15px;
}

/* Level Header */

.level-header{
display:block;
width:fit-content;
margin:0 auto 20px auto;
text-align:center;

font-size:18px;
font-weight:800;

padding:10px 20px;

letter-spacing:0.8px;
}

/* Tabs */

.tabs{
margin-bottom:20px;
}

.tab-btn{
flex:1;
padding:15px;
border:none;
background:none;
cursor:pointer;
font-weight:600;
font-size:15px;
}

/* Cards */

.card-grid{
grid-template-columns:1fr;
gap:15px;
}

.card{
padding:12px;
}

.card img{
height:160px;
}

.card h3{
font-size:16px;
text-align:center;
}

.download-btn{
padding:10px;
font-size:14px;
}

/* Prevent overflow */

img{
max-width:100%;
height:auto;
}

}

@media (max-width:480px){

.logo img:first-child{
width:65px;
}

.logo img:last-child{
width:50px;
}

.sidebar h4{
font-size:20px;
}

.level-header{
font-size:14px;
}

.tab-btn{
font-size:13px;
padding:10px 5px;
}

.card img{
height:140px;
}

.download-btn{
font-size:13px;
}

}