@include('front.include.header')
<div  style="background-image:url({{asset('media/bg_image.png')}})" class="wrapper d-flex align-items-stretch">
    @include('front.include.sidebar')
        @yield('front_content')
        
        <div style="width: 100% !important; margin: 40px" class="row">
            <div class="col-md-9" style="margin: 20px">
                <h2 style="text-align: center; color: #231877;" class="hurme_reg;">EDUCATION</h2>
                <hr><hr>
            </div>
           
            
           
            <div class="col-md-4" style="margin-top: 10px;">
                <div style="width: 90%; border: 1px solid #e0e0e0; border-radius: 15px; overflow: hidden; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); transition: transform 0.3s;">
                    <img src="https://placehold.co/500x300" alt="Card Image" style="width: 100%; height: auto;">
                    
                    <div style="padding: 20px; text-align: center; background-color: #f9f9f9;">
                      <h2 style="margin: 0 0 10px; font-size: 22px; font-family: 'Arial', sans-serif; color: #333;">Card Title</h2>
                      <p style="color: #666; font-size: 16px; margin: 0 0 20px; font-family: 'Arial', sans-serif;">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minima, itaque!</p>
                      
                      <button style="padding: 10px 20px; background-color: #eb3291; border: none; border-radius: 5px; color: white; cursor: pointer; font-size: 16px; font-family: 'Arial', sans-serif; transition: background-color 0.3s;">Show More</button>
                    </div>
                  </div>
            </div>
            <div class="col-md-4" style="margin-top: 10px;">
                <div style="width: 90%; border: 1px solid #e0e0e0; border-radius: 15px; overflow: hidden; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); transition: transform 0.3s;">
                    <img src="https://placehold.co/500x300" alt="Card Image" style="width: 100%; height: auto;">
                    
                    <div style="padding: 20px; text-align: center; background-color: #f9f9f9;">
                      <h2 style="margin: 0 0 10px; font-size: 22px; font-family: 'Arial', sans-serif; color: #333;">Card Title</h2>
                      <p style="color: #666; font-size: 16px; margin: 0 0 20px; font-family: 'Arial', sans-serif;">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minima, itaque!</p>
                      
                      <button style="padding: 10px 20px; background-color: #eb3291; border: none; border-radius: 5px; color: white; cursor: pointer; font-size: 16px; font-family: 'Arial', sans-serif; transition: background-color 0.3s;">Show More</button>
                    </div>
                  </div>
            </div>
            <div class="col-md-4" style="margin-top: 10px;">
                <div style="width: 90%; border: 1px solid #e0e0e0; border-radius: 15px; overflow: hidden; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); transition: transform 0.3s;">
                    <img src="https://placehold.co/500x300" alt="Card Image" style="width: 100%; height: auto;">
                    
                    <div style="padding: 20px; text-align: center; background-color: #f9f9f9;">
                      <h2 style="margin: 0 0 10px; font-size: 22px; font-family: 'Arial', sans-serif; color: #333;">Card Title</h2>
                      <p style="color: #666; font-size: 16px; margin: 0 0 20px; font-family: 'Arial', sans-serif;">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minima, itaque!</p>
                      
                      <button style="padding: 10px 20px; background-color: #eb3291; border: none; border-radius: 5px; color: white; cursor: pointer; font-size: 16px; font-family: 'Arial', sans-serif; transition: background-color 0.3s;">Show More</button>
                    </div>
                  </div>
            </div>
           
       
       </div>
  
    </div>
   
    @include('front.include.footer')