*{
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: 'GeneralSans-Medium';
    src: url('../Assets/fonts/GeneralSans-Medium.otf');
    font-style: normal;
  }

  @font-face {
    font-family: 'GeneralSans-Semibold';
    src: url('../Assets/fonts//GeneralSans-Semibold.otf');
    font-style: normal;
  }

 .main a{
    text-decoration: none;
    color: #fff;

}
.main-wrapper{
   width: 100%;

}
.hero-section{
    /*height: 65vh;*/
    /*background-image: url('../Assets/images/user_hero_img.png');*/
    /*background-size: cover;*/
    /*background-position: center;*/
    
    /*--------------------*/
    /*display:flex;*/
    /*justify-content:center;*/
    /*align-items:center;*/
    /*margin-top: 4rem;*/
    /*padding:40px 60px 0;*/
}
/*.hero-section > .name-section{*/
/*    width:80%;*/
/*}*/
/*.hero-section > .name-section h1{*/
/*    margin-bottom:30px;*/
/*}*/
/*.hero-section > .name-section .hero_desc{*/
/*    font-size:14px;*/
/*    width:85%;*/
/*    padding:30px 15px;*/
/*    border-radius:15px;*/
/*    background-color:#eaeaea;*/
/*}*/
/*.hero-section > img{*/
/*    width:30%;*/
/*}*/
.my-blogs{
    width: 100%;
    margin: 0 auto;
}
 .blog-head{
    position: relative;
} 

.my-blogs .card .card-title,
.main .group h1{
    font-family: 'GeneralSans-Semibold';
}
 .blog-head h3, 
 .categories h3{
    color: #00225F;
    font-family: 'GeneralSans-Medium';
} 

.card-text, 
small, 
.group p{
    font-family: 'GeneralSans-Medium';
}
.view-all{
    font-family: 'GeneralSans-Medium';
   position: absolute;
   top: 0;
   right: 15px;
    padding: 5px 15px;
    border-radius: 22px;
    box-sizing: content-box;
    background-color: #315494;
    color:#ffffff;

}
.categories{
    width: 95%;
    margin: 0 auto;
     padding-bottom: 80px;
}


 /* css for catagories cards section */
        .main {
            position: relative;
            margin-top: 30px;
            /* width: 350px;
            height: 200px; */
            overflow: hidden;
            background-size: cover;
            background-position: center;
            color: white;
            border-radius: 15px;
        }

        #financialliteracy {
            background-image: url('../Assets/images/home_financial_lit_img.JPG');
        }

        #mytalks {
            background-image: url('../Assets/images/home_talks_img.JPG');
        }

        #myvideos {
            background-image: url('../Assets/images/home_video_img.JPG');
        }

        #myarticles {
            background-image: url('../Assets/images/home_article_img.JPG');
        }

        #technology {
            background-image: url('../Assets/images/home_tech_img.JPG');
        }

        #myinterests {
            background-image: url('../Assets/images/home_interest_img.JPG');
        }

        #recommendations {
            background-image: url('../Assets/images/home_recommendations.JPG');
        }

        #learningresources {
            background-image: url('../Assets/images/home_learning_img.JPG');
        }
        #chats {
            background-image: url('../Assets/images/home_snap_img.JPG');
        }

        .group {
            width: 100%;
            bottom: 0;
            left: 0;
            position: absolute;
            background: linear-gradient(0deg,rgba(0,0,0,1) 0%,  rgba(0,0,0,0) 100%);
            transition: padding 1s ease;

        }

        .group h1 {
            font-size: 20px;
            padding: 10px;
        }

        .main p {
            position: absolute;
            bottom: 0;
            left: 0;
            transition: transform .5s ease-out;
            transform: translateX(-100%);
            font-size: 12px;
            padding: 10px;
            height: 50px;

        }

        .main:hover .group {
            padding-bottom: 60px;

        }

        .main:hover p {
            transform: translateX(0);
        }


        /* css for blog carousel */
        .wrapper {
            width: 100%;
        }

        .wrapper .carousel {
            position: relative;
            max-width: 1000px;
            margin: auto;
            padding: 0 60px;

        }

        .owl-prev,
        .owl-next {
            position: absolute;
            top: 45%;
            transform: translate(-50%, -50%);
        }

        .owl-prev {
            left: 40px;
        }

        .owl-next {
            right: 20px;
        }

        .fa-arrow-left,
        .fa-arrow-right {
            color: #315494;
            font-size: 10px;
            padding: 5px;
        }

        .fa-arrow-left:hover,
        .fa-arrow-right:hover {
            color: #315494;
            border: 1px solid #fff;
            background-color: #fff;
            box-shadow: 0px 0px 14px #FF00003B;
            border-radius: 50%;

            transform: scale(1.5);

        }

        /* css for blog carousel cards */


        .card {
            background-color: #ffffff;
            box-shadow: 2px 4px 9px #0000001C;
            border: none;
            border-radius: 26px;
        }

        .card-title {
            color: #00225F;
            font-size: 18px;
            height: 40px;
            overflow: hidden;
        }

        .card-text {
            color: #252525;
            font-size: 14px;
            height: 67px;
            overflow: hidden;

        }

        .card-pic {
            width: 100%;
            height: 100%;
            padding: 1rem;
            border-radius: 30px;
        }

        .card-body>.date-history>small:nth-child(1) {
            color: #252525;
        }

        .card-body>.date-history>small:nth-child(2) {
            color: #C55F60;
        }

        .blogs-carousel {
            width: 1000px;
            margin: auto;
            position: relative;
        }




        
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px){
    .invisibledata{
        display: none;
    }
}

/*media qurey start*/

@media only screen and (min-width: 320px) {
    .hero-section{
        margin-top: 4rem;
    height: 65vh;
    background-image: url('../Assets/images/mob3.png');
    background-size: cover;
    background-position: center;
        
    }
}

@media only screen and (min-width: 768px){
     .hero-section{
         margin-top: 4rem;
    height: 65vh;
    background-image: url('../Assets/images/tab-hero.png');
    background-size: cover;
    background-position: center;
       
   }
}
@media only screen and (min-width: 992px){
   .hero-section{
       margin-top: 4rem;
    height: 65vh;
    background-image: url('../Assets/images/user_hero_img.png');
    background-size: cover;
    background-position: center;
       
   }
}