@extends('layouts.home_layout')
@section('title', 'يونيكوم للاتصالات ')
@section('head')

@endsection

@section('content')
    <section style="background-color: var(--my-color-dark-grey);min-height: 50vh">
        <div class="dotContainer" style="z-index: 1">
            <div class="row " style="position: relative;z-index: 2">
                <div class="d-md-none col-12 col-md-6 col-lg-5" style="padding-bottom: 40px;align-items: center;">
                    <img src="/images/telecom/hero.png"
                         style="
                     border-right:15px solid rgb(68 75 104 / 50%);
                     border-bottom:15px solid rgb(68 75 104 / 50%);
                     border-left:15px solid rgb(68 75 104 / 50%);
                     background-color: rgb(68 75 104 / 50%);
                     border-radius: 10px;
                     object-fit: contain; display: block;margin-left: auto;margin-top: 0; margin-right: auto;max-width: 400px;max-height: 500px">
                </div>
                <div class="col-12 col-md-6 col-lg-7 d-flex justify-content-start align-items-center" style="margin-bottom: 50px">

                    <div style="margin-right: 30px;margin-top: 10px">
                        <div style="text-decoration-line: underline;text-decoration-color: var(--my-color-red);font-weight: bold;font-size: 35px;color:white;text-align: right;">
                            مواكبة المستقبل
                        </div>
                        <br/>
                        <div
                            style="max-width: 683px;height: 132px;font-weight: 300;font-size: 22px;line-height: 35px;text-align: right;color: white">
                            نحوّل الأفكار إلى واقع للمشاركة في خلق مستقبل مستدام، متنوع، ومبتكر للجميع، من خلال التكنولوجيا
                            والابتكار البشري.
                        </div>

                        <div
                            style="float: right;display: inline-block;padding: 15px;cursor: pointer;color: var(--my-color-red);border-radius: 40px;background-color: white;box-shadow:  0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
                            اكتشف لماذا يجب أن تتعاون معنا

                        </div>
                    </div>
                </div>
                <div class="d-none d-md-block col-12 col-md-6 col-lg-5" style="padding-bottom: 40px;align-items: center;">
                    <img src="/images/telecom/hero.png"
                         style="
                     border-right:15px solid rgb(68 75 104 / 50%);
                     border-bottom:15px solid rgb(68 75 104 / 50%);
                     border-left:15px solid rgb(68 75 104 / 50%);
                     background-color: rgb(68 75 104 / 50%);
                     border-radius: 10px;
                     object-fit: contain; display: block;margin-left: auto;margin-top: 0; margin-right: auto;max-width: 400px;max-height: 500px">
                </div>

            </div>
        </div>

    </section>

    <br/>
    <br/>
    <br/>
    <section style="background-color: var(--my-color-grey2-bg);height: 350px">

        <div class="d-flex justify-content-center align-item-center">
            <div
                style="color: #373c51;;max-width: 650px;margin: 40px;font-weight: bold;font-size: 24px;line-height: 40px;text-align: center;">
                نعمل ضمن مجموعة واسعة من القطاعات والصناعات، ونقدم
                حلولاً متكاملة وشاملة لعملائنا.
            </div>
        </div>
        <div style="height: 400px">
            <img src="/images/telecom/hero-2.png"
                 style="object-fit: contain; display: block;margin-left: auto;margin-top: 0; margin-right: auto;max-width: 1000px;max-height: 400px">
        </div>

    </section>
    <div style="height: 200px"></div>

    <br/>
    <br/>
    <section>
        <div class="d-flex justify-content-center align-item-center">
            <div
                style="color: var(--my-color-red);font-weight: bold;font-size: 32px;line-height: 47px;text-align: center;">
                أقسام <span class="red-underline">شركتنا</span>
            </div>
        </div>
        <br/>
        <div class="d-flex justify-content-center align-item-center">
            <div
                style="color: var(--my-color-dark-grey);font-weight: bold;font-size: 32px;line-height: 51px;text-align: center;">
                التعاون لتقديم الابتكار لأي صناعة
            </div>
        </div>
        <div class="d-flex justify-content-center align-item-center">
            <div
                style="color: var(--my-color-grey-text);font-weight: normal;font-size: 20px;line-height: 43px;text-align: center;">
                تمهيد الطرق نحو الازدهار والاتصال العالمي.
            </div>
        </div>
        <br/>




    </section>

    <div style="margin: 30px ">
        <div class="options">
            <div class="option active" style="position: relative; --optionBackground: url('{{env('APP_URL')}}/images/telecom/1.png'); ">
                <div class="shadow"></div>
                <div class="label">
                    <div class=" d-flex justify-content-between align-item-center" style="height: 100%">
                        <div style="
                            display: flex;justify-content: center; align-items: center; height: 100%;text-align: center;
                        padding: 2px 15px 2px 5px;font-weight: bold;font-size: 18px;line-height: 35px;color: var(--my-color-red)">
                            أنظمة المهام الحرجة
                        </div>
                        <div class="d-flex justify-content-center align-item-center p-1 m-1">

                            <div style="display: flex;justify-content: center; align-items: center;height: 100%; text-align: center;
                                color: var(--my-color-grey-text);font-weight: normal;font-size: 16px;line-height: 25px;">
                                <a href="/solutions/mission-critical"
                                   style="color: var(--my-color-grey-text);font-weight: normal;font-size: 16px;line-height: 25px;text-align: center;">اعرف
                                    المزيد </a></div>
                            <div style="display: flex;justify-content: center; align-items: center; height: 100%;text-align: center;
                                margin-right: 10px">
                                <i class="bi bi-arrow-left"></i>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="option" style="position: relative; --optionBackground: url('{{env('APP_URL')}}/images/telecom/4.png');; ">
                <div class="shadow"></div>
                <div class="label">
                    <div class=" d-flex justify-content-between align-item-center" style="height: 100%">
                        <div style="
                            display: flex;justify-content: center; align-items: center; height: 100%;text-align: center;
                        padding: 2px 15px 2px 5px;font-weight: bold;font-size: 18px;line-height: 35px;color: var(--my-color-red)">
                            اتصالات
                        </div>
                        <div class="d-flex justify-content-center align-item-center p-1 m-1">

                            <div style="display: flex;justify-content: center; align-items: center;height: 100%; text-align: center;
                                color: var(--my-color-grey-text);font-weight: normal;font-size: 16px;line-height: 25px;">
                                <a href="/solutions/telecom"
                                   style="color: var(--my-color-grey-text);font-weight: normal;font-size: 16px;line-height: 25px;text-align: center;">اعرف
                                    المزيد </a></div>
                            <div style="display: flex;justify-content: center; align-items: center; height: 100%;text-align: center;
                                margin-right: 10px">
                                <i class="bi bi-arrow-left"></i>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="option" style="position: relative; --optionBackground: url('{{env('APP_URL')}}/images/telecom/3.png');; ">
                <div class="shadow"></div>
                <div class="label">
                    <div class=" d-flex justify-content-between align-item-center" style="height: 100%">
                        <div style="
                            display: flex;justify-content: center; align-items: center; height: 100%;text-align: center;
                        padding: 2px 15px 2px 5px;font-weight: bold;font-size: 18px;line-height: 35px;color: var(--my-color-red)">
                            مركز البيانات
                        </div>
                        <div class="d-flex justify-content-center align-item-center p-1 m-1">

                            <div style="display: flex;justify-content: center; align-items: center;height: 100%; text-align: center;
                                color: var(--my-color-grey-text);font-weight: normal;font-size: 16px;line-height: 25px;">
                                <a href="/solutions/data-centers"
                                   style="color: var(--my-color-grey-text);font-weight: normal;font-size: 16px;line-height: 25px;text-align: center;">اعرف
                                    المزيد </a></div>
                            <div style="display: flex;justify-content: center; align-items: center; height: 100%;text-align: center;
                                margin-right: 10px">
                                <i class="bi bi-arrow-left"></i>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <div class="option" style="position: relative; --optionBackground: url('{{env('APP_URL')}}/images/telecom/8.png');; ">
                <div class="shadow"></div>
                <div class="label">
                    <div class=" d-flex justify-content-between align-item-center" style="height: 100%">
                        <div style="
                            display: flex;justify-content: center; align-items: center; height: 100%;text-align: center;
                        padding: 2px 15px 2px 5px;font-weight: bold;font-size: 18px;line-height: 35px;color: var(--my-color-red)">
                            الشبكات و حلول تكنولوجيا المعلومات
                        </div>
                        <div class="d-flex justify-content-center align-item-center p-1 m-1">

                            <div style="display: flex;justify-content: center; align-items: center;height: 100%; text-align: center;
                                color: var(--my-color-grey-text);font-weight: normal;font-size: 16px;line-height: 25px;">
                                <a href="/solutions/networks"
                                   style="color: var(--my-color-grey-text);font-weight: normal;font-size: 16px;line-height: 25px;text-align: center;">اعرف
                                    المزيد </a></div>
                            <div style="display: flex;justify-content: center; align-items: center; height: 100%;text-align: center;
                                margin-right: 10px">
                                <i class="bi bi-arrow-left"></i>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="option" style="position: relative; --optionBackground: url('{{env('APP_URL')}}/images/telecom/5.png');; ">
                <div class="shadow"></div>
                <div class="label">
                    <div class=" d-flex justify-content-between align-item-center" style="height: 100%">
                        <div style="
                            display: flex;justify-content: center; align-items: center; height: 100%;text-align: center;
                        padding: 2px 15px 2px 5px;font-weight: bold;font-size: 18px;line-height: 35px;color: var(--my-color-red)">
                            الأمن السيبراني
                        </div>
                        <div class="d-flex justify-content-center align-item-center p-1 m-1">

                            <div style="display: flex;justify-content: center; align-items: center;height: 100%; text-align: center;
                                color: var(--my-color-grey-text);font-weight: normal;font-size: 16px;line-height: 25px;">
                                <a href="/solutions/cyber-security"
                                   style="color: var(--my-color-grey-text);font-weight: normal;font-size: 16px;line-height: 25px;text-align: center;">اعرف
                                    المزيد </a></div>
                            <div style="display: flex;justify-content: center; align-items: center; height: 100%;text-align: center;
                                margin-right: 10px">
                                <i class="bi bi-arrow-left"></i>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="option" style="position: relative; --optionBackground: url('{{env('APP_URL')}}/images/telecom/1.png');; ">
                <div class="shadow"></div>
                <div class="label">
                    <div class=" d-flex justify-content-between align-item-center" style="height: 100%">
                        <div style="
                            display: flex;justify-content: center; align-items: center; height: 100%;text-align: center;
                        padding: 2px 15px 2px 5px;font-weight: bold;font-size: 18px;line-height: 35px;color: var(--my-color-red)">
التحول الرقمي
                        </div>
                        <div class="d-flex justify-content-center align-item-center p-1 m-1">

                            <div style="display: flex;justify-content: center; align-items: center;height: 100%; text-align: center;
                                color: var(--my-color-grey-text);font-weight: normal;font-size: 16px;line-height: 25px;">
                                <a href="/solutions/digital-transformation"
                                   style="color: var(--my-color-grey-text);font-weight: normal;font-size: 16px;line-height: 25px;text-align: center;">اعرف
                                    المزيد </a></div>
                            <div style="display: flex;justify-content: center; align-items: center; height: 100%;text-align: center;
                                margin-right: 10px">
                                <i class="bi bi-arrow-left"></i>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="option" style="position: relative; --optionBackground: url('{{env('APP_URL')}}/images/telecom/2.png');; ">
                <div class="shadow"></div>
                <div class="label">
                    <div class=" d-flex justify-content-between align-item-center" style="height: 100%">
                        <div style="
                            display: flex;justify-content: center; align-items: center; height: 100%;text-align: center;
                        padding: 2px 15px 2px 5px;font-weight: bold;font-size: 18px;line-height: 35px;color: var(--my-color-red)">
                            المدن الذكية
                        </div>
                        <div class="d-flex justify-content-center align-item-center p-1 m-1">

                            <div style="display: flex;justify-content: center; align-items: center;height: 100%; text-align: center;
                                color: var(--my-color-grey-text);font-weight: normal;font-size: 16px;line-height: 25px;">
                                <a href="/solutions/smart-cities"
                                   style="color: var(--my-color-grey-text);font-weight: normal;font-size: 16px;line-height: 25px;text-align: center;">اعرف
                                    المزيد </a></div>
                            <div style="display: flex;justify-content: center; align-items: center; height: 100%;text-align: center;
                                margin-right: 10px">
                                <i class="bi bi-arrow-left"></i>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="option" style="position: relative; --optionBackground: url('{{env('APP_URL')}}/images/telecom/7.png'); ">
                <div class="shadow"></div>
                <div class="label">
                    <div class=" d-flex justify-content-between align-item-center" style="height: 100%">
                        <div style="
                            display: flex;justify-content: center; align-items: center; height: 100%;text-align: center;
                        padding: 2px 15px 2px 5px;font-weight: bold;font-size: 18px;line-height: 35px;color: var(--my-color-red)">
                            تقنيات التعليم
                        </div>
                        <div class="d-flex justify-content-center align-item-center p-1 m-1">

                            <div style="display: flex;justify-content: center; align-items: center;height: 100%; text-align: center;
                                color: var(--my-color-grey-text);font-weight: normal;font-size: 16px;line-height: 25px;">
                                <a href="/solutions/education-technology"
                                   style="color: var(--my-color-grey-text);font-weight: normal;font-size: 16px;line-height: 25px;text-align: center;">اعرف
                                    المزيد </a></div>
                            <div style="display: flex;justify-content: center; align-items: center; height: 100%;text-align: center;
                                margin-right: 10px">
                                <i class="bi bi-arrow-left"></i>
                            </div>
                        </div>
                    </div>

                </div>
            </div>


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

@endsection

@section('foot')
    <style>

        .options {
            display: flex;
            flex-direction: row;
            align-items: stretch;
            overflow: hidden;
            min-width: 100%;
            height: 400px;
        }

        .options .option {
            position: relative;
            overflow: hidden;
            min-width: 60px;
            margin: 10px;
            background: var(--optionBackground, var(--defaultBackground, #e6e9ed));
            background-size: cover;
            /*background-position: center;*/
            /*background-repeat: no-repeat;*/

            cursor: pointer;
            transition: background 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
            transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
        }

        .options .option.active {
            /*flex-grow: 10000;*/
            transform: scale(1);
            min-width: 600px;
            margin: 0px;
            /*border-radius: 40px;*/
            background-size: auto 100%;
        }


        .options .option.active .shadow {
            box-shadow: inset 0 -120px 120px -120px black,
            inset 0 -120px 120px -120px black;
        }

        .options .option.active .label {
            bottom: 0;
            left: 0;
            background: #eee;
        }

        .options .option.active .label .info > div {
            left: 45px;
            opacity: 1;

        }

        .options .option:not(.active) {
            flex-grow: 1;
            /*border-radius: 30px;*/
        }

        .options .option:not(.active) .shadow {
            bottom: -40px;
            box-shadow: inset 0 -120px 120px -120px black, inset 0 -120px 0px -100px black;
        }

        .options .option:not(.active) .label {
            bottom: 10px;
            left: 10px;
        }

        .options .option:not(.active) .label .info > div {
            left: 0px;
            opacity: 0;
        }

        .options .option .shadow {
            position: absolute;
            bottom: 0px;
            left: 0;
            height: 120px;
            transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
        }

        .options .option .label {
            display: flex;
            position: absolute;
            right: 0;
            height: 40px;
            transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
        }

        .options .option .label .icon {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            min-width: 40px;
            max-width: 40px;
            height: 40px;
            /*border-radius: 100%;*/
            /*background-color: white;*/
            color: var(--defaultBackground);
        }

        .options .option .label .info {
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-left: 10px;
            color: white;
            white-space: pre;
        }

        .options .option .label .info > div {
            position: absolute;
            transition: 0.5s cubic-bezier(0.05, 0.061, 0.41, 0.95) opacity 0.5s ease-out;
        }

        .options .option .label .info .main {
            font-weight: bold;
            font-size: 1.2rem;
        }

        .options .option .label {
            display: none;
            min-height: 70px;
        }

        /* Show label and icon only on the active option */
        .options .option.active .label {
            display: block;
        }
    </style>
    <style>
        .options {
            display: flex;
            flex-direction: row;
            align-items: stretch;
            overflow: hidden;
            min-width: 100%;
            height: 400px;
        }

        .options .option {
            position: relative;
            overflow: hidden;
            min-width: 60px;

            margin: 10px;
            background: var(--optionBackground, var(--defaultBackground, #e6e9ed));
            background-size: auto 120%;
            background-position: center;
            cursor: pointer;
            transition: background 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
            transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
        }

        .options .option.active {
            transform: scale(1);
            min-width: 600px;
            margin: 0;
            /*background-size: auto 100%;*/
        }

        .options .option:not(.active) {
            flex-grow: 1;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .options {
                flex-direction: column;
                height: auto;
            }

            .options .option {
                min-width: 100%;
                height: 200px;
            }

            .options .option.active {
                min-width: 100%;
                height: 300px;
            }

            .options .option .label {
                /*display: flex;*/
                bottom: 0;
                left: 0;
                background: #eee;
            }
        }

        @media (max-width: 480px) {
            .options .option {
                height: 150px;
            }

            .options .option.active {
                height: 200px;
            }

            .options .option .label div {
                font-size: 14px;
                line-height: 20px;
            }
        }
    </style>


    <script>
        $(".option").click(function () {
            $(".option").removeClass("active");
            $(this).addClass("active");
        });
    </script>
@endsection


