/* EMBEDED FONTS */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


/* RESET CODE */

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

    html, body{
        scroll-behavior: smooth;
        background-color: var(--BG-COLOR);
        font-family: "poppins", sans-serif;
        font-size: var(--FS);
        overflow-x: clip;      

    }

header li, a {
        color: rgb(72, 74, 47);
        text-decoration: none;
        list-style-type: none;
        font-size: 1.2rem;
        font-family:var(--FF) ;
    }

    header a:active{
        color: var(--LINK-ACTIVE);
    }

    header a:focus{
        color: var(--LINK-FOCUS);
    }

    header a:hover{
        color: rgb(178, 186, 55); 
    }


    header nav{
        position: relative;
        background-color: #dee3e5;
    }

    header nav ul{
       
        display: flex;
        justify-content: left;
        align-items: center;
        text-align: center;
    }

    header nav li{
        
       
        margin: 10px;
    }

    section{
        text-align: center;
    }


    /* section{
        background-color: #fafafa;
        padding: 24px ;
    }

    section h2{
        color:  rgb(72, 72, 74);
    } */

    h1{
        text-align: center;
        margin: 23px;
        font-size: 3.3rem;
    }


.all-blogs-container{
    background-color: #f2f3f6;
    padding: 12px;
  
    
}

.blog-card{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.blog-post {
    
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 10px auto; 
  border:1px solid rgb(215, 214, 214);
  max-width: 40%;
  width: 100%;
  background-color: #fff;
  border-radius: 12px;
  /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */
  overflow: hidden;
  transition: transform 0.3s;
}

.blog-card .blog-post h3{
    font-size: 2.8rem;
    /* padding: 12px; */
}

.blog-post:hover {
  transform: translateY(-0.01px);

}

.blog-card img {
   
  width: 50%;
  height: auto;
  object-fit: cover;
}

.blog-card .content {
  padding: 1rem;
}

.blog-card h3 {
   
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
  color: #333;
}

.blog-card p {
  font-size: 1rem;
  color: #666;
  margin: 12px;
}

.blog-card .date {
  font-size: 0.8rem;
  color: #aaa;
  margin-top: 1rem;
  text-align: right;
}


button{
    padding: 12px 23px;
       background-color: #4c4b4b;
    padding: 12px;
    font-size: 1..2rem;
    color: rgb(219, 203, 203);
    border: 0;
    border-radius: 3px;
    outline: 0;
    top: 12%;
    left: 18%;
    margin: 12px;
}

 button:hover{
   
    background-color: #7c7c7c;
    transform: translateX(1px);
    cursor: pointer;

}