* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    width: 1366px;
    margin: auto;
}

/* #FORMATAÇÃO HEADER */

a.navbar-brand img {
    height: 29px;
    margin-left: 84px;
}

ul.navbar-nav.mb-2.mb-lg-0 {
    margin-right: 86px;
}

li.nav-item a.nav-link.active {
    text-transform: uppercase;
    color: #FFBC00;
    font-family: KoHo;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
}

li.nav-item a.nav-link {
    text-transform: uppercase;
    color: #5000FF;
    font-family: KoHo;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    margin-left: 40px;
}

li.nav-item a.nav-link:hover {
    font-weight: bold;
}

button.navbar-toggler {
    border: #fff;
}

button.navbar-toggler:focus {
    border: #fff;
    box-shadow: none;
}


/* DECORATION VECTORS */
/* Tentar o paralax com CSS */
/* element.style {
    transform: translate(0%, -20.586%) translate3d(0px, 0px, 0px);} */

.decoration {
    position: absolute;
    transform: scale(0.7);
}

.decoration-mobile {
    display: none;
}

#vectorBar {
    top: 80px;
    left: -92px;
    z-index: 4;
}

#vectorPizza {
    top: 52px;
    left: 10px;
    z-index: 5;
}

/* não funciona
#vectorPizza img {
    transform: translate(0, 20px)
} */

#vectorHalf {
    transform: scale(0.9);
    right: -15px;
    top: 280px;
    z-index: 4;
}

#vectorBallOne {
    right: 50px;
    top: 400px;
    z-index: 5;
    transform: scale(0.65);
}

#vectorC {
    top: 520px;
    left: 40px;
    z-index: 5;
    transform: scale(0.6);
}

#pinkPizzaMobile {
    display: none;
}

/* OPENING */
#presentation {
    position: relative;
    height: 768px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #5000FF;
    margin-top: 50px;
}

#background-video-desktop {
    width: 1366px;
    height: 768px;
    border: none;
}

#background-video-mobile {
    display: none;
}


/* FORMATAÇÃO DAS DUAS SEÇÕES SERVICES */

/* SERVICE 1 */
#service1 {
    position: relative;
    height: fit-content;
    background-color: #fff;
}

#service1-text {
    height: 190px;
    display: flex;
    justify-content: center;
    align-items: end;
    margin: 0px 340px 0px 340px;
    /* border: solid 2px #000; */
}

#service1-text div {
    width: 650px;
    height: 120px;
    /* border: solid 2px #000; */
}

#service1-text h5 {
    font-family: KoHo;
    font-size: 1.9em;
    font-weight: 700;
    font-style: normal;
    text-align: center;
    line-height: 40px;
    color: #5000FF;
    margin: 0px;
}

#service-card-wrap {
    height: 350px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    justify-content: space-around;
    align-items: center;
    padding: 0 75px 0 75px;
    margin-bottom: 80.62px;
    /* border: solid 2px #000; */
}

.service-card {
    width: 251px;
    height: 260px;
    display: flex;
    flex: 1 1 250px;
    flex-direction: column;
    align-items: center;
    /* border: solid 2px blue; */
}

.service-card #pictograma1 {
    width: 115.968px;
    height: 231.9px;
    margin-left: 10px;
}

.service-card #pictograma2 {
    width: 157.232px;
    height: 158.655px;
    flex-shrink: 0;
    margin-top: 68px;
    margin-left: 25px;
}

.service-card #pictograma3 {
    display: flex;
    height: 160.895px;
    padding: 0px 11.017px 13.623px 35.139px;
    justify-content: flex-end;
    align-items: center;
    margin-top: 78px;
}

.service-card #pictograma4 {
    display: inline-flex;
    height: 171.268px;
    padding: 4.916px 0px 5.563px 0px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    margin-top: 72px;
}

.service-card .three-lines {
    margin-top: 15px;
}

.service-card-text {
    font-family: Montserrat;
    font-weight: 500;
    font-size: 1.1em;
    text-align: center;
    font-style: normal;
    line-height: normal;
    color: #5000FF;
    width: 226px;
    margin-bottom: 0;
    margin-top: 30px;
}

/* DECORATION VECTORS */
#vectorYellowPizza3 {
    right: 195px;
    top: 50px;;
    z-index: 5;
    transform: scale(1.0);
}


/* SERVICE 2 */
section#service2 {
    height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    background-color: #FFBC00;
    position: relative;
}

div#service2-text {
    width: 787px;
    height: 96px;
    display: flex;
    align-items: end;
    margin-top: 48px;
}

#service2-text h5 {
    font-family: KoHo;
    font-size: 1.9em;
    font-weight: 700;
    font-style: normal;
    text-align: start;
    line-height: 40px;
    color: #5000FF;
    margin: 0px;
}

/* ACCORDION COM BOOTSTRAP */
#service-accordion {
    padding-bottom: 115px;
}

#accordion-service {
    width: fit-content;
    margin-top: 68px;
    padding: 0px;
}

div .accordion-item {
    width: 787px;
    background-color: #FFBC00;
    border: #FFBC00;
}

/* SOBRESCREVENDO O BOOTSTRAP */
.accordion-button:not(.collapsed) {
    color: #5000FF;
    background-color: #FFBC00;
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='blue'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion {
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='blue'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

hr {
    color: #5000FF;
    height: 2px;
    background-color: #5000FF;
    margin: 0;
    opacity: 1;
}

.accordion-button {
    font-size: 0.9em;
    font-family: KoHo;
    font-weight: 700;
    line-height: 40px;
    color: #5000FF;
    background-color: #FFBC00;
    padding: 10px 5px 10px 5px;
}

.accordion-body {
    color: #5000FF;
    font-size: 1.3em;
    font-family: Montserrat;
    font-style: normal;
    font-weight: 400;
    line-height: 40px;
    /* word-spacing: 1px; */
    padding-left: 2px;
}

/* DECORATION */
#vectorBallTwo {
    right: 87px;
    top: 20px;
    z-index: 5;
    transform: scale(0.6);
}

#vectorPinkBar2 {
    top: 300px;
    left: -0px;
    z-index: 5;
    transform: scale(1.0);
}

/* #FORMATAÇÃO DO HUB DE CONTEUDO */
#hub {
    height: 569px;
    font-family: KoHo;
}

#div-image1 {
    height: 569px;
    width: 100%;
}

#div-image1 img {
    height: 569px;
    width: 100%;
    object-fit: cover;
}

#div-image2 {
    height: 569px;
    width: 100%;
}

#div-image2 img {
    height: 569px;
    width: 100%;
    object-fit: cover;
}

/* .carousel-item img {
    filter: hue-rotate();
} */

.carousel-caption h4 {
    text-align: start;
    font-family: KoHo;
    font-style: normal;
    font-weight: 700;
    line-height: 34px;
}

.carousel-caption .title {
    font-weight: 400;
}

.carousel-item .carousel-caption a {
    width: 176px;
    height: 34px;
    background: rgba(80, 0, 255, 0);
    opacity: 1;
    border: solid 2px #FFFFFF;
    color: #fff;
    font-family: KoHo;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    padding: 10px;
    border-radius: 20px;
    left: 0;
}

.carousel-caption h5 {
    font-size: 30px;
    text-align: end;
    font-family: KoHo;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
}

/* FORMATAÇÃO QUEM SOMOS */
#who {
    height: 569px;
    display: flex;
    background-color: #fff;
    z-index: 1;
    position: relative;
    /* border: solid 2px yellow; */
}

#who-text {
    width: 50%;
    height: 569px;
}

#who-text h5 {
    width: 482px;
    height: 279px;
    text-align: start;
    font-size: 2em;
    font-family: KoHo;
    font-style: normal;
    font-weight: 700;
    line-height: 35px;
    color: #5000FF;
    margin-top: 100px;
    margin-left: 187px;
    margin-right: 0;
}

#who-text button {
    width: 176px;
    height: 34px;
    background-color: #fff;
    opacity: 1;
    border: solid 2px #5000FF;
    color: #5000FF;
    font-family: KoHo;
    font-size: 0.9em;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    border-radius: 15px;
    margin-top: 47px;
    margin-left: 187px;
}

#who-text button a {
    color: #5000FF;
    text-decoration: none;
}

#who-text button a:visited {
    color: #5000FF;
    text-decoration: none;
}

#who-photos p {
    color: #5000FF;
    font-family: KoHo;
    font-weight: 400;
    font-style: normal;
    line-height: 30px;
    font-size: 1.4em;
    position: absolute;
    z-index: 2;
    top: 125px;
    right: 174px;
    margin-bottom: 0px;
}

#who-photos .border-radius {
    width: 277px;
    height: 277px;
    border-radius: 50%;
}

#who-photos #leticia {
    z-index: 5;
    position: absolute;
    top: 68px;
    right: 370px;
}

#who-photos #beth {
    z-index: 3;
    position: absolute;
    top: 215px;
    right: 200px;
}

#who-photos #beth-corte {
    display: none;
}

/* DECORATION VECTORS */
#vectorPinkBar {
    bottom: 340px;
    left: 0px;
    z-index: -4;
    position: absolute;
    transform: scale(0.7);
}

#vectorYellowPizza2 {
    bottom: 100px;
    left: 45px;
    z-index: 6;
    position: absolute;
    transform: scale(0.7);
}

#vectorBallThree {
    bottom: 0px;
    left: 680px;
    z-index: 6;
    position: absolute;
    transform: scale(0.55);
}

#vectorYellowHalf2 {
    bottom: 30px;
    left: 530px;
    z-index: 3;
    position: absolute;
    transform: scale(0.7);
}

#vectorYellowBall2 {
    bottom: 420px;
    right: 646px;
    z-index: 5;
    position: absolute;
    transform: scale(0.7);
}

#vectorPinkPizza {
    bottom: 430px;
    right: 60px;
    z-index: 5;
    position: absolute;
    transform: scale(0.7);
}

#vectorYellowBar2 {
    bottom: 80px;
    right: -65px;
    z-index: 2;
    position: absolute;
    transform: scale(0.75);
}

/* FORMATAÇÃO FOOTER */
footer {
    height: 188px;
    background-color: #5000ff;
    display: flex;
    justify-content: space-evenly;
}

.div-footer {
    width: 400px;
    color: #FFFFFF;
}

#links-footer-wrap {
    width: 214px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    margin-top: 43px;
}

#links-footer-wrap p {
    font-family: KoHo;
    font-size: 1.1em;
    font-style: normal;
    font-weight: 600;
    line-height: 25px;
    margin: 0;
    text-transform: uppercase;
}

#links-footer p a {
    text-decoration: none;
    color: #FFFFFF;
}

#logo-footer {
    display: flex;
    justify-content: center;
    align-items: center;
}

#logo-footer img {
    height: 77px;
}

#contact-footer-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 40px;
}


#contact-footer-wrap p {
    font-family: KoHo;
    font-size: 1.1em;
    font-style: normal;
    font-weight: 600;
    line-height: 25px;
    text-align: end;
    margin-bottom: 0px;
    margin-top: 4px;
}

#contact-footer-wrap #linkedin,
#contact-footer-wrap #instagram,
#contact-footer-wrap #email,
#contact-footer-wrap #whatsapp {
    text-decoration: none;
    color: #fff;
}

.cookies-msg {
    width: 80%;
    background-color: #fff;
    position: fixed;
    bottom: 2%;
    left: 50%;
    transform: translate(-50%);
    border-radius: 15px;
    z-index: 15;
    display: none;
    box-shadow: 3px 2px grey;
}

.cookies-msg.show {
    display: block;
}

.cookies-msg .cookies-txt {
    display: flex;
    align-items: center;
    text-align: justify;
    padding: 20px;
}

.cookies-msg .cookies-txt p {
    font-size: 0.9em;
    line-height: 1.2em;
}

.cookies-msg .cookies-btn {
    margin-left: 30px;
}

.cookies-msg .cookies-btn button {
    background-color: #000;
    color: #fff;
    font-weight: bold;
    font-size: 0.9em;
    padding: 8px 32px;
    cursor: pointer;
    border-radius: 8px;
}

.cookies-msg .cookies-btn button:hover {
    transform: scale(0.95);
}

/* MEDIA QUERIES */
/* MOBILE */

@media screen and (max-width: 475px) {

    body {
        width: 100vw;
        height: 800px;
    }

    /* NAVBAR MOBILE*/
    nav.navbar-expand-lg.bg-white.fixed-top {
        width: 100vw;
    }

    a.navbar-brand img {
        height: 22px;
        margin-left: 24px;
    }

    ul.navbar-nav.mb-2.mb-lg-0 {
        width: 300px;
        margin: auto;
    }

    li.nav-item a.nav-link.active {
        color: #5000FF;
        font-weight: bold;
        font-size: 24px;
        line-height: 34px;
    }

    li.nav-item a.nav-link {
        font-weight: bold;
        font-size: 24px;
        line-height: 34px;
        margin: auto;;
    }

    li.nav-item {
        text-align: center;
    }

    div#navbarTogglerDeck.navbar-collapse.justify-content-end.collapse.show {
        /* height: 800px; */
        /* background-color: #FFBC00; */
        display: flex;
        justify-content: center;
    }

    /* DECORATION VECTORS */
    .decoration {
        display: none;
    }

    #presentation .decoration-mobile {
        display: block;
    }

    #pinkPizzaMobile {
        position: absolute;
        top: 12px;
        left: 34px;
        scale: 0.9;
    }

    #vectorHalfMobile {
        /* transform: scale(0.9); */
        position: absolute;
        right: 0px;
        top: 480px;
    }

    #vectorBallOneMobile {
        position: absolute;
        scale: 0.4;
        top: 520px;
        right: 25px;
    }

    #presentation {
        width: 100vw;
        height: 746px;
    }

    #background-video-desktop {
        display: none;
    }

    #background-video-mobile {
        display: block;
        width: 360px;
        height: 700px;
    }

    #background-video-mobile img {
        object-fit: cover;
        width: 360px;
    }

    section#service1 {
        height: 1667px;
    }

    #service1-text {
        height: 302px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0px;
        /* border: solid 2px #000; */
    }

    #service1-text div {
        width: 300px;
        height: 204px;
    }

    div#service1-text div h5 {
        font-size: 1.5em;
        font-weight: 700;
        font-style: normal;
        text-align: start;
        line-height: 34px;
        margin: 0px;
    }

    #service-card-wrap {
        width: 360px;
        grid-template-columns: 1fr;
        gap: 15%;
        margin-bottom: 0;
        margin-top: 15px;
    }

    .service-card-text {
        font-family: Montserrat;
        font-weight: 500;
        font-size: 1em;
        text-align: center;
        font-style: normal;
        line-height: normal;
        color: #5000FF;
        width: 260px;
        margin-bottom: 0;
        margin-top: 30px;
    }

    /* .service-card #pictograma1,
    .service-card #pictograma2,
    .service-card #pictograma3,
    .service-card #pictograma4 {
        scale: 1.1;
    } */

    .service-card-text br {
        display: none;
    }

    section#service2 {
        width: 100vw;
    }

    div#service2-text {
        width: 280px;
        height: 34px;
    }

    #service2-text h5 {
        font-size: 1.5em;
        text-align: center;
    }

    #accordion-service {
        width: 320px;
        margin: 0;
        margin-top: 33px;
    }

    #service-accordion {
        padding-bottom: 60px;
    }

    div .accordion-item {
        width: 320px;
    }

    div.column.accordion-flush {
        width: 320px;
    }

    .accordion-body {
        width: 320px;
        color: #5000FF;
        font-size: 1em;
        font-family: Montserrat;
        font-style: normal;
        font-weight: 400;
        line-height: 26px;
        padding-left: 2px;
    }

    .accordion-button {
        line-height: 30px;
    }

    #hub {
        width: 100vw;
        height: 580px;
        padding: 0;
    }

    div#carouselDeck.carousel.slide.pointer-event {
        width: 100vw;
        height: 800px;
    }

    div.carousel-inner {
        width: 100vw;
        height: 800px;
    }

    div#div-filter1.carousel-item.active,
    div#div-filter2.carousel-item {
        width: 100vw;
        height: 800px;
    }

    img.d-block.w-100 {
        width: 100vw;
        height: 800px;
        object-fit: cover;
    }

    div.carousel-caption {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: end;
    }

    div.carousel-caption h5 {
        text-align: end;
        font-size: 1.1em;
    }

    .carousel-caption h5 br {
        display: none;
    }

    div.carousel-caption h4 {
        margin-top: 35px;
    }

    #who {
        width: 100vw;
        height: 905px;
        margin: auto;
        display: grid;
        grid-template-columns: 1fr;
    }

    #who-text {
        width: 100vw;
        height: 360px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #who-text h5 {
        width: 320px;
        height: 272px;
        font-size: 1.4em;
        line-height: 32px;
        /* margin-top: 65px; */
        margin-left: 20px;
    }

    #who-text button {
        position: absolute;
        bottom: 90px;
        margin: auto;
    }

    #who-photos #leticia {
        z-index: 2;
        position: absolute;
        top: 425px;
        left: -70px;
    }

    #who-photos #beth {
        display: none;
    }

    #who-photos #beth-corte {
        display: block;
        position: absolute;
        width: 210px;
        top: 347px;
        right: 0px;
    }

    #who-photos p {
        top: 667px;
        right: 25px;
        font-size: 1.2em;
        line-height: 26px;
    }
    
    footer {
        width: 100vw;
        height: 464px;
        flex-direction: column;
        justify-content: end;
        position: relative;
        padding: 36px;
    }

    #logo-footer img {
        position: absolute;
        top: 48px;
        left: 37px;
    }

    #links-footer {
        height: 200px;
        justify-content: end;
        align-items: end;
    }

    #links-footer-wrap {
        display: flex;
        align-items: end;
        justify-content: end;
        margin-top: 160px;
        margin-left: 60px;
    }

    #contact-footer {
        width: 270px;
        margin-bottom: 20px;
        margin-right: 20px;
    }

    #contact-footer-wrap {
        display: flex;
        align-items: end;
        margin-top: 100px;
    }

    #contact-footer-wrap p {
        line-height: 28px;
        font-size: 1.1em;
        margin-top: 4px;
    }

    .cookies-msg {
        width: 85%;
        background-color: #fff;
        position: fixed;
        bottom: 3%;
        left: 50%;
        transform: translate(-50%);
        border-radius: 15px;
        z-index: 15;
        display: none;
        box-shadow: 3px 2px grey;
    }

    .cookies-msg p {
        font-size: 0.9em;
        line-height: 1.1em;
    }

    .cookies-msg .cookies-txt {
        flex-direction: column;
    }
    
    .cookies-msg .cookies-btn {
        margin-left: 0;
    }

    .cookies-msg .cookies-btn button {
        font-size: 0.9em;
        padding: 8px 32px;
    }
}

@media (min-width: 768px) and (max-width: 1180px) and (orientation: landscape) {
    body {
        width: 100%;
        height: 100%;
    }
/* 
    #service-accordion {
        padding-bottom: 115px;
        z-index: 10;
    } */

    #who-text h5 {
        width: 402px;
        height: 320px;
        text-align: start;
        font-size: 1.6em;
        font-family: KoHo;
        font-style: normal;
        font-weight: 700;
        line-height: 35px;
        color: #5000FF;
        margin-top: 100px;
        margin-left: 120px;
        margin-right: 0;
    }

    #vectorPinkBar2 {
        display: none;
    }

    #vectorYellowBall2 {
        bottom: 455px;
        right: 646px;
        transform: scale(0.6);
    }

    #vectorYellowHalf2 {
        bottom: 30px;
        left: 400px;
        transform: scale(0.6);
    }

    #vectorBallThree {
        bottom: 20px;
        left: 550px;
        transform: scale(0.45);
    }

    #who-photos p {
        top: 140px;
        right: 45px;
    }

    #who-photos #beth {
        top: 215px;
        right: 40px;
    }

    #who-photos #leticia {
        top: 68px;
        right: 220px;
    }

    #vectorYellowBar2 {
        display: none;
    }

    #links-footer-wrap {
        margin-left: 40px;
    }

    #contact-footer-wrap {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-top: 40px;
        margin-right: 40px;
    }
}

@media screen and (max-width: 1440px) {
    body {
        width: 100vw;
        height: 100vh;
    }
}

@media screen and (max-width: 1920px) {
    .container-lg,
    .container-md,
    .container-xl,
    .container-xxl {
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
        width: 100%;
    }

    .container-sm {
        max-width: 100vw;
        width: 100%;
    }
}






/* INCLUIR ALTERAÇÃO PARA ACIMA DE 1440px NA MEDIA QUERY  */