.btnPrimary.light {
color: #000;
background: #FFF;
}
.heroBlog {
position: relative;
overflow: hidden;
}
.overlayHero{
position: absolute;
background-color: #081112;
opacity: 0.2;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.contHeroBlog {
text-align: center;
display: flex;
justify-content: space-between;
flex-direction: column;
gap: 0;
align-items: center;
margin: 0px;
z-index: 1;
position: relative;
padding: 170px 0px 170px;
}
.heroBlog .titleHero{
color: #FFF;
leading-trim: both;
text-edge: cap;
font-size: 64px;
font-style: normal;
font-weight: 600;
line-height: 110.523%; letter-spacing: -2px;
margin-bottom: 0px;
margin-bottom: 32px;
text-align: left;
}
.heroBlog .titleHero span{
color: #00CCB2
}
.heroBlog .titleHero span{
color:var(--primary-600);
}
.textHeroBlog p{
color: #FFF;
font-size: 22px;
font-style: normal;
font-weight: 500;
line-height: normal;
margin: 0px;
text-align: left;
}
.featuredArticle{
display: inline-flex;
align-items: flex-start;
gap: 48px;
margin: 78px 0px 124px;
}
.featuredArticle img{
height: 350px;
width: 100%;
border-radius: 16px;
}
.rightFA{
display: flex;
height: 350px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 24px;
}
.metaTopFA{
display: flex;
align-items: center;
gap: 16px;
align-self: stretch;
}
.catFA{
border-radius: 999px;
border: 1.121px solid var(--Primary-400, #2AD4BE);
color: #FFF;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
padding: 9px 18px;
text-decoration: none;
}
.dateFA{
color: #FFF;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: normal;
margin: 0px;
opacity: 0.5;
}
.titleFA{
color: #FFF;
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: -0.64px;
text-align: left;
margin: 0px;
}
.textFA p{
color: #FFF;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: normal;
margin: 0px;
text-align: left;
}
p.titleArticle a, .titleFA a {
color: #fff;
text-decoration: none;
}
.bannerBlog{
display: flex;
width: 1203px;
padding: 95px 48px;
flex-direction: column;
align-items: flex-start;
gap: 32px;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.15);
background: linear-gradient(74deg, rgba(255, 255, 255, 0.05) 1.87%, rgba(255, 255, 255, 0.01) 100.7%);
backdrop-filter: blur(125px);
width: 85%;
position: relative;
}
.titleBannerBlog{
font-size: 56px;
font-style: normal;
font-weight: 600;
line-height: 110.523%; letter-spacing: -2px;
background: linear-gradient(180deg, #FFF 0%, #626262 325%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin: 0px;
text-align: left;
}
.titleBannerBlog span{
color: #00CCB2;
}
.buttonSpotify{
display: flex;
padding: 16px 32px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 999px;
border: 1px solid #FFF;
color: #FFF;
text-align: center;
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: -0.72px;
text-decoration: none;
}
.imgSpotify {
position: absolute;
right: -90px;
top: -30px;
}
.shapeBlog {
position: absolute;
top: 330px;
}
.listCat ul{
padding: 0px;
list-style: none;
display: flex;
align-items: flex-start;
gap: 12px;
align-self: stretch;
}
.listCat li a{
display: flex;
padding: 8.972px 17.944px;
justify-content: center;
align-items: center;
gap: 11.215px;
transition: 0.2s all ease-in-out;
border-radius: 999px;
border: 1px solid #F0FCFA;   
color: #FFF;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;
text-decoration: none;
}
.listCat li.current-menu-item a, .listCat li a:hover{
background: #F0FCFA;
color: #001310;
}
.imgArticle{
border-radius: 20px;
height: 230px;
background-image: cover;
background-position: center;
background-repeat: no-repeat;
}
.metaArticle{
display: flex;
width: 348px;
padding: 24px 0px;
flex-direction: column;
align-items: flex-start;
gap: 24px;
}
ul.listArticle {
display: inline-block;
width: 100%;
padding: 0px;
margin: 36px 0px 60px;
list-style: none;
}
.titleArticle{
color: #FFF;
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: -0.48px;
margin: 0px;
}
.showMore {
margin: 0px auto 124px;
display: flex;
padding: 16px 32px;
align-items: center;
gap: 10px;
border-radius: 999px;
border: 1px solid #FFF;
color: #FFF;
text-align: center;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: -0.54px;
justify-content: center;
width: max-content;
text-decoration: none;
transition: 0.2s all ease-in-out;
}
.showMore:hover{
background: #F0FCFA;
color: #001310;
}
.listArticle li{
margin-bottom: 60px;
}
.contListArt{
position: relative;
}
.circlePurpleBlog {
width: 560px;
height: 560px;
flex-shrink: 0;
border-radius: 560px;
opacity: 0.25;
background: #726ACC;
filter: blur(150px);
position: absolute;
right: -180px;
top: -250px;
}
.circleGreenBlog {
width: 560px;
height: 399px;
transform: rotate(-49.878deg);
flex-shrink: 0;
border-radius: 560px;
opacity: 0.25;
background: var(--Primary-400, #2AD4BE);
filter: blur(150px);
position: absolute;
right: -250px;
top: 250px;
}
.contPageblog{
overflow: hidden;
}   @media only screen and (min-width : 1025px) and (max-width : 1198px) {
} @media (min-width: 768px) and (max-width: 1024px) {
} @media (min-width: 768px) and (max-width: 1024px) and (orientation:landscape) {
} @media (min-width: 768px) and (max-width: 1024px) and (orientation:portrait){
} @media only screen and (min-width: 320px) and (max-width: 767px) {
.heroBlog .titleHero {
font-size: 36px;
}
.heroBlog .titleHero span {
display: block;
}
.textHeroBlog p {
font-size: 16px;
}
img.shapeBlog {
display: none;
}
.featuredArticle img {
height: auto;
width: 100%;
border-radius: 16px;
}
.featuredArticle {
display: inline-flex;
align-items: flex-start;
gap: 48px;
margin: 78px 0px 124px;
flex-direction: column;
}
.rightFA {
display: flex;
height: auto;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 24px;
}
p.titleFA {
font-size: 24px;
}
.textFA p {
font-size: 16px;
}
.imgSpotify {
position: absolute;
right: -50px;
top: inherit;
width: 110%;
bottom: 24px;
}
.bannerBlog {
padding: 48px 24px 310px 24px;
}
p.titleBannerBlog {
font-size: 36px;
}
a.buttonSpotify {
font-size: 18px;
width: 100%;
}
.listCat ul {
padding: 0px;
list-style: none;
display: flex;
align-items: flex-start;
gap: 12px;
align-self: stretch;
flex-wrap: wrap;
}
p.titleArticle a {
font-size: 18px;
letter-spacing: 0;
}
}