@{
    ViewBag.Title = "About";
}

<main aria-labelledby="title" >



    @*<h2 id="title">@ViewBag.Title.</h2>
        <h3>@ViewBag.Message</h3>*@






    <link rel="stylesheet" type="text/css" href="~/Css/Logocss.css" />
    <link href="~/Css/examplecss.css" rel="stylesheet" />

 <style>
     .card {
         transition: transform 0.3s ease, box-shadow 0.3s ease;
         text-align: center; /* Center align text inside the card */
     }

     .card-hover:hover {
         transform: translateY(-10px);
         box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
     }

     .shadow {
         box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
     }

     .card-img-top.rounded-circle {
         box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Shadow around the image */
         border: 5px solid #fff; /* Optional: white border around the image */
         transition: transform 0.3s ease, box-shadow 0.3s ease;
     }

         .card-img-top.rounded-circle:hover {
             transform: scale(1.1); /* Slightly enlarge the image on hover */
             box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
         }

   
            

   

                 /*  css form text shadow*/
        h2 {
         text-shadow: 2px 2px 4px gray;
             /*text-shadow: 0 0 10px #00ff00;*/
                /* text-shadow: 2px 2px 4px red, -2px -2px 4px blue;*/
                /* color: transparent;
                text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5)*/
        }

        

          p{
            font-family: Arial, sans-serif;
            font-size: 16px;
            line-height: 1.6;
            color: #333;
            text-align: justify;
            margin: 10px 0;
           
            padding: 5px;
            word-wrap: break-word;
            max-width: 600px;
            margin: 0 auto;
          
          }
        .aboutp {
         font-family: Arial, sans-serif;
         font-size: 16px;
         line-height: 1.6;
         color: #333;
         text-align: justify;
         margin: 10px 0;
         word-wrap: break-word;
         max-width: 600px;
         margin: 0 auto;
        }

           /*  hover class csss*/
     .hover:hover {
         /* color: black;
         transition: color 0.3s ease;*/
          color: red;
         text-decoration: underline;
         /*background-color: transparent;
         transition: background-color 0.3s ease;*/
         /* background-color: yellow;*/
         /* Increase size */
         transform: scale(1.5);
        
         /*border-style: solid;*/ /* Changes to solid border */
         /*border-color: blue;
         border-radius:5px;
         border-width:initial;
         background-color: chocolate*/
     }



     main{
         margin: 0;
         padding: 0;
         overflow-x: hidden;
     }

     .container {
         width: 80%;
         margin: auto;
         overflow-x: hidden;
         padding: 2rem 0;
        
     }

           .about {
            text-align: center;
            margin-bottom: 2rem;
           }

            .about img {
                max-width: 100%;
                height: auto;
                border-radius: 10px;
            }
/*
           .team {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            gap: 20px;
           }*/

           .team-member {
            flex: 1 1 calc(33% - 20px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            box-sizing:border-box;
            border-radius: 10px;
            text-align: center;
            padding: 1rem;
            background: #fff;
           }


            .team-member img {
                width: 100px;
                height: 100px;
                border-radius: 50%;
                margin-bottom: 1rem;
            }

        footer {
            background: #333;
            color: #fff;
            text-align: center;
            padding: 1rem 0;
        }
     .row{
         overflow-y:hidden;
     }
     .card {
         flex: 1 1 calc(33% - 20px);
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
         box-sizing: border-box;
         border-radius: 10px;
         text-align: center;
         padding: 1rem;
         background: #fff;
     }
    </style>

   

 <div class="container" data-aos="fade-up" data-aos-offset="200">
     <section class="about ">


         @*<h2>WELCOME TO BAVRANI MEDICAL SOLUTIONS PRIVATE LIMITED</h2>*@
         <div class="text-center my-5">
             <h1 data-aos="fade-up" data-aos-offset="200">Professional  <span class="text-primary"> Care Can Trust</span> & <span class="text-success">We Provide.</span></h1>
             <hr class="w-25 m-auto" />
         </div>
         <div class="row my-5">
             <div class=" col-sm-4 col-md-4 col-lg-4 col-12 my-2" data-aos="fade-up">
                 <div class="card" style="width: 18rem;">

                     <div class="card-body">
                         <h5 class="card-title fs-4"> <i class="fa-solid fa-person"></i>Experienced Staff</h5>
                         <p class="card-text">We have experienced & dedicated staff who are always ready to deal with the most difficult problems with the patient at there home.</p>

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

             <div class="col-sm-12 col-md-4 col-lg-4 col-12 my-2" data-aos="fade-up">
                 <div class="card" style="width: 18rem;">

                     <div class="card-body">
                         <h5 class="card-title  fs-4"> <i class="fa-solid fa-sun"></i>Quick Response</h5>
                         <p class="card-text"> The right treatment at the right time is the most important for fast recovery, we focus on finding and treating with best possible solution,so the patient feel better soon.</p>
                     </div>
                 </div>
             </div>
             <div class="col-sm-12 col-md-4 col-lg-4 col-12 my-2" data-aos="fade-up">
                 <div class="card" style="width: 18rem;">

                     <div class="card-body">
                         <h5 class="card-title  fs-4"> <i class="fa-solid fa-stethoscope"></i>Quality Care</h5>
                         <p class="card-text"> Along with taking proper care, we also know how to maintain quality care which is very important according to patient environment.</p>
                     </div>
                 </div>
             </div>
















         </div>


         <img src="~/Img/CriticalCare.jpg" alt="About Us Image">

         <br /><br /> <p class="aboutp"> We are dedicated to Our mission is to delivery the best possible personalised medical treatment in the comfort of the patient's home with a dedicated team of experts.
         <p class="aboutp">We have a range of services available that help maintain the health of  patient  body.</p>
         <p class="aboutp">Our Focus is to build turst and a safe environment so that patients can help properly and the best helping way in their  environment.</p>
         <p2 class="aboutp">Our team works hard to deliver the best SERVICES to our valued customers.</p2>
         <br />

         <h6 class="hover">  Medical Equipment On Rent.</h6>
         <br />
         <h6 class="hover"> Male/Female Nursing Staff.</h6>
         <br />
         <h6 class="hover"> Critical Patient Care.</h6>
         <br />
         <h6 class="hover"> ICU Set Up At Your Home.</h6>
         <br />
         <h6 class="hover"> Injection Visit.</h6>
         <br />
         <h6 class="hover"> Baby Care.</h6>
         <br />
         <h6 class="hover">   @Html.ActionLink("Ambulance Service 24x7.", "AmbulanceServices", "Services", new { area = "" }, new { @class = "nav-link text-dark" }) </h6>
         <br />
         <h6 class="hover">Doctor Visit.</h6>
         <br />
         <h6 class="hover">Physiotherapist Care.</h6>
         <br />
         <h6 class="hover">Lab Test.</h6>
         <br />

         <img src="~/Img/MainPoster.jpg" alt="About Us Image"> <!-- Replace with your image -->
         <br />

     </section>

   

     

    






             <section class="team my-5 text-center">
                 <div class="container">
                     <div class="text-center my-5">
                         <h1 data-aos="fade-up" data-aos-offset="200">Our <span class="text-primary"> Team</span></h1>
                         <hr class="w-25 m-auto" />
                     </div>

                     <div class="row ms-2">
                         <div class="col-sm-12 col-md-4 col-lg-4 col-12 my-2 d-flex" data-aos="fade-up" data-aos-offset="200">
                             <div class="card flex-grow-1 shadow card-hover" style="width: 18rem;">
                                 <img src="~/photos/preeticeo.jpg" class="card-img-top img-fluid p-2 rounded-circle" alt="CEO & Founder Image" style="height: 150px; width: 150px; object-fit: cover; margin: auto;">

                                 <div class="card-body">
                                     <h5 class="card-title">
                                         <span class="text-danger fs-1">Km. Kajal</span>
                                     </h5>
                                     <p class="card-text">
                                         Bavrani Medical Solutions Pvt. Ltd. is your trusted companion in healthcare services.
                                         Our mission is to provide exceptional home care experiences, ensuring comfort, dignity, and well-being for our clients.
                                     </p>
                                     <p class="card-text"><strong>CEO & Founder</strong></p>
                                     <p class="card-text"><strong>Contact:</strong> 8449187163</p>
                                 </div>
                             </div>
                         </div>
                         <div class="col-sm-12 col-md-4 col-lg-4 col-12 my-2 d-flex" data-aos="fade-up" data-aos-offset="200">
                             <div class="card flex-grow-1 shadow card-hover" style="width: 18rem;">
                                 <img src="~/photos/ravi.jpg" class="card-img-top img-fluid p-2 rounded-circle" alt="Mr. Ravi Kumar" style="height: 150px; width: 150px; object-fit: cover; margin: auto;">

                                 <div class="card-body">
                                     <h5 class="card-title">
                                         <span class="text-danger fs-1">Mr. Ravi Kumar</span>
                                     </h5>
                                     <p class="card-text">Details not found yet.</p>
                                 </div>
                             </div>
                         </div>
                         <div class="col-sm-12 col-md-4 col-lg-4 col-12 my-2 d-flex" data-aos="fade-up" data-aos-offset="200">
                             <div class="card flex-grow-1 shadow card-hover" style="width: 18rem;">
                                 <img src="~/photos/eshunursingf.jpg" class="card-img-top img-fluid p-2 rounded-circle" alt="Shivani Kumari" style="height: 150px; width: 150px; object-fit: cover; margin: auto;">

                                 <div class="card-body">
                                     <h5 class="card-title">
                                         <span class="text-danger fs-1">Shivani Kumari</span>
                                     </h5>
                                     <p class="card-text"><strong>Department:</strong> Nursing</p>
                                     <p class="card-text"><strong>Role:</strong> Nursing Team Leader</p>
                                     <p class="card-text"><strong>Work Experience:</strong> 4 years</p>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
             </section>






































 </div>






</main>