body{
    font-family: "DM Sans", sans-serif;
}

h1,h2,h3,h4,h5,h6{
    font-family: "Work Sans", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
}

a:hover{
    color: #000;
}

.blog-page>.container{

    max-width:1320px;

    padding: 0 20px;

    margin:auto;

}
.blog-page .container{
    padding: 0 20px !important;
}
/* ==========================================================
   GROWCAP BLOG
========================================================== */

.blog-page{
    padding:0 0 140px;
}

/* ==========================================================
   HERO
========================================================== */

.home-hero__overlay{
    background-image: url(../blue-light.svg);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-size: 16.875rem 7.5625rem;
    background-repeat: repeat;
    background-position: center;
    mix-blend-mode: color;
    opacity: .15;
}
.blog-hero{
    background: linear-gradient(180deg, #1b0033 19.073%, #e80e47 80.031%, #fc672c 103.23%, #fd1c97 123.12%, #f208f5 200.71%, #5248ff 245.31%, #24d2b7 285.73%);
    padding: 140px 0 100px;
}

.blog-hero__content{
    max-width:860px;
    margin:0 auto;
    text-align:center;
}

.blog-hero__eyebrow{
    font-family: "DM Mono", monospace;
    color: #fff;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    border-radius: 4px;
    display: inline-flex;
    align-items:center;
    justify-content:center;
    margin-bottom: 15px;
}

.blog-hero__title{

    margin:0;

    font-size:clamp(48px,6vw,76px);

    line-height:1.05;

    letter-spacing:-.04em;

    color: #fff;
    text-transform: uppercase;

}

.blog-hero__subtitle{

    margin:30px auto 0;

    max-width:760px;

    font-size:22px;

    line-height:1.8;

    color:rgba(255, 255, 255, .8);

}

/* ==========================================================
   FEATURED
========================================================== */

.blog-featured{

    padding: 100px 0 0;
    margin-bottom:120px;

}

.blog-featured__wrapper{

    display:grid;

    grid-template-columns:1.45fr 1fr;

    gap:70px;

    align-items:center;

    text-decoration:none;

    color:inherit;

}

.blog-featured__image{

    overflow:hidden;

    border-radius:28px;

}

.blog-featured__image img{

    display:block;

    width:100%;

    transition:transform .45s ease;

}

.blog-featured:hover img{

    transform:scale(1.05);

}

.blog-featured__content{

    display:flex;

    flex-direction:column;

}

.blog-featured__category{

    display:inline-flex;

    align-self:flex-start;

    font-family: "DM Mono", monospace;
    color: #000;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    border-radius: 4px;
    display: inline-block;
    background: linear-gradient(0deg, rgba(0, 0, 0, .05) 0, rgba(0, 0, 0, .05) 100%), #f5f4ff;
    padding: .25rem .5rem;
    margin: 0 0 15px;

}

.blog-featured__title{

    margin:0 0 22px;


    font-size:46px;

    line-height:1.1;

    letter-spacing:-.03em;
    text-transform: uppercase;

}

.blog-featured__excerpt{

    margin:0;

    color:#667085;

    font-size:20px;

    line-height:1.8;

}

.blog-featured__button{

    display:inline-flex;

    margin-top:34px;

    font-weight:700;

    color:#111;

}

.blog-featured__footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:40px;

}

.blog-featured__date{

    color:#98A2B3;

    font-size:15px;

}

.blog-featured__button{

    font-weight:700;

    transition:.3s;

}

.blog-featured:hover .blog-featured__button{

    transform:translateX(6px);

}

/* ==========================================================
   SECTION
========================================================== */

.blog-section-title{

    margin-bottom:42px;

}

.blog-section-title h2{

    margin:0;

    font-size:40px;

    line-height:1.2;

}

/* ==========================================================
   CATEGORIES
========================================================== */

.blog-categories{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    margin-bottom:60px;

}

.blog-categories a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    color:#111;

    background:transparent;

    border: 1px solid #000;

    border-radius:4px;

    padding:12px 22px;

    transition:.3s;

    font-weight:600;

}

.blog-categories a:hover{

    background:#111;

    color:#FFF;

}

/* ==========================================================
   POSTS
========================================================== */

.blog-posts{

    width:100%;

}

.blog-posts__container{

    width:100%;

}

.blog-posts-grid{

    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:42px;

    align-items:start;

}

.blog-posts .container{
    max-width: 1280px;
    margin: 0 auto;
    padding: 100px 20px;
}

/* ==========================================================
   BLOG CARD
========================================================== */

.blog-card{
    display:flex;
    flex-direction:column;
    height:100%;
}

.blog-card__link{
    display:flex;
    flex-direction:column;
    height:100%;
    color:inherit;
    text-decoration:none;
}

.blog-card__image{
    overflow:hidden;
    border-radius:24px;
    aspect-ratio:16/10;
    background:#F5F5F5;
    margin-bottom:28px;
}

.blog-card__image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .45s ease;
}

.blog-card:hover .blog-card__image img{
    transform:scale(1.05);
}

.blog-card__content{
    display:flex;
    flex-direction:column;
    flex:1;
}

.blog-card__category,
.blog-featured__category{
font-family: "DM Mono", monospace;
    color: #000;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    border-radius: 4px;
    display: inline-flex;
    background: linear-gradient(0deg, rgba(0, 0, 0, .05) 0, rgba(0, 0, 0, .05) 100%), #f5f4ff;
    padding: .25rem .5rem;
    max-width: max-content;
}
.blog-card__category{
    margin-bottom: 15px;
}

.blog-card__title{
    margin:0 0 16px;
    font-size:30px;
    line-height:1.2;
    letter-spacing:-.02em;
    text-transform: uppercase;
}

.blog-card__excerpt{
    margin:0;
    color:#667085;
    line-height:1.8;
    font-size:17px;
}

.blog-card__footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:auto;
    padding-top:28px;
}

.blog-card__date{
    color:#98A2B3;
    font-size:14px;
}

.blog-card__readmore{
    font-weight:700;
    transition:.3s;
}

.blog-card:hover .blog-card__readmore{
    transform:translateX(6px);
}

.blog-posts__grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    gap: 25px;
}

/* ==========================================================
   PAGINATION
========================================================== */

.blog-pagination{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    margin-top:90px;
}

.blog-pagination .page-numbers{
    width:48px;
    height:48px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:6px;
    text-decoration:none;
    color:#111;
    background:transparent;
    border: 1px solid #000;
    transition:.25s;
}

.blog-pagination .page-numbers:hover{
    background:#111;
    color:#FFF;
}

.blog-pagination .current{
    background:#111;
    color:#FFF;
    border: 0;
}

/* ==========================================================
   RESPONSIVO
========================================================== */

@media(max-width:991px){

    .blog-posts-grid{

        grid-template-columns:repeat(2,minmax(0,1fr));

        gap:32px;

    }

    .blog-featured__wrapper{

        grid-template-columns:1fr;

        gap:40px;

    }

    .blog-featured__title{

        font-size:38px;

    }

    .blog-posts__grid{
    grid-template-columns: repeat(2, 1fr);
}

}

@media(max-width:767px){

    .blog-page{

        padding:70px 0;

    }

    .blog-posts-grid{

        grid-template-columns:1fr;

    }

    .blog-featured{

        margin-bottom:80px;

    }

    .blog-hero{

        margin-bottom:70px;

    }

    .blog-hero__title{

        font-size:42px;

    }

    .blog-hero__subtitle{

        font-size:18px;

    }

    .blog-section-title h2{

        font-size:32px;

    }

    .blog-card__title{

        font-size:26px;

    }

        .blog-posts__grid{
    grid-template-columns: repeat(1, 1fr);
}
.blog-posts .container{
    padding: 00px 20px;
}
}

/* ==========================================================
   SINGLE
========================================================== */

.blog-single{

    padding:0 0 140px;

}
.single-hero{
    position: relative;
    padding:120px 0 220px;
}
.single-hero .container{
    position: relative;
}
.blog-single__hero{
    background: linear-gradient(180deg, #1b0033 19.073%, #e80e47 80.031%, #fc672c 103.23%, #fd1c97 123.12%, #f208f5 200.71%, #5248ff 245.31%, #24d2b7 285.73%);
    padding: 140px 20px 250px;

}
.blog-single__hero__inner{
     max-width:920px;
     margin: 0 auto;
     position: relative;
     z-index: 5;
}

.blog-single__category{

    display:inline-flex;

   font-family: "DM Mono";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 10px;
    text-transform: uppercase;

}

.blog-single__title{

    font-size:clamp(42px,5vw,70px);

    line-height:1;

    letter-spacing:-.03em;

    margin:0 0 30px;

    color: #fff;
    text-transform: uppercase;

}

.blog-single__meta{

    display:flex;

    gap:24px;

    color:#fff;

    font-size:15px;

}
.blog-single__img-wrap{
    max-width: 920px;
    margin: 0 auto;
   
}
.blog-single__image{

    border-radius:28px;

    overflow:hidden;

    max-width: 920px;
    position: relative;
    z-index: 4;
     margin: -180px 20px 50px ;

}

.single-featured-image img{
    width:100%;
    border-radius:24px;
    display:block;
}

.blog-single__content{

    max-width:920px;

    padding: 0 20px;

    margin:0 auto;

}

.blog-single__content p{

    font-size:20px;

    line-height:1.9;

    color:#545964;

    margin-bottom:32px;

}

.blog-single__content h2{

    margin:60px 0 20px;

    font-size:38px;

}

.blog-single__content h3{

    margin:40px 0 20px;

}

.blog-single__content ul{

    padding-left:22px;

    margin-bottom:32px;

}

.blog-single__content li{

    margin-bottom:12px;

}

/* ==========================================================
   SINGLE CONTENT
========================================================== */

.blog-single__content img{

    max-width:100%;

    height:auto;

    border-radius:20px;

    margin:40px 0;

}

.blog-single__content figure{

    margin:50px 0;

}

.blog-single__content a{

    color:#2A65FF;

    text-decoration:none;

}

.blog-single__content a:hover{

    text-decoration:underline;

}

.blog-single__content blockquote{

    margin:60px 0;

    padding:30px;

    border-left:5px solid #2A65FF;

    background:#F8FAFF;

    font-size:26px;

    line-height:1.5;

    font-weight:600;

}

.blog-single__content table{

    width:100%;

    margin:40px 0;

    border-collapse:collapse;

}

.blog-single__content table td,
.blog-single__content table th{

    padding:16px;

    border:1px solid #E8E8E8;

}

.blog-single__content iframe{

    width:100%;

    aspect-ratio:16/9;

    border:0;

    border-radius:20px;

    margin:50px 0;

}

/* ==========================================================
   CTA
========================================================== */

.blog-cta-wrap{
    max-width: 1280px;
    padding: 0 20px;
    margin: 0 auto;
}
/* ==========================================================
   BLOG CTA
========================================================== */
.blog-cta-overlay{
        background-image: url(../blue-light.svg);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-size: 16.875rem 7.5625rem;
    background-repeat: repeat;
    background-position: center;
    opacity: .1;
}
.blog-cta{

    margin:140px auto;

    padding:90px;

    border-radius:36px;

            background: linear-gradient(180deg, #f208f5 26.415%, #5248ff 40.163%, #24d2b7 111.39%);
    

    text-align:center;

    color:#FFF;

}

.blog-cta__content{

    max-width:760px;

    margin:auto;

    position: relative;
    z-index: 5;

}

.blog-cta__title{

    margin-bottom:24px;

    font-size:58px;

    line-height:1.08;

}

.blog-cta__text{

    margin-bottom:40px;

    font-size:20px;

    line-height:1.8;

    opacity:.9;

}

.blog-cta__button{

background-color: #fff;
    color: #121214;
    font-weight: 500;
    padding: .75rem 1.125rem;
    font-size: .875rem;
    text-transform: none;
    letter-spacing: 0;
    position: relative;
    border-radius: 8px;
    font-family: "DM Mono", "DM Mono", monospace;
    border-top: 1px solid #121214;
    border-left: 1px solid #121214;
    border-right: 3px solid #121214;
    border-bottom: 3px solid #121214;
    transition: .2s;
    margin-bottom: 0;
    position: relative;
    z-index: 10;
    transition: all .1s ease-in-out .1s;
}
.blog-cta__button:hover{
        border-color: #121214;
    transform: translate(.125rem, .125rem);
    color: #000;
    background-color: #fff;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    margin-bottom: .125rem;
}
.blog-cta__button::after{
        content: "";
    display: inline-block;
    width: .625rem;
    height: .625rem;
    margin-left: .625rem;
    background-image: url('../arrow-btn.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* ==========================================================
   RELATED
========================================================== */

.blog-related{

    margin-top:120px;

}


.blog-related .container{
    max-width: 1280px;
    padding: 0 20px;
    margin: 0 auto;
}

/* ==========================================================
BLOG PAGINATION
========================================================== */

.blog-pagination{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    margin-top:90px;

    flex-wrap:wrap;

}

.blog-pagination a,
.blog-pagination span{

    min-width:48px;

    height:48px;

    padding:0 16px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:999px;

    text-decoration:none;

    background:#F5F7FA;

    color:#111;

    font-weight:600;

    transition:.25s;

}

.blog-pagination a:hover{

    background:#163EA8;

    color:#FFF;

}

.blog-pagination .current{

    background:#163EA8;

    color:#FFF;

}

.blog-pagination .prev,
.blog-pagination .next{

    padding:0 24px;

}

.blog-hero__subtitle{

    max-width:760px;

    margin:24px auto 0;

}

/* ==========================================================
BLOG EMPTY
========================================================== */

.blog-empty{

    text-align:center;

    padding:120px 0;

}

.blog-empty h2{

    margin-bottom:18px;

}

.blog-empty p{

    opacity:.75;

}


@media (max-width: 490px){
.blog-single__hero{
    padding: 140px 20px 140px;
}
.blog-single__image {
    margin: -100px 20px 50px;
}
.blog-cta__title{
    font-size: 32px;
}
}