@extends('layouts.base')
@section('content')
    <style>
        .nadpisek {
            font-size: 40px !important;
        }

        @media only screen and (max-width: 998px) {
            .nadpisek {
                font-size: 32px !important;
            }

            .shapes-container {
                display: none;
            }

            .non-mob {
                display: none;
            }

            .mob-marg {
                margin-top: 30px !important;
            }

            .choose-block {
                padding: 30px 20px !important;
            }

            .chosed {
                font-size: 16px !important;
            }

            .non-chosed {
                font-size: 16px !important;
            }
        }

        .round {
            border-radius: 50%;
            background-color: white;
            box-shadow: 0px 10px 30px 0px rgb(1 1 64 / 8%);
            width: 80px;
            height: 80px;
            text-align: center;
            margin: 0 auto;
            font-size: 40px;
            color: #ff603c;
            font-weight: 600;
            line-height: 80px;
            margin-bottom: 25px;
        }

        .app-landing-2-header .animation-shape.shape-triangle div {
            background-color: #ff603c;
        }

        .product-heading {
            line-height: 22px;
            color: #7b7d86;
            display: inline-block;
            font-size: 14px;
            letter-spacing: 1px;
            margin-bottom: 10px;
            background: #edeef3;
            padding: 5px 13px;
            font-weight: 600;
            border-radius: 16px;
            text-transform: uppercase;
        }

        .product-h2 {
            font-weight: 600;
            line-height: 1.13;
            font-size: 32px;
            color: #313336;
        }

        .product-h2 strong {
            color: #ff603c;
            font-weight: 600;
        }

        @media (min-width: 768px) {

            section [class^="container"],
            .section [class^="container"] {
                padding-top: 50px;
                padding-bottom: 90px;
            }
        }

        .pricing-block {
            width: 300px;
            cursor: grab;
            background-color: white;
            padding: 25px 12px;
        }

        .pricing-block .pricing-cover {
            max-width: 100%;
            border-radius: 8px;
            box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
            transition: 0.2s;
        }

        .pricing-block:hover .pricing-cover {
            box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
        }

        .pricing-header {
            padding: 20px 10px;
            color: #3a4250;
        }

        .pricing-block .number {
            font-size: 35px;
            font-weight: 700;
        }

        .pricing-block .type {
            margin-top: -10px !important;
            font-weight: 600;
            font-size: 15px;
            text-transform: uppercase;
        }

        .pricing-price {
            background-color: #FFE5E0;
            width: 100%;
            padding: 15px 15px;
            color: #3a4250;
            font-weight: 700;
            font-size: 42px;
        }

        .pricing-points {
            padding: 25px;
            padding-top: 17px;
            padding-bottom: 5px;
            font-weight: 500;
            color: #3a4250;
            font-size: 17px;
            text-align: left;
        }

        ul {
            list-style-type: none;
            padding-left: 15px;
        }

        .pricing-points li {
            margin-top: 8px;
        }



        .cart-obal {
            max-width: 640px;
            border-radius: 10px;
            background-color: white;
            box-shadow: 0 6px 6px rgb(0 0 0 / 4%), 0 0 42px rgb(0 0 0 / 4%);
            padding: 40px;
            margin: 0 auto;
        }

        .cart-obal h2 {
            text-align: center;
            font-weight: 700;
            font-size: 38px;
            color: #322f3b;
            margin-bottom: 0;
        }

        hr {
            outline: 0;
            height: 1px;
            background: #eaeaea;
            border-top: 0px solid #eaeaea;
            opacity: 1 !important;
            margin: 40px 0;
        }

        .progress {
            background-color: #efefef;
            height: 6px;
        }

        .bar {
            background: #efefef;
        }

        .value {
            height: 6px;
            background: #fc591e;
        }

        .form-control {
            font-family: 'Source Sans Pro', sans-serif;
            display: block;
            height: 56px;
            width: 100%;
            padding: 15px 16px 16px 53px;
            line-height: 24px;
            outline: 0;
            background: #fff;
            border: 1px solid #e5e5e5;
            font-size: 18px !important;
            text-align: left;
            font-weight: 400;
            color: #000 !important;
            box-sizing: border-box;
            transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            border-radius: 6px;
            border-color: #fc654b;
            box-shadow: 0 0 10px 0 rgb(252 101 75 / 20%);
        }

        .form-control.active,
        .form-control:focus {
            border-color: #fc654b;
            box-shadow: 0 0 10px 0 rgb(252 101 75 / 20%);
        }

        .input-icon {
            z-index: 100;
            pointer-events: none;
            margin: 0;
            position: absolute;
            top: 18px;
            left: 17px;
            width: 20px;
        }

        .form-group {
            position: relative;
            margin-bottom: 16px;
            box-sizing: border-box;
        }

        .selector {
            position: relative;
            font-size: 18px;
            color: #000;
            font-weight: 400;
        }

        .selector strong {
            font-weight: 600;
        }

        .selector>button.form-control {
            position: relative;
            margin-bottom: 6px;
            padding-right: 56px;
            background-color: white;
        }


        .selector .alt:last-child {
            margin-left: 0;
        }

        .selector .alt {
            margin-left: 10px;
            float: right;
            font-size: 17px;
            font-weight: 600;
            color: #000;
            text-align: right;
        }

        .activated-quality {
            border-color: #ff553c !important;
            border-width: 2px !important;
        }

        .plan__type-checkbox {
            position: absolute;
            bottom: 1.2rem;
            right: 1.2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 2.3rem;
            height: 2.3rem;
            border: 2px solid #d3d3d3;
            border-radius: 1rem;
        }

        .quality-blocks {
            font-family: 'Inter', sans-serif;
            width: 440px;
            margin: auto;
            max-width: 94%;
            margin-top: 20px;
            font-weight: 500;
            margin-bottom: -10px;
        }

        .quality-body svg {
            position: absolute;
            left: 0;
            top: 4px;
        }

        .quality-body ul {
            padding-left: 0px !important;
        }

        .quality-body li {
            margin-bottom: 0.6rem;
            padding-left: 1rem;
            text-align: left;
            position: relative;
        }

        .quality-body {
            color: #313336;
            padding: 10px 10px;
            padding-top: 12px;
            padding-bottom: 0px;
            font-size: 14px;

        }

        .quality-header {
            padding: 15px;
            position: relative;
            background-color: #f2f6f9;
            overflow: hidden;
            border-top-left-radius: 18px;
            border-top-right-radius: 18px;
        }

        .quality {
            border-radius: 20px;
            border: 2px solid #efefef;
            cursor: pointer;
            height: 100%;
            position: relative;
        }


        .quality-obal {
            width: 50%;
            max-width: 220px;
        }

        .selector>button.form-control:after {
            content: "";
            position: absolute;
            top: 25px;
            right: 18px;
            width: 0;
            height: 0;
            border-color: #464b4d transparent transparent;
            border-style: solid;
            border-width: 6px 5px 0;
        }

        .selector .dropdown-stylized {
            position: absolute;
            margin: 0;
            padding-top: 0px;
            padding-bottom: 0px;
            width: 100%;
            left: 0;
            right: 0;
        }

        .dropdown-stylized a:first-child {
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
        }

        .dropdown-stylized a {
            position: relative;
            padding: 12px 22px;
            box-sizing: border-box;
            display: block;
            color: #000;
            text-decoration: none;
            white-space: nowrap;
            width: 100%;
            font-size: 16px;
            line-height: 22px;
            background-color: #fff;
            transition: background-color .15s ease-in-out;
        }

        .dropdown-stylized a:hover {
            background-color: #e9e9e9;
        }

        .dropdown-stylized a:after {
            content: "";
            display: block;
            position: absolute;
            height: 1px;
            background: #dfdfdf;
            bottom: 0;
            left: 0;
            right: 0;
        }

        .choose-block {
            margin: 20px auto;
            max-width: 550px;
            padding: 30px 40px;
            border-radius: 10px;
            border: 1px solid #EDEDED;
        }

        .trigger {
            box-shadow: 0px 10px 30px 0px rgb(1 1 64 / 8%);
            border-radius: 8px;
            text-align: left;
            max-width: 350px;
            padding: 8px;
            position: relative;
            font-weight: 400;
            color: #000;
            margin: 25px auto;
            vertical-align: middle;
        }

        .trigger span#fire {
            background: blanchedalmond;
        }

        .trigger span {
            padding: 5px 7px;
            border-radius: 5px;
            position: relative;
            font-size: 23px;
            margin-right: 5px;
        }

        .trigger>span>img {
            width: 25px;
            margin-bottom: 4px;
        }

        .price-text {
            color: #323436;
            font-weight: 500;
            padding: 15px;
            border-radius: 10px;
            text-align: center;
            border: 1px solid #e5e5e5;
        }

        .price-text img {
            width: 25px;
            height: 25px;
        }


        .non-chosed {
            border: 3px solid #f6f6f8;
            border-radius: 5px;
            background: #fff;
            padding: 15px;
            font-size: 18px;
            cursor: pointer;
        }

        .price-text p {
            margin-top: 4px;
            margin-bottom: 0px;
        }

        .chosed {
            border: 3px solid #ff603c;
            border-radius: 5px;
            background: #ff603c;
            padding: 15px;
            font-size: 18px;
            cursor: pointer;
            color: white;
        }

        .features-list {
            margin-top: 30px !important;
            font-size: 16px;
            line-height: 25px;
            font-weight: 400;
            color: black;
        }

        .features-list li {
            margin-bottom: 14px;
        }

        .text-orange {
            color: #ff553c;
        }
            .header__scroll-nav {
            display: none;
            transition: all .5s;
            width: 100vw;
            padding-left:10px;
            padding-right:10px;
            background-color:white;
            box-shadow: 0 4px 22px rgb(0 0 0 / 7%) !important;
    border-bottom: 1px solid rgba(0, 0, 0, .1) !important;
    height:fit-content;
    overflow-x:hidden;
        }

        .header__scroll-nav .scroll-nav {
            list-style-type: none;
            display: flex;
            flex-flow: row nowrap;
            overflow-x: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
            padding-left: 12px;
            padding-right: 12px;
            margin-bottom:0px !important;
        }

        .scroll-nav::-webkit-scrollbar{
    display: none;
  }

        .header__scroll-nav .scroll-nav__item:not(:last-child) {
            margin-right: 20px;
        }

        .header__scroll-nav .scroll-nav__item {
            flex: 1 1 auto;
            white-space: nowrap;
            text-align: center;
        }

        .header__scroll-nav .scroll-nav__item a.is-active {
            font-weight: 500;
            color: #000;
            border-bottom: 2px solid #ff553c;
        }

        .header__scroll-nav .scroll-nav__item a {
            display: inline-flex;
            padding: 10px 0;
            font-weight: 400;
            font-size: 14.27px;
            letter-spacing: -.02em;
            color: #595959;
            text-decoration: none;
            transition: all .2s;
        }

        @media (max-width: 767px),
        screen and (max-width: 812px) and (orientation: landscape) {
            .header__scroll-nav {
                display: block;
            }

            .header__inner:after,
            .header .header__scroll-nav:after {
                content: "";
                display: inline-block;
                position: absolute;
                left: 0;
                width: 100%;
                border-bottom: 1px solid rgba(0, 0, 0, .1);
            }
            #mainNav{
box-shadow:0 0 0 0 !important;
            }
        }
    </style>
    <div class="header__scroll-nav">
        <ul class="scroll-nav">
            <li class="scroll-nav__item"><a href="/ig-likes">{{__("Instagram Likes")}}</a></li>
            <li class="scroll-nav__item"><a href="/ig-obserwujacy">{{__("Instagram Followers")}}</a></li>
            <li class="scroll-nav__item"><a class="is-active" href="/polski-obserwujacy">{{__("IG obserwujący z Polski 🇵🇱")}}</a></li>
            <li class="scroll-nav__item"><a href="/ig-views">{{__("Instagram Views")}}</a></li>
        </ul>
    </div>
    <section style="">
        <div class="container" style="text-align:center;">
            <h1 class="product-heading">{{ __('Instagram obserwujący z Polski') }}</h1>
            <h2 class="product-h2">{{ __('Kup Instagram obserwujący') }}<br>{!! __("<strong style='font-weight: 600 !important; color:#ff553c;'>z Polski</strong>") !!} <span style="position:relative; top:2px;">🇵🇱</span></h2>
            <p style="font-weight:400; max-width:600px; color: rgba(71, 71, 71, 0.9); font-size:16px; margin:0 auto;">
                {{ __('Get the best quality followers now.') }}</p>
            <div>
                <div class="trigger" style="">
                    <span id="fire"><img title="objednávky" src="https://kuplajky.sk/img/fire-icon.png" alt="objednávky"></span>
                    <span style="font-size:14px;">Dodaj <b style="font-weight:600;">100% polskich</b> followersów</span>
                </div>
                <input type="hidden" value="2" id="type">
                <div class="quality-blocks row justify-content-center" style="margin-bottom:15px; display:none;">
                    <div class="quality-obal " style="padding-right:6px; padding-left:0px;">
                        <div class="quality activated-quality global-btn">
                            <div class="quality-header">
                                <h4 style="margin-bottom:0px; text-align:left; font-size:15px; font-weight:600;">
                                    {{ __('High Quality') }}
                                </h4>
                            </div>
                            <div class="quality-body ">
                                <ul style="">
                                    <li><svg class="svg-icon svg-icon--planCheck" width="12" height="12"
                                            viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M5.27434 11.0391L0 6.96866L1.50311 5.20007L4.67896 7.65149L9.32546 0.561035L11.3512 1.76532L5.27434 11.0391Z"
                                                fill="currentColor"></path>
                                        </svg>
                                        <div>{!! __('<strong>High quality</strong> followers') !!}</div>
                                    </li>
                                    <li><svg class="svg-icon svg-icon--planCheck" width="12" height="12"
                                            viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M5.27434 11.0391L0 6.96866L1.50311 5.20007L4.67896 7.65149L9.32546 0.561035L11.3512 1.76532L5.27434 11.0391Z"
                                                fill="currentColor"></path>
                                        </svg>
                                        <div>{!! __('<strong>Worldwide</strong> followers') !!}</div>
                                    </li>
                                    <li style="display:none;"><svg class="svg-icon svg-icon--planCheck" width="12"
                                            height="12" viewBox="0 0 12 12" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M5.27434 11.0391L0 6.96866L1.50311 5.20007L4.67896 7.65149L9.32546 0.561035L11.3512 1.76532L5.27434 11.0391Z"
                                                fill="currentColor"></path>
                                        </svg>
                                        <div><strong>No password</strong> required</div>
                                    </li>
                                    <li style="display:none;"><svg class="svg-icon svg-icon--planCheck" width="12"
                                            height="12" viewBox="0 0 12 12" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M5.27434 11.0391L0 6.96866L1.50311 5.20007L4.67896 7.65149L9.32546 0.561035L11.3512 1.76532L5.27434 11.0391Z"
                                                fill="currentColor"></path>
                                        </svg>
                                        <div><strong>24/7</strong> support</div>
                                    </li>
                                </ul>
                            </div>
                            <span class="plan-check plan-checked"><svg class="svg-icon svg-icon--planCheck" width="14"
                                    height="14" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M5.27434 11.0391L0 6.96866L1.50311 5.20007L4.67896 7.65149L9.32546 0.561035L11.3512 1.76532L5.27434 11.0391Z"
                                        fill="#FFFFFF"></path>
                                </svg></span>
                        </div>
                    </div>
                    <div class="quality-obal" style="padding-left:0px; padding-right:0px;">
                        <div class="quality eu-btn">
                            <div class="quality-header" style=" background-color:#fb5343;">
                                <h4
                                    style="margin-bottom:0px; text-align:left; font-size:15px; font-weight:600; color:white !important;">
                                    {{ __('Real & Active') }} <i class="fa fa-question-circle" data-bs-toggle="modal"
                                        data-bs-target="#info" type="button"
                                        style="font-size:25px; right:10px; top:11px; position:absolute;"></i>
                                </h4>
                            </div>
                            <div class="quality-body">
                                <ul style="">
                                    <li><svg class="svg-icon svg-icon--planCheck" width="12" height="12"
                                            viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M5.27434 11.0391L0 6.96866L1.50311 5.20007L4.67896 7.65149L9.32546 0.561035L11.3512 1.76532L5.27434 11.0391Z"
                                                fill="#ff553c"></path>
                                        </svg>
                                        <div>{!! __('<strong>Real & Active</strong> followers') !!}</div>
                                    </li>
                                    <li><svg class="svg-icon svg-icon--planCheck" width="12" height="12"
                                            viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M5.27434 11.0391L0 6.96866L1.50311 5.20007L4.67896 7.65149L9.32546 0.561035L11.3512 1.76532L5.27434 11.0391Z"
                                                fill="#ff553c"></path>
                                        </svg>
                                        <div>{!! __('<strong>EU/USA</strong> with stories') !!}</div>
                                    </li>
                                    <li style="display:none;"><svg class="svg-icon svg-icon--planCheck" width="12"
                                            height="12" viewBox="0 0 12 12" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M5.27434 11.0391L0 6.96866L1.50311 5.20007L4.67896 7.65149L9.32546 0.561035L11.3512 1.76532L5.27434 11.0391Z"
                                                fill="#ff553c"></path>
                                        </svg>
                                        <div><strong>100% Instant</strong> Delivery</div>
                                    </li>
                                    <li style="display:none;"><svg class="svg-icon svg-icon--planCheck" width="12"
                                            height="12" viewBox="0 0 12 12" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M5.27434 11.0391L0 6.96866L1.50311 5.20007L4.67896 7.65149L9.32546 0.561035L11.3512 1.76532L5.27434 11.0391Z"
                                                fill="#ff553c"></path>
                                        </svg>
                                        <div><strong>No password</strong> required</div>
                                    </li>
                                    <li style="display:none;"><svg class="svg-icon svg-icon--planCheck" width="12"
                                            height="12" viewBox="0 0 12 12" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M5.27434 11.0391L0 6.96866L1.50311 5.20007L4.67896 7.65149L9.32546 0.561035L11.3512 1.76532L5.27434 11.0391Z"
                                                fill="#ff553c"></path>
                                        </svg>
                                        <div><strong>24/7</strong> support</div>
                                    </li>

                                </ul>
                            </div>
                            <span class="plan-check"><svg class="svg-icon svg-icon--planCheck" width="14"
                                    height="14" viewBox="0 0 12 12" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M5.27434 11.0391L0 6.96866L1.50311 5.20007L4.67896 7.65149L9.32546 0.561035L11.3512 1.76532L5.27434 11.0391Z"
                                        fill="#FFFFFF"></path>
                                </svg></span>
                        </div>
                    </div>
                </div>
                <div>
                    <input type="hidden" name="pack_id" id="pack_id" value="{{ $packs->first()->id }}">
                    <input type="hidden" name="pack_id1" id="pack_id1" value="{{ $packs->first()->id }}">
                    <div class="trigger" style="width:fit-content; margin:auto; margin-top:15px; display:none;">
                        <span id="fire"><img title="objednávky" src="{{ url('/img/fire-icon.png') }}"
                                alt="objednávky"></span>
                        <span style="font-size:16px; font-weight:500; top:-2px;">ONLY TODAY 40% OFF</span>
                    </div>

                    <style>
                        .plan-checked {
                            border-color: #ff553c !important;
                            background-color: #ff553c;
                        }

                        .plan-check {
                            position: absolute;
                            bottom: 10px;
                            right: 10px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            width: 25px;
                            height: 25px;
                            border: 2px solid #d3d3d3;
                            border-radius: 10px;
                        }

                        .new-design {

                            padding: 30px 20px;
                            margin: auto;
                            width: 550px;
                            max-width: 94%;
                            border-radius: 10px;
                            border: 1px solid #EDEDED;
                            background: #fff;
                            box-shadow: 0px 0px 10px 0px #f1f1f1;
                            padding-top: 35px;
                            margin-top: 15px;
                            font-family: 'Inter', sans-serif;
                        }

                        .nav-item {
                            padding: 0 5px 10px;
                        }

                        .nav-link12 {
                            border: 0;
                            cursor: pointer;
                            color: inherit;
                            border-bottom: 1px solid transparent;
                            margin-bottom: -1px;
                            transition: .3s border-color;
                            font-weight: 400;
                            display: block;
                            text-decoration: none;
                            border-radius: 8px;
                            background: #f5f8fa;
                            color: #181818 !important;
                            padding: 15px 10px;
                            width: 90px;
                        }

                        .nav-link12 h3 {
                            margin-bottom: 0px;
                            font-size: 19px;
                            font-weight: 700;
                            white-space: nowrap;
                        }

                        .nav-link12 p {
                            margin-bottom: 0;
                            font-size: 14px;
                            margin-top: 0px;
                            white-space: nowrap;
                        }

                        .active-nav {
                            background: #fb5343;
                            color: #ffffff !important;
                        }

                        .active-nav h3 {
                            color: white !important;
                        }

                        .new-features {
                            margin: auto;
                            width: 550px;
                            max-width: 94%;
                            margin-top: 20px;
                            background: #f9f9f9;
                            padding: 1.5em 1.8em;
                            border-radius: 1.6rem;
                            font-weight: 500;
                            font-size: 15px;
                            text-align: left;
                            color: #313336;
                            line-height: 1.55;
                        }

                        .new-features>ul {
                            display: flex;
                            flex-wrap: wrap;
                            list-style: none;
                            margin: -0.5rem;
                        }

                        .new-features>ul>li {
                            width: 50%;
                            position: relative;
                            padding: 0.5rem 0.5rem 0.5rem 2.4rem;
                        }

                        @media (max-width: 767px),
                        screen and (max-width: 812px) and (orientation: landscape) {
                            .new-features>ul>li {
                                width: 100%;
                            }
                        }

                        .new-features span {
                            position: absolute;
                            top: 0.3rem;
                            left: 0;
                            display: inline-flex;
                            align-items: center;
                            justify-content: center;
                            width: 1.7rem;
                            height: 1.7rem;
                            background-color: rgba(255, 85, 60, .1);
                            border-radius: 50%;
                        }

                        .svg-icon {
                            display: inline-block;
                            position: relative;
                            font-size: 0;
                            line-height: 0;
                            text-indent: -4004px;
                            vertical-align: top;
                        }
                    </style>
    <div class="choose-block" style="box-shadow: 0px 0px 10px 0px #f1f1f1;">
                    <div
                            style="font-size:22px; font-family:'Source Sans Pro'; text-align:center; margin-bottom:8px; margin-left:2px; font-weight:700; color:#303435;">
                            {{__("Choose amount")}}:</div>
                    <div class="form-group mb-3">
                        <img class="input-icon" src="{{ url('/poland.png') }}" alt="instagram followers">
                        <div class="selector dropdown">
                                <input type="hidden" name="plan" value="112">
                                <button type="button" class="form-control dropdown-toggle" data-bs-display="static"
                                    data-bs-toggle="dropdown"><strong
                                        class="amount">{{ $packs->first()->amount }}</strong>
                                    {{__("Followers")}}<span class="alt price-flw"
                                        style="font-size:19px; font-weight:700;">{{ number_format((float) $packs->first()->price,config("app.decimal"), ',', '') }}{{config('app.currency')}}</span></button>
                                <div class="dropdown-menu dropdown-stylized animate slideIn">
                                    @foreach ($packs as $p)
                                        <a href="#" data-id="{{ $p->id }}"
                                            data-price="{{ $p->price }}" data-amount="{{ $p->amount }}"
                                            data-old="{{ $p->old_price }}" class="package-selector"><span
                                                style="display:none;">{{ $p->amount }} Instagram
                                                Followers</span><span class="desc"><strong>{{ $p->amount }}</strong>
                                                {{__("Followers")}}</span><span class="alt"><span
                                                    style="display:none;">{{ $p->price }}</span><span
                                                    style="text-decoration: line-through; color:red; font-size:15px; font-weight:400;">{{ number_format((float) $p->old_price, config("app.decimal"), ',', '') }}{{config('app.currency')}}</span>
                                                {{ number_format((float) $p->price, config("app.decimal"), ',', '') }}{{config('app.currency')}}</span></a>
                                    @endforeach
                                </div>
                            </div>
                    </div>
                    <div
                        style="font-size:18px; margin-top:25px; margin-bottom:8px; margin-left:2px; margin-right:2px; font-weight:400; color:#303435; display:flex; justify-content:space-between;">
                        <input type="hidden" name="pack_id" id="pack_id" value="{{ $packs->first()->id }}">
                    </div>
                    <div class="price-text">
                            <div style="text-decoration: line-through; font-size:14px;" id="old-price">
                                {{ number_format((float) $packs->first()->old_price, config("app.decimal"), ',', '') }}{{config('app.currency')}}</div>
                            <div style="margin-top:-5px; font-size:31px; font-weight:600;"><span
                                    id="price-shower">{{ number_format((float) $packs->first()->price, config("app.decimal"), ',', '') }}</span><span
                                    style="font-size:27px; margin-left:3px;">{{config('app.currency')}}</span></div>
                            <div class="d-flex" style="justify-content: center; margin-top:-7px;">
                                <div style="margin-right:5px;"><svg width="21" height="20" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <rect opacity="0.1" x="0.633" y="0.115" width="19.48"
                                            height="19.48" rx="9.74" fill="#23CF87"></rect>
                                        <path
                                            d="M9.524 15.168 4.176 11.04 5.7 9.246l3.22 2.486 4.713-7.19 2.054 1.221-6.163 9.404Z"
                                            fill="#23CF87"></path>
                                    </svg></div>
                                <div class="flex-col" style="font-size:15px; margin-top:3px;"><span
                                        class="buy-form-alt__saved">{{__("You Save")}}
                                        <strong class="price-saved"
                                            style="color:#1fb174;">{{ number_format((float) $packs->first()->old_price - $packs->first()->price, config("app.decimal"), ',', '') }}{{config('app.currency')}}</strong></span>
                                </div>
                            </div>
                        </div>
                    <ul style="padding-left:20px; margin:0 auto; text-align:left;" class="features-list">
                        <div class="row" style="width:auto; margin:0 auto;">
                            <div class="col-md-6">
                                <li style="display:flex; justify-content: left;">
                                    <div><svg style="margin-right:10px;" height="20" viewBox="0 0 17 14" fill="none"
                                            xmlns="http://www.w3.org/2000/svg" width="20">
                                            <path
                                                d="M10.192 4.924 3.17.399a1.572 1.572 0 0 0-.854-.255c-.3 0-.594.088-.853.255-.26.167-.475.408-.624.697-.15.29-.229.619-.229.953v9.05c0 .335.079.663.229.953.15.29.365.53.624.697.26.168.554.256.853.256.3 0 .594-.088.854-.255l7.023-4.526c.26-.167.476-.407.626-.697.15-.29.229-.618.229-.953 0-.334-.079-.663-.23-.953-.15-.29-.365-.53-.625-.697Z"
                                                fill="#FF6B00"></path>
                                            <path
                                                d="M16.059 4.926 9.001.4A1.563 1.563 0 0 0 7.475.295 1.737 1.737 0 0 0 6.84.81c-.173.225-.296.49-.36.776l4.349 2.788c.347.223.636.543.837.93.2.386.307.824.307 1.27 0 .446-.106.885-.307 1.27-.2.387-.49.708-.837.93l-4.35 2.788c.065.286.188.552.36.776.173.224.39.4.634.516a1.564 1.564 0 0 0 1.527-.104l7.058-4.522c.261-.167.478-.407.629-.697.15-.29.23-.619.23-.954 0-.334-.08-.663-.23-.953-.15-.29-.368-.53-.629-.698Z"
                                                fill="#FF6B00"></path>
                                        </svg>
                                    </div>
                                    <div style="flex-grow:1; margin-top:2px;">{{ __('Orders start in 60 seconds') }}</div>
                                </li>
                                <li style="display:flex; justify-content: left;">
                                    <div><svg style="margin-right:10px;" width="20" height="20" viewBox="0 0 18 20"
                                            fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M17.031 5.05v.382a.949.949 0 0 1-.303.694.907.907 0 0 1-.707.234H16a.904.904 0 0 1-.582-.304.943.943 0 0 1-.234-.624V5.05c0-.664-.257-1.3-.716-1.77a2.42 2.42 0 0 0-1.73-.733h-.16a2.42 2.42 0 0 0-1.73.733 2.531 2.531 0 0 0-.717 1.77v1.395a31.469 31.469 0 0 0-1.846-.148V5.046c.001-1.163.453-2.278 1.257-3.1A4.248 4.248 0 0 1 12.576.657h.159c.564 0 1.123.113 1.644.334.521.22.995.544 1.394.952a4.4 4.4 0 0 1 .931 1.425c.216.533.327 1.104.327 1.68Zm-3.728 4.185v6.72c0 .23-.078.452-.221.628a.957.957 0 0 1-.562.34l-.584.112a27.412 27.412 0 0 1-10.413 0l-.584-.113a.957.957 0 0 1-.562-.339.996.996 0 0 1-.22-.628v-6.72c-.001-.229.077-.451.22-.628a.957.957 0 0 1 .562-.339l.086-.016c3.77-.729 7.64-.729 11.41 0l.086.016c.22.043.419.163.562.34.142.176.22.398.22.627Zm-4.164 1.788-.479-.49a.425.425 0 0 0-.59-.007l-1.976 1.787-.918-.735a.423.423 0 0 0-.57.036l-.477.49a.446.446 0 0 0-.02.598l1.677 1.984a.43.43 0 0 0 .322.148.423.423 0 0 0 .322-.148l2.723-3.052a.445.445 0 0 0-.014-.608v-.003Z"
                                                fill="#17CA80"></path>
                                        </svg> </div>
                                    <div style="flex-grow:1; margin-top:2px;">{{ __('24/7 Live Support') }}</div>
                                </li>


                            </div>
                            <div class="col-md-6">
                                <li style="display:flex; justify-content: left;">
                                    <div><svg style="margin-right:10px;" width="20" height="20"
                                            viewBox="0 0 21 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path fill-rule="evenodd" clip-rule="evenodd"
                                                d="M4.029 1.979c1.49 0 2.697 1.464 2.697 3.272 0 1.808-1.208 3.273-2.697 3.273-1.49 0-2.698-1.465-2.698-3.273S2.54 1.98 4.029 1.98ZM10.501 1.979c1.765 0 3.196 1.653 3.196 3.692 0 2.04-1.43 3.692-3.196 3.692-1.765 0-3.195-1.653-3.195-3.692 0-2.04 1.43-3.692 3.195-3.692ZM10.498 10.286c2.479 0 4.546 1.586 5.022 3.693H5.477c.476-2.107 2.543-3.693 5.021-3.693ZM17.348 2.901c1.513 0 2.74 1.24 2.74 2.77 0 1.529-1.227 2.769-2.74 2.769-1.512 0-2.739-1.24-2.739-2.77s1.227-2.769 2.74-2.769ZM17.269 9.364c2 0 3.633 1.635 3.732 3.692h-4.503a5.876 5.876 0 0 0-1.889-2.535 3.655 3.655 0 0 1 2.66-1.157ZM4.265 9.364c1.19 0 2.265.442 3.04 1.156-.954.643-1.708 1.518-2.159 2.536H0C.113 11 1.98 9.364 4.265 9.364Z"
                                                fill="#4198FF"></path>
                                        </svg> </div>
                                    <div style="flex-grow:1; margin-top:2px;">{{ __('100% polski konta') }}</div>

                                </li>
                                <li style="display:flex; justify-content: left;">
                                    <div><svg style="margin-right:10px;" width="20" height="20" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="m10.271 6.581-2.438.136.42-5.195C8.31.656 7.132.25 6.655 1.008l-6.25 9.415c-.393.569.083 1.326.784 1.3l2.439-.136-.42 5.195c-.085.866 1.12 1.272 1.597.514l6.251-9.416c.393-.595-.084-1.353-.785-1.299Z"
                                                fill="#FF603C"></path>
                                        </svg> </div>
                                    <div style="flex-grow:1; margin-top:2px;">{{ __('Non-Drop followers') }}
                                    </div>
                                </li>

                            </div>
                        </div>
                    </ul>
                    <div style="padding:10px 20px; margin-top:10px;">
                        <div style="border-top: 1px solid #efeff2;"></div>
                    </div>
                    <div
                        style="text-align:center; padding-bottom:10px; padding-left:30px; padding-right:30px; padding-top:25px;">

                        <button type="submit" data-id="" class="btn btn-alternate btn-rounded buy-btn"
                            style="color:white; font-size:16px; font-weight:600; background-color:#ff603c; padding: 13px 22px; width:100%; border-radius:8px;">{{ __('Buy Now') }}</button>


                    </div>
                </div>
                    <div class="new-design global-obal" style="display:none;">
                        <div>
                            <h3 style="font-weight: 600; font-size:19px; margin-top:-5px; margin-bottom:20px;">Wybierz Ilość:</h3>
                        </div>
                        <ul class="nav nav-tabs justify-content-center">
                            @foreach ($packs as $p)
                                <li class="nav-item select-pack" data-id="{{ $p->id }}"
                                    data-price="{{ $p->price }}" data-amount="{{ $p->amount }}"
                                    data-old="{{ $p->old_price }}">
                                    <a class="nav-link12 @if ($loop->first) active-nav @endif"
                                        role="tab">
                                        <h3>{{ $p->amount }}</h3>
                                        <p>Followers</p>
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                        <div style="margin-top:20px;">
                            <div
                                style="margin-top:0px; font-size:31px; font-weight:600; display:flex; align-items: flex-start; justify-content:center;">
                                <strong><span id="price-shower"
                                        style="color:#181818;">{{ number_format((float) $packs->first()->price, config("app.decimal"), ',', '') }}</span><span
                                        style=" margin-left:3px; color:#252525;">zł</span></strong><strike
                                    style="color:#9ca0a5; font-size: 1rem; padding-left: 0.3rem; padding-top:5px;"
                                    id="old-price">{{ number_format((float) $packs->first()->old_price, config("app.decimal"), ',', '') . 'zł' }}</strike>
                            </div>

                        </div>
                        <div
                            style="text-align:center; padding-bottom:10px; padding-left:30px; padding-right:30px; padding-top:10px;">

                            <button type="submit" data-id="" class="btn btn-alternate btn-rounded buy-btn"
                                style="color:white; font-size:16px; font-weight:600; background-color:#ff603c; padding: 13px 30px; border-radius:8px;">{{ __('Buy Now') }}</button>

                            <div class="d-flex" style="justify-content: center; margin-top:5px;">
                                <div style="margin-right:5px;"><svg width="21" height="20" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <rect opacity="0.1" x="0.633" y="0.115" width="19.48"
                                            height="19.48" rx="9.74" fill="#23CF87"></rect>
                                        <path
                                            d="M9.524 15.168 4.176 11.04 5.7 9.246l3.22 2.486 4.713-7.19 2.054 1.221-6.163 9.404Z"
                                            fill="#23CF87"></path>
                                    </svg></div>
                                <div class="flex-col" style="font-size:16px; margin-top:3px;"><span
                                        class="buy-form-alt__saved">{{ __('Today You Save') }}
                                        <strong class="price-saved"
                                            style="color:#1fb174;">{{ number_format((float) $packs->first()->old_price - $packs->first()->price, config("app.decimal"), ',', '') }}zł</strong></span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="new-design eu-obal" style="display: none;">
                        <ul class="nav nav-tabs justify-content-center">
                            @foreach ($packs1 as $p)
                                <li class="nav-item select-pack1" data-id="{{ $p->id }}"
                                    data-price="{{ $p->price }}" data-amount="{{ $p->amount }}"
                                    data-old="{{ $p->old_price }}">
                                    <a class="nav-link12 @if ($loop->first) active-nav @endif"
                                        role="tab">
                                        <h3>{{ $p->amount }}</h3>
                                        <p>Followers</p>
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                        <div style="margin-top:20px;">
                            <div
                                style="margin-top:0px; font-size:31px; font-weight:600; display:flex; align-items: flex-start; justify-content:center;">
                                <strong><span id="price-shower1"
                                        style="color:#181818;">{{ number_format($packs1->first()->price, config("app.decimal"), ',', '') }}</span><span
                                        style=" margin-left:1px; color:#252525;">zł</span></strong><strike
                                    style="color:#9ca0a5; font-size: 1rem; padding-left: 0.1rem; padding-top:5px;"
                                    id="old-price1">{{ number_format($packs1->first()->old_price, config("app.decimal"), ',', '') . 'zł' }}</strike>
                            </div>

                        </div>
                        <div
                            style="text-align:center; padding-bottom:10px; padding-left:30px; padding-right:30px; padding-top:10px;">

                            <button type="submit" data-id="" class="btn btn-alternate btn-rounded buy-btn"
                                style="color:white; font-size:16px; font-weight:600; background-color:#ff603c; padding: 13px 30px; border-radius:8px;">{{ __('Buy Now') }}</button>

                            <div class="d-flex" style="justify-content: center; margin-top:5px;">
                                <div style="margin-right:5px;"><svg width="21" height="20" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <rect opacity="0.1" x="0.633" y="0.115" width="19.48"
                                            height="19.48" rx="9.74" fill="#23CF87"></rect>
                                        <path
                                            d="M9.524 15.168 4.176 11.04 5.7 9.246l3.22 2.486 4.713-7.19 2.054 1.221-6.163 9.404Z"
                                            fill="#23CF87"></path>
                                    </svg></div>
                                <div class="flex-col" style="font-size:16px; margin-top:3px;"><span
                                        class="buy-form-alt__saved">{{ __('Today You Save') }}
                                        <strong class="price-saved1"
                                            style="color:#1fb174;">{{ number_format((float) $packs->first()->old_price - $packs->first()->price, config("app.decimal"), ',', '') }}zł</strong></span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="new-features" style="display:none;">
                        <ul>
                            <li><span><svg class="svg-icon svg-icon--check" width="14" height="14"
                                        viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M14 7.00082C14 6.3602 13.4832 5.84168 12.8427 5.83852C13.136 5.71484 13.3532 5.48492 13.4657 5.21216C13.5799 4.93784 13.5894 4.61912 13.4657 4.32259C13.2216 3.73115 12.5447 3.44888 11.9518 3.69148C12.1753 3.46473 12.2878 3.1698 12.2878 2.87326C12.2878 2.57516 12.1737 2.27863 11.947 2.05189C11.4952 1.59837 10.7612 1.59837 10.3078 2.04872C10.4283 1.75378 10.4187 1.43666 10.3062 1.1639C10.192 0.889576 9.97329 0.658076 9.67682 0.534382C9.08551 0.290187 8.40857 0.569266 8.16126 1.15755C8.15968 0.838832 8.02968 0.550242 7.82042 0.340926C7.60957 0.130032 7.31946 0 6.99923 0C6.35875 0 5.84035 0.516927 5.83719 1.15755C5.71354 0.864203 5.48367 0.646971 5.21098 0.532787C4.93672 0.418619 4.61807 0.409105 4.32161 0.532787C3.7303 0.778568 3.44809 1.45405 3.69064 2.04712C3.46394 1.82196 3.16908 1.71095 2.87261 1.71095C2.57458 1.71095 2.27811 1.82512 2.05142 2.05188C1.5996 2.5038 1.59801 3.23795 2.04825 3.69147C1.75338 3.57096 1.43789 3.58047 1.16363 3.69305C0.889374 3.80722 0.657926 4.02604 0.53426 4.32257C0.290121 4.91401 0.569137 5.59111 1.15728 5.83847C0.838641 5.84006 0.550117 5.97008 0.340848 6.1794C0.130002 6.39029 0 6.68046 0 7.00077C0 7.64139 0.516809 8.15991 1.15569 8.16307C0.862411 8.28676 0.645229 8.51667 0.532666 8.78943C0.418523 9.06534 0.410598 9.38247 0.532666 9.679C0.778391 10.2704 1.45372 10.5527 2.04665 10.3101C1.82154 10.5369 1.71056 10.8318 1.71056 11.1283C1.71056 11.4264 1.8247 11.723 2.05141 11.9497C2.50323 12.4016 3.23722 12.4032 3.69063 11.9529C3.57015 12.2478 3.57966 12.5649 3.69221 12.8377C3.80636 13.112 4.02512 13.3435 4.32159 13.4672C4.9129 13.713 5.59143 13.4323 5.83873 12.8425C5.84032 13.1612 5.97032 13.4498 6.17958 13.6591C6.39043 13.87 6.68054 14 7.00077 14C7.64125 14 8.15965 13.4831 8.16281 12.8425C8.28646 13.1358 8.51633 13.353 8.78902 13.4672C9.06328 13.5814 9.38193 13.5893 9.67839 13.4672C10.2697 13.223 10.5519 12.5459 10.3094 11.9529C10.5361 12.1765 10.8309 12.289 11.1274 12.289C11.4254 12.289 11.7219 12.1749 11.9486 11.9481C12.402 11.4946 12.402 10.762 11.9517 10.3085C12.2466 10.429 12.5637 10.4195 12.8364 10.3069C13.1106 10.1928 13.3421 9.97396 13.4657 9.67743C13.7115 9.08598 13.4309 8.40889 12.8427 8.16153C13.1614 8.15994 13.4499 8.02992 13.6592 7.8206C13.87 7.61129 14 7.3211 14 7.00082V7.00082ZM10.208 5.89877C10.0891 6.0177 9.9702 6.13662 9.85129 6.25556C9.22827 6.87872 8.60525 7.50189 7.98379 8.12349C7.58111 8.52626 7.17845 8.929 6.77418 9.33337C6.43017 9.67746 5.8864 9.66635 5.53764 9.33971C5.48374 9.28897 5.43142 9.23982 5.37752 9.19066C4.85121 8.69751 4.32489 8.20436 3.79854 7.7128C3.45135 7.38614 3.46404 6.80737 3.7922 6.47598C4.13462 6.1303 4.68157 6.14457 5.02874 6.46964C5.08264 6.5188 5.13496 6.56954 5.18886 6.61869C5.50275 6.91363 5.81823 7.20857 6.13212 7.50192C6.6727 6.95962 7.2149 6.41889 7.75548 5.87818C8.15816 5.47541 8.56081 5.07267 8.96509 4.6683C9.30275 4.33056 9.86237 4.32581 10.2016 4.66196C10.5393 4.99494 10.5456 5.56104 10.208 5.89878L10.208 5.89877Z"
                                            fill="#FF553C"></path>
                                    </svg></span>{{ __('Best quality possible') }}</li>
                            <li><span><svg width="16" height="12" viewBox="0 0 16 12" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M14.6147 4.69785L13.2279 4.91039C13.0754 4.94079 12.9231 4.81932 12.9231 4.65231L12.9383 1.61585C12.9383 0.826343 11.8866 0.568244 11.5055 1.25145L8.39628 7.05108C8.10667 7.59765 8.56395 8.25043 9.17357 8.15936L10.5606 7.94682C10.713 7.91642 10.8654 8.0379 10.8654 8.2049L10.8502 11.2414C10.8502 12.0309 11.9019 12.289 12.2829 11.6058L15.3921 5.80613C15.6818 5.25957 15.2245 4.60678 14.6148 4.69785H14.6147Z"
                                            fill="#FF553C"></path>
                                        <path opacity="0.3"
                                            d="M8.51873 1.77303C8.51873 1.26768 8.12706 0.857178 7.64495 0.857178H1.30249C0.820353 0.857178 0.428711 1.2677 0.428711 1.77303C0.428711 2.27835 0.82038 2.68888 1.30249 2.68888H7.66001C8.12701 2.68888 8.51868 2.27827 8.51868 1.77303H8.51873Z"
                                            fill="#FF553C"></path>
                                        <path opacity="0.3"
                                            d="M7 6C7 5.44821 6.70952 5 6.35195 5H1.64804C1.29046 5 1 5.44825 1 6C1 6.55176 1.29048 7 1.64804 7H6.36313C6.70948 7 6.99996 6.55166 6.99996 6H7Z"
                                            fill="#FF553C"></path>
                                        <path opacity="0.2"
                                            d="M6.73209 9.55762H2.2147C1.73439 9.55762 1.34424 9.96814 1.34424 10.4735C1.34424 10.9788 1.73442 11.3893 2.2147 11.3893H6.73209C7.2124 11.3893 7.60256 10.9788 7.60256 10.4735C7.60256 9.96823 7.21238 9.55762 6.73209 9.55762Z"
                                            fill="#FF553C"></path>
                                    </svg></span>{{ __('Non-Drop followers') }}</li>
                            <li><span><svg class="svg-icon svg-icon--clock" width="14" height="16"
                                        viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M7 2.24003C5.14349 2.24003 3.36296 2.96487 2.05026 4.25513C0.737595 5.54543 0 7.29537 0 9.12001C0 10.9447 0.73763 12.6947 2.05026 13.9849C3.36306 15.2752 5.14366 16 7 16C8.85634 16 10.637 15.2752 11.9497 13.9849C13.2624 12.6946 14 10.9447 14 9.12001C13.9978 7.29588 13.2596 5.54704 11.9473 4.25753C10.635 2.96765 8.85564 2.24215 6.99996 2.23999L7 2.24003ZM9.98725 12.2643C9.833 12.4369 9.6106 12.5361 9.37677 12.5363C9.17619 12.5379 8.98188 12.4668 8.83143 12.3362L6.46285 10.2722C6.2872 10.1206 6.18636 9.90204 6.18609 9.67222V5.67204V5.67217C6.18609 5.38636 6.34116 5.12225 6.59298 4.97935C6.8448 4.83644 7.15521 4.83644 7.40704 4.97935C7.65887 5.12225 7.81393 5.38636 7.81393 5.67217V9.28012L9.91394 11.1041H9.91407C10.0858 11.245 10.1908 11.4491 10.2047 11.6685C10.2185 11.888 10.1399 12.1034 9.98725 12.2641L9.98725 12.2643ZM4.94053 1.01601L9.44201 1.59993H4.5582C4.26741 1.59993 3.99869 1.44752 3.85329 1.20002C3.70789 0.952517 3.70789 0.647428 3.85329 0.399915C3.99869 0.152403 4.2674 0 4.5582 0H9.44201C9.7328 0 10.0015 0.152413 10.1469 0.399915C10.2923 0.647418 10.2923 0.952507 10.1469 1.20002C10.0015 1.44753 9.7328 1.59993 9.44201 1.59993L4.94053 1.01601Z"
                                            fill="#FF553C"></path>
                                    </svg></span>{{ __('Orders start in 60 seconds') }}</li>
                            <li><span><svg xmlns="http://www.w3.org/2000/svg" class="svg-icon svg-icon--message"
                                        width="12" height="12" fill="none" class="bi bi-lock-fill"
                                        viewBox="0 0 16 16">
                                        <path
                                            d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"
                                            fill="#FF553C" />
                                    </svg>

                                </span>{{ __('24/7 Live Support') }}</li>
                        </ul>
                    </div>

                </div>
            </div>
        </div>

    </section>
    <script>
        // Set the date we're counting down to
        var countDownDate = new Date("Mar 4, 2022 19:59:25").getTime();
        countdown();
        // Update the count down every 1 second
        var x = setInterval(countdown, 1000);

        function countdown() {
            // Get today's date and time
            var now = new Date().getTime();

            // Find the distance between now and the count down date
            var distance = countDownDate - now;

            // Time calculations for days, hours, minutes and seconds
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance / (1000 * 60 * 60)));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);

            // Display the result in the element with id="demo"
            document.getElementById("cas-slevy").innerHTML = hours + "h " +
                minutes + "m " + seconds + "s ";

            // If the count down is finished, write some text
            if (distance < 0) {
                clearInterval(x);
                document.getElementById("cas-slevy").innerHTML = "Sleva končí dnes o půlnoci";
            }
        }
    </script>
    <x-review-count />

    <section class="mob-marg"
        style="margin-top:30px; border-top:1px solid #EDEDED; background-color:white; padding-top:40px; padding-bottom:40px;">
        <div class="container" data-aos="fade-up">
            <div class="section-heading text-center">
                <h2 class="bold" style="font-size:37px;">{{ __('How It Works?') }}</h2>
                <p class="lead"
                    style="font-size:17px; color:#333333 !important; font-weight:400; margin:0 auto; margin-top:8px; max-width:600px;">
                    Krótki i szczegółowy poradnik, krok po kroku pomoże Ci lepiej zrozumieć działanie serwisu.
                </p>
            </div>
            <div class="row gap-y text-center text-md-left">
                <div class="col-md-4" style="margin-top:10px;">
                    <div class="kroky-block">
                        <div>
                            <img src="{{ url('/krok1.png') }}" alt="Kupit instagram sledovatelov krok 1">
                        </div>
                        <div style="margin-top:12px;">
                            {{ __('Choose Package') }}
                        </div>
                    </div>
                    <p class="px-4" style="color:#333; font-weight:400; font-size:17px;">
                        {{ __("It's easy to get started with us. Choose from our wide range of packages that cater your requirements.") }}
                    </p>
                </div>
                <div class="col-md-4" style="margin-top:10px;">
                    <div class="kroky-block">
                        <div>
                            <img src="{{ url('/krok2.png') }}" alt="kupit instagram followers krok 2">
                        </div>
                        <div style="margin-top:12px;">
                            {{ __('Enter Username') }}
                        </div>
                    </div>
                    <p class="px-4" style="color:#333; font-weight:400; font-size:17px;">
                        {{ __('In the order form simply enter your username on Instagram or TikTok. We DON’T require your password.') }}
                    </p>
                </div>
                <div class="col-md-4" style="margin-top:10px;">
                    <div class="kroky-block">
                        <div>
                            <img src="{{ url('/krok3.png') }}" alt="kupit sledovatelov na instagrame krok 3">
                        </div>
                        <div style="margin-top:12px;">
                            {{ __('Watch the results') }}
                        </div>
                    </div>
                    <p class="px-4" style="color:#333; font-weight:400; font-size:17px;">
                        {{ __("Immediately after payment, you will automatically start getting Followers or Likes. You don't wait for anything.") }}
                    </p>
                </div>
            </div>
        </div>

    </section>

    <section style="padding-top:30px; padding-bottom:0px; border-top:1px solid #EDEDED;" data-aos="fade-up">
        <div class="container">
            <div class="gap-y align-items-center text-center header-main">
                <h2 class="bold" style="font-size:30px;">Najczęściej zadawane pytania</h2>
                <p style="font-weight:400; max-width:600px; color: #62676c; font-size:16px; margin:0 auto;">
                    {{ __('Hundreds of customers trust us. And these are the most common questions they ask.') }}</p>
            </div>
            <div>
                <div class="accordion" id="accordionExample" style="margin:0 auto; margin-top:40px; max-width:900px; ">
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="headingFor1">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapseFor1" aria-expanded="false" aria-controls="collapseFor1"
                                style="display:flex; justify-content:left;">
                                <div>
                                    <div class="accordion__question-mark"><span>?</span></div>
                                </div>
                                <div style="flex-grow:1;">
                                    {{ __('Will my followers or likes disappear or decrease in time?') }}</div>
                            </button>
                        </h2>
                        <div id="collapseFor1" class="accordion-collapse collapse" aria-labelledby="headingFor1"
                            data-bs-parent="#accordionExample">
                            <div class="accordion-body">
                                {!! __(
                                    'The number of your followers or likes <b>will not decrease</b> and it is guaranteed. We give our promise that we will recompensate all possible decreases for 6 months after the purchase.',
                                ) !!}
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="headingTwo1">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapseTwo1" aria-expanded="false" aria-controls="collapseTwo1"
                                style="display:flex; justify-content:left;">
                                <div>
                                    <div class="accordion__question-mark"><span>?</span></div>
                                </div>
                                <div style="flex-grow:1;">{{ __('Can I get banned for buying followers or likes?') }}
                                </div>
                            </button>
                        </h2>
                        <div id="collapseTwo1" class="accordion-collapse collapse" aria-labelledby="headingTwo1"
                            data-bs-parent="#accordionExample">
                            <div class="accordion-body">
                                {{ __("Absolutely not. It's not different than asking for a friend to follow your account. No one of our customers came to us with a complaint regarding their account's status on Instagram. Our service is 100% safe and we will NEVER ask for your password.") }}
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="headingOne1">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapseOne1" aria-expanded="true" aria-controls="collapseOne1"
                                style="display:flex; justify-content:left;">
                                <div>
                                    <div class="accordion__question-mark"><span>?</span></div>
                                </div>
                                <div style="flex-grow:1;">
                                    {{ __('How long will it take for me to receive my followers or likes?') }}</div>
                            </button>
                        </h2>
                        <div id="collapseOne1" class="accordion-collapse collapse" aria-labelledby="headingOne1"
                            data-bs-parent="#accordionExample">
                            <div class="accordion-body">
                                <div>
                                    {{ __("We take pride in the fact that your order will start running immediately after payment. Everything is completely automatic. This way you don't have to wait for anything or anyone. <p>The delivery time itself also depends on the number of followers purchased. Usually, it's all delivered within minutes. Likes are always delivered in seconds.</p>") }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="headingTwo">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"
                                style="display:flex; justify-content:left;">
                                <div>
                                    <div class="accordion__question-mark"><span>?</span></div>
                                </div>
                                <div style="flex-grow:1;">{{ __('What will you need from me?') }}</div>
                            </button>
                        </h2>
                        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
                            data-bs-parent="#accordionExample">
                            <div class="accordion-body">
                                <div>{{ __('Almost nothing - just your username on targeted social platform.') }}</div>
                                <div style="margin-top:10px;">
                                    {{ __('We will never ask you for any private information such as passwords or similar things. This makes our service completely secure.') }}
                                </div>
                            </div>
                        </div>
                    </div>


                </div>
            </div>
        </div>
    </section>

    <x-reasons />
    <style>

    </style>
    <section>
        <div class="container">

        </div>
    </section>

    <x-review-block />

    <x-footer-buy />
@endsection
@section('scripts')
    <script>
        $(document).ready(function() {

            $(".select-pack").click(function() {
                $(".select-pack").not(this).children().removeClass("active-nav");
                $(this).children().addClass("active-nav");
                var old_price = $(this).data("old");
                var price = $(this).data("price");
                $("#pack_id").val($(this).data("id"));
                $(".price-flw").html($(this).data("price").toFixed(2).replace('.', ',') + "zł");
                $(".amount").html($(this).data("amount"));
                $("#price-shower").html($(this).data("price").toFixed(2).replace('.', ','));
                $(".price-saved").html(Number(old_price - price).toFixed(2).replace('.', ',') + "zł");
                $("#old-price").html(Number(old_price).toFixed(2).replace('.', ',') + "zł");
            });

            $(".select-pack1").click(function() {
                $(".select-pack1").not(this).children().removeClass("active-nav");
                $(this).children().addClass("active-nav");
                var old_price = $(this).data("old");
                var price = $(this).data("price");
                $("#pack_id1").val($(this).data("id"));
                $(".price-flw1").html($(this).data("price").toFixed(2).replace('.', ',') + "zł");
                $(".amount1").html($(this).data("amount"));
                $("#price-shower1").html($(this).data("price").toFixed(2).replace('.', ','));
                $(".price-saved1").html(Number(old_price - price).toFixed(2).replace('.', ',') + "zł");
                $("#old-price1").html(old_price.toFixed(2).replace('.', ',') + "zł");
            });

            $(".global-btn").click(function() {
                $(".eu-obal").hide();
                $(".global-obal").show();
                $(".eu-btn").removeClass("activated-quality");
                $(".global-btn").addClass("activated-quality");
                $(".global-btn").find(".plan-check").addClass("plan-checked");
                $(".eu-btn").find(".plan-check").removeClass("plan-checked");
                $("#type").val(1);
            });
            $(".eu-btn").click(function() {
                $(".global-obal").hide();
                $(".eu-obal").show();
                $(".global-btn").removeClass("activated-quality");
                $(".eu-btn").addClass("activated-quality");
                $(".eu-btn").find(".plan-check").addClass("plan-checked");
                $(".global-btn").find(".plan-check").removeClass("plan-checked");
                $("#type").val(2);

            });

            $("#reviewForm").on('submit', function(e) {
                e.preventDefault();
                $(".send-review").attr("disabled", "disabled");
                var name = $("#prezdivka").val();
                var email = $("#email").val();
                var rating = $("input[name=rating]:checked").val();
                var textarea = $("#rate-text").val();

                $.ajax({
                    url: "/submit-review",
                    type: "POST",
                    data: {
                        "_token": "{{ csrf_token() }}",
                        name: name,
                        email: email,
                        rating: rating,
                        textarea: textarea,
                    },
                    success: function(response) {
                        $(".review-sent").show().delay(3000).fadeOut();
                        $(".send-review").removeAttr("disabled");
                        $("#prezdivka").val("");
                        $("#email").val("");
                        $("#rate-text").val("");
                    },
                });
            });

            $(".buy-btn").click(function() {
                var type = $("#type").val();
                if (type == 2) {
                    var pack = $("#pack_id1").val();
                } else {
                    var pack = $("#pack_id").val();
                }
                $.ajax({
                    url: '/add-to-cart',
                    data: {
                        pack_id: pack,
                        type: type
                    },
                    type: "GET",
                    success: function(data) {
                        window.location.href = data;
                    }
                });
            });

            $(".write-review-btn1").click(function() {
                $(".review-form").toggle();
                var text = $(this).text();
                $(this).text(
                    text == "Napsat recenzi" ? "Zrušit" : "Napsat recenzi");
            });

            $('.reviews').slick({
                centerMode: false,
                speed: 150,
                swipe: true,
                dots: true,
                arrows: false,
                slidesToShow: 3,
                focusOnSelect: false,
                responsive: [{
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 1
                    }
                }]
            });

            $(".package-selector").click(function() {
                event.preventDefault();
                var old_price = $(this).data("old");
                var price = $(this).data("price");
                $("#pack_id").val($(this).data("id"));
                $(".price-flw").html($(this).data("price").toFixed({{config("app.decimal")}}).replace('.', ',')+"{{config('app.currency')}}");
                $(".amount").html($(this).data("amount"));
                $("#price-shower").html($(this).data("price").toFixed({{config("app.decimal")}}).replace('.', ','));
                $(".price-saved").html(Number(old_price - price).toFixed({{config("app.decimal")}}).replace('.', ',')+"{{config('app.currency')}}");
                $("#old-price").html(old_price.toFixed({{config("app.decimal")}}).replace('.', ',')+"{{config('app.currency')}}");
            });

            $(".package-selector1").click(function() {
                event.preventDefault();
                var old_price = $(this).data("old");
                var price = $(this).data("price");
                $("#pack_id1").val($(this).data("id"));
                $(".price-flw1").html('zł' + $(this).data("price"));
                $(".amount1").html($(this).data("amount"));
                $("#price-shower1").html($(this).data("price"));
                $(".price-saved1").html('zł' + Number(old_price - price).toFixed(2));
                $("#old-price1").html('zł' + old_price);
            });

            $('.cenik').slick({
                dots: false,
                arrows: false,
                centerMode: false,
                variableWidth: true,
                infinite: false,
                speed: 150,
                swipe: true,
                focusOnSelect: false
            });
        });
    </script>
@endsection