html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
main,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline
}

article,
aside,
details,
figcaption,
figure,
hgroup,
main,
menu,
nav,
section {
    display: block
}

a:hover {
    text-decoration: none;
}

*[hidden] {
    display: none
}

body {
    line-height: 1
}

menu,
ol,
ul {
    list-style: none
}

blockquote,
q {
    quotes: none
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
    content: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

@font-face {
    font-family: SFB;
    src: url(../fonts/SFProText-Bold-xE-p46bC.ttf) format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: SFSB;
    src: url(../fonts/SFProText-Semibold-D1tiWH2i.ttf) format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: SF;
    src: url(../fonts/SFProText-Regular-Cp76WCaJ.ttf) format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: SFM;
    src: url(../fonts/SFProText-Medium-BF4E2vfJ.ttf) format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: EUK;
    src: url(../fonts/e-Ukraine-Regular-CBoDAoDM.woff2) format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: CDB;
    src: url(../fonts/ClashDisplay-Bold-DLC90PTw.otf) format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: CDSB;
    src: url(../fonts/ClashDisplay-Semibold-DtmhZ-xU.otf) format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: CD;
    src: url(../fonts/ClashDisplay-Regular-RJ1gwrr2.otf) format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: CDM;
    src: url(../fonts/ClashDisplay-Regular-RJ1gwrr2.otf) format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: RFB;
    src: url(../fonts/RFDewi-Bold-Cv2tpyAv.ttf) format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: RFSB;
    src: url(../fonts/RFDewi-Semibold-DSxOXH8u.ttf) format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: RF;
    src: url(../fonts/RFDewi-Regular-DMrs5qGy.ttf) format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: RFM;
    src: url(../fonts/RFDewi-Regular-DMrs5qGy.ttf) format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: M;
    src: url(../fonts/Manrope-Regular-BjNcpSXg.ttf) format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

html {
    font-size: 10px;
    line-height: 1;
    min-height: 100vh
}

@media only screen and (max-width: 1240px) {
    html {
        font-size: 10px
    }
}

body {
    background-color: #161616;
    font-family: CD, RF, sans-serif;
    overflow-x: hidden
}

.fix__body {
    max-width: 100vw
}

.container {
    padding: 0 30px
}

@media only screen and (max-width: 920px) {
    .container {
        padding: 0 10px
    }
}

.text_orange {
    color: #ffd86e
}

.text_green {
    color: #bfeb0c
}

span,
p {
    color: #fff
}

.submit__button {
    box-sizing: border-box;
    display: inline-flex;
    padding: 25px 40px;
    height: 67px;
    justify-content: center;
    font-family: CDB, RFB, sans-serif;
    font-weight: 600;
    border-radius: 12px;
    background-color: #bfeb0c;
    border: 1px solid #BFEB0C;
    color: #161616;
    font-size: 18px;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.submit__button:hover {
    cursor: pointer;
    box-shadow: 4px 4px 12px #bfeb0cc2;
    transition: all .22s
}

.submit__button:active {
    transform: scale(.99)
}

.slider__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px
}

@media only screen and (max-width: 1439px) {
    .slider__list {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media only screen and (max-width: 600px) {
    .slider__list {
        gap: 0;
        display: block
    }
}

div.slider__module .slick-track {
    display: flex
}

div.slider__module .slick-list {
    overflow: hidden
}

@media only screen and (max-width: 600px) {
    div.slider__module .slick-list {
        padding: 0 20% 0 0
    }
}

div.slider__module .slick-slide {
    border-radius: 10px;
    border: 1px solid #161616;
    overflow: hidden
}

@media only screen and (max-width: 920px) {
    div.slider__module .slick-slide {
        margin-right: 0
    }
}

@media only screen and (max-width: 600px) {
    div.slider__module .slick-slide {
        margin-right: 10px
    }
}

div.slider__module .slick-dots {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 6px
}

div.slider__module .slick-dots>li {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center
}

div.slider__module .slick-dots>li.slick-active {
    border: 1px solid #BFEB0C
}

div.slider__module .slick-dots>li.slick-active>button {
    background-color: #bfeb0c;
    border-color: #bfeb0c
}

div.slider__module .slick-dots button {
    font-size: 0;
    width: 10px;
    height: 10px;
    padding: 0;
    border: 1px solid #FFFFFF;
    border-radius: 50%;
    background-color: transparent
}

.top__block--wrapper {
    padding: 16px;
    text-align: center;
    height: 100vh;
    background: url(../images/BGC.jpg) no-repeat;
    background-size: cover;
    background-position: right;
    display: grid;
    gap: 16px;
    grid-template-rows: 50px 1fr
}

@media only screen and (max-width: 1536px) {
    .top__block--wrapper {
        height: 864px
    }
}

@media only screen and (max-width: 1366px) {
    .top__block--wrapper {
        height: 768px
    }
}

@media only screen and (max-width: 920px) {
    .top__block--wrapper {
        height: 85vh
    }
}

@media only screen and (max-width: 840px) {
    .top__block--wrapper {
        padding: 13px 10px;
        background-size: cover;
        background-position: 78%;
        min-height: 80vh
    }
}

@media only screen and (max-width: 600px) {
    .top__block--wrapper {
        display: grid;
        padding: 10px;
        background-position: 80%;
        align-items: end;
        margin-bottom: 80px
    }
}

.logo {
    display: inline-block;
    box-sizing: border-box
}

.logo>img {
    max-width: 35px;
    object-fit: cover
}

.top__price {
    display: flex;
    flex-direction: column;
    color: #fff;
    leading-trim: both;
    text-edge: cap;
    font-family: CDB, RFB, sans-serif;
    font-size: 82px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase
}

@media only screen and (max-width: 600px) {
    .top__price {
        font-size: 56px;
    }
}

.top__prices {
    display: flex;
    gap: 13px;
    align-items: center;
    color: #fff
}

@media only screen and (max-width: 600px) {
    .top__block-button {
        order: 2;
    }
    .top__prices {
        order: 1;
    }
}

.top__old_price {
    font-size: 20px;
    color: #ffffffb3;
    text-decoration: line-through
}

.top__old_price__label {
    font-family: CD, RF, sans-serif;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 121.5%;
    text-transform: uppercase;
}

.top__old_price__wrapper {
    display: grid;
    gap: 8px
}

.top-button__container {
    display: flex;
    align-items: center;
    gap: 45px
}

.top__regular-text {
    font-family: "Clash Display", sans-serif;
    font-size: 18px;
    line-height: 121.5%;
    text-transform: uppercase;
}

.top__regular-price {
    font-family: "Clash Display", sans-serif;
    font-size: 42px;
    font-weight: 700;
    line-height: 121.5%;
}

@media only screen and (max-width: 600px) {
    .top-button__container {
        flex-direction: column;
        gap: 24px;
    }
}

.top__block {
    display: grid;
    gap: 24px
}

.top__block h1 {
    color: #fff;
    font-size: 8.6rem;
    text-transform: uppercase;
    display: inline-flex;
    width: 100%;
    gap: 24px;
    white-space: nowrap;
    font-family: CDB, RFB, sans-serif
}

@media only screen and (max-width: 840px) {
    .top__block h1 {
        display: flex;
        flex-direction: column;
        text-align: left;
        font-size: 4.2rem
    }
}

@media only screen and (max-width: 600px) {
    .top__block h1 {
        width: 100%;
        font-size: 42px;
        gap: 0
    }
}

.top__block p {
    font-size: 2.6rem;
    line-height: 4.6rem;
    font-family: M, RF, sans-serif;
    text-align: left
}

@media only screen and (max-width: 920px) {
    .top__block p {
        font-size: 1.8rem;
        line-height: 31px
    }

    .top__block p>br {
        display: none
    }
}

.top__block-button {
    width: 50%;
}

@media only screen and (max-width: 600px) {
    .top__block-button {
        width: 100%;
        font-size: 18px;
        display: flex;
        padding: 10px 5px;
        align-items: center
    }
}

.top__content {
    display: grid;
    position: relative;
    margin-top: -190px
}

@media only screen and (max-width: 920px) {
    .top__content {
        margin-top: 0
    }
}

.top__container {
    max-width: 818px;
    display: grid;
    gap: 45px;
    padding-left: 300px;
    align-self: center
}

@media only screen and (max-width: 1768px) {
    .top__container {
        padding-left: 220px
    }
}

@media only screen and (max-width: 1240px) {
    .top__container {
        padding-left: 100px
    }
}

@media only screen and (max-width: 1440px) {
    .top__container {
        padding-left: 160px
    }
}

@media only screen and (max-width: 1080px) {
    .top__container {
        justify-self: center;
        padding: 0
    }
}

.timer__container {
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, .48);
    box-shadow: 0 0 8px #0000000a;
    -webkit-backdrop-filter: blur(13.6999998093px);
    backdrop-filter: blur(13.6999998093px);
    padding: 20px 40px
}

@media only screen and (max-width: 425px) {
    .timer__container {
        padding: 10px 15px
    }
}

@media only screen and (max-width: 355px) {
    .timer__container {
        padding: 5px
    }
}

@media only screen and (max-width: 920px) {
    .timer__container {
        width: 100%;
        flex-direction: column;
        gap: 0;
        align-items: center;
        padding: 12px
    }
}

@media only screen and (max-width: 600px) {
    .timer__container {
        width: auto
    }
}

.timer__info_text {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 33px
}

@media only screen and (max-width: 650px) {
    .timer__info_text {
        gap: 4px
    }
}

@media only screen and (max-width: 1279px) {
    .timer__info_text {
        justify-content: center
    }
}

.timer__info_text>img {
    height: 42px
}

.timer__info_text>span {
    color: #fff;
    text-transform: initial;
    font-family: CD, RF, sans-serif;
    font-size: 3.2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 108.333%
}

@media only screen and (max-width: 1523px) {
    .timer__info_text>span {
        font-size: 2.8rem
    }
}

@media only screen and (max-width: 1279px) {
    .timer__info_text>span {
        font-size: 3rem
    }
}

@media only screen and (max-width: 650px) {
    .timer__info_text>span {
        font-size: 18px
    }
}

.quote {
    padding: 35px 0 152px;
    display: grid;
    gap: 23px
}

@media only screen and (max-width: 920px) {
    .quote {
        padding-bottom: 120px
    }
}

.quote>p {
    font-size: 2rem;
    line-height: 4.7rem;
    font-style: italic;
    font-family: M, RF, sans-serif;
    margin: 0 auto;
    text-align: center
}

@media only screen and (max-width: 1100px) {
    .quote>p {
        width: 100%
    }
}

@media only screen and (max-width: 920px) {
    .quote>p {
        width: auto;
        font-size: 2.1rem
    }
}

.quote>img {
    justify-self: center;
    width: 135px;
    height: 74px
}

.invitation {
    box-sizing: border-box;
    width: 100%;
    aspect-ratio: 16/9;
    background: linear-gradient(180deg, #161616 0%, rgba(22, 22, 22, 0.09) 60%),
        linear-gradient(180deg, rgba(22, 22, 22, 0.09) 63%, #161616 100%),
        url(../images/background_video.png) no-repeat;
    background-size: 100% 100%;
    padding: 0 30px;
}

.invitation-cover {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    position: relative;
    width: 100%;
    height: 100%;
}

.invitation-cover__play {
    display: flex;
    align-items: center;
    gap: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.invitation-cover__play-text {
    color: #BFEB0C;
    font-family: CDSB, RFSB, sans-serif;
    font-size: 18px;
    white-space: nowrap;
}

.invitation-cover__letter {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    gap: 25px;
    width: 630px;
    max-width: 50%;
    margin-bottom: 80px;
    margin-right: 30px;
}

.invitation-cover__letter-text {
    color: #FFF;
    font-family: "Suisse Int'l", CD, RF, sans-serif;
    font-size: 18px;
    line-height: 1.55;
    font-style: italic;
}

.invitation-video {
    width: calc(100% + 60px);
    height: 100%;
    margin: 0 -30px;
}

.margin-dark {
    box-sizing: border-box;
    width: 100%;
    height: 62px;
    background-color: #161616;
}

@media only screen and (max-width: 1400px) {
    .invitation-cover__letter {
        margin-bottom: 10px;
        width: 520px;
    }
    .invitation-cover__letter-text {
        font-size: 16px;
    }
}

@media only screen and (max-width: 1100px) {
    .invitation-cover__letter {
        margin-bottom: 0;
    }
    .invitation-cover__letter > img {
        transform: scale(0.7);
    }
    .invitation-cover__letter-text {
        font-size: 13px;
    }
}

@media only screen and (max-width: 900px) {
    .invitation-cover__letter {
        gap: 10px;
        max-width: 100%;
    }
}

@media only screen and (max-width: 750px) {
    .invitation-cover__letter {
        gap: 0px;
        width: unset;
        margin-right: unset;
    }
}

@media only screen and (max-width: 600px) {
    .invitation {
        aspect-ratio: 9/16;
        background: linear-gradient(180deg, #161616 0%, rgba(22, 22, 22, 0.09) 60%),
        linear-gradient(180deg, rgba(22, 22, 22, 0.09) 63%, #161616 100%),
        url(../images/background_video_mobile.png) no-repeat;
        background-size: 100% 100%;
    }
    .invitation-cover__letter {
        gap: 15px;
    }
    .margin-dark {
        height: 142px;
    }
}

.slider {
    min-width: 0;
    position: relative;
    padding: 0 80px;
    margin-bottom: 35px
}

@media only screen and (max-width: 1132px) {
    .slider {
        padding: 0 10px
    }
}

@media only screen and (max-width: 920px) {
    .slider {
        padding: 0
    }
}

.slider:last-child {
    margin-bottom: 0
}

.slider__container {
    margin-bottom: 110px;
    display: grid;
    justify-content: center
}

@media only screen and (max-width: 500px) {
    .slider__container {
        margin-bottom: 20px
    }
}

.slider__container>h2 {
    color: #fff;
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    font-family: CDB, RFB, sans-serif;
    font-size: 3.6rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    max-width: 1400px;
    margin: 0 auto 64px
}

@media only screen and (max-width: 920px) {
    .slider__container>h2 {
        margin-bottom: 32px;
        max-width: auto;
        font-size: 2.1rem;
        text-align: left
    }
}

@media only screen and (max-width: 920px) {
    #slider2 {
        display: none
    }
}

.slide {
    position: relative
}

@media only screen and (max-width: 768px) {
    .slide {
        /*height: 200px*/
    }
}

/*.slide:after {*/
/*    content: url(../img/new_generation_main/play_better.svg);*/
/*    width: 80px;*/
/*    height: 80px;*/
/*    position: absolute;*/
/*    left: 50%;*/
/*    top: 50%;*/
/*    transform: translate(-50%, -50%)*/
/*}*/

.slide__play {
    width: 80px!important;
    height: 80px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.slide>img {
    width: 100%
}

@media only screen and (max-width: 768px) {
    .slide>img {
        aspect-ratio: 16/9
    }
}

.btn-module {
    width: 50px;
    height: 50px;
    border: 1px solid rgba(255, 255, 255, .7);
    background-color: #161616;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

@media only screen and (max-width: 920px) {
    .btn-module {
        display: none
    }
}

.btn-module:hover {
    cursor: pointer;
    background-color: #bfeb0c;
    box-shadow: 4px 4px 12px #bfeb0cc2;
    transition: all .22s
}

.btn-module:hover>svg>path {
    fill: #161616
}

.btn_inverse.second.prev-btn {
    right: 0;
    left: unset
}

.btn_inverse.second.prev-btn>svg {
    transform: rotate(0)
}

.prev-btn {
    left: 0
}

.prev-btn>svg {
    transform: rotate(180deg)
}

.next-btn {
    right: 0
}

.movie__border {
    border-radius: 5px;
    background: #979797;
    box-shadow: 0 0 8px #0000000a;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    position: absolute;
    width: 9px
}

.movie__border_wrapper {
    position: absolute;
    height: 132px;
    left: 0;
    top: 0;
    width: 9px;
    border-radius: 9px;
    background: linear-gradient(180deg, #979797, #31313100);
    transform: rotate(180deg)
}

@media only screen and (max-width: 800px) {
    .movie__border_wrapper {
        height: 358px
    }
}

@media only screen and (max-width: 576px) {
    .movie__border_wrapper {
        height: 206px
    }
}

.movie__wrapper {
    padding: 0 60px;
    margin-bottom: 110px
}

@media only screen and (max-width: 1440px) {
    .movie__wrapper {
        padding: 0 30px
    }
}

@media only screen and (max-width: 1132px) {
    .movie__wrapper {
        padding: 0 10px
    }
}

.movie__container {
    display: grid;
    position: relative
}

.movie__block {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding-bottom: 132px
}

@media only screen and (max-width: 800px) {
    .movie__block {
        display: grid;
        grid-template-rows: 1fr;
        gap: 16px;
        width: 100%;
        padding: 0 0 35px;
        margin-bottom: 35px
    }
}

.movie__block.movie1 {
    padding-top: 132px
}

@media only screen and (max-width: 800px) {
    .movie__block.movie1 {
        padding: 0
    }
}

.movie__block.movie1:after {
    top: 180px
}

@media only screen and (max-width: 800px) {
    .movie__block.movie1:after {
        top: 403px;
        bottom: -390px
    }
}

@media only screen and (max-width: 576px) {
    .movie__block.movie1:after {
        top: 248px;
        bottom: -242px
    }
}

.movie__block.movie1:before {
    top: 132px
}

@media only screen and (max-width: 800px) {
    .movie__block.movie1:before {
        top: 355px;
        bottom: 0
    }
}

@media only screen and (max-width: 576px) {
    .movie__block.movie1:before {
        top: 203px
    }
}

.movie__block.movie3 {
    padding: 0
}

.movie__block.movie3:after {
    position: absolute;
    left: 0;
    top: 48px;
    bottom: 0;
    width: 9px;
    border-radius: 9px;
    background: linear-gradient(180deg, #979797, #31313100)
}

@media only screen and (max-width: 800px) {
    .movie__block.movie3:after {
        display: block;
        top: 403px
    }
}

@media only screen and (max-width: 576px) {
    .movie__block.movie3:after {
        top: 260px
    }
}

.movie__block:before {
    content: "";
    background-image: url(../images/circle-border_better.png);
    background-size: cover;
    object-fit: contain;
    position: absolute;
    top: 0;
    left: -17px;
    width: 45px;
    height: 45px
}

@media only screen and (max-width: 800px) {
    .movie__block:before {
        top: 356px
    }
}

@media only screen and (max-width: 576px) {
    .movie__block:before {
        top: 206px
    }
}

.movie__block:after {
    content: "";
    border-radius: 5px;
    background: #979797;
    box-shadow: 0 0 8px #0000000a;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    width: 9px;
    position: absolute;
    top: 48px;
    bottom: 0
}

@media only screen and (max-width: 800px) {
    .movie__block:after {
        bottom: -394px;
        top: 406px
    }
}

@media only screen and (max-width: 576px) {
    .movie__block:after {
        bottom: -245px;
        top: 253px
    }
}

.movie__info {
    display: flex;
    flex-direction: column;
    gap: 28px;
    max-width: 730px;
    margin: 0 auto
}

@media only screen and (max-width: 1700px) {
    .movie__info {
        max-width: 500px
    }
}

@media only screen and (max-width: 1240px) {
    .movie__info {
        max-width: 350px
    }
}

@media only screen and (max-width: 1132px) {
    .movie__info {
        max-width: 350px
    }
}

@media only screen and (max-width: 800px) {
    .movie__info {
        grid-row: 2;
        max-width: 100%;
        padding-left: 40px;
        margin: 0;
        grid-row: 2/3
    }
}

@media only screen and (max-width: 576px) {
    .movie__info {
        max-width: -290px
    }
}

.movie__info>h3 {
    font-family: CDB, RFB, sans-serif;
    font-size: 3.6rem;
    line-height: 1;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1.3px;
}

@media only screen and (max-width: 1240px) {
    .movie__info>h3 {
        font-size: 2rem
    }
}

@media only screen and (max-width: 768px) {
    .movie__info>h3 {
        font-size: 2.1rem
    }
}

.movie__info>p {
    font-size: 1.9rem;
    line-height: 170%;
    color: #fff;
    font-family: M, RF, sans-serif
}

@media only screen and (max-width: 1240px) {
    .movie__info>p {
        font-size: 1.7rem
    }
}

@media only screen and (max-width: 768px) {
    .movie__info>p {
        font-size: 1.4rem;
        color: #fff
    }
}

@media only screen and (max-width: 800px) {
    .movie__img {
        justify-self: center;
        grid-row: 1/2
    }
}

@media only screen and (max-width: 600px) {
    .movie__img {
        justify-self: end
    }
}

.movie__img>img {
    max-width: 700px;
}

@media only screen and (max-width: 1132px) {
    .movie__img>img {
        height: 250px;
        aspect-ratio: 16/9
    }
}

@media only screen and (max-width: 920px) {
    .movie__img>img {
        height: 200px;
        aspect-ratio: 16/9
    }
}

@media only screen and (max-width: 800px) {
    .movie__img>img {
        max-width: 100%;
        height: 350px
    }
}

@media only screen and (max-width: 700px) {
    .movie__img>img {
        max-width: 100%;
        max-height: 300px;
        height: 100%
    }
}

@media only screen and (max-width: 576px) {
    .movie__img>img {
        max-width: 310px;
        height: 200px
    }
}

.offer {
    position: relative;
    padding: 150px 30px 0;
    margin-bottom: 79px
}

@media only screen and (max-width: 920px) {
    .offer {
        padding-top: 120px
    }
}

@media only screen and (max-width: 600px) {
    .offer {
        padding: 120px 10px 0;
        margin-bottom: 30px
    }
}

.offer>h2 {
    margin-bottom: 30px;
    color: #fff;
    text-align: center;
    font-family: CDB, RFB, sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 62%;
    text-transform: uppercase
}

@media only screen and (max-width: 920px) {
    .offer>h2 {
        font-size: 2.1rem
    }
}

.offer__icon {
    position: absolute;
    top: -58px;
    left: 50%;
    width: 124px;
    height: 124px;
    transform: translate(-50%);
    z-index: 2
}

.offer_decoration {
    position: absolute;
    left: -39px;
    top: 50%;
    transform: translatey(-50%);
    z-index: 1
}

.offer_arrow {
    position: relative;
    z-index: 2
}

.offer_bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 490px;
    opacity: .3;
    background-image: linear-gradient(180deg, #45454e, #23232b00);
    background-size: contain
}

.offer__container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 20px;
    row-gap: 30px
}

@media only screen and (max-width: 1439px) {
    .offer__container {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media only screen and (max-width: 600px) {
    .offer__container {
        grid-template-columns: 1fr;
        gap: 8px
    }
}

.offer__card {
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, .48);
    background: linear-gradient(79deg, #fdfdfd05 -1%, #fdfdfd0f 70.11%);
    box-shadow: 0 0 8px #0000000a;
    -webkit-backdrop-filter: blur(13.6999998093px);
    backdrop-filter: blur(13.6999998093px);
    padding: 30px 50px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center
}

.offer__card_circle {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 2px solid #FFD86E
}

.offer__card-info {
    font-family: CDSB, RFSB, sans-serif;
    font-size: 2.4rem;
    font-style: normal;
    font-weight: 600;
    line-height: 134%;
    text-align: center
}

@media only screen and (max-width: 920px) {
    .offer__card-info {
        font-size: 2rem
    }
}

.price {
    padding: 0 30px;
    margin-bottom: 110px
}

@media only screen and (max-width: 600px) {
    .price {
        padding: 0 10px
    }
}

.price__wrapper {
    border-radius: 20px;
    background: linear-gradient(180deg, #212121 5.02%, #1b1b1b 39.38%, #080808 87.9%, #000 106.09%);
    padding: 40px
}

@media only screen and (max-width: 920px) {
    .price__wrapper {
        border-color: red;
        padding: 0 10px;
        max-width: auto
    }
}

@media only screen and (max-width: 600px) {
    .price__wrapper {
        padding: 0
    }
}

.price__container {
    display: grid;
    gap: 25px;
    grid-template-columns: 1fr 1fr
}

@media only screen and (max-width: 1279px) {
    .price__container {
        display: flex;
        flex-direction: column-reverse
    }
}

.price__info_top,
.price__info_top-regular {
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, .2)
}

.price__info_top-regular {
    display: flex;
    align-items: center;
    justify-content: center;
}

.price__button {
    font-family: CDB, RFB, sans-serif;
    font-size: 2.4rem;
    height: 95px;
    align-items: center
}

.price__button--container {
    display: grid;
    gap: 18px;
    margin-bottom: 25px
}

.price__button--container>span {
    font-family: CD, RF, sans-serif;
    font-size: 1.4rem;
    color: #ffffffb3;
    text-align: center
}

.price__info_top {
    display: flex;
    align-items: center;
    justify-content: flex-start
}

.price__info_bottom {
    display: grid;
    gap: 18px;
    text-align: center
}

.price__info_bottom>p {
    color: #fff;
    text-align: center;
    font-family: "Suisse Int'l", CD, RF, sans-serif;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 170%;
    text-transform: uppercase;
}

.price__old {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-right: 50px
}

@media only screen and (max-width: 600px) {
    .price__old {
        margin: 0
    }
}

.price__special {
    display: flex;
    flex-direction: column;
    text-align-last: left;
    margin-right: 50px
}

.price__regular {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-right: 50px;
}

@media only screen and (max-width: 650px) {
    .price__special,
    .price__regular {
        margin-right: 0
    }
}

.price__old_label {
    color: #fff;
    font-family: CD, RF, sans-serif;
    font-size: 1.8rem;
    font-style: normal;
    font-weight: 400;
    line-height: 121.5%;
    text-transform: uppercase
}

@media only screen and (max-width: 600px) {
    .price__old_label {
        font-size: 16px
    }
}

.price__old_value {
    color: #ffffffb3;
    font-family: CD, RF, sans-serif;
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 121.5%;
    text-decoration: line-through
}

@media only screen and (max-width: 600px) {
    .price__old_value {
        font-size: 32px
    }
}

.top-price__special_label {
    color: #fff;
    font-family: CDB, RFB, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    border-radius: 8px;
    background: #c80000;
    box-shadow: 4px 4px 5.7px #00000069;
    padding: 10px;
    max-width: fit-content;
    display: inline-flex;
    white-space: nowrap;
    letter-spacing: 1px;
}

@media only screen and (max-width: 600px) {
    .top-price__special_label {
        font-size: 10px;
        padding: 8px;
    }
}

.price__special_label {
    color: #fff;
    leading-trim: both;
    text-edge: cap;
    font-family: CDB, RFB, sans-serif;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    border-radius: 8px;
    background: #c80000;
    box-shadow: 4px 4px 5.7px #00000069;
    padding: 8px 10px;
    max-width: fit-content;
    display: inline-flex;
    white-space: nowrap;
    gap: 3px;
    letter-spacing: 1px;
}

.price__regular_label {
    font-family: "Clash Display", sans-serif;
    font-size: 28px;
    line-height: 121.5%;
    text-transform: uppercase;
}

@media only screen and (max-width: 650px) {
    .price__special_label {
        position: relative;
        top: 5px;
        transform: rotate(-10deg);
        font-size: 10px
    }
}

@media only screen and (max-width: 650px) {
    .price__special_label span {
        display: none
    }
}

.price__special_value {
    color: #fff;
    text-align: center;
    font-family: CDB, RFB, sans-serif;
    font-size: 9.6rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -2.88px;
    text-transform: uppercase
}

@media only screen and (max-width: 650px) {
    .price__special_value {
        font-size: 52px;
        text-align: right
    }
}

.price__icons {
    text-align: right;
    max-width: fit-content;
    display: grid;
    grid-template-columns: 85px 125px;
    gap: 9px;
    row-gap: 12px;
    align-items: center;
    line-height: 1.8rem;
    margin-left: auto
}

@media only screen and (max-width: 650px) {
    .price__icons {
        display: none
    }
}

.last__container {
    border-radius: 20px;
    background: linear-gradient(180deg, #212121 5.02%, #1b1b1b 39.38%, #080808 87.9%, #000 106.09%);
    padding: 40px;
    margin-bottom: 50px;
}

@media only screen and (max-width: 600px) {
    .last__container {
        padding: 10px
    }
}

.last__container .price__info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px
}

@media only screen and (max-width: 600px) {
    .last__container .price__info {
        grid-template-columns: 1fr;
        gap: 25px
    }
}

.last__container .price__info_top,
.last__container .price__info_top-regular {
    border-color: transparent;
    padding: 0;
    margin: 0;
    justify-content: flex-start
}

@media only screen and (max-width: 600px) {
    .last__container .price__info_top {
        justify-content: space-between;
        border-bottom: 1px solid rgba(255, 255, 255, .2);
        padding-bottom: 25px
    }
}

.last__container .price__info_top .price__icons {
    margin-left: auto
}

@media only screen and (max-width: 1279px) {
    .last__container .price__info_top .price__icons {
        display: none
    }
}

.last__container .price__info_bottom {
    display: flex;
    justify-content: end;
    flex-direction: column
}

footer.footer {
    margin-top: 110px
}

.footer {
    font-family: EUK, sans-serif
}

.footer__top {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 52px
}

@media only screen and (max-width: 1080px) {
    .footer__top {
        display: flex;
        flex-direction: column;
        gap: 30px;
        align-items: center
    }
}

.footer .nav {
    display: flex;
    gap: 40px
}

@media only screen and (max-width: 1080px) {
    .footer .nav {
        order: 3
    }
}

@media only screen and (max-width: 800px) {
    .footer .nav {
        flex-direction: column;
        gap: 15px;
        align-items: center
    }
}

.footer .nav>li:hover>a {
    color: #fff;
    transition: all .22s ease-in-out
}

.footer .nav>li>a {
    text-decoration: none;
    color: #ffffffb3;
    font-size: 1.2rem;
    font-family: CDB, RFB, sans-serif
}

.footer__logo {
    text-align: center
}

@media only screen and (max-width: 1080px) {
    .footer__logo {
        order: 1
    }
}

.footer__logo>img {
    position: relative;
    top: -50%
}

.footer__social {
    display: flex;
    gap: 4px;
    justify-self: end
}

@media only screen and (max-width: 1080px) {
    .footer__social {
        order: 2
    }
}

.footer__social>a {
    display: inline-flex;
    width: 38px;
    height: 38px;
    padding: 10px;
    border-radius: 12px;
    background: #87878733;
    -webkit-backdrop-filter: blur(4.9000000954px);
    backdrop-filter: blur(4.9000000954px);
    font-family: EUK, sans-serif;
    font-weight: 700
}

@media only screen and (max-width: 800px) {
    .footer__social>a {
        width: 32px;
        height: 32px;
        padding: 8px;
        justify-content: center;
        align-items: center
    }
}

.footer__bottom {
    display: grid;
    gap: 15px;
    justify-content: center;
    padding-bottom: 20px
}

.footer__bottom>p,
.footer__bottom a {
    text-align: center;
    font-weight: 300;
    font-size: 1.2rem;
    font-family: EUK, sans-serif;
    text-decoration: none;
    color: #ffffffb3
}

.footer__links {
    display: flex;
    gap: 15px
}

@media only screen and (max-width: 800px) {
    .footer__links {
        flex-direction: column
    }
}

.timer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 74px;
    line-height: 0;
    font-family: CDB, RFB, sans-serif;
    font-size: 8.9rem;
    text-transform: uppercase;
    box-sizing: border-box
}

@media only screen and (max-width: 1523px) {
    .timer {
        font-size: 4.4em;
        gap: 37px
    }
}

@media only screen and (max-width: 1279px) {
    .timer {
        font-size: 6.4rem
    }
}

@media only screen and (max-width: 920px) {
    .timer {
        font-size: 3.6rem
    }
}

@media only screen and (max-width: 600px) {
    .timer {
        gap: 30px
    }
}

.timer__info {
    font-family: CDM, RFM, sans-serif;
    font-size: 2.8rem;
    text-align: left;
    line-height: 1.8rem;
    color: #fff;
    font-weight: 500;
    justify-self: center;
    grid-column: 1/3
}

@media only screen and (max-width: 1523px) {
    .timer__info {
        font-size: 2rem
    }
}

@media only screen and (max-width: 1279px) {
    .timer__info {
        font-size: 2.4rem
    }
}

@media only screen and (max-width: 600px) {
    .timer__info {
        font-size: 12px
    }
}

.timer * {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    cursor: default
}

.flip-clock {
    display: grid;
    grid-template-columns: repeat(2, 83px);
    gap: 7px;
    row-gap: 30px;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    perspective: 1000px
}

@media only screen and (max-width: 1523px) {
    .flip-clock {
        row-gap: 15px;
        grid-template-columns: repeat(2, 41px)
    }
}

@media only screen and (max-width: 1279px) {
    .flip-clock {
        row-gap: 25px;
        grid-template-columns: repeat(2, 61px)
    }
}

@media only screen and (max-width: 600px) {
    .flip-clock {
        gap: 2px;
        row-gap: 11px;
        grid-template-columns: repeat(2, 28px)
    }
}

.digit {
    position: relative;
    justify-self: center;
    width: 83px;
    height: 109px;
    background-image: linear-gradient(0deg, #262626 9.36%, #505050 211.23%);
    box-shadow: 0 0 2px 1px #0000001a
}

@media only screen and (max-width: 1523px) {
    .digit {
        width: 41px;
        height: 54px
    }
}

@media only screen and (max-width: 1279px) {
    .digit {
        width: 61px;
        height: 74px
    }
}

@media only screen and (max-width: 650px) {
    .digit {
        width: 28px;
        height: 41px
    }
}

.digit-left {
    margin-right: 1px
}

.digit-right {
    margin-left: 1px
}

.digit:before,
.digit:after {
    position: absolute;
    z-index: 0;
    display: flex;
    justify-content: center;
    width: 83px;
    height: 50%;
    overflow: hidden
}

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

    .digit:before,
    .digit:after {
        width: 41px
    }
}

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

    .digit:before,
    .digit:after {
        width: 61px
    }
}

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

    .digit:before,
    .digit:after {
        width: 28px
    }
}

.digit:before {
    content: attr(data-digit-before);
    bottom: 0;
    align-items: flex-start
}

.digit:after {
    content: attr(data-digit-after);
    top: 0;
    align-items: flex-end
}

.card {
    position: relative;
    z-index: 1;
    width: 83px;
    height: 50%;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: bottom;
    -moz-transform-origin: bottom;
    transform-origin: bottom;
    -webkit-transform: rotateX(0);
    -moz-transform: rotateX(0);
    transform: rotateX(0);
    transition: transform .7s ease-in-out
}

@media only screen and (max-width: 1523px) {
    .card {
        width: 41px
    }
}

@media only screen and (max-width: 1279px) {
    .card {
        width: 61px
    }
}

@media only screen and (max-width: 650px) {
    .card {
        width: 28px
    }
}

.card.flipped {
    transform: rotateX(-180deg)
}

.card-face {
    position: absolute;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden
}

.card-face-front {
    align-items: flex-end
}

.card-face-back {
    align-items: flex-start;
    transform: rotateX(-180deg)
}

.digit:before,
.digit:after,
.card-face-front,
.card-face-back {
    background: #505050;
    color: #fff
}

.digit,
.digit:before,
.digit:after,
.card,
.card-face {
    border-radius: 4px
}

.digit:before,
.card-face-back {
    background: #505050;
    color: #fff;
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.digit:after,
.card-face-front {
    background: #505050;
    color: #fff;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.digit-left,
.digit-left:before,
.digit-left:after,
.digit-left .card,
.digit-left .card-face {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.digit-right,
.digit-right:before,
.digit-right:after,
.digit-right .card,
.digit-right .card-face {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.border {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 100%;
    height: 1px;
    background-color: #282828
}

/* Estilos Gerais para Dispositivos Móveis */

/* Ajuste de layout */
@media (max-width: 768px) {
  .container {
    width: 100%; /* Ajusta a largura do contêiner para telas pequenas */
    padding: 0 10px; /* Adiciona um pouco de padding para evitar que o conteúdo toque as bordas */
  }

  .header, .footer {
    text-align: center; /* Centraliza o texto no cabeçalho e rodapé */
  }

  .nav {
    display: block; /* Exibe a navegação em uma coluna única */
  }

  .nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .nav li {
    margin: 10px 0; /* Espaço entre os itens de navegação */
  }

  .main-content {
    flex-direction: column; /* Alinha o conteúdo principal em uma coluna */
  }

  .sidebar {
    display: none; /* Oculta a barra lateral em telas pequenas */
  }

  .button {
    width: 100%; /* Botões ocupam toda a largura disponível */
    box-sizing: border-box; /* Inclui padding e bordas no cálculo da largura */
  }

  .image {
    width: 100%; /* Imagens ocupam toda a largura do contêiner */
    height: auto; /* Mantém a proporção das imagens */
  }

  .form-group {
    margin-bottom: 20px; /* Espaço entre os grupos de formulário */
  }

  .form-group label {
    display: block; /* Exibe os rótulos de formulário em uma nova linha */
    margin-bottom: 5px; /* Espaço entre o rótulo e o campo do formulário */
  }

  .form-group input, .form-group textarea {
    width: 100%; /* Campos de formulário ocupam toda a largura disponível */
    box-sizing: border-box;
    padding: 10px; /* Adiciona padding para uma melhor usabilidade */
  }
}

/* Estilos para Dispositivos Muito Pequenos */
@media (max-width: 480px) {
  .header, .footer {
    font-size: 14px; /* Reduz o tamanho da fonte no cabeçalho e rodapé */
  }

  .nav li {
    font-size: 16px; /* Ajusta o tamanho da fonte dos itens de navegação */
  }

  .button {
    padding: 10px; /* Ajusta o padding dos botões para telas menores */
  }

  .image {
    margin: 0; /* Remove margens das imagens */
  }

  .form-group {
    margin-bottom: 15px; /* Reduz o espaço entre os grupos de formulário */
  }
}

/* Estilos Gerais para Dispositivos Móveis */

/* Ajuste para telas menores que 768px */
@media (max-width: 768px) {
  .top__content {
    text-align: center; /* Centraliza o texto e o conteúdo */
    padding: 20px; /* Adiciona padding para garantir que o conteúdo não toque as bordas */
  }

  .top__container {
    display: flex;
    flex-direction: column; /* Organiza o conteúdo em uma coluna */
    align-items: center; /* Centraliza o conteúdo dentro do container */
  }

  .top__block {
    width: 100%; /* Faz com que o bloco ocupe toda a largura disponível */
    box-sizing: border-box; /* Inclui padding e bordas no cálculo da largura */
    padding: 10px; /* Adiciona padding para espaçar o conteúdo */
  }

  .top__block h1 {
    font-size: 24px; /* Ajusta o tamanho da fonte do título */
    line-height: 1.2; /* Ajusta o espaçamento entre linhas */
    margin: 0 0 10px; /* Remove margem superior e adiciona margem inferior */
  }

  .top__block p.big {
    font-size: 16px; /* Ajusta o tamanho da fonte do parágrafo */
    margin: 0 0 20px; /* Remove margem superior e adiciona margem inferior */
  }

  .top-button__container {
    margin-top: 20px; /* Adiciona margem superior ao container do botão */
  }

  .top__block-button {
    display: inline-block; /* Faz com que o botão ocupe apenas o espaço necessário */
    padding: 10px 20px; /* Adiciona padding ao botão */
    font-size: 18px; /* Ajusta o tamanho da fonte do botão */
    text-align: center; /* Centraliza o texto dentro do botão */
  }

  .top__prices {
    margin-top: 20px; /* Adiciona margem superior ao container de preços */
  }

  .top__regular-text, .top__regular-price {
    font-size: 14px; /* Ajusta o tamanho da fonte dos textos regulares */
    text-align: center; /* Centraliza o texto */
  }
}

/* Estilos para Dispositivos Muito Pequenos */
@media (max-width: 480px) {
  .top__block h1 {
    font-size: 20px; /* Reduz o tamanho da fonte do título */
  }

  .top__block p.big {
    font-size: 14px; /* Reduz o tamanho da fonte do parágrafo */
  }

  .top__block-button {
    padding: 8px 16px; /* Ajusta o padding do botão para telas menores */
    font-size: 16px; /* Reduz o tamanho da fonte do botão */
  }
}

/* Estilos Gerais para Dispositivos Móveis */

/* Ajuste para telas menores que 768px */
@media (max-width: 768px) {
  .top__block-button {
    display: inline-block; /* Faz com que o botão ocupe apenas o espaço necessário */
    padding: 8px 16px; /* Reduz o padding do botão */
    font-size: 32px; /* Reduz o tamanho da fonte do botão */
    margin: 10px 0; /* Adiciona margem superior e inferior para espaçar o botão */
  }
}

/* Estilos para Dispositivos Muito Pequenos */
@media (max-width: 480px) {
  .top__block-button {
    padding: 22px 12px; /* Reduz ainda mais o padding do botão */
    font-size: 21px; /* Reduz o tamanho da fonte do botão */
  }
}

/* Estilos Gerais para Dispositivos Móveis */
@media (max-width: 768px) {
  .movie__block {
    flex-direction: column; /* Alinha os itens verticalmente em vez de horizontalmente */
    margin-right: 0; /* Remove a margem direita para telas pequenas */
    padding: 0 10px; /* Adiciona padding horizontal para evitar que o conteúdo toque as bordas */
    overflow: hidden; /* Garante que nenhum conteúdo transborde o bloco */
  }

  .movie__info {
    max-width: 100%; /* Expande a largura do texto para ocupar toda a tela */
    padding-left: 0; /* Remove o padding esquerdo para telas pequenas */
    text-align: center; /* Centraliza o texto em telas menores */
    margin-bottom: 0px; /* Adiciona margem inferior para separar o texto da imagem */
    box-sizing: border-box; /* Garante que padding e bordas sejam incluídos na largura */
  }

  .movie__img {
    margin-left: 0; /* Remove a margem esquerda para a imagem */
    margin-top: 10px; /* Adiciona uma margem superior para separar a imagem do texto */
    align-items: center; /* Centraliza a imagem horizontalmente */
    width: 100%; /* Faz com que a imagem ocupe toda a largura disponível */
    box-sizing: border-box; /* Garante que padding e margens sejam incluídos na largura */
  }
}

/* Estilos para telas muito pequenas (smartphones menores) */
@media (max-width: 480px) {
  .movie__info {
    font-size: 14px; /* Ajusta o tamanho da fonte do texto */
    padding-left: 0; /* Garante que não haja padding desnecessário */
  }

  .movie__img {
    margin-top: 8px; /* Reduz a margem superior da imagem */
  }
}

/* Ocultar o elemento .movie__border_wrapper e pseudo-elementos para movie1, movie2 e movie3 em dispositivos móveis */
@media (max-width: 768px) {
  .movie__border_wrapper {
    display: none; /* Oculta o elemento .movie__border_wrapper */
  }
  
  /* Ocultar pseudo-elementos para .movie__block.movie1, .movie__block.movie2 e .movie__block.movie3 */
  .movie__block.movie1::before,
  .movie__block.movie1::after,
  .movie__block.movie2::before,
  .movie__block.movie2::after,
  .movie__block.movie3::before,
  .movie__block.movie3::after {
    content: none; /* Remove o conteúdo dos pseudo-elementos */
  }
}

/* Ocultar também em dispositivos muito pequenos */
@media (max-width: 480px) {
  .movie__border_wrapper {
    display: none; /* Garante que o elemento continue oculto */
  }
  
  .movie__block.movie1::before,
  .movie__block.movie1::after,
  .movie__block.movie2::before,
  .movie__block.movie2::after,
  .movie__block.movie3::before,
  .movie__block.movie3::after {
    content: none; /* Garante que os pseudo-elementos continuem ocultos */
  }
}

/* Estilos para telas pequenas (dispositivos móveis) */
@media (max-width: 768px) {
  .movie__img img {
    display: none; /* Oculta todas as imagens dentro de .movie__img */
  }
}

/* Estilos para telas muito pequenas (smartphones menores) */
@media (max-width: 480px) {
  .movie__img img {
    display: none; /* Garante que as imagens continuem ocultas */
  }
}

/* Estilos gerais para o botão */
.movie__block-button {
  display: inline-block;
  padding: 18px 20px; /* Ajuste do padding conforme necessário */
  background-color: #1a1a1a; /* Cor de fundo do botão */
  color: #ffffff; /* Cor do texto do botão */
  font-size: 26px; /* Tamanho da fonte */
  font-weight: bold; /* Texto em negrito */
  text-decoration: none; /* Remove sublinhado */
  border-radius: 10px; /* Bordas arredondadas */
  transition: background-color 0.3s ease; /* Transição suave da cor de fundo */
}

/* Estilos para o botão ao passar o mouse */
.movie__block-button:hover {
  background-color: #ffd86e; /* Cor de destaque ao passar o mouse */
}

/* Estilos para o container do botão */
.movie__button-container {
  text-align: center; /* Centraliza o botão */
  margin-top: 10px; /* Espaço acima do botão */
  margin-bottom: 0px; /* Espaço abaixo do botão, entre a div e a próxima */
}


/* Estilos para telas pequenas (dispositivos móveis) */
@media (max-width: 768px) {
  .movie__block-button {
    padding: 12px 16px; /* Ajuste do padding conforme necessário */
    font-size: 24px; /* Aumenta o tamanho da fonte para melhorar a legibilidade */
    box-sizing: border-box; /* Inclui padding e borda na largura total do botão */
    text-overflow: ellipsis; /* Adiciona reticências se o texto exceder o botão */
    overflow: hidden; /* Oculta o texto que excede o botão */
    white-space: nowrap; /* Impede a quebra de linha do texto */
    max-width: 100%; /* Garante que o botão não exceda a largura da tela */
    margin: 0 auto; /* Centraliza o botão no container */
    align-items: center;
  }

  .movie__button-container {
    padding: 0 25px; /* Adiciona padding ao container para evitar que o botão toque nas bordas da tela */
    width: 100%; /* Garante que o container ocupe toda a largura disponível */
    box-sizing: border-box; /* Inclui padding e borda na largura total do container */
    text-align: center; /* Centraliza o botão horizontalmente dentro do container */
  }
}

/* Estilos para telas muito pequenas (smartphones menores) */
@media (max-width: 480px) {
  .movie__block-button {
    padding: 10px 14px; /* Ajuste do padding para smartphones menores */
    font-size: 20px; /* Ajusta o tamanho da fonte para smartphones menores */
    box-sizing: border-box; /* Inclui padding e borda na largura total do botão */
    text-overflow: ellipsis; /* Adiciona reticências se o texto exceder o botão */
    overflow: hidden; /* Oculta o texto que excede o botão */
    white-space: nowrap; /* Impede a quebra de linha do texto */
    max-width: 100%; /* Garante que o botão não exceda a largura da tela */
    margin: 0 auto; /* Centraliza o botão no container */
    align-items: center;
  }

  .movie__button-container {
    padding: 0 25px; /* Adiciona padding ao container para evitar que o botão toque nas bordas da tela */
    width: 100%; /* Garante que o container ocupe toda a largura disponível */
    box-sizing: border-box; /* Inclui padding e borda na largura total do container */
    text-align: center; /* Centraliza o botão horizontalmente dentro do container */
  }
}

/* Styles for screens smaller than 768px (tablets and mobiles) */
@media (max-width: 768px) {
  .movie__block h3 {
    word-break: break-word; /* Breaks long words to fit within the container */
    text-align: center; /* Center-aligns the text */
    font-size: 28px; /* Adjust font size for better readability */
  }
}

/* Styles for screens smaller than 480px (mobiles) */
@media (max-width: 480px) {
  .movie__block h3 {
    word-break: break-word; /* Ensure words break within the container */
    text-align: center; /* Center-aligns the text */
    font-size: 19px; /* Further reduce the font size for smaller screens */
  }
}

body, html {
    overflow-x: auto; /* Allows horizontal scrolling */
}

.container {
    overflow-x: auto; /* Ensures specific containers can scroll horizontally */
}

@media screen and (max-width: 768px) {
    /* Estilos para dispositivos móveis */
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    /* Estilos para tablets */
}

@media screen and (min-width: 1025px) {
    /* Estilos para desktops */
}

.text-container {
    overflow-wrap: break-word; /* Permite a quebra de palavras longas */
    word-wrap: break-word; /* Compatibilidade com navegadores antigos */
}

.element {
    padding: 10px 5%; /* Em vez de valores fixos */
    margin: 0 auto; /* Centraliza o elemento */
}

.container {
    display: flex;
    flex-wrap: wrap; /* Permite que os itens "quebrem" para a próxima linha se necessário */
    justify-content: space-around; /* Distribui os itens de forma uniforme */
}

img {
    max-width: 100%;
    height: auto; /* Mantém a proporção */
}

body {
    font-size: 1rem; /* Baseado na configuração de fonte padrão do navegador */
}

.text-container {
    width: calc(100% - 100px); /* Ajusta dinamicamente o espaço restante */
}

/* Ajustes específicos para a faixa de altura */
@media (min-height: 769px) and (max-height: 1800px) {
  /* Estilos específicos aqui */
}

.movie__block img {
  max-width: 100% !important;
  height: auto !important;
}

.movie__block p {
  word-break: break-word; /* Quebra palavras longas */
}

/* Ajustes gerais para as imagens dentro de .movie__block */
.movie__block img {
  max-width: 100%; /* Garante que a imagem não ultrapasse a largura do bloco */
  height: auto; /* Mantém a proporção da imagem */
  display: block; /* Remove o espaço abaixo da imagem */
}

/* Ajustes específicos para as imagens dentro dos diferentes tipos de movie__block */
.movie__block.movie1 .movie__img img,
.movie__block.movie2 .movie__img img,
.movie__block.movie3 .movie__img img {
  width: 100%; /* Ajusta a largura da imagem para o bloco, se necessário */
  max-width: 600px; /* Define um limite máximo de largura para as imagens, ajuste conforme necessário */
}

/* Media queries para resolver problemas de layout específico para altura entre 769px e 1800px */
@media (min-height: 769px) and (max-height: 1800px) {
  .movie__block {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 20px;
  }

  .movie__block .movie__info {
    flex: 1;
    margin-right: 20px;
    text-align: left;
  }

  .movie__block .movie__img {
    flex: 1;
    text-align: right;
  }

  .movie__block img {
    max-width: 100%;
    height: auto;
  }
}

@media screen and (max-width: 768px) {
  .movie__img img {
    display: none !important; /* Oculta as imagens dentro da div .movie__img em dispositivos móveis */
  }
}

  /* Ajustes para a visibilidade da imagem se não for ocultar */
  .movie__block {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 20px;
  }

  .movie__block .movie__info {
    flex: 1;
    margin-right: 20px;
    text-align: left;
  }

  .movie__block .movie__img {
    flex: 1;
    text-align: right;
  }

@media (max-width: 767px) {
  img {
  max-width: 100%;
  height: auto;
  }
}

@media (max-width: 767px) {
  .promo-container {
    display: flex;
    flex-direction: column; /* Stack image and button vertically */
    align-items: center; /* Center align */
    padding: 20px; /* Adjust padding */
  }

  .promo-image img {
    max-width: 90%; /* Adjust image size */
    height: auto; /* Maintain aspect ratio */
  }

  .promo-button {
    padding: 10px 20px; /* Adjust button padding */
    font-size: 16px; /* Adjust font size */
  }
}