@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?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');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

:root{
    --fashionColor: #E19CD0;
    --healthColor: #43EE7C;
    --foodColor: #F09390;
    --economyColor: #ED3E67;
    --techColor: #3BC2F2;
    --scienceColor: #C84AE0;
    --travelColor: #9CF0CF;
    --educationColor: #F1CC59;

    --blogAddsColor: rgba(40, 40, 40, .2);
    --themeColor: rgba(202, 221, 250, .45);

    --themeColor: #e9e9e9;

    --smallRadius:8px;
    --bigRadius:32px;

    --mainFont:"Raleway", sans-serif;
    --bodyFont:"Poppins", sans-serif;

    --heading50:50px;
    --heading36:36px;
    --heading28:28px;
    --heading22:22px;

    --text18:18px;
    --heading32: 32px;

    
    --darkMain: #19161F;
    --darkGray: rgba(255, 255, 255, 0.05);
    --darkText: #282828;
    --white: #fff;

    --garyWhite: #D9D9D9;
    --red: #FE231F;

    --setBlogColumn: calc(100% - 3rem );

}

.container {
    width: calc(100% - 2rem);
    max-width: 1200px;
    margin-inline: auto;
}

body {
    overflow-x: hidden;
}

.subHeading {
    color: var(--darkText);
    font-size: var(--heading28);
    font-family: var(--mainFont);
    margin-top: 20px;
    margin-bottom: 50px;
}

/* blogGrid */

.blogGrid {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.blogColumns {
    width: calc( var(--setBlogColumn) / 3);
    margin-inline: 8px;
    align-self: flex-start;
}

/* cards */

.fashionCard {
    background: var(--fashionColor);
}

.healthCard {
    background: var(--healthColor);
}

.educationCard {
    background: var(--educationColor);
}

.scienceCard {
    background: var(--scienceColor);
}

.foodCard {
    background: var(--foodColor);
}

.travelCard {
    background: var(--travelColor);
}

.techCard {
    background: var(--techColor);
}

.economyCard {
    background: var(--economyColor);
}

.blogAdds {
    background: var(--blogAddsColor);
    padding-top: 150px;
    padding-bottom: 80px;
    text-align: center;
    color: var(--darkText);
}

.blogAdds h5 {
    font-family: var(--mainFont);
    font-size: var(--heading36);
}

.blogAdds p {
    font-family: var(--bodyFont);
    font-size: var(--text18);
    margin-top: 10px;
}

.blogCard img {
    border-top-left-radius: var(--smallRadius);
    border-top-right-radius: var(--smallRadius);
}



.blogCard {
    border-radius: var(--smallRadius);
    margin-bottom: 16px;
}

.blogCardText {
    padding: 40px 30px;
    font-family: var(--mainFont);
    color: var(--darkText);
}

.blogCardText h2 {
    letter-spacing: 1.5%;
    font-size: var(--heading36);
}

.blogCardText p {
    opacity: 50%;
    margin-top: 20px;
    font-size: var(--bodyFont);
}

.blogCardText h4 {
    font-size: var(--heading22);
    font-weight: 500;
    margin-top: 20px;
}

@media screen and (max-width: 1000px) {
    .blogColumns {
        width: calc( (calc(100% - 2rem)) / 2);
    }
}

@media screen and (max-width: 680px) {
    .blogColumns {
        width: 100%;
    }
}


/* home big text animation */

.bigAnimationTextBox {
    overflow: hidden;
}

.bigAnimationText {
    font-family: var(--mainFont);
    font-size: 150px;
    color: var(--darkText);
    /* width: 150vw; */
    text-align: center;
}



.categorySilderBox {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 10px;
    margin-top: 100px; 
}

.categoryCard {
    height: 350px;
    font-family: var(--mainFont);
    position: relative;
    background: var(--garyWhite);
    border-bottom: 0;
}



.categorySilderBox > .categoryCard:nth-child(2) {
    scale: 1.2;
    z-index: 9;
    box-shadow: 5px 10px 15px rgba(40, 40, 40, .2);
    background: var(--healthColor);
}

.categoryText {
    font-size: var(--heading32);
    color: var(--darkText);
    position: absolute;
    bottom: 20%;
    padding-inline: 10%;
    line-height: 1.5;
}

.categoryLine {
    width: 100%;
    height: 6px;
    background: var(--healthColor);
    position: absolute;
    bottom: 0;
}

.categoryLine1 {
    background: var(--economyColor) ;
}

.categoryLine2 {
    background: var(--techColor);
}

.categoryLine3 {
    background: var(--scienceColor);
}

@media screen and (max-width: 1000px) {
    .categorySilderBox {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* learnContentBox */

.learnContentBox {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.learnContentBox > div:nth-child(1)  {
    padding-top: 50px;
    grid-column: span 2;
}

.learnContentBox > div:nth-child(1) h2,
.learnContentBox > div:nth-child(1) h3 {
    font-family: var(--mainFont);
    color: var(--darkText);
}

.learnContentBox > div:nth-child(1) h2 {
    font-size: 120px;
}

.learnContentBox > div:nth-child(1) h3 {
    font-size: 60px;
}

.socialMediaBox {
    display: flex;
    margin-top: 40px;
}

.socialMediaBox > div {
    margin-right: 20px;
}

.learnContentBox > div:nth-child(2)  {
    grid-column: span 3;
    height: 300px;
    display: flex;
    justify-content: space-between;
    padding-left: 20px;
    margin-top: 100px;
}

.infoCard {
    color: var(--darkText);
    position: relative;
    background: #F8DED9;
    padding: 32px;
    padding-bottom: 80px;
    /* width: 33%; */
    border-radius: var(--smallRadius);
    border-top-right-radius: 130px;
    padding-top: 80px;
}

.infoImg {
    position: absolute;
    top: -60px;
}

.infoImg img {
    border-radius: 120px;
}

.infoCard h3 {
    font-family: var(--mainFont);
    font-size: var(--heading28);
}

.infoCard span {
    font-family: var(--bodyFont);
    font-size: 14px;
    font-weight: 100;
    display: block;
}

.infoCard p {
    font-family: var(--bodyFont);
    font-size: var(--text18);
}

.infoCard1 {
    scale: .9;
}

.infoCard2 {
    background: #CDC8E6;
    scale: .9;
}

.infoCard3 {
    scale: .9;
}

footer section {
    opacity: .5;
    margin-top: 80px;
    border-top: .1px solid var(--darkText);
}

footer p {
    font-family: var(--mainFont);
    font-size: 14px;
    color: var(--darkText);
    text-align: center;
    padding-top: 14px;
    padding-bottom: 14px;
}


/* profileViewPage */

.profileViewPage {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    font-family: var(--mainFont);
}


















/* minu - singleBlog */

.singleBlog {
    margin-top: 140px;
}

.singleBlog .blogTopic{
    margin-top: 50px;
    font-family: var(--mainFont);
    font-size: clamp(1.563rem, 1.375vw + 1.219rem, 2.25rem);
    color: #282828;
    font-weight: 900;
}

.singleBlog .blogInfoBox{
    font-family: var(--mainFont);
    font-size: clamp(0.938rem, -0.125vw + 1.031rem, 1rem);
    font-weight: 400;
    color: #282828;
    opacity: 80%;
    margin-top: 10px;
}

.singleBlog .optionBtn{
    margin-top: 22px;
    display: flex;
    justify-content: end;
}

.singleBlog button{
    font-size: clamp(0.875rem, 0.75vw + 0.688rem, 1.25rem);
    font-weight: 500px;
    cursor: pointer;
    font-family: var(--mainFont);
    padding: 10px 25px;
    padding-left: 66px;
    border: 0.4px solid rgb(40, 40, 40, .2);
    border-radius: var(--smallRadius);
    background: transparent;
}

.singleBlog  .pdfBtn{
    font-size: clamp(1rem, 0.25vw + 0.938rem, 1.125rem);
    background: url(../Resources/pdfIcon.svg) no-repeat 22px center;
    background-size: 28px;
    margin-left: 15px;
}

.singleBlog .favBtn{
    font-size: clamp(1rem, 0.25vw + 0.938rem, 1.125rem);
    display: flex;
    align-items: center;
    padding-left: 24px;
    justify-content: space-between;
}

.favBtn span{
    margin-left: 15px;
}

.singleBlog .blogImgBox{
    margin-top: 70px;
    display: flex;
   justify-content: center;
}

.singleBlog > .blogImgBox > img{
    border-radius: 32px;
}

.blogContent{
    margin-top: 80px;
    width: 90%;
    margin-inline: auto;
}

.blogContent p{
    font-family: var(--bodyFont);
    font-size: 1.125rem;
    font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
    color: #282828;
    opacity: .9;
    line-height: 1.8;
    font-weight: 300;
    text-align: justify;
}

.otherContent {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 60px;
}

.singleBlog > .imgSection{
    margin-top: 60px;
    width: fit-content;
    margin-inline: auto;
}

.imgSection img{
    border-radius: 32px;
}

.singleBlog .blogEndRow{
    font-family: var(--mainFont);
    display: flex;
    justify-content: space-between;
    margin-top: 100px;
}

.blogEndRow .shareLink{
    display: flex;
    align-items: center;
    color: var(--darkText);
}

.singleBlog .feedbackSection > h3{
    font-family: var(--mainFont);
    font-size: var(--heading22);
    font-weight: 100;
    color: #282828;
    margin-top: 60px;
    text-align: center;
}


.singleBlog .boxLineDiv{
    width: 350px;
    border-bottom: 0.4px solid rgba(40, 40, 40, 30%);
    margin-inline: auto;
    margin-top: 10px;

}

.singleBlog .feedbackImg{
    margin-top: 25px;
    display: flex;
    flex-wrap: wrap;
    width: fit-content;
    margin-inline: auto;
    margin-bottom: 20px;
}

.singleBlog .feedbackImg div{
    margin-inline: 5px;
    cursor: pointer;
    animation: all ease-in-out 300ms;
}

.singleBlog .feedbackImg div:hover {
    scale: 1.1;
}

@media screen and (max-width: 800px) {
    .blogContent {
        width: 95%;
    }

    .otherContent {
        grid-template-columns: 1fr;
        row-gap: 32px;
    }
}

@media screen and (max-width: 570px) {
    .blogEndRow {
        display: flex;
        flex-direction: column;
    }

    .shareLink {
        margin-top: 20px;
    }
}

@media screen and (max-width: 450px) {
    .feedbackImg img {
        width: 32px;
        height: 32px;
    }
}


/* comment box */

.commentSection {
    margin-top: 100px;
}

.commentHeader {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2.4rem;
    font-family: var(--mainFont);
}

.commentHeader h1 {
    font-size: 1.6rem;
    color: hsl(224, 21%, 14%);
}

.commentBox {
    font-family: var(--bodyFont);
}

.notification {
    padding: 0.001rem .6rem;
    margin-left: 0.4rem;
    border-radius: 0.3rem;
    background-color: hsl(219, 85%, 26%);
    color: hsl(0, 0%, 100%);
}

.commentHeader h2 {
    font-weight: 500;
    font-size: 1.4rem;
    color: hsl(219, 12%, 42%);
}

.msg-box {
    display: flex;
    padding: 1rem 1.5rem;
    background-color: hsl(210, 60%, 98%);
    margin-bottom: 0.6rem;
    position: relative;
}

.msg-box>div + div {
    margin-left: 1.2rem;
}

.msg-box img {
    height: 3rem;
}

.chess-img {
    position: absolute;
    right: 2rem;
    align-items: center;
}

.msg-box div h3 {
    font-size: 1rem;
    font-weight: 500;
    color: hsl(219, 12%, 42%);
    margin-bottom: 0.2rem;
    display: flex;
    align-items: center;
}

.msg-box div h3 span {
    font-weight: 800;
}

.msg-box>div>h3>span + span {
    margin-left: 0.6rem;
}

.msg-box span {
    color: hsl(219, 12%, 42%);
}

.msg-box div h3 span:nth-child(1) {
    color: hsl(224, 21%, 14%);
}

.commentBox p {
    font-size: 1.05rem;
    color: hsl(219, 12%, 42%);
    margin: 0.8rem 1.5rem 2rem 6rem;
    padding: 1.2rem;
    border: 1px solid hsl(205, 33%, 90%);
}

.commentBox span.club {
    color: hsl(219, 85%, 26%);
}

.hiden {
    display: none;
    transition: all 250ms ease-in-out;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background-color: hsl(1, 90%, 64%);
    margin-left: 0.7rem;
}

.name {
    margin-right: 0.6rem;
}

.name:hover,
.commentBox h3>span:hover,
.commentBox >h2:hover,
.commentBox p:hover {
    cursor: pointer;
    color: hsl(219, 85%, 26%) !important;
    transition: color ease-in;
    transition-duration: 100ms;
}

.commentBox p:hover {
    background-color: hsl(205, 33%, 90%);
    transition: background-color ease-in;
    transition-duration: 200ms;
}

.msg-box>div+div>span {
    display: block !important;
}

@media screen and (max-width: 928px) {
    .msg-box>div+div>* , .dot{
        display: inline-block;
    }
}

@media screen and (max-width: 450px) {
    .container {
        padding: 1.8rem 1.3rem;
    }

    .commentBox p {
        margin-left: 2rem;
        margin-right: 1rem;
    }

}

@media screen and (max-width: 500px) {
    .commentBox >h1 {
        font-size: 1.2rem;
    }

    .commentBox >h2 {
        font-size: 1rem;
    }
}

@media screen and (max-width: 600px) {
    .chess-img {
        display: none !important;
    }
}



.profileViewPage > div {
    /* border: 1px solid black; */
}

.profileOptionBox {
    
}

.optBox {
    width: 100%;
    height: fit-content;
    padding: 16px ;
    cursor: pointer;
    transition: all ease-in-out 300ms;
}

.optBox:hover {
    background: var(--themeColor);
}

.optBox h5 {
    font-size: 1rem;
    font-size: clamp(1rem, 0.9375rem + 0.25vw, 1.125rem);
    color: var(--darkText);
}

/* .userImgBox {
    height: 300px;
} */

.userInfoBox {
    background: var(--themeColor);

}

.userName {
    margin-top: 16px;
}

.userName a{
    color: var(--darkText);
    padding-left: 22px;
}

.bio {
    padding: 22px;
}

.bio h5 {
    font-size: 18px;
}

.bio p {
    line-height: 1.5;
    color: var(--darkText);
    opacity: .7;
    margin-top: 12px;
}

.userContent {
    grid-column: span 2;
    padding: 42px 22px;
    color: var(--darkText);
}

.userContent h4 {
    font-size: 1.75rem;
font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
}

.userCatBox {
    display: flex;
    flex-wrap: wrap;
    margin-top: 22px;
}

.userCat {
    padding: 10px 18px;
    background: var(--themeColor);
    border-radius: var(--smallRadius);
    margin-inline: 5px;
    font-size: 16px;
}

.profileSlider {
    width: 100%;
    height: 350px;
    background: var(--garyWhite);
    border-radius: var(--smallRadius);
    margin-top: 22px;
}

@media screen and (max-width: 1100px) {
    .profileOptionBox {
        position: absolute;
        display: none;
    }

    .profileViewPage {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 700px) {
    .profileViewPage {
        grid-template-columns: 1fr;
    }

    .userImgBox {
        width: 150px;
        height: 150px;
        margin-top: 180px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 0;
    }

    .userInfoBox {
        padding-top: 180px;
    }

    .userName {
        text-align: center;
    }

    .userImgBox > img {
        border-radius: 150px;
    }


   
}

/* blogSearchBox */

.blogSearchBox {
    position: relative;
    width: 100%;
    height: fit-content;
    
}

.blogSearch {
    width: 100%;
    height: 32px;
    border: none;
    outline: none;
    padding: 24px 20px 24px 8% ;
    font-family: var(--mainFont);
    font-size: var(--text18);
    border-radius: 8px;
    background:  url(../icon/search.svg) no-repeat 2% center , rgba(40, 40, 40, 0.05);
    background-size: 22px;

}

.blogDisplayChange {
    font-family: var(--mainFont);
    font-size: 16px;
    color: var(--darkText);
    letter-spacing: 1.5;

    display: flex;
    justify-content: end;
    margin-top: 20px;
}

.blogDisplayChange > div {
    display: flex;
    align-items: center;
}

.blogDisplayChange > div > div {
    margin-inline: 15px;
    border-radius: var(--smallRadius);
}

.blogGrid {
    overflow: hidden;
    mask-image: linear-gradient(
        to top,
        transparent,
        #000 15% 100%,
        transparent
    );
}

.blogGrid ,
.blogList {
    padding: 8px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all ease-in-out 300ms;
}

.blogDisplayChange .blogGrid:hover,
.blogList:hover {
    background: #e9e9e9;
}

.blogResult {
    font-size: 14px;
    font-family: var(--mainFont);
    margin-top: 30px;
    letter-spacing: 1.5;
}

.blogResult span {
    font-weight: 600;
}

.searchFilterBox {
    display: flex;
    margin-top: 20px;
}

.searchFilter {
    margin-right: 20px;
    font-family: var(--mainFont);
    display: flex;
    align-items: center;
    width: fit-content;
    padding: 10px 16px;
    border: .4px solid #2828280d;
    background: rgba(40, 40, 40, 20%);
    border-radius: var(--smallRadius);
}

.searchFilter span {
    margin-left: 15px;
    font-size: var(--text18);
    font-weight: 600;
}

.filterCount {
    font-family: var(--mainFont);
    font-weight: 600;
    font-size: 16px;
    padding: 8px;
    background: var(--darkText);
    width: 30px;
    height: 30px;
    color: #fff;
    border-radius: var(--smallRadius);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 12px;
}

.closeFilter {
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    margin-left: 20px;
    cursor: pointer;
    border-radius: 32px;
    transition: all ease-in-out 300ms;
}

.closeFilter:hover {
    background: var(--themeColor);
}

.searchResult {
    margin-top: 80px;
}

.searchResult .blogColumns {
    align-self: flex-start;
}

@media screen and (max-width: 750px) {
    .searchFilterBox {
        flex-wrap: wrap;
    }

    .searchFilter {
        margin-top: 12px;
    }

    .searchFilter span  {
        font-size: 14px;
    }

    .filterCount {
        font-size: 12px;
    }

    .closeFilter {
        width: 26px;
        height: 26px;
    }

    .blogSearch{
        padding-left: 14%;
    }
}


/* my blog section */
/* 
.myBlogFilterBox {
    display: flex;
}

.myBlogGrid {
    margin-top: 32px;
    width: 100%;
    display: flex;
 flex-wrap: wrap; 
} 

.myBlogGrid .blogCard {
    width: 100%;
} 
.myBlogGrid h2 {
    font-size: 22px;
}

.myBlogGrid h4 {
    font-size: 12px;
}

@media screen and (min-width: 1000px) {
    .blogColumns {
        width: 48%;
    }
} 

@media screen and (max-width: 500px) {

    .myBlogGrid {
        flex-wrap: wrap;
    }
    .blogColumns {
        width: 100%;
    }
} 

/* nav bar */



.navMemberBtn {
    padding: 12px 20px;
    background: var(--garyWhite);
    border-radius: var(--smallRadius);
    font-family: var(--mainFont);
    font-size: var(--text18);
    background: #db9e5d;
    color: var(--white);
    font-weight: 400;
    width: fit-content;
  cursor: pointer;

}

.navBar a {
    text-decoration: none;
    color: var(--darkText);
    font-size: var(--text18);
    font-family: var(--mainFont);
    transition: all ease-in-out 300ms;
    font-weight: 500;
}

.navBar a:hover {
    text-decoration: underline;
}

.navLinks {
    margin-inline: 25px;
    font-family: var(--mainFont);
    font-size: var(--text18);
}

.heroContent {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 60px;
    position: relative;
}

.heroText {
    color: var(--darkText);
    display: flex;
    align-items: center;
    padding-left: 15%;
}


.heroText h1 {
    font-family: var(--mainFont);
    font-size: var(--heading50);
}

.heroText p {
    font-family: var(--bodyFont);
    font-size: var(--text18);
    margin-top: 32px;
    font-weight: 300;
}

.heroBtnBox {
    display: flex;
    flex-wrap: wrap;
    margin-top: 22px;
}

.heroImgBox {
    display: flex;
    margin-inline: auto;
    align-items: center;
}

.heroBtn {
    padding: 8px 22px;
    font-size: var(--text18);
    font-family: var(--mainFont);
    color: var(--darkText);
    border-radius: var(--smallRadius);
    border: .4px solid rgba(40, 40, 40, 20%);
    cursor: pointer;
    transition: all ease-in-out 300ms;
    margin-right: 22px;
}

.heroBtn:nth-child(2) {
    padding-left: 6%;
    color: var(--white);
    background: var(--darkMain)  url(../icon/plus.svg) 5% center no-repeat;

}

.heroColumns {
    max-width: 120px;
    margin-inline: 9px;
}

.heroColumns img {
    width: 100%;
}

.lightBlueDot {
    position: absolute;
    width: 88px;
    height: 88px;
    background: #98F5D0;
    border-radius: 88px;
    top: 10%;
    left: 30%;
}

.blueDot {
    position: absolute;
    background: #3BC2F2;
    background-size: cover;
    width: 130px;
    height: 130px;
    border-radius: 130px;
    left: 0;
    bottom: 15%;
    
    /* position: relative; */
}



.pinkDot {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    position: absolute;
    background: #ED3E67;
    bottom: 20%;
    left: 40%;
}

.yellowDot {
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 28px;
    background: #F2D169;
    bottom: 12%;
    left: 55%;
}

@media screen and (max-width: 1000px) {
    .heroContent {
        grid-template-columns: 1fr;
    }

    .heroText {
        padding-top: 120px;
        padding-bottom: 120px;
        padding-left: 5%;
        order: 2;
    }

    .heroText p {
        padding-right: 30%;
    }

    .heroImgBox {
        order: 1;
    }

    .lightBlueDot {
        top: 5%;
        left: 10%;
    }

    .blueDot {
        top: 90%;
        left: auto;
        right: 5%;
    }

.pinkDot {
    top: 60%;
    left: 25%;
}

@media screen and (max-width: 450px) {

    .mobileHiddenColumn {
        display: none;
    }

    .heroText {
        padding-bottom: 20px;
    }

    .pinkDot {
        top: 55%;
        left: 5%;
    }

    .blueDot {
        top: 98%;
        left: 90%;
    }

    .yellowDot {
        left: 95%;
    }

    .heroText {
        padding-top: 80px;
    }

    .heroBtn:nth-child(2) {
        padding-left: 12%;
        margin-top: 12px;
    }

    .heroBtnBox {
        align-items: center;
    }
}

.menuIcon {
    position: absolute;
    z-index: 99;
    top: 50%;
   right: 0;
}

}

.loadMore {
    font-family: var(--mainFont);
    text-align: center;
    color: var(--darkText);
    text-decoration: underline;
}

.footerBox {
    width: 100%;
    border-bottom: .4px solid rgba(202, 221, 250, .85);
    font-family: var(--mainFont);
    opacity: .5;
    text-align: center;
    font-size: 10px;
    padding-top: 15px;
    padding-bottom: 40px;
}


/* listBlog */

.listBlog {
    
}

.listBlog .blogCard {
    width: 100%;
    /* height: 200px; */
    display: flex;
    height: 220px;
    margin-top: 22px;
}

.listBlog .blogCard > div:nth-child(1) {
    margin-bottom: 0;
    padding: 0;
}

/* .blogImgBox {
    position: relative;
    height: 220px;
} */

.listImgBox {
    width: 300px;
    height: 220px;
    overflow: hidden;
}

.listBlog img {
    width: max-content;
    height: 100%;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    width: auto;
    border-radius: var(--smallRadius) 0 0 var(--smallRadius);

}

.blogCard .blogCardText {

}

@media screen and (max-width: 800px) {

    .listImgBox {
        display: none;
    }
    .listImgBox img{
        display: none;

    }
}

@media screen and (max-width: 460px) {
    .listBlog .blogCard {
        height: fit-content;
    }
}