/* home page */
/* Header */
.header {
    background-color: var(--white-color);
    padding: 15px 0;
    border-bottom: 1px solid #E5E7EB;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.logo {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color);
}
.logo a{
    color: var(--primary-color);
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-list {
    list-style: none;
    display: flex;
    gap: 20px;
}

.nav-list li a {
    text-decoration: none;
    color: var(--dark-color);
    font-weight: 500;
}
.nav-list li a:hover{
    color: var(--primary-color);
}
.nav-list .active{
    color: var(--primary-color);
}
/* Hero */
.hero {
    background: url(../assets/images/hero1.jpeg) no-repeat center center / cover;
    /* background-color: rgb(73, 73, 119); */
    background-color: var(--primary-color);
    background-blend-mode: soft-light;
    text-align: center;
    padding: 80px 0;
}

.hero h1 {
    margin-bottom: 15px;
}

.hero p {
    margin-bottom: 25px;
    font-weight: 500;
}

/* Featured Tutorials */
.featured {
    padding: 60px 0;
}

.featured h2 {
    text-align: center;
    margin-bottom: 40px;
}

.cards {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.card {
    background-color: var(--white-color);
    padding: 20px;
    border-radius: 8px;
    max-width: 280px;
    width: 100%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.card h3 {
    margin-bottom: 10px;
}

/* Footer */
.footer {
    background-color: var(--secondary-color);
    text-align: center;
    padding: 20px 0;
}


/* ==========About-page */
.about,
.contact{
    max-width: 70%;
    margin-inline: auto;
}

/* ========== contact-page */
.contact-links a{
    text-decoration: underline;

}

/* ==========tutorials-page */
.tutorials h1{
    margin-block: 2rem;
}