body { font-family: "Poppins", sans-serif; font-size: var(--nm); background: #f9f9f9; }

main { max-width: 1920px; width: 100%; margin: 0 auto; }

.hero-container { max-width: 1472px; width: 100%; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; }
.container { max-width: 1112px; width: 100%; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; }
.container-2 { max-width: 1280px; width: 100%; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; }
.container-3 { max-width: 1680px; width: 100%; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; }

.font-size-1 { font-size: clamp(5rem, 8.5vw, 10.2rem); }
.font-size-2 { font-size: clamp(3.4rem, 5.17vw, 6.2rem); }
.font-size-3 { font-size: clamp(2.2rem, 2.83vw, 3.4rem); }

.hero { position: relative; background: #000; }
.hero .video-wrap { position: absolute; inset: 0; background: #080808 url(./../images/bb-img-thumbnail.webp); overflow: hidden; background-position: center; background-repeat: no-repeat; }
.hero .video-wrap::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); pointer-events: none; }
.hero .video-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; }

.hero h1 { font-family: "Anton", sans-serif; line-height: 1.2; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 400; text-wrap: balance; color: #fff; }
.hero h2 { font-weight: 500; line-height: 1.45; color: #fff; }

.hd-1 { color: #24323a; letter-spacing: 1px; max-width: 920px; margin: 0 auto; font-family: "Anton", sans-serif; font-weight: 400; }
.hd-2 { color: #24323a; letter-spacing: 1px; max-width: 920px; font-family: "Anton", sans-serif; font-weight: 400; }
.hd-3 { font-size: var(--md); max-width: 920px; }

.btn-1 { text-shadow: 2px 3px #764201; display: block; padding: 10px 32px; text-transform: uppercase; font-weight: 700; position: absolute; bottom: calc(-1 * (var(--xl) + 37px)); max-width: clamp(32rem, 45.83vw, 55rem); width: 100%; text-align: center; color: #fff; border-bottom: 6px solid #754100; box-shadow: 0px 6px 25px -10px #000; border-radius: 48px; background: linear-gradient(to bottom, #ff8c00, #bf6800); transition: border 0.1s linear; }
.btn-1:hover { border-bottom: 4px solid #754100; }

.btn-2-wrap { padding-top: 1px; }
.btn-2 { position: relative;; margin-left: auto; margin-right: auto; display: block; bottom: 0; }
.btn-2 > span { text-shadow: 2px 3px #764201; padding: 10px 32px; text-transform: uppercase; font-weight: 700; text-align: center; color: #fff; border-radius: 120px; background: linear-gradient(to bottom, #ff8c00, #bf6800); width: 100%; display: block; bottom: 0; transition: all 0.1s linear; }
.btn-2:before { background: #754100; box-shadow: 0px 6px 25px -10px #000; border-radius: 120px; position: absolute; bottom: -5px; left: 0; width: 99.8%; height: 100%; content: ''; }
.btn-2:hover > span { bottom: -2px; }

.width-1 { max-width: clamp(40rem, 45.83vw, 55rem); width: 100%; }
.width-2 { max-width: 750px; width: 100%; }

.blk-1 { padding-top: clamp(3.5rem, 5.83vw, 7rem); background: linear-gradient(180deg, rgba(255, 201, 106, 0.08), transparent 38%), linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(245, 236, 223, 0.92)); }
.blk-3 { background: linear-gradient(180deg, rgba(255, 201, 106, 0.08), transparent 38%), linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(245, 236, 223, 0.92)); background-size: cover; }
.blk-3 .container { max-width: 1360px; }

.blk-4 { background: #f4f4f4; position: relative; }
.blk-4:before { background: url(./../images/bb-img-9.webp?v=2) center right no-repeat; background-size: auto 100%; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.blk-6 { background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(247, 239, 227, 0.82)), #fffaf1; }
.blk-6 .container { max-width: 1480px; }
.blk-6-a { max-width: 980px; width: 66%; position: relative; z-index: 1; }
.blk-6-b { max-width: 1080px; position: relative; z-index: 1; }

.blk-7 { background: #f4f4f4 radial-gradient(#ffffff, #f2f2f2); background-size: 100% 300%; background-position: center; }
.blk-7 .container { padding-left: 160px; max-width: 1200px; position: relative; z-index: 1; }
.blk-8 { box-shadow: 0px -14px 20px -30px rgb(0 0 0 / 50%), 0px 14px 20px -30px rgb(0 0 0 / 50%); position: relative; }
.blk-9 { background: linear-gradient(180deg, rgba(255, 201, 106, 0.08), transparent 38%), linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(245, 236, 223, 0.92)); }
.blk-10 { background: #cacbc3 url(./../images/bb-img-8.webp) center no-repeat; background-size: cover; }
.blk-12 { background: linear-gradient(180deg, rgba(255, 201, 106, 0.08), transparent 38%), linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(245, 236, 223, 0.92)); }
.blk-13 { background: url(./../images/bb-img-12.webp?v=3) bottom 40px center no-repeat; background-size: 100% auto; position: relative; }
.blk-13:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0; }

.blk-14 { box-shadow: 0px -14px 20px -30px rgb(0 0 0 / 50%), 0px 14px 20px -30px rgb(0 0 0 / 50%); }
.blk-14 .container-2 { padding-top: clamp(0.8rem, 2.08vw, 2.5rem); }
.blk-15 { background: linear-gradient(180deg, rgba(255, 201, 106, 0.08), transparent 38%), linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(245, 236, 223, 0.92)); }

.box-1 { max-width: 740px; }
.box-2 { max-width: 935px; background: #fff; padding: var(--xl); border-radius: 8px; box-shadow: 0 10px 24px rgba(33, 49, 45, 0.05); }
.box-3 { border-radius: 8px; box-shadow: 0 10px 24px rgba(33, 49, 45, 0.05); max-width: 920px; margin-left: auto; }
.box-3-a { background: #fff; padding: var(--xl); border-top-left-radius: 8px; border-top-right-radius: 8px; }
.box-3-b { background: #ffefef; padding: var(--xl); border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }

.box-4 { background: rgb(224 224 224 / 90%); }

.flex-1 { display: flex; gap: var(--lg); align-items: center; }
.flex-1 > div:first-child { max-width: 75rem; width: 100%; }
.flex-1 > div:last-child { flex-grow: 1; }
.flex-1 > div:last-child img { max-width: 36.4rem; width: 100%; margin: 0 auto calc(-1 * clamp(4rem, 6.67vw, 8rem)); }

.flex-2 { display: flex; gap: var(--lg); align-items: center; }
.flex-2 > div:first-child { max-width: 300px; width: 100%; display: flex; flex-direction: column; gap: 6px; border: 6px solid #fff; box-shadow: 0px 0px 20px -12px #000; border-radius: 6px; }

.flex-3 { display: flex; align-items: center; flex-direction: row-reverse; justify-content: space-between; gap: var(--xl); }
.flex-3 > div:first-child { max-width: clamp(30rem, 37.5vw, 45rem); width: 100%; flex-shrink: 0; }
.flex-3 > div:last-child { max-width: 850px; width: 100%; }

.flex-4 { display: flex; flex-wrap: wrap; gap: var(--xl); max-width: 1242px; margin: var(--xl) auto 0; }
.flex-4 > div { background: linear-gradient(145deg, rgba(255, 255, 255, 1), rgba(245, 236, 223, 1)); max-width: 390px; padding: var(--xl); border: 1px solid rgba(39, 58, 66, 0.12);; border-radius: 8px; position: relative; }
.flex-4 > div:before { content: ""; position: absolute; width: 100%; height: 0.5rem; inset: 0px auto auto 0px; background: linear-gradient(90deg, #f0bf66, #8cc2aa); }

.flex-5 { display: flex; gap: var(--xl); }

.flex-6 { display: flex; border-radius: 8px; flex-direction: row-reverse; gap: var(--xl); align-items: center; }
.flex-6 > div:last-child { flex-shrink: 0; max-width: 370px; margin-left: -140px; }
.flex-6 > div:last-child svg { width: 100%; height: 100%; padding-top: 4px; }
.flex-6 > div:last-child svg path { fill: #24323a; }

.quote-bg { position: relative; }
.quote-bg:before { content: '\201C'; font-family: 'Anton', sans-serif; font-size: 500px; line-height: 0; position: absolute; opacity: 0.1; top: 220px; left: -280px; }
.quote-bg:after { font-family: 'Anton', sans-serif; font-size: 500px; line-height: 0; position: absolute; opacity: 0.1; bottom: -90px; right: -280px; content: '\201D'; }

.comment { padding: 16px; background: #f9f9f9; border-radius: 8px; padding: var(--md) var(--xl); color: #24323a; box-shadow: 0 10px 24px rgba(33, 49, 45, 0.05); border: 1px solid #e1e1e1; }
.comment-top { display: flex; gap: 16px; align-items: center; margin-bottom: 1em; }
.comment-avatar { max-width: 64px; }
.comment-stars { display: flex; align-items: center; }
.comment-stars > span:first-child { width: 105px; margin-top: -4px; }
.comment-stars > span:last-child { width: 122px; display: flex; align-items: center; justify-content: center; font-size: 12px; gap: 4px; margin-left: 8px; background: #fff; border-radius: 120px; padding: 4px; border: 1px solid #aea596; line-height: 1; }
.comment-stars > span:last-child img { width: 16px; }
.comment-name { font-weight: 500; line-height: 1; margin-top: 10px; }

.img-1 { position: absolute; top: 0; left: 0; pointer-events: none; height: 100%; width: auto; }
.img-2 { max-width: 390px; border: 5px solid #fff; border-radius: 8px; box-shadow: 0px 0px 20px -10px #000; }
.img-3 { max-width: 320px; width: 100%; margin-top: 18px; position: relative; }
.img-4 { max-width: clamp(24rem, 75vw, 90rem); width: 100%; margin: var(--xl) auto calc(-1 * clamp(2.5rem, 7.08vw, 8.5rem)); position: relative; z-index: 1; }
.img-5 { max-width: 520px; width: 100%; position: absolute; bottom: 0; right: 0; }
.img-6 { position: absolute; bottom: 0; right: 0; max-width: 760px; pointer-events: none; }

.li-1 { display: flex; gap: 8px; }
.li-1 > span:first-child { width: 34px; flex-shrink: 0; }
.li-1 > span:last-child { padding-top: 2px; }
.li-1 svg { fill: #009103; width: 100%; height: auto; }

.li-2 { display: flex; gap: 8px; }
.li-2 > span:first-child { width: 34px; flex-shrink: 0; }
.li-2 > span:last-child { padding-top: 2px; }
.li-2 svg { fill: #ce304d; width: 100%; height: auto; }

.list-1 { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 1em 10px; }
.list-1 li { background: #fffefd; border-radius: 120px; padding: 8px 16px; font-weight: 500; text-transform: uppercase; color: #296830; box-shadow: 0 10px 24px rgba(33, 49, 45, 0.05); margin: 0; font-size: 0.95em; }

.list-2 { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 16px; max-width: 1200px; justify-content: center; }
.list-2 li { width: 48%; background: #fff; padding: 16px; border-radius: 8px; margin: 0; gap: 16px; display: flex; align-items: center; border: 1px solid #e4e4e4; box-shadow: 0 10px 24px rgba(33, 49, 45, 0.05); }
.list-2 li > span:first-child { width: 64px; flex-shrink: 0; margin-left: -30px; }

.anton { font-family: "Anton", sans-serif; }

.gradient-text-1 { background: linear-gradient(to bottom, #fcf19f, #d4943e); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; }

.text-balance { text-wrap: balance; }
.letter-spacing-1 { letter-spacing: 1px; }
.uppercase { text-transform: uppercase; }

.text-brown { color: #885d34; }
.text-black-1 { color: #000; }
.text-black-2 { color: #24323a; }

.bg-white { background: #fff; }

footer { max-width: 1920px; width: 100%; background: #24323a; color: #fff; font-size: 16px; margin-left: auto; margin-right: auto; }
.footer-flex { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.footer-links { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.footer-links a { color: #fff; }
.footer-links a:hover { text-decoration: underline; }


@media (max-width: 1860px) {
    .img-1 { left: -80px; }
}
@media (max-width: 1780px) {
    .blk-4:before { opacity: 0.2; }
    .box-1 { max-width: 100%; }
    .box-2 { max-width: 100%; }
    .blk-7 .container { padding-left: 400px; max-width: 1440px; margin: 0; }
    .img-5 { max-width: clamp(28rem, 35vw, 42rem); }
}

@media (max-width: 1670px) {
    .quote-bg:before, .quote-bg:after { display: none; }
    .flex-6 > div:last-child { margin-left: -80px; }
}

@media (max-width: 1560px) {
    .flex-8 { max-width: 65%; }
}

@media (max-width: 1440px) {
    .flex-6 > div:last-child { margin-left: 0px; max-width: 258px; }
}

@media (max-width: 1300px) {
    .flex-4 { max-width: 1112px; }
    .flex-4 > div { max-width: 527px; width: 48%; }
    .img-6 { max-width: 580px; }

    .blk-10 { background-position: right center; }
    .box-3 { max-width: 100%; }
}

@media (max-width: 1200px) {
    .flex-8 { max-width: 100%; }
    .img-5 { opacity: 0.2; }
}

@media (max-width: 1080px) {
    .blk-7 .container { padding-left: 340px; }
}

@media (max-width: 980px) {
    .flex-3 { flex-direction: column; gap: 0; }
    .flex-3 > div:first-child { max-width: 230px; }
    .flex-3 h2 { text-align: center; }
    .flex-5 { flex-direction: column-reverse; align-items: center; }
    .flex-5 > div:last-child img { max-width: 230px; }
    .flex-5 h2 { text-align: center; }

    .blk-7 .container { padding-left: 16px; }

    .img-1 { opacity: 0.15; }

    .footer-flex { margin-top: 8px; flex-direction: column-reverse; gap: 0; align-items: center; justify-content: center; font-size: 14px; }
    .footer-links { margin: 24px auto 8px; align-items: center; justify-content: center; }
}

@media (max-width: 768px) {
    .hero h1 { text-align: center; }
    .hero h2 { max-width: 500px; text-align: center; margin-left: auto; margin-right: auto; padding-bottom: 10px; }
    .flex-1 { flex-direction: column; }
    .flex-1 > div:last-child img { display: none; }
    .flex-2 { flex-direction: column; align-items: center; justify-content: center; }
    .flex-2 > div:first-child { flex-direction: row; max-width: 400px; }
    .flex-2 > div:first-child > div { width: 100%; }
    .flex-2 > div:first-child img { width: 100%; }
    .flex-4 > div { width: 100%; max-width: 100%; }
    .flex-6 { flex-direction: column-reverse; gap: 8px; }
    .flex-6 > div:last-child { max-width: 148px; }
    .flex-6 h2 { text-align: center; }

    .blk-1 .container { padding-top: 10px; }
    .blk-6-a { max-width: 100%; width: 100%; }
    .li-1 > span:first-child { width: 24px; margin-top: 1px; }
    .li-2 > span:first-child { width: 24px; margin-top: 1px; }
    .list-1 li { background: rgb(254 254 254 / 80%); width: 100%; }
    .list-2 li { max-width: 520px; width: 100%; }
    .box-2 h2 { text-wrap: balance; text-align: center; }
    .box-3-, .box-3-b { padding: 18px; }

    .img-6 { max-width: 420px; opacity: 0.5; }
    .btn-1 { margin: 0 auto 8px; left: 50%; transform: translateX(-50%); }
}