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

body{
background:#13161d;
color:white;
}

.wrapper{
width:95%;
max-width:1500px;
margin:auto;
}

/* HEADER */

header{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 0;
}

.logo{
font-size:26px;
font-weight:700;
color:#ff0055;
}

.search-box input{
width:280px;
padding:12px 18px;
border:none;
outline:none;
border-radius:12px;
background:#1f232d;
color:white;
}

/* SUBJECTS */

.subject-section{
display:flex;
align-items:center;
gap:10px;
margin:20px 0;
}

.subject-container{
display:flex;
gap:12px;
overflow-x:auto;
scroll-behavior:smooth;
flex:1;
padding:5px;
}

.subject-container::-webkit-scrollbar{
display:none;
}

.subject{
padding:12px 25px;
background:#1f232d;
border-radius:50px;
cursor:pointer;
white-space:nowrap;
transition:.3s;
}

.subject:hover{
transform:translateY(-3px);
}

.subject.active{
background:#ff0055;
box-shadow:0 10px 20px rgba(255,0,85,.3);
}

.nav-btn{
width:45px;
height:45px;
border:none;
border-radius:50%;
background:#ff0055;
color:white;
cursor:pointer;
display:none;
}

/* MAIN */

main{
display:grid;
grid-template-columns:300px 1fr;
gap:25px;
}

/* SIDEBAR */

aside{
background:#1f232d;
padding:25px;
border-radius:20px;
}

.sidebar-header{
display:flex;
justify-content:space-between;
margin-bottom:20px;
}

.sidebar-header span{
color:#999;
}

.unit{
padding:15px;
background:#262b36;
margin-bottom:12px;
border-radius:12px;
cursor:pointer;
transition:.3s;
}

.unit:hover{
transform:translateX(6px);
}

.unit.active{
background:#ff0055;
}

/* CONTENT */

.content{
background:#1f232d;
padding:30px;
border-radius:20px;
}

.breadcrumb{
color:#999;
margin-bottom:25px;
}

.content-card{
background:#262b36;
padding:30px;
border-radius:15px;
}

.content-card h1{
margin-bottom:20px;
}

.content-card p{
line-height:1.9;
margin-bottom:15px;
color:#ddd;
}

/* MOBILE */

@media(max-width:992px){

main{
grid-template-columns:1fr;
}

}

@media(max-width:768px){

header{
flex-direction:column;
gap:15px;
}

.search-box input{
width:100%;
}

}

.cv-btn{
	display: inline-block;
    padding:12px 28px;
    background:#ff0055;
    color:white;
    border-radius:40px;
    font-weight:600;
    transition:.3s transform;
	text-decoration:none;
    transform:translateY(0);
}

/* Large Screen */
.content-card h1 {
    color: #4FC3F7;
}

.content-card h2 {
    color: #FFFFFF;
    margin-bottom: 20px;
}

.content-card h3 {
    color: #FFD54F;
    margin: 0 0 15px;
}

.content-card p {
    line-height: 1.5;
}

.content-card ul {
    line-height: 1.5;
    padding-left: 25px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .content-card h1 {
        font-size: 2rem;
    }

    .content-card h2 {
        font-size: 1.6rem;
        margin-bottom: 18px;
    }

    .content-card h3 {
        font-size: 1.2rem;
        margin-bottom: 12px;
    }

    .content-card p,
    .content-card ul {
        font-size: 0.95rem;
        line-height: 1.7;
    }

    .content-card ul {
        padding-left: 20px;
    }
}

@media (max-width: 480px) {
    .content-card h1 {
        font-size: 1.7rem;
    }

    .content-card h2 {
        font-size: 1.35rem;
    }

    .content-card h3 {
        font-size: 1.1rem;
    }

    .content-card p,
    .content-card li {
        font-size: 0.9rem;
        line-height: 1.7;
    }

    .content-card ul {
        padding-left: 18px;
    }
}

.content-card h4 {
    color:#81C784;
}


.cv-btn:hover{
    transform:translateY(-3px);
}