@extends('layouts.app')

@section('title','About Us')

@section('content')

<style>
:root{
    /* Premium Modern Automotive Palette */
    --primary: #3E51B8;           /* Tech Blue */
    --primary-light: #0a67df;     /* Vibrant Electric Blue */
    --secondary: #BC1A1A;         /* Deep Racing Red */
    --secondary-hover: #822424;   /* Dark Burnt Red */
    --accent-dark: #753939;       /* Muted Crimson */
    --bg-light: #F8FAFC;          /* Soft slate light gray */
    
    /* Semantic Adjustments */
    --text-main: #1E293B;         /* Slate dark grey */
    --text-muted: #64748B;        /* Neutral gray */
    --card-border: rgba(62, 81, 184, 0.1);
}

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    color: var(--text-main);
}

/* .hero-about{
    min-height:60vh;
    background:
    linear-gradient(rgba(185, 205, 253, 0.31), rgb(0, 0, 0)), url('https://images.pexels.com/photos/1595385/pexels-photo-1595385.jpeg');
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#fff;
} */
    .hero-about {
    min-height: 60vh;
    background: linear-gradient(rgba(194, 217, 255, 0.75), rgba(0, 0, 0, 0.85)), url('https://images.unsplash.com/photo-1617814076367-b759c7d7e738?auto=format&fit=crop&w=1600&q=80');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}

.section-title{
    text-align:center;
    margin-bottom:40px;
}

.about-box {
    background:#fff;
    border-radius:20px;
    padding:35px 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,.04);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 1px solid var(--card-border);
}

.about-box:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 40px rgba(62, 81, 184, 0.12);
    border-color: var(--primary-light);
}

.icon-circle {
    width:75px;
    height:75px;
    background: #6e3232;
    color: #f6e983;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    margin:auto;
    transition: all 0.4s ease;
}

.about-box:hover .icon-circle {
    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
    transform: rotateY(180deg); 
    box-shadow: 0 5px 15px rgba(188, 26, 26, 0.3);
}

/* ========================================================
   Advanced CSS Scroll Animations
   ======================================================== */
.animate-item {
    opacity: 0;
    will-change: transform, opacity;
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.fade-up-init {
    transform: translateY(40px);
}

.slide-left-init {
    transform: translateX(-50px);
}

.slide-right-init {
    transform: translateX(50px);
}

.zoom-in-init {
    transform: scale(0.85);
}

.animate-item.animated {
    opacity: 1;
    transform: translate(0) scale(1);
}

/* Automotive Theme Glow Pulse Button */
@keyframes pulse-btn {
    0% { box-shadow: 0 0 0 0 rgba(10, 103, 223, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(10, 103, 223, 0); }
    100% { box-shadow: 0 0 0 0 rgba(10, 103, 223, 0); }
}

.cta-btn {
    background: var(--primary-light);
    color: #fff !important;
    padding: 14px 35px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
    animation: pulse-btn 2s infinite;
}

.cta-btn:hover {
    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(188, 26, 26, 0.4);
}


 /* .btn-view-courses {
    background: var(--primary);
    color: #fff;
    transition: all 0.3s ease;
}

.btn-view-courses:hover {
    background: var(--secondary);
    color: #fff;
    box-shadow: 0 5px 15px rgba(188, 26, 26, 0.2); 
}  */
   
    
    .btn-view-courses{
    background: #822424;
    color: #fff;
    /* padding: 14px ; */
    border-radius: 40px;
    font-weight: 600;
    transition: all 0.3s ease;
    font-weight: bolder;
}

.btn-view-courses:hover {
    background: var(--secondary-hover);
    border-color: var(--secondary-hover);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(227, 100, 20, 0.3);
}

 
</style>

<!-- HERO -->
<section class="hero-about">
    <div class="container">
        <div class="animate-item animated fade-up-init">
            <h1 class="fw-bold display-4">About Our Institute</h1>
            <p class="mt-3 lead" style="max-width: 700px; margin: auto;">
                We are committed to delivering high-quality automotive education
                with practical training and industry-focused learning.
            </p>
        </div>
    </div>
</section>

<!-- ABOUT CONTENT -->
<section class="py-5 overflow-hidden">
<div class="container">
    <div class="row align-items-center g-5">
        <div class="col-md-6 animate-item slide-left-init">
            <img src="https://images.pexels.com/photos/3862130/pexels-photo-3862130.jpeg"
                 class="img-fluid rounded shadow-lg"
                 alt="About Image">
        </div>

        <div class="col-md-6 animate-item slide-right-init">
            <h2 class="fw-bold mb-3">Who We Are</h2>
            <p class="text-muted fs-5">
                Our institute specializes in automotive engineering education,
                offering hands-on training in modern vehicle technologies,
                mechanical systems, and electric vehicles.
            </p>
            <p class="text-muted mb-4">
                We focus on building skilled professionals who are ready for
                the global automotive industry.
            </p>
            <a href="{{ route('courses') }}" class="btn btn-view-courses btn-lg px-4 rounded-pill shadow-sm">
                View Courses@extends('layouts.app')

@section('title','About Us')

@section('content')

<style>
:root {
    /* Premium Modern Automotive Palette */
    --primary: #3E51B8;           /* Tech Blue */
    --primary-light: #0a67df;     /* Vibrant Electric Blue */
    --secondary: #BC1A1A;         /* Deep Racing Red */
    --secondary-hover: #822424;   /* Dark Burnt Red */
    --accent-dark: #753939;       /* Muted Crimson */
    --bg-light: #F8FAFC;          /* Soft slate light gray */
    
    /* Semantic Adjustments */
    --text-main: #1E293B;         /* Slate dark grey */
    --text-muted: #64748B;        /* Neutral gray */
    --card-border: rgba(62, 81, 184, 0.1);
}

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    color: var(--text-main);
}

.hero-about {
    min-height: 60vh;
    background: linear-gradient(rgba(194, 217, 255, 0.75), rgba(0, 0, 0, 0.85)),url('https://images.unsplash.com/photo-1552519507-da3b142c6e3d?auto=format&fit=crop&w=1600&q=80');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}

.section-title {
    text-align: center;
    margin-bottom: 40px;
}

.about-box {
    background: #fff;
    border-radius: 20px;
    padding: 35px 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,.04);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 1px solid var(--card-border);
}

.about-box:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 40px rgba(62, 81, 184, 0.12);
    border-color: var(--primary-light);
}

.icon-circle {
    width: 75px;
    height: 75px;
    background: #6e3232;
    color: #fffefa;;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: auto;
    transition: all 0.4s ease;
}

.about-box:hover .icon-circle {
    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
    transform: rotateY(180deg); 
    box-shadow: 0 5px 15px rgba(188, 26, 26, 0.3);
}

/* ========================================================
   Advanced CSS Scroll Animations
   ======================================================== */
.animate-item {
    opacity: 0;
    will-change: transform, opacity;
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.fade-up-init {
    transform: translateY(40px);
}

.slide-left-init {
    transform: translateX(-50px);
}

.slide-right-init {
    transform: translateX(50px);
}

.zoom-in-init {
    transform: scale(0.85);
}

.animate-item.animated {
    opacity: 1;
    transform: translate(0) scale(1);
}

/* Automotive Theme Glow Pulse Button */
@keyframes pulse-btn {
    0% { box-shadow: 0 0 0 0 rgba(10, 103, 223, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(10, 103, 223, 0); }
    100% { box-shadow: 0 0 0 0 rgba(10, 103, 223, 0); }
}

/* .cta-btn {
    background: var(--primary-light);
    color: #fff !important;
    padding: 14px 35px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    animation: pulse-btn 2s infinite;
}

.cta-btn:hover {
    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-hover) 100%);
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(188, 26, 26, 0.4);
} */

  .cta-btn{
    background: #822424;
    color: #fff;
    padding: 14px 35px;
    border-radius: 40px;
    font-weight: 600;
    transition: all 0.3s ease;
    font-weight: bolder;
}

.cta-btn:hover {
    background: var(--secondary-hover);
    border-color: var(--secondary-hover);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(227, 100, 20, 0.3);
}


.btn-view-courses {
    background: var(--secondary-hover);
    color: #fff;
    padding: 14px 35px;
    border-radius: 40px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    /* border: none; */
}

.btn-view-courses:hover {
    background: var(--secondary);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(188, 26, 26, 0.3);
}
</style>

<!-- HERO -->
<section class="hero-about">
    <div class="container">
        <div class="animate-item animated fade-up-init">
            <h1 class="fw-bold display-4">About Our Institute</h1>
            <p class="mt-3 lead" style="max-width: 700px; margin: auto;">
                We are committed to delivering high-quality automotive education
                with practical training and industry-focused learning.
            </p>
        </div>
    </div>
</section>

<!-- ABOUT CONTENT -->
<section class="py-5 overflow-hidden">
<div class="container">
    <div class="row align-items-center g-5">
        <div class="col-md-6 animate-item slide-left-init">
            <img src="https://images.pexels.com/photos/3862130/pexels-photo-3862130.jpeg"
                 class="img-fluid rounded shadow-lg"
                 alt="About Image">
        </div>

        <div class="col-md-6 animate-item slide-right-init">
            <h2 class="fw-bold mb-3">Who We Are</h2>
            <p class="text-muted fs-5">
                Our institute specializes in automotive engineering education,
                offering hands-on training in modern vehicle technologies,
                mechanical systems, and electric vehicles.
            </p>
            <p class="text-muted mb-4">
                We focus on building skilled professionals who are ready for
                the global automotive industry.
            </p>
            <a href="{{ route('courses') }}" class="btn btn-view-courses btn-lg px-4 rounded-pill shadow-sm">
                View Courses
            </a>
        </div>
    </div>
</div>
</section>

<!-- FEATURES -->
<section class="py-5 bg-light">
<div class="container">

<div class="section-title animate-item fade-up-init">
    <h2 class="fw-bold">Why Choose Us</h2>
    <p class="text-muted">We provide the best learning experience</p>
</div>

<div class="row g-4">
    <div class="col-md-4 animate-item zoom-in-init" style="transition-delay: 100ms;">
        <div class="about-box text-center">
            <div class="icon-circle">
                <i class="fa-solid fa-chalkboard-user"></i>
            </div>
            <h4 class="mt-4 fw-bold">Expert Lecturers</h4>
            <p class="text-muted mb-0">
                Experienced industry professionals guiding your learning journey.
            </p>
        </div>
    </div>

    <div class="col-md-4 animate-item zoom-in-init" style="transition-delay: 250ms;">
        <div class="about-box text-center">
            <div class="icon-circle">
                <i class="fa-solid fa-screwdriver-wrench"></i>
            </div>
            <h4 class="mt-4 fw-bold">Practical Training</h4>
            <p class="text-muted mb-0">
                Hands-on workshop experience with real vehicles and tools.
            </p>
        </div>
    </div>

    <div class="col-md-4 animate-item zoom-in-init" style="transition-delay: 400ms;">
        <div class="about-box text-center">
            <div class="icon-circle">
                <i class="fa-solid fa-certificate"></i>
            </div>
            <h4 class="mt-4 fw-bold">Certified Courses</h4>
            <p class="text-muted mb-0">
                Industry-recognized certifications to boost your career.
            </p>
        </div>
    </div>
</div>

</div>
</section>

<!-- CTA -->
<section class="py-5 text-center bg-white overflow-hidden">
<div class="container py-4 animate-item fade-up-init">
    <h2 class="fw-bold mb-3">Start Your Automotive Career Today</h2>
    <p class="text-muted fs-5 mb-5">
        Join our institute and become a skilled automotive professional.
    </p>
    <div class="d-flex justify-content-center">
        <a href="/apply" class="cta-btn shadow">
           Apply Courses
        </a>
    </div>
</div>
</section>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const animatedElements = document.querySelectorAll('.animate-item');

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('animated');
                observer.unobserve(entry.target); 
            }
        });
    }, {
        threshold: 0.15 
    });

    animatedElements.forEach(el => observer.observe(el));
});
</script>

@endsection
            </a>
        </div>
    </div>
</div>
</section>

<!-- FEATURES -->
<section class="py-5 bg-light">
<div class="container">

<div class="section-title animate-item fade-up-init">
    <h2 class="fw-bold">Why Choose Us</h2>
    <p class="text-muted">We provide the best learning experience</p>
</div>

<div class="row g-4">
    <div class="col-md-4 animate-item zoom-in-init" style="transition-delay: 100ms;">
        <div class="about-box text-center">
            <div class="icon-circle">
                <i class="fa-solid fa-chalkboard-user"></i>
            </div>
            <h4 class="mt-4 fw-bold">Expert Lecturers</h4>
            <p class="text-muted mb-0">
                Experienced industry professionals guiding your learning journey.
            </p>
        </div>
    </div>

    <div class="col-md-4 animate-item zoom-in-init" style="transition-delay: 250ms;">
        <div class="about-box text-center">
            <div class="icon-circle">
                <i class="fa-solid fa-screwdriver-wrench"></i>
            </div>
            <h4 class="mt-4 fw-bold">Practical Training</h4>
            <p class="text-muted mb-0">
                Hands-on workshop experience with real vehicles and tools.
            </p>
        </div>
    </div>

    <div class="col-md-4 animate-item zoom-in-init" style="transition-delay: 400ms;">
        <div class="about-box text-center">
            <div class="icon-circle">
                <i class="fa-solid fa-certificate"></i>
            </div>
            <h4 class="mt-4 fw-bold">Certified Courses</h4>
            <p class="text-muted mb-0">
                Industry-recognized certifications to boost your career.
            </p>
        </div>
    </div>
</div>

</div>
</section>

<!-- CTA -->
<section class="py-5 text-center bg-white overflow-hidden">
<div class="container py-4 animate-item fade-up-init">
    <h2 class="fw-bold mb-3">Start Your Automotive Career Today</h2>
    <p class="text-muted fs-5 mb-5">
        Join our institute and become a skilled automotive professional.
    </p>
    <div class="d-flex justify-content-center">
        <a href="/apply" class="cta-btn shadow">
           Apply Courses
        </a>
    </div>
</div>
</section>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const animatedElements = document.querySelectorAll('.animate-item');

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('animated');
                observer.unobserve(entry.target); 
            }
        });
    }, {
        threshold: 0.15 
    });

    animatedElements.forEach(el => observer.observe(el));
});
</script>

@endsection