@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@font-face {
    font-family: 'icomoon';
    src: url(fonts/icomoon.eot?o3o4d5);
    src: url('fonts/icomoon.eot?o3o4d5#iefix') format('embedded-opentype'), url(fonts/icomoon.ttf?o3o4d5) format('truetype'), url(fonts/icomoon.woff?o3o4d5) format('woff'), url('fonts/icomoon.svg?o3o4d5#icomoon') format('svg');
    font-weight: 400;
    font-style: normal;
    font-display: block
}

@font-face {
    font-family: 'blank-river';
    font-display: swap;
    src: url('./fonts/Blank River.woff2')
}

i {
    font-family: 'icomoon' !important;
    speak: never;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-phone-solid:before {
    content: "\e900"
}

.icon-location-dot-solid:before {
    content: "\e901"
}

.icon-square-facebook:before {
    content: "\e902"
}

.icon-square-instagram:before {
    content: "\e903"
}

.icon-square-whatsapp:before {
    content: "\e904"
}

.icon-whatsapp:before {
    content: "\e905"
}

.icon-arrow:before {
    content: "\ea1c"
}

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

body {
    font-family: "Montserrat", sans-serif
}

h2 {
    font-size: 2rem;
    font-weight: 400
}

ul {
    list-style: none
}

a {
    text-decoration: none;
    color: unset
}

.color-white {
    color: #fff
}

.color-purple {
    color: #42005a
}

.color-pink {
    color: #F00192
}

.content {
    max-width: 1670px;
    width: 100%;
    height: 100%;
    margin: 0 auto
}

.whats-float {
    position: fixed;
    bottom: 70px;
    right: 120px;
    color: #6FE223;
    font-size: 6rem;
    z-index: 9
}

header {
    position: sticky;
    width: 100vw;
    max-width: 100%;
    height: 36px;
    top: 0;
    background-color: #d60062;
    color: #fff;
    z-index: 9
}

header .wrapper-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0 10px
}

header img {
	width: 78px;
    height: auto;
    margin-left: 96px;
}

header .text {
    display: flex;
    align-items: center;
	gap: 18px;
    font-size: .8rem
}

header .text a {
    font-size: 1.5rem
}

main {
    height: clamp(784px, 64vw, 1000px);
    background: #620071;
    background: linear-gradient(47deg, rgb(98 0 113) 0%, rgb(57 0 71) 28%, rgb(50 0 63) 50%, rgb(64 0 78) 68%, rgb(98 0 113) 100%);
    position: relative;
    overflow: hidden
}

main .logo {
    position: absolute;
    height: 114%;
    right: 0;
    top: 0;
    transform: translateX(210px);
    filter: opacity(.06)
}

main .woman {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-38%);
    width: 60%;
    max-width: 837.31px
}

main .text-2,
main .text-1 {
    position: absolute;
    top: 50%;
    left: 8%;
    transform: translateY(-50%);
    z-index: 2
}

main .text-2 {
    left: inherit;
    right: 5%;
    text-align: end;
    font-size: clamp(1rem, 2vw, 1.4rem)
}

main .text-3 {
    position: absolute;
    z-index: 2;
    left: 8%;
    bottom: 148px;
    font-size: 1.32rem;
    font-weight: 700
}

main .text-1 .phrase-1 {
    font-size: clamp(2rem, 4vw, 3.3rem);
    font-weight: 800;
    line-height: 1
}

main .text-1 .phrase-1 .blank-river {
    font-family: 'blank-river';
    font-size: clamp(2.67rem, 6vw, 4.4rem);
    font-weight: 500
}

main .text-1 .phrase-2 {
    margin-top: 26px;
    font-size: clamp(1.45rem, 3vw, 2rem);
    line-height: 1;
    font-weight: 400
}

section.carroussel {
    height: 600px;
    background-color: #ffd9f5
}

section.carroussel .wrapper-carroussel {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    padding: 10px;
    align-items: center
}

section.carroussel .text {
    line-height: 1
}

section.carroussel .text p {
    font-size: 1.32rem
}

section.carroussel .splide {
    width: clamp(600px, 56%, 878px)
}

.splide__arrow {
    transform: translateY(-50%) scale(2) !important;
    opacity: 1 !important
}

.splide__arrow--prev {
    left: -1em !important
}

.splide__arrow--next {
    right: -1em !important
}

section.carroussel .splide__slide {
    display: flex;
    align-items: center;
    justify-content: center
}

section.carroussel .splide__slide>div {
    position: relative
}

section.carroussel .splide__slide .card-info {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 48px;
    padding: 26px;
    width: 100%
}

section.carroussel .splide__slide .card-info h3 {
    text-align: center;
    font-size: 3.2rem;
    line-height: 1
}
section.carroussel .splide__slide .card-info h3 span {
    display: inline-block;
    line-height: 1;
    text-wrap: nowrap;
}
section.carroussel .splide__slide .card-info h3 span.lower {
    font-size: 2.4rem
}

section.carroussel .splide__slide .card-info p {
    font-size: 0rem;
    line-height: 1.2;
    opacity: 0;
    transition: all .4s ease
}

section.carroussel .splide__slide img {
    display: block;
    width: clamp(200px, 20vw, 264px);
    height: auto;
    object-fit: contain;
    border-radius: 8px
}

section.carroussel .splide__slide.is-active:hover .card-info p {
    font-size: .8rem;
    opacity: 1
}

section.carroussel .splide__slide h3,
section.carroussel .splide__slide img {
    transition: transform 400ms;
    transform: scale(.72);
    transform-origin: center center
}

section.carroussel .splide__slide.is-active h3,
section.carroussel .splide__slide.is-active img {
    transform: scale(1)
}

.splide__arrow {
    overflow: hidden
}

.splide__arrow::before {
    content: "\ea1c";
    font-family: 'icomoon';
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    position: absolute;
    background-color: #d60062;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2
}

.splide__arrow--prev::before {
    transform: scaleX(-1)
}

section.itens {
    background: rgb(247,1,115);
	background: linear-gradient(47deg, rgba(247,1,115,1) 64%, rgba(253,1,141,1) 96%);
	min-height: 552px;
    position: relative
}

section.itens img.formanda {
    position: absolute;
    bottom: 0;
    right: 4%;
    pointer-events: none;
    width: 562px
}

section.itens .wrapper-itens {
    display: flex;
    gap: 8%;
    margin-left: 120px;
    padding: 72px 20px;
    position: relative;
    z-index: 2
}

section.itens .wrapper-itens img {
    width: 560px;
    transform: translateX(-7%)
}

section.itens .video {
    width: clamp(480px, 32vw, 712px);
    height: 407.18px;
    position: relative
}

section.itens .video img {
    position: absolute;
    top: -78px;
    left: -30%;
    width: 300px
}

section.itens .video iframe {
    border-radius: 28px;
    height: 100%;
    width: 100%
}

section.itens .info {
	max-width: 378px;
    text-align: end
}

section.itens h2 {
    font-size: 2.2rem;
    line-height: 1;
    margin-bottom: 20px
}

section.itens li {
    font-size: 1.45rem;
    position: relative;
    margin-right: 64px
}

section.itens .second-list {
    margin-top: 20px
}

section.itens .second-list li {
    font-size: 1.2rem
}

section.itens li::after {
    content: ' ';
    position: absolute;
    background: #42005a;
    width: 16px;
    height: 16px;
    top: 4px;
    right: -42px;
    clip-path: circle()
}

section.year {
    background-image: url(./img/all-party-banner-festa.webp);
    background-attachment: fixed;
    background-size: cover;
    height: 596px;
    position: relative
}

section.year img {
    position: absolute;
    top: -20px;
    width: 920px
}

section.year h2 {
    font-weight: 600;
    margin-bottom: 56px
}

section.year .wrapper-year {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 48px 10px 64px 10px
}

section.year .text-1 p {
    font-size: 1.45rem
}

section.year ul,
section.year li,
section.year .text {
    display: flex;
    justify-content: center;
    align-items: center
}

section.year .text {
    justify-content: end;
    flex-direction: column;
    margin-right: 6%;
    max-width: 810px
}

section.year ul {
    gap: 12%;
    align-items: start;
    text-align: center
}

section.year li {
    flex-direction: column;
    gap: 56px;
    text-wrap: nowrap;
    font-size: 1.32rem
}

section.year .circle {
    width: 96px;
    height: 96px;
    background-color: #d60062;
    clip-path: circle()
}
section.benefits {
    position: relative;
    overflow: hidden;
    background-color: #FFD9F6
}
section.benefits img {
    position: absolute;
    height: 120%;
    object-fit: contain;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
	pointer-events: none;
    filter: opacity(.1);
}
section.benefits .wrapper-benefits {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32px 10px
}
section.benefits .first {
    font-size: 1.45rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    flex: 1 1 0px;
    gap: 56px
}
section.benefits .first p {
	max-width: 572px;
}
section.benefits .whats-btn {
    color: #6FE223;
    font-size: 4rem
}

section.benefits .second {
	max-width: 716px;
    flex: 1 1 0px;
    text-align: end
}

section.benefits h2 {
    color: #300040;
    margin-bottom: 24px;
    font-weight: 800
}

section.benefits li {
    margin-right: 32px;
    margin-bottom: 20px;
    font-size: 1.12rem;
    font-weight: 500;
    position: relative
}

section.benefits li::after {
    content: '';
    position: absolute;
    top: 12px;
    right: -32px;
    width: 12px;
    height: 12px;
    background-color: #fff;
    clip-path: circle()
}

section.lead {
    background: #771190;
    background: linear-gradient(126deg, rgb(119 17 144) 0%, rgb(45 0 57) 50%, rgb(68 0 88) 86%, rgb(119 17 144) 100%)
}

section.lead .wrapper-lead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 72px 10px
}

section.lead .wrapper-lead>div {
    flex: 1 1 0%
}

section.lead iframe {
    width: clamp(480px, 48vw, 695.98px);
    height: 486.89px;
    border-radius: 26px
}

section.lead h2 {
    text-align: center;
    margin-bottom: 32px
}

section.lead .input {
    display: flex;
    gap: 8px;
    margin-bottom: 8px
}

section.lead input {
	-webkit-appearance: none;
    width: 100%;
	min-height: 48px;
    background-color: #fff;
    border: none;
    border-radius: 16px;
    padding: 12px 20px;
    font-size: 1.2rem;
    font-weight: 500;
    font-family: "Montserrat", sans-serif
}

section.lead input[type="date"] {
    flex-basis: 50%
}

section.lead input[type="date"],
section.lead input::placeholder {
    color: #c9c9c9
}

section.lead #data {
    flex-basis: 45%
}

section.lead #cidade {
    flex-basis: 65%
}

section.lead #uf {
    flex-basis: 30%
}

section.lead .btn-area {
    text-align: center;
    margin-top: 26px
}

section.lead .btn {
    font-size: 1.32rem;
    border: none;
    color: #fff;
    background-color: #ff9233;
    line-height: 1;
    padding: 8px 20px;
    border-radius: 0 8px 0 8px;
    text-wrap: nowrap;
    font-weight: 800;
    cursor: pointer
}

footer {
    background-color: #c3005a
}

footer .wrapper-footer {
	padding: 28px 10px;
    display: flex;
    justify-content: space-around;
    gap: 20px;
}

footer .logo {
    align-self: center;
    text-align: center
}

footer .logo img {
	width: 264px;
	height: auto;
    object-fit: contain;
}

footer h3 {
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 20px
}

footer p {
    line-height: 1.1
}

footer li a {
    display: flex;
    gap: 8px;
    margin-bottom: 4px
}
@media(max-width:1580px) {
    section.itens .wrapper-itens {
        gap: 6%
    }
}
@media(max-width:1420px) {
	main .text-2 {
        font-size: 1.35rem;
        transform: translateY(335%);
        right: inherit;
        left: 8%;
        text-align: start
    }
	main .text-3 {
        transform: translateY(250%)
    }
    section.itens .wrapper-itens {
        gap: 4%;
        margin-left: 20px
    }
    section.itens .video {
        width: 400px;
        height: 316px
    }
    section.itens .video img {
        top: -64px;
        left: 0%;
        width: 220px
    }
}
@media(max-width:1260px) {
    main .text-1 {
        max-width: 600px
    }
    section.carroussel .splide__slide .card-info h3 {
        font-size: 3rem
    }
    section.carroussel .splide__slide .card-info h3 span.lower {
        font-size: 2.2rem
    }
    .splide__arrow--prev {
        left: 0em !important
    }
    .splide__arrow--next {
        right: 0em !important
    }
}
@media(max-width:1200px) {
    section.itens .wrapper-itens {
        flex-direction: column-reverse;
        margin: 0;
        padding: 32px 10px;
        gap: 96px
    }
    section.itens .video img {
        top: -52px;
        left: -16%;
        width: 200px
    }
    section.itens .info {
		max-width: inherit;
        text-align: start
    }
    section.itens .video {
        width: 100%;
        max-width: 480px;
        margin: 0 auto
    }
    section.itens h2 {
        max-width: 672px;
        text-align: center;
        margin: 0 auto 48px auto
    }
    section.itens h2 br {
        display: none
    }
    
    section.itens img.formanda {
        width: 406px;
    }
}
@media(max-width:1000px) {
    .whats-float {
        bottom: 20px;
        right: 20px;
        font-size: 3.5rem
    }
    header .text span {
        display: none
    }
    header img {
        margin: 0
    }
    main .woman {
		width: 596px;
        left: 64%
    }
    section.carroussel .wrapper-carroussel {
		text-align: center;
        flex-direction: column
    }
    section.carroussel .splide__slide .card-info {
        gap: 12px
    }
    section.carroussel .splide__slide.is-active .card-info p {
        font-size: .8rem;
        opacity: 1
    }
    section.carroussel .splide__slide .card-info h3 {
        font-size: 1.6rem
    }
    section.carroussel .splide__slide .card-info h3 span.lower {
        font-size: 1.2rem
    }
    .splide__arrow--next {
        right: 2em !important
    }
    .splide__arrow--prev {
        left: 2em !important
    }
    section.year {
        height: auto;
		background-attachment: local
    }
    section.year .wrapper-year {
        flex-direction: column;
        gap: 32px
    }
    section.year .text {
        margin-right: inherit
    }
    section.year .text-1 {
        display: flex;
        align-items: center;
        gap: 64px
    }
    section.year ul {
        gap: 2%
    }
	section.benefits .first,
    section.benefits .wrapper-benefits {
        flex-direction: column-reverse;
        gap: 56px
    }
    section.benefits .second {
        text-align: start
    }
    section.benefits .second h2 {
        text-align: center
    }
    section.lead .wrapper-lead {
        flex-direction: column;
        gap: 20px
    }
    section.lead .wrapper-lead>div,
    section.lead iframe {
        width: 100%;
        max-width: 695px;
        text-align: center
    }
    section.lead iframe {
        height: 264px
    }
    footer .wrapper-footer {
        flex-wrap: wrap
    }
    footer .logo {
        flex-basis: 100%
    }
}

@media(max-width:640px) {
    main .text-1,
    main .text-2,
    main .text-3 {
        left: 2%
    }
    main .text-1 {
        transform: translateY(-132%)
    }
    main .text-2 {
        transform: translateY(0%)
    }
    section.carroussel h2 {
        font-size: 2rem;
        text-align: center
    }
	section.carroussel h2 br {
			display: none
	}
    section.carroussel .text p {
        text-align: center
    }
    section.carroussel .splide {
        width: 100%
    }
	section.itens {
		overflow: hidden	
	}
    section.itens .video img {
        top: -32px;
        left: 0%;
        width: 128px
    }
	section.itens img.formanda {
		position: relative;
		right: inherit;
		bottom: -16px;
		left: 50%;
		transform: translateX(-60%);
		height: 260px;
		object-fit: cover;
		object-position: top;
	}
    section.year ul {
        flex-direction: column;
        gap: 32px;
        align-items: center
    }
    section.year li {
        gap: 20px
    }
    section.year .text-1 {
        gap: 0;
        flex-direction: column
    }
    section.year .text-1 p {
        text-align: center
    }
    section.lead .input {
        flex-direction: column
    }
    footer .wrapper-footer {
        flex-direction: column
    }
    footer .logo img {
        width: 100%;
        max-width: 320px
    }
}
@media(max-width:380px) {
	main .woman {
	    width: 500px;
	}
}