@extends('layouts.main.main')

@section('title')
Committee / Commission |


@endsection

@section('style')
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">

<style>
  * {
    margin: 0;
    padding: 0;
  }

  body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100vh;
    background-color: #FEFEFE;
  }

  i {
    opacity: 0;
    font-size: 28px;
    color: #1F1E1E;
    will-change: transform;
    -webkit-transform: scale(.1);
    transform: scale(.1);
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
  }

  .btn_wrap {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    width: 240px;
    height: 72px;
    background-color: #EEEEED;
    border-radius: 80px;
    padding: 0 18px;
    will-change: transform;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
  }

  .btn_wrap:hover {
    /* transition-delay: .4s; */
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
  }

  span {
    position: absolute;
    z-index: 99;
    width: 240px;
    height: 72px;
    border-radius: 80px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 20px;
    text-align: center;
    line-height: 70px;
    letter-spacing: 2px;
    color: #EEEEED;
    background-color: #1F1E1E;
    padding: 0 18px;
    -webkit-transition: all 1.2s ease;
    transition: all 1.2s ease;
  }

  .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 240px;
    height: 64px;
    border-radius: 80px;
  }

  .container i:nth-of-type(1) {
    -webkit-transition-delay: 1.1s;
    transition-delay: 1.1s;
  }

  .container i:nth-of-type(2) {
    -webkit-transition-delay: .9s;
    transition-delay: .9s;
  }

  .container i:nth-of-type(3) {
    -webkit-transition-delay: .7s;
    transition-delay: .7s;
  }

  .container i:nth-of-type(4) {
    -webkit-transition-delay: .4s;
    transition-delay: .4s;
  }

  .btn_wrap:hover span {
    -webkit-transition-delay: .25s;
    transition-delay: .25s;
    -webkit-transform: translateX(-280px);
    transform: translateX(-280px)
  }

  .btn_wrap:hover i {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }


  .dr {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 100px;
  }
</style>
@endsection('style')
@section('content')
<!--Main Slider Start-->
<div class="inner-banner-header wf100 default-banner">
  <h1>Executive Committee</h1>
  <div class="gt-breadcrumbs">
    <ul>
      <li> <a href="{{ url('/') }}"> <i class="fas fa-home"></i> Home </a> </li>
      <li> <a href="{{ url('/executive_committee') }}" class="active"> Executive Committee</a> </li>
    </ul>
  </div>
</div>
<!--Main Slider Start-->
<!--Main Content Start-->
<div class="main-content innerpagebg wf100 p80 default-bg" style="width:100% !important">
  <!--News Large Page Start-->
  <!--Start-->
  <div class="image-gallery gallery ">
    <div class="container">
      <div class="row">
        <!--News Start-->
        <div class="col-lg-12  ">


          <div class="mt-4">
            {!! $shareComponent !!}
          </div>
          <div class="card">
            <div class="card-body">
              <!-- <div class="d-flex justify-content-center"> -->
              <div class="row">
              {{--  @if(count($members) > 0)
                  @foreach ($members as $item)
                  <!--Team Box Start-->
                  <div class="col-md-4 " style="">
                    <div class="col-lg-6">

                    </div>
                    <div class="team-squad-box">

                      <!-- <a href="team-one.html#" class="follow">Follow</a> -->






                      <img src="{{$item->image}}" alt=" ">
                    </div>
                    <div class="pro-txt" style="margin:15px;text-align:center">
                      <span>{{$item->name}}</span><br>
                      <span><b>{{$item->designation}}</b></span><br>
                      <span>
                        <img src="{{$item->flag}}" alt=" " style="width:45px;height:25px">
                      </span>


                    </div>
                  </div>
                  <!--Team Box End-->
                  @endforeach
                  @else
                    <div class="col-4 " style="">
                    </div>

                      <div class="col-4 " style="">
                        <div class="d-flex justify-content-center">
                          No Executive Committee added yet.
                        </div>
                      </div>
                    
                 
                  @endif--}}
                  <div class="col-4 " style="">
                    </div>

                      <div class="col-4 " style="">
                        <div class="d-flex justify-content-center">
                        <h3 style="color:red">Uploading It Soon....</h3>
                        </div>
                      </div>
              </div>
              <!-- </div> -->
            </div>
          </div>


        </div>
        <!--News End-->
      </div>
    </div>
  </div>
  <!--End-->
</div>
<!--Main Content End-->
@endsection
<script>




</script>