.dashboard-frame {
    width: 100%;
    height: 60vh;
    border-radius:0.5rem;
}

.dibb-section li,
.fluxo-caixa-section li,
.acompanhamento-obra-section li,
.servmix-infra-section li,
.project-description li {
    color: #F0FFFF;
    text-align: start;
    margin-left: 2rem;
}

.project-section h1,
.dibb-description h1,
.fluxo-caixa-description h1,
.acompanhamento-mo-section h1,
.acompanhamento-obra-section h1,
.servmix-infra-section h1{
    padding-bottom: 2rem;
}

.project-section h3 {
    padding-left: 2rem;
}

.project-section btn {
    margin-left:2rem;
}

.content-project-box {
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;
    text-align: center;
}

.project-main-section h1 {
    color: #80f353;
    text-align:center;
}

.project-main-section btn {    
    margin: 2rem;    
}

.project-main-btn {
    display: flex;
    justify-content: center;
}

.DIBB-image img {
    width: 15rem;
    height: 10rem;
    object-fit: cover;
    border-radius: 1rem;
}

.ifk-controle-adiantamento-image img {
    width: 15rem;
    height: 10rem;
    object-fit: cover;
    border-radius: 1rem;
}

.acompanhamento-financeiro-obra-image img {
    width: 15rem;
    height: 10rem;
    object-fit: cover;
    border-radius: 1rem;
}

.acompanhamento-mao-de-obra-image img {
    width: 15rem;
    height: 10rem;
    object-fit: cover;
    border-radius: 1rem;
}

.fluxo-de-caixa-image img {
    width: 15rem;
    height: 10rem;
    object-fit: cover;
    border-radius: 1rem;
}


.servmix-infra-image img {
    width: 15rem;
    height: 16em;
    object-fit: cover;
    border-radius: 1rem;
}

.servmix-infra-diagrama img {
    width: 40rem;
    height: 20rem;
    object-fit: cover;
    border-radius: 1rem;
}


.projetos-bi-image img {
    width: 80%;
    height: 30rem;
    object-fit: cover;
    border-radius: 3rem;
}

.projetos-infra-image img {
    width: 80%;
    height: 30rem;
    object-fit: cover;
    border-radius: 3rem;
}

.projetos-dotnet-image img {
    width: 80%;
    height: 30rem;
    object-fit: cover;
    border-radius: 3rem;
}

.urbix-image img {
    width: 15rem;
    height: 5rem;
    object-fit: cover;
    border-radius: 1rem;
}

.dotnet-console-image img {
    width: 15rem;
    height: 10rem;
    object-fit: cover;
    border-radius: 1rem;
}

.servmix-tplink-omada-diagrama img {
    width: 55rem;
    height: 30rem;
    object-fit: cover;
    border-radius: 1rem;
}

.tp-link-omada-image img {
    width: 15rem;
    height: 10rem;
    object-fit: cover;
    border-radius: 1rem;
}

.btn {
    background-color: #904efa;
    color: #F0FFFF;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    .btn:hover {
        background-color: #1f6d9e;    
    }

    .btn a {
        color: #F0FFFF;
        text-decoration: none;
    }

@media (max-width: 768px) {
    
    .dashboard-frame {
        height: 45vh !important; 
    }

    
    .project-section h1,
    .dibb-description h1,
    .fluxo-caixa-description h1,
    .acompanhamento-mo-section h1,
    .acompanhamento-obra-section h1,
    .servmix-infra-section h1,
    .project-main-section h1 {
        font-size: 2rem !important;
        text-align: center;
        padding-bottom: 1rem;
    }

    
    .dibb-section li,
    .fluxo-caixa-section li,
    .acompanhamento-obra-section li,
    .servmix-infra-section li,
    .project-description li {
        margin-left: 1rem !important;
        text-align: justify;
    }

    .project-section h3 {
        padding-left: 1rem !important;
        text-align: center;
    }

    
    .project-section btn,
    .project-main-section btn {
        margin-left: auto !important;
        margin-right: auto !important;
        display: block;
        width: 80%;
    }

    .servmix-infra-image img,
    .servmix-infra-diagrama img,
    .projetos-bi-image img,
    .projetos-infra-image img,
    .projetos-dotnet-image img,
    .urbix-image img,
    .dotnet-console-image img,
    .servmix-tplink-omada-img,
    .servmix-tplink-omada-diagrama img {
        width: 100% !important; 
        height: auto !important; 
        max-width: 100%;
        margin: 1rem 0;
        display: block;
    }
        
    .servmix-infra-diagrama img {
        border-radius: 0.5rem;
    }
    
}