*{
    margin:0;
    padding: 0;
    box-sizing: border-box;    
    text-decoration: none;
    list-style-type: none;
    font-family: "Poppins", sans-serif;
}

:root{
    --white: #fff;
    --primarygreen: #18D17A;
    --primaryblue: #131C2E;
    --gray: #ccc;
}


#progress-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    z-index: 9999;
}

#progress-bar {
    width: 0%;
    height: 2px;
    background: var(--primarygreen);
    transition: width 0.1s linear;
}

.fade-in {
    opacity: 0;
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.fade-bottom {
    transform: translateY(40px);
}

.fade-left {
    transform: translateX(-50px);
}

.fade-right {
    transform: translateX(50px);
}

.visible {
    opacity: 1;
    transform: translate(0);
}

.container{
    width: 100%;
    max-width: 1224px;
    margin: 0 auto;
    padding: 0 20px;
}

.button_primary{
    background: var(--primarygreen);
    border-radius: 100px;
    color: var(--white);
    width: 100%;
    max-width: fit-content;
    padding: 8px 24px;
    min-width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
    cursor: pointer;
}

.button_primary.white{
    background: var(--white);
    color: var(--primaryblue);
}

.bubble{
    position: absolute;
    width: 171px;
    border-radius: 50%;
    height: 171px;
    background: linear-gradient(0deg, #18D17A, #18D17A), linear-gradient(0deg, #18D17A, #18D17A), #18D17A;
    filter: blur(85.55px);
}

@media (max-width:768px){
    .button_primary{
        min-width: fit-content;
    }
}


header{
    position: fixed;
    width: 100%;
    padding: 20px 0;
    top: 0;
    left: 0;
    background: var(--primaryblue);
    z-index: 99;
    box-shadow: 0px 1px 4px rgba(19, 28, 46, 0.15);
}

header .content{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header nav ul{
    display: flex;
    align-items: center;
    gap: 32px;
}

header nav ul li a{
    color: var(--white);
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 18px;
}


@media (max-width:980px){
    header nav {
        display: none;
    }
}

section.hero{
    position: relative;
    background: var(--primaryblue);
    padding: 204px 0 140px;
    border-radius: 0 0 0 180px;
    overflow: hidden;
}

section.hero .bubble.left{
    left: 4.9px;
    top: 291px;
}

section.hero .bubble.right{
    right: -100px;
    top: 291px;
}

section.hero .content{
    width: 100%;
    max-width: 808px;
}

section.hero h1{
    font-style: normal;
    font-weight: 700;
    font-size: 48px;
    line-height: 72px;
    text-align: center;
    color: var(--white);
    margin: 0 0 24px;
}

section.hero h1 strong{
    color: var(--primarygreen);
}

section.hero p{
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 27px;
    text-align: center;
    color: #F3F3F3;
    width: 100%;
    max-width: 580px;
    margin: 0 auto 54px;
}

section.hero p strong{
    color: var(--primarygreen);
}

section.hero .buttons{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
}

@media (max-width:768px){
    section.hero .buttons{
        flex-direction: column;
    }
    section.hero{
        border-radius: 0;
    }
}

@media(max-width:580px){
    section.hero{
        padding: 120px 0 60px;
    }
    section.hero h1{
        font-size: 36px;
        line-height: 46px;
    }
}

section.about{
    padding: 64px 0;
}

section.about .content{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

section.about .text{
    width: 100%;
    max-width: 520px;
}

section.about .infos{
    width: 100%;
    max-width: 597px;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: space-between;
}

section.about .infos .w50{
    width: 100%;
    max-width: 283px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: var(--primaryblue);
    border-radius: 12px;
    box-shadow: 0px 1px 4px rgba(19, 28, 46, 0.15);
}

section.about .infos .w50:nth-child(2){
    background: var(--primarygreen);
}

section.about .infos .w100{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 5px 5px 5px 16px;
    border-radius: 12px;
    background: var(--white);
    box-shadow: 0px 1px 4px rgba(19, 28, 46, 0.15);
    border-radius: 12px;
}

section.about .infos .w100 .text{
    padding: 0 12px 0 0;
    max-width: 100%;
}

section.about .infos .w100 h4{
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    color: var(--primaryblue);
}
section.about .infos .w100 p{
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: var(--gray, #515151);
    margin: 12px 0 0;
}

section.about .text h2{
    font-style: normal;
    font-weight: 600;
    font-size: 36px;
    line-height: 54px;
    color: var(--primaryblue);
}

section.about .text p{
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    color: var(--gray, #515151);
    margin: 16px 0 32px;
}

@media (max-width:980px){
    section.about .content{
        flex-direction: column;
        gap: 48px;
    }
    section.about .text{
        max-width: 680px;
    }

    section.about .text svg{
        display: none;
    }

    section.about .infos{
        max-width: 100%;
    }

    section.about .infos .w50{
        max-width: 48%;
    }
}
@media (max-width:768px){
    section.about .infos .w50{
        max-width: 100%;
    }
}


@media (max-width:580px){
    section.about .infos .w100{
        flex-direction: column;
        gap: 24px;
        align-items: baseline;
    }

    section.about .text h2 {
        font-size: 28px;
        line-height: 38px;
    }
}

/* services */


section.services{
    padding: 64px 0;
    position: relative;
}

section.services .bubble_pink.left{
    position: absolute;
    left: 0;
    top: 10px;
}

section.services h2{
    font-style: normal;
    font-weight: 600;
    font-size: 36px;
    line-height: 54px;
    color: var(--primaryblue, #131C2E);
    margin: 0 0 24px;
    text-align: center;
}

section.services .content{
    display: flex;
    justify-content: space-between;
    gap: 28px;
}

section.services .content .box_service{
    flex: 1;
    padding: 24px 16px;
    background: var(--primaryblue, #131C2E);
    border-radius: 12px;
}

section.services .content .box_service h3{
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    color: var(--white, #fff);
    margin: 24px 0 12px;
}

section.services .content .box_service p{
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: var(--white, #fff);
}

section.services .content .box_service p strong{
    color: var(--primarygreen, #18D17A);
}

@media (max-width:768px){
    section.services .content{
        flex-direction: column;
        gap: 24px;
    }
    section.services .bubble_pink.left{
        display: none;
    }
}

@media (max-width:580px){
    section.services h2 {
        font-size: 28px;
        line-height: 38px;
    }
}



/* section tur */

section.turn{
    padding: 64px 0;
}

section.turn .content{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 48px 32px;
}

section.turn .content .info_step{
    width: 100%;
    max-width: 48%;
    position: relative;
}

section.turn .content .info_step .number_title{
    display: flex;
    gap: 24px;
    align-items: center;
}

section.turn .content .info_step svg{
    position: absolute;
    top: 50px;
    right: 62px;
}

section.turn .content .info_step h2{
    font-style: normal;
    font-weight: 600;
    font-size: 36px;
    line-height: 54px;
    color: var(--primaryblue, #131C2E);
}

section.turn .content .info_step p{
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    color: var(--gray,#515151);
    margin: 16px 0 0;
}

section.turn .content .info_step .number_title span{
    background: var(--primarygreen);
    color: var(--white);
    width: 100%;
    max-width: 48px;
    padding: 16px 12px;
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

section.turn .content .info_step .number_title h3{
    font-style: normal;
    font-weight: 600;
    font-size: 28px;
    line-height: 34px;
    color: var(--primaryblue, #131C2E);
}

@media (max-width:768px){
    section.turn .content .info_step{
        max-width: 100%;
    }

    section.turn .content .info_step:nth-child(1){
        order: 1;
    }

    section.turn .content .info_step:nth-child(3){
        order: 2;
    }
    section.turn .content .info_step{
        order: 3;
    }
    section.turn .content .info_step .number_title{
        flex-direction: column;
        align-items: flex-start;
    }
    section.turn .content .info_step svg{
        display: none;
    }
}

@media (max-width:580px){
    section.turn .content .info_step h2{
        font-size: 28px;
        line-height: 38px;
    }
    section.turn .content .info_step .number_title h3{
        font-size: 22px;
        line-height: 32px;
    }
}



section.plataform{
    padding: 64px 0;
    position: relative;
}

section.plataform .bubble_pink.right{
    position: absolute;
    right: 0;
    top: 100px;
}

section.plataform h2{
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 36px;
    text-align: center;
    color: var(--primaryblue);
    margin: 0 0 12px;
}

section.plataform p{
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 27px;
    text-align: center;
    color: var(--gray, #515151);
    margin: 0 auto 32px;
    width: 100%;
    max-width: 601px;
}

section.plataform .logo_plataform{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

section.plataform .logo_plataform img{
    width: 100%;
    max-width: fit-content;
}


@media (max-width:768px){
    section.plataform{
        padding: 32px 0;
    }
    section.plataform .bubble_pink.right{
        display: none;
    }
    section.plataform .logo_plataform {
        gap: 24px;
        align-items: center;
        justify-content: center;
    }
}

section.developer{
    padding: 32px 0;
}

section.developer .content{
    padding: 48px 24px;
    background: var(--primaryblue);
    border-radius: 40px;
}

section.developer .content h2{
    font-style: normal;
    font-weight: 600;
    font-size: 32px;
    line-height: 48px;
    text-align: center;
    color: var(--white, #fff);
    width: 100%;
    max-width: 886px;
    margin: 0 auto 20px;
}

section.developer .content p.desc{
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    line-height: 33px;
    text-align: center;
    color: var(--white, #fff);
    width: 100%;
    max-width: 620px;
    margin: 0 auto 80px;
}

section.developer .content h2 strong,
section.developer .content p strong{
    color: var(--primarygreen);
}

section.developer .content_bottom{
    display: flex;
    padding: 0 80px;
    justify-content: space-between;
}

section.developer .content_bottom .tag_content{
    flex: 1;
}

section.developer .content_bottom .tag_content .top_title {
    display: flex;
    gap: 24px;
    align-items: center;
    margin: 0 0 42px;
    width: 100%;
    max-width: 450px;
}

section.developer .content_bottom .tag_content .top_title .icon{
    width: 100%;
    max-width: fit-content;
}

section.developer .content_bottom .tag_content .top_title h3{
    font-weight: 500;
    font-size: 24px;
    line-height: 20px;
    color: var(--white);
}

section.developer .content_bottom .tag_content .top_title p{
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--white);
    margin: 12px 0 0;
}

section.developer .content_bottom .tag_content .tags{
    display: flex;
    flex-wrap: wrap;
    justify-content:baseline;
    gap: 16px;
    width: 100%;
    max-width: 340px;
}

section.developer .content_bottom .tag_content .tags span{
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: var(--white);
    border: 1px solid var(--white);
    padding: 4px 12px;
    width: 100%;
    max-width: fit-content;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width:768px){
    section.developer {
        padding: 32px 20px;
    }
    section.developer .content_bottom{
        flex-direction: column;
        gap: 48px;
        padding: 0 0px;
    }
    section.developer .content_bottom .tag_content .top_title{
        flex-direction: column;
        align-items: self-start;
    }
}

@media (max-width:580px){
    section.developer .content h2{
        font-size: 22px;
        line-height: 32px;
    }

    section.developer .content p.desc{
        font-size: 16px;
        line-height: 24px;
    }

}



section.revision{
    padding: 64px 0 90px;
}

section.revision .content{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

section.revision .content .steps{
    width: 100%;
    max-width: 590px;
    gap: 64px 0;
    display: flex;
    flex-direction: column;
}

section.revision .content .steps .step_single{
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

section.revision .content .steps .step_single .icon{
    background: var(--primaryblue);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    height: 80px;
    position: relative;
    width: 100%;
    max-width: 80px;
}

section.revision .content .steps .step_single .icon::after{
    content: '';
    width: 2px;
    height: 162px;
    position: absolute;
    background-color: var(--primarygreen);
    left: calc(50% - 1px);
    bottom: -162px;
}

section.revision .content .steps .step_single:last-child .icon::after{
    display: none;
}

section.revision .content .steps .step_single .icon img{
    width: 100%;
    max-width: 32px;
    height: 32px;
    object-fit: contain;
}

section.revision .content .steps .step_single .text{
    width: 100%;
    max-width: 460px;
}

section.revision .content .steps .step_single .text h4{
    font-style: normal;
    font-weight: 600;
    font-size: 28px;
    line-height: 42px;
    color: var(--primaryblue);
    margin: 0 0 8px;
}

section.revision .content .steps .step_single .text p{
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    color: var(--primaryblue);
}

section.revision .content .banner{
    width: 100%;
    max-width: 520px;
}

section.revision .content .banner img{
    border-radius: 12px;
}

@media (max-width:768px){
    section.revision .content{
        flex-direction: column;
        gap: 48px;
    }
    section.revision .content .steps{
        gap: 32px;
    }
    section.revision .content .steps .step_single{
        flex-direction: column;
        gap: 12px;
    }

    section.revision .content .steps .step_single .icon{
        max-width: 60px;
        height: 60px;
    }
    section.revision .content .steps .step_single .icon img{
        max-width: 32px;
        height: 32px;
    }

    section.revision .content .steps .step_single .icon::after{
        display: none;
    }
}


@media (max-width:580px){
    section.revision{
        padding: 32px 0;
    }

    section.revision .content .steps .step_single .text h4{
        font-size: 22px;
        line-height: 28px;
    }

    section.revision .content .steps .step_single .text p{
        font-size: 16px;
        line-height: 24px;
    }
}

section.contact_form{
    padding: 64px 0;
    background: var(--primaryblue);
}

section.contact_form .content{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

section.contact_form .content .text{
    width: 100%;
    max-width: 484px;
}

section.contact_form .content .text h2{
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    line-height: 54px;
    color: var(--white);
}

section.contact_form .content .text p{
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    color: var(--white);
    margin: 16px 0 24px;
}

section.contact_form .content .form{
    width: 100%;
    max-width: 520px;
    padding: 48px 32px;
    background: rgba(217, 217, 217, 0.03);
    border: 1px solid rgba(199, 249, 225, 0.34);
    border-radius: 12px;
}

section.contact_form .content .form form{
    display: flex;
    flex-direction: column;
}

section.contact_form .content .form form label{
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 36px;
    color: var(--white);
    margin: 0 0 4px;
}

section.contact_form .content .form form input{
    background: rgba(77, 78, 79, 0.25);
    border: 1px solid rgba(134, 132, 132, 0.21);
    border-radius: 4px;
    height: 42px;
    padding: 0 0 0 8px;
    margin: 0 0 16px;
    color: var(--white);
    width: 100%;
}   

section.contact_form .content .form form input[type=submit]{
    background: var(--primarygreen);
    color: var(--white);
    text-transform: uppercase;
    text-align: center;
    margin: 12px 0 0;
    font-weight: 700;
    font-size: 18px;
    line-height: 18px;
    cursor: pointer;
}


@media (max-width:768px){
    section.contact_form .content{
        flex-direction: column;
        gap: 48px;
    }
    section.contact_form .content .form{
        padding: 48px 20px;
    }
}


footer{
    background: var(--primaryblue);
    padding: 48px 0 16px;
}

footer .content{
    display: flex;
    justify-content: space-between;
    padding: 0 0 64px;
}

footer .content .column{
    color: var(--white);
}

footer .content .column .logo{
    margin: 0 0 24px;
}

footer .content .column p.desc{
    width: 100%;
    max-width: 240px;
    font-size: 16px;
    line-height: 24px;

}

footer .content .column h6{
    color: var(--white);
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
    margin: 0 0 24px;
}

footer .content .column .social{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

footer .content .column .social a{
    width: 24px;
    height: 24px;
    cursor: pointer;
}

footer .content .column a{
    color: var(--white);
}

footer .content .column nav ul{
    display: flex;
    flex-direction:column;
    align-items: center;
    gap: 16px;
}

footer .content .column nav ul li a{
    color: var(--white);
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 18px;
}


footer .content_bottom{
    border-top: 1px solid var(--primarygreen);
    padding: 48px 0 0;
    text-align: center;
}

footer .content_bottom p{
    color: var(--white);
    text-align: center;
}

footer .content_bottom p a{
    color: var(--primarygreen);
    cursor: pointer;
}

@media (max-width:768px){
    footer{
        padding: 48px 20px 16px;
    }
    footer .content{
        flex-direction: column;
        gap: 48px;
    }

    footer .content .column {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    footer .content_bottom p{
        font-size:14px;
        line-height: 20px;
    }
}

/* bllog page */


 /* Hero Section */
        .hero {
            text-align: center;
            padding: 4rem 0;
            color: var(--white);
        }

        .hero h1 {
            font-size: 3.5rem;
            margin-bottom: 1rem;
            animation: fadeInUp 1s ease-out 0.2s both;
        }

        .hero p {
            font-size: 1.3rem;
            margin-bottom: 2rem;
            opacity: 0.9;
            animation: fadeInUp 1s ease-out 0.4s both;
        }

        @keyframes fadeInUp {
            from { transform: translateY(30px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        .cta-button {
            display: inline-block;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            padding: 15px 30px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
            border: 2px solid rgba(255, 255, 255, 0.3);
            animation: fadeInUp 1s ease-out 0.6s both;
        }

        .cta-button:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        }

        /* Blog Posts */
        .blog-section {
            background: var(--white);
            padding: 4rem 0;
            border-radius: 30px 30px 0 0;
            box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.1);
        }

        .section-title {
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 3rem;
            background: linear-gradient(45deg, var(--primaryblue), var(--primaryblue));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .blog-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 2rem;
            margin-bottom: 3rem;
        }

        .blog-card {
            background: var(--white);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            cursor: pointer;
			width: 100%;
        }

        .blog-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
        }

        .blog-image {
            height: 200px;
            background: linear-gradient(45deg, var(--primaryblue), var(--primarygreen));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
            color: var(--white);
        }

.blog-image img{
	    width: 100%;
    object-fit: cover;
    height: 200px;
}

        .blog-content {
            padding: 1.5rem;
        }

        .blog-date {
            color: var(--gray);
            font-size: 0.9rem;
            margin-bottom: 0.5rem;
        }

        .blog-title {
            font-size: 1.3rem;
            margin-bottom: 1rem;
            color: var(--primaryblue);
        }

        .blog-excerpt {
            color: var(--gray);
            line-height: 1.6;
            margin-bottom: 1rem;
        }

        .read-more {
            color: var(--primaryblue);
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s ease;
        }

        .read-more:hover {
            color: var(--primarygreen);
        }


        /* single page */


         /* Main Content */
        .main-content {
            background: white;
            margin-top: 2rem;
            border-radius: 30px 30px 0 0;
            box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.1);
            min-height: calc(100vh - 120px);
        }

        .article-header {
            padding: 4rem 0 2rem;
            text-align: center;
            background: linear-gradient(
                135deg, 
                rgba(24, 209, 122, 0.1) 0%,   /* Verde com transparência */
                rgba(19, 28, 46, 0.1) 100%    /* Azul escuro com transparência */
                );
            border-radius: 30px 30px 0 0;
        }

        .article-category {
            display: inline-block;
            background: linear-gradient(45deg, var(--primary), var(--primary));
            color: var(--primary);
            padding: 8px 20px;
            border-radius: 25px;
            font-size: 0.9rem;
            font-weight: 600;
            margin-bottom: 1rem;
            animation: fadeInUp 0.8s ease-out 0.2s both;
        }

        .article-title {
            font-size: 3rem;
            margin-bottom: 1rem;
            color: #333;
            line-height: 1.2;
            animation: fadeInUp 0.8s ease-out 0.4s both;
        }

        .article-meta {
            color: #666;
            font-size: 1.1rem;
            margin-bottom: 2rem;
            animation: fadeInUp 0.8s ease-out 0.6s both;
        }

        .article-meta span {
            margin: 0 15px;
        }

        @keyframes fadeInUp {
            from { transform: translateY(30px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        .featured-image {
            width: 100%;
            max-width: 800px;
            height: 400px;
            background: linear-gradient(45deg, var(--primary), var(--primary));
            border-radius: 20px;
            margin: 2rem auto;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 4rem;
            color: white;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
            animation: zoomIn 0.8s ease-out 0.8s both;
        }

.featured-image img{
	width: 100%;
    height: 100%;
    object-fit: fill;
	border-radius:20px;

}

        @keyframes zoomIn {
            from { transform: scale(0.8); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }

        /* Article Body */
        .article-body {
            display: grid;
            grid-template-columns: 1fr 300px;
            gap: 3rem;
            padding: 3rem 0;
            max-width: 1200px;
            margin: 0 auto;
        }

        .article-content {
            font-size: 1.1rem;
            line-height: 1.8;
            animation: fadeIn 1s ease-out 1s both;
        }

        .article-content h2 {
            font-size: 2rem;
            margin: 2rem 0 1rem;
            color: #333;
            background: linear-gradient(45deg, var(--primary), var(--primary));
            -webkit-background-clip: text;
            background-clip: text;
        }

        .article-content h3 {
            font-size: 1.5rem;
            margin: 1.5rem 0 0.8rem;
            color: #444;
        }

        .article-content p {
            margin-bottom: 1.5rem;
            text-align: justify;
        }

        .article-content blockquote {
            background: #f8f9ff;
            border-left: 5px solid var(--primary);
            margin: 2rem 0;
            padding: 1.5rem;
            border-radius: 10px;
            font-style: italic;
            font-size: 1.2rem;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }

        .article-content ul, .article-content ol {
            margin: 1rem 0 1.5rem 2rem;
        }

        .article-content li {
            margin-bottom: 0.5rem;
        }

        .highlight-box {
            background: linear-gradient(
            135deg, 
            rgba(24, 209, 122, 0.1) 0%,   /* Verde com transparência */
            rgba(19, 28, 46, 0.1) 100%    /* Azul escuro com transparência */
            );
            padding: 2rem;
            border-radius: 15px;
            margin: 2rem 0;
            border: 2px solid rgba(24, 209, 122, 0.2); /* Borda levemente verde */

        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        /* Sidebar */
        .sidebar {
            animation: slideInRight 1s ease-out 1.2s both;
        }

        @keyframes slideInRight {
            from { transform: translateX(50px); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }

        .sidebar-widget {
            background: #f8f9ff;
            padding: 2rem;
            border-radius: 20px;
            margin-bottom: 2rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        }

        .sidebar-widget h3 {
            color: #333;
            margin-bottom: 1rem;
            font-size: 1.3rem;
        }

        .related-posts {
            list-style: none;
        }

        .related-posts li {
            padding: 1rem 0;
            border-bottom: 1px solid #eee;
        }

        .related-posts li:last-child {
            border-bottom: none;
        }

        .related-posts a {
            color: var(--primary);
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
        }

        .related-posts a:hover {
            color: var(--primary);
        }

        .tag-cloud {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .tag {
            background: rgba(102, 126, 234, 0.1);
            color: var(--primary);
            padding: 5px 15px;
            border-radius: 20px;
            text-decoration: none;
            font-size: 0.9rem;
            transition: all 0.3s ease;
        }

        .tag:hover {
            background: var(--primary);
            color: white;
            transform: translateY(-2px);
        }