{% extends 'base.html.twig' %}

{% block title %}
	SS BODY MIND
{% endblock %}
{% block stylesheets %}

{{parent()}}
 
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Beth+Ellen&display=swap" rel="stylesheet">
<style>
	    
   
    .account-link {
    color: #41553d;
}
.bs-calendar{
    padding-top: 5%;
}    

.header-logo {
    visibility: visible !important;
}

.top-header{
    /*background:#f7fded;  */
       background: #f2efeb;
}
.MuiButton-outlinedPrimary {
    color: #41553d !important;
    border: 1px solid rgb(65 85 61) !important;
}
.title-healthy-lab {
    font-family: 'Beth Ellen', cursive;
    font-size: 55px;color: #2b442c;
   
}

.healthy-section {
     padding-top :8%;
    padding-bottom : 2%;
}

.image-card {
    max-width: 80%;
    margin: 0 auto;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: 0.3s ease;
}

.image-card img {
    width: 100%;
    display: block;
}

.image-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}


 @media (max-width: 768px) {
	        
    .healthy-section .image-card {
        max-width: 100%;
        border-radius: 0px;
        box-shadow: none;
    
    }
    .title-healthy-lab{
        font-size: 40px;
    }
    .healthy-section {
    padding-top: 29%;
    padding-bottom: 0%;     
    background: #f2efeb;
}

}
</style>
{% endblock %}

{% block body %}


<section class="healthy-section">
    <h2 class="text-center mb-5 fw-bold title-healthy-lab">Healthy Lab</h2>


    
    <div class="image-card">
    <picture>
        <!-- Mobile image -->
        <source srcset="{{ asset('images/Gemini_Generated_Image_ga84qkga84qkga84.png') }}" media="(max-width: 768px)">
        
        <!-- Default (desktop) -->
        <img src="{{ asset('images/Gemini_Generated_Image_ga84qkga84qkga84.png') }}" alt="Pic Healthy">
        <br>
        <img src="{{ asset('images/xxx.png') }}" alt="Pic Healthy">
        

    </picture>
</div>


</section>

{% endblock %}

{% block javascripts %}

	{{parent()}}

{% endblock %}
