@extends('layouts.app')

@section('title', 'Ecosystem - Apero Technologies Group')
@section('description', 'Hệ sinh thái sản phẩm của Apero Technologies Group')

@push('page-styles')
    {{-- CSS riêng cho trang ecosystem --}}
    <link rel='stylesheet' id='bricks-child-css' href='{{ asset('css/stylecce6.css') }}' media='all' />
    <link rel='stylesheet' id='styles-child-css' href='{{ asset('css/stylesf910.css') }}' media='all' />
    <style scoped id='bricks-frontend-inline-inline-css'>
        html {
            scroll-behavior: smooth
        }


        :root {}

        body {
             font-family: 'Poppins', sans-serif;
            color: #000000
        }

        .brxe-container {
            padding-right: 20px;
            padding-left: 20px;
            width: 1160px
        }

        .woocommerce main.site-main {
            width: 1160px
        }

        #brx-content.wordpress {
            width: 1160px
        }

        .bricks-button {
            font-size: 20px;
            font-weight: 600;
            line-height: 1.26;
            border-radius: 8px;
            box-shadow: 0 4px 50px 0 rgba(0, 0, 0, 0.05);
            transition: all 0.3s;
            padding-top: 14px;
            padding-right: 20px;
            padding-bottom: 14px;
            padding-left: 20px
        }

        :root .bricks-button[class*="light"]:not(.bricks-lightbox) {
            font-size: 16px;
            color: #ffffff;
            font-weight: 600;
            line-height: 1.25;
            border: 1px solid #9da4ae;
            border-radius: 8px
        }

        :root .bricks-button[class*="light"]:not(.outline):not(.bricks-lightbox) {
            background-color: rgba(0, 0, 0, 0)
        }

        .bricks-button.md {
            font-size: 16px
        }

        .bricks-button.sm {
            padding-top: 12px;
            padding-right: 16px;
            padding-bottom: 12px;
            padding-left: 16px
        }

        .bricks-button.lg {
            padding-top: 16px;
            padding-right: 24px;
            padding-bottom: 16px;
            padding-left: 24px
        }

        .brxe-form .form-group input {
            border-radius: 14px
        }

        .brxe-form .flatpickr {
            border-radius: 14px
        }

        .brxe-form select {
            border-radius: 14px
        }

        .brxe-form textarea {
            border-radius: 14px
        }

        .brxe-form .bricks-button {
            border-radius: 14px
        }

        .brxe-form .choose-files {
            border-radius: 14px
        }

        @media (max-width: 767px) {
            :root .bricks-button[class*="light"]:not(.bricks-lightbox) {
                font-size: 18px
            }
        }

        @media (max-width: 478px) {
            .bricks-button {
                font-size: 16px
            }

            :root .bricks-button[class*="light"]:not(.bricks-lightbox) {
                font-size: 14px
            }
        }

        .overlay-line:before {
            bottom: -1px !important;
        }

        :root {
            --bricks-color-2d93d0: #f5f5f5;
            --bricks-color-1700e1: #e0e0e0;
            --bricks-color-8c3664: #9e9e9e;
            --bricks-color-b11a5b: #616161;
            --bricks-color-6a2d91: #424242;
            --bricks-color-8d98cc: #212121;
            --bricks-color-49af18: #ffeb3b;
            --bricks-color-9b330b: #ffc107;
            --bricks-color-3c49ed: #ff9800;
            --bricks-color-c0e8de: #ff5722;
            --bricks-color-09740f: #f44336;
            --bricks-color-08fbf0: #9c27b0;
            --bricks-color-2c5bf5: #2196f3;
            --bricks-color-fc2603: #03a9f4;
            --bricks-color-dd779d: #81D4FA;
            --bricks-color-86c91f: #4caf50;
            --bricks-color-4ee077: #8bc34a;
            --bricks-color-168b8f: #cddc39;
            --bricks-color-sgxved: #292643;
            --bricks-color-ecjtdt: #e03d1e;
            --bricks-color-qgmzac: #f38230;
            --bricks-color-gxvlol: #0d0421;
            --bricks-color-gjxbvx: #ededf3;
            --bricks-color-csvmmc: #ffffff;
            --bricks-color-ribhdx: #000000;
            --bricks-color-klbxns: #9da4ae;
            --bricks-color-qltrdz: #f86e00;
            --bricks-color-kvyhlx: rgba(252, 182, 10, 0.29);
            --bricks-color-oymoye: rgba(254, 212, 14, 0);
            --bricks-color-oudukw: #0d0421;
            --bricks-color-huqhzn: #0d0421;
            --bricks-color-shktmv: rgba(13, 4, 33, 0.4);
            --bricks-color-invwkc: rgba(13, 4, 33, 0.1);
            --bricks-color-gcvncq: rgba(13, 4, 33, 0);
        }

        #brxe-heconf {
            width: 117px
        }

        #brxe-tcgagu {
            display: none;
            width: 117px
        }

        #brxe-excvid {
            width: auto
        }

        #brxe-obiwxv .bricks-nav-menu>li>a {
            padding-top: 0;
            padding-right: 0;
            padding-bottom: 0;
            padding-left: 0;
            font-size: 16px;
            line-height: 1.5;
            color: #000000
        }

        #brxe-obiwxv .bricks-nav-menu>li>.brx-submenu-toggle>* {
            padding-top: 0;
            padding-right: 0;
            padding-bottom: 0;
            padding-left: 0;
            font-size: 16px;
            line-height: 1.5;
            color: #000000
        }

        #brxe-obiwxv .bricks-nav-menu>li {
            margin-top: 0;
            margin-right: 0;
            margin-bottom: 0;
            margin-left: 32px
        }

        #brxe-obiwxv .bricks-nav-menu .sub-menu {
            background-color: #ffffff;
            border-radius: 12px;
            box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.15)
        }

        #brxe-obiwxv .bricks-nav-menu .sub-menu>li>a {
            font-size: 16px;
            line-height: 1.5;
            color: #000000
        }

        #brxe-obiwxv .bricks-nav-menu .sub-menu>li>.brx-submenu-toggle>* {
            font-size: 16px;
            line-height: 1.5;
            color: #000000
        }

        #brxe-obiwxv .bricks-nav-menu>li>.sub-menu {
            transform: translateY(12px)
        }

        #brxe-obiwxv .bricks-nav-menu>li>.brx-megamenu {
            transform: translateY(12px)
        }

        #brxe-obiwxv .bricks-nav-menu .sub-menu a {
            padding-top: 0;
            padding-right: 0;
            padding-bottom: 0;
            padding-left: 0
        }

        #brxe-obiwxv .bricks-nav-menu .sub-menu button {
            padding-top: 0;
            padding-right: 0;
            padding-bottom: 0;
            padding-left: 0
        }

        #brxe-obiwxv .bricks-nav-menu>li.menu-item-has-children>.brx-submenu-toggle button[aria-expanded] {
            font-size: 10px;
            color: #000000
        }

        .header-light #brxe-obiwxv .bricks-nav-menu>li>a,
        .header-light #brxe-obiwxv .bricks-nav-menu>li .brx-submenu-toggle>a,
        .header-light #brxe-obiwxv .bricks-nav-menu>li .brx-submenu-toggle button i {
            color: #fff;
        }

        #brxe-obiwxv>.menu-item-has-children>.brx-submenu-toggle>a {
            padding-right: 0;
        }

        #brxe-obiwxv li a {
            border-bottom: 1px solid transparent;
        }

        #brxe-obiwxv li:hover>a,
        #brxe-obiwxv li:hover>.brx-submenu-toggle>a,
        #brxe-obiwxv li.current-menu-ancestor>.brx-submenu-toggle>a,
        #brxe-obiwxv .bricks-nav-menu .current-menu-item>a,
        #brxe-obiwxv li.current-menu-item>a {
            border-bottom-color: #000;
        }

        .header-light #brxe-obiwxv .bricks-nav-menu>li:hover>a,
        .header-light #brxe-obiwxv .bricks-nav-menu>li:hover>.brx-submenu-toggle>a,
        .header-light #brxe-obiwxv .bricks-nav-menu>li.current-menu-ancestor>.brx-submenu-toggle>a,
        .header-light #brxe-obiwxv .bricks-nav-menu>.bricks-nav-menu .current-menu-item>a,
        .header-light #brxe-obiwxv .bricks-nav-menu>li.current-menu-item>a {
            border-bottom-color: #fff;
        }

        #brxe-obiwxv .sub-menu {
            padding: 16px;
        }

        #brxe-obiwxv .sub-menu li {
            width: auto;
            display: flex;
        }

        #brxe-obiwxv .sub-menu li a {
            width: auto;
        }

        #brxe-obiwxv .sub-menu li+li {
            margin-top: 12px;
        }

        @media (max-width: 1199px) {
            #brxe-obiwxv .bricks-nav-menu>li {
                margin-left: 24px
            }
        }

        #brxe-euafom {
            font-size: 16px;
            line-height: 1.5
        }

        #brxe-dikwfp {
            width: auto;
            flex-direction: row;
            align-items: center;
            column-gap: 24px
        }

        @media (max-width: 991px) {
            #brxe-dikwfp {
                display: none
            }
        }

        #brxe-ikrywt {
            width: 40px;
            height: 40px;
            padding-top: 0;
            padding-right: 0;
            padding-bottom: 0;
            padding-left: 0;
            position: relative;
            cursor: pointer;
            border-radius: 0;
            background-color: rgba(0, 0, 0, 0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0)
        }

        #brxe-ikrywt:before {
            width: 100%;
            height: 2px;
            position: absolute;
            top: calc(50% - 3px);
            background-color: #000000;
            left: 0px;
            content: '';
            transition: all 0.3s
        }

        #brxe-ikrywt:after {
            width: 100%;
            height: 2px;
            position: absolute;
            top: calc(50% + 3px);
            content: '';
            left: 0px;
            background-color: #000000;
            transition: all 0.3s
        }

        #brxe-ikrywt.active::before {
            transform: rotate(45deg);
            top: calc(50% - 1px);
        }

        #brxe-ikrywt.active::after {
            transform: rotate(-45deg);
            top: calc(50% - 1px);
        }

        #brxe-hhafin {
            width: auto;
            display: none
        }

        @media (max-width: 991px) {
            #brxe-hhafin {
                display: flex
            }
        }

        #brxe-zhnncx {
            padding-top: 16px;
            padding-right: 24px;
            padding-bottom: 16px;
            padding-left: 24px;
            width: 100%;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            min-height: 80px
        }

        @media (max-width: 991px) {
            #brxe-zhnncx {
                padding-top: 10px;
                padding-bottom: 10px;
                min-height: 60px
            }
        }

        #brxe-rcdtem .bricks-nav-menu>li>a {
            padding-top: 0;
            padding-right: 0;
            padding-bottom: 0;
            padding-left: 0;
            font-size: 24px;
            line-height: 1.5;
            color: #000000
        }

        #brxe-rcdtem .bricks-nav-menu>li>.brx-submenu-toggle>* {
            padding-top: 0;
            padding-right: 0;
            padding-bottom: 0;
            padding-left: 0;
            font-size: 24px;
            line-height: 1.5;
            color: #000000
        }

        #brxe-rcdtem .bricks-nav-menu>li {
            margin-top: 32px;
            margin-right: 0;
            margin-bottom: 0;
            margin-left: 0
        }

        #brxe-rcdtem .bricks-nav-menu .sub-menu>li>a {
            font-size: 20px;
            line-height: 1.5;
            color: #000000
        }

        #brxe-rcdtem .bricks-nav-menu .sub-menu>li>.brx-submenu-toggle>* {
            font-size: 20px;
            line-height: 1.5;
            color: #000000
        }

        #brxe-rcdtem .bricks-nav-menu .sub-menu a {
            padding-top: 0;
            padding-right: 0;
            padding-bottom: 0;
            padding-left: 0
        }

        #brxe-rcdtem .bricks-nav-menu .sub-menu button {
            padding-top: 0;
            padding-right: 0;
            padding-bottom: 0;
            padding-left: 0
        }

        #brxe-rcdtem .bricks-nav-menu>li.menu-item-has-children>.brx-submenu-toggle button[aria-expanded] {
            font-size: 10px;
            color: #000000
        }

        #brxe-rcdtem .bricks-nav-menu {
            flex-direction: column
        }

        #brxe-rcdtem {
            width: 100%;
            padding-right: 24px;
            padding-bottom: 32px;
            padding-left: 24px;
            border-top: 1px solid #d4d4d4;
            border-bottom: 1px solid #d4d4d4
        }

        #brxe-rcdtem .bricks-nav-menu .sub-menu {
            background-color: rgba(0, 0, 0, 0)
        }

        #brxe-rcdtem .bricks-nav-menu .sub-menu>.current-menu-item>a {
            border-bottom: 1px solid #000000;
            font-weight: 600
        }

        #brxe-rcdtem .bricks-nav-menu .sub-menu>.current-menu-item>.brx-submenu-toggle {
            border-bottom: 1px solid #000000
        }

        #brxe-rcdtem .bricks-nav-menu .sub-menu>.current-menu-ancestor>a {
            border-bottom: 1px solid #000000;
            font-weight: 600
        }

        #brxe-rcdtem .bricks-nav-menu .sub-menu>.current-menu-ancestor>.brx-submenu-toggle {
            border-bottom: 1px solid #000000
        }

        #brxe-rcdtem .bricks-nav-menu .current-menu-item>a {
            font-weight: 600
        }

        #brxe-rcdtem .bricks-nav-menu .current-menu-item>.brx-submenu-toggle>* {
            font-weight: 600
        }

        #brxe-rcdtem .bricks-nav-menu>.current-menu-parent>a {
            font-weight: 600
        }

        #brxe-rcdtem .bricks-nav-menu>.current-menu-parent>.brx-submenu-toggle>* {
            font-weight: 600
        }

        #brxe-rcdtem .bricks-nav-menu>.current-menu-ancestor>a {
            font-weight: 600
        }

        #brxe-rcdtem .bricks-nav-menu>.current-menu-ancestor>.brx-submenu-toggle>* {
            font-weight: 600
        }

        #brxe-rcdtem .bricks-nav-menu .sub-menu>.current-menu-item>.brx-submenu-toggle>* {
            font-weight: 600
        }

        #brxe-rcdtem .bricks-nav-menu .sub-menu>.current-menu-ancestor>.brx-submenu-toggle>* {
            font-weight: 600
        }

        #brxe-rcdtem {
            max-height: calc(100vh - 200px);
            overflow-y: auto;
        }

        #brxe-rcdtem .sub-menu li+li {
            margin-top: 24px;
        }

        #brxe-rcdtem .sub-menu {
            padding: 24px 24px 0 24px;
            display: block;
            opacity: 1;
            visibility: visible;
            pointer-events: visible;
        }

        #brxe-rcdtem .menu-item-has-children>.brx-submenu-toggle>button {
            display: none;
        }

        #brxe-rcdtem li {
            width: auto;
            display: flex;
            align-items: flex-start;
        }

        #brxe-rcdtem .menu-item-has-children>.brx-submenu-toggle>a {
            padding-right: 0;
        }

        #brxe-rcdtem li a {
            border-bottom: 1px solid transparent;
        }

        #brxe-rcdtem li.current-menu-ancestor>.brx-submenu-toggle>a,
        #brxe-rcdtem .bricks-nav-menu .current-menu-item>a {
            border-bottom-color: #000;
        }

        #brxe-rcdtem li a {
            width: auto;
        }

        #brxe-sivrqp {
            font-size: 18px;
            font-weight: 400
        }

        #brxe-cojohe {
            font-size: 16px;
            line-height: 1.5
        }

        #brxe-gkagld {
            flex-direction: row;
            align-items: center;
            column-gap: 10px;
            padding-top: 16px;
            padding-right: 24px;
            padding-bottom: 16px;
            padding-left: 24px
        }

        #brxe-bsueod {
            padding-right: 0;
            padding-left: 0;
            width: 100%;
            display: none;
            background-color: #ffffff
        }

        @media (max-width: 991px) {
            #brxe-bsueod {
                padding-right: 0;
                padding-left: 0
            }
        }

        #brxe-fanzgd {
            background-color: rgba(255, 255, 255, 0.01)
        }

        .header-light #brxe-fanzgd .btn-toggle:before,
        .header-light #brxe-fanzgd .btn-toggle:after {
            background: #fff;
        }

        .header-light #brxe-fanzgd {
            background: rgba(0, 0, 0, 0.3);
        }

        #brxe-fanzgd {
            backdrop-filter: blur(16px);
            transition: all 0.3s !important;
        }

        .header-light .header-logo-black {
            display: none;
        }

        .header-light .header-logo-white {
            display: block !important;
        }

        @media screen and (min-width: 992px) {
            .header-light #brxe-fanzgd .brxe-wpml-language-switcher {
                color: #fff;
            }
        }

        @media screen and (max-width: 991px) {
            #brx-header.show-nav>#brxe-fanzgd {
                background: #fff;
                backdrop-filter: none;
                height: 100vh;
            }

            #brx-header.show-nav .menu-mobile {
                display: block;
            }

            .header-light #brx-header.show-nav #brxe-fanzgd .btn-toggle:before,
            .header-light #brx-header.show-nav #brxe-fanzgd .btn-toggle:after {
                background: #000;
            }

            .header-light #brx-header.show-nav .header-logo-black {
                display: block;
            }

            .header-light #brx-header.show-nav .header-logo-white {
                display: none !important;
            }
        }

        #brxe-itkaec {
            color: #9da4ae;
            font-size: 18px;
            line-height: 1.55;
            font-weight: 600
        }

        #brxe-jzgkgj {
            font-size: 128px;
            font-weight: 200;
            line-height: 1.15;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-image: linear-gradient(301.19deg, #f4b055 37.55%, #6bcdef 75.06%);
            padding-bottom: 10px;
            margin-bottom: 230px
        }

        @media (max-width: 1199px) {
            #brxe-jzgkgj {
                font-size: 100px;
                margin-bottom: 200px
            }
        }

        @media (max-width: 991px) {
            #brxe-jzgkgj {
                font-size: 76px;
                margin-bottom: 150px
            }
        }

        @media (max-width: 767px) {
            #brxe-jzgkgj {
                font-size: 56px;
                margin-bottom: 100px
            }
        }

        @media (max-width: 478px) {
            #brxe-jzgkgj {
                font-size: 38px;
                margin-bottom: 50px
            }
        }

        #brxe-duttfq {
            max-width: 926px;
            align-self: center;
            text-align: center;
            color: #ffffff;
            font-size: 48px;
            line-height: 1.25;
            font-weight: 300;
            margin-bottom: 30px
        }

        #brxe-duttfq a {
            text-align: center;
            color: #ffffff;
            font-size: 48px;
            line-height: 1.25;
            font-weight: 300;
            font-size: inherit
        }

        @media (max-width: 1199px) {
            #brxe-duttfq {
                font-size: 40px
            }

            #brxe-duttfq a {
                font-size: 40px;
                font-size: inherit
            }
        }

        @media (max-width: 991px) {
            #brxe-duttfq {
                font-size: 32px
            }

            #brxe-duttfq a {
                font-size: 32px;
                font-size: inherit
            }
        }

        @media (max-width: 767px) {
            #brxe-duttfq {
                font-size: 24px;
                margin-bottom: 20px
            }

            #brxe-duttfq a {
                font-size: 24px;
                font-size: inherit
            }
        }

        @media (max-width: 478px) {
            #brxe-duttfq {
                font-size: 20px
            }

            #brxe-duttfq a {
                font-size: 20px;
                font-size: inherit
            }
        }

        #brxe-kcvjna {
            max-width: 926px;
            align-self: center;
            text-align: center;
            color: #ffffff;
            font-size: 48px;
            line-height: 1.25;
            font-weight: 300;
            margin-bottom: 80px;
            width: 85%
        }

        #brxe-kcvjna a {
            text-align: center;
            color: #ffffff;
            font-size: 48px;
            line-height: 1.25;
            font-weight: 300;
            font-size: inherit
        }

        @media (max-width: 1199px) {
            #brxe-kcvjna {
                font-size: 40px
            }

            #brxe-kcvjna a {
                font-size: 40px;
                font-size: inherit
            }
        }

        @media (max-width: 991px) {
            #brxe-kcvjna {
                font-size: 32px
            }

            #brxe-kcvjna a {
                font-size: 32px;
                font-size: inherit
            }
        }

        @media (max-width: 767px) {
            #brxe-kcvjna {
                font-size: 24px;
                margin-bottom: 60px
            }

            #brxe-kcvjna a {
                font-size: 24px;
                font-size: inherit
            }
        }

        @media (max-width: 478px) {
            #brxe-kcvjna {
                font-size: 20px;
                margin-bottom: 40px
            }

            #brxe-kcvjna a {
                font-size: 20px;
                font-size: inherit
            }
        }

        #brxe-repdix {
            align-items: center;
            align-self: center;
            max-width: 90%
        }

        @media (max-width: 767px) {
            #brxe-repdix {
                max-width: 70%
            }
        }

        #brxe-sjiztd {
            background-color: #0d0421;
            background-image: url("");
            background-position: top center;
            background-size: 100%;
            background-repeat: no-repeat;
            padding-top: 210px
        }

        @media (max-width: 767px) {
            #brxe-sjiztd {
                padding-top: 120px
            }
        }

        @media (max-width: 478px) {
            #brxe-sjiztd {
                padding-top: 100px;
                background-position: 50% 50%
            }
        }

        #brxe-mwwrbb {
            font-size: 128px;
            font-weight: 200;
            line-height: 1.15;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-image: linear-gradient(305.57deg, #e99e75 24.94%, #292643 47.94%);
            padding-bottom: 10px;
            margin-bottom: 60px
        }

        @media (max-width: 1199px) {
            #brxe-mwwrbb {
                font-size: 100px
            }
        }

        @media (max-width: 991px) {
            #brxe-mwwrbb {
                font-size: 76px;
                margin-bottom: 40px
            }
        }

        @media (max-width: 767px) {
            #brxe-mwwrbb {
                font-size: 56px
            }
        }

        @media (max-width: 478px) {
            #brxe-mwwrbb {
                font-size: 38px;
                margin-bottom: 30px
            }
        }

        #brxe-jpdgke {
            font-size: 48px;
            font-weight: 600;
            line-height: 1.25;
            margin-bottom: 16px
        }

        @media (max-width: 1199px) {
            #brxe-jpdgke {
                font-size: 36px
            }
        }

        @media (max-width: 991px) {
            #brxe-jpdgke {
                font-size: 30px
            }
        }

        @media (max-width: 767px) {
            #brxe-jpdgke {
                font-size: 28px
            }
        }

        @media (max-width: 478px) {
            #brxe-jpdgke {
                margin-bottom: 12px
            }
        }

        #brxe-nhbiyg {
            font-size: 18px;
            line-height: 1.55;
            max-width: 270px;
            margin-bottom: 38px
        }

        @media (max-width: 991px) {
            #brxe-nhbiyg {
                font-size: 16px;
                max-width: 251px
            }
        }

        @media (max-width: 767px) {
            #brxe-nhbiyg {
                font-size: 16px
            }
        }

        @media (max-width: 478px) {
            #brxe-nhbiyg {
                max-width: 245px
            }
        }

        #brxe-bqcddp {
            width: 100%
        }

        #brxe-ggduic {
            background-color: #ffffff;
            background-position: center right;
            background-size: auto;
            background-repeat: no-repeat;
            border-radius: 42px;
            background-image: linear-gradient(117.02deg, #ffffff 21.69%, #bfc7fd 108.1%);
            min-height: 480px;
            padding-top: 42px;
            padding-right: 42px;
            padding-bottom: 42px;
            padding-left: 42px;
            justify-content: center;
            position: relative;
            z-index: 1
        }

        @media (max-width: 991px) {
            #brxe-ggduic {
                padding-top: 30px;
                padding-right: 30px;
                padding-bottom: 30px;
                padding-left: 30px;
                min-height: 360px
            }
        }

        @media (max-width: 767px) {
            #brxe-ggduic {
                min-height: 73vw;
                border-radius: 32px
            }
        }

        @media (max-width: 478px) {
            #brxe-ggduic {
                border-radius: 24px;
                padding-top: 24px;
                padding-right: 24px;
                padding-bottom: 24px;
                padding-left: 24px;
                min-height: 80vw
            }
        }

        #brxe-jujxwf {
            font-size: 48px;
            font-weight: 600;
            line-height: 1.25;
            margin-bottom: 16px
        }

        @media (max-width: 1199px) {
            #brxe-jujxwf {
                font-size: 36px
            }
        }

        @media (max-width: 991px) {
            #brxe-jujxwf {
                font-size: 30px
            }
        }

        @media (max-width: 767px) {
            #brxe-jujxwf {
                font-size: 28px
            }
        }

        @media (max-width: 478px) {
            #brxe-jujxwf {
                margin-bottom: 12px
            }
        }

        #brxe-lnyyrb {
            font-size: 18px;
            line-height: 1.55;
            text-align: center;
            max-width: 275px
        }

        @media (max-width: 991px) {
            #brxe-lnyyrb {
                font-size: 16px
            }
        }

        @media (max-width: 767px) {
            #brxe-lnyyrb {
                font-size: 16px
            }
        }

        @media (max-width: 478px) {
            #brxe-lnyyrb {
                max-width: 100%
            }
        }

        #brxe-ardohu {
            position: absolute;
            z-index: -1;
            transform: translateX(-50%);
            left: 50%;
            top: 0px;
            max-width: 69%;
            width: 100%;
            bottom: auto;
            height: auto
        }

        #brxe-dwisdj {
            background-color: #ffffff;
            background-position: center right;
            background-size: auto;
            background-repeat: no-repeat;
            border-radius: 42px;
            background-image: linear-gradient(180deg, #eeedf1 0%, #ffffff 100%);
            min-height: 480px;
            padding-top: 42px;
            padding-right: 42px;
            padding-bottom: 42px;
            padding-left: 42px;
            position: relative;
            z-index: 1;
            align-items: center;
            justify-content: flex-end
        }

        @media (max-width: 991px) {
            #brxe-dwisdj {
                padding-top: 30px;
                padding-right: 30px;
                padding-bottom: 30px;
                padding-left: 30px;
                min-height: 360px
            }
        }

        @media (max-width: 767px) {
            #brxe-dwisdj {
                min-height: 73vw;
                border-radius: 32px
            }
        }

        @media (max-width: 478px) {
            #brxe-dwisdj {
                border-radius: 24px;
                padding-top: 24px;
                padding-right: 24px;
                padding-bottom: 24px;
                padding-left: 24px;
                min-height: 80vw
            }
        }

        #brxe-kibtvp {
            font-size: 48px;
            font-weight: 600;
            line-height: 1.25;
            margin-bottom: 16px
        }

        @media (max-width: 1199px) {
            #brxe-kibtvp {
                font-size: 36px
            }
        }

        @media (max-width: 991px) {
            #brxe-kibtvp {
                font-size: 30px
            }
        }

        @media (max-width: 767px) {
            #brxe-kibtvp {
                font-size: 28px
            }
        }

        @media (max-width: 478px) {
            #brxe-kibtvp {
                margin-bottom: 12px
            }
        }

        #brxe-bzcxbj {
            font-size: 18px;
            line-height: 1.55;
            text-align: center;
            max-width: 360px
        }

        @media (max-width: 991px) {
            #brxe-bzcxbj {
                font-size: 16px
            }
        }

        @media (max-width: 767px) {
            #brxe-bzcxbj {
                font-size: 16px
            }
        }

        @media (max-width: 478px) {
            #brxe-bzcxbj {
                max-width: 100%
            }
        }

        #brxe-zulnfy {
            z-index: -1;
            width: 100%;
            max-width: 80%;
            position: static;
            margin-top: auto;
            transform: translateX(13%)
        }

        #brxe-olrwmn {
            background-color: #ffffff;
            background-position: center right;
            background-size: auto;
            background-repeat: no-repeat;
            border-radius: 42px;
            background-image: linear-gradient(29.47deg, #fdfcfb 30.56%, #e2d1c3 115.25%);
            min-height: 480px;
            padding-top: 42px;
            padding-right: 42px;
            padding-left: 43px;
            position: relative;
            z-index: 1;
            align-items: center;
            height: auto;
            justify-content: space-between
        }

        @media (max-width: 991px) {
            #brxe-olrwmn {
                padding-top: 30px;
                padding-right: 30px;
                padding-left: 30px;
                min-height: 360px
            }
        }

        @media (max-width: 767px) {
            #brxe-olrwmn {
                border-radius: 32px;
                min-height: 73vw
            }
        }

        @media (max-width: 478px) {
            #brxe-olrwmn {
                border-radius: 24px;
                padding-top: 24px;
                padding-right: 24px;
                padding-left: 24px;
                min-height: 80vw
            }
        }

        #brxe-ezutqe {
            font-size: 48px;
            font-weight: 600;
            line-height: 1.25;
            margin-bottom: 16px;
            max-width: 210px
        }

        @media (max-width: 1199px) {
            #brxe-ezutqe {
                font-size: 36px
            }
        }

        @media (max-width: 991px) {
            #brxe-ezutqe {
                font-size: 30px
            }
        }

        @media (max-width: 767px) {
            #brxe-ezutqe {
                font-size: 28px
            }
        }

        @media (max-width: 478px) {
            #brxe-ezutqe {
                margin-bottom: 12px
            }
        }

        #brxe-nohlji {
            font-size: 18px;
            line-height: 1.55;
            max-width: 275px
        }

        @media (max-width: 991px) {
            #brxe-nohlji {
                max-width: 55%;
                font-size: 16px
            }
        }

        @media (max-width: 767px) {
            #brxe-nohlji {
                font-size: 16px
            }
        }

        @media (max-width: 478px) {
            #brxe-nohlji {
                max-width: 58%
            }
        }

        #brxe-fpxixg {
            position: absolute;
            z-index: -1;
            right: 0px;
            top: 50%;
            transform: translateY(-50%);
            mix-blend-mode: multiply;
            max-width: 63%;
            height: auto
        }

        @media (max-width: 767px) {
            #brxe-fpxixg {
                max-width: 60%
            }
        }

        #brxe-sborfu {
            background-color: #ffffff;
            background-position: center right;
            background-size: auto;
            background-repeat: no-repeat;
            border-radius: 42px;
            background-image: linear-gradient(180deg, #ffffff 0%, #ffe6fa 100%);
            min-height: 480px;
            padding-top: 42px;
            padding-right: 42px;
            padding-bottom: 42px;
            padding-left: 42px;
            justify-content: center;
            position: relative;
            z-index: 1
        }

        @media (max-width: 991px) {
            #brxe-sborfu {
                padding-top: 30px;
                padding-right: 30px;
                padding-bottom: 30px;
                padding-left: 30px;
                min-height: 360px
            }
        }

        @media (max-width: 767px) {
            #brxe-sborfu {
                min-height: 73vw;
                border-radius: 32px
            }
        }

        @media (max-width: 478px) {
            #brxe-sborfu {
                border-radius: 24px;
                padding-top: 24px;
                padding-right: 24px;
                padding-bottom: 24px;
                padding-left: 24px;
                min-height: 80vw
            }
        }

        #brxe-zugumj {
            font-size: 48px;
            font-weight: 600;
            line-height: 1.25;
            margin-bottom: 16px;
            max-width: 400px
        }

        @media (max-width: 1199px) {
            #brxe-zugumj {
                font-size: 36px
            }
        }

        @media (max-width: 767px) {
            #brxe-zugumj {
                font-size: 28px
            }
        }

        @media (max-width: 478px) {
            #brxe-zugumj {
                margin-bottom: 12px
            }
        }

        #brxe-dwplun {
            font-size: 18px;
            line-height: 1.55
        }

        @media (max-width: 767px) {
            #brxe-dwplun {
                font-size: 16px
            }
        }

        #brxe-vsvwah {
            position: absolute;
            z-index: -1;
            right: 27px;
            bottom: 0px;
            max-width: 46%;
            height: auto
        }

        @media (max-width: 767px) {
            #brxe-vsvwah {
                max-width: 50%
            }
        }

        #brxe-syxupc {
            background-color: #ffffff;
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
            background-image: url({{ asset('images/') }}2024/10/06.png);
            border-radius: 42px;
            padding-top: 42px;
            padding-right: 42px;
            padding-bottom: 42px;
            padding-left: 42px;
            justify-content: center;
            position: relative;
            z-index: 1;
            grid-column: 1/3;
            min-height: 380px;
            margin-top: 80px
        }

        @media (max-width: 1199px) {
            #brxe-syxupc {
                margin-top: 8vw
            }
        }

        @media (max-width: 991px) {
            #brxe-syxupc {
                padding-top: 30px;
                padding-right: 30px;
                padding-bottom: 30px;
                padding-left: 30px;
                min-height: 360px;
                margin-top: 5vw
            }
        }

        @media (max-width: 767px) {
            #brxe-syxupc {
                min-height: 73vw;
                border-radius: 32px;
                justify-content: flex-start;
                margin-top: 0;
                grid-column: 1/2
            }
        }

        @media (max-width: 478px) {
            #brxe-syxupc {
                border-radius: 24px;
                padding-top: 24px;
                padding-right: 24px;
                padding-bottom: 24px;
                padding-left: 24px;
                min-height: 80vw
            }
        }

        #brxe-sbqflx {
            flex-direction: row;
            column-gap: 32px;
            row-gap: 48px;
            display: grid;
            align-items: initial;
            grid-template-columns: 1fr 1fr;
            grid-gap: 48px 32px
        }

        @media (max-width: 767px) {
            #brxe-sbqflx {
                grid-template-columns: 1fr
            }
        }

        @media (max-width: 478px) {
            #brxe-sbqflx {
                grid-gap: 30px
            }
        }

        #brxe-frstdr {
            padding-top: 120px;
            padding-bottom: 120px;
            background-color: #ededf3;
            background-image: url({{ asset('images/') }}2024/10/bg-1.png);
            background-size: 100%;
            background-position: 50% 40%
        }

        @media (max-width: 991px) {
            #brxe-frstdr {
                padding-top: 80px;
                padding-bottom: 80px
            }
        }

        @media (max-width: 767px) {
            #brxe-frstdr {
                background-position: 130% -3%;
                background-repeat: no-repeat;
                background-size: 60%
            }
        }

        @media (max-width: 478px) {
            #brxe-frstdr {
                padding-top: 60px;
                padding-bottom: 60px
            }
        }

        #brxe-lsfdmj {
            font-size: 48px;
            line-height: 1.25;
            font-weight: 300;
            color: #ffffff;
            max-width: 926px
        }

        @media (max-width: 1199px) {
            #brxe-lsfdmj {
                font-size: 40px;
                max-width: 80%
            }
        }

        @media (max-width: 991px) {
            #brxe-lsfdmj {
                font-size: 32px
            }
        }

        @media (max-width: 767px) {
            #brxe-lsfdmj {
                font-size: 26px
            }
        }

        @media (max-width: 478px) {
            #brxe-lsfdmj {
                max-width: 100%;
                font-size: 24px
            }
        }

        #brxe-pxfcye {
            width: 100%;
            margin-top: -3vw;
            margin-bottom: -10vw;
            position: relative;
            z-index: -1
        }

        :where(#brxe-pxfcye > *) {
            position: relative
        }

        #brxe-pxfcye::before {
            background-image: linear-gradient(180deg, #0d0421 8.63%, rgba(13, 4, 33, 0.4) 26.9%, rgba(13, 4, 33, 0.1) 45.18%, rgba(13, 4, 33, 0.1) 63.45%, rgba(13, 4, 33, 0.4) 81.73%, #0d0421 100%);
            position: absolute;
            content: "";
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            pointer-events: none
        }

        #brxe-adezjd {
            font-size: 128px;
            font-weight: 200;
            line-height: 1.15;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-image: linear-gradient(301.19deg, #f4b055 37.55%, #6bcdef 75.06%);
            padding-bottom: 10px
        }

        @media (max-width: 1199px) {
            #brxe-adezjd {
                font-size: 100px
            }
        }

        @media (max-width: 991px) {
            #brxe-adezjd {
                font-size: 76px
            }
        }

        @media (max-width: 767px) {
            #brxe-adezjd {
                font-size: 56px
            }
        }

        @media (max-width: 478px) {
            #brxe-adezjd {
                font-size: 38px
            }
        }

        #brxe-spzlgx {
            margin-bottom: 68px
        }

        @media (max-width: 767px) {
            #brxe-spzlgx {
                margin-bottom: 40px
            }
        }

        #brxe-ixigiz {
            font-size: 36px;
            font-weight: 600;
            line-height: 1.25;
            color: #ffffff;
            margin-bottom: 16px
        }

        @media (max-width: 1199px) {
            #brxe-ixigiz {
                font-size: 32px
            }
        }

        @media (max-width: 991px) {
            #brxe-ixigiz {
                font-size: 26px
            }
        }

        @media (max-width: 767px) {
            #brxe-ixigiz {
                font-size: 24px
            }
        }

        @media (max-width: 478px) {
            #brxe-ixigiz {
                margin-bottom: 12px
            }
        }

        #brxe-kgufvs {
            color: #9da4ae;
            font-weight: 400;
            font-size: 18px;
            line-height: 1.55
        }

        #brxe-kgufvs a {
            color: #9da4ae;
            font-weight: 400;
            font-size: 18px;
            line-height: 1.55;
            font-size: inherit
        }

        @media (max-width: 991px) {
            #brxe-kgufvs {
                font-size: 16px
            }

            #brxe-kgufvs a {
                font-size: 16px;
                font-size: inherit
            }
        }

        #brxe-wstusf {
            width: 37%;
            background-image: linear-gradient(108.46deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
            border-radius: 24px;
            padding-top: 42px;
            padding-right: 42px;
            padding-bottom: 42px;
            padding-left: 42px
        }

        #brxe-wstusf {
            backdrop-filter: blur(20.163267135620117px);
        }

        @media (max-width: 1199px) {
            #brxe-wstusf {
                min-height: 300px
            }
        }

        @media (max-width: 991px) {
            #brxe-wstusf {
                min-height: 0px
            }
        }

        @media (max-width: 767px) {
            #brxe-wstusf {
                width: 100%;
                padding-top: 30px;
                padding-right: 30px;
                padding-bottom: 30px;
                padding-left: 30px;
                border-radius: 12px
            }
        }

        #brxe-ipotsu {
            font-size: 36px;
            font-weight: 600;
            line-height: 1.25;
            color: #ffffff;
            margin-bottom: 16px
        }

        @media (max-width: 1199px) {
            #brxe-ipotsu {
                font-size: 32px
            }
        }

        @media (max-width: 991px) {
            #brxe-ipotsu {
                font-size: 26px
            }
        }

        @media (max-width: 767px) {
            #brxe-ipotsu {
                font-size: 24px
            }
        }

        @media (max-width: 478px) {
            #brxe-ipotsu {
                margin-bottom: 12px
            }
        }

        #brxe-ggyoqg {
            color: #9da4ae;
            font-weight: 400;
            font-size: 18px;
            line-height: 1.55
        }

        #brxe-ggyoqg a {
            color: #9da4ae;
            font-weight: 400;
            font-size: 18px;
            line-height: 1.55;
            font-size: inherit
        }

        @media (max-width: 991px) {
            #brxe-ggyoqg {
                font-size: 16px
            }

            #brxe-ggyoqg a {
                font-size: 16px;
                font-size: inherit
            }
        }

        #brxe-vrjunq {
            width: 63%;
            background-image: linear-gradient(108.46deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
            border-radius: 24px;
            padding-top: 42px;
            padding-right: 42px;
            padding-bottom: 42px;
            padding-left: 42px
        }

        #brxe-vrjunq {
            backdrop-filter: blur(20.163267135620117px);
        }

        @media (max-width: 1199px) {
            #brxe-vrjunq {
                min-height: 300px
            }
        }

        @media (max-width: 991px) {
            #brxe-vrjunq {
                min-height: 0px
            }
        }

        @media (max-width: 767px) {
            #brxe-vrjunq {
                width: 100%;
                padding-top: 30px;
                padding-right: 30px;
                padding-bottom: 30px;
                padding-left: 30px;
                border-radius: 12px
            }
        }

        #brxe-oigwti {
            flex-direction: row;
            column-gap: 32px;
            row-gap: 32px;
            align-items: stretch;
            margin-bottom: 36px
        }

        @media (max-width: 991px) {
            #brxe-oigwti {
                column-gap: 30px;
                row-gap: 30px;
                margin-bottom: 30px
            }
        }

        #brxe-rerfpt {
            font-size: 36px;
            font-weight: 600;
            line-height: 1.25;
            color: #ffffff;
            margin-bottom: 16px
        }

        @media (max-width: 1199px) {
            #brxe-rerfpt {
                font-size: 32px
            }
        }

        @media (max-width: 991px) {
            #brxe-rerfpt {
                font-size: 26px
            }
        }

        @media (max-width: 767px) {
            #brxe-rerfpt {
                font-size: 24px
            }
        }

        @media (max-width: 478px) {
            #brxe-rerfpt {
                margin-bottom: 12px
            }
        }

        #brxe-lbxphc {
            color: #9da4ae;
            font-weight: 400;
            font-size: 18px;
            line-height: 1.55
        }

        #brxe-lbxphc a {
            color: #9da4ae;
            font-weight: 400;
            font-size: 18px;
            line-height: 1.55;
            font-size: inherit
        }

        @media (max-width: 991px) {
            #brxe-lbxphc {
                font-size: 16px
            }

            #brxe-lbxphc a {
                font-size: 16px;
                font-size: inherit
            }
        }

        #brxe-mjvkpq {
            width: 58%;
            background-image: linear-gradient(108.46deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
            border-radius: 24px;
            padding-top: 42px;
            padding-right: 42px;
            padding-bottom: 42px;
            padding-left: 42px;
            min-height: 380px
        }

        #brxe-mjvkpq {
            backdrop-filter: blur(20.163267135620117px);
        }

        @media (max-width: 1199px) {
            #brxe-mjvkpq {
                min-height: 300px
            }
        }

        @media (max-width: 991px) {
            #brxe-mjvkpq {
                min-height: 0px
            }
        }

        @media (max-width: 767px) {
            #brxe-mjvkpq {
                width: 100%;
                padding-top: 30px;
                padding-right: 30px;
                padding-bottom: 30px;
                padding-left: 30px;
                border-radius: 12px
            }
        }

        #brxe-nggcpl {
            font-size: 36px;
            font-weight: 600;
            line-height: 1.25;
            color: #ffffff;
            margin-bottom: 16px
        }

        @media (max-width: 1199px) {
            #brxe-nggcpl {
                font-size: 32px
            }
        }

        @media (max-width: 991px) {
            #brxe-nggcpl {
                font-size: 26px
            }
        }

        @media (max-width: 767px) {
            #brxe-nggcpl {
                font-size: 24px
            }
        }

        @media (max-width: 478px) {
            #brxe-nggcpl {
                margin-bottom: 12px
            }
        }

        #brxe-idiukf {
            color: #9da4ae;
            font-weight: 400;
            font-size: 18px;
            line-height: 1.55
        }

        #brxe-idiukf a {
            color: #9da4ae;
            font-weight: 400;
            font-size: 18px;
            line-height: 1.55;
            font-size: inherit
        }

        @media (max-width: 991px) {
            #brxe-idiukf {
                font-size: 16px
            }

            #brxe-idiukf a {
                font-size: 16px;
                font-size: inherit
            }
        }

        #brxe-urfrnb {
            width: 42%;
            background-image: linear-gradient(108.46deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
            border-radius: 24px;
            padding-top: 42px;
            padding-right: 42px;
            padding-bottom: 42px;
            padding-left: 42px;
            min-height: 380px
        }

        #brxe-urfrnb {
            backdrop-filter: blur(20.163267135620117px);
        }

        @media (max-width: 1199px) {
            #brxe-urfrnb {
                min-height: 300px
            }
        }

        @media (max-width: 991px) {
            #brxe-urfrnb {
                min-height: 0px
            }
        }

        @media (max-width: 767px) {
            #brxe-urfrnb {
                width: 100%;
                padding-top: 30px;
                padding-right: 30px;
                padding-bottom: 30px;
                padding-left: 30px;
                border-radius: 12px
            }
        }

        #brxe-vmqgcu {
            flex-direction: row;
            column-gap: 32px;
            row-gap: 32px;
            align-items: stretch
        }

        @media (max-width: 991px) {
            #brxe-vmqgcu {
                column-gap: 30px;
                row-gap: 30px
            }
        }

        #brxe-fnmxko {
            background-color: #0d0421;
            background-image: url({{ asset('images/') }}2024/10/bg-gr.png);
            background-position: bottom center;
            background-size: 100%;
            background-repeat: no-repeat;
            padding-top: 120px;
            padding-bottom: 120px;
            z-index: 1;
            position: relative
        }

        @media (max-width: 991px) {
            #brxe-fnmxko {
                padding-top: 80px;
                padding-bottom: 80px
            }
        }

        @media (max-width: 478px) {
            #brxe-fnmxko {
                padding-top: 60px;
                padding-bottom: 60px
            }
        }

        #brxe-nrkfog {
            position: absolute;
            z-index: 1;
            left: 0px;
            width: 100%;
            bottom: 0px;
            pointer-events: none
        }

        #brxe-wnprzs {
            font-size: 128px;
            font-weight: 200;
            line-height: 1.15;
            text-align: center;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-image: linear-gradient(305.57deg, #e99e75 24.94%, #292643 47.94%);
            padding-right: 20px;
            padding-bottom: 10px;
            padding-left: 20px
        }

        @media (max-width: 1199px) {
            #brxe-wnprzs {
                font-size: 100px
            }
        }

        @media (max-width: 991px) {
            #brxe-wnprzs {
                font-size: 76px
            }
        }

        @media (max-width: 767px) {
            #brxe-wnprzs {
                font-size: 56px
            }
        }

        @media (max-width: 478px) {
            #brxe-wnprzs {
                font-size: 38px
            }
        }

        #brxe-yojwuu {
            padding-top: 134px;
            padding-bottom: 31.777vw;
            background-color: #ededf3;
            background-position: bottom center;
            background-size: auto;
            background-repeat: no-repeat;
            position: relative;
            z-index: 1
        }

        @media (max-width: 1199px) {
            #brxe-yojwuu {
                padding-top: 120px
            }
        }

        @media (max-width: 991px) {
            #brxe-yojwuu {
                padding-top: 80px
            }
        }

        @media (max-width: 767px) {
            #brxe-yojwuu {
                padding-top: 60px;
                padding-bottom: 35vw
            }
        }

        #brxe-kqfaxz {
            font-weight: 600;
            font-size: 48px;
            line-height: 1.25
        }

        @media (max-width: 1199px) {
            #brxe-kqfaxz {
                font-size: 32px
            }
        }

        @media (max-width: 991px) {
            #brxe-kqfaxz {
                font-size: 26px
            }
        }

        @media (max-width: 767px) {
            #brxe-kqfaxz {
                font-size: 24px
            }
        }

        @media (max-width: 478px) {
            #brxe-kqfaxz {
                font-size: 20px
            }
        }

        #brxe-ljalyq {
            margin-bottom: 68px
        }

        @media (max-width: 1199px) {
            #brxe-ljalyq {
                margin-bottom: 46px
            }
        }

        @media (max-width: 991px) {
            #brxe-ljalyq {
                margin-bottom: 30px
            }
        }

        #brxe-tovbko {
            font-size: 48px;
            font-weight: 600;
            line-height: 1.25;
            color: #000000;
            margin-bottom: 16px
        }

        @media (max-width: 1199px) {
            #brxe-tovbko {
                font-size: 30px
            }
        }

        @media (max-width: 991px) {
            #brxe-tovbko {
                font-size: 26px
            }
        }

        @media (max-width: 767px) {
            #brxe-tovbko {
                font-size: 24px
            }
        }

        @media (max-width: 478px) {
            #brxe-tovbko {
                margin-bottom: 12px
            }
        }

        #brxe-xskcdf {
            font-size: 18px;
            line-height: 1.55
        }

        @media (max-width: 1199px) {
            #brxe-xskcdf {
                font-size: 16px
            }
        }

        @media (max-width: 767px) {
            #brxe-xskcdf {
                font-size: 16px;
                max-width: 70%
            }
        }

        #brxe-lzldyw {
            position: absolute;
            right: 0px;
            top: 19px;
            max-width: 73%;
            height: auto;
            z-index: -1
        }

        @media (max-width: 767px) {
            #brxe-lzldyw {
                top: 0px
            }
        }

        #brxe-yrslpu {
            background-color: #ffffff;
            background-position: top right;
            background-size: auto;
            background-repeat: no-repeat;
            border-radius: 12px;
            min-height: 400px;
            padding-top: 42px;
            padding-right: 42px;
            padding-bottom: 42px;
            padding-left: 42px;
            justify-content: flex-end;
            background-image: linear-gradient(180deg, #eeedf1, #ffffff);
            position: relative;
            z-index: 1
        }

        @media (max-width: 1199px) {
            #brxe-yrslpu {
                min-height: 320px
            }
        }

        @media (max-width: 991px) {
            #brxe-yrslpu {
                padding-top: 30px;
                padding-right: 30px;
                padding-bottom: 30px;
                padding-left: 30px;
                min-height: 260px
            }
        }

        @media (max-width: 767px) {
            #brxe-yrslpu {
                min-height: 240px
            }
        }

        #brxe-eyimce {
            font-size: 48px;
            font-weight: 600;
            line-height: 1.25;
            color: #000000;
            margin-bottom: 16px;
            max-width: 200px;
            position: relative;
            z-index: 2
        }

        @media (max-width: 1199px) {
            #brxe-eyimce {
                font-size: 30px;
                max-width: 140px
            }
        }

        @media (max-width: 991px) {
            #brxe-eyimce {
                font-size: 26px;
                max-width: 100%
            }
        }

        @media (max-width: 767px) {
            #brxe-eyimce {
                font-size: 24px
            }
        }

        @media (max-width: 478px) {
            #brxe-eyimce {
                margin-bottom: 12px
            }
        }

        #brxe-jttuar {
            font-size: 18px;
            line-height: 1.55
        }

        @media (max-width: 1199px) {
            #brxe-jttuar {
                font-size: 16px
            }
        }

        @media (max-width: 767px) {
            #brxe-jttuar {
                font-size: 16px;
                max-width: 75%
            }
        }

        #brxe-huuagr {
            position: absolute;
            right: 0px;
            top: 0px;
            max-width: 69%;
            height: auto;
            z-index: -1
        }

        @media (max-width: 767px) {
            #brxe-huuagr {
                max-width: 60%
            }
        }

        #brxe-novwpp {
            background-color: #ffffff;
            border-radius: 12px;
            min-height: 400px;
            padding-top: 42px;
            padding-right: 42px;
            padding-bottom: 42px;
            padding-left: 42px;
            justify-content: flex-end;
            background-image: linear-gradient(180deg, #eeedf1, #ffffff);
            position: relative;
            z-index: 1
        }

        @media (max-width: 1199px) {
            #brxe-novwpp {
                min-height: 320px
            }
        }

        @media (max-width: 991px) {
            #brxe-novwpp {
                padding-top: 30px;
                padding-right: 30px;
                padding-bottom: 30px;
                padding-left: 30px;
                min-height: 260px
            }
        }

        @media (max-width: 767px) {
            #brxe-novwpp {
                min-height: 240px
            }
        }

        #brxe-jfsvob {
            font-size: 48px;
            font-weight: 600;
            line-height: 1.25;
            color: #000000;
            margin-bottom: 16px;
            max-width: 200px;
            position: relative;
            z-index: 2
        }

        @media (max-width: 1199px) {
            #brxe-jfsvob {
                font-size: 30px;
                max-width: 140px
            }
        }

        @media (max-width: 991px) {
            #brxe-jfsvob {
                font-size: 26px;
                max-width: 100%
            }
        }

        @media (max-width: 767px) {
            #brxe-jfsvob {
                font-size: 24px
            }
        }

        @media (max-width: 478px) {
            #brxe-jfsvob {
                margin-bottom: 12px
            }
        }

        #brxe-vsqgpq {
            font-size: 18px;
            line-height: 1.55
        }

        @media (max-width: 1199px) {
            #brxe-vsqgpq {
                font-size: 16px
            }
        }

        @media (max-width: 767px) {
            #brxe-vsqgpq {
                font-size: 16px
            }
        }

        #brxe-mmsrdw {
            position: absolute;
            right: 0px;
            top: 0px;
            max-width: 69%;
            height: auto;
            z-index: -1
        }

        #brxe-eugwjv {
            background-color: #ffffff;
            border-radius: 12px;
            min-height: 400px;
            padding-top: 42px;
            padding-right: 42px;
            padding-bottom: 42px;
            padding-left: 42px;
            justify-content: flex-end;
            background-image: linear-gradient(180deg, #eeedf1, #ffffff);
            position: relative;
            z-index: 1
        }

        @media (max-width: 1199px) {
            #brxe-eugwjv {
                min-height: 320px
            }
        }

        @media (max-width: 991px) {
            #brxe-eugwjv {
                padding-top: 30px;
                padding-right: 30px;
                padding-bottom: 30px;
                padding-left: 30px;
                min-height: 260px
            }
        }

        @media (max-width: 767px) {
            #brxe-eugwjv {
                min-height: 270px
            }
        }

        #brxe-wlthpd {
            flex-direction: row;
            column-gap: 24px;
            row-gap: 24px
        }

        #brxe-ihjdur {
            padding-top: 68px;
            padding-bottom: 120px;
            background-color: #ededf3;
            background-image: url({{ asset('images/') }}2024/10/career-bg-2.png);
            background-position: bottom center;
            background-size: auto;
            background-repeat: no-repeat;
            position: relative;
            z-index: 1
        }

        @media (max-width: 991px) {
            #brxe-ihjdur {
                padding-bottom: 80px
            }
        }

        @media (max-width: 478px) {
            #brxe-ihjdur {
                padding-bottom: 60px
            }
        }

        #brxe-vzaccw {
            mix-blend-mode: multiply;
            max-width: 207px
        }

        #brxe-ynukax {
            width: 100%;
            margin-bottom: 82px;
            max-width: 1035px
        }

        @media (max-width: 991px) {
            #brxe-ynukax {
                margin-bottom: 60px
            }
        }

        @media (max-width: 767px) {
            #brxe-ynukax {
                margin-bottom: 60px
            }
        }

        #brxe-fexnwx {
            font-size: 14px;
            font-weight: 400;
            color: #000000;
            text-transform: uppercase;
            margin-bottom: 55px
        }

        @media (max-width: 991px) {
            #brxe-fexnwx {
                margin-bottom: 30px
            }
        }

        #brxe-jnenbp {
            flex-direction: column;
            align-items: flex-start;
            row-gap: 3px
        }

        #brxe-rjhocu {
            flex-direction: column;
            font-size: 16px;
            font-weight: 700;
            line-height: 1.5
        }

        #brxe-xbedek {
            width: auto
        }

        @media (max-width: 767px) {
            #brxe-xbedek {
                width: calc(50% - 15px)
            }
        }

        #brxe-yvurfv {
            font-size: 14px;
            font-weight: 400;
            color: #000000;
            text-transform: uppercase;
            margin-bottom: 55px
        }

        @media (max-width: 991px) {
            #brxe-yvurfv {
                margin-bottom: 30px
            }
        }

        #brxe-qcjadp {
            flex-direction: column;
            align-items: flex-start;
            row-gap: 3px
        }

        #brxe-nfssob {
            flex-direction: column;
            font-size: 16px;
            font-weight: 700;
            line-height: 1.5
        }

        #brxe-riockm {
            width: auto
        }

        @media (max-width: 767px) {
            #brxe-riockm {
                width: calc(50% - 15px)
            }
        }

        #brxe-jwhxvr {
            font-size: 14px;
            font-weight: 400;
            color: #000000;
            text-transform: uppercase;
            margin-bottom: 55px
        }

        @media (max-width: 991px) {
            #brxe-jwhxvr {
                margin-bottom: 30px
            }
        }

        #brxe-yquheb {
            margin-right: 0
        }

        #brxe-orneop {
            flex-direction: column;
            align-items: flex-start;
            row-gap: 3px
        }

        #brxe-ciltcg {
            flex-direction: column;
            font-size: 16px;
            font-weight: 700;
            line-height: 1.5
        }

        #brxe-zgwwmh {
            width: auto
        }

        @media (max-width: 767px) {
            #brxe-zgwwmh {
                width: calc(50% - 15px)
            }
        }

        #brxe-bjrdzu {
            flex-direction: row;
            max-width: 1035px;
            width: 100%;
            margin-bottom: 30px;
            column-gap: 30px;
            row-gap: 30px;
            justify-content: space-between
        }

        @media (max-width: 767px) {
            #brxe-bjrdzu {
                margin-bottom: 60px;
                row-gap: 40px
            }
        }

        #brxe-qauejr {
            font-size: 14px;
            font-weight: 400;
            color: #000000;
            text-transform: uppercase;
            margin-bottom: 16px
        }

        #brxe-axovgc {
            font-size: 16px
        }

        #brxe-axovgc a {
            font-size: 16px;
            font-size: inherit
        }

        #brxe-ykccwm {
            width: auto
        }

        @media (max-width: 767px) {
            #brxe-ykccwm {
                width: 100%
            }
        }

        #brxe-ybieel {
            font-size: 16px;
            font-weight: 700
        }

        #brxe-ybieel a {
            font-size: 16px;
            font-weight: 700;
            font-size: inherit
        }

        #brxe-ybieel p {
            margin-bottom: 7px;
        }

        #brxe-ybieel p:last-of-type {
            margin-bottom: 0;
        }

        #brxe-vaxusp {
            width: auto
        }

        @media (max-width: 767px) {
            #brxe-vaxusp {
                width: 100%
            }
        }

        #brxe-soyark {
            flex-direction: row;
            justify-content: space-between;
            max-width: 1035px;
            margin-bottom: 40px;
            align-items: center;
            width: 100%
        }

        @media (max-width: 767px) {
            #brxe-soyark {
                row-gap: 20px
            }
        }

        #brxe-aorpaj {
            font-size: 16px;
            font-weight: 700;
            line-height: 1.5
        }

        #brxe-kchnqo {
            row-gap: 50px;
            width: auto
        }

        @media (max-width: 767px) {
            #brxe-kchnqo {
                width: calc(50% - 15px)
            }
        }

        #brxe-rzxbav {
            font-size: 16px;
            font-weight: 700;
            line-height: 1.5
        }

        #brxe-cxqaxh {
            font-size: 16px;
            font-weight: 700;
            line-height: 1.5
        }

        #brxe-bcdavf {
            width: auto;
            flex-direction: row;
            column-gap: 53px
        }

        @media (max-width: 767px) {
            #brxe-bcdavf {
                width: calc(50% - 15px)
            }
        }

        #brxe-kbsyij {
            flex-direction: row;
            width: 100%;
            column-gap: 30px;
            row-gap: 30px;
            padding-top: 30px;
            padding-right: 0;
            padding-left: 0;
            border-top: 1px solid #000000;
            justify-content: space-between
        }

        @media (max-width: 767px) {
            #brxe-kbsyij {
                row-gap: 0px;
                padding-top: 20px
            }
        }

        #brxe-alqlac {
            flex-direction: row;
            max-width: 1035px;
            width: 100%;
            column-gap: 30px;
            row-gap: 30px
        }

        @media (max-width: 767px) {
            #brxe-alqlac {
                row-gap: 0px;
                margin-bottom: 20px
            }
        }

        #brxe-rnccbt {
            font-size: 16px;
            font-weight: 700
        }

        #brxe-ymiplj {
            width: 100%;
            max-width: 1035px
        }

        #brxe-tpforl {
            background-color: #ffffff;
            padding-top: 96px;
            padding-bottom: 120px
        }

        @media (max-width: 991px) {
            #brxe-tpforl {
                padding-top: 80px;
                padding-bottom: 100px
            }
        }

        @media (max-width: 478px) {
            #brxe-tpforl {
                padding-top: 60px;
                padding-bottom: 40px;
                position: relative;
                z-index: 3
            }
        }

        .brxe-popup-1809 .brx-popup-content {
            padding-top: 0;
            padding-right: 0;
            padding-bottom: 0;
            padding-left: 0;
            background-color: rgba(0, 0, 0, 0);
            width: 100%
        }

        #brxe-kgrzzd {
            gap: 0px;
            padding-top: 10px;
            padding-right: 10px;
            padding-bottom: 10px;
            padding-left: 10px;
            border-radius: 0;
            position: absolute;
            top: 8px;
            right: 8px
        }

        #brxe-gcgxrn {
            background-image: url({{ asset('images/') }}2024/10/Heading-and-supporting-text-1.png);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: bottom center;
            padding-top: 32px;
            padding-right: 32px;
            padding-bottom: 32px;
            padding-left: 32px;
            min-height: 172px;
            justify-content: center;
            position: relative
        }

        #brxe-pbdcrc .form-group:not(:last-child):not(.captcha) {
            padding-bottom: 24px
        }

        #brxe-pbdcrc .form-group input {
            border: 1px solid #d0d5dd;
            border-radius: 8px;
            padding-top: 1px;
            padding-right: 14px;
            padding-bottom: 1px;
            padding-left: 14px
        }

        #brxe-pbdcrc .flatpickr {
            border: 1px solid #d0d5dd;
            border-radius: 8px;
            padding-top: 1px;
            padding-right: 14px;
            padding-bottom: 1px;
            padding-left: 14px
        }

        #brxe-pbdcrc select {
            border: 1px solid #d0d5dd;
            border-radius: 8px;
            padding-top: 1px;
            padding-right: 14px;
            padding-bottom: 1px;
            padding-left: 14px;
            color: #667085
        }

        #brxe-pbdcrc textarea {
            border: 1px solid #d0d5dd;
            border-radius: 8px;
            padding-top: 1px;
            padding-right: 14px;
            padding-bottom: 1px;
            padding-left: 14px
        }

        #brxe-pbdcrc .bricks-button:not([type=submit]) {
            border: 1px solid #d0d5dd;
            border-radius: 8px
        }

        #brxe-pbdcrc .choose-files {
            border: 1px solid #d0d5dd;
            border-radius: 8px
        }

        #brxe-pbdcrc label {
            font-size: 14px;
            font-weight: 700;
            text-transform: none;
            line-height: 1.43
        }

        #brxe-pbdcrc .label {
            font-size: 14px;
            font-weight: 700;
            text-transform: none;
            line-height: 1.43
        }

        #brxe-pbdcrc ::placeholder {
            color: #667085
        }

        #brxe-pbdcrc {
            box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05)
        }

        #brxe-pbdcrc .submit-button-wrapper {
            width: 100%;
            margin-top: 8px
        }

        #brxe-pbdcrc button[type=submit].bricks-button {
            border-radius: 8px
        }

        #brxe-pbdcrc .bricks-button {
            font-size: 16px
        }

        #brxe-pbdcrc h3 {
            color: #475467;
            font-size: 18px;
            margin-bottom: -8px;
            font-weight: 400;
        }

        @media screen and (min-width: 992px) {
            #brxe-pbdcrc h3 {
                font-size: 20px;
            }
        }

        #brxe-emlesh {
            padding-top: 40px;
            padding-right: 32px;
            padding-bottom: 32px;
            padding-left: 32px
        }

        #brxe-ecqxom {
            padding-right: 0;
            padding-left: 0
        }

        #brxe-etneud {
            padding-top: 0;
            padding-right: 0;
            padding-bottom: 0;
            padding-left: 0;
            max-width: 800px;
            margin-top: 32px;
            margin-bottom: 32px;
            background-color: #ffffff;
            border-radius: 8px
        }
    </style>
@endpush

@push('scripts-libs')
    {{-- JS riêng cho trang ecosystem --}}
    <script src="{{ asset('js/scriptsf910.js') }}" id="apero-js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
@endpush

@section('content')
    <main id="brx-content" style="display: flex; justify-content: center;">
        <div class="container" style="display: flex; flex-direction: column;">
            <div class="flex flex-col lg:flex-row gap-8 lg:gap-12 mb-12">
                <div class="flex-1 bg-white rounded-2xl shadow-lg p-8 lg:p-10">
                    <h3 class="text-3xl font-bold text-gray-900 mb-8">
                        Đội ngũ của chúng tôi sẵn sàng cho mọi thử thách
                    </h3>

                    @if(session('success'))
                        <div class="mb-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg">
                            {{ session('success') }}
                        </div>
                    @endif

                    @if($errors->any())
                        <div class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg">
                            <ul class="list-disc list-inside">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form method="post" action="{{ route('contact.store') }}" class="space-y-6">
                        @csrf
                        <div>
                            <label for="name" class="block    font-semibold text-gray-700 mb-2">
                                Họ và tên
                            </label>
                            <input type="text" id="name" name="name" placeholder="Nhập họ và tên của bạn" required
                                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 outline-none">
                        </div>

                        <div>
                            <label for="email" class="block    font-semibold text-gray-700 mb-2">
                                Email
                            </label>
                            <input type="email" id="email" name="email" placeholder="email@example.com" required
                                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 outline-none">
                        </div>
                        <div>
                            <label for="name" class="block    font-semibold text-gray-700 mb-2">
                                Số điện thoại
                            </label>
                            <input type="tel" id="phone" name="phone" placeholder="Nhập số điện thoại của bạn"
                                pattern="[0-9]*" inputmode="numeric" onkeypress="return event.charCode >= 48 && event.charCode <= 57"
                                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 outline-none">
                        </div>
                        <div>
                            <label for="email" class="block    font-semibold text-gray-700 mb-2">
                                Tiêu đề
                            </label>
                            <input type="text" id="subject" name="subject" placeholder="Nhập tiêu đề" required
                                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 outline-none">
                        </div>

                        <div>
                            <label for="message" class="block    font-semibold text-gray-700 mb-2">
                                Tin nhắn
                            </label>
                            <textarea id="message" name="message" rows="5" required
                                placeholder="Để lại tin nhắn cho chúng tôi..."
                                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 outline-none resize-none"></textarea>
                        </div>

                        <div class="flex items-start">
                            <input type="checkbox" id="privacy" name="privacy" required
                                class="mt-1 h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-2 focus:ring-blue-500">
                            <label for="privacy" class="ml-3    text-gray-600">
                                Đồng ý với chính sách bảo mật của chúng tôi
                            </label>
                        </div>

                        <button type="submit"
                            class="w-full text-center bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg transition-colors duration-200 shadow-md hover:shadow-lg">
                            Gửi
                        </button>
                    </form>
                </div>

                <div class="flex-1 lg:max-w-md hidden md:block">
                    <div class="rounded-2xl overflow-hidden shadow-lg h-full">
                        <img src="{{ asset('images/photo-1600880292203-757bb62b4baf.jpg') }}"
                            alt="Contact Team" class="w-full h-full object-cover">
                    </div>
                </div>
            </div>

            <div class="rounded-2xl overflow-hidden shadow-lg">
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d658.3339284259094!2d105.76929576496664!3d21.028721184874176!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x313455b02bbe1a65%3A0x18da06b14a86dd67!2zQ8O0bmcgdHkgVE5ISCBYw6J5IEThu7FuZyBWw6AgTuG7mWkgVGjhuqV0IEjhuqNpIEjhu5NuZyBQaMOhdA!5e0!3m2!1sen!2s!4v1760078990730!5m2!1sen!2s" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
            </div>
        </div>
    </main>
@endsection