<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/assets/css/bootstrap.css">
    {{-- <title>{{ __('be-search-booking_engine-title') }}</title> --}}

    <title>API</title>
    <style>
        html,
        body {
            height: 100vh;
        }
    </style>
</head>

<body>
    <style>
        body {
            background-color: #f4f7fc;
            overflow: hidden;
            overflow-y: auto;
        }

        @media (min-width: 1200px) {

            .container,
            .container-lg,
            .container-md,
            .container-sm,
            .container-xl {
                max-width: 1235px;
            }
        }

        .header-area {
            position: relative;
        }

        .header-area .shape {
            position: absolute;
        }

        .header-area .header-shape-one {
            top: 0;
            left: 0;
        }

        @media only screen and (min-width: 768px) and (max-width: 991px) {
            .header-area .header-shape-one {
                width: 230px;
            }

            .basket-focus {
                top: 300px !important;
            }

            .cart-item span {
                color: #393c45;
                display: block;
                font-size: 12px;
            }

            .cart-item {
                padding: 7px 0 50px 70px !important;
                min-height: 120px;
            }
        }

        @media (max-width: 767px) {

            .back-to-list span,
            .back-button span {
                display: none;
            }

            .header-area .header-shape-one {
                width: 180px;
            }
        }

        .header-area .header-shape-tow {
            top: 25px;
            left: 31%;
        }

        @media only screen and (min-width: 768px) and (max-width: 991px) {
            .header-area .header-shape-tow {
                left: 40%;
            }
        }

        @media (max-width: 767px) {
            .header-area .header-shape-tow {
                left: 60%;
                width: 60px;
            }
        }

        .header-area .header-shape-three {
            left: 70px;
            bottom: 130px;
        }

        @media (max-width: 767px) {
            .header-area .header-shape-three {
                width: 90px;
                bottom: 200px;
            }
        }

        .header-area .header-shape-fore {
            left: 48%;
            bottom: -90px;
            -webkit-transform: translateX(-50%);
            -moz-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            -o-transform: translateX(-50%);
            transform: translateX(-50%);
        }

        @media only screen and (min-width: 768px) and (max-width: 991px) {
            .header-area .header-shape-fore {
                width: 260px;
            }
        }

        @media (max-width: 767px) {
            .header-area .header-shape-fore {
                bottom: -60px;
                width: 210px;
            }
        }

        .navigation-bar {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 99;
            padding: 25px 0;
            -webkit-transition: all 0.4s ease-out 0s;
            -moz-transition: all 0.4s ease-out 0s;
            -ms-transition: all 0.4s ease-out 0s;
            -o-transition: all 0.4s ease-out 0s;
            transition: all 0.4s ease-out 0s;
        }

        .navigation-bar.sticky {
            position: fixed;
            background-color: #fff;
            -webkit-box-shadow: 0px 5px 21px 0px rgba(254, 119, 101, 0.2);
            -moz-box-shadow: 0px 5px 21px 0px rgba(254, 119, 101, 0.2);
            box-shadow: 0px 5px 21px 0px rgba(254, 119, 101, 0.2);
            z-index: 99;
            padding: 15px 0;
        }

        @media only screen and (min-width: 768px) and (max-width: 991px) {
            .navigation-bar.sticky .navbar-btn {
                top: 50%;
                -webkit-transform: translateY(-50%);
                -moz-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                -o-transform: translateY(-50%);
                transform: translateY(-50%);
            }
        }

        @media (max-width: 767px) {
            .navigation-bar.sticky .navbar-btn {
                top: 50%;
                -webkit-transform: translateY(-50%);
                -moz-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                -o-transform: translateY(-50%);
                transform: translateY(-50%);
            }
        }

        .navbar .navbar-brand img {
            max-width: 190px;
        }

        .navbar .navbar-toggler .toggler-icon {
            width: 30px;
            height: 2px;
            display: block;
            background-color: #646464;
            margin: 5px 0;
        }

        @media only screen and (min-width: 768px) and (max-width: 991px) {
            .navbar .navbar-collapse {
                position: absolute;
                top: 128%;
                width: 100%;
                left: 0;
                background-color: #fff;
                padding: 5px 15px;
                z-index: 9;
                -webkit-box-shadow: 0px 5px 25px 0px rgba(244, 128, 74, 0.3);
                -moz-box-shadow: 0px 5px 25px 0px rgba(244, 128, 74, 0.3);
                box-shadow: 0px 5px 25px 0px rgba(244, 128, 74, 0.3);
            }
        }

        @media (max-width: 767px) {
            .navbar .navbar-collapse {
                position: absolute;
                top: 128%;
                width: 100%;
                left: 0;
                background-color: #fff;
                padding: 5px 15px;
                z-index: 9;
                -webkit-box-shadow: 0px 5px 25px 0px rgba(244, 128, 74, 0.3);
                -moz-box-shadow: 0px 5px 25px 0px rgba(244, 128, 74, 0.3);
                box-shadow: 0px 5px 25px 0px rgba(244, 128, 74, 0.3);
            }
        }

        .navbar .navbar-nav .nav-item {
            margin-right: 30px;
        }

        @media only screen and (min-width: 992px) and (max-width: 1200px) {
            .navbar .navbar-nav .nav-item {
                margin-right: 25px;
            }
        }

        @media only screen and (min-width: 768px) and (max-width: 991px) {
            .navbar .navbar-nav .nav-item {
                margin: 5px 0;
            }
        }

        @media (max-width: 767px) {
            .navbar .navbar-nav .nav-item {
                margin: 5px 0;
            }
        }

        .navbar .navbar-nav .nav-item a {
            color: #646464;
            font-family: 'Hind', sans-serif;
            font-size: 15px;
            text-transform: uppercase;
            font-weight: 700;
            -webkit-transition: all 0.4s ease-out 0s;
            -moz-transition: all 0.4s ease-out 0s;
            -ms-transition: all 0.4s ease-out 0s;
            -o-transition: all 0.4s ease-out 0s;
            transition: all 0.4s ease-out 0s;
        }

        @media only screen and (min-width: 992px) and (max-width: 1200px) {
            .navbar .navbar-nav .nav-item a {
                font-size: 13px;
            }
        }

        .navbar .navbar-nav .nav-item.active a,
        .navbar .navbar-nav .nav-item:hover a {
            color: #d71f26;
        }

        @media only screen and (min-width: 768px) and (max-width: 991px) {
            .navbar .navbar-btn {
                position: absolute;
                right: 70px;
                top: 0;
            }
        }

        @media (max-width: 767px) {
            .navbar .navbar-btn {
                position: absolute;
                right: 70px;
                top: 0;
            }
        }

        .header-banner {
            height: 700px;
            position: relative;
        }

        @media only screen and (min-width: 768px) and (max-width: 991px) {
            .header-banner {
                height: 500px;
            }
        }

        @media (max-width: 767px) {
            .header-banner {
                height: 500px;
            }
        }

        .header-banner .banner-image {
            position: absolute;
            top: 15%;
            right: 0;
            width: 55%;
            height: 100%;
        }

        .header-banner .banner-content {
            position: relative;
            z-index: 9;
        }

        .header-banner .banner-content .sub-title {
            font-size: 16px;
            color: #d71f26;
            text-transform: none;
        }

        @media (max-width: 767px) {
            .header-banner .banner-image {
                position: absolute;
                top: 81%;
                right: -22px;
                width: 100% !important;
                height: 54% !important;
            }

            .header-banner .banner-content .sub-title {
                font-size: 18px;
            }
        }

        .header-banner .banner-content .banner-title {
            font-size: 60px;
        }

        .header-banner .banner-content .banner-title span {
            color: #d71f26;
        }

        @media (max-width: 767px) {
            .header-banner .banner-content .banner-title {
                font-size: 38px;
            }
        }

        .header-banner .banner-content .banner-contact {
            position: relative;
            font-size: 15px;
            font-weight: 600;
            color: #d71f26;
            text-transform: uppercase;
            margin-left: 70px;
        }

        .header-banner .banner-content .banner-contact::before {
            position: absolute;
            content: '';
            width: 60px;
            height: 2px;
            background-color: #d71f26;
            left: -70px;
            top: 50%;
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            transform: translateY(-50%);
        }

        .bg_cover {
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
            width: 100%;
            height: 100%;
        }
    </style>
    <header id="home" class="header-area pt-100">
        {{--
        @php
            use Illuminate\Support\Facades\Hash;
            dd(Hash::make('144652qwe'));
        @endphp --}}
        <div class="shape header-shape-one">
            <img src="/assets/img/banner/shape/shape-1.png" alt="shape">
        </div> <!-- header shape one -->

        <div class="shape header-shape-tow animation-one">
            <img src="/assets/img/banner/shape/shape-2.png" alt="shape">
        </div> <!-- header shape tow -->

        <div class="shape header-shape-three animation-one">
            <img src="/assets/img/banner/shape/shape-3.png" alt="shape">
        </div> <!-- header shape three -->

        <div class="shape header-shape-fore">
            <img src="/assets/img/banner/shape/shape-4.png" alt="shape">
        </div> <!-- header shape three -->

        <div class="navigation-bar">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <nav class="navbar navbar-expand-lg">
                            <a class="navbar-brand" href="https://www.extranetwork.com">
                                <img src="/assets/img/logo.svg" alt="Logo">
                            </a>
                        </nav> <!-- navbar -->
                    </div>
                </div> <!-- row -->
            </div> <!-- container -->
        </div> <!-- navigation bar -->
        <div class="header-banner d-flex align-items-center">
            <div class="container">
                <div class="row">
                    <div class="col-xl-8 col-lg-9 col-sm-10">
                        <div class="banner-content">
                            <h4 class="sub-title">{{ __('be-welcome-desc') }}.</h4>
                            <h1 class="banner-title mt-10"><span>Extranetwork'e </span> <br> {{ __('btn-register') }}
                            </h1>
                            <a class="banner-contact mt-25"
                                href="http://extranetwork.com">{{ __('be-welcome-register_for_free_now') }}</a>
                        </div> <!-- banner content -->
                    </div>
                </div> <!-- row -->
            </div> <!-- container -->
            <div class="banner-image bg_cover" style="background-image: url(/assets/img/main-image.png)"></div>
        </div> <!-- header banner -->
    </header>

</body>

</html>
