@extends('layouts.admin-app')

@section('content')

<style>
/*footer*/
.slick-prev, .slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 25px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev:before {
    content: '←';
}
.slick-prev:before, .slick-next:before {
    font-family: 'slick';
    font-size: 26px;
    line-height: 1;
    opacity: .75;
    color:black;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.client-section{
  background: url(img/carousel-bg.png);
}


.auto{
  margin-top: -40px;
  margin-left: 54px;
  font-size: 20px;
  position: relative;
  z-index: 1;
  cursor: pointer;
}
@media (max-width: 768px) {
  .auto{
  margin-top: -16px;

}
}

@media (min-width: 450px) {
      .main-card {
        width: 96%;
        max-width: 400px;
        height: calc(100% - 159px) !important;
        border-radius: 8px !important;
        max-height: 600px;
      margin: 16px!important;
      }
    }

    .collapsed_new {
      width: 53px !important;
      height: 53px !important;
      border-radius: 26px !important;
      margin: 16px!important;
    }

    .main-card {
      background: white;
      color: white;
      width: 100%;
      height: 100%;
      margin: 0px;
      border-radius: 0px;
      display: flex;
      border: 2px solid white;
      flex-direction: column;
      overflow: hidden;
      right: 0;
      bottom: 0;
      position: absolute;
      transition: all 0.5s;
      box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2),0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
#chatbot_toggle {
  position: absolute;
    right: -2px;
    border: none;
    height: 54px;
    width: 54px;
    background: #b56447;
    cursor: pointer;
    padding: 13px;
    color: white;
    outline: none;
}
#chatbot_toggle:hover {
  background: #b56447;

}
.line-chat {
  height: 1px;
  background-color: brown;
  width: 100%;
  opacity: 0.2;
}
.main-title {
    background-color: #efe3e3;
  font-size: large;
  font-weight: bold;
  display: flex;
  color: #b56447ff;
  height: 54px;
   color: transparent;
  background-image: linear-gradient(#613013, #e0a072);
  -webkit-background-clip: text;
}
.main-title>div{
  height:48px;
  width:48px;
  display:flex;
  margin-left:8px;
}
.main-title svg {
  height: 24px;
  margin: auto;
}
.main-title > span {
  margin: auto auto auto 8px;
  color: transparent; background-image: linear-gradient(#613013, #e0a072); -webkit-background-clip: text;
}
.chat-area {
  flex-grow: 1;
  overflow: auto;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}
.input-message {
  padding: 8px 48px 8px 16px;
  flex-grow: 1;
  border: none;
  padding-right: 0px;
  font-size: 13px;
}
.input-message:focus {
  outline: none;
}
.input-div {
  height: 48px;
  display: flex;
}

.input-send {
  background: transparent;
  width: 96px;
  height: 48px;
  right: 0%;
  border: none;
  cursor: pointer;
}
.input-send:hover {
  background: lavender;
}
.input-send svg {
  fill:  #b56447ff;
  margin: 11px 8px;
}
.chat-message-div {
  display: flex;
}

.chat-message-sent {
  background-color: white;
  margin: 8px 16px 8px 64px;
  padding: 8px 16px;
  animation-name: fadeIn;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 100ms;
  color: black;
  border-radius: 8px 8px 2px 8px;
  background-color: lavender;
}

.chat-message-received {
  background-color: white;
  margin: 8px 64px 8px 16px;
  padding: 8px 16px;
  animation-name: fadeIn;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 100ms;
  color: black;
  border-radius: 8px 8px 8px 2px;
  background-color: lavender;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}
/*End Footer*/

 .bg-title-page {
    background-image: url(img/annual_header.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 400px;
}
@media (max-width:768px){
    .bg-title-page {


    background-size: 100% 62%;

    background-attachment: scroll;

    height: 370px;
    margin-top: -69px;


}
}
.pagetitle {
    color: white;
    /* background: #dedede; */
}

.pagetitle-inner {
    padding-top: 140px;
    padding-bottom: 112px;
}

.fadeInUp {
    animation-name: fadeInUp;
}

.pagetitle h1 {
    margin-bottom: 28px;
    padding-top: 0;
    margin-top: 0;
    font-size: 73px;
    line-height: 48px;
    font-weight: 600;
    color: white;
}
@media (max-width:768px){
  .pagetitle h1 {

    font-size: 40px !important;
    line-height: 18px !important;

}
}
@media (max-width:480px){
  .pagetitle h1 {

    font-size: 25px !important;
    line-height: 33px !important;
  }
  .breadcrumb1 {
        margin-top: -17px;
        font-size: 10px;
    }
}
.breadcrumb1 a, .breadcrumb1 span {
    font-size: 17px;
}
.breadcrumb1 a, .breadcrumb2 a, .breadcrumb1 span, .breadcrumb2 span {
    line-height: 1;
    word-wrap: break-word;
}
.pagetitle a:link, .pagetitle a:visited {
    color: white;
}
.breadcrumb1 a, .breadcrumb1 span {
    font-size: 17px;
}
.breadcrumb1 a, .breadcrumb2 a, .breadcrumb1 span, .breadcrumb2 span {
    line-height: 1;
    word-wrap: break-word;
}
.breadcrumb1 a, .breadcrumb1 span {
    font-size: 17px;
}
.breadcrumb1 a, .breadcrumb2 a, .breadcrumb1 span, .breadcrumb2 span {
    line-height: 1;
    word-wrap: break-word;
}
.breadcrumb1 span a span, .breadcrumb2 span a span, .breadcrumb1 span.current-item, .breadcrumb2 span.current-item {
    padding: 0;
    font-weight: 500;
}
.breadcrumb1 a, .breadcrumb1 span {
    font-size: 17px;
}
.breadcrumb1 a, .breadcrumb2 a, .breadcrumb1 span, .breadcrumb2 span {
    line-height: 1;
    word-wrap: break-word;
}

.editor-styles-wrapper, .entry-content {
    counter-reset: footnotes;
}
/* 2nd section */

.elementor-460 .elementor-element.elementor-element-da0b444 {
    margin-top: -115px;
    /* margin-bottom: 100px; */
}
.elementor-element {
    --widgets-spacing: 20px;
}
.elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 1140px;
}
.elementor-section .elementor-container {
    display: flex;
    margin-right: auto;
    margin-left: auto;
    position: relative;
}
.elementor *, .elementor :after, .elementor :before {
    box-sizing: border-box;
}
@media (min-width: 768px){
.elementor-column.elementor-col-100, .elementor-column[data-col="100"] {
    width: 100%;
}
}
.elementor-element, .elementor-lightbox {
    --swiper-theme-color: #000;
    --swiper-navigation-size: 44px;
    --swiper-pagination-bullet-size: 6px;
    --swiper-pagination-bullet-horizontal-gap: 6px;
}
.elementor-element {
    --widgets-spacing: 20px;
}


.elementor-column {
    position: relative;
    min-height: 1px;
    display: flex;
    margin-left: 101px;
    margin-top: 11px;
}

/* ophwc logo */

@media (max-width: 768px){
    .elementor-column {

    margin-left: 9px !important;

}
}

@media (max-width: 991px){
    .elementor-column {
  display: none !important;
}
.elementor-460 .elementor-element.elementor-element-da0b444 {

    margin-bottom: 172px;
}

}
@media (max-width: 768px){
    .elementor-460 .elementor-element.elementor-element-da0b444 {

margin-bottom: 100px !important;
}

}
.elementor-column-gap-default>.elementor-column>.elementor-element-populated {
    padding: 10px;
}
.elementor-widget-wrap {
    position: relative;
    width: 100%;
    flex-wrap: wrap;
    align-content: flex-start;
}
.elementor:not(.elementor-bc-flex-widget) .elementor-widget-wrap {
    display: flex;
}
.elementor-widget-wrap>.elementor-element {
    width: 100%;
}
.elementor-section {
    position: relative;
}
@media (min-width: 768px){
.elementor-460 .elementor-element.elementor-element-8e3f050 {
    width: 30.353%;
}}
@media (min-width: 768px){
.elementor-460 .elementor-element.elementor-element-0c86c56 {
    width: 38.124%;
}}
.zoomIn {
    animation-name: zoomIn;
}
.elementor-460 .elementor-element.elementor-element-0c86c56:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-460 .elementor-element.elementor-element-0c86c56 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-color: #FFFFFF;
}
.elementor-460 .elementor-element.elementor-element-0c86c56 > .elementor-element-populated {
    border-style: solid;
    border-width: 8px 0px 0px 0px;
    border-color: #b56447ff;
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
    margin: 0px 0px 0px 0px;
    --e-column-margin-right: 0px;
    --e-column-margin-left: 0px;
    padding: 20px 30px 20px 50px;
    box-shadow: 2px 0px 9px -3px black;

}
.elementor-widget-wrap {
    position: relative;
    width: 100%;
    flex-wrap: wrap;
    align-content: flex-start;
}
.elementor-widget-wrap>.elementor-element {
    width: 100%;
}
.elementor-element .elementor-widget-container {
    transition: background .3s,border .3s,border-radius .3s,box-shadow .3s,transform var(--e-transform-transition-duration,.4s);
}
.elementor *, .elementor :after, .elementor :before {
    box-sizing: border-box;
}
.elementor-460 .elementor-element.elementor-element-b415383 {
    margin-top: 0px;
    margin-bottom: 100px;
    padding: 0px 15px 0px 10px;
}
.fadeInUp {
    animation-name: fadeInUp;
}
.animated {
    animation-duration: 1.25s;
}
.about-section h6{
  color: green;
    letter-spacing: 1px;
    font-size: 20px;
}
/* .about-section h1{
    font-size: 32px;
    color: #b56447ff;
} */
.about-section p{
    letter-spacing: 1px;
    text-align: justify;
    font-size: 13px;

}
.about-section .bg-about{
    border: 1px solid black;
    background: #f6f6f6;
    padding: 20px;
  border-left: 7px solid #b56447ff;
}
.tableboardnew .success{
    background: #b56447;
    color: white;
}
.tableboardnew{
border: 2px solid white;
    padding: 25px;
    box-shadow: -3px 3px 10px -2px rgb(0 0 0 / 64%);
    font-size: 13px;
    letter-spacing: 0.7px;
    margin-bottom: 50px;
}
.fa-file-pdf{
    color: red;
    font-size: 24px;
}
.quick-links {
    text-align: center;
    margin-top: 20px; /* Adjust margin-top as needed */
}
.quick-links svg {
    width: 20px; /* Adjust the width of the SVG */
    height: 20px; /* Adjust the height of the SVG */
}
.quick-links p {
   margin-top: 10px;
}
</style>

<div class="bg-title-page pagetitle breadcrumbleft">
    <div class="pagetitle-inner">
        <div class="container animatedcustom animated fadeInUp">
<div class="row">
    <div class="col-lg-8">
    <h1><span style="color: #b56447ff;">A</span>nnual <span style="color: #b56447ff;">R</span>eports</h1>
    <div class="breadcrumb1">
        <span property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage" title="Go to Dustro." href="{{route('main_index')}}" class="home"><span property="name">Home</span></a>

        </span>->

        <span property="itemListElement" typeof="ListItem"><span property="name" class="post post-page current-item">Annual Reports</span><meta property="url" content="http://rayoflightthemes.com/wordpress-themes/dustro-wordpress-theme/about-us/"><meta property="position" content="2"></span>

    </div>
    </div>
    <div class="col-lg-4">
        </div>
</div>
        </div>

    </div>


</div>

<div class="post-460 page type-page status-publish hentry" id="post-460">
    <div class="post-inner">
        <div class="entry-content">
        <div data-elementor-type="wp-page" data-elementor-id="460" class="elementor elementor-460">
        <section class="elementor-section elementor-top-section elementor-element elementor-element-da0b444 text-center-1024 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="da0b444" data-element_type="section">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-fa458e2" data-id="fa458e2" data-element_type="column">
    <div class="elementor-widget-wrap elementor-element-populated">
    <section class="elementor-section elementor-inner-section elementor-element elementor-element-06fd6a0 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="06fd6a0" data-element_type="section">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-0a5c8e5 elementor-hidden-tablet elementor-hidden-phone" data-id="0a5c8e5" data-element_type="column">
			<div class="elementor-widget-wrap">
									</div>

		</div>
        <div class="elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-8e3f050 elementor-hidden-tablet elementor-hidden-phone" data-id="8e3f050" data-element_type="column">
			<div class="elementor-widget-wrap">
									</div>
		</div>
        <div class="elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-0c86c56 box-shadow animated zoomIn " data-id="0c86c56" data-element_type="column" data-settings="{&quot;background_background&quot;:&quot;classic&quot;,&quot;animation&quot;:&quot;zoomIn&quot;}">
			<div class="elementor-widget-wrap elementor-element-populated">
								<div class="elementor-element elementor-element-40f0baa call-us-box-767 elementor-widget elementor-widget-text-editor" data-id="40f0baa" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
			<style>/*! elementor - v3.16.0 - 12-09-2023 */
.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}</style>

<img src="{{asset('img/logo10.png')}}" alt="" style="width: 90%; height:130px;">

</div>
				</div>
					</div>
		</div>
</div>
    </section>

    </div>

</div>

        </section>
        </div>

        </div>

    </div>
</div>

<!-- <section>
    <div class="ghvh" style="background: green;">hvjhg</div>
</section> -->

<section class="about-section">
   <div class="container">
      <div class="row">

         <div class="col-lg-12">

            <h1>Annual Reports</h1>
            <br>



         </div>
      </div>
   </div>
</section>
<section class="project-section ">
<div class="container">

<section class="tableboardnew ">
      <div class="row">
        <div class="col-lg-12">
        <div class="table-responsive">
                    <table class="table table-striped table-bordered">
                        <thead>
                            <tr class="success">
                                <th style="text-align: center;" colspan="3">Annual Reports</th>
                            </tr>
                        <tr>
                            <th style="text-align: center;width:14%;" >SL NO.</th>
                            <th style="text-align: center; width:42%;" >TITLE</th>
                            <th style="text-align: center;width:20%;" > DOCUMENTS</th>
                            </tr>
                    </thead>
                    <tbody>