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

:root {
    --left-textcolor: #FCFCFC;
    --left-textcolorx: #a1a1a1;
    --faded-bgxx: #363636;
    --card-bg: #252525;
  
  }

  .dark-theme {
    --left-textcolor: #2E2F2E;
    --left-textcolorx:rgb(107, 107, 107)E;
    --faded-bgxx: #e2e2e2;
    --card-bg: #EDEDED;
   
   
  }
.blog{
    background-color: var(--faded-bgxx);
    width:100%;
    height:auto;
    padding-left:5%;
    padding-right:5%;
    padding-top:4rem;
    padding-bottom: 4rem;
    /* border-bottom: 0.4px solid #797979;
    border-top: 0.4px solid #797979; */
}
.blogcard{
    background-color: var(--card-bg);
    padding:1rem;
    border-radius:0.2rem;
    margin-bottom:2rem;
    max-height: 85%;
}

.card-image{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    height: 150px; 
    text-align: center;
    background-size: cover;
    width: 70%;
}

.botton-items{
    display: flex;
    justify-content: space-between;
    padding: 1rem 0;
}


.blogtext{
    font-size:0.8rem;
    color: var(--left-textcolor);
    line-height:157%;
}
.bloghead{
    padding-top: 0.5rem;
    color: var(--left-textcolor);
}
.blogdate{
    font-size:0.9rem;
    color: var(--left-textcolor);

}
.blogheading{
    color: #E4E4E4;
    font-size:2.0rem;
    font-weight:bold;
}
.blogsubtext{
    font-size:0.8rem;
    color: #F36F2E;
    line-height:157%;
}

.blogherosection{
    background-image: url(./images//blogbg.jpg);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
   
    padding-left:5%;
    padding-right:5%;
    padding-top:6rem;
    padding-bottom:8rem;
    width:100%;
    height:auto;

}

@media (min-width: 768px) {
    .blog{
        background-color: var(--faded-bgxx);
        width:100%;
        height:auto;
        padding-left:4%;
        padding-right:4%;
        padding-top:4rem;
        padding-bottom: 4rem;
        /* border-bottom: 0.4px solid #797979;
        border-top: 0.4px solid #797979; */
    }
}
@media (min-width: 992px) {
    .blog{
        background-color: var(--faded-bgxx);
        width:100%;
        height:auto;
        padding-left:6%;
        padding-right:6%;
        padding-top:4rem;
        padding-bottom: 4rem;
        /* border-bottom: 0.4px solid #797979;
        border-top: 0.4px solid #797979; */
    }

    .blogcard{
        background-color: var(--card-bg);
        padding:1rem;
        border-radius:0.2rem;
        margin-bottom:2rem;
        max-height: 85%;
    }
}

@media screen and (min-width: 1316px) {

    .blogcard{
        background-color: var(--card-bg);
        padding:1rem;
        border-radius:0.2rem;
        margin-bottom:2rem;
        max-height: 85%;
    }    
}