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

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

    .products-hero {
        background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)), url('{{ URL::to('/').'/public/assets/images/product_images/01.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;
    }

    .digital-dentistry {
        max-width: 1300px;
        margin: 0 auto;
        padding: 60px 20px 40px;
        text-align: center;
    }

    .digital-dentistry__intro {
        max-width: 900px;
        margin: 0 auto 60px;
        color: var(--text-dark);
        font-size: 15px;
        line-height: 1.8;
    }

    .digital-dentistry__promo {
        position: relative;
        max-width: 90%;
        margin: 0 auto 50px;
    }

    .digital-dentistry__promo-backing {
        position: absolute;
        top: -40px;
        left: 20px;
        right: 20px;
        bottom: -20px;
        background: #eceff1;
        z-index: 0;
    }

    .digital-dentistry__promo img {
        position: relative;
        z-index: 1;
        width: 100%;
        /*height: 100%;*/
        display: block;
    }

    .digital-dentistry__logos {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 50px;
        margin-bottom: 16px;
    }

    .digital-dentistry__logos img {
        height: 40px;
        width: auto;
        object-fit: contain;
    }

    .digital-dentistry__disclaimer {
        color: #6b6b6b;
        font-size: 13px;
        margin: 0;
    }

    @media (max-width: 767px) {
        .digital-dentistry__logos {
            gap: 30px;
        }

        .digital-dentistry__logos img {
            height: 30px;
        }
    }
</style>

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

<section class="digital-dentistry">

    <p class="digital-dentistry__intro">
        {{ __('messages.digital_dentistry_intro') }}
    </p>

    <div class="digital-dentistry__promo">
        <div class="digital-dentistry__promo-backing"></div>
        <img src="{{ URL::to('/').'/public/assets/images/product_images/WhatsApp-Image-2021-05-04-at-6.28.14-PM-1.jpeg' }}" alt="From analog to digital, we've kept up with trend — 25% off on digital cases">
    </div>
    
</section>

@endsection