@extends('layouts.layoutabout')

@section('title')
    Affiliation Accreditation
@endsection

@section('aboutheading')
    <h2 style="padding-top: 230px; color:white; font-family:'Poppins',sans-serif;" 
        class="fw-bold text-uppercase text-center heading21 headerinner">
        Affiliation Accreditation
    </h2>
    <p class="text-center mt-2 fw-bold text-light text-uppercase">
        <a href="{{ asset('/') }}" 
           style="color: #fff; text-decoration: none; font-family:'Lexend',sans-serif;">
           HOME
        </a> 
        &nbsp;/&nbsp; 
        <span style="color: #ffff; font-family:'Poppins',sans-serif;">Affiliation Accreditation</span>
    </p>
@endsection

@section('Aboutsection')
<div class="container mb-5 mt-4">
    <div class="row justify-content-center g-4">
        <!-- AICTE Card -->
        <div class="col-md-4 col-sm-6">
            <a href="{{asset('AFF/AICTE AFF.pdf')}}" target="_blank" style="text-decoration:none;"><div class="affiliation-card" style="background-image: url('https://source.unsplash.com/600x400/?university,education');">
                <div class="overlay"></div>
                <i class="fa fa-file-pdf affiliation-icon"></i>
                <h4>AICTE Approval</h4>
                <p class="card-desc">Approved by All India Council for Technical Education.</p>
            </div></a>
        </div>
        <!-- AKTU Card -->
        <div class="col-md-4 col-sm-6">
            <a href="{{asset('AFF/AKTU AFF.pdf')}}" target="_blank" style="text-decoration:none;"><div class="affiliation-card" style="background-image: url('https://source.unsplash.com/600x400/?college,degree');">
                <div class="overlay"></div>
                <i class="fa fa-file-pdf affiliation-icon"></i>
                <h4>AKTU Affiliation</h4>
                <p class="card-desc">Affiliated to Dr. APJ Abdul Kalam Technical University.</p>
            </div></a>
        </div>
        <!-- BTE Card -->
        <div class="col-md-4 col-sm-6">
            <a href="{{asset('AFF/BTE Affilation.pdf')}}" target="_blank" style="text-decoration:none;"><div class="affiliation-card" style="background-image: url('https://source.unsplash.com/600x400/?study,certificate');">
                <div class="overlay"></div>
                <i class="fa fa-file-pdf affiliation-icon"></i>
                <h4>BTE Recognition</h4>
                <p class="card-desc">Recognized by Board of Technical Education.</p>
            </div></a>
        </div>
    </div>
</div>

<style>
    .affiliation-card {
        position: relative;
        background-size: cover;
        background-position: center;
        height: 230px;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 10px 25px rgb(84, 51, 34);
        transition: transform 0.4s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        color: #fff;
        text-align: center;
        padding: 20px;
    }

    .affiliation-card .overlay {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: rgb(84, 51, 34);
        backdrop-filter: blur(2px);
        transition: background 0.3s ease;
    }

   

    .affiliation-icon {
        position: relative;
        font-size: 3rem;
        z-index: 2;
        margin-bottom: 10px;
        color: #ffcc00;
    }

    .affiliation-card h4 {
        position: relative;
        z-index: 2;
        font-family: 'Poppins', sans-serif;
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 8px;
    }

    .card-desc {
        position: relative;
        z-index: 2;
        font-family: 'Lexend', sans-serif;
        font-size: 14px;
        line-height: 1.5;
    }
</style>
@endsection