@extends('layouts.main')
@section('content')

<style>
    :root {
        --brand-red: #e6353f;
        --text-dark: #2b2b2b;
        --card-bg: #f2f2f2;
    }

    .products-hero {
        background: linear-gradient(rgba(0,0,0,0.70), rgba(0,0,0,0.70)), url('{{ URL::to('/').'/public/assets/images/product_images/shutterstock_414749530.png' }}') center center / cover no-repeat;
        padding: 70px 20px;
        text-align: center;
    }

    .products-hero h1 {
        color: #fff;
        font-size: 34px;
        font-weight: 700;
        margin: 0;
    }

    .implants {
        max-width: 1300px;
        margin: 50px auto;
        padding: 0 20px;
    }

    .implants__title {
        text-align: center;
        color: var(--text-dark);
        font-size: 26px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin: 0 0 30px;
    }

    .implant-card {
        background: var(--card-bg);
        border-radius: 4px;
        padding: 40px;
        display: flex;
        align-items: center;
        gap: 40px;
        margin-bottom: 30px;
    }

    .implant-card__content {
        flex: 1;
    }

    .implant-card__content h3 {
        color: var(--brand-red);
        font-size: 18px;
        font-weight: 700;
        margin: 0 0 12px;
    }

    .implant-card__content p {
        color: var(--text-dark);
        font-size: 14px;
        line-height: 1.6;
        margin: 0 0 12px;
        text-align: justify;
    }

    .implant-card__content ul {
        margin: 0;
        padding-left: 20px;
        color: var(--text-dark);
        font-size: 14px;
        line-height: 1.8;
    }

    .implant-card__media {
        flex: 0 0 400px;
    }

    .implant-card__media img {
        width: 100%;
        height: auto;
        display: block;
    }

    @media (max-width: 767px) {
        .implant-card {
            flex-direction: column;
        }

        .implant-card__media {
            flex: none;
            width: 100%;
            order: -1;
        }
    }
</style>

<section class="products-hero">
    <h1>{{ __('messages.implants_hero_title') }}</h1>
</section>

<section class="implants">
    <h2 class="implants__title">{{ __('messages.implants_section_title') }}</h2>

    <div class="implant-card">
        <div class="implant-card__content">
            <h3>{{ __('messages.implants_bruxzir_title') }}</h3>
            <p>{{ __('messages.implants_bruxzir_description') }}</p>
            <ul>
                <li>{{ __('messages.implants_bruxzir_feature_1') }}</li>
                <li>{{ __('messages.implants_bruxzir_feature_2') }}</li>
                <li>{{ __('messages.implants_bruxzir_feature_3') }}</li>
                <li>{{ __('messages.implants_bruxzir_feature_4') }}</li>
            </ul>
        </div>
        <div class="implant-card__media">
            <img src="{{ URL::to('/').'/public/assets/images/product_images/WhatsApp-Image-2021-05-03-at-3.06.35-PM.jpeg' }}" alt="BruxZir Implant Prosthesis">
        </div>
    </div>

    <div class="implant-card">
        <div class="implant-card__content">
            <h3>{{ __('messages.implants_screw_retained_title') }}</h3>
            <p>{{ __('messages.implants_screw_retained_description') }}</p>
            <ul>
                <li>{{ __('messages.implants_screw_retained_feature_1') }}</li>
                <li>{{ __('messages.implants_screw_retained_feature_2') }}</li>
                <li>{{ __('messages.implants_screw_retained_feature_3') }}</li>
                <li>{{ __('messages.implants_screw_retained_feature_4') }}</li>
            </ul>
        </div>
        <div class="implant-card__media">
            <img src="{{ URL::to('/').'/public/assets/images/product_images/WhatsApp-Image-2021-05-06-at-1.00.08-PM.jpeg' }}" alt="Screw-Retained Hybrid Denture">
        </div>
    </div>

    <div class="implant-card">
        <div class="implant-card__content">
            <h3>{{ __('messages.implants_overdentures_title') }}</h3>
            <p>{{ __('messages.implants_overdentures_description') }}</p>
            <ul>
                <li>{{ __('messages.implants_overdentures_feature_1') }}</li>
                <li>{{ __('messages.implants_overdentures_feature_2') }}</li>
                <li>{{ __('messages.implants_overdentures_feature_3') }}</li>
                <li>{{ __('messages.implants_overdentures_feature_4') }}</li>
            </ul>
        </div>
        <div class="implant-card__media">
            <img src="{{ URL::to('/').'/public/assets/images/product_images/WhatsApp-Image-2021-05-07-at-7.27.44-PM.jpeg' }}" alt="Implant Overdentures">
        </div>
    </div>

</section>

@endsection