/**
 * 00. GENERAL
 *
 * -------------------------------------------------------------------
 */
/* container of the logos */
.proyects-window-wrapper {
    align-self: center;
    display: flex;
}

.section-projects p {
    color: #403e46;
    font-family: Inter;
    font-size: 19px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
}

.section-projects .btn-dark-top {
    color: #fff;
}

.section-projects .simple-item {
    color: #403e46;
    font-size: 15px;
    line-height: 16px;
}

.section-projects .suva,
.sincola-project {
    height: 204px;
    width: 310px;
}

.sincola-project {
    background-image: url(../assets/images/sincola-project.png);
}

/*  articles with two windows in a row
(text and image on each side) */
.window-info {
    align-items: center;
    display: flex;
    justify-content: center;
}

.suva-and-sincola-article .window-info {
    padding: 8% 0;
}

.window-info .simple-item-wrapper {
    margin-top: 30px;
}

.window-info h2 {
    margin-bottom: 15px;
    font-family: Poppins;
    font-size: 42px;
    font-style: normal;
    font-weight: 500;
    line-height: 54.8px;
}

.window-info div.btn-container {
    margin-top: 50px;
}

.window-image {
    display: flex;
    justify-content: center;
    padding-top: 122px;
    padding-right: 71px;
    padding-bottom: 122px;
    padding-left: 71px;
}

article:is(
        .suva-and-sincola-article,
        .founders-article,
        .mujeres-article,
        .botanas-article,
        .inm-article,
        .onum-article,
        .avose-article
    )
    > .container-fluid
    > .row
    > :first-child,
header:is(.front, .header-about) > .container-fluid > .row > :first-child {
    border-right: 1px solid #232227;
}

/* Container with three colored dots */
:is(.window-wrapper, .proyects-window-wrapper) {
    background-color: #fff;
    border-radius: 32px;
    border: 1px solid #232227;
    box-shadow: 7px 7px 0px #232227;
    overflow: hidden;
    position: relative;
    width: 443px;
}

/* little circles */
.circle-container {
    column-gap: 8px;
    display: flex;
    flex-direction: row;
    position: absolute;
    transform: translate(30px, 15px);
}

.vivid-red-circle,
.yellow-circle,
.emerald-circle {
    border-radius: 12px;
    border: 1px solid #232227;
    height: 12px;
    width: 12px;
}

.vivid-red-circle {
    background: #ff4040;
}

.yellow-circle {
    background-color: #ffcf01;
}

.emerald-circle {
    background-color: #a6ce39;
}

article:is(
        .botanas-article,
        .inm-article,
        .onum-article,
        .avose-article,
        .suva-and-sincola-article
    )
    .window-info {
    padding: 8%;
}

/**
 * 01. TITLE PROJECTS
 *
 * -------------------------------------------------------------------
 */
.project-title {
    background-color: #f58220;
    padding-top: 100px;
    padding-bottom: 100px;
}

.header-title-container {
    position: relative;
}

.project-title h2 {
    color: #fff;
    font-size: 50px;
    line-height: normal;
}

.project-title > .container > .row > div > div:last-child {
    display: flex;
    flex-direction: row;
}

.icon-click {
    background-image: url(../assets/images/click.png);
    height: 50px;
    position: absolute;
    width: 50px;
    right: -410px;
    top: 0px;
}

.project-title .white-underline {
    background-image: url(../assets/icons/white_underline.png);
    height: 129px;
    left: 0px;
    position: absolute;
    width: 252px;
    top: 10px;
}

/**
 * 02. INmujeres
 *
 * -------------------------------------------------------------------
 */

.inm-article {
    background: linear-gradient(
        90deg,
        transparent 50%,
        rgba(12, 124, 242, 0.8) 0%
    );
}

.proyecto-inmujeres {
    background-image: url(../assets/images/proyecto_inmujeres.png);
    height: 295px;
}

.mujeres-image-wrapper,
.botanas-image-wrapper,
.avose-image-wrapper,
.onum-image-wrapper,
/* .founders-image-wrapper  */
.inm-image-wrapper {
    max-width: 1000px;
    min-width: 299px;
    margin: auto;
    margin-bottom: 0;
}

img:is(.img-botanas, .img-inmujeres, .img-onumujeres, .img-avose) {
    margin-top: 50px;
    width: 100%;
}

/**
 * 03. ONUmujeres
 *
 * -------------------------------------------------------------------
 */
.onum-article {
    background: linear-gradient(90deg, #ffcf01 50%, transparent 0%);
}

/**
 * 04. AVOSE
 *
 * -------------------------------------------------------------------
 */
.avose-article {
    background: linear-gradient(90deg, transparent 50%, #27b67c 0%);
}

/**
 * 05. BOTANAS
 *
 * -------------------------------------------------------------------
 */
.botanas-article {
    background: linear-gradient(90deg, #a6ce39 50%, transparent 0%);
}

/**
 * 06. CONTACT
 *
 * -------------------------------------------------------------------
 */
.projects-contact .underline {
    left: 30px;
    position: absolute;
    transform: none;
    width: 254px;
    height: 12px;
    bottom: 0;
}

/**
 * 06. MEDIAS QUERIES
 *
 * -------------------------------------------------------------------
 */
@media (max-width: 1400px) {
    /* .icon-click {
        right: 225px; */
    /* } */
}

@media (max-width: 1200px) {
    /* .icon-click {
        right: 44px;
    } */
}

@media (max-width: 992px) {
    .icon-click {
        right: 76px;
        top: 82px;
    }
}
@media (min-width: 768px) {
    .projects-contact > .container > .row {
        margin-right: 1px;
    }
}

@media (max-width: 992px) {
    .window-image {
        padding-right: 20px;
        padding-left: 20px;
    }
    .projects-contact .underline {
        bottom: 26%;
    }
}
@media (max-width: 768px) {
    .window-info .simple-item-wrapper {
        column-gap: 10px;
        justify-content: center;
    }

    .window-info h2 {
        font-size: 32px;
        line-height: 47px;
        margin-bottom: 15px;
    }

    .window-image {
        padding: 60px 35px 60px 35px;
    }

    .section-projects .suva,
    .sincola-project {
        width: 225px;
        height: 100px;
    }

    .project-title .white-underline {
        width: 204px;
        top: -8px;
    }

    .project-title {
        padding: 80px 0px;
    }

    .project-title h2 {
        color: #fff;
        font-size: 40px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }

    article:is(
            .botanas-article,
            .inm-article,
            .onum-article,
            .avose-article,
            .suva-and-sincola-article
        )
        .window-info {
        padding: 0px;
        padding-top: 60px;
        padding-bottom: 60px;
    }

    article:is(
            .inm-article,
            .onum-article,
            .avose-article,
            .botanas-article,
            .suva-and-sincola-article
        )
        .window-info
        > div {
        padding: 20px 10px;
    }

    .container-contact > .container > .row > div {
        margin: 20px 0;
    }

    .inm-article .window-image {
        padding-right: 0px;
        padding-left: 0px;
    }

    .inm-article {
        background: linear-gradient(
            180deg,
            transparent 50%,
            rgba(12, 124, 242, 0.8) 0%
        );
    }

    .onum-article .window-image {
        padding-right: 0px;
        padding-left: 0px;
    }

    .onum-article {
        background: linear-gradient(180deg, transparent 47%, #ffcf01 0%);
    }

    .avose-article .window-image {
        padding-right: 0px;
        padding-left: 0px;
    }

    .avose-article {
        background: linear-gradient(180deg, transparent 55%, #27b67c 0%);
    }

    .botanas-article .window-image {
        padding-right: 0px;
        padding-left: 0px;
    }

    .botanas-article {
        background: linear-gradient(180deg, transparent 39%, #a6ce39 0%);
    }

    .projects-contact .underline {
        width: 182px;
        left: 191px;
        /* bottom: 0px; */
    }

    .icon-md img {
        transform: rotate(30deg);
    }

    .border-b::after {
        position: absolute;
        left: 0;
        content: " ";
        display: block;
        border-bottom: 1px solid grey;
        width: 100%;
    }
}

@media (max-width: 576px) {
    article:is(.onum-article, .botanas-article) > .container-fluid > .row {
        display: flex;
        flex-direction: column-reverse;
    }

    .projects-contact .underline {
        left: 23px;
        bottom: 0px;
    }

    .icon-click {
        right: 10px;
        top: -70px;
    }

    .px-xs-0 {
        padding-left: 0px;
        padding-right: 0px;
    }

    .window-image {
        padding-right: calc(var(--bs-gutter-x) * 0.5);
        padding-left: calc(var(--bs-gutter-x) * 0.5);
    }

    .inm-article {
        background: transparent;
    }

    .color-xs-blue {
        background: rgba(12, 124, 242, 0.8);
    }

    .onum-article {
        background: transparent;
    }

    .color-xs-yellow {
        background: #ffcf01;
    }

    .avose-article {
        background: transparent;
    }

    .color-xs-green {
        background: #27b67c;
    }

    .botanas-article {
        background: transparent;
    }

    .color-xs-green-2 {
        background: #a6ce39;
    }
    .contact-underline-wrapper {
        width: fit-content;
        display: flex;
        margin-right: auto;
        margin-left: auto;
        position: relative;
    }
}