* {
    margin: 0;
}

.div1 {
    width: 100%;
    height: 900px;
    background-image: url(./38315c7e9c01e5a7294e7b1cbebc53a59a7d48e8\ \(1\).jpg);
    background-position: 100%;
    background-repeat: no-repeat;
    background-position: 100% 100%;
    background-size: 100%;
}

.img1 {
    margin-left: 100px;
    padding: 20px;
}

.div2 {
    display: flex;
    justify-content: center;
    gap: 30px;
    position: relative;
    bottom: 50px;

}

.div2,
p {

    font-weight: 00;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #FDFDFD;
}

.button1 {

    width: 137px;
    height: 44px;
    opacity: 1;
    gap: 10px;
    border-radius: 4px;
    padding-top: 12px;
    padding-right: 24px;
    padding-bottom: 12px;
    padding-left: 24px;
    background: #1A3E3E;
    position: relative;
    bottom: 10px;
    border: 0;
    color: white;
}

.div3 {}

.text1 {
    width: 1080px;
    height: 150px;
    opacity: 1;
    font-family: NEXT ART;
    font-weight: 700;
    font-style: Bold;
    font-size: 50px;
    leading-trim: NONE;
    line-height: 150%;
    letter-spacing: 2%;
    color: #FDFDFD;
    position: relative;
    top: 200px;
    left: 110px;
}

.div3 {
    width: 1180px;
    height: 161px;
    opacity: 1;
    background: #FFFFFF33;
    position: relative;
    top: 250px;
    left: 110px;
    display: flex;
    gap: 40px;
    padding: 20px;
}

.card1 {
    width: 240px;
    height: 52px;
    angle: 0 deg;
    opacity: 1;
    gap: 8px;
    border-radius: 8px;
    padding-right: 16px;
    padding-left: 16px;
    border-width: 1px;
    border: 1px solid #E1E3E4;

}

.img2 {
    position: relative;
    left: 80px;
}

.div4 {
    display: flex;
}

.button2 {
    width: 213px;
    height: 52px;
    opacity: 1;
    border-radius: 4px;
    padding-top: 16px;
    padding-right: 36px;
    padding-bottom: 16px;
    padding-left: 36px;
    border: 0;
    position: relative;
    left: 1100px;
    top: 69px;
}

.p1 {
    position: relative;
    top: 10px;
}

.img3 {
    width: 20px;
    position: relative;
    left: 80px;
}

.icon {
    display: none;
}

.section1 {
    padding: 40px 20px;
    background-color: #ffffff;
}

.container1 {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: center;
    justify-content: center;
}

.image-box1 {
    position: relative;
    max-width: 500px;
    flex: 1 1 300px;
}

.image-box1 img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.play-button1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px 20px;
    border-radius: 50%;
    cursor: pointer;
}

.text-box1 {
    flex: 1 1 300px;
    max-width: 500px;
}

.heading1 {
    font-size: 24px;
    margin-bottom: 10px;
    color: #F2BE22;
}

.h4 {

    margin-bottom: 20px;
    width: 580px;
    height: 76px;
    angle: 0 deg;
    opacity: 1;
    font-family: Nunito Sans;
    font-weight: 800;
    font-style: ExtraBold;
    font-size: 32px;
    leading-trim: NONE;
    line-height: 120%;
    letter-spacing: 0%;

}

.paragraph1 {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
    margin-bottom: 20px;
}

.section2 {
    display: flex;
    flex-wrap: wrap;
    padding: 40px;
    background-color: #F3F5F4;
}

.button3 {
    width: 200px;
    height: 52px;
    angle: 0 deg;
    opacity: 1;
    gap: 10px;
    border-radius: 4px;
    padding-top: 16px;
    padding-right: 36px;
    padding-bottom: 16px;
    padding-left: 36px;
    border: 0;
    background: #1A3E3E;
    color: white;
}

.container {
    display: flex;
    width: 94%;
    margin: auto;
    background: #F3F5F4;
    padding: 40px;
    border-radius: 12px;
    gap: 40px;
}

.left {
    flex: 1;
}

.span1 {
    color: #d1a300;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: bold;
}

h1 {
    font-size: 36px;
    margin: 10px 0 20px;
}

.p2 {
    color: #555;
    line-height: 1.6;
    margin-bottom: 30px;
    font-family: Nunito Sans;
    font-weight: 400;
    font-style: Regular;
    font-size: 18px;
    leading-trim: NONE;
    line-height: 150%;
    letter-spacing: 0%;
    width: 580px;
    height: 81px;
    angle: 0 deg;
    opacity: 1;

}

.item {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.icon {
    width: 45px;
    height: 45px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
}

.green {
    background: #E5EEEB;
    width: 50px;
    height: 50px;
    opacity: 1;
    border-radius: 4px;

}

.blue {
    width: 50px;
    height: 50px;
    opacity: 1;
    border-radius: 4px;

    background: #E3E6EE;
}

.yellow {
    width: 50px;
    height: 50px;
    opacity: 1;
    border-radius: 4px;

    background: #F3F1E1;
}

.item h3 {
    margin-bottom: 5px;
    font-size: 18px;
}

.item p {
    font-size: 14px;
    color: #666;
    line-height: 1.4;
}

.btn {
    margin-top: 20px;
    padding: 14px 28px;
    background: #1f3d3a;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
}

.btn:hover {
    background: #295a54;
}

.right {
    flex: 1;
}

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

.grid img {
    width: 250px;
    height: 250px;
    object-fit: cover;
    border-radius: 20px;
}

.img5 {

    opacity: 1;
    border-top-right-radius: 50px;
    border-bottom-left-radius: 50px;
    position: relative;
    left: 90px;
}

.img7 {
    position: relative;
    left: 90px;
}

.section3 {
    max-width: 1200px;
    margin: 80px auto;
    text-align: center;
}

.popular h2 {
    font-size: 32px;
    margin: 10px 0 40px;
}

.center {
    display: block;
    text-align: center;
}

.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-bottom: 40px;
}

.card {
    position: relative;
    overflow: hidden;
    border-radius: 25px;
    height: 420px;
}

.card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.divvnuttr {
    position: absolute;
    bottom: 0;
    padding: 25px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    background: #FFFFFF33;
    backdrop-filter: blur(6px);
    color: white;
    width: 380px;
    opacity: 1;
    border-bottom-right-radius: 32px;
    border-bottom-left-radius: 32px;

}

.divvnuttr h3 {
    font-size: 20px;
    margin-bottom: 5px;
}

.divvnuttr p {
    font-size: 13px;
    opacity: 0.8;
}

.price {
    background: rgba(255, 255, 255, 0.2);
    padding: 8px 14px;
    border-radius: 10px;
    font-weight: bold;
    position: relative;
    right: 30px;
}

.button4 {
    display: inline-block;
    margin: auto;
    width: 244px;
    height: 52px;
    opacity: 1;
    border-radius: 4px;
    padding-top: 16px;
    padding-right: 36px;
    padding-bottom: 16px;
    padding-left: 36px;
    background: #1A3E3E;
    color: white;
}

.span2 {
    color: #d1a300;
}

.crdss1 {
    width: 580px;
    height: 312px;
    border-radius: 10px;
    padding: 16px;
    opacity: 1;
    background: #FDFDFD;
    box-shadow: 0px 0px 15px 0px #18121E1F;

}

.kard1 {
    width: 580px;
    height: 312px;
    opacity: 1;
    border-radius: 10px;
    padding: 16px;
    background: #FDFDFD;
    box-shadow: 0px 0px 15px 0px #18121E1F;
    display: flex;
    gap: 20px;
}

.h1kard {
    width: 294px;
    height: 64px;
    opacity: 1;
    font-family: Nunito Sans;
    font-weight: 700;
    font-style: Bold;
    font-size: 24px;
    leading-trim: NONE;
    line-height: 32px;
    letter-spacing: 0%;

}

.obshiy1 {

    margin: 60px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    background-color: #F3F5F4;
    width: 100%;
}

.topText {
    width: 100%;
    text-align: center;
    margin-bottom: 40px;
}

.topP {
    color: #d1a300;
    font-size: 14px;
    margin-bottom: 10px;
}

.topH1 {
    font-size: 40px;
    font-weight: 700;
}

.kard1 {
    width: 580px;
    background: #ffffff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0px 0px 15px rgba(24, 18, 30, 0.12);
    display: flex;
    gap: 20px;
}

.img9,
.img10 {
    width: 230px;
    height: 280px;
    object-fit: cover;
    border-radius: 6px;
}

.kardText {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.h1kard {
    font-size: 24px;
    line-height: 32px;
}

.pkard,
.pkard2 {
    font-size: 16px;
    line-height: 22px;
    color: #1a3e3e;
}

.posledniytext {
    display: flex;
    justify-content: space-between;
    margin-top: auto;
}

.p3 {
    color: #d1a300;
}

.p4 {
    font-weight: 600;
    cursor: pointer;
}

.ps {
    gap: 20px;
    flex-direction: column;
    display: flex;
}

.obsi {

    gap: 40px;
    padding: 60px;
    justify-content: space-evenly;
    display: flex;
    align-items: center;
}

.row {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.leftp {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sig {
    width: 50%;
    gap: 10px;
    display: flex;
}

.but {
    color: white;
    background-color: #1A3E3E;
    border-radius: 4px;
    padding: 10px;
    padding-left: 10px;
    padding-right: 20px;
    border: none;
}

.inp {
    border-radius: 4px;
    border: none;
    padding: 10px;
    background-color: #F3F5F4;
}

.div1122 {

    text-align: center;
    max-width: 1200px;
    margin: auto;

}

.p {
    color: #F2BE22;
}

.pod {
    font-weight: bolder;
}

.page {
    padding-bottom: 30px;
    padding-top: 30px;
    box-shadow: 0px 0px 10px rgba(128, 128, 128, 0.467);
    max-width: 1300px;
    margin: auto;
    margin-top: 50px;
}

.h2h {
    display: none;
}

.pic {
    margin-top: 40px;
    gap: 20px;
    display: flex;
    flex-wrap: wrap;
}

.img20 {
    width: 580px;
    height: 270px;
    opacity: 1;
    border-radius: 6px;

}

.img21 {
    width: 280px;
    height: 250px;
    opacity: 1;
    border-radius: 6px;

}

.img22 {
    width: 280px;
    height: 250px;
    opacity: 1;
    border-radius: 6px;

}

.img23 {
    width: 280px;
    height: 250px;
    opacity: 1;
    border-radius: 6px;

}

.img24 {
    width: 580px;
    height: 250px;
    opacity: 1;
    border-radius: 6px;

}

.yyy1 {
    max-width: 1200px;
    margin: auto;
    padding: 40px;
    margin-top: 70px;
}

.yyy2 {
    background: #fff;
    border-radius: 12px;
    padding: 40px 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
}

.yyy3 {
    width: 45%;
}

.yyy4 {
    color: #F2BE22;
    text-transform: uppercase;
    font-size: 14px;
}

.yyy5 {
    font-size: 28px;
}

.yyy6 {
    width: 45%;
}

.yyy7 {
    font-size: 14px;
    margin-bottom: 6px;
}

.yyy8 {
    display: flex;
    gap: 10px;
}

.yyy9 {
    flex: 1;
    padding: 10px;
    border-radius: 6px;
    border: none;
    background: #F3F5F4;
}

.yyy10 {
    background: #1A3E3E;
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 6px;
}

.yyy11 {
    font-size: 19px;
    margin-top: 8px;
    color: #141414;
    position: relative;
    top: 5px;
    font-family: Nunito Sans;
    font-weight: 200;
    font-style: SemiBold;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0%;
    width: 536px;
    height: 36px;
    opacity: 1;

}

.yyy12 {
    background: #1A3E3E;
    color: #fff;
    margin-top: 80px;
}

.yyy13 {
    max-width: 1200px;
    margin: auto;
    padding: 60px;
    display: flex;
    justify-content: space-between;
}

.yyy14,
.yyy15,
.yyy17 {
    width: 30%;
}

.yyy16 {
    color: #F2BE22;
}

.yyy18 {
    background: #141414;
    display: flex;
    justify-content: space-between;
    padding: 15px 60px;
    font-size: 12px;
}

.yyy15 h4 {
    font-size: 18px;
    margin-bottom: 14px;
    line-height: 1.3;
}

.yyy15 p {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 12px;
}

.yyy17 h4 {
    font-size: 18px;
    margin-bottom: 14px;
    line-height: 1.3;
}

.yyy17 p {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 12px;
}

.yyy18 p {
    font-size: 13px;
    line-height: 1.6;
    margin: 6px 0;
}

.yyy14 h4 {
    font-size: 18px;
    line-height: 1.3;
    margin-bottom: 14px;
}

.yyy14 .pppp {
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 14px;
}

.yyy14 .hhh {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 8px;
}

.lll {
    display: flex;
    gap: 10px;
}

.jjhj {
    display: flex;
    gap: 5px;
}

.bbbbb {
    position: relative;
    width: 220px;
    height: 52px;
    opacity: 1;
    gap: 10px;
    border-radius: 4px;
    padding-top: 16px;
    padding-right: 36px;
    padding-bottom: 16px;
    padding-left: 36px;
    border: 0;
    background: #1A3E3E;
    color: white;
    top: 650px;
    left: 500px;
}
.yyy16
{
    display: flex;
}
@media(max-width: 510px) {
    .div1 {
        width: 91%;
        height: 500px;
        background-size: cover;
        padding: 20px;
    }

    .jjhj {
        position: relative;
        top: 50px;
    }

    .pppp {
        position: relative;
        top: 20px;
    }

    .lll {
        position: relative;
        top: 30px;
        gap: 10px;
    }

    .img1 {
        margin-left: 0;
        width: 120px;
        margin-left: -20px;
        margin-top: -20px;
    }

    .div2 {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        bottom: 0;
    }

    .button1 {
        display: none;
    }

    .text1 {
        width: 345px;
        height: 168px;
        font-size: 28px;
        line-height: 130%;
        top: 50px;
        left: 0;
        text-align: start;
        position: relative;
        top: 170px;
    }

    .div3 {
        display: none;
    }

    .card1 {
        display: none;
    }

    .img2,
    .img3 {
        left: 0;
        float: right;
    }

    .p1 {
        top: 5px;
        text-align: center;
    }

    .button2 {
        margin-left: -1100px;
        top: 150px;

    }

    .icon {
        display: block;
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 54px;
        color: white;
    }

    .div2 p {
        display: none;
    }

    .container1 {
        flex-direction: column;
        gap: 20px;
    }

    .image-box1 {
        order: 2;
        max-width: 100%;
    }

    .text-box1 {
        order: 1;
        max-width: 100%;
    }

    .subheading1 {
        width: 100%;
        font-size: 24px;
        line-height: 130%;
    }

    .paragraph1 {
        font-size: 15px;
        line-height: 1.5;
        margin-top: 4px;
    }

    .button3 {
        width: 100%;
        padding: 14px 20px;
        font-size: 16px;
    }

    .heading1 {
        font-size: 20px;
    }

    .play-button1 {
        font-size: 36px;
        padding: 8px 16px;
    }

    .h44 {
        width: 358px;
        height: 58px;
        opacity: 1;
        font-family: Nunito Sans;
        font-weight: 800;
        font-style: ExtraBold;
        font-size: 24px;
        leading-trim: NONE;
        line-height: 120%;
        letter-spacing: 0%;
    }

    .button3 {
        width: 70%;
        position: relative;
        left: 60px;
    }

    .right {
        display: none;
    }

    .container {
        width: 79%;
    }

    .h11 {
        width: 358px;
        height: 29px;
        opacity: 1;
        font-family: Nunito Sans;
        font-weight: 800;
        font-size: 24px;
        line-height: 120%;
        letter-spacing: 0%;

    }

    .p2 {
        width: 358px;
        height: 96px;
        opacity: 1;
        font-family: Nunito Sans;
        font-weight: 400;
        font-style: Regular;
        font-size: 16px;
        leading-trim: NONE;
        line-height: 150%;
        letter-spacing: 0%;

    }


    .item {
        display: flex;
        margin-left: -1px;
    }

    .btn {
        position: relative;
        margin-left: 50px;
    }

    .cards {
        display: block;
    }

    .kard1 {
        width: 100%;
        height: auto;
    }

    .card {
        display: none;
    }

    .card:first-child {
        display: block;
        margin: 0 auto;
        width: 90%;
        height: 360px;
        margin-top: 20px;
    }

    .divvnuttr {
        width: 100%;
        left: 0;
        right: 0;
        padding: 16px;
    }

    .kkjj {
        position: relative;
        top: 50px;
    }

    .price {
        right: 0;
    }

    .section3 h2 {
        font-size: 24px;
    }

    .button4 {
        width: 60%;
        margin-top: 20px;
    }

    .span2 {
        color: #F2BE22;
        text-align: start;
        position: relative;
        left: 5px;
    }

    .h22 {
        width: 358px;
        height: 29px;
        opacity: 1;
        font-family: Nunito Sans;
        font-weight: 800;
        font-size: 24px;
        line-height: 120%;
        letter-spacing: 0%;
        position: relative;
        top: 5px;
        text-align: center;
    }

    .obshiy1 {
        flex-direction: column;
        align-items: center;
    }

    .kard1 {
        display: none;
    }

    .kard1:nth-of-type(2) {
        display: flex;
        width: 100%;
        max-width: 360px;
        flex-direction: column;
    }

    .kard1 img {
        width: 100%;
        height: 220px;
    }

    .kardText {
        gap: 10px;
    }

    .h1kard {
        font-size: 20px;
        line-height: 26px;
    }

    .div1122 {
        padding: 20px;
    }

    .img20 {
        display: block;
        width: 80%;
        height: 70%;
        object-fit: cover;
        border-radius: 12px;
        margin-left: 50px;
    }

    .img21,
    .img22,
    .img23,
    .img24,
    .pic img:last-child {
        display: none;
    }

    .pic {
        display: block;
        margin-top: 20px;
    }

    .yyy2 {
        flex-direction: column;
        padding: 20px;
        gap: 20px;
    }

    .yyy3,
    .yyy6 {
        width: 100%;
    }

    .yyy8 {
        flex-direction: column;
    }

    .yyy10 {
        width: 70%;
    }

    .yyy5 {
        display: none;
    }


    .yyy13 {
        flex-direction: column;
        gap: 30px;
        padding: 30px 20px;
    }

    .yyy14,

    .yyy17 {
        width: 100%;

    }

    .yyy14 p {
        margin-bottom: 8px;
    }

    .yyy18 {
        width: 98%;
        flex-direction: column;
        gap: 10px;
        text-align: center;
        padding: 15px 20px;
        margin-left: -15px;
    }

    .yyy11 {
        width: 310px;
        height: 72px;
        opacity: 1;
        font-family: Nunito Sans;
        font-weight: 600;
        font-style: SemiBold;
        font-size: 14px;
        leading-trim: NONE;
        line-height: 18px;
        letter-spacing: 0%;

    }

    .pppp {
        width: 234px;
        height: 80px;
        opacity: 1;
        font-family: Nunito Sans;
        font-weight: 400;
        font-style: Regular;
        font-size: 14px;
        leading-trim: NONE;
        line-height: 20px;
        letter-spacing: 0%;
        color: #FFFFFF;
    }

    .hhh {
        position: relative;
        top: 20px;
    }

    .ikmj {
        width: 258px;
        height: 29px;
        opacity: 1;
        font-family: Nunito Sans;
        font-weight: 800;
        font-size: 24px;
        line-height: 120%;
        letter-spacing: 0%;
        position: relative;
        left: 20px;
    }


    .topH1 {
        width: 358px;
        height: 29px;

        opacity: 1;

        font-weight: 800;
        font-size: 24px;
        line-height: 120%;
        letter-spacing: 0%;
        position: relative;
        top: 70px;
    }

    .topP {
        position: relative;
        top: 70px;
        left: -100px;
    }

    .yyy15 h4 {
        font-size: 16px;
        margin-bottom: 12px;
        line-height: 4.5;
    }

    .yyy15 p {
        font-size: 14px;
        line-height: 1.7;
        margin-bottom: 10px;
    }

    .yyy17 h4 {
        font-size: 16px;
        margin-bottom: 12px;
        line-height: 1.3;
    }

    .yyy17 p {
        font-size: 14px;
        line-height: 1.7;
        margin-bottom: 10px;
    }

    .bbbbb {
        position: relative;
        left: 100px;
        top: 320px;
    }
    .img25
    {
        width: 30px;
        height: 20px;
    }

}