/*  
   VARIABLES
  */

:root {

    /* Brand Colors */

    --primary-color: #0F172A;     /* Deep Blue */
    --secondary-color: #3B82F6;   /* Light Blue */
    --accent-color: #FFFFFF;      /* White */

    /* Typography */

    --text-primary: #0B1F3A;
    --text-secondary: #7DB8FF;

    /* Effects */

    --shadow:
        0 12px 30px rgba(11, 31, 58, 0.08);

    --transition:
        all 0.3s ease;

}

/*  
   RESET
  */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {

    font-family: 'Inter', sans-serif;

    background: var(--accent-color);

    color: var(--text-primary);

}

/* Nav */

.navContainer{
    width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.navContainer img{
    height: 75px;
    padding: 10px;
    
}

.navContainer p{
font-family: 'Inter', sans-serif;
text-decoration: underline;
padding: 10px;
cursor: pointer;
}

/* 
   SECTION
  */

.blog-section {

    padding: 80px 0;

}

.container {

    width: 90%;
    max-width: 1400px;
    margin: auto;

    display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  text-align: left;
  justify-content: flex-start;
  align-items: baseline;

}

/*  
   TITLE
  */

.section-title {

    text-align: center;

    color: var(--primary-color);

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

    margin-bottom: 20px;

}

/*  
   FILTER
  */

.filter-wrapper {

    display: flex;
    justify-content: center;

    margin-bottom: 50px;

}

#blogFilter {

    width: 240px;
    height: 46px;

    padding: 0 15px;

    background: transparent;

    border: 2px solid var(--primary-color);

    border-radius: 8px;

    color: var(--primary-color);

    font-size: 15px;
    font-weight: 500;

    outline: none;
    cursor: pointer;

    transition: var(--transition);

}

#blogFilter:hover {

    box-shadow: var(--shadow);

}

#blogFilter:focus {

    box-shadow: var(--shadow);

}

/*  
   BLOG GRID
  */

.blog-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

}

/*  
   BLOG CARD
  */

.blog-card {

    display: none;

    background: var(--light-color);

    border-radius: 18px;

    overflow: hidden;

    box-shadow: var(--shadow);

    transition: var(--transition);

}

.blog-card:hover {

    transform: translateY(-6px);

}

/*  
   IMAGE
  */

.blog-image {

    height: 240px;

}

.blog-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

}

/*  
   CONTENT
  */

.blog-content {

    padding: 24px;

}

.blog-content h3 {

    color: var(--primary-color);

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

    margin-bottom: 12px;

}

.blog-content p {

    color: var(--text-secondary);

    font-size: 15px;

    line-height: 1.7;

    margin-bottom: 20px;

    display: -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

    overflow: hidden;

}

/*  
   BUTTON
  */

.blog-btn {

    display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-top: 20px;
  border-radius: 8px;
  text-decoration: none;
  background: none;
  color: var(--primary-color);
  font-size: 14px;
  font-weight: 600;
  transition: var(--transition);

}

.blog-btn:hover {

    opacity: 0.9;

}

/*  
   PAGINATION
  */

.pagination {

    display: flex;

    justify-content: center;

    gap: 10px;

    margin-top: 50px;

}

.page-btn {

    width: 42px;
    height: 42px;

    border: none;

    border-radius: 8px;

    background: var(--secondary-color);

    color: var(--primary-color);

    cursor: pointer;

    box-shadow: var(--shadow);

    font-weight: 600;

    transition: var(--transition);

}

.page-btn:hover {

    transform: translateY(-2px);

}

.page-btn.active {

    background: var(--primary-color);

    color: #ffffff;

}

/*  
   TABLET
  */

@media (max-width: 992px) {

    .blog-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}

/*  
   MOBILE
  */

@media (max-width: 768px) {

    .section-title {

        font-size: 32px;

    }

    .blog-grid {

        grid-template-columns: 1fr;

    }

    #blogFilter {

        width: 100%;
        max-width: 280px;

    }

}

/* No results */

.no-results{

    display:none;

    text-align:center;

    margin-top:40px;

    color:var(--primary-color);

    font-size:20px;

    font-weight:600;

}

.article-header{
    padding: 10px;
    
}

.article-header h1{
    background: linear-gradient(
        90deg,
        #0F172A,
        #3B82F6
    );
    font-family: 'Inter', sans-serif;
    font-size: 40px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    
}

.article-description{
    font-family: 'Inter', sans-serif;
    font-size: 20px;

}
.article-content{
    padding: 15px;
}
.article-content p{
    margin-bottom: 20px;
    color: #626262;
}