@extends('layouts.app')

@section('content')
<nav class="dsdsd" aria-label="breadcrumb">
    <div class="container">
        <ol class="breadcrumb custom-breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page"></li>
        </ol>
    </div>
</nav>


<!-- Luxury Section -->
<section class="luxury-section">
    <div class="container">
        <div class="row align-items-center ewewe">
            <div class="col-lg-12 luxury-image mt-4 mt-lg-0">
                <img src="https://www.blinds-2go.co.uk/content/general-images/New-Full-Cassette-and-Electric-Awnings-Static-Page-Hero%20(1).jpg" alt="Wooden Blinds" />
            </div>
        </div>
    </div>
</section>

  <style>
   

    .modern-awning-section {
      background: linear-gradient(180deg, #faf9f6 0%, #f1f0ed 100%);
      padding: 80px 0;
    }

    .modern-awning-card {
      border: none;
      border-radius: 20px;
      overflow: hidden;
      background-color: #fff;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
      transition: all 0.4s ease;
      position: relative;
    }

    .modern-awning-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }

    .modern-awning-img {
      width: 100%;
      height: 250px;
      object-fit: cover;
      transition: all 0.5s ease;
      filter: brightness(95%);
    }

    .modern-awning-card:hover .modern-awning-img {
      transform: scale(1.08);
      filter: brightness(100%);
    }

    .modern-awning-body {
    padding: 12px 25px 35px;
    text-align: left;
    }

    .modern-awning-title {
     font-family: "Playfair Display", serif;
    color: #2e1f47;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 0;
    letter-spacing: 0.5px;
    }

    .modern-awning-text {
     font-size: 13px;
    line-height: 20px;
    color: #000000;
    margin-bottom: 12px;
    }

    .modern-awning-btn {
     background: linear-gradient(90deg, #4aaf7b, #4aaf7b);
      color: #fff;
      border: none;
      border-radius: 50px;
      padding: 10px 24px;
      font-weight: 600;
      letter-spacing: 0.3px;
      transition: all 0.3s ease;
    }

    .modern-awning-btn:hover {
      background: linear-gradient(90deg, #b8915a, #8e713f);
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(201, 165, 109, 0.4);
    }

    .section-heading {
      text-align: center;
      margin-bottom: 60px;
    }

    .section-heading h2 {
      font-family: "Playfair Display", serif;
      font-size: 2.5rem;
      font-weight: 700;
      color: #2e1f47;
      margin-bottom: 15px;
    }

    .section-heading p {
      color: #666;
      font-size: 1rem;
      max-width: 650px;
      margin: 0 auto;
    }

    @media (max-width: 768px) {
      .modern-awning-title {
        font-size: 1.3rem;
      }
      .modern-awning-body {
        padding: 20px;
      }
    }
  </style>

  <section class="modern-awning-section">
    <div class="container">

      <div class="section-heading">
        <h2></h2>
        <p></p>
      </div>

      <div class="row g-4 align-items-start">

        <!-- Card 1 -->
		@foreach($sub_categories as $c)
        <div class="col-md-4">
          <div class="modern-awning-card h-100">
		  	@if($c->image)
						 <img src="https://famepixelsoft.site/decora/storage/app/public/{{$c->image}}"
                            alt="Wooden Blinds"  class="modern-awning-img"/>
						@else
                         <img src="https://content.blinds-2go.co.uk/content/general-images/homegrid/Awnings.jpg" 
                 alt="Pergolas" class="modern-awning-img">
							@endif
          
            <div class="modern-awning-body">
              <h4 class="modern-awning-title">{{ $c->name }}</h4>
              <p class="modern-awning-text">
              {{ substr($c->short_description, 0, 120) }}

              </p>
              <a href="{{ route('category.detail', $c->slug) }}" class="modern-awning-btn">Shop {{ $c->name }}</a>
            </div>
          </div>
        </div>
		@endforeach
        <!-- Card 2 -->
       
      </div>
    </div>
  </section>
  






<style>
    
    /* Custom Styling for Outdoor Section */
.outdoor-section {
  background-color: #ffffff;
  color: #2e2e2e;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

.outdoor-heading {
  font-weight: 700;
  color: #3b2b63; /* Similar purple tone */
  font-size: 1.9rem;
}

.outdoor-text {
  font-size: 1rem;
  line-height: 1.7;
  color: #222;
  margin-bottom: 1.2rem;
}

.outdoor-link {
  color: #3b2b63;
  text-decoration: underline;
  transition: all 0.3s ease;
}

.outdoor-link:hover {
  color: #5a3ca0;
  text-decoration: none;
}

    
</style>



<section class="outdoor-section py-5">
  <div class="container">
    <h2 class="outdoor-heading "> at Amazing Prices</h2>
      </div>
</section>


@endsection