@section('title')
VISION & MISSION
@endsection
@extends('layouts.layoutabout')

@section('aboutheading')
<h2 style="padding-top: 210px; color:white; font-family:Poppins, serif;" class="fw-bold text-uppercase headingm1 headerinner">Vision & Mission</h2>
<span style="color:white; font-family: Lexend, serif;" class="fw-bold "><a href=""
        style="text-decoration: none; color:white;">HOME</a>&nbsp;/&nbsp;<a href="{{asset('/')}}"
        style="color:white; text-decoration: none; font-family:Poppins, serif;" class="text-uppercase">Vision & Mission</a></span>
@endsection



@section('Aboutsection')
    <div class="container px-5">
        <div class="row mt-3">
            <div class="col-12 mb-4">
                <h4 class="fw-bold headingmain" style="color:#ff6600; border-left:5px solid #ff6600; padding-left:10px; font-family:'Lexend', serif;">
                    Vision & Mission
                </h4>
            </div>
        </div>

        <!-- Vision Section -->
        <div class="row align-items-center bg-light shadow-sm rounded-2 overflow-hidden mb-5">
            <div class="col-md-5 p-0">
                <div class="vision-img-container">
                    <img src="https://media.istockphoto.com/id/859239878/photo/business-women-holding-light-bulbs-ideas-of-new-ideas-with-innovative-technology-and-creativity.jpg?s=612x612&w=0&k=20&c=M4iQ_CJgK9C7EsARy_TBa0RX9AoXO5kFv0t_I2kekAI=" 
                        class="img-fluid rounded-start w-100" style="height: 220px !important;"  alt="Vision Image">
                </div>
            </div>
            <div class="col-md-7 p-4">
                <h5 class="fw-bold text-uppercase" style="color:#ff6600; font-family:'Lexend', serif;">Vision of the Institute</h5>
                <hr/>
                <p class="mt-3" style="text-align: justify; line-height:35px; font-size: 17px; font-family:'Poppins', sans-serif;">
                    To become a renowned institute that effectively contributes to the creation of a value-added technical workforce by fostering innovation, wisdom, and excellence blended with social and ethical values.
                </p>
            </div>
        </div>

        <!-- Mission Section -->
        <div class="row mb-4 align-items-center bg-light shadow-sm rounded-2 overflow-hidden">
            <div class="col-md-6 p-0 order-md-2">
                <div class="vision-img-container">
                    <img src="https://sriinducoe.ac.in/wp-content/uploads/2019/12/mission.jpg" 
                        class="img-fluid rounded-end w-100"  alt="Mission Image">
                </div>
            </div>
            <div class="col-md-6 order-md-1 p-4">
                <h5 class="fw-bold text-uppercase" style="color:#ff6600; font-family:'Lexend', serif;">Mission of the Institute</h5>
                <hr/>
                <ul style="line-height: 35px; font-size: 17px; font-family:'Poppins', sans-serif; padding-left: 20px;" class="mt-3">
                    <li>To develop experiential facilities and resources to support effective teaching and learning processes.</li>
                    <li>To edify entrepreneurial skills and inculcate innovative thoughts in students.</li>
                    <li>To build bridges between academia, industry, and society.</li>
                    <li>To imbibe moral and spiritual values alongside technical erudition.</li>
                </ul>
            </div>
        </div>
    </div>

    <style>
        .vision-img-container {
            position: relative;
            overflow: hidden;
        }
        .vision-img-container img {
            transition: transform 0.5s ease, filter 0.5s ease;
        }
        .vision-img-container:hover img {
            transform: scale(1.05);
            filter: brightness(85%);
        }
    </style>
@endsection