@font-face {
    font-family: Poppins;
    src: url("../fonts/Poppins/Poppins-Regular.ttf");
}

@font-face {
    font-family: Poppins-SemiBold;
    font-display: auto;
    src: url('../fonts/Poppins/Poppins-SemiBold.ttf');
}
@font-face {
    font-family: Poppins-Bold;
    font-display: auto;
    src: url('../fonts/Poppins-Bold.ttf');
}

@font-face {
    font-family: Poppins-Medium;
    font-display: auto;
    src: url('../fonts/Poppins/Poppins-Medium.ttf');
}

@font-face {
    font-family: Phosphate-pro;
    font-display: auto;
    src: url('../fonts/Phosphate_Pro_Cond_Inline_Regular.otf') format('opentype');
}

@font-face {
    font-family: Poppins-svg;
    font-display: auto;
    src: url('../fonts/poppins-bold-webfont.svg#poppinsbold') format('svg'),
        url('../fonts/poppins-bold-webfont.ttf') format('truetype');
}

/* * {
    margin: 0;
    padding: 0;
}
 */
:root {
    --purple: #521e45;
    --medium-purple: #9451ce;
    --green: #a9d15a;
    --pink-violet: #b70495;
    --mallow: #c8add8;
    --turquoise: #5fd6fb;
    --sky-blue: #68e4ec;
    --radial: radial-gradient(circle, rgba(95, 214, 251, 1) 0%, rgba(200, 173, 216, 1) 100%);
}

#index-main {
    display: flexbox;
    flex-direction: column;
}


/* ----- Opening Starts ------ */

.opening {
    background: linear-gradient(-45deg, #e73c7e, #23a6d5, rgb(168, 203, 95));
    background-size: 400% 400%;
    animation: gradient 3.5s ease infinite;
    height: 100vh;
    width: 100vw;
    position: absolute;
    background-color: #00ccff;
    overflow: hidden;
    top: 0;
    z-index: 1000;
}

.flying-gina {
    top: 20%;
    left: 35%;
    position: absolute;
    animation: flame 3.5s ease infinite;
}

.flying-gina>img {
    width: 30vw;
}


/* ------ Header Starts ------- */

.blank-filler {
    width: 100vw;
    height: 47vw;
}

/* ------ */

#slider {
    width: 100vw;
}

.mySlides>img {
    width: 100vw;
}

.mySlides {
    display: none;
    position: absolute;
    top: 0px;
    width: 100vw;
    z-index: -1;
}

.mySlides>h2 {
    font-size: 4.5vw;
    right: 5vw;
    position: absolute;
    top: 30vw;
    font-weight: normal;
    color: white;
    text-align: right;
    animation: bottom-to-top1 4s;
}

.mySlides>h1 {
    font-size: 5vw;
    right: 5vw;
    position: absolute;
    top: 17vw;
    font-weight: normal;
    color: white;
    animation: top-to-bottom1 4s;
}

.mySlides>p {
    font-size: 4.7vw;
    position: absolute;
    font-weight: lighter;
    top: 24vw;
    right: 5vw;
    color: white;
    text-align: right;
}

.second-slide>p {
    font-size: 4.7vw;
    position: absolute;
    font-weight: lighter;
    top: 15vw;
    right: 5vw;
    color: white;
    text-align: right;
}

/* ------- Slide home -------*/

.slide-home .item-height {
    height: 100vh;
    font-size: 3.7vw;
    font-weight: lighter;
    color: white;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: center;
}

.slide-home .item-height h2 {
    font-size: 4vw;
    position: relative;
    font-weight: normal;
    color: white;
    opacity: 0;
}

.carousel-container {
    position: relative;
    right: 5vw;
}

.carousel-item.active .top-in {
    animation: top-to-bottom1 4s;
    animation-fill-mode: forwards;
}

.carousel-item.active .bottom-in {
    animation: bottom-to-top1 4s;
    animation-fill-mode: forwards;
}
.gina_gif{
    /* background: url('../media/image/ginna_inicio.gif'); */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-38%);
    width: 40%;
}

/* ------ main Starts ------- */

.three-images-introduction {
    display: flex;
    flex-direction: row;
    padding: 5vw 0 5vw 0;
    justify-content: space-evenly;
    /* border:green 2px dotted; */
    text-align: center;
}

#objetivos-tittle {
    font-size: 24px;
    letter-spacing: .1vw;
    font-weight: normal;
    color: var(--purple);
    text-align: left;
    opacity: 1;
    padding: 0vw 2vw;
    line-height: 1.4;
}

.three-images-introduction>article {
    text-align: center;
    letter-spacing: .25vw;
    color: var(--purple);
    font-size: 1vw;
}

.three-images-introduction>article>img {
    width: 25vw;
}

.three-images-introduction>article>h3 {
    font-weight: normal;
    font-size: .8vw;
    margin-bottom: .8vw;
}

.three-images-introduction>article>h4 {
    font-size: 1vw;
}

.three-images-introduction>article:hover {
    transform: scale(1.3);
    transform-origin: center;
    transition: transform .5s ease;
}

.card-nosotros {
    max-width: 290px;
    border-radius: 20px;
    padding: 15px;
    height: 100%;
}

.card-nosotros img {
    animation: bounce_infinito 2s infinite;
}


/* --- grid Starts ---- */

.servicios-tittle {
    font-size: 5vw;
    letter-spacing: .4vw;
    font-weight: normal;
    color: var(--purple);
    text-align: center;
    margin-top: 4vw;
    margin-bottom: 4vw;
    opacity: 0;
}

.grid-containers {
    width: 99vw;
}

.cols * {
    overflow-y: hidden;
}

.cols {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.col3 {
    width: calc(33vw - .5vw);
    margin: .1vw;
    cursor: pointer;
    /*  border: var(--mallow) 1px solid; */
}

.col4 {
    width: calc(24.8vw - .5vw);
    margin: .1vw;
    cursor: pointer;
    /*  border: var(--mallow) 1px solid; */
}

.container-card {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    overflow: hidden;
}

.front,
.back {
    background-size: cover;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);
    background-position: center;
    -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    text-align: center;
    min-height: 18vw;
    height: 18vw;
    color: var(--purple);
    font-size: 1.5vw;
}

.col4>.container-card>.front {
    min-height: 13vw;
    height: 13vw;
}

.col4>.container-card>.back {
    min-height: 13vw;
    height: 13vw;
}

.back {
    background: var(--pink-violet);
    color: rgb(255, 255, 255);
}

.front:after {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    content: '';
    display: block;
    opacity: .6;
    background-color: transparent;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.container-card:hover .front,
.container-card:hover .back {
    -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.inner {
    -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
    transform: translateY(-50%) translateZ(60px) scale(0.94);
    top: 50%;
    position: absolute;
    left: 0;
    width: 100%;
    padding: 2rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 1px solid transparent;
    -webkit-perspective: inherit;
    perspective: inherit;
    z-index: 2;
}

.inner>img {
    width: 13.5vw;
}

.img-4-columns>img {
    width: 9vw;
}

.container-card .back {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    z-index: -1;
}

.container-card .front {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.container-card:hover .back {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    z-index: 1;
}

.container-card:hover .front {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.front .inner p {
    position: relative;
    line-height: 100%;
    font-weight: bold;
    letter-spacing: .25vw;
    font-size: 1vw;
    margin-bottom: 1vw;
}

.front .inner p:after {
    content: '';
    width: 4rem;
    height: 2px;
    position: absolute;
    background: #C6D4DF;
    display: block;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: -.75rem;
}

/* ----- Como lo hacemos ----- */
.card-como{
    max-width: 350px;
    margin: auto;
    height: 100%;
}
.como_lo_hacemos h2, .gracias h2, .avisos h1{
    font-size: 3rem;
    letter-spacing: .4vw;
    color: var(--purple);
    font-family: 'Poppins-Medium';
}
.card-como .card-img{
    position: relative;
}

.card-como h4{
    color: var(--purple);
    font-family: 'Poppins-Medium';
    margin-bottom: 1rem;
    text-align: center;
}

/* ----- Clients Starts ----- */

#clients-container {
    margin: 0px;
    padding: 0px;
    font-family: sans-serif;
    overflow-x: hidden;
    padding: 5vw;
}

.clients {
    opacity: 0;
}

.clients-flexbox {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    height: 16vw;
}

.clients-flexbox1 {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    height: 21vw;
}

.logos-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 5px;
    justify-content: center;
}

.logos-container3-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 5px;
    justify-content: center;
}

.logos {
    width: 7vw;
}

#clients-button {
    width: 10vw;
    height: 10vw;
    border-radius: 50%;
    font-size: large;
    border: none;
    padding: 1vw;
    cursor: pointer;
}

#clients-button:hover {
    transform: scale(.9);
    background-color: var(--sky-blue);
    transition: all .2s ease-in-out;
}

#clients-button:hover~#click-pointer {
    opacity: .2;
    z-index: -1;
}


#click-pointer {
    position: absolute;
    width: 5vw;
    left: 54vw;
    margin-top: 6vw;
}

.fade-in {
    text-align: center;
    padding: 1vw;
    border-radius: .5vw;
    transition: all .2s ease-in-out;
    animation: fadeIn 2s;
    -webkit-animation: fadeIn 2s;
    -moz-animation: fadeIn 2s;
    -o-animation: fadeIn 2s;
    -ms-animation: fadeIn 2s;
}

.fade-in>h3 {
    margin-top: 2vw;
}

.fade-in:hover {
    transform: scale(1.1);
}

#first-circle {
    z-index: -1;
    position: absolute;
    width: 15.5vw;
    left: 43.8vw;
    margin-top: 16.5vw;
}

.clients-circle {
    position: absolute;
    width: 15vw;
    z-index: 3;
}

.disappear {
    display: none;
}

#second-circle {
    left: 25vw;
}

#third-circle {
    left: 60vw;
}

#fourth-circle {
    top: 232vw;
    left: 18vw;
}

#fifth-circle {
    top: 232vw;
    left: 68vw;
}

#sixth-circle {
    top: 250vw;
    left: 61.5vw;
}

#seventh-circle {
    top: 250vw;
    left: 23vw;
}

/* ------ Contact Starts ------- */

#index-contact {
    min-height: 41vw;
    overflow-y: hidden;
    padding: 20px 0;
}

#leave-data {
    width: 100vw;
    position: relative;
    z-index: -1;
}

#gina-flickering {
    position: absolute;
    z-index: 2;
    top: 50%;
    transform: rotate(15deg) translateY(-50%);
    max-height: 100%;
    max-width: 50%;
    height: auto;
}

#index-contact-form {
    position: relative;
    z-index: 1;
    bottom: 35vw;
    left: 20vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    top: 0;
}

#index-contact-container {
    width: 40vw;
}

#index-contact-container input {
    height: 5vw;
    font-size: 1vw;
}

#index-contact-button {
    height: 5vw;
    width: 17vw;
    margin-top: 2vw;
    border-radius: .5vw;
    background-color: transparent;
}

#index-contact-form button:hover {
    background-color: var(--purple);
    color: white;
    cursor: pointer;
}

#index-contact-form-tittle {
    font-size: 3vw;
    color: var(--purple);
    font-weight: bold;
    letter-spacing: .5vw;
    margin-bottom: 2vw;
}

.success-message {
    width: 100%;
    background: #d1e7dd;
    color: #0f5132;
    position: relative;
    padding: 1rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;

}

/* ----- Portafolio ------ */

.card-portafolio{
    position: relative;
    height: 100vh;
    overflow: hidden;
}
.card-portafolio .img-portafolio{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: all 8s linear;
}
.card-portafolio:hover .img-portafolio{
    scale: 1.4;
}

.swiper-button-prev{
    left: 0;
}
.swiper-button-next{
    right: 0;
}
.swiper-button-next, .swiper-button-prev{
    color: var(--medium-purple);
    background-color: #ffffff78;
    width: 50px;
    height: 50px;
    border-radius: 3px;
}
.swiper-button-next:hover, .swiper-button-prev:hover{
    background-color: #ffffffb3;
}
.swiper-pagination-bullet{
    width: 15px;
    height: 15px;
    background: var(--mallow);
    opacity: 1;
}
.swiper-pagination-bullet-active{
    background: var(--medium-purple);
}
.btn-servicios{
    background: var(--pink-violet);
    color: #fff;
    padding: 10px 30px;
    border-radius: 40px;
    font-family: 'Poppins-Medium';
    margin-left: -50px;
    margin-bottom: 40px;
    filter: drop-shadow(0px 0px 15px #b704959e);
    animation: buttonanimate 1.5s infinite;
}
.btn-servicios:hover{
    background: var(--medium-purple);
    color: #fff;
    filter: drop-shadow(0px 0px 15px #9451ce9e);
}
.img-float{
    margin-top: 30px;
    animation: float 2.4s infinite;
}
.garantia{
    background: linear-gradient(-45deg, #e73c7ee6 -20%, #23a6d5);
    color: #fff;
}
.garantia h2{
    color: #fff;
    font-size: calc(2rem + 1.5vw);
    text-transform: uppercase;
}
.avisos{
    text-align: justify;
}
.post-header{
    margin-bottom: 2.5rem;
    color: #737373;
}
.post-header strong{
    color: #737373 !important;
}

/* ----- ANIMATIONS ------ */
@keyframes buttonanimate{
    0%,
    100%{
        transform: rotate(0);
    }

    20%{
        transform: rotate(4deg);
    }

    30%{
        transform: rotate(-4deg);
    }

    40%{
        transform: rotate(2deg);
    }

    50%{
        transform: rotate(-2deg);
    }
    

}

@keyframes float{
    0%, 100%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(-50px);
    }
}

@keyframes top-to-bottom1 {
    from {
        top: -5vw;
        opacity: 0;
    }

    to {
        top: 0vw;
        opacity: 1;
    }
}

@keyframes bottom-to-top1 {
    0% {
        bottom: -10vw;
        opacity: 0;
    }

    100% {
        bottom: 0;
        opacity: 1;
    }
}

@keyframes top-to-bottom2 {
    0% {
        margin-left: -25vw;
        opacity: 0;
    }

    50% {
        margin-left: 10vw;
        opacity: .5;
    }

    100% {
        margin-left: 0vw;
        opacity: 1;
    }
}


@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


@keyframes flame {
    0% {
        transform: translate(200%, -50%) rotate(-30deg);
    }

    50% {
        transform: translate(-90%, 20%) rotate(30deg);
    }

    80% {
        transform: translate(0%) rotate(-10deg) scale(3);
        opacity: .8;
    }

    100% {
        transform: translate(0%) rotate(-10deg) scale(5);
        opacity: .3;
    }
}

@media screen and (max-width: 64rem) {
    .col {
        width: calc(33.333333% - 2rem);
    }
}

@media screen and (max-width: 48rem) {
    .col {
        width: calc(50% - 2rem);
    }
}

@media screen and (max-width: 32rem) {
    .col {
        width: 100%;
        margin: 0 0 2rem 0;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-o-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-ms-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* Animation (bouncing) */
@keyframes bounce_infinito {

    0%,
    20%,
    50%,
    80%,
    100% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }

    40% {
        -webkit-transform: translateY(-20px);
        -moz-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        -o-transform: translateY(-20px);
        transform: translateY(-20px);
    }

    60% {
        -webkit-transform: translateY(-5px);
        -moz-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
        -o-transform: translateY(-5px);
        transform: translateY(-5px);
    }
}

/* ------ */

@media(max-width:1199px) {
    #objetivos-tittle {
        font-size: calc(.3rem + 1.5vw);
    }

    .como_lo_hacemos h2 {
        font-size: calc(2rem + 1.5vw);
    }
}

@media(max-width:991px) {
    .slide-home .item-height {
        height: 440px;
    }

    .nosotros h5 {
        font-size: calc(.2rem + 1.5vw);
    }

    .success-message {
        font-size: 1.5vw;
    }

    #gina-flickering {
        transform: rotate(15deg) translateY(-50%) translateX(-15%);
    }

    .como_lo_hacemos h2 {
        font-size: calc(1.5rem + 1.5vw);
    }
    .card-como h4{
        font-size: calc(.5rem + 1.5vw);
    }
    .card-como{
        font-size: calc(.3rem + 1.5vw);
    }
}

@media(max-width:767px) {
    .slide-home .item-height {
        height: 300px;
    }

    .card-nosotros h4 {
        font-size: calc(.3rem + 1.5vw);
    }
    .card-portafolio{
        height: 75vh;
    }
    .content-post{
        height: auto;
    }
    .img-post {
        min-width: auto;
        text-align: center;
    }
    .img-post img{
        position: relative;
        max-width: 75%;
    }
}

@media(max-width:575px) {
    .slide-home .item-height {
        height: 250px;
    }

    #gina-flickering {
        position: relative;
        top: 0;
        transform: rotate(15deg);
        margin: auto;
        max-width: 70%;
    }

    #index-contact-form-tittle {
        font-size: calc(1.3rem + 1vw);
    }

    .contacto-home .form-control::placeholder,
    .contacto-home .form-control,
    .btn-enviar {
        font-size: calc(.4rem + 1.5vw);
    }

    .contacto-home .form-control {
        padding: 2vw 20px;
    }

    .card-nosotros h5,
    .card-como,
    #objetivos-tittle {
        font-size: calc(.5rem + 1.5vw);
    }
    .card-como h4{
        font-size: calc(.8rem + 1.5vw);
    }
    .btn-servicios{
        font-size: calc(.5rem + 1vw);
    }
}