/* Index and General */
.principalContainer{
    width: 100vw;
    margin: 0px;
    margin-top: -40px;
}

.principalContainer P {
    text-align: center;
}

.principalContainer .sectionContainer{
    margin: 10px;
    display: block;
}

.sectionContainer #textPartialSection{
    align-self: center;
}

.sectionContainer #iconsSocialPartialSection{
    text-align: center;
    align-self: center;
}

.sectionContainer .partialSection{
    margin-block: 2vh;
}

.partialSection .benefitItem{
    padding-block: 0.5vh;
}

.benefitItem .bi-check-square-fill{
    color: var(--main-primary-color);
    font-size: 22px;margin-right: 5px;
}

.partialSection .buttonContainer{
    display:flex;
    justify-content: center;
    align-items: center;
}

.buttonContainer .buttonSubscription{
    margin-top: 0.5vh;
    background: white;
    width: 90%;
    border-radius: 25pt;
    font-weight: 500;
    color: black;
    font-size: 19px;
    opacity: 0.6;
    height: 50px;
    border-color: transparent;
    box-shadow: rgba(0, 0, 0, 0.15) 5.0px 5.0px 2.2px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.4s ease;
}

.buttonContainer .buttonSubscription:hover{
    color: var(--main-primary-color);
    box-shadow: rgba(29, 73, 153, 0.5) 0px 2px 5px -1px;
    opacity: 1;
}

#iconsSocialPartialSection .bi{
    font-size: 35px;
    margin-inline: 5px;
    transition: all 0.4s ease;
}

#iconsSocialPartialSection .bi:hover{
    font-size: 45px;
}

.partialSection .imageCommercial{
    width: 100%;
    border-radius: 20pt;
}

.principalContainer .borderContainer{
    border-style: dashed;
    border-color: var(--main-primary-color);
}

.borderContainer .sectionContainerTitle{
    margin-block: 2vh;
    text-align: center;
}

.borderContainer .sectionContainerContent{
    margin: 2vh;
    display: flex;
}

.borderContainer .withWrap{
    flex-wrap: wrap;
    justify-content: center;
}

/* Producto Container */
.sectionContainerContent .productIcon{
    width: fit-content;
    margin-right: 2vw;
    align-self: center;
}

.productIcon .bi-box-seam-fill{
    font-size: 50px;
    color: #DFD712;
}

.sectionContainerContent .productDescription{
    font-size: 16px;
    line-height: 1;
    text-align: justify;
}

/* Benefits Container */
.sectionContainerContent .benefitContainer{
    width: fit-content;
    margin-inline: 2vw;
    align-self: center;
    display: block;
}

.benefitContainer .benefitTitle{
    margin-block: 2vh;
    text-align: center;
}

.benefitContainer .benefitContent{
    display: flex;
    align-items: center;
    justify-content: center;
}

.benefitContent .benefitIcon{
    width: fit-content;
    margin-right: 3vw;
    align-self: center;
}

.benefitIcon .bi{
    font-size: 30px;
}

.benefitConttent P{
    font-size: 16px;
}


@media (min-width: 600px) {
    /* Index and General */
    .principalContainer{
        padding-inline: 0.1vw;
    }

    .principalContainer P {
        text-align: left;
    }

    .principalContainer .sectionContainer {
        margin-inline: 3vw;
        margin-block: 2vh;
        display: flex;
    }

    .sectionContainer #textPartialSection{
        width: 50%;
        align-content: center;
    }

    .sectionContainer #iconsSocialPartialSection{
        width: 5%;
        display: grid;
        place-items: center;
    }

    .sectionContainer #immageCommercialPartialSection{
        width: 45%;
    }

    .buttonContainer .buttonSubscription{
        width: 60%;
    }

    .partialSection .imageCommercial{
        border-bottom-left-radius: 70pt;
        border-bottom-right-radius: 0pt;
        border-top-left-radius: 70pt;
        border-top-right-radius: 0pt;
    }

    .principalContainer .borderContainer{
        display: block;
    }

    /* Producto Container */
    .sectionContainerContent .productDescription{
        line-height: 0.6;
    }

    /* Benefits Container */
    .benefitContent .benefitIcon{
        width: fit-content;
        margin-right: 1.5vw;
        align-self: center;
    }
}

/* Footer */
.principalContainer .footer{
    width: 100vw;
    height: 80px;
    background: var(--main-primary-color);
    padding: 10px;
    margin-top: 10px;
    margin-left: -2px;
    margin-right: -4px;
}

.footer P{
    text-align: center;
    color: #EDF2F9;
    line-height: 0.5;
}