@extends('layouts.front-layout')
@section('content')
    <style>
        body {
            overflow-x: hidden;
            background-color: white;
        }

        .img1 {
            width: 100%;
            height: 250px;
            border-radius: 15px;
            background-color: black;
            overflow: hidden;
            padding: 0;
        }

        .img1 img {
            width: 100%;
            height: 250px;
            border-radius: 15px;
            object-fit: cover;
            opacity: 0.8;
        }

        .img2 {
            width: 70%;
            height: inherit;
            border-radius: 10px 10px 70px 10px;
            background-color: black;
            overflow: hidden;
            padding: 0;
        }

        .img2 img {
            width: 100%;
            height: 100%;
            border-radius: 10px 10px 70px 10px;
            object-fit: cover;
            opacity: 0.8;
        }

        .img2-p {
            width: 40%;
        }

        .img3 {
            width: 100%;
            height: 580px;
            border-radius: 10px 100px 10px 10px;
            background-color: black;
            overflow: hidden;
            padding: 0;
        }

        .img3 img {
            width: 100%;
            height: 100%;
            border-radius: 10px 100px 10px 10px;
            object-fit: cover;
            opacity: 0.8;
        }

        .img4 {
            width: 100%;
            height: auto;
            border-radius: 10px;
            object-fit: cover;
            background-color: black;
            padding: 0;
            overflow: hidden;
        }

        .img4 img {
            width: 100%;
            height: 100%;
            opacity: 0.8;
        }

        .img5 {
            background-color: black;
            width: fit-content;
            border-radius: 20px;
        }

        .img5 img {
            height: 70px;
        }

        .img6 img {
            width: auto;
            height: 200px;
        }

        @media (max-width: 992px) {
            .img1 img {
                height: auto;
            }

            .img3 {
                height: 400px;
            }
        }

        @media (max-width: 768px) {

            .img2,
            .img2-p {
                width: 100% !important;
                margin-bottom: 15px;
            }

            .img2 img {
                height: auto;
            }

            .img3 {
                height: 300px;
                border-radius: 10px;
            }

            .img6 {
                flex-direction: column !important;
                text-align: center;
            }

            .img6 img {
                margin: 0 auto 15px auto;
                height: auto;
                max-width: 150px;
            }

            .online-pharma {
                flex-direction: column;
                row-gap: 20px;
            }

            .banner-img {
                flex-direction: column;
            }
        }

        @media (max-width: 576px) {
            .img1 {
                height: auto;
            }

            .img1 img {
                height: auto;
            }

            .img3 {
                height: auto;
            }

            .img3 img {
                height: auto;
            }

            .online-pharma {
                flex-direction: column;
                row-gap: 20px;
            }

            .banner-img {
                flex-direction: column;
            }
        }

        .comp-info {
            background-image: url('{{ asset('assets/Assets/reviewBackground.svg') }}');
            background-position: center;
            background-size: cover;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

        .comp-info-container {
            max-width: 1320px !important;
        }

        .second-text {
            max-width: 800px;
            line-height: 2;
        }

        .card-consult .card-title {
            font-weight: 600;
        }

        .card-consult {
            border: none;
            box-shadow: none;
            position: relative;
            transition: box-shadow 0.3s ease;
        }

        .card-consult::before {
            content: "";
            position: absolute;
            top: 0;
            left: 50%;
            height: 2px;
            width: 0;
            background-color: #30bfac;
            transform: translateX(-50%);
            transition: width 0.3s ease;
        }

        .card-consult:hover::before {
            width: 30%;
        }

        .card-consult:hover {
            box-shadow: 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.075);
        }
         .team-card .card-title {
            font-weight: 600;
        }

        .team-card .num {
            font-size: 10px;
        }

        .team-card .card-text {
            font-size: 12px;
        }

        .team-card {
            box-shadow: none;
        }

        .team-card img {
            object-fit: contain;
            max-height: 200px;
        }

        .team-card:hover {
            background: linear-gradient(180deg, #30bfac 0%, #000 100%);
        }

        .team-card:hover .card-body {
            background-color: white;
            border-radius: 15px 15px 15px 15px;
        }

        .team-card img {
            background-color: #EFEFEF;
        }

        .team-card:hover img {
            background-color: transparent !important;
        }

    </style>

    <div class="container my-5">
        <div class="row d-flex align-items-center">
            <div class="col-md-8">
                <h2 class="display-4" style="font-weight: 600">
                    {{$pageData['About']['top_title'] ?? ''}}
                </h2>
            </div>
            <div class="col-md-4">
                <p class="lead">
                    {{$pageData['About']['top_short_description'] ?? ''}}
                </p>
            </div>
        </div>

        <div class="row">
            <div class="col-md-8">
                <div class="container img1 my-5">
                    <img src="{{ pagesSingleImage('About', 'about_first_image') }}" alt="" />
                </div>
                <div class="container banner-img d-flex g-3">
                    <div class="img2">
                        <img src="{{ pagesSingleImage('About', 'about_second_image') }}" alt="" />
                    </div>

                    <p class="ms-3 text-white background-blue p-2 rounded text-center img2-p">
                        {!!$pageData['About']['description'] ?? ''!!}
                    </p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="container img3">
                    <img src="{{ pagesSingleImage('About', 'about_third_image') }}" alt="" />
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid comp-info">
        <div class="row comp-info-container my-5">
            <div class="col-md-7">
                <div class="container  my-5">
                    <h2 class="display-4" style="font-weight: 600">
                        {{$pageData['About']['about_company_information_heading'] ?? ''}}
                    </h2>
                    {!!$pageData['About']['about_first_description'] ?? ''!!}
                </div>
            </div>
            <div class="col-md-5">
                <div class="container img4 my-3">
                    <img src="{{ pagesSingleImage('About', 'about_company_information_first_image') }}" alt="" />
                </div>

                <div class="container online-pharma d-flex align-items-center">
                    <div class="container img5">
                        <img src="{{ pagesSingleImage('About', 'about_company_information_second_image') }}" alt="" />
                    </div>
                    <div class="background-blue container mx-2 p-3 rounded">
                        <h5 class="text-white">Registered Office</h5>
                        {!!$pageData['About']['about_second_description'] ?? ''!!}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row my-5">
            <div class="container d-flex flex-column align-items-center">
                <h1 class="text-center fw-semibold">{{ $pageData['About']['about_pharmacy_regulations_section_heading'] ?? '' }}</h1>
                <p class="text-secondary text-center my-5 second-text">
                    {!!$pageData['About']['about_pharmacy_regulations_section_description'] ?? ''!!}
                </p>
            </div>

            <div class="row d-flex gap-5 justify-content-center">
                <div class="col-md-5 img6 bg-white p-2 rounded">
                    <div class="row d-flex justify-content-center align-items-center">
                        <div class="col-md-5">

                            <img style="background-color: #30bfac; border-radius: 5px;"
                                src="{{ pagesSingleImage('About', 'about_pharmacy_regulations_section_first_image') }}" alt="member" />
                        </div>
                        <div class="col-md-7">
                            <div class="container">
                                <h3 class="font18 fw-semibold">{{ $pageData['About']['about_pharmacy_regulations_section_dr_first'] ?? '' }}</h3>
                                {!!$pageData['About']['about_pharmacy_regulations_first_description'] ?? ''!!}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-5 img6 bg-white p-2 rounded">
                    <div class="row d-flex justify-content-center align-items-center">
                        <div class="col-md-5">

                            <img style="background-color: #30bfac; border-radius: 5px;"
                                src="{{ pagesSingleImage('About', 'about_pharmacy_regulations_section_second_image') }}" alt="member" />
                        </div>
                        <div class="col-md-7">
                            <div class="container">
                                <h3 class="font18 fw-semibold">{{ $pageData['About']['about_pharmacy_regulations_section_dr_second'] ?? '' }}</h3>
                                <p class="text-secondary">
                                    {!!$pageData['About']['about_pharmacy_regulations_second_description'] ?? ''!!}
                                </p>
                                <span class="blue m-0 font16">(GPhC Number 2059871)</span>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <div class="container background-blue text-white p-3  my-2 rounded d-flex justify-content-between">
            <p class="text-secondary text-white">{!!$pageData['About']['about_short_section_description'] ?? ''!!}</p>
            <img style="height:60px;" src="{{ pagesSingleImage('About', 'about_short_section_image') }}" alt="">
        </div>
    </div>



    <div class="container">
        <div class="my-5 d-flex flex-row align-items-center justify-content-between gap-5 px-4">
            <img style="height: fit-content" src="{{ asset('assets/Assets/clientReviews.svg') }}" alt="">
            <div class="container d-flex flex-column gap-3">
                <h1 class="fs-1 font600">Customer Reviews</h1>
                <p class="fs-3">Our customers trust us to deliver top-quality service. Read more reviews on Google and
                    TrustPilot!</p>
                <p class="d-flex flex-column gap-3">
                    <span class="blue fw-bold fs-1">243,094+</span>
                    <span>
                        <i style="color: gold;" class="fa-solid fa-star"></i>
                        <i style="color: gold;" class="fa-solid fa-star"></i>
                        <i style="color: gold;" class="fa-solid fa-star"></i>
                        <i style="color: gold;" class="fa-solid fa-star"></i>
                        <i style="color: gold;" class="fa-solid fa-star"></i>
                    </span>
                    <span><button class="btn button-blue">Learn More</button></span>
                </p>
            </div>
        </div>
    </div>


    @include('front.includes.how-does-it-work')
    @include('front.includes.service')

     @include('front.includes.team')
@endsection